mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): accordion done
This commit is contained in:
Junior Garcia
parent
0507b4b292
commit
667351c4ef
@ -37,7 +37,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"absolute z-[-1] inset-0 bg-grid-zinc-600/25 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]",
|
||||
"absolute z-[-1] inset-0 bg-grid-zinc-300/25 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]",
|
||||
"dark:bg-grid-zinc-500/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]",
|
||||
)}
|
||||
style={{backgroundPosition: "10px 10px"}}
|
||||
|
||||
@ -24,7 +24,7 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({code, noInline}) =>
|
||||
return (
|
||||
<LiveProvider code={code} noInline={noInline} scope={scope}>
|
||||
<BgGridContainer>
|
||||
<LivePreview className="live-preview w-fit not-prose" />
|
||||
<LivePreview className="live-preview flex w-full not-prose" />
|
||||
<LiveError />
|
||||
</BgGridContainer>
|
||||
</LiveProvider>
|
||||
|
||||
@ -180,5 +180,9 @@ export const MDXComponents = ({
|
||||
),
|
||||
inlineCode: InlineCode,
|
||||
InlineCode,
|
||||
kbd: (props: React.HTMLAttributes<HTMLElement>) => (
|
||||
<Components.Kbd {...props} className="py-0.5 px-1.5" />
|
||||
),
|
||||
|
||||
// Block,
|
||||
} as unknown) as Record<string, React.ReactNode>;
|
||||
|
||||
28
apps/docs/content/components/accordion/compact.ts
Normal file
28
apps/docs/content/components/accordion/compact.ts
Normal file
@ -0,0 +1,28 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion isCompact>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
33
apps/docs/content/components/accordion/controlled.ts
Normal file
33
apps/docs/content/components/accordion/controlled.ts
Normal file
@ -0,0 +1,33 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
|
||||
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
selectedKeys={selectedKeys}
|
||||
onSelectionChange={setSelectedKeys}
|
||||
>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
42
apps/docs/content/components/accordion/custom-motion.ts
Normal file
42
apps/docs/content/components/accordion/custom-motion.ts
Normal file
@ -0,0 +1,42 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
motionProps={{
|
||||
startingY: 0,
|
||||
transition: {
|
||||
enter: {
|
||||
height: { duration: 0.1 },
|
||||
opacity: { duration: 0.3 },
|
||||
},
|
||||
exit: {
|
||||
height: { duration: 0.2 },
|
||||
opacity: { duration: 0.3 },
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
272
apps/docs/content/components/accordion/custom-styles.ts
Normal file
272
apps/docs/content/components/accordion/custom-styles.ts
Normal file
@ -0,0 +1,272 @@
|
||||
const MonitorMobileIcon = `export const MonitorMobileIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M10 21.4699V16.95"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M2 12.95H10"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M6.73999 21.47H9.99999"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M17.2445 18.25H17.2535"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const ShieldSecurityIcon = `export const ShieldSecurityIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M12 12.5V15.5"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const InfoIcon = `export const InfoIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M12 8V13"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M11.9945 16H12.0035"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M10 21.4699V16.95"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M2 12.95H10"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M6.73999 21.47H9.99999"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M17.2445 18.25H17.2535"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
import { MonitorMobileIcon } from "./MonitorMobileIcon";
|
||||
import { ShieldSecurityIcon } from "./ShieldSecurityIcon";
|
||||
import { InfoIcon } from "./InfoIcon";
|
||||
import { InvalidCardIcon } from "./InvalidCardIcon";
|
||||
|
||||
export default function App() {
|
||||
const itemStyles = {
|
||||
base: "py-0 w-full",
|
||||
title: "font-normal text-base",
|
||||
trigger: "px-2 py-0 hover:bg-neutral-100 rounded-lg h-14 flex items-center",
|
||||
indicator: "text-base",
|
||||
content: "text-sm px-2",
|
||||
};
|
||||
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
hideDivider
|
||||
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
|
||||
variant="shadow"
|
||||
itemStyles={itemStyles}
|
||||
>
|
||||
<AccordionItem
|
||||
key="1"
|
||||
aria-label="Connected devices"
|
||||
startContent={<MonitorMobileIcon className="text-primary" />}
|
||||
subtitle={
|
||||
<p className="flex">
|
||||
2 issues to <p className="text-primary ml-1">fix now</p>
|
||||
</p>
|
||||
}
|
||||
title="Connected devices"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="2"
|
||||
aria-label="Apps Permissions"
|
||||
startContent={<ShieldSecurityIcon />}
|
||||
subtitle="3 apps have read permissions"
|
||||
title="Apps Permissions"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="3"
|
||||
aria-label="Pending tasks"
|
||||
classNames={{ subtitle: "text-warning" }}
|
||||
startContent={<InfoIcon className="text-warning" />}
|
||||
subtitle="Complete your profile"
|
||||
title="Pending tasks"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="4"
|
||||
aria-label="Card expired"
|
||||
classNames={{ subtitle: "text-danger" }}
|
||||
startContent={<InvalidCardIcon className="text-danger" />}
|
||||
subtitle="Please, update now"
|
||||
title={
|
||||
<p className="flex gap-1 items-center">
|
||||
Card expired
|
||||
<p className="text-neutral-400 text-sm">*4812</p>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/MonitorMobileIcon.jsx": MonitorMobileIcon,
|
||||
"/ShieldSecurityIcon.jsx": ShieldSecurityIcon,
|
||||
"/InfoIcon.jsx": InfoIcon,
|
||||
"/InvalidCardIcon.jsx": InvalidCardIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -0,0 +1,37 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion defaultExpandedKeys={["2"]}>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="2"
|
||||
aria-label="Accordion 2"
|
||||
subtitle={
|
||||
<span>
|
||||
Press to expand <strong>key 2</strong>
|
||||
</span>
|
||||
}
|
||||
title="Accordion 2"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
37
apps/docs/content/components/accordion/disabled-keys.ts
Normal file
37
apps/docs/content/components/accordion/disabled-keys.ts
Normal file
@ -0,0 +1,37 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion disabledKeys={["2"]}>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="2"
|
||||
aria-label="Accordion 2"
|
||||
subtitle={
|
||||
<span>
|
||||
Press to expand <strong>key 2</strong>
|
||||
</span>
|
||||
}
|
||||
title="Accordion 2"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
29
apps/docs/content/components/accordion/index.ts
Normal file
29
apps/docs/content/components/accordion/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import usage from "./usage";
|
||||
import subtitle from "./subtitle";
|
||||
import multiple from "./multiple";
|
||||
import compact from "./compact";
|
||||
import variants from "./variants";
|
||||
import defaultExpandedKeys from "./default-expanded-keys";
|
||||
import disabledKeys from "./disabled-keys";
|
||||
import startContent from "./start-content";
|
||||
import indicator from "./indicator";
|
||||
import indicatorFunction from "./indicator-function";
|
||||
import customMotion from "./custom-motion";
|
||||
import controlled from "./controlled";
|
||||
import customStyles from "./custom-styles";
|
||||
|
||||
export const accordionContent = {
|
||||
usage,
|
||||
subtitle,
|
||||
multiple,
|
||||
compact,
|
||||
variants,
|
||||
defaultExpandedKeys,
|
||||
disabledKeys,
|
||||
startContent,
|
||||
indicator,
|
||||
indicatorFunction,
|
||||
customMotion,
|
||||
controlled,
|
||||
customStyles,
|
||||
};
|
||||
122
apps/docs/content/components/accordion/indicator-function.ts
Normal file
122
apps/docs/content/components/accordion/indicator-function.ts
Normal file
@ -0,0 +1,122 @@
|
||||
const AnchorIcon = `export const AnchorIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const MoonIcon = `export const MoonIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 512 512"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={32}
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const SunIcon = `export const SunIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 512 512"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={32}
|
||||
/>
|
||||
<circle
|
||||
cx={256}
|
||||
cy={256}
|
||||
fill="none"
|
||||
r={80}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={32}
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
import { AnchorIcon } from "./AnchorIcon";
|
||||
import { MoonIcon } from "./MoonIcon";
|
||||
import { SunIcon } from "./SunIcon";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion defaultExpandedKeys={["theme"]}>
|
||||
<AccordionItem
|
||||
key="theme"
|
||||
aria-label="Theme"
|
||||
indicator={({ isOpen }) => (isOpen ? <SunIcon /> : <MoonIcon />)}
|
||||
title="Theme"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="anchor"
|
||||
aria-label="Anchor"
|
||||
indicator={<AnchorIcon />}
|
||||
title="Anchor"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="sun"
|
||||
aria-label="Sun"
|
||||
indicator={<SunIcon />}
|
||||
title="Sun"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/AnchorIcon.jsx": AnchorIcon,
|
||||
"/MoonIcon.jsx": MoonIcon,
|
||||
"/SunIcon.jsx": SunIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
107
apps/docs/content/components/accordion/indicator.ts
Normal file
107
apps/docs/content/components/accordion/indicator.ts
Normal file
@ -0,0 +1,107 @@
|
||||
const AnchorIcon = `export const AnchorIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const MoonIcon = `export const MoonIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 512 512"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={32}
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const SunIcon = `export const SunIcon = (props) => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="presentation"
|
||||
viewBox="0 0 512 512"
|
||||
width="24"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={32}
|
||||
/>
|
||||
<circle
|
||||
cx={256}
|
||||
cy={256}
|
||||
fill="none"
|
||||
r={80}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={32}
|
||||
/>
|
||||
</svg>
|
||||
);`;
|
||||
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
import { AnchorIcon } from './AnchorIcon';
|
||||
import { MoonIcon } from './MoonIcon';
|
||||
import { SunIcon } from './SunIcon';
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/AnchorIcon.jsx": AnchorIcon,
|
||||
"/MoonIcon.jsx": MoonIcon,
|
||||
"/SunIcon.jsx": SunIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
28
apps/docs/content/components/accordion/multiple.ts
Normal file
28
apps/docs/content/components/accordion/multiple.ts
Normal file
@ -0,0 +1,28 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion selectionMode="multiple">
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
71
apps/docs/content/components/accordion/start-content.ts
Normal file
71
apps/docs/content/components/accordion/start-content.ts
Normal file
@ -0,0 +1,71 @@
|
||||
const App = `import { Accordion, AccordionItem, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion selectionMode="multiple">
|
||||
<AccordionItem
|
||||
key="1"
|
||||
aria-label="Chung Miller"
|
||||
startContent={
|
||||
<Avatar
|
||||
isBordered
|
||||
color="primary"
|
||||
radius="xl"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
/>
|
||||
}
|
||||
subtitle="4 unread messages"
|
||||
title="Chung Miller"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="2"
|
||||
aria-label="Janelle Lenard"
|
||||
startContent={
|
||||
<Avatar
|
||||
isBordered
|
||||
color="success"
|
||||
radius="xl"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
||||
/>
|
||||
}
|
||||
subtitle="3 incompleted steps"
|
||||
title="Janelle Lenard"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="3"
|
||||
aria-label="Zoey Lang"
|
||||
startContent={
|
||||
<Avatar
|
||||
isBordered
|
||||
color="warning"
|
||||
radius="xl"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
/>
|
||||
}
|
||||
subtitle={
|
||||
<p className="flex">
|
||||
2 issues to<p className="text-primary ml-1">fix now</p>
|
||||
</p>
|
||||
}
|
||||
title="Zoey Lang"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
37
apps/docs/content/components/accordion/subtitle.ts
Normal file
37
apps/docs/content/components/accordion/subtitle.ts
Normal file
@ -0,0 +1,37 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
key="2"
|
||||
aria-label="Accordion 2"
|
||||
subtitle={
|
||||
<span>
|
||||
Press to expand <strong>key 2</strong>
|
||||
</span>
|
||||
}
|
||||
title="Accordion 2"
|
||||
>
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
28
apps/docs/content/components/accordion/usage.ts
Normal file
28
apps/docs/content/components/accordion/usage.ts
Normal file
@ -0,0 +1,28 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
75
apps/docs/content/components/accordion/variants.ts
Normal file
75
apps/docs/content/components/accordion/variants.ts
Normal file
@ -0,0 +1,75 @@
|
||||
const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
const defaultContent =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
||||
|
||||
return (
|
||||
<div className="w-full grid grid-cols-12 gap-4">
|
||||
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
|
||||
<h3>Light</h3>
|
||||
<Accordion variant="light">
|
||||
<AccordionItem key="1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
|
||||
<h3>Bordered</h3>
|
||||
<Accordion variant="bordered">
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
|
||||
<h3>Shadow</h3>
|
||||
<Accordion variant="shadow">
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
|
||||
<h3>Splitted</h3>
|
||||
<Accordion variant="splitted" fullWidth>
|
||||
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
|
||||
{defaultContent}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./avatar";
|
||||
export * from "./button";
|
||||
export * from "./card";
|
||||
export * from "./accordion";
|
||||
|
||||
@ -1,13 +1,267 @@
|
||||
---
|
||||
title: 'Collapse'
|
||||
description: 'Collapse display a list of high-level options that can expand/collapse to reveal more information.'
|
||||
url: https://nextui.org/docs/components/card
|
||||
title: "Accordion"
|
||||
description: "Accordion display a list of high-level options that can expand/collapse to reveal more information."
|
||||
url: https://nextui.org/docs/components/accordion
|
||||
---
|
||||
|
||||
# Collapse
|
||||
# Accordion
|
||||
|
||||
Collapse display a list of high-level options that can expand/collapse to reveal more information.
|
||||
Accordion display a list of high-level options that can expand/collapse to reveal more information.
|
||||
|
||||
<ComponentLinks component="accordion" />
|
||||
|
||||
---
|
||||
|
||||
## Import
|
||||
|
||||
NextUI exports 2 accordion-related components:
|
||||
|
||||
- **Accordion**: The main component to display a list of accordion items.
|
||||
- **AccordionItem**: The item component to display a single accordion item.
|
||||
|
||||
```jsx
|
||||
import { Collapse } from '@nextui-org/react';
|
||||
```
|
||||
import {Accordion, AccordionItem} from "@nextui-org/react";
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
<CodeDemo title="Usage" files={accordionContent.usage} />
|
||||
|
||||
### With Subtitle
|
||||
|
||||
<CodeDemo title="With subtitle" files={accordionContent.subtitle} />
|
||||
|
||||
### Expand multiple items
|
||||
|
||||
If you set `selectionMode` to `multiple`, then the `Accordion` will allow multiple items to be expanded at the same time.
|
||||
|
||||
<CodeDemo title="Expand multiple items" files={accordionContent.multiple} />
|
||||
|
||||
### Compact
|
||||
|
||||
If you set `isCompact` to `true`, the `Accordion` will be displayed in a compact style.
|
||||
|
||||
<CodeDemo title="Compact" files={accordionContent.compact} />
|
||||
|
||||
### Variants
|
||||
|
||||
<CodeDemo title="Variants" files={accordionContent.variants} />
|
||||
|
||||
### Default expanded keys
|
||||
|
||||
If you want to expand some items by default, you can set the `defaultExpandedKeys` property to an array of keys.
|
||||
|
||||
<CodeDemo title="Default expanded keys" files={accordionContent.defaultExpandedKeys} />
|
||||
|
||||
### Disabled keys
|
||||
|
||||
If you want to disable some items, you can set the `disabledKeys` property to an array of keys.
|
||||
|
||||
<CodeDemo title="Disabled keys" files={accordionContent.disabledKeys} />
|
||||
|
||||
### Start content
|
||||
|
||||
If you want to display some content before the accordion items, you can set the `startContent` property.
|
||||
|
||||
<CodeDemo title="Start content" files={accordionContent.startContent} />
|
||||
|
||||
### Custom Indicator
|
||||
|
||||
Accordion items have a property called `indicator`. You can use it to customize the open/close indicator.
|
||||
|
||||
<CodeDemo title="Custom Open/Close Indicator" files={accordionContent.indicator} />
|
||||
|
||||
The indicator can be also a `function`, which receives the `isOpen`, `isDisabled` and the default `indicator` as parameters.
|
||||
|
||||
<CodeDemo
|
||||
title="Custom Open/Close Indicator Function"
|
||||
highlightedLines="15"
|
||||
files={accordionContent.indicatorFunction}
|
||||
/>
|
||||
|
||||
### Custom Motion
|
||||
|
||||
Accordion offers a `motionProps` property to customize the `enter` / `exit` animation.
|
||||
|
||||
<CodeDemo title="Custom Motion" files={accordionContent.customMotion} />
|
||||
|
||||
> Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
|
||||
|
||||
### Controlled
|
||||
|
||||
Accordion is a controlled component, which means you need to control the `selectedKeys` property by yourself.
|
||||
|
||||
<CodeDemo title="Controlled" files={accordionContent.controlled} />
|
||||
|
||||
## Accordion Item Slots
|
||||
|
||||
- **base**: The accordion item wrapper.
|
||||
- **heading**: The accordion item heading. It contains the `indicator` and the `title`.
|
||||
- **trigger**: The button that open/close the accordion item.
|
||||
- **titleWrapper**: The wrapper of the `title` and `subtitle`.
|
||||
- **title**: The accordion item title.
|
||||
- **subtitle**: The accordion item subtitle.
|
||||
- **startContent**: The content before the accordion item.
|
||||
- **indicator**: The element that indicates the open/close state of the accordion item.
|
||||
- **content**: The accordion item content.
|
||||
|
||||
### Custom Accordion Styles
|
||||
|
||||
You can customize the accordion and accordion items styles by using any of the following properties:
|
||||
|
||||
- `className`: The class name of the accordion. Modify the accordion wrapper styles.(Accordion)
|
||||
- `itemStyles`: The styles of the accordion item. Modify all accordion items styles at once. (Accordion)
|
||||
- `classNames`: The class names of the accordion items. Modify each accordion item styles separately. (AccordionItem)
|
||||
|
||||
Here's an example of how to customize the accordion styles:
|
||||
|
||||
<CodeDemo title="Custom Accordion Styles" files={accordionContent.customStyles} />
|
||||
|
||||
## Data Attributes
|
||||
|
||||
`AccordionItem` has the following attributes on the `root` element:
|
||||
|
||||
- **data-open**:
|
||||
Whether the accordion item is open.
|
||||
- **data-disabled**:
|
||||
When the accordion item is disabled.
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keyboard event support for <kbd>Space</kbd>, <kbd>Enter</kbd>, <kbg>Arrow Up</kbg>, <kbd>Arrow Down</kbd> and <kbd>Home</kbd> / <kbd>End</kbd> keys.
|
||||
- Keyboard focus management and cross browser normalization.
|
||||
- `aria-expanded` attribute for the accordion item.
|
||||
- `aria-disabled` attribute for the accordion item.
|
||||
- `aria-controls` attribute for the accordion item.
|
||||
|
||||
## API
|
||||
|
||||
### Accordion Item Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
|
||||
| indicator | `ReactNode` \| [IndicatorProps](#accordion-item-indicator-props) \| `null` | The accordion item `expanded` indicator, usually an arrow icon. | |
|
||||
| children | `ReactNode` \| `string` | The content of the component. | |
|
||||
| title | `ReactNode` \| `string` | The accordion item title. | |
|
||||
| subtitle | `ReactNode` \| `string` | The accordion item subtitle. | |
|
||||
| startContent | `ReactNode` | The accordion item start content, usually an icon or avatar. | |
|
||||
| motionProps | [CollapseTransitionProps](#collapse-transition-props) | The props to modify the framer motion animation. Use the `variants` API to create your own animation. | |
|
||||
| isCompact | `boolean` | Whether the AccordionItem is compact. | |
|
||||
| isOpen | `boolean` | The current open status. | |
|
||||
| isDisabled | `boolean` | The current disabled status. | `false` |
|
||||
| hideDivider | `boolean` | Whether the AccordionItem divider is hidden. | `false` |
|
||||
| hideIndicator | `boolean` | Whether the AccordionItem indicator is hidden. | `false` |
|
||||
| disableAnimation | `boolean` | Whether the AccordionItem animation is disabled. | `false` |
|
||||
| disableIndicatorAnimation | `boolean` | Whether the AccordionItem indicator animation is disabled. | `false` |
|
||||
| classNames | [AccordionItemClassnames](#accordiom-item-classnames) | Allows to set custom class names for the accordion item slots. | - |
|
||||
|
||||
### Accordion Item Events
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------------- | ------- |
|
||||
| onFocus | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. | |
|
||||
| onBlur | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. | |
|
||||
| onFocusChange | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. | |
|
||||
| onKeyDown | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. | |
|
||||
| onKeyUp | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. | |
|
||||
|
||||
### Accordion Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| children | `ReactNode` \| `ReactNode[]` | The contents of the collection. Usually the array of `AccordionItem` | |
|
||||
| variant | `light` \| `shadow` \| `bordered` \| `splitted` | The accordion appearance style. | `light` |
|
||||
| selectionMode | `none` \| `single` \| `multiple` | The type of selection that is allowed in the collection. | |
|
||||
| selectionBehavior | `toggle` \| `replace` | The accordion selection behavior. | `toggle` |
|
||||
| isCompact | `boolean` | Whether the Accordion should be smaller. | |
|
||||
| isDisabled | `boolean` | Whether the Accordion is disabled. | |
|
||||
| hideDivider | `boolean` | Whether the Accordion divider is hidden. | |
|
||||
| hideIndicator | `boolean` | Whether the Accordion indicator is hidden. | |
|
||||
| disableAnimation | `boolean` | Whether the Accordion animation is disabled. | |
|
||||
| disableIndicatorAnimation | `boolean` | Whether the Accordion indicator animation is disabled. | |
|
||||
| disallowEmptySelection | `boolean` | Whether the collection allows empty selection. | |
|
||||
| fullWidth | `boolean` | Whether the accordion should take up the full width of its parent container. | `true` |
|
||||
| motionProps | `MotionProps` | The motion properties of the Accordion. | |
|
||||
| disabledKeys | `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | |
|
||||
| itemStyles | [AccordionItemClassnames](#accordiom-item-classnames) | The accordion items classNames. | |
|
||||
| selectedKeys | `all` \| `React.Key[]` | The currently selected keys in the collection (controlled). | |
|
||||
| defaultSelectedKeys | `all` \| `React.Key[]` | The initial selected keys in the collection (uncontrolled). | |
|
||||
| disabledKeys | `React.Key[]` | The currently disabled keys in the collection (controlled). | |
|
||||
|
||||
### Accordion Events
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ----------------- | ---------------------------------------- | -------------------------------------------------- | ------- |
|
||||
| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. | |
|
||||
|
||||
---
|
||||
|
||||
### Types
|
||||
|
||||
#### Accordion Item Indicator Props
|
||||
|
||||
```ts
|
||||
export type AccordionItemIndicatorProps = {
|
||||
/**
|
||||
* The current indicator, usually an arrow icon.
|
||||
*/
|
||||
indicator?: ReactNode;
|
||||
/**
|
||||
* The current open status.
|
||||
*/
|
||||
isOpen?: boolean;
|
||||
/**
|
||||
* The current disabled status.
|
||||
* @default false
|
||||
*/
|
||||
isDisabled?: boolean;
|
||||
};
|
||||
```
|
||||
|
||||
### Accordion Item classNames
|
||||
|
||||
```ts
|
||||
export type AccordionItemClassnames = {
|
||||
base?: string;
|
||||
heading?: string;
|
||||
trigger?: string;
|
||||
titleWrapper?: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
startContent?: string;
|
||||
indicator?: string;
|
||||
content?: string;
|
||||
};
|
||||
```
|
||||
|
||||
#### Collapse Transition Props
|
||||
|
||||
```ts
|
||||
export type CollapseTransitionProps = {
|
||||
/**
|
||||
* If `true`, the opacity of the content will be animated
|
||||
* @default true
|
||||
*/
|
||||
animateOpacity?: boolean;
|
||||
/**
|
||||
* The height you want the content in its collapsed state.
|
||||
* @default 0
|
||||
*/
|
||||
startingHeight?: number;
|
||||
/**
|
||||
* The height you want the content in its expanded state.
|
||||
* @default "auto"
|
||||
*/
|
||||
endingHeight?: number | string;
|
||||
/**
|
||||
* The y-axis offset you want the content in its collapsed state.
|
||||
* @default 10
|
||||
*/
|
||||
startingY?: number;
|
||||
/**
|
||||
* The y-axis offset you want the content in its expanded state.
|
||||
* @default 0
|
||||
*/
|
||||
endingY?: number;
|
||||
} & HTMLMotionProps;
|
||||
```
|
||||
|
||||
@ -117,11 +117,11 @@ In case you need to customize the avatar group even further, you can use the `us
|
||||
|
||||
## Slots
|
||||
|
||||
1. **base**: Avatar wrapper, it includes styles for focus ring, position, and general appearance.
|
||||
2. **img**: Image element within the avatar, it includes styles for opacity transition and size.
|
||||
3. **fallback**: Fallback content when the image fails to load or is not provided, it includes styles for centering the content.
|
||||
4. **name**: Initials displayed when the image is not provided or fails to load, it includes styles for font, text alignment, and inheritance.
|
||||
5. **icon**: Icon element within the avatar, it includes styles for centering the content, text inheritance, and size.
|
||||
- **base**: Avatar wrapper, it includes styles for focus ring, position, and general appearance.
|
||||
- **img**: Image element within the avatar, it includes styles for opacity transition and size.
|
||||
- **fallback**: Fallback content when the image fails to load or is not provided, it includes styles for centering the content.
|
||||
- **name**: Initials displayed when the image is not provided or fails to load, it includes styles for font, text alignment, and inheritance.
|
||||
- **icon**: Icon element within the avatar, it includes styles for centering the content, text inheritance, and size.
|
||||
|
||||
### Custom Avatar Styles
|
||||
|
||||
@ -131,7 +131,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
|
||||
|
||||
## Data Attributes
|
||||
|
||||
Avatar has the following attributes on the `root` element:
|
||||
`Avatar` has the following attributes on the `root` element:
|
||||
|
||||
- **data-hover**:
|
||||
When the avatar is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
|
||||
@ -140,7 +140,9 @@ Avatar has the following attributes on the `root` element:
|
||||
- **data-focus-visible**:
|
||||
When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
|
||||
|
||||
## Avatar Props
|
||||
## API
|
||||
|
||||
### Avatar Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------- |
|
||||
@ -150,14 +152,14 @@ Avatar has the following attributes on the `root` element:
|
||||
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | Sets the avatar size. | `md` |
|
||||
| name | `string` | Displays the initials if the image is not provided or fails to load. | - |
|
||||
| icon | `ReactNode` | Displays a custom icon inside the avatar. | - |
|
||||
| fallback | `ReactNode` | A custom fallback component to display when the image fails to load. | - |
|
||||
| isBordered | `boolean` | If `true`, adds a border around the avatar. | `false` |
|
||||
| isDisabled | `boolean` | If `true`, disables the avatar and applies a disabled styling. | `false` |
|
||||
| isFocusable | `boolean` | If `true`, makes the avatar focusable for keyboard navigation. | `false` |
|
||||
| showFallback | `boolean` | If `true`, shows the fallback icon or initials when the image fails to load. | `false` |
|
||||
| fallback | `ReactNode` | A custom fallback component to display when the image fails to load. | - |
|
||||
| classNames | `base` \| `img` \| `fallback` \| `name` \| `icon` | Allows to set custom class names for the avatar slots. | - |
|
||||
| classNames | `Record<"base"｜ "img"｜ "fallback"｜ "name"｜ "icon", string>` | Allows to set custom class names for the avatar slots. | - |
|
||||
|
||||
## Avatar Group Props
|
||||
### Avatar Group Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ----------- | ------------------------------ | --------------------------------------------------- | ------- |
|
||||
|
||||
@ -104,7 +104,7 @@ A common use case for the `ButtonGroup` component is to display a group of two b
|
||||
|
||||
## Data Attributes
|
||||
|
||||
Button has the following attributes on the `root` element:
|
||||
`Button` has the following attributes on the `root` element:
|
||||
|
||||
- **data-hover**:
|
||||
When the button is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
|
||||
@ -119,7 +119,21 @@ Button has the following attributes on the `root` element:
|
||||
- **data-loading**:
|
||||
When the button is loading. Based on `isLoading` prop.
|
||||
|
||||
## Button Props
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Button has role of `button`.
|
||||
- Keyboard event support for <kbd>Space</kbd> and <kbd>Enter</kbd> keys.
|
||||
- Mouse and touch event handling, and press state management.
|
||||
- Keyboard focus management and cross browser normalization.
|
||||
|
||||
We recommend to read this [blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) about the complexities of
|
||||
building buttons that work well across devices and interaction methods.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Button Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ---------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------ | --------- |
|
||||
@ -152,7 +166,7 @@ Button has the following attributes on the `root` element:
|
||||
| onKeyUp | `(e: KeyboardEvent) => void` | Handler called when a key is released. | - |
|
||||
| onClick | `MouseEventHandler` | The native button click event handler (**Deprecated**) use **onPress** instead. | - |
|
||||
|
||||
## Button Group Props
|
||||
### Button Group Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ---------- | ----------------------------------------------------------------------------- | ----------------------------------------------- | --------- |
|
||||
|
||||
@ -73,7 +73,7 @@ You can use `Image` component as the cover of the card by taking it out of the `
|
||||
|
||||
## Data Attributes
|
||||
|
||||
Card has the following attributes on the `root` element:
|
||||
`Card` has the following attributes on the `root` element:
|
||||
|
||||
- **data-hover**:
|
||||
When the card is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
|
||||
@ -86,20 +86,22 @@ Card has the following attributes on the `root` element:
|
||||
- **data-pressed**:
|
||||
When the card is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)
|
||||
|
||||
## Card Props
|
||||
## API
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------- |
|
||||
| children | `ReactNode` \| `ReactNode[]` | Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`. | - |
|
||||
| shadow | `none` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `inner` | The card shadow. | `md` |
|
||||
| radius | ``none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The card border radius. | `xl` |
|
||||
| fullWidth | `boolean` | Whether the card should take the full width of its parent. | `false` |
|
||||
| isHoverable | `boolean` | Whether the card should change the background on hover. | `false` |
|
||||
| isPressable | `boolean` | Whether the card should allow to be pressed. | `false` |
|
||||
| isBlurred | `boolean` | Whether the card background should be blurred. | `false` |
|
||||
| isFooterBlurred | `boolean` | Whether the card footer background should be blurred. | `false` |
|
||||
| isDisabled | `boolean` | Whether the card should be disabled. The press events will be ignored. | `false` |
|
||||
| disableAnimation | `boolean` | Whether to disable the animation. | `false` |
|
||||
| disableRipple | `boolean` | Whether to disable ripple effect. Only when `isPressable` is true. | `false` |
|
||||
| allowTextSelectionOnPress | `boolean` | Whether to allow text selection on pressing. Only when `isPressable` is true. | `false` |
|
||||
| classNames | `base` \| `header` \| `body` \| `footer` | Allows to set custom class names for the card slots. | - |
|
||||
### Card Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------- |
|
||||
| children | `ReactNode` \| `ReactNode[]` | Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`. | - |
|
||||
| shadow | `none` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `inner` | The card shadow. | `md` |
|
||||
| radius | ``none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The card border radius. | `xl` |
|
||||
| fullWidth | `boolean` | Whether the card should take the full width of its parent. | `false` |
|
||||
| isHoverable | `boolean` | Whether the card should change the background on hover. | `false` |
|
||||
| isPressable | `boolean` | Whether the card should allow to be pressed. | `false` |
|
||||
| isBlurred | `boolean` | Whether the card background should be blurred. | `false` |
|
||||
| isFooterBlurred | `boolean` | Whether the card footer background should be blurred. | `false` |
|
||||
| isDisabled | `boolean` | Whether the card should be disabled. The press events will be ignored. | `false` |
|
||||
| disableAnimation | `boolean` | Whether to disable the animation. | `false` |
|
||||
| disableRipple | `boolean` | Whether to disable ripple effect. Only when `isPressable` is true. | `false` |
|
||||
| allowTextSelectionOnPress | `boolean` | Whether to allow text selection on pressing. Only when `isPressable` is true. | `false` |
|
||||
| classNames | `base` \| `header` \| `body` \| `footer` | Allows to set custom class names for the card slots. | - |
|
||||
|
||||
@ -36,6 +36,12 @@ No, NextUI is an independent community project and is not related to Vercel.
|
||||
a complete solution for building accessible and customizable user interfaces. Since NextUI is built upon TailwindCSS,
|
||||
you can utilize all TailwindCSS classes within your NextUI components, ensuring optimal compiled CSS size.
|
||||
|
||||
### How is NextUI different from TailwindCSS components libraries?
|
||||
|
||||
TailwindCSS components libraries such as [TailwindUI](https://tailwindui.com/), [Flowbite](https://flowbite.com/), or [Preline](https://preline.co/), just to name a few, only
|
||||
offer a curated selection of TailwindCSS classes to style your components. They don't provide any React specific components, logic, props, composition, or accessibility features. In contrast
|
||||
to these libraries, NextUI is a complete UI library for React that provides a set of accessible and customizable components, hooks, and utilities.
|
||||
|
||||
### How NextUI deals with TailwindCSS classes conflicts?
|
||||
|
||||
We created a TailwindCSS utility library called [tailwind-variants](https://www.tailwind-variants.org/) that automatically
|
||||
|
||||
@ -103,12 +103,24 @@
|
||||
"keywords": "components, btn, button, input, modal",
|
||||
"defaultOpen": true,
|
||||
"routes": [
|
||||
{
|
||||
"key": "accordion",
|
||||
"title": "Accordion",
|
||||
"keywords": "collapse, accordion, expand, reveal",
|
||||
"path": "/docs/components/accordion.mdx"
|
||||
},
|
||||
{
|
||||
"key": "avatar",
|
||||
"title": "Avatar",
|
||||
"keywords": "avatar, avatar group, group",
|
||||
"path": "/docs/components/avatar.mdx"
|
||||
},
|
||||
{
|
||||
"key": "badge",
|
||||
"title": "Badge",
|
||||
"keywords": "badge, status, display, count, highlight",
|
||||
"path": "/docs/components/badge.mdx"
|
||||
},
|
||||
{
|
||||
"key": "button",
|
||||
"title": "Button",
|
||||
@ -121,48 +133,6 @@
|
||||
"keywords": "card, content, action, media",
|
||||
"path": "/docs/components/card.mdx"
|
||||
},
|
||||
{
|
||||
"key": "pagination",
|
||||
"title": "Pagination",
|
||||
"keywords": "pagination, paginate, table pagination, pages, navigate",
|
||||
"path": "/docs/components/pagination.mdx"
|
||||
},
|
||||
{
|
||||
"key": "table",
|
||||
"title": "Table",
|
||||
"keywords": "table, data table, grid, data grid",
|
||||
"path": "/docs/components/table.mdx"
|
||||
},
|
||||
{
|
||||
"key": "accordion",
|
||||
"title": "Accordion",
|
||||
"keywords": "collapse, accordion, expand, reveal",
|
||||
"path": "/docs/components/accordion.mdx"
|
||||
},
|
||||
{
|
||||
"key": "navbar",
|
||||
"title": "Navbar",
|
||||
"keywords": "navbar, nav, navbar, navigation, menu, header",
|
||||
"path": "/docs/components/navbar.mdx"
|
||||
},
|
||||
{
|
||||
"key": "badge",
|
||||
"title": "Badge",
|
||||
"keywords": "badge, status, display, count, highlight",
|
||||
"path": "/docs/components/badge.mdx"
|
||||
},
|
||||
{
|
||||
"key": "input",
|
||||
"title": "Input",
|
||||
"keywords": "text input, input, textarea",
|
||||
"path": "/docs/components/input.mdx"
|
||||
},
|
||||
{
|
||||
"key": "textarea",
|
||||
"title": "Textarea",
|
||||
"keywords": "textarea, input, text input, large text input",
|
||||
"path": "/docs/components/textarea.mdx"
|
||||
},
|
||||
{
|
||||
"key": "checkbox",
|
||||
"title": "Checkbox",
|
||||
@ -176,10 +146,46 @@
|
||||
"path": "/docs/components/checkbox-group.mdx"
|
||||
},
|
||||
{
|
||||
"key": "radio-group",
|
||||
"title": "Radio Group",
|
||||
"keywords": "check, radio, select",
|
||||
"path": "/docs/components/radio-group.mdx"
|
||||
"key": "dropdown",
|
||||
"title": "Dropdown",
|
||||
"keywords": "dropdown, select, selectable, menu",
|
||||
"path": "/docs/components/dropdown.mdx"
|
||||
},
|
||||
{
|
||||
"key": "image",
|
||||
"title": "Image",
|
||||
"keywords": "Image, Next.js Image, image component",
|
||||
"path": "/docs/components/image.mdx"
|
||||
},
|
||||
{
|
||||
"key": "input",
|
||||
"title": "Input",
|
||||
"keywords": "text input, input, textarea",
|
||||
"path": "/docs/components/input.mdx"
|
||||
},
|
||||
{
|
||||
"key": "link",
|
||||
"title": "Link",
|
||||
"keywords": "link, navigation, href, next link",
|
||||
"path": "/docs/components/link.mdx"
|
||||
},
|
||||
{
|
||||
"key": "modal",
|
||||
"title": "Modal",
|
||||
"keywords": "modal, dialog, backdrop",
|
||||
"path": "/docs/components/modal.mdx"
|
||||
},
|
||||
{
|
||||
"key": "navbar",
|
||||
"title": "Navbar",
|
||||
"keywords": "navbar, nav, navbar, navigation, menu, header",
|
||||
"path": "/docs/components/navbar.mdx"
|
||||
},
|
||||
{
|
||||
"key": "pagination",
|
||||
"title": "Pagination",
|
||||
"keywords": "pagination, paginate, table pagination, pages, navigate",
|
||||
"path": "/docs/components/pagination.mdx"
|
||||
},
|
||||
{
|
||||
"key": "popover",
|
||||
@ -187,18 +193,6 @@
|
||||
"keywords": "popover, tooltip, tooltip, popover, popover",
|
||||
"path": "/docs/components/popover.mdx"
|
||||
},
|
||||
{
|
||||
"key": "tooltip",
|
||||
"title": "Tooltip",
|
||||
"keywords": "tool, popover, tooltip, hoverable",
|
||||
"path": "/docs/components/tooltip.mdx"
|
||||
},
|
||||
{
|
||||
"key": "dropdown",
|
||||
"title": "Dropdown",
|
||||
"keywords": "dropdown, select, selectable, menu",
|
||||
"path": "/docs/components/dropdown.mdx"
|
||||
},
|
||||
{
|
||||
"key": "progress",
|
||||
"title": "Progress",
|
||||
@ -206,10 +200,10 @@
|
||||
"path": "/docs/components/progress.mdx"
|
||||
},
|
||||
{
|
||||
"key": "modal",
|
||||
"title": "Modal",
|
||||
"keywords": "modal, dialog, backdrop",
|
||||
"path": "/docs/components/modal.mdx"
|
||||
"key": "radio-group",
|
||||
"title": "Radio Group",
|
||||
"keywords": "check, radio, select",
|
||||
"path": "/docs/components/radio-group.mdx"
|
||||
},
|
||||
{
|
||||
"key": "spinner",
|
||||
@ -224,22 +218,28 @@
|
||||
"path": "/docs/components/switch.mdx"
|
||||
},
|
||||
{
|
||||
"key": "link",
|
||||
"title": "Link",
|
||||
"keywords": "link, navigation, href, next link",
|
||||
"path": "/docs/components/link.mdx"
|
||||
"key": "table",
|
||||
"title": "Table",
|
||||
"keywords": "table, data table, grid, data grid",
|
||||
"path": "/docs/components/table.mdx"
|
||||
},
|
||||
{
|
||||
"key": "textarea",
|
||||
"title": "Textarea",
|
||||
"keywords": "textarea, input, text input, large text input",
|
||||
"path": "/docs/components/textarea.mdx"
|
||||
},
|
||||
{
|
||||
"key": "tooltip",
|
||||
"title": "Tooltip",
|
||||
"keywords": "tool, popover, tooltip, hoverable",
|
||||
"path": "/docs/components/tooltip.mdx"
|
||||
},
|
||||
{
|
||||
"key": "user",
|
||||
"title": "User",
|
||||
"keywords": "User, avatar, name, initials",
|
||||
"keywords": "user, avatar, name, initials",
|
||||
"path": "/docs/components/user.mdx"
|
||||
},
|
||||
{
|
||||
"key": "image",
|
||||
"title": "Image",
|
||||
"keywords": "Image, Next.js Image, image component",
|
||||
"path": "/docs/components/image.mdx"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -57,3 +57,7 @@
|
||||
.sp-tab-button:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--sp-colors-accent);
|
||||
}
|
||||
|
||||
.sp-highlight {
|
||||
@apply relative z-10 before:content-[''] before:w-full before:h-full before:absolute before:z-[-1] before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background before:border-l-2 border-l-white/80 dark:before:border-l-white/50;
|
||||
}
|
||||
@ -1,5 +1,41 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230517132356
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Accordion item non-plain element children is now supported
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -7,7 +7,7 @@ import AccordionItem from "./accordion-item";
|
||||
export interface AccordionProps extends Omit<UseAccordionProps, "ref"> {}
|
||||
|
||||
const AccordionGroup = forwardRef<AccordionProps, "div">((props, ref) => {
|
||||
const {Component, context, state, getBaseProps, handleFocusChanged} = useAccordion({
|
||||
const {Component, context, state, getBaseProps, handleFocusChanged, itemStyles} = useAccordion({
|
||||
ref,
|
||||
...props,
|
||||
});
|
||||
@ -20,6 +20,8 @@ const AccordionGroup = forwardRef<AccordionProps, "div">((props, ref) => {
|
||||
key={item.key}
|
||||
item={item}
|
||||
onFocusChange={(isFocused) => handleFocusChanged(isFocused, item.key)}
|
||||
{...item.props}
|
||||
classNames={{...itemStyles, ...(item.props.classNames || {})}}
|
||||
/>
|
||||
))}
|
||||
</AccordionProvider>
|
||||
|
||||
@ -5,7 +5,7 @@ import type {
|
||||
} from "@nextui-org/theme";
|
||||
import type {CollapseTransitionProps} from "@nextui-org/framer-transitions";
|
||||
|
||||
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
|
||||
import {ItemProps, BaseItem} from "@nextui-org/aria-utils";
|
||||
import {FocusableProps} from "@react-types/shared";
|
||||
import {ReactNode} from "react";
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import {clsx, ReactRef, callAllHandlers, dataAttr} from "@nextui-org/shared-util
|
||||
import {NodeWithProps} from "@nextui-org/aria-utils";
|
||||
import {useAriaAccordionItem} from "@nextui-org/use-aria-accordion-item";
|
||||
import {useCallback, useMemo} from "react";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {filterDOMProps, mergeProps} from "@react-aria/utils";
|
||||
|
||||
import {AccordionItemBaseProps} from "./base/accordion-item-base";
|
||||
import {useAccordionContext} from "./accordion-context";
|
||||
@ -45,7 +45,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
|
||||
disableAnimation = groupContext.disableAnimation ?? false,
|
||||
disableIndicatorAnimation = groupContext.disableIndicatorAnimation ?? false,
|
||||
...otherProps
|
||||
} = item.props as AccordionItemBaseProps<T>;
|
||||
} = props;
|
||||
|
||||
const Component = as || "div";
|
||||
|
||||
@ -103,7 +103,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
|
||||
"data-open": dataAttr(isOpen),
|
||||
"data-disabled": dataAttr(isDisabled),
|
||||
className: slots.base({class: baseStyles}),
|
||||
...mergeProps(otherProps, props),
|
||||
...mergeProps(filterDOMProps(otherProps, {labelable: true}), props),
|
||||
};
|
||||
},
|
||||
[baseStyles, otherProps, slots, item.props, isOpen, isDisabled],
|
||||
|
||||
@ -4,7 +4,7 @@ import type {SelectionBehavior, MultipleSelection} from "@react-types/shared";
|
||||
import type {AriaAccordionProps} from "@react-types/accordion";
|
||||
import type {AccordionGroupVariantProps} from "@nextui-org/theme";
|
||||
|
||||
import {Key, useCallback} from "react";
|
||||
import React, {Key, useCallback} from "react";
|
||||
import {TreeState, useTreeState} from "@react-stately/tree";
|
||||
import {useAccordion as useReactAriaAccordion} from "@react-aria/accordion";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
@ -24,6 +24,10 @@ interface Props extends HTMLNextUIProps<"div"> {
|
||||
* @default "toggle"
|
||||
*/
|
||||
selectionBehavior?: SelectionBehavior;
|
||||
/**
|
||||
* The accordion items classNames.
|
||||
*/
|
||||
itemStyles?: AccordionItemProps["classNames"];
|
||||
}
|
||||
|
||||
export type UseAccordionProps<T extends object = {}> = Props &
|
||||
@ -78,6 +82,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
|
||||
hideIndicator = false,
|
||||
disableAnimation = false,
|
||||
disableIndicatorAnimation = false,
|
||||
itemStyles,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
@ -96,8 +101,28 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
|
||||
[variant, className],
|
||||
);
|
||||
|
||||
// TODO: Remove this once the issue is fixed.
|
||||
let treeChildren: any = [];
|
||||
|
||||
/**
|
||||
* This is a workaround for rendering ReactNode children in the AccordionItem.
|
||||
* @see https://github.com/adobe/react-spectrum/issues/3882
|
||||
*/
|
||||
React.Children.map(children, (child) => {
|
||||
if (React.isValidElement(child) && typeof child.props?.children !== "string") {
|
||||
const clonedChild = React.cloneElement(child, {
|
||||
// @ts-ignore
|
||||
hasChildItems: false,
|
||||
});
|
||||
|
||||
treeChildren.push(clonedChild);
|
||||
} else {
|
||||
treeChildren.push(child);
|
||||
}
|
||||
});
|
||||
|
||||
const commonProps = {
|
||||
children,
|
||||
children: treeChildren,
|
||||
items,
|
||||
};
|
||||
|
||||
@ -172,7 +197,16 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
|
||||
isFocused && setFocusedKey(key);
|
||||
}, []);
|
||||
|
||||
return {Component, context, classNames, state, focusedKey, getBaseProps, handleFocusChanged};
|
||||
return {
|
||||
Component,
|
||||
context,
|
||||
classNames,
|
||||
state,
|
||||
focusedKey,
|
||||
getBaseProps,
|
||||
handleFocusChanged,
|
||||
itemStyles,
|
||||
};
|
||||
}
|
||||
|
||||
export type UseAccordionReturn = ReturnType<typeof useAccordion>;
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"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,29 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": ". A separator is a visual divider between two groups of content",
|
||||
"keywords": [
|
||||
"divider"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -69,7 +69,6 @@ const DropdownMenu = forwardRef<DropdownMenuProps, "ul">(
|
||||
|
||||
return (
|
||||
<PopoverContent>
|
||||
{" "}
|
||||
<FocusScope contain restoreFocus>
|
||||
<Component {...getMenuProps({...menuProps}, domRef)} className={classNames}>
|
||||
{[...state.collection].map((item) => {
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"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,35 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/skeleton
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/skeleton",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Skeleton is used to display the loading state of some component.",
|
||||
"keywords": [
|
||||
"skeleton"
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/table
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/table",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Tables are used to display tabular data using rows and columns. ",
|
||||
"keywords": [
|
||||
"table"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/tabs
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tabs",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
|
||||
"keywords": [
|
||||
"tabs"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -1,5 +1,91 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/skeleton@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/tabs@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/kbd@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230518012432
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230518012432
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/skeleton@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/tabs@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/kbd@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230517170742
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230517170742
|
||||
|
||||
## 0.0.0-dev-v2-20230517132356
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Accordion item non-plain element children is now supported
|
||||
- Updated dependencies
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230517132356
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Some styled were unified in a single file
|
||||
|
||||
## 0.0.0-dev-v2-20230517170742
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fix build
|
||||
|
||||
## 0.0.0-dev-v2-20230515031033
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230515031033",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
import type {VariantProps} from "tailwind-variants";
|
||||
|
||||
import {tv} from "tailwind-variants";
|
||||
|
||||
/**
|
||||
* AccordionItem wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, heading, indicator, trigger, startContent, title, subtitle, content } = accordionItem({...})
|
||||
*
|
||||
* @example
|
||||
* <div className={base())}>
|
||||
* <div className={heading())}>
|
||||
* <button className={trigger())}>
|
||||
* <div className={startContent()}>
|
||||
* // content
|
||||
* </div>
|
||||
* <div className={titleWrapper()}>
|
||||
* <h3 className={title())}>Title</h3>
|
||||
* <span className={subtitle())}>Subtitle</span>
|
||||
* </div>
|
||||
* <span className={indicator())}>Indicator</span>
|
||||
* </button>
|
||||
* </div>
|
||||
* <div className={content())}>Content</div>
|
||||
* </div>
|
||||
*/
|
||||
const accordionItem = tv({
|
||||
slots: {
|
||||
base: [
|
||||
"py-2",
|
||||
"border-neutral",
|
||||
"[&:not(:last-of-type)]:border-b",
|
||||
"group-[.is-splitted]:px-4",
|
||||
"dark:group-[.is-splitted]:bg-content1",
|
||||
"group-[.is-splitted]:shadow-lg",
|
||||
"group-[.is-splitted]:rounded-lg",
|
||||
"group-[.is-splitted]:border",
|
||||
"group-[.is-splitted]:border-neutral-100",
|
||||
],
|
||||
heading: "",
|
||||
trigger: [
|
||||
"py-2 flex w-full gap-3 outline-none items-center",
|
||||
// focus ring
|
||||
"data-[focus-visible=true]:outline-none",
|
||||
"data-[focus-visible=true]:ring-2",
|
||||
"data-[focus-visible=true]:ring-primary",
|
||||
"data-[focus-visible=true]:ring-offset-2",
|
||||
"data-[focus-visible=true]:ring-offset-background",
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
],
|
||||
startContent: "flex-shrink-0",
|
||||
indicator: "text-neutral-400",
|
||||
titleWrapper: "flex-1 flex flex-col text-left",
|
||||
title: "text-foreground text-lg",
|
||||
subtitle: "text-sm text-neutral-500 font-normal",
|
||||
content: "py-2",
|
||||
},
|
||||
variants: {
|
||||
isCompact: {
|
||||
true: {
|
||||
base: "py-1",
|
||||
trigger: "py-1",
|
||||
title: "text-base",
|
||||
subtitle: "text-xs",
|
||||
indicator: "text-base",
|
||||
content: "py-1",
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
true: {
|
||||
base: "opacity-50 pointer-events-none",
|
||||
},
|
||||
},
|
||||
hideDivider: {
|
||||
true: {
|
||||
base: "!border-b-0",
|
||||
},
|
||||
},
|
||||
hideIndicator: {
|
||||
true: {
|
||||
indicator: "hidden",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
content: "hidden data-[open=true]:block",
|
||||
},
|
||||
false: {
|
||||
indicator: "transition-transform",
|
||||
},
|
||||
},
|
||||
disableIndicatorAnimation: {
|
||||
true: {
|
||||
indicator: "transition-none",
|
||||
},
|
||||
false: {
|
||||
indicator: "rotate-0 data-[open=true]:-rotate-90",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "md",
|
||||
radius: "lg",
|
||||
isDisabled: false,
|
||||
hideDivider: false,
|
||||
hideIndicator: false,
|
||||
disableAnimation: false,
|
||||
disableIndicatorAnimation: false,
|
||||
},
|
||||
});
|
||||
|
||||
export type AccordionItemVariantProps = VariantProps<typeof accordionItem>;
|
||||
export type AccordionItemSlots = keyof ReturnType<typeof accordionItem>;
|
||||
|
||||
export {accordionItem};
|
||||
@ -5,24 +5,141 @@ import {tv} from "tailwind-variants";
|
||||
/**
|
||||
* Accordion wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const classNames = accordion({...})
|
||||
* const styles = accordion({...})
|
||||
*
|
||||
* @example
|
||||
* <div role="group" className={classNames())}>
|
||||
* // avatar elements
|
||||
* <div role="group" className={styles())}>
|
||||
* // accordion elements
|
||||
* </div>
|
||||
*/
|
||||
const accordion = tv({
|
||||
base: "px-2",
|
||||
variants: {
|
||||
variant: {
|
||||
shadow: "px-4 shadow-lg rounded-xl dark:bg-content1 border border-neutral-100",
|
||||
light: "",
|
||||
shadow: "px-4 shadow-lg rounded-xl bg-background dark:bg-content1 border border-neutral-100",
|
||||
bordered: "px-4 border border-neutral rounded-lg",
|
||||
splitted: "group is-splitted flex flex-col gap-2", // the classNames are applied in the accordion-item component
|
||||
},
|
||||
fullWidth: {
|
||||
true: "w-full",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "light",
|
||||
fullWidth: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* AccordionItem wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, heading, indicator, trigger, startContent, title, subtitle, content } = accordionItem({...})
|
||||
*
|
||||
* @example
|
||||
* <div className={base())}>
|
||||
* <div className={heading())}>
|
||||
* <button className={trigger())}>
|
||||
* <div className={startContent()}>
|
||||
* // content
|
||||
* </div>
|
||||
* <div className={titleWrapper()}>
|
||||
* <h3 className={title())}>Title</h3>
|
||||
* <span className={subtitle())}>Subtitle</span>
|
||||
* </div>
|
||||
* <span className={indicator())}>Indicator</span>
|
||||
* </button>
|
||||
* </div>
|
||||
* <div className={content())}>Content</div>
|
||||
* </div>
|
||||
*/
|
||||
const accordionItem = tv({
|
||||
slots: {
|
||||
base: [
|
||||
"border-neutral",
|
||||
"[&:not(:last-of-type)]:border-b",
|
||||
"group-[.is-splitted]:px-4",
|
||||
"group-[.is-splitted]:bg-background",
|
||||
"dark:group-[.is-splitted]:bg-content1",
|
||||
"group-[.is-splitted]:shadow-lg",
|
||||
"group-[.is-splitted]:rounded-lg",
|
||||
"group-[.is-splitted]:border",
|
||||
"group-[.is-splitted]:border-neutral-100",
|
||||
],
|
||||
heading: "",
|
||||
trigger: [
|
||||
"flex py-4 w-full h-full gap-3 outline-none items-center",
|
||||
// focus ring
|
||||
"data-[focus-visible=true]:outline-none",
|
||||
"data-[focus-visible=true]:ring-2",
|
||||
"data-[focus-visible=true]:ring-primary",
|
||||
"data-[focus-visible=true]:ring-offset-2",
|
||||
"data-[focus-visible=true]:ring-offset-background",
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
],
|
||||
startContent: "flex-shrink-0",
|
||||
indicator: "text-neutral-400",
|
||||
titleWrapper: "flex-1 flex flex-col text-left",
|
||||
title: "text-foreground text-lg",
|
||||
subtitle: "text-sm text-neutral-500 font-normal",
|
||||
content: "py-2",
|
||||
},
|
||||
variants: {
|
||||
isCompact: {
|
||||
true: {
|
||||
trigger: "py-2",
|
||||
title: "text-base",
|
||||
subtitle: "text-xs",
|
||||
indicator: "text-base",
|
||||
content: "py-1",
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
true: {
|
||||
base: "opacity-50 pointer-events-none",
|
||||
},
|
||||
},
|
||||
hideDivider: {
|
||||
true: {
|
||||
base: "!border-b-0",
|
||||
},
|
||||
},
|
||||
hideIndicator: {
|
||||
true: {
|
||||
indicator: "hidden",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
content: "hidden data-[open=true]:block",
|
||||
},
|
||||
false: {
|
||||
indicator: "transition-transform",
|
||||
},
|
||||
},
|
||||
disableIndicatorAnimation: {
|
||||
true: {
|
||||
indicator: "transition-none",
|
||||
},
|
||||
false: {
|
||||
indicator: "rotate-0 data-[open=true]:-rotate-90",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "md",
|
||||
radius: "lg",
|
||||
isDisabled: false,
|
||||
hideDivider: false,
|
||||
hideIndicator: false,
|
||||
disableAnimation: false,
|
||||
disableIndicatorAnimation: false,
|
||||
},
|
||||
});
|
||||
|
||||
export type AccordionGroupVariantProps = VariantProps<typeof accordion>;
|
||||
|
||||
export {accordion};
|
||||
export type AccordionItemVariantProps = VariantProps<typeof accordionItem>;
|
||||
export type AccordionItemSlots = keyof ReturnType<typeof accordionItem>;
|
||||
|
||||
export {accordion, accordionItem};
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
import type {VariantProps} from "tailwind-variants";
|
||||
|
||||
import {tv} from "tailwind-variants";
|
||||
|
||||
/**
|
||||
* AvatarGroup wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const classNames = avatarGroup({...})
|
||||
*
|
||||
* @example
|
||||
* <div role="group" className={classNames())}>
|
||||
* // avatar elements
|
||||
* </div>
|
||||
*/
|
||||
const avatarGroup = tv({
|
||||
base: "flex items-center justify-center h-auto w-max-content",
|
||||
variants: {
|
||||
isGrid: {
|
||||
true: "inline-grid grid-cols-4 gap-3",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type AvatarGroupVariantProps = VariantProps<typeof avatarGroup>;
|
||||
|
||||
export {avatarGroup};
|
||||
|
||||
// calculated classNames
|
||||
// src/components/avatar/src/use-avatar-group.ts
|
||||
// -ml-2 hover:-translate-x-0 ml-0
|
||||
@ -207,7 +207,31 @@ const avatar = tv({
|
||||
],
|
||||
});
|
||||
|
||||
/**
|
||||
* AvatarGroup wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const classNames = avatarGroup({...})
|
||||
*
|
||||
* @example
|
||||
* <div role="group" className={classNames())}>
|
||||
* // avatar elements
|
||||
* </div>
|
||||
*/
|
||||
const avatarGroup = tv({
|
||||
base: "flex items-center justify-center h-auto w-max-content",
|
||||
variants: {
|
||||
isGrid: {
|
||||
true: "inline-grid grid-cols-4 gap-3",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// calculated classNames
|
||||
// src/components/avatar/src/use-avatar-group.ts
|
||||
// -ml-2 hover:-translate-x-0 ml-0
|
||||
|
||||
export type AvatarGroupVariantProps = VariantProps<typeof avatarGroup>;
|
||||
export type AvatarVariantProps = VariantProps<typeof avatar>;
|
||||
export type AvatarSlots = keyof ReturnType<typeof avatar>;
|
||||
|
||||
export {avatar};
|
||||
export {avatar, avatarGroup};
|
||||
|
||||
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