archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(docs): tabs docs done

Browse Source
This commit is contained in:
Junior Garcia 2023-06-08 21:03:40 -03:00
parent 27041fa545
commit 10c1292fc5
148 changed files with 1552 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/docs/content/components/index.ts
View File

@ -24,3 +24,4 @@ export * from "./radio-group";
export * from "./switch";
export * from "./popover";
export * from "./tooltip";
export * from "./tabs";

32
apps/docs/content/components/tabs/colors.ts Normal file
View File

@ -0,0 +1,32 @@
const App = `import {Tabs, Tab} from "@nextui-org/react";
export default function App() {
const colors = [
"default",
"primary",
"secondary",
"success",
"warning",
"danger"
];
return (
<div className="flex flex-wrap gap-4">
{colors.map((color) => (
<Tabs key={color} color={color} aria-label="Tabs colors">
<Tab key="photos" title="Photos"/>
<Tab key="music" title="Music"/>
<Tab key="videos" title="Videos"/>
</Tabs>
))}
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

45
apps/docs/content/components/tabs/controlled.ts Normal file
View File

@ -0,0 +1,45 @@
const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
const [selected, setSelected] = React.useState("photos");
return (
<div className="flex w-full flex-col">
<Tabs
aria-label="Options"
selectedKey={selected}
onSelectionChange={setSelected}
>
<Tab key="photos" title="Photos">
<Card>
<CardBody>
List of photos
</CardBody>
</Card>
</Tab>
<Tab key="music" title="Music">
<Card>
<CardBody>
List of music
</CardBody>
</Card>
</Tab>
<Tab key="videos" title="Videos">
<Card>
<CardBody>
List of videos
</CardBody>
</Card>
</Tab>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

115
apps/docs/content/components/tabs/custom-styles.ts Normal file
View File

@ -0,0 +1,115 @@
const GalleryIcon = `export const GalleryIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z" fill="currentColor"/>
<path d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z" fill="currentColor"/>
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z" fill="currentColor"/>
</svg>
);`;
const MusicIcon = `export const MusicIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z" fill="currentColor"/>
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z" fill="currentColor"/>
</svg>
);`;
const VideoIcon = `export const VideoIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor"/>
<path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor"/>
<path d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z" fill="currentColor"/>
<path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor"/>
</svg>
);`;
const App = `import {Tabs, Tab, Chip} from "@nextui-org/react";
import {GalleryIcon} from "./GalleryIcon";
import {MusicIcon} from "./MusicIcon";
import {VideoIcon} from "./VideoIcon";
export default function App() {
return (
<div className="flex w-full flex-col">
<Tabs
aria-label="Options"
color="primary"
variant="underlined"
classNames={{
tabList: "gap-6 w-full relative rounded-none p-0 after:content-[''] after:absolute after:bottom-0 after:w-full after:-z-[1] after:h-px after:bg-divider",
cursor: "w-full bg-[#22d3ee]",
tab: "max-w-fit px-0 h-12",
tabContent: "group-data-[selected=true]:text-[#06b6d4]"
}}
>
<Tab
key="photos"
title={
<div className="flex items-center space-x-2">
<GalleryIcon/>
<span>Photos</span>
<Chip size="sm" variant="faded">9</Chip>
</div>
}
/>
<Tab
key="music"
title={
<div className="flex items-center space-x-2">
<MusicIcon/>
<span>Music</span>
<Chip size="sm" variant="faded">3</Chip>
</div>
}
/>
<Tab
key="videos"
title={
<div className="flex items-center space-x-2">
<VideoIcon/>
<span>Videos</span>
<Chip size="sm" variant="faded">1</Chip>
</div>
}
/>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
"/GalleryIcon.jsx": GalleryIcon,
"/MusicIcon.jsx": MusicIcon,
"/VideoIcon.jsx": VideoIcon,
};
export default {
...react,
};

39
apps/docs/content/components/tabs/disabled-item.ts Normal file
View File

@ -0,0 +1,39 @@
const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
return (
<div className="flex w-full flex-col">
<Tabs disabledKeys={["music"]} aria-label="Disabled Options">
<Tab key="photos" title="Photos">
<Card>
<CardBody>
List of photos
</CardBody>
</Card>
</Tab>
<Tab key="music" title="Music">
<Card>
<CardBody>
List of music
</CardBody>
</Card>
</Tab>
<Tab key="videos" title="Videos">
<Card>
<CardBody>
List of videos
</CardBody>
</Card>
</Tab>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

39
apps/docs/content/components/tabs/disabled.ts Normal file
View File

@ -0,0 +1,39 @@
const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
return (
<div className="flex w-full flex-col">
<Tabs isDisabled aria-label="Options">
<Tab key="photos" title="Photos">
<Card>
<CardBody>
List of photos
</CardBody>
</Card>
</Tab>
<Tab key="music" title="Music">
<Card>
<CardBody>
List of music
</CardBody>
</Card>
</Tab>
<Tab key="videos" title="Videos">
<Card>
<CardBody>
List of videos
</CardBody>
</Card>
</Tab>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

45
apps/docs/content/components/tabs/dynamic.ts Normal file
View File

@ -0,0 +1,45 @@
const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
let tabs = [
{
id: "photos",
label: "Photos",
content: "List of photos"
},
{
id: "music",
label: "Music",
content: "List of music"
},
{
id: "videos",
label: "Videos",
content: "List of videos"
}
];
return (
<div className="flex w-full flex-col">
<Tabs aria-label="Dynamic tabs" items={tabs}>
{(item) => (
<Tab key={item.id} title={item.label}>
<Card>
<CardBody>
{item.content}
</CardBody>
</Card>
</Tab>
)}
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

74
apps/docs/content/components/tabs/form.ts Normal file
View File

@ -0,0 +1,74 @@
const App = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
const [selected, setSelected] = React.useState("login");
return (
<div className="flex flex-col w-full">
<Card className="w-[340px] h-[400px]">
<CardBody>
<Tabs
fullWidth
aria-label="Tabs form"
selectedKey={selected}
onSelectionChange={setSelected}
>
<Tab key="login" title="Login">
<form className="flex flex-col gap-4">
<Input isRequired label="Email" placeholder="Enter your email" type="email" />
<Input
isRequired
label="Password"
placeholder="Enter your password"
type="password"
/>
<p className="text-center text-sm">
Need to create an account?{" "}
<Link size="sm" onPress={() => setSelected("sign-up")}>
Sign up
</Link>
</p>
<div className="flex gap-2 justify-end">
<Button fullWidth color="primary">
Login
</Button>
</div>
</form>
</Tab>
<Tab key="sign-up" title="Sign up">
<form className="flex flex-col gap-4 h-[300px]">
<Input isRequired label="Name" placeholder="Enter your name" type="password" />
<Input isRequired label="Email" placeholder="Enter your email" type="email" />
<Input
isRequired
label="Password"
placeholder="Enter your password"
type="password"
/>
<p className="text-center text-sm">
Already have an account?{" "}
<Link size="sm" onPress={() => setSelected("login")}>
Login
</Link>
</p>
<div className="flex gap-2 justify-end">
<Button fullWidth color="primary">
Sign up
</Button>
</div>
</form>
</Tab>
</Tabs>
</CardBody>
</Card>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

102
apps/docs/content/components/tabs/icons.ts Normal file
View File

@ -0,0 +1,102 @@
const GalleryIcon = `export const GalleryIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z" fill="currentColor"/>
<path d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z" fill="currentColor"/>
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z" fill="currentColor"/>
</svg>
);`;
const MusicIcon = `export const MusicIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z" fill="currentColor"/>
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z" fill="currentColor"/>
</svg>
);`;
const VideoIcon = `export const VideoIcon = (props) => (
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
fill="none"
{...props}
>
<path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor"/>
<path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor"/>
<path d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z" fill="currentColor"/>
<path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor"/>
</svg>
);`;
const App = `import {Tabs, Tab} from "@nextui-org/react";
import {GalleryIcon} from "./GalleryIcon";
import {MusicIcon} from "./MusicIcon";
import {VideoIcon} from "./VideoIcon";
export default function App() {
return (
<div className="flex w-full flex-col">
<Tabs aria-label="Options" color="primary" variant="bordered">
<Tab
key="photos"
title={
<div className="flex items-center space-x-2">
<GalleryIcon/>
<span>Photos</span>
</div>
}
/>
<Tab
key="music"
title={
<div className="flex items-center space-x-2">
<MusicIcon/>
<span>Music</span>
</div>
}
/>
<Tab
key="videos"
title={
<div className="flex items-center space-x-2">
<VideoIcon/>
<span>Videos</span>
</div>
}
/>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
"/GalleryIcon.jsx": GalleryIcon,
"/MusicIcon.jsx": MusicIcon,
"/VideoIcon.jsx": VideoIcon,
};
export default {
...react,
};

27
apps/docs/content/components/tabs/index.ts Normal file
View File

@ -0,0 +1,27 @@
import usage from "./usage";
import dynamic from "./dynamic";
import sizes from "./sizes";
import colors from "./colors";
import variants from "./variants";
import radius from "./radius";
import disabled from "./disabled";
import disabledItem from "./disabled-item";
import icons from "./icons";
import form from "./form";
import controlled from "./controlled";
import customStyles from "./custom-styles";
export const tabsContent = {
usage,
dynamic,
sizes,
colors,
variants,
radius,
disabled,
disabledItem,
icons,
form,
controlled,
customStyles,
};

33
apps/docs/content/components/tabs/radius.ts Normal file
View File

@ -0,0 +1,33 @@
const App = `import {Tabs, Tab} from "@nextui-org/react";
export default function App() {
const radiusList = [
"full",
"2xl",
"xl",
"lg",
"md",
"sm",
"none",
];
return (
<div className="flex flex-wrap gap-4">
{radiusList.map((radius) => (
<Tabs key={radius} radius={radius} aria-label="Tabs radius">
<Tab key="photos" title="Photos"/>
<Tab key="music" title="Music"/>
<Tab key="videos" title="Videos"/>
</Tabs>
))}
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

31
apps/docs/content/components/tabs/sizes.ts Normal file
View File

@ -0,0 +1,31 @@
const App = `import {Tabs, Tab} from "@nextui-org/react";
export default function App() {
const sizes = [
"xs",
"sm",
"md",
"lg",
"xl",
];
return (
<div className="flex flex-wrap gap-4">
{sizes.map((size) => (
<Tabs key={size} size={size} aria-label="Tabs sizes">
<Tab key="photos" title="Photos"/>
<Tab key="music" title="Music"/>
<Tab key="videos" title="Videos"/>
</Tabs>
))}
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

39
apps/docs/content/components/tabs/usage.ts Normal file
View File

@ -0,0 +1,39 @@
const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
export default function App() {
return (
<div className="flex w-full flex-col">
<Tabs aria-label="Options">
<Tab key="photos" title="Photos">
<Card>
<CardBody>
List of photos
</CardBody>
</Card>
</Tab>
<Tab key="music" title="Music">
<Card>
<CardBody>
List of music
</CardBody>
</Card>
</Tab>
<Tab key="videos" title="Videos">
<Card>
<CardBody>
List of videos
</CardBody>
</Card>
</Tab>
</Tabs>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

30
apps/docs/content/components/tabs/variants.ts Normal file
View File

@ -0,0 +1,30 @@
const App = `import {Tabs, Tab} from "@nextui-org/react";
export default function App() {
const variants = [
"solid",
"underlined",
"bordered",
"light",
];
return (
<div className="flex flex-wrap gap-4">
{variants.map((variant) => (
<Tabs key={variant} variant={variant} aria-label="Tabs variants">
<Tab key="photos" title="Photos"/>
<Tab key="music" title="Music"/>
<Tab key="videos" title="Videos"/>
</Tabs>
))}
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

8
apps/docs/content/docs/components/popover.mdx
View File

@ -130,7 +130,7 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
## API
#### Popover Props
### Popover Props
| Attribute | Type | Description | Default |
| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
@ -163,7 +163,7 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
<Spacer y={1} />
#### Popover Events
### Popover Events
| Attribute | Type | Description |
| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -173,7 +173,7 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
<Spacer y={2} />
#### PopoverTrigger Props
### PopoverTrigger Props
| Attribute | Type | Description | Default |
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
@ -181,7 +181,7 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
<Spacer y={2} />
#### PopoverContent Props
### PopoverContent Props
| Attribute | Type | Description | Default |
| --------- | ----------- | ---------------------------------------------------------- | ------- |

160
apps/docs/content/docs/components/tabs.mdx
View File

@ -0,0 +1,160 @@
---
title: "Tabs"
description: "Tabs organize content into multiple sections and allow users to navigate between them."
url: https://nextui.org/docs/components/tabs
---
# Tabs
Tabs organize content into multiple sections and allow users to navigate between them.
<ComponentLinks component="tabs" reactAriaHook="useTabList" />
---
## Import
NextUI exports 2 tabs-related components:
- **Tabs**: The main component to display a tab list.
- **Tab**: The component to display a tab item. The children of this component will be displayed as the content of the tab.
<ImportTabs
commands={{
main: 'import {Tabs, Tab} from "@nextui-org/react";',
individual: 'import {Tabs, Tab} from "@nextui-org/tabs";',
}}
/>
## Usage
<CodeDemo title="Usage" files={tabsContent.usage} />
### Dynamic
You can render tabs dynamically by using `items` prop.
<CodeDemo title="Dynamic" files={tabsContent.dynamic} />
### Disabled
<CodeDemo title="Disabled" files={tabsContent.disabled} />
### Disabled Item
<CodeDemo title="Disabled Item" files={tabsContent.disabledItem} />
### Sizes
<CodeDemo title="Sizes" files={tabsContent.sizes} />
### Radius
<CodeDemo title="Radius" files={tabsContent.radius} />
### Colors
<CodeDemo title="Colors" files={tabsContent.colors} />
### Variants
<CodeDemo title="Variants" files={tabsContent.variants} />
### With Icons
<CodeDemo title="With Icons" files={tabsContent.icons} />
### Controlled
You can use the `onSelectionChange` and `selectedKey` props to control the selected tab.
<CodeDemo title="Controlled" files={tabsContent.controlled} />
### With Form
<CodeDemo title="With Form" files={tabsContent.form} />
## Slots
- **base**: The main tabs slot, it wraps the items and the panels.
- **tabList**: The tab list slot, it wraps the tab items.
- **tab**: The tab slot, it wraps the tab item.
- **tabContent**: The tab content slot, it wraps the tab content.
- **cursor**: The cursor slot, it wraps the cursor. This is only visible when `disableAnimation=false`
- **panel**: The panel slot, it wraps the tab panel (content).
### Custom Styles
You can customize the `Tabs` component by passing custom Tailwind CSS classes to the component slots.
<CodeDemo title="Custom Styles" files={tabsContent.customStyles} />
<Spacer y={4} />
## Data Attributes
`Tab` has the following attributes on the `root` element:
- **data-selected**:
When the tab is selected.
- **data-disabled**:
When the tab is disabled.
- **data-hover**:
When the tab is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html).
- **data-hover-selected**:
When the tab is being hovered and is not selected. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html) and `selected` state.
- **data-focus**:
When the tab is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-focus-visible**:
When the tab is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-pressed**:
When the tab is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html).
<Spacer y={4} />
## Accessibility
- Support for mouse, touch, and keyboard interactions on tabs.
- Keyboard event support for arrows keys.
- Support for disabled tabs.
- Follows the tabs ARIA pattern, semantically linking tabs and their associated tab panels.
- Focus management for tab panels without any focusable children.
<Spacer y={4} />
## API
### Tabs Props
| Attribute | Type | Description | Default |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| children\* | `ReactNode` \| `((item: T) => ReactElement)` | The list of tabs. | - |
| variant | `solid` \| `bordered` \| `light` \| `underlined` | The tabs appearance style. | `solid` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The tabs size. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The tabs color theme. | `default` |
| radius | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The tabs border radius. | `xl` |
| shadowCursor | `none` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `inner` | The tabs cursor shadow. | `md` |
| fullWidth | `boolean` | Whether the tabs should take the full width of its parent. | `false` |
| items | `Iterable<T>` | The list of tabs (dynamic). | - |
| disabledKeys | `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| selectedKey | `React.Key` | The key for the currently selected item. | - |
| defaultSelectedKey | `React.Key` | The key for the initially selected item. | - |
| disallowEmptySelection | `boolean` | Whether the tabs should allow empty selection. | `false` |
| keyboardActivation | `automatic` \| `manual` | Whether tabs are activated automatically on focus or manually. | `automatic` |
| disableCursor | `boolean` | Whether the cursor should be hidden. | `false` |
| isDisabled | `boolean` | Whether the tab list should be disabled. | `false` |
| disableAnimation | `boolean` | Whether the tab list should be animated. | `false` |
| classNames | `Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "tabContent" ｜ "cursor" ｜ "panel", string>` | Allows to set custom class names for the card slots. | - |
### Tabs Events
| Attribute | Type | Description |
| ----------------- | ------------------------- | -------------------------------------------------- |
| onSelectionChange | `(key: React.Key) => any` | Handler that is called when the selection changes. |
### Tab Props
| Attribute | Type | Description | Default |
| ---------- | ----------- | ----------------------- | ------- |
| children\* | `ReactNode` | The content of the tab. | - |
| title | `ReactNode` | The title of the tab. | - |

4
apps/docs/content/docs/components/tooltip.mdx
View File

@ -106,7 +106,7 @@ You can customize the `Tooltip` component by passing custom Tailwind CSS classes
## API
#### Tooltip Props
### Tooltip Props
| Attribute | Type | Description | Default |
| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | --------------- |
@ -140,7 +140,7 @@ You can customize the `Tooltip` component by passing custom Tailwind CSS classes
<Spacer y={1} />
#### Tooltip Events
### Tooltip Events
| Attribute | Type | Description |
| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

15
packages/components/accordion/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230609000231
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/aria-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/accordion/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/accordion",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
"keywords": [
"react",

12
packages/components/avatar/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-image@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/avatar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/avatar",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
"keywords": [
"avatar"

11
packages/components/badge/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/badge/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/badge",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
"keywords": [
"badge"

14
packages/components/button/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/spinner@0.0.0-dev-v2-20230609000231
- @nextui-org/drip@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/button/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/button",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Buttons allow users to perform actions and choose with a single tap.",
"keywords": [
"button"

13
packages/components/card/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/drip@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/card/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/card",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
"keywords": [
"card"

11
packages/components/checkbox/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/checkbox/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/checkbox",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"keywords": [
"checkbox"

12
packages/components/chip/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/chip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/chip",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
"keywords": [
"chip"

11
packages/components/code/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/code/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/code",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Code is a component used to display inline code.",
"keywords": [
"code"

11
packages/components/divider/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/divider
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/divider/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/divider",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": ". A separator is a visual divider between two groups of content",
"keywords": [
"divider"

11
packages/components/drip/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/drip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/drip",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
"keywords": [
"drip"

14
packages/components/dropdown/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/aria-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/popover@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/dropdown/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/dropdown",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A dropdown displays a list of actions or options that a user can choose.",
"keywords": [
"dropdown"

12
packages/components/image/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-image@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/image/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/image",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A simple image component",
"keywords": [
"image"

13
packages/components/input/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/input/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/input",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "The input component is designed for capturing user input within a text field.",
"keywords": [
"input"

11
packages/components/kbd/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/kbd
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/kbd/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/kbd",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
"keywords": [
"kbd"

12
packages/components/link/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/link/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
"keywords": [
"link"

15
packages/components/modal/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/modal
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230609000231
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/modal/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/modal",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
"keywords": [
"modal"

14
packages/components/navbar/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/navbar
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230609000231
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/navbar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/navbar",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
"keywords": [
"navbar"

13
packages/components/pagination/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-pagination@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/pagination/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/pagination",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
"keywords": [
"pagination"

15
packages/components/popover/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230609000231
- @nextui-org/aria-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/button@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/popover/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/popover",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A popover is an overlay element positioned relative to a trigger.",
"keywords": [
"popover"

13
packages/components/progress/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230609000231
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/progress/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/progress",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
"keywords": [
"progress"

11
packages/components/radio/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/radio/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/radio",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
"keywords": [
"radio"

11
packages/components/skeleton/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/skeleton
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/skeleton/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/skeleton",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Skeleton is used to display the loading state of some component.",
"keywords": [
"skeleton"

15
packages/components/snippet/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/tooltip@0.0.0-dev-v2-20230609000231
- @nextui-org/button@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/snippet/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/snippet",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Display a snippet of copyable code for the command line.",
"keywords": [
"snippet"

11
packages/components/spacer/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spacer
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/spacer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spacer",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
"keywords": [
"spacer"

11
packages/components/spinner/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/spinner/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spinner",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Loaders express an unspecified wait time or display the length of a process.",
"keywords": [
"loading",

11
packages/components/switch/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/switch/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/switch",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
"keywords": [
"switch"

14
packages/components/table/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/table
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/checkbox@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/spacer@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/table/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/table",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Tables are used to display tabular data using rows and columns. ",
"keywords": [
"table"

14
packages/components/tabs/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/tabs
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230609000231
- @nextui-org/aria-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/tabs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tabs",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
"keywords": [
"tabs"

1
packages/components/tabs/src/tab-panel.tsx
View File

@ -45,6 +45,7 @@ const TabPanel = forwardRef<TabPanelProps, "div">((props, ref) => {
{...mergeProps(tabPanelProps, focusProps, otherProps)}
aria-labelledby={`${tabPanelId}-${state.selectedItem?.key}`}
className={slots.panel?.({class: tabPanelStyles})}
data-slot="panel"
id={tabPanelId}
>
{content}

3
packages/components/tabs/src/tab.tsx
View File

@ -72,6 +72,7 @@ const Tab = forwardRef<TabItemProps, "div">((props, ref) => {
data-hover-unselected={dataAttr((isHovered || isPressed) && !isSelected)}
data-pressed={dataAttr(isPressed)}
data-selected={dataAttr(isSelected)}
data-slot="tab"
{...mergeProps(
tabProps,
!isDisabled
@ -94,6 +95,7 @@ const Tab = forwardRef<TabItemProps, "div">((props, ref) => {
{isSelected && !disableAnimation && !disableCursor && isMounted ? (
<motion.span
className={slots.cursor({class: classNames?.cursor})}
data-slot="cursor"
layoutDependency={false}
layoutId="cursor"
transition={{
@ -106,6 +108,7 @@ const Tab = forwardRef<TabItemProps, "div">((props, ref) => {
className={slots.tabContent({
class: classNames?.tabContent,
})}
data-slot="tabContent"
>
{item.rendered}
</div>

2
packages/components/tabs/src/use-tabs.ts
View File

@ -105,12 +105,14 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
);
const getBaseProps: PropGetter = (props) => ({
"data-slot": "base",
className: slots.base({class: clsx(baseStyles, props?.className)}),
...mergeProps(filterDOMProps(otherProps, {labelable: true}), props),
});
const getTabListProps: PropGetter = (props) => ({
ref: domRef,
"data-slot": "tabList",
className: slots.tabList({class: clsx(classNames?.tabList, props?.className)}),
...mergeProps(tabListProps, props),
id: tabListId,

13
packages/components/tooltip/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230609000231
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/aria-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/tooltip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tooltip",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "A React Component for rendering dynamically positioned Tooltips",
"keywords": [
"tooltip"

12
packages/components/user/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/dom-utils@0.0.0-dev-v2-20230609000231
- @nextui-org/avatar@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/components/user/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/user",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Flexible User Profile Component.",
"keywords": [
"user"

39
packages/core/react/CHANGELOG.md
View File

@ -1,5 +1,44 @@
# @nextui-org/react
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
- Updated dependencies
- @nextui-org/pagination@0.0.0-dev-v2-20230609000231
- @nextui-org/accordion@0.0.0-dev-v2-20230609000231
- @nextui-org/checkbox@0.0.0-dev-v2-20230609000231
- @nextui-org/dropdown@0.0.0-dev-v2-20230609000231
- @nextui-org/progress@0.0.0-dev-v2-20230609000231
- @nextui-org/skeleton@0.0.0-dev-v2-20230609000231
- @nextui-org/divider@0.0.0-dev-v2-20230609000231
- @nextui-org/popover@0.0.0-dev-v2-20230609000231
- @nextui-org/snippet@0.0.0-dev-v2-20230609000231
- @nextui-org/spinner@0.0.0-dev-v2-20230609000231
- @nextui-org/tooltip@0.0.0-dev-v2-20230609000231
- @nextui-org/avatar@0.0.0-dev-v2-20230609000231
- @nextui-org/button@0.0.0-dev-v2-20230609000231
- @nextui-org/navbar@0.0.0-dev-v2-20230609000231
- @nextui-org/spacer@0.0.0-dev-v2-20230609000231
- @nextui-org/switch@0.0.0-dev-v2-20230609000231
- @nextui-org/badge@0.0.0-dev-v2-20230609000231
- @nextui-org/image@0.0.0-dev-v2-20230609000231
- @nextui-org/input@0.0.0-dev-v2-20230609000231
- @nextui-org/modal@0.0.0-dev-v2-20230609000231
- @nextui-org/radio@0.0.0-dev-v2-20230609000231
- @nextui-org/table@0.0.0-dev-v2-20230609000231
- @nextui-org/card@0.0.0-dev-v2-20230609000231
- @nextui-org/chip@0.0.0-dev-v2-20230609000231
- @nextui-org/code@0.0.0-dev-v2-20230609000231
- @nextui-org/drip@0.0.0-dev-v2-20230609000231
- @nextui-org/link@0.0.0-dev-v2-20230609000231
- @nextui-org/tabs@0.0.0-dev-v2-20230609000231
- @nextui-org/user@0.0.0-dev-v2-20230609000231
- @nextui-org/kbd@0.0.0-dev-v2-20230609000231
- @nextui-org/system@0.0.0-dev-v2-20230609000231
- @nextui-org/theme@0.0.0-dev-v2-20230609000231
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/core/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/react",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "🚀 Beautiful and modern React UI library.",
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"homepage": "https://nextui.org",

6
packages/core/system/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/system
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/core/system/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/system",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "NextUI system primitives",
"keywords": [
"system"

6
packages/core/theme/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/core/theme/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/theme",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "The default theme for NextUI components",
"keywords": [
"theme",

8
packages/core/theme/src/colors/semantic.ts
View File

@ -15,8 +15,8 @@ const base: SemanticBaseColors = {
foreground: {
DEFAULT: "#11181C",
},
border: {
DEFAULT: twColors.zinc[300],
divider: {
DEFAULT: "rgba(17, 17, 17, 0.25)",
},
content1: {
DEFAULT: twColors.zinc[50],
@ -42,8 +42,8 @@ const base: SemanticBaseColors = {
foreground: {
DEFAULT: "#ECEDEE",
},
border: {
DEFAULT: twColors.zinc[700],
divider: {
DEFAULT: "rgba(255, 255, 255, 0.20)",
},
content1: {
DEFAULT: twColors.zinc[900],

2
packages/core/theme/src/colors/types.ts
View File

@ -16,7 +16,7 @@ export type ColorScale = Partial<{
export type BaseColors = {
background: ColorScale;
foreground: ColorScale;
border: ColorScale;
divider: ColorScale;
content1: ColorScale;
content2: ColorScale;
content3: ColorScale;

4
packages/core/theme/src/components/accordion.ts
View File

@ -18,7 +18,7 @@ const accordion = tv({
variant: {
light: "",
shadow: "px-4 shadow-lg rounded-xl bg-background dark:bg-content1 border border-default-100",
bordered: "px-4 border border-default rounded-lg",
bordered: "px-4 border border-divider rounded-lg",
splitted: "group is-splitted flex flex-col gap-2", // the classNames are applied in the accordion-item component
},
fullWidth: {
@ -56,7 +56,7 @@ const accordion = tv({
const accordionItem = tv({
slots: {
base: [
"border-default",
"border-divider",
"[&:not(:last-of-type)]:border-b",
"group-[.is-splitted]:px-4",
"group-[.is-splitted]:bg-background",

22
packages/core/theme/src/components/badge.ts
View File

@ -17,7 +17,7 @@ import {colorVariants} from "../utils";
*/
const badge = tv({
slots: {
base: ["relative", "inline-flex", "shrink-0", "overflow-visible", "align-middle"],
base: ["relative", "flex", "shrink-0", "overflow-visible", "items-center", "justify-center"],
badge: [
"flex",
"z-10",
@ -277,35 +277,35 @@ const badge = tv({
isOneChar: true,
size: "xs",
class: {
badge: "w-3.5 h-3.5",
badge: "w-3.5 h-3.5 min-w-3.5 min-h-3.5",
},
},
{
isOneChar: true,
size: "sm",
class: {
badge: "w-4 h-4",
badge: "w-4 h-4 min-w-4 min-h-4",
},
},
{
isOneChar: true,
size: "md",
class: {
badge: "w-5 h-5",
badge: "w-5 h-5 min-w-5 min-h-5",
},
},
{
isOneChar: true,
size: "lg",
class: {
badge: "w-6 h-6",
badge: "w-6 h-6 min-w-6 min-h-6",
},
},
{
isOneChar: true,
size: "xl",
class: {
badge: "w-7 h-7",
badge: "w-7 h-7 min-w-7 min-h-7",
},
},
// isDot / size
@ -313,35 +313,35 @@ const badge = tv({
isDot: true,
size: "xs",
class: {
badge: "w-2 h-2",
badge: "w-2 h-2 min-w-2 min-h-2",
},
},
{
isDot: true,
size: "sm",
class: {
badge: "w-3 h-3",
badge: "w-3 h-3 min-w-3 min-h-3",
},
},
{
isDot: true,
size: "md",
class: {
badge: "w-3.5 h-3.5",
badge: "w-3.5 h-3.5 min-w-3.5 min-h-3.5",
},
},
{
isDot: true,
size: "lg",
class: {
badge: "w-4 h-4",
badge: "w-4 h-4 min-w-4 min-h-4",
},
},
{
isDot: true,
size: "xl",
class: {
badge: "w-5 h-5",
badge: "w-5 h-5 min-w-5 min-h-5",
},
},
// placement / rectangle

10
packages/core/theme/src/components/chip.ts
View File

@ -412,35 +412,35 @@ const chip = tv({
isOneChar: true,
size: "xs",
class: {
base: "w-4 h-4",
base: "w-4 h-4 min-w-4 min-h-4",
},
},
{
isOneChar: true,
size: "sm",
class: {
base: "w-5 h-5",
base: "w-5 h-5 min-w-5 min-h-5",
},
},
{
isOneChar: true,
size: "md",
class: {
base: "w-6 h-6",
base: "w-6 h-6 min-w-6 min-h-6",
},
},
{
isOneChar: true,
size: "lg",
class: {
base: "w-7 h-7",
base: "w-7 h-7 min-w-7 min-h-7",
},
},
{
isOneChar: true,
size: "xl",
class: {
base: "w-8 h-8",
base: "w-8 h-8 min-w-8 min-h-8",
},
},
// hasStartContent / size

2
packages/core/theme/src/components/divider.ts
View File

@ -12,7 +12,7 @@ import {tv} from "tailwind-variants";
* <span className={styles} />
*/
const divider = tv({
base: "shrink-0 bg-border border-none",
base: "shrink-0 bg-divider border-none",
variants: {
orientation: {
horizontal: "w-full h-px",

3
packages/core/theme/src/components/navbar.ts
View File

@ -56,8 +56,7 @@ const navbar = tv({
"items-center",
"justify-center",
"border-b",
"border-default-200",
"dark:border-default-100",
"border-divider",
],
wrapper: [
"flex",

31
packages/core/theme/src/components/tabs.ts
View File

@ -23,7 +23,7 @@ import {colorVariants} from "../utils";
*/
const tabs = tv({
slots: {
base: "inline-block",
base: "inline-flex",
tabList: ["flex", "items-center", "gap-2", "bg-default-100", "p-1"],
tab: [
"z-0",
@ -57,9 +57,10 @@ const tabs = tv({
"text-default-500",
"group-data-[selected=true]:text-foreground",
],
cursor: ["absolute", "z-0", "bg-white", "shadow-md"],
cursor: ["absolute", "z-0", "bg-white"],
panel: [
"mt-3",
"py-3",
"px-1",
"outline-none",
// focus ring
"data-[focus-visible=true]:outline-none",
@ -150,6 +151,29 @@ const tabs = tv({
cursor: "rounded-full",
},
},
shadowCursor: {
none: {
cursor: "shadow-none",
},
sm: {
cursor: "shadow-sm",
},
md: {
cursor: "shadow-md",
},
lg: {
cursor: "shadow-lg",
},
xl: {
cursor: "shadow-xl",
},
"2xl": {
cursor: "shadow-2xl",
},
inner: {
cursor: "shadow-inner",
},
},
fullWidth: {
true: {
base: "w-full",
@ -172,6 +196,7 @@ const tabs = tv({
radius: "xl",
color: "default",
variant: "solid",
shadowCursor: "md",
size: "md",
fullWidth: false,
isDisabled: false,

11
packages/core/theme/src/plugin.ts
View File

@ -209,6 +209,17 @@ const corePlugin = (
3: "3px",
5: "5px",
},
minWidth: {
1: "0.25rem",
2: "0.5rem",
3: "0.75rem",
"3.5": "0.875rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
},
backgroundImage: {
"stripe-gradient":
"linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)",

4
packages/core/theme/stories/colors.stories.tsx
View File

@ -165,8 +165,8 @@ SemanticColors.args = {
textClassName: "text-background",
},
{
color: "border",
className: "bg-border",
color: "divider",
className: "bg-divider",
textClassName: "text-foreground",
},
],

6
packages/hooks/use-aria-accordion-item/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-accordion-item
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/hooks/use-aria-accordion-item/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-accordion-item",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Internal impl for react aria accordion item",
"keywords": [
"use-aria-accordion-item"

6
packages/hooks/use-aria-button/CHANGELOG.md
View File

@ -1,5 +1,11 @@
# @nextui-org/use-aria-button
## 0.0.0-dev-v2-20230609000231
### Patch Changes
- Bordered colors changed to divider color
## 0.0.0-dev-v2-20230607013542
### Patch Changes

2
packages/hooks/use-aria-button/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/use-aria-button",
"version": "0.0.0-dev-v2-20230607013542",
"version": "0.0.0-dev-v2-20230609000231",
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
"keywords": [
"use-aria-button"

Some files were not shown because too many files have changed in this diff Show More