mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): badge done
This commit is contained in:
Junior Garcia
parent
7b062d4bb4
commit
5dd095aecc
46
apps/docs/content/components/badge/a11y.ts
Normal file
46
apps/docs/content/components/badge/a11y.ts
Normal file
@ -0,0 +1,46 @@
|
||||
export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
||||
fill='currentColor'
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Button } from "@nextui-org/react";
|
||||
import { NotificationIcon } from "./NotificationIcon";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Badge content="99+" shape="circle" color="danger">
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="more than 99 notifications"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
<NotificationIcon size={24} />
|
||||
</Button>
|
||||
</Badge>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/NotificationIcon.jsx": NotificationIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
52
apps/docs/content/components/badge/colors.ts
Normal file
52
apps/docs/content/components/badge/colors.ts
Normal file
@ -0,0 +1,52 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-3 items-center">
|
||||
<Badge content="5" color="neutral">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="success">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="warning">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
112
apps/docs/content/components/badge/content-examples.ts
Normal file
112
apps/docs/content/components/badge/content-examples.ts
Normal file
@ -0,0 +1,112 @@
|
||||
export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
||||
fill='currentColor'
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
export const CheckIcon = `export const CheckIcon = ({
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 18}
|
||||
height={size || height || 18}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
import { NotificationIcon } from "./NotificationIcon";
|
||||
import { CheckIcon } from "./CheckIcon";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-5 items-center">
|
||||
<Badge content="5" color="danger">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="" color="success" shape="circle" placement="bottom-right">
|
||||
<Avatar
|
||||
radius="full"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="new" color="danger" size="sm">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
color="danger"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge
|
||||
isOneChar
|
||||
content={<CheckIcon />}
|
||||
color="success"
|
||||
placement="bottom-right"
|
||||
>
|
||||
<Avatar
|
||||
isBordered
|
||||
color="success"
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge
|
||||
isOneChar
|
||||
content={<NotificationIcon size={12} />}
|
||||
color="danger"
|
||||
shape="circle"
|
||||
placement="top-right"
|
||||
>
|
||||
<Avatar
|
||||
radius="full"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/NotificationIcon.jsx": NotificationIcon,
|
||||
"/CheckIcon.jsx": CheckIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
30
apps/docs/content/components/badge/disable-outline.ts
Normal file
30
apps/docs/content/components/badge/disable-outline.ts
Normal file
@ -0,0 +1,30 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-4 items-center">
|
||||
<Badge content="5" color="danger" shape="rectangle" disableOutline>
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger" shape="circle" disableOutline>
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="full"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
25
apps/docs/content/components/badge/index.ts
Normal file
25
apps/docs/content/components/badge/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import usage from "./usage";
|
||||
import sizes from "./sizes";
|
||||
import colors from "./colors";
|
||||
import variants from "./variants";
|
||||
import radius from "./radius";
|
||||
import placements from "./placements";
|
||||
import shapes from "./shapes";
|
||||
import visibility from "./visibility";
|
||||
import contentExamples from "./content-examples";
|
||||
import disableOutline from "./disable-outline";
|
||||
import a11y from "./a11y";
|
||||
|
||||
export const badgeContent = {
|
||||
usage,
|
||||
sizes,
|
||||
colors,
|
||||
variants,
|
||||
radius,
|
||||
placements,
|
||||
shapes,
|
||||
visibility,
|
||||
contentExamples,
|
||||
disableOutline,
|
||||
a11y,
|
||||
};
|
||||
44
apps/docs/content/components/badge/placements.ts
Normal file
44
apps/docs/content/components/badge/placements.ts
Normal file
@ -0,0 +1,44 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-4 items-center">
|
||||
<Badge content="5" color="danger" placement="top-right">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger" placement="bottom-right">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger" placement="top-left">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger" placement="bottom-left">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
58
apps/docs/content/components/badge/radius.ts
Normal file
58
apps/docs/content/components/badge/radius.ts
Normal file
@ -0,0 +1,58 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-3 items-center">
|
||||
<Badge content="5" radius="full" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="xl" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="lg" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="md" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="sm" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114a29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="base" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=bfe358194b29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" radius="none" color="secondary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114c29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
30
apps/docs/content/components/badge/shapes.ts
Normal file
30
apps/docs/content/components/badge/shapes.ts
Normal file
@ -0,0 +1,30 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-4 items-center">
|
||||
<Badge content="5" color="danger" shape="rectangle">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="danger" shape="circle">
|
||||
<Avatar
|
||||
isBordered
|
||||
radius="full"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
46
apps/docs/content/components/badge/sizes.ts
Normal file
46
apps/docs/content/components/badge/sizes.ts
Normal file
@ -0,0 +1,46 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-3 items-center">
|
||||
<Badge content="5" size="xs" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" size="sm" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" size="md" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" size="lg" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" size="xl" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
20
apps/docs/content/components/badge/usage.ts
Normal file
20
apps/docs/content/components/badge/usage.ts
Normal file
@ -0,0 +1,20 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Badge content="5" color="primary">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
40
apps/docs/content/components/badge/variants.ts
Normal file
40
apps/docs/content/components/badge/variants.ts
Normal file
@ -0,0 +1,40 @@
|
||||
const App = `import { Badge, Avatar } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-3 items-center">
|
||||
<Badge content="5" color="warning" variant="solid">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="warning" variant="flat">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="warning" variant="faded">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
|
||||
/>
|
||||
</Badge>
|
||||
<Badge content="5" color="warning" variant="shadow">
|
||||
<Avatar
|
||||
radius="lg"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
83
apps/docs/content/components/badge/visibility.ts
Normal file
83
apps/docs/content/components/badge/visibility.ts
Normal file
@ -0,0 +1,83 @@
|
||||
export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
||||
fill='currentColor'
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height={size || height || 24}
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width || 24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
|
||||
fill='currentColor'
|
||||
/>
|
||||
<path
|
||||
d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
|
||||
fill='currentColor'
|
||||
/>
|
||||
<path
|
||||
d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
|
||||
fill='currentColor'
|
||||
/>
|
||||
<path
|
||||
d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
|
||||
fill='currentColor'
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Badge, Avatar, Switch } from "@nextui-org/react";
|
||||
import { NotificationIcon } from "./NotificationIcon";
|
||||
import { CartIcon } from "./CartIcon";
|
||||
|
||||
export default function App() {
|
||||
const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
|
||||
<NotificationIcon className="fill-current" size={30} />
|
||||
</Badge>
|
||||
<Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
|
||||
<CartIcon size={30} />
|
||||
</Badge>
|
||||
</div>
|
||||
<Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
|
||||
Show badge
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
"/NotificationIcon.jsx": NotificationIcon,
|
||||
"/CartIcon.jsx": CartIcon,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -2,3 +2,4 @@ export * from "./avatar";
|
||||
export * from "./button";
|
||||
export * from "./card";
|
||||
export * from "./accordion";
|
||||
export * from "./badge";
|
||||
|
||||
@ -128,7 +128,7 @@ Here's an example of how to customize the accordion styles:
|
||||
|
||||
## 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 event support for <kbd>Space</kbd>, <kbd>Enter</kbd>, <kbd>Arrow Up</kbd>, <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.
|
||||
@ -138,22 +138,22 @@ Here's an example of how to customize the accordion styles:
|
||||
|
||||
### 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. | - |
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
|
||||
| children | `ReactNode` \| `string` | The content of the component. | |
|
||||
| title | `ReactNode` \| `string` | The accordion item title. | |
|
||||
| subtitle | `ReactNode` \| `string` | The accordion item subtitle. | |
|
||||
| indicator | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon. | |
|
||||
| startContent | `ReactNode` | The accordion item start content, usually an icon or avatar. | |
|
||||
| motionProps | [MotionProps](#motion-props) | The props to modify the framer motion animation. Use the `variants` API to create your own animation. | |
|
||||
| isOpen | `boolean` | The current open status. (controlled) | |
|
||||
| isCompact | `boolean` | Whether the AccordionItem is compact. | `false` |
|
||||
| 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 | [Classnames](#accordiom-item-classnames) | Allows to set custom class names for the accordion item slots. | - |
|
||||
|
||||
### Accordion Item Events
|
||||
|
||||
@ -167,26 +167,26 @@ Here's an example of how to customize the accordion styles:
|
||||
|
||||
### 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). | |
|
||||
| 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 all Accordion items should be smaller. | `false` |
|
||||
| isDisabled | `boolean` | Whether the Accordion items are disabled. | |
|
||||
| hideDivider | `boolean` | Whether the Accordion items divider is hidden. | |
|
||||
| hideIndicator | `boolean` | Whether the Accordion items indicator is hidden. | |
|
||||
| disableAnimation | `boolean` | Whether the Accordion items open/close animation is disabled. | |
|
||||
| disableIndicatorAnimation | `boolean` | Whether the Accordion items 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 | [Classnames](#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
|
||||
|
||||
@ -216,6 +216,8 @@ export type AccordionItemIndicatorProps = {
|
||||
*/
|
||||
isDisabled?: boolean;
|
||||
};
|
||||
|
||||
type indicator?: ReactNode | ((props: AccordionItemIndicatorProps) => ReactNode) | null;
|
||||
```
|
||||
|
||||
### Accordion Item classNames
|
||||
@ -234,10 +236,10 @@ export type AccordionItemClassnames = {
|
||||
};
|
||||
```
|
||||
|
||||
#### Collapse Transition Props
|
||||
#### Motion Props
|
||||
|
||||
```ts
|
||||
export type CollapseTransitionProps = {
|
||||
export type MotionProps = {
|
||||
/**
|
||||
* If `true`, the opacity of the content will be animated
|
||||
* @default true
|
||||
|
||||
@ -8,6 +8,88 @@ url: https://nextui.org/docs/components/badge
|
||||
|
||||
Badges are used as a small numerical value or status descriptor for UI elements.
|
||||
|
||||
<ComponentLinks component="badge" />
|
||||
|
||||
---
|
||||
|
||||
## Import
|
||||
|
||||
```jsx
|
||||
import { Badge } from "@nextui-org/react";
|
||||
```
|
||||
import {Badge} from "@nextui-org/react";
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
<CodeDemo title="Usage" files={badgeContent.usage} />
|
||||
|
||||
### Sizes
|
||||
|
||||
<CodeDemo title="Sizes" files={badgeContent.sizes} />
|
||||
|
||||
### Colors
|
||||
|
||||
<CodeDemo title="Colors" files={badgeContent.colors} />
|
||||
|
||||
### Variants
|
||||
|
||||
<CodeDemo title="Variants" files={badgeContent.variants} />
|
||||
|
||||
### Radius
|
||||
|
||||
<CodeDemo title="Radius" files={badgeContent.radius} />
|
||||
|
||||
### Placements
|
||||
|
||||
<CodeDemo title="Placements" files={badgeContent.placements} />
|
||||
|
||||
### Shapes
|
||||
|
||||
For a better positioning, you can use the `shape` property to define the shape of the badge.
|
||||
|
||||
<CodeDemo title="Shapes" files={badgeContent.shapes} />
|
||||
|
||||
### Badge Visibility
|
||||
|
||||
You can control the visibility of the badge by using the `isInvisible` property.
|
||||
|
||||
<CodeDemo title="Badge visibility" files={badgeContent.visibility} />
|
||||
|
||||
### Content Examples
|
||||
|
||||
<CodeDemo title="Content examples" files={badgeContent.contentExamples} />
|
||||
|
||||
### Disable Outline
|
||||
|
||||
By default, the badge has an outline, you can disable it by using the `disableOutline` property.
|
||||
|
||||
<CodeDemo title="Disable outline" files={badgeContent.disableOutline} />
|
||||
|
||||
### Accessibility
|
||||
|
||||
It's not advisable to depend on the badge's content for accurate announcement.
|
||||
Instead, consider supplying a comprehensive description, such as using `aria-label`.
|
||||
|
||||
<CodeDemo title="Accessibility" files={badgeContent.a11y} />
|
||||
|
||||
<Spacer y={8} />
|
||||
|
||||
## API
|
||||
|
||||
### Badge Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------- |
|
||||
| children \* | `ReactNode` | The wrapped component. | - |
|
||||
| content | `string` \| `number` \| `ReactNode` | The content of the badge. The badge will be rendered relative to its children. | - |
|
||||
| variant | `solid` \| `flat` \| `faded` \| `shadow` | The variant style of the badge. | `solid` |
|
||||
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge. | `neutral` |
|
||||
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the badge. | `md` |
|
||||
| radius | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the badge. | `full` |
|
||||
| shape | `circle` \| `rectangle` | The shape of the badge. | `rectangle` |
|
||||
| placement | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left` | The placement of the badge. | `top-right` |
|
||||
| disableOutline | `boolean` | If `true`, the badge will not have an outline. | `false` |
|
||||
| disableAnimation | `boolean` | If `true`, the badge will not have an animation. | `false` |
|
||||
| isInvisible | `boolean` | If `true`, the badge will be invisible. | `false` |
|
||||
| isOneChar | `boolean` | If `true`, the badge will have the same width and height. | `false` |
|
||||
| isDot | `boolean` | If `true`, the badge will have smaller dimensions. | `false` |
|
||||
| classNames | `Record<"base"｜"badge", string>` | Allows to set custom class names for the badge slots. | - |
|
||||
|
||||
@ -183,6 +183,7 @@ module.exports = {
|
||||
minWidth: "100%",
|
||||
},
|
||||
table: {
|
||||
marginTop: '0px',
|
||||
fontSize: theme("fontSize.sm")[0],
|
||||
lineHeight: theme("fontSize.sm")[1].lineHeight,
|
||||
},
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {LayoutGroup} from "framer-motion";
|
||||
|
||||
import {UseAccordionProps, useAccordion} from "./use-accordion";
|
||||
import {AccordionProvider} from "./accordion-context";
|
||||
@ -7,23 +8,33 @@ 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, itemStyles} = useAccordion({
|
||||
const {
|
||||
Component,
|
||||
context,
|
||||
state,
|
||||
getBaseProps,
|
||||
disableAnimation,
|
||||
handleFocusChanged,
|
||||
itemStyles,
|
||||
} = useAccordion({
|
||||
ref,
|
||||
...props,
|
||||
});
|
||||
|
||||
const content = [...state.collection].map((item) => (
|
||||
<AccordionItem
|
||||
key={item.key}
|
||||
item={item}
|
||||
onFocusChange={(isFocused) => handleFocusChanged(isFocused, item.key)}
|
||||
{...item.props}
|
||||
classNames={{...itemStyles, ...(item.props.classNames || {})}}
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
<Component {...getBaseProps()}>
|
||||
<AccordionProvider value={context}>
|
||||
{[...state.collection].map((item) => (
|
||||
<AccordionItem
|
||||
key={item.key}
|
||||
item={item}
|
||||
onFocusChange={(isFocused) => handleFocusChanged(isFocused, item.key)}
|
||||
{...item.props}
|
||||
classNames={{...itemStyles, ...(item.props.classNames || {})}}
|
||||
/>
|
||||
))}
|
||||
{disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}
|
||||
</AccordionProvider>
|
||||
</Component>
|
||||
);
|
||||
|
||||
@ -204,6 +204,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
|
||||
state,
|
||||
focusedKey,
|
||||
getBaseProps,
|
||||
disableAnimation,
|
||||
handleFocusChanged,
|
||||
itemStyles,
|
||||
};
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
@ -45,6 +45,7 @@
|
||||
"devDependencies": {
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/switch": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
|
||||
@ -44,7 +44,11 @@ export function useBadge(originalProps: UseBadgeProps) {
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const isOneChar = useMemo(() => String(content)?.length === 1, [content]);
|
||||
const isOneChar = useMemo(() => String(content)?.length === 1 || originalProps?.isOneChar, [
|
||||
content,
|
||||
originalProps?.isOneChar,
|
||||
]);
|
||||
|
||||
const isDot = useMemo(() => String(content)?.length === 0, [content]);
|
||||
|
||||
const baseStyles = clsx(classNames?.badge, className);
|
||||
@ -74,6 +78,8 @@ export function useBadge(originalProps: UseBadgeProps) {
|
||||
content,
|
||||
slots,
|
||||
classNames,
|
||||
disableAnimation: originalProps?.disableAnimation,
|
||||
isInvisible: originalProps?.isInvisible,
|
||||
getBadgeProps,
|
||||
};
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {badge} from "@nextui-org/theme";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
import {CheckIcon} from "@nextui-org/shared-icons";
|
||||
import {Switch} from "@nextui-org/switch";
|
||||
import {Notification, CartIcon} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Badge, BadgeProps} from "../src";
|
||||
|
||||
@ -51,6 +53,16 @@ export default {
|
||||
options: ["top-right", "top-left", "bottom-right", "bottom-left"],
|
||||
},
|
||||
},
|
||||
isInvisible: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Badge>;
|
||||
|
||||
@ -69,6 +81,37 @@ const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
|
||||
</Badge>
|
||||
);
|
||||
|
||||
const ShapesTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => (
|
||||
<div className="flex gap-4 items-center">
|
||||
<Badge {...args} shape="rectangle">
|
||||
<Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
|
||||
</Badge>
|
||||
<Badge {...args} shape="circle">
|
||||
<Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
|
||||
const InvisibleTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => {
|
||||
const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge {...args} color="danger" content={5} isInvisible={isInvisible} shape="circle">
|
||||
<Notification className="fill-current" size={30} />
|
||||
</Badge>
|
||||
<Badge {...args} color="danger" content={50} isInvisible={isInvisible} shape="circle">
|
||||
<CartIcon size={30} />
|
||||
</Badge>
|
||||
</div>
|
||||
<Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
|
||||
Show badge
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
@ -107,3 +150,15 @@ VerticalOffset.args = {
|
||||
badge: "p-0.5 right-[50%] bottom-[50%]",
|
||||
},
|
||||
};
|
||||
|
||||
export const Shapes = ShapesTemplate.bind({});
|
||||
Shapes.args = {
|
||||
...defaultProps,
|
||||
color: "danger",
|
||||
};
|
||||
|
||||
export const Invisible = InvisibleTemplate.bind({});
|
||||
Invisible.args = {
|
||||
...defaultProps,
|
||||
color: "danger",
|
||||
};
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/divider
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/divider",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": ". A separator is a visual divider between two groups of content",
|
||||
"keywords": [
|
||||
"divider"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"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,20 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
@ -34,7 +34,8 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18"
|
||||
"react": ">=18",
|
||||
"framer-motion": ">=4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -2,26 +2,38 @@ import {Variants} from "framer-motion";
|
||||
|
||||
export const menuVariants: Variants = {
|
||||
open: {
|
||||
transition: {staggerChildren: 0.07, delayChildren: 0.15},
|
||||
transition: {
|
||||
type: "spring",
|
||||
bounce: 0,
|
||||
duration: 0.7,
|
||||
delayChildren: 0.15,
|
||||
staggerChildren: 0.05,
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
transition: {staggerChildren: 0.05, staggerDirection: -1},
|
||||
transition: {
|
||||
type: "spring",
|
||||
bounce: 0,
|
||||
duration: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const menuItemVariants: Variants = {
|
||||
open: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
y: {stiffness: 1000, velocity: -100},
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 24,
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
transition: {
|
||||
y: {stiffness: 1000},
|
||||
duration: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -50,6 +50,7 @@ const NavbarMenu = forwardRef<NavbarMenuProps, "ul">((props, ref) => {
|
||||
return (
|
||||
<motion.ul
|
||||
ref={domRef}
|
||||
layoutScroll
|
||||
animate={isMenuOpen ? "open" : "closed"}
|
||||
className={slots.menu?.({class: styles})}
|
||||
data-open={dataAttr(isMenuOpen)}
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/skeleton
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/skeleton",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Skeleton is used to display the loading state of some component.",
|
||||
"keywords": [
|
||||
"skeleton"
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/table
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/table",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Tables are used to display tabular data using rows and columns. ",
|
||||
"keywords": [
|
||||
"table"
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/tabs
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tabs",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
|
||||
"keywords": [
|
||||
"tabs"
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -1,5 +1,44 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/skeleton@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/divider@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/tabs@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/kbd@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -33,6 +33,7 @@ const badge = tv({
|
||||
"font-regular",
|
||||
"scale-100",
|
||||
"opacity-100",
|
||||
"subpixel-antialiased",
|
||||
"data-[invisible=true]:scale-0",
|
||||
"data-[invisible=true]:opacity-0",
|
||||
],
|
||||
@ -118,7 +119,7 @@ const badge = tv({
|
||||
badge: "transition-none",
|
||||
},
|
||||
false: {
|
||||
badge: "transition-transform-opacity",
|
||||
badge: "transition-transform-opacity !ease-soft-spring !duration-300",
|
||||
},
|
||||
},
|
||||
disableOutline: {
|
||||
@ -377,28 +378,28 @@ const badge = tv({
|
||||
placement: "top-right",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "top-[15%] right-[15%] translate-x-1/2 -translate-y-1/2",
|
||||
badge: "top-[10%] right-[10%] translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "top-left",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "top-[15%] left-[15%] -translate-x-1/2 -translate-y-1/2",
|
||||
badge: "top-[10%] left-[10%] -translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-right",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "bottom-[15%] right-[15%] translate-x-1/2 translate-y-1/2",
|
||||
badge: "bottom-[10%] right-[10%] translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-left",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "bottom-[15%] left-[15%] -translate-x-1/2 translate-y-1/2",
|
||||
badge: "bottom-[10%] left-[10%] -translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -116,7 +116,7 @@ const toggle = tv({
|
||||
],
|
||||
startIcon: "text-[0.6rem] left-1",
|
||||
endIcon: "text-[0.6rem] right-1",
|
||||
label: "text-sm",
|
||||
label: "text-xs",
|
||||
},
|
||||
sm: {
|
||||
wrapper: "w-10 h-6 mr-2",
|
||||
@ -130,7 +130,7 @@ const toggle = tv({
|
||||
],
|
||||
endIcon: "text-xs",
|
||||
startIcon: "text-xs",
|
||||
label: "text-base",
|
||||
label: "text-sm",
|
||||
},
|
||||
md: {
|
||||
wrapper: "w-12 h-7 mr-2",
|
||||
@ -144,7 +144,7 @@ const toggle = tv({
|
||||
],
|
||||
endIcon: "text-sm",
|
||||
startIcon: "text-sm",
|
||||
label: "text-lg",
|
||||
label: "text-base",
|
||||
},
|
||||
lg: {
|
||||
wrapper: "w-14 h-8 mr-2",
|
||||
@ -158,7 +158,7 @@ const toggle = tv({
|
||||
],
|
||||
endIcon: "text-base",
|
||||
startIcon: "text-base",
|
||||
label: "text-xl",
|
||||
label: "text-lg",
|
||||
},
|
||||
xl: {
|
||||
wrapper: "w-16 h-9 mr-2",
|
||||
@ -172,7 +172,7 @@ const toggle = tv({
|
||||
],
|
||||
endIcon: "text-base",
|
||||
startIcon: "text-base",
|
||||
label: "text-xl",
|
||||
label: "text-lg",
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-accordion-item
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-accordion-item",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Internal impl for react aria accordion item",
|
||||
"keywords": [
|
||||
"use-aria-accordion-item"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-button
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-button",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"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"
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/use-aria-field
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230521141624
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230521141624
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-field",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
|
||||
"keywords": [
|
||||
"use-aria-field"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-label
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-label",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Based on react-aria label hook, it provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.",
|
||||
"keywords": [
|
||||
"use-aria-label"
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @nextui-org/use-aria-slot-id
|
||||
|
||||
## 0.0.0-dev-v2-20230521141624
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Badge improved
|
||||
|
||||
## 0.0.0-dev-v2-20230518012432
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-slot-id",
|
||||
"version": "0.0.0-dev-v2-20230518012432",
|
||||
"version": "0.0.0-dev-v2-20230521141624",
|
||||
"description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
|
||||
"keywords": [
|
||||
"use-aria-slot-id"
|
||||
|
||||
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