mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): navbar in progress
This commit is contained in:
Junior Garcia
parent
c24efed184
commit
ce9abed071
@ -1,7 +1,6 @@
|
||||
.now/*
|
||||
.next/*
|
||||
*.css
|
||||
examples/*
|
||||
dist
|
||||
esm/*
|
||||
public/*
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
dist
|
||||
examples
|
||||
node_modules
|
||||
plop
|
||||
coverage
|
||||
|
||||
@ -10,7 +10,7 @@ interface DocsLayoutProps {
|
||||
export default function DocsLayout({children}: DocsLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<main className="relative container mx-auto max-w-7xl z-10 px-6 pt-16 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="hidden relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
|
||||
<DocsSidebar routes={manifest.routes} />
|
||||
|
||||
46
apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
Normal file
46
apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
|
||||
|
||||
const AcmeLogo = () => (
|
||||
<svg fill="none" height="36" viewBox="0 0 32 32" width="36">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Navbar shouldHideOnScroll>
|
||||
<NavbarBrand>
|
||||
<AcmeLogo />
|
||||
<p className="font-bold text-inherit">ACME</p>
|
||||
</NavbarBrand>
|
||||
<NavbarContent className="hidden sm:flex gap-2" justify="center">
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Features
|
||||
</NavbarItem>
|
||||
<NavbarItem isActive as={Link} href="#">
|
||||
Customers
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Integrations
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem as={Link} className="hidden lg:flex" href="#">
|
||||
Login
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button as={Link} color="primary" href="#" variant="flat">
|
||||
Sign Up
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
78
apps/docs/app/examples/navbar/layout.tsx
Normal file
78
apps/docs/app/examples/navbar/layout.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
const Content = () => (
|
||||
<div className="px-4 flex gap-4 flex-col pb-16 flex-grow">
|
||||
<h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
|
||||
fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
|
||||
egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
|
||||
placerat duis ultricies.
|
||||
</p>
|
||||
<p>
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
|
||||
sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
|
||||
proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
|
||||
tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
|
||||
gravida in.
|
||||
</p>
|
||||
<p>
|
||||
Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
|
||||
Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
|
||||
consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
|
||||
pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
|
||||
ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
|
||||
dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
|
||||
tellus orci ac.
|
||||
</p>
|
||||
<p>
|
||||
Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. In pellentesque massa placerat
|
||||
duis ultricies. Sit amet massa vitae tortor condimentum. Morbi tincidunt augue interdum velit
|
||||
euismod. Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. Vitae
|
||||
justo eget magna fermentum iaculis. Arcu non odio euismod lacinia at quis. Et leo duis ut diam
|
||||
quam nulla porttitor massa. Eget nunc scelerisque viverra mauris. Suscipit tellus mauris a
|
||||
diam maecenas sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas erat
|
||||
imperdiet sed euismod nisi porta. In ante metus dictum at tempor commodo. In cursus turpis
|
||||
massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat. Iaculis eu non diam
|
||||
phasellus vestibulum lorem sed risus.
|
||||
</p>
|
||||
<p>
|
||||
Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Imperdiet massa tincidunt
|
||||
nunc pulvinar sapien et ligula ullamcorper malesuada. Faucibus pulvinar elementum integer enim
|
||||
neque volutpat. Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in
|
||||
vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt praesent semper feugiat
|
||||
nibh sed. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Praesent semper
|
||||
feugiat nibh sed pulvinar proin gravida. Dis parturient montes nascetur ridiculus mus mauris.
|
||||
Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum at.
|
||||
Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec ac odio tempor orci
|
||||
dapibus ultrices in iaculis. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Quis
|
||||
lectus nulla at volutpat diam ut. Turpis egestas integer eget aliquet. Adipiscing tristique
|
||||
risus nec feugiat in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla
|
||||
facilisi nullam vehicula ipsum a arcu.
|
||||
</p>
|
||||
<p>
|
||||
Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
|
||||
sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
|
||||
proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
|
||||
tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
|
||||
gravida in.
|
||||
</p>
|
||||
<p>
|
||||
Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
|
||||
Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
|
||||
consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
|
||||
pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
|
||||
ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
|
||||
dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
|
||||
tellus orci ac.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function NavbarExamplesLayout({children}: {children: React.ReactNode}) {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{children}
|
||||
<Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
apps/docs/app/examples/navbar/static/page.tsx
Normal file
46
apps/docs/app/examples/navbar/static/page.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
|
||||
|
||||
const AcmeLogo = () => (
|
||||
<svg fill="none" height="36" viewBox="0 0 32 32" width="36">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Navbar position="static">
|
||||
<NavbarBrand>
|
||||
<AcmeLogo />
|
||||
<p className="font-bold text-inherit">ACME</p>
|
||||
</NavbarBrand>
|
||||
<NavbarContent className="hidden sm:flex gap-2" justify="center">
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Features
|
||||
</NavbarItem>
|
||||
<NavbarItem isActive as={Link} href="#">
|
||||
Customers
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Integrations
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem as={Link} className="hidden lg:flex" href="#">
|
||||
Login
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button as={Link} color="primary" href="#" variant="flat">
|
||||
Sign Up
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
46
apps/docs/app/examples/navbar/usage/page.tsx
Normal file
46
apps/docs/app/examples/navbar/usage/page.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
|
||||
|
||||
const AcmeLogo = () => (
|
||||
<svg fill="none" height="36" viewBox="0 0 32 32" width="36">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Navbar>
|
||||
<NavbarBrand>
|
||||
<AcmeLogo />
|
||||
<p className="font-bold text-inherit">ACME</p>
|
||||
</NavbarBrand>
|
||||
<NavbarContent className="hidden sm:flex gap-2" justify="center">
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Features
|
||||
</NavbarItem>
|
||||
<NavbarItem isActive as={Link} href="#">
|
||||
Customers
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Integrations
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem as={Link} className="hidden lg:flex" href="#">
|
||||
Login
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button as={Link} color="primary" href="#" variant="flat">
|
||||
Sign Up
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
@ -29,7 +29,7 @@ export default async function Home() {
|
||||
const data = await getData();
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-7xl px-6 pt-16 flex-grow">
|
||||
<main className="container mx-auto max-w-7xl px-6 flex-grow">
|
||||
<section className="flex flex-col items-center justify-center">
|
||||
<Hero />
|
||||
<FeaturesGrid features={landingContent.topFeatures} />
|
||||
|
||||
@ -6,6 +6,7 @@ import {Skeleton, Tab, Tabs} from "@nextui-org/react";
|
||||
import {motion, useInView} from "framer-motion";
|
||||
|
||||
import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
|
||||
import WindowResizer, {WindowResizerProps} from "./window-resizer";
|
||||
|
||||
import {GradientBoxProps} from "@/components/gradient-box";
|
||||
|
||||
@ -24,9 +25,9 @@ const DynamicSandpack = dynamic(() => import("../../../sandpack").then((m) => m.
|
||||
loading: () => <Skeleton className="w-full h-32 rounded-xl" />,
|
||||
});
|
||||
|
||||
interface CodeDemoProps extends UseCodeDemoProps {
|
||||
interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
|
||||
title?: string;
|
||||
component?: string;
|
||||
asIframe?: boolean;
|
||||
showSandpackPreview?: boolean;
|
||||
initialEditorOpen?: boolean;
|
||||
enableResize?: boolean;
|
||||
@ -37,25 +38,19 @@ interface CodeDemoProps extends UseCodeDemoProps {
|
||||
isGradientBox?: boolean;
|
||||
gradientColor?: GradientBoxProps["color"];
|
||||
defaultExpanded?: boolean;
|
||||
showWindowActions?: boolean;
|
||||
iframeSrc?: string;
|
||||
asIframe?: boolean;
|
||||
iframeInitialWidth?: number;
|
||||
previewHeight?: string | number;
|
||||
overflow?: "auto" | "visible" | "hidden";
|
||||
}
|
||||
|
||||
export const CodeDemo: React.FC<CodeDemoProps> = ({
|
||||
files = {},
|
||||
component,
|
||||
title,
|
||||
showEditor = true,
|
||||
showPreview = true,
|
||||
asIframe = false,
|
||||
showSandpackPreview = false,
|
||||
showOpenInCodeSandbox,
|
||||
showWindowActions = false,
|
||||
isGradientBox = false,
|
||||
enableResize = false,
|
||||
defaultExpanded = false,
|
||||
previewHeight = "auto",
|
||||
overflow = "visible",
|
||||
@ -100,24 +95,25 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
|
||||
const previewContent = useMemo(() => {
|
||||
if (!showPreview) return null;
|
||||
|
||||
const content = (
|
||||
<DynamicReactLiveDemo
|
||||
code={code}
|
||||
enableResize={enableResize || asIframe}
|
||||
gradientColor={gradientColor}
|
||||
height={previewHeight}
|
||||
const content = asIframe ? (
|
||||
<WindowResizer
|
||||
iframeHeight={previewHeight}
|
||||
iframeInitialWidth={iframeInitialWidth}
|
||||
iframeSrc={iframeSrc}
|
||||
iframeTitle={component}
|
||||
iframeTitle={title}
|
||||
/>
|
||||
) : (
|
||||
<DynamicReactLiveDemo
|
||||
code={code}
|
||||
gradientColor={gradientColor}
|
||||
isGradientBox={isGradientBox}
|
||||
noInline={noInline}
|
||||
overflow={overflow}
|
||||
showWindowActions={showWindowActions || asIframe}
|
||||
/>
|
||||
);
|
||||
|
||||
return renderContent(content);
|
||||
}, [displayMode, showPreview, isInView]);
|
||||
}, [displayMode, asIframe, showPreview, isInView]);
|
||||
|
||||
const editorContent = useMemo(() => {
|
||||
if (!showEditor) return null;
|
||||
|
||||
@ -7,13 +7,7 @@ import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
|
||||
|
||||
export interface ReactLiveDemoProps {
|
||||
code: string;
|
||||
height?: string | number;
|
||||
noInline?: boolean;
|
||||
showWindowActions?: boolean;
|
||||
iframeSrc?: string;
|
||||
iframeTitle?: string;
|
||||
iframeInitialWidth?: number;
|
||||
enableResize?: boolean;
|
||||
isGradientBox?: boolean;
|
||||
gradientColor?: GradientBoxProps["color"];
|
||||
overflow?: "auto" | "visible" | "hidden";
|
||||
@ -23,11 +17,6 @@ export const scope = {
|
||||
...Components,
|
||||
} as Record<string, unknown>;
|
||||
|
||||
{
|
||||
/* <GradientBox isCentered className="py-14 px-4 lg:px-8" color="orange" to="top-right">
|
||||
|
||||
</GradientBox> */
|
||||
}
|
||||
export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
|
||||
code,
|
||||
isGradientBox,
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
import React, {useEffect} from "react";
|
||||
import {motion, useMotionValue, useTransform} from "framer-motion";
|
||||
import {tv} from "tailwind-variants";
|
||||
|
||||
import {useIsMobile} from "@/hooks/use-media-query";
|
||||
import {useIsomorphicLayoutEffect} from "@/hooks/use-isomorphic-layout-effect";
|
||||
import {WindowActions} from "@/components/code-window/window-actions";
|
||||
|
||||
const resizer = tv({
|
||||
base: "flex items-center justify-end absolute right-[5px] z-10 w-auto xs:hidden",
|
||||
slots: {
|
||||
main: "relative w-full",
|
||||
barWrapper:
|
||||
"cursor-ew-resize select-none absolute d-flex justify-center flex items-center w-[10px] h-auto active:opacity-80",
|
||||
barInner: "relative z-10",
|
||||
bar: "w-[6px] h-[40px] rounded-full bg-default-400",
|
||||
iframeWrapper:
|
||||
"w-full h-full border border-default-200 dark:border-default-100 rounded-lg overflow-hidden",
|
||||
iframe: "w-full h-full border-none z-10 overflow-x-visible overflow-y-scroll",
|
||||
},
|
||||
variants: {
|
||||
hasInitialWidth: {
|
||||
true: {
|
||||
base: "justify-start",
|
||||
},
|
||||
},
|
||||
isMobile: {
|
||||
true: {
|
||||
barInner: "hidden",
|
||||
},
|
||||
},
|
||||
enablePointerEvents: {
|
||||
true: {
|
||||
iframe: "pointer-events-auto",
|
||||
},
|
||||
false: {
|
||||
iframe: "pointer-events-none select-none",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
hasInitialWidth: false,
|
||||
isMobile: false,
|
||||
enablePointerEvents: true,
|
||||
},
|
||||
});
|
||||
|
||||
export interface WindowResizerProps {
|
||||
iframeHeight?: string | number;
|
||||
iframeMinWidth?: number;
|
||||
iframeZoom?: number;
|
||||
iframeSrc?: string;
|
||||
iframeInitialWidth?: number;
|
||||
iframeTitle?: string;
|
||||
}
|
||||
|
||||
const MIN_WIDTH = 320;
|
||||
|
||||
const WindowResizer: React.FC<WindowResizerProps> = (props) => {
|
||||
let constraintsResizerRef = React.useRef<HTMLDivElement>(null);
|
||||
let resizerRef = React.useRef<HTMLDivElement>(null);
|
||||
let iframeRef = React.useRef<HTMLIFrameElement>(null);
|
||||
const [enablePointerEvents, setEnablePointerEvents] = React.useState(true);
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const {
|
||||
iframeSrc,
|
||||
iframeTitle,
|
||||
iframeHeight: height = "420px",
|
||||
iframeZoom = 1,
|
||||
iframeInitialWidth,
|
||||
iframeMinWidth: minWidth = MIN_WIDTH,
|
||||
} = props;
|
||||
const hasInitialWidth = iframeInitialWidth !== undefined;
|
||||
|
||||
const {main, base, barInner, barWrapper, bar, iframe, iframeWrapper} = resizer({
|
||||
hasInitialWidth,
|
||||
isMobile,
|
||||
enablePointerEvents,
|
||||
});
|
||||
|
||||
const resizerX = useMotionValue(0);
|
||||
const browserWidth = useTransform(resizerX, (x) =>
|
||||
hasInitialWidth ? iframeInitialWidth + x + 14 : `calc(100% + ${x}px - 14px)`,
|
||||
);
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
let observer = new window.ResizeObserver(() => {
|
||||
if (constraintsResizerRef.current && resizerRef.current) {
|
||||
let width = constraintsResizerRef.current.offsetWidth - resizerRef.current.offsetWidth;
|
||||
|
||||
if (resizerX.get() > width) {
|
||||
resizerX.set(width);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
constraintsResizerRef.current && observer.observe(constraintsResizerRef.current);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!resizerRef.current) {
|
||||
return;
|
||||
}
|
||||
resizerRef.current.onselectstart = () => false;
|
||||
}, []);
|
||||
|
||||
// inject iframe styles
|
||||
useEffect(() => {
|
||||
const iframeStyles = `
|
||||
body {
|
||||
zoom: ${iframeZoom};
|
||||
}
|
||||
`;
|
||||
|
||||
if (!iframeRef.current) {
|
||||
return;
|
||||
}
|
||||
const iframeDocument = iframeRef.current.contentDocument;
|
||||
|
||||
if (!iframeDocument) {
|
||||
return;
|
||||
}
|
||||
// add classname to the iframe html element
|
||||
iframeDocument?.documentElement?.classList?.add("overflow-hidden");
|
||||
|
||||
const style = iframeDocument.createElement("style");
|
||||
|
||||
if (style) {
|
||||
style.innerHTML = iframeStyles;
|
||||
}
|
||||
|
||||
iframeDocument.head?.appendChild(style);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={main()} style={{height}}>
|
||||
<motion.div
|
||||
className={iframeWrapper()}
|
||||
style={{
|
||||
width: isMobile ? "100%" : browserWidth,
|
||||
}}
|
||||
>
|
||||
<WindowActions />
|
||||
<motion.iframe ref={iframeRef} className={iframe()} src={iframeSrc} title={iframeTitle} />
|
||||
</motion.div>
|
||||
<div
|
||||
ref={constraintsResizerRef}
|
||||
className={base({
|
||||
className: "top-0 bottom-0 right-0 xs:w-mw-xs",
|
||||
})}
|
||||
style={{
|
||||
width: `calc(100% - ${hasInitialWidth ? iframeInitialWidth : minWidth}px - 20px)`,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
ref={resizerRef}
|
||||
_dragX={resizerX}
|
||||
className={barWrapper()}
|
||||
drag="x"
|
||||
dragConstraints={constraintsResizerRef}
|
||||
dragElastic={0}
|
||||
dragMomentum={false}
|
||||
style={{x: resizerX}}
|
||||
onDragEnd={() => {
|
||||
document.documentElement.classList.remove("dragging-ew");
|
||||
iframeRef.current?.classList.remove("dragging-ew");
|
||||
setEnablePointerEvents(true);
|
||||
}}
|
||||
onDragStart={() => {
|
||||
document.documentElement.classList.add("dragging-ew");
|
||||
iframeRef.current?.classList.add("dragging-ew");
|
||||
setEnablePointerEvents(false);
|
||||
}}
|
||||
>
|
||||
<div className={barInner()}>
|
||||
<div className={bar()} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WindowResizer;
|
||||
@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
import {usePathname} from "next/navigation";
|
||||
|
||||
import {siteConfig} from "@/config/site";
|
||||
|
||||
@ -8,6 +9,12 @@ const Link = dynamic(() => import("@nextui-org/react").then((mod) => mod.Link));
|
||||
const VercelCallout = dynamic(() => import("./vercel-callout").then((mod) => mod.VercelCallout));
|
||||
|
||||
export const Footer = () => {
|
||||
const pathname = usePathname();
|
||||
|
||||
if (pathname.includes("/examples")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="container mx-auto max-w-7xl pb-12 px-12">
|
||||
<div className="flex flex-col justify-center items-center gap-1">
|
||||
|
||||
@ -177,7 +177,7 @@ export const A11yOtb = () => {
|
||||
color="default"
|
||||
variant="flat"
|
||||
>
|
||||
<DropdownSection title="Actions">
|
||||
<DropdownSection showDivider title="Actions">
|
||||
<DropdownItem
|
||||
key="new"
|
||||
description="Create a new file"
|
||||
|
||||
@ -117,7 +117,7 @@ export const shopCartStyles = tv({
|
||||
contentWrapper: "ml-3",
|
||||
imageWrapper: [
|
||||
"lg:scale-[1.3]",
|
||||
"before:rounded-md",
|
||||
"before:rounded-sm",
|
||||
"before:from-[#323232] before:to-[#000000]",
|
||||
"shadow-xl",
|
||||
],
|
||||
|
||||
@ -9,7 +9,7 @@ import {LinkIcon} from "@nextui-org/shared-icons";
|
||||
const styles = tv({
|
||||
slots: {
|
||||
base: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
|
||||
card: "dark:border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
|
||||
card: "border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
|
||||
header: "gap-2 pb-0",
|
||||
body: "",
|
||||
iconWrapper:
|
||||
|
||||
@ -58,7 +58,7 @@ export const InstallBanner = () => {
|
||||
color="secondary"
|
||||
endContent={
|
||||
<ArrowRightIcon
|
||||
className="group-data-[hover=true]:translate-x-0.5 transition-transform"
|
||||
className="group-data-[hover=true]:translate-x-0.5 outline-none transition-transform"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
}
|
||||
|
||||
@ -104,6 +104,10 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
</Button>
|
||||
);
|
||||
|
||||
if (pathname.includes("/examples")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<NextUINavbar
|
||||
ref={ref}
|
||||
@ -112,7 +116,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
|
||||
})}
|
||||
isMenuOpen={isMenuOpen}
|
||||
maxWidth="xl"
|
||||
position="fixed"
|
||||
position="sticky"
|
||||
onMenuOpenChange={setIsMenuOpen}
|
||||
>
|
||||
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
|
||||
|
||||
@ -28,3 +28,4 @@ export * from "./tabs";
|
||||
export * from "./modal";
|
||||
export * from "./pagination";
|
||||
export * from "./dropdown";
|
||||
export * from "./navbar";
|
||||
|
||||
5
apps/docs/content/components/navbar/index.ts
Normal file
5
apps/docs/content/components/navbar/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import usage from "./usage";
|
||||
|
||||
export const navbarContent = {
|
||||
usage,
|
||||
};
|
||||
65
apps/docs/content/components/navbar/usage.ts
Normal file
65
apps/docs/content/components/navbar/usage.ts
Normal file
@ -0,0 +1,65 @@
|
||||
const AcmeLogo = `export const AcmeLogo = () => (
|
||||
<svg fill="none" height="36" viewBox="0 0 32 32" width="36">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
|
||||
import {AcmeLogo} from "./AcmeLogo.jsx";
|
||||
|
||||
export default function App() {
|
||||
|
||||
const parentRef = React.useRef(null);
|
||||
|
||||
return (
|
||||
<div ref={parentRef} className="w-full h-24 relative">
|
||||
<Navbar parentRef={parentRef} className="absolute top-0">
|
||||
<NavbarBrand>
|
||||
<AcmeLogo />
|
||||
<p className="font-bold hidden sm:block text-inherit">ACME</p>
|
||||
</NavbarBrand>
|
||||
<NavbarContent className="hidden md:flex">
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Features
|
||||
</NavbarItem>
|
||||
<NavbarItem isActive as={Link} href="#">
|
||||
Customers
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Integrations
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} color="foreground" href="#">
|
||||
Pricing
|
||||
</NavbarItem>
|
||||
<NavbarItem as={Link} className="hidden lg:block" color="foreground" href="#">
|
||||
Company
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem as={Link} href="#">
|
||||
Login
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button as={Link} color="primary" href="#" variant="flat">
|
||||
Sign Up
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/AcmeLogo.jsx": AcmeLogo,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -24,9 +24,20 @@ NextUI exports 5 dropdown-related components:
|
||||
|
||||
<ImportTabs
|
||||
commands={{
|
||||
main: 'import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem} from "@nextui-org/react";',
|
||||
individual:
|
||||
'import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem} from "@nextui-org/dropdown";',
|
||||
main: `import {
|
||||
Dropdown,
|
||||
DropdownTrigger,
|
||||
DropdownMenu,
|
||||
DropdownSection,
|
||||
DropdownItem
|
||||
} from "@nextui-org/react";`,
|
||||
individual: `import {
|
||||
Dropdown,
|
||||
DropdownTrigger,
|
||||
DropdownMenu,
|
||||
DropdownSection,
|
||||
DropdownItem
|
||||
} from "@nextui-org/dropdown";`
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
@ -152,6 +152,7 @@ You can customize the `Modal` component by passing custom Tailwind CSS classes t
|
||||
| defaultOpen | `boolean` | Whether the modal is open by default (uncontrolled). | - |
|
||||
| isDismissable | `boolean` | Whether the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key. | `true` |
|
||||
| isKeyboardDismissDisabled | `boolean` | Whether pressing the <Kbd>Esc</Kbd> key to close the modal should be disabled. | `false` |
|
||||
| shouldBlockScroll | `boolean` | Whether the modal should block the scroll of the page on open. | `true` |
|
||||
| hideCloseButton | `boolean` | Whether to hide the modal close button. | `false` |
|
||||
| closeButton | `ReactNode` | Custom close button to display on top right corner. | - |
|
||||
| motionProps | [MotionProps](#motion-props) | The props to modify the framer motion animation. Use the `variants` API to create your own animation. | |
|
||||
|
||||
@ -6,8 +6,78 @@ url: https://nextui.org/docs/components/navbar
|
||||
|
||||
# Navbar
|
||||
|
||||
A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
|
||||
A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.
|
||||
|
||||
```jsx
|
||||
import {Navbar} from "@nextui-org/react";
|
||||
```
|
||||
<ComponentLinks component="navbar" />
|
||||
|
||||
---
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 7 navbar-related components:
|
||||
|
||||
- **Navbar**: The main component of navbar.
|
||||
- **NavbarBrand**: The component for branding.
|
||||
- **NavbarContent**: The component for wrapping navbar items.
|
||||
- **NavbarItem**: The component for navbar item.
|
||||
- **NavbarMenuToggle**: The component for toggling navbar menu.
|
||||
- **NavbarMenu**: The component for wrapping navbar menu items.
|
||||
- **NavbarMenuItem**: The component for navbar menu item.
|
||||
|
||||
<ImportTabs
|
||||
commands={{
|
||||
main: `import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
NavbarMenuToggle.
|
||||
NavbarMenu,
|
||||
NavbarMenuItem
|
||||
} from "@nextui-org/react";`,
|
||||
individual: `import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
NavbarMenuToggle.
|
||||
NavbarMenu,
|
||||
NavbarMenuItem
|
||||
} from "@nextui-org/navbar";`
|
||||
}}
|
||||
/>
|
||||
|
||||
## Usage
|
||||
|
||||
<CodeDemo
|
||||
asIframe
|
||||
title="Usage"
|
||||
previewHeight="500px"
|
||||
iframeSrc="/examples/navbar/usage"
|
||||
files={navbarContent.usage}
|
||||
/>
|
||||
|
||||
|
||||
### Static
|
||||
|
||||
You can use the `position` prop to make the navbar static positioned (the default behavior is `sticky`).
|
||||
|
||||
<CodeDemo
|
||||
asIframe
|
||||
title="Static"
|
||||
previewHeight="500px"
|
||||
iframeSrc="/examples/navbar/static"
|
||||
files={navbarContent.static}
|
||||
/>
|
||||
|
||||
### Hide on scroll
|
||||
|
||||
It is possible to hide the navbar on scroll by using the `shouldHideOnScroll` prop.
|
||||
|
||||
<CodeDemo
|
||||
asIframe
|
||||
title="Hide on scroll"
|
||||
previewHeight="500px"
|
||||
iframeSrc="/examples/navbar/hide-on-scroll"
|
||||
files={navbarContent.hideOnScroll}
|
||||
/>
|
||||
4
apps/docs/hooks/use-isomorphic-layout-effect.ts
Normal file
4
apps/docs/hooks/use-isomorphic-layout-effect.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import {useEffect, useLayoutEffect} from "react";
|
||||
|
||||
export const useIsomorphicLayoutEffect =
|
||||
typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": ". A separator is a visual divider between two groups of content",
|
||||
"keywords": [
|
||||
"divider"
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-modal-overlay@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
|
||||
@ -30,6 +30,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
|
||||
closeButton,
|
||||
hideCloseButton,
|
||||
disableAnimation,
|
||||
shouldBlockScroll,
|
||||
getDialogProps,
|
||||
getBackdropProps,
|
||||
getCloseButtonProps,
|
||||
@ -87,7 +88,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
|
||||
return (
|
||||
<div tabIndex={-1}>
|
||||
{backdropContent}
|
||||
<RemoveScroll forwardProps>
|
||||
<RemoveScroll forwardProps enabled={shouldBlockScroll} removeScrollBar={false}>
|
||||
{disableAnimation ? (
|
||||
<div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
|
||||
) : (
|
||||
|
||||
@ -43,6 +43,11 @@ interface Props extends HTMLNextUIProps<"section"> {
|
||||
* @default document.body
|
||||
*/
|
||||
portalContainer?: Element;
|
||||
/**
|
||||
* Whether the scroll should be blocked when the modal is open.
|
||||
* @default true
|
||||
*/
|
||||
shouldBlockScroll?: boolean;
|
||||
/**
|
||||
* Callback fired when the modal is closed.
|
||||
*/
|
||||
@ -85,6 +90,7 @@ export function useModal(originalProps: UseModalProps) {
|
||||
closeButton,
|
||||
isDismissable = true,
|
||||
hideCloseButton = false,
|
||||
shouldBlockScroll = true,
|
||||
portalContainer,
|
||||
isKeyboardDismissDisabled = false,
|
||||
onClose,
|
||||
@ -188,6 +194,7 @@ export function useModal(originalProps: UseModalProps) {
|
||||
closeButton,
|
||||
hideCloseButton,
|
||||
portalContainer,
|
||||
shouldBlockScroll,
|
||||
backdrop: originalProps.backdrop ?? "opaque",
|
||||
isOpen: state.isOpen,
|
||||
onClose: state.close,
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -35,7 +35,7 @@ const NavbarMenu = forwardRef<NavbarMenuProps, "ul">((props, ref) => {
|
||||
const MenuWrapper = useCallback(
|
||||
({children}: {children: ReactElement}) => {
|
||||
return (
|
||||
<RemoveScroll forwardProps enabled={isMenuOpen}>
|
||||
<RemoveScroll forwardProps enabled={isMenuOpen} removeScrollBar={false}>
|
||||
{children}
|
||||
</RemoveScroll>
|
||||
);
|
||||
|
||||
@ -157,7 +157,7 @@ const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
|
||||
|
||||
return (
|
||||
<App ref={parentRef}>
|
||||
<Navbar parentRef={parentRef} position="fixed" onMenuOpenChange={setIsMenuOpen} {...args}>
|
||||
<Navbar parentRef={parentRef} position="sticky" onMenuOpenChange={setIsMenuOpen} {...args}>
|
||||
<NavbarContent>
|
||||
<NavbarMenuToggle
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
@ -395,19 +395,13 @@ const WithAvatarUserTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps
|
||||
<p className="font-semibold">Signed in as</p>
|
||||
<p className="font-semibold">zoey@example.com</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings" showDivider>
|
||||
My Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings">My Settings</DropdownItem>
|
||||
<DropdownItem key="team_settings">Team Settings</DropdownItem>
|
||||
<DropdownItem key="analytics" showDivider>
|
||||
Analytics
|
||||
</DropdownItem>
|
||||
<DropdownItem key="analytics">Analytics</DropdownItem>
|
||||
<DropdownItem key="system">System</DropdownItem>
|
||||
<DropdownItem key="configurations">Configurations</DropdownItem>
|
||||
<DropdownItem key="help_and_feedback" showDivider>
|
||||
Help & Feedback
|
||||
</DropdownItem>
|
||||
<DropdownItem key="logout" showDivider color="danger">
|
||||
<DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
|
||||
<DropdownItem key="logout" color="danger">
|
||||
Log Out
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
@ -506,19 +500,13 @@ const WithSearchInputTemplate: ComponentStory<typeof Navbar> = (args: NavbarProp
|
||||
<p className="font-semibold">Signed in as</p>
|
||||
<p className="font-semibold">zoey@example.com</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings" showDivider>
|
||||
My Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings">My Settings</DropdownItem>
|
||||
<DropdownItem key="team_settings">Team Settings</DropdownItem>
|
||||
<DropdownItem key="analytics" showDivider>
|
||||
Analytics
|
||||
</DropdownItem>
|
||||
<DropdownItem key="analytics">Analytics</DropdownItem>
|
||||
<DropdownItem key="system">System</DropdownItem>
|
||||
<DropdownItem key="configurations">Configurations</DropdownItem>
|
||||
<DropdownItem key="help_and_feedback" showDivider>
|
||||
Help & Feedback
|
||||
</DropdownItem>
|
||||
<DropdownItem key="logout" showDivider color="danger">
|
||||
<DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
|
||||
<DropdownItem key="logout" color="danger">
|
||||
Log Out
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
@ -535,16 +523,16 @@ Static.args = {
|
||||
position: "static",
|
||||
};
|
||||
|
||||
export const Fixed = Template.bind({});
|
||||
Fixed.args = {
|
||||
export const Sticky = Template.bind({});
|
||||
Sticky.args = {
|
||||
...defaultProps,
|
||||
position: "fixed",
|
||||
position: "sticky",
|
||||
};
|
||||
|
||||
export const HideOnScroll = Template.bind({});
|
||||
HideOnScroll.args = {
|
||||
...defaultProps,
|
||||
position: "fixed",
|
||||
position: "sticky",
|
||||
shouldHideOnScroll: true,
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -85,7 +85,7 @@ const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) =>
|
||||
return (
|
||||
<div {...getPopoverProps()}>
|
||||
{backdropContent}
|
||||
<RemoveScroll forwardProps enabled={shouldBlockScroll}>
|
||||
<RemoveScroll forwardProps enabled={shouldBlockScroll} removeScrollBar={false}>
|
||||
{disableAnimation ? (
|
||||
content
|
||||
) : (
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/skeleton
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/skeleton",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Skeleton is used to display the loading state of some component.",
|
||||
"keywords": [
|
||||
"skeleton"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/table
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/table",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Tables are used to display tabular data using rows and columns. ",
|
||||
"keywords": [
|
||||
"table"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/tabs
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-update-effect@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tabs",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
|
||||
"keywords": [
|
||||
"tabs"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/react-utils@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -1,5 +1,44 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/skeleton@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/tabs@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/kbd@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230625233448
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230625233448
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -58,7 +58,6 @@ const navbar = tv({
|
||||
"justify-center",
|
||||
"border-b",
|
||||
"border-divider",
|
||||
// "data-[menu-open=true]:fixed",
|
||||
"data-[menu-open=true]:border-none",
|
||||
],
|
||||
wrapper: [
|
||||
@ -124,9 +123,10 @@ const navbar = tv({
|
||||
"group-data-[open=true]:after:-rotate-45",
|
||||
],
|
||||
brand: [
|
||||
"w-full",
|
||||
"flex",
|
||||
"basis-0",
|
||||
"flex-row",
|
||||
"flex-grow",
|
||||
"flex-nowrap",
|
||||
"justify-start",
|
||||
"bg-transparent",
|
||||
@ -138,7 +138,6 @@ const navbar = tv({
|
||||
],
|
||||
content: [
|
||||
"flex",
|
||||
"w-full",
|
||||
"h-full",
|
||||
"flex-row",
|
||||
"flex-nowrap",
|
||||
@ -147,6 +146,8 @@ const navbar = tv({
|
||||
"data-[justify=start]:justify-start",
|
||||
"data-[justify=center]:justify-center",
|
||||
"data-[justify=end]:justify-end",
|
||||
"data-[justify=end]:flex-grow",
|
||||
"data-[justify=end]:basis-0",
|
||||
],
|
||||
item: [
|
||||
"text-base",
|
||||
@ -176,8 +177,8 @@ const navbar = tv({
|
||||
static: {
|
||||
base: "static",
|
||||
},
|
||||
fixed: {
|
||||
base: "fixed top-0 inset-x-0",
|
||||
sticky: {
|
||||
base: "sticky top-0 inset-x-0",
|
||||
},
|
||||
},
|
||||
maxWidth: {
|
||||
@ -231,7 +232,7 @@ const navbar = tv({
|
||||
},
|
||||
defaultVariants: {
|
||||
maxWidth: "lg",
|
||||
position: "fixed",
|
||||
position: "sticky",
|
||||
isBlurred: true,
|
||||
},
|
||||
});
|
||||
|
||||
@ -33,7 +33,7 @@ const tabs = tv({
|
||||
"flex-nowrap",
|
||||
"overflow-x-scroll",
|
||||
"scrollbar-hide",
|
||||
"bg-content2",
|
||||
"bg-default-100",
|
||||
],
|
||||
tab: [
|
||||
"z-0",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-accordion-item
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-accordion-item",
|
||||
"version": "0.0.0-dev-v2-20230625145649",
|
||||
"version": "0.0.0-dev-v2-20230625233448",
|
||||
"description": "Internal impl for react aria accordion item",
|
||||
"keywords": [
|
||||
"use-aria-accordion-item"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-button
|
||||
|
||||
## 0.0.0-dev-v2-20230625233448
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Navbar styles fixed
|
||||
|
||||
## 0.0.0-dev-v2-20230625145649
|
||||
|
||||
### Patch Changes
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user