mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(toast): introduce Toast component (#4437)
* feat: initial commit * chore: adding the animation * chore: nits * chore: fixes and adding draft1 of stories * chore: adding the docs draft * chore: adding the swiping interaction for toast removal * chore: adding the tests * fix: improving the progress bar logix * chore: refactoring and refining the animations * fix: making the animations compatible with the positons * chore: fixing the styles * chore: modifying the animations * chore: improving the animations * chore: adding the decorator to the story-book * chore: fixing the animations and positions * fix: handle expand region on touch * feat: adding the promises support * chore: updating the styles * chore: improving styles * chore: styles correction * fix: adding junior's suggestions * chore: correcting styles * fix: fixing the timer behavior * chore: adding the spinner to the toast * chore: full width for mobile * chore: modifying styles * chore: fixing the positions on smaller devices * chore: adding story with description * chore: adding credits for sonner * fix: adding junior's suggestions * chore: adding the exit animation * fix: adding junior's suggestions * chore: improving the swipe animations * fix: fixing the swipe animations on touch * chore: adding tests * chore: adding swipe threshild and initial position variable * fix: fixing autoclose in timeout * chore: modifying the docs * chore: fixing the conflict * chore: adding marcus' suggestions * chore: adding the bottom animations * chore: modying docs * chore: removing nextui references * chore: adding info about the provider * chore: updating the docs * chore: versions in package.json * chore: nits * chore: adding junior's suggestions * chore: nits * fix: applying junior's suggestions * chore: adding junior's suggestions * chore: using domMax * fix: adding Marcus's suggestions * chore: add global toast props and custom close icon * chore: adding the defaultTimout provider prop * chore: modifying defaultTimeout * chore: nits * fix: adding Marcus' suggestions * chore: fixing bg * chore(deps): bump RA deps * fix: fixing the color discrepancy due to the timer * chore: moving the kapan ai to the left side * refactor(toast): update author * chore: nit * chore: improvements * chore: updating the solid variant --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Maharshi Alpesh
GitHub
parent
fbc361c3b1
commit
d64fcc8389
7
.changeset/shaggy-beers-breathe.md
Normal file
7
.changeset/shaggy-beers-breathe.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
"@heroui/shared-icons": patch
|
||||
"@heroui/toast": patch
|
||||
"@heroui/theme": patch
|
||||
---
|
||||
|
||||
Introducing the toast component(#2560)
|
||||
@ -9,6 +9,7 @@ export function ScriptProviders({isKapaEnabled = true}: {isKapaEnabled?: boolean
|
||||
<>
|
||||
<Script
|
||||
defer
|
||||
data-button-position-left="20px"
|
||||
data-modal-disclaimer="This is a custom LLM for HeroUI with access to all developer docs (heroui.com/docs) and GitHub Issues and PRs (github.com/heroui-inc/heroui)."
|
||||
data-modal-example-questions="How do I install for Next.js?,How do I customize primary color?"
|
||||
data-project-color="#000000"
|
||||
|
||||
@ -437,7 +437,7 @@
|
||||
"title": "Toast",
|
||||
"keywords": "toast, notification, message",
|
||||
"path": "/docs/components/toast.mdx",
|
||||
"comingSoon": true
|
||||
"newPost": true
|
||||
},
|
||||
{
|
||||
"key": "textarea",
|
||||
|
||||
24
apps/docs/content/components/toast/color.raw.jsx
Normal file
24
apps/docs/content/components/toast/color.raw.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import {addToast, Button} from "@heroui/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
|
||||
<Button
|
||||
key={color}
|
||||
color={color}
|
||||
variant={"flat"}
|
||||
onPress={() =>
|
||||
addToast({
|
||||
title: "Toast title",
|
||||
description: "Toast displayed successfully",
|
||||
color: color,
|
||||
})
|
||||
}
|
||||
>
|
||||
{color}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/color.ts
Normal file
9
apps/docs/content/components/toast/color.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./color.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
44
apps/docs/content/components/toast/custom-close-icon.raw.jsx
Normal file
44
apps/docs/content/components/toast/custom-close-icon.raw.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import {addToast, Button} from "@heroui/react";
|
||||
|
||||
const CustomToastComponent = () => {
|
||||
return (
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
hideIcon: true,
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
classNames: {
|
||||
closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
|
||||
},
|
||||
closeIcon: (
|
||||
<svg
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<CustomToastComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/custom-close-icon.ts
Normal file
9
apps/docs/content/components/toast/custom-close-icon.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./custom-close-icon.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
50
apps/docs/content/components/toast/custom-styles.raw.jsx
Normal file
50
apps/docs/content/components/toast/custom-styles.raw.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import {addToast, Button, cn} from "@heroui/react";
|
||||
|
||||
const CustomToastComponent = () => {
|
||||
return (
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Successfull!",
|
||||
description: "Document uploaded to cloud successfully.",
|
||||
classNames: {
|
||||
base: cn([
|
||||
"bg-default-50 dark:bg-background shadow-sm",
|
||||
"border-1",
|
||||
"relative before:content-[''] before:absolute before:z-10",
|
||||
"before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
|
||||
"rounded-l-none border-l-0",
|
||||
"min-w-[350px]",
|
||||
"rounded-md",
|
||||
"flex flex-col items-start",
|
||||
"before:bg-primary border-primary-200 dark:border-primary-100",
|
||||
]),
|
||||
icon: "w-6 h-6 fill-current",
|
||||
},
|
||||
endContent: (
|
||||
<div className="ms-11 my-2 flex gap-x-2">
|
||||
<Button color={"primary"} size="sm" variant="bordered">
|
||||
View Document
|
||||
</Button>
|
||||
<Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
|
||||
Maybe Later
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
color: "primary",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<CustomToastComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/custom-styles.ts
Normal file
9
apps/docs/content/components/toast/custom-styles.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./custom-styles.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
17
apps/docs/content/components/toast/index.ts
Normal file
17
apps/docs/content/components/toast/index.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import color from "./color";
|
||||
import variants from "./variants";
|
||||
import customStyles from "./custom-styles";
|
||||
import radius from "./radius";
|
||||
import placement from "./placement";
|
||||
import usage from "./usage";
|
||||
import customCloseIcon from "./custom-close-icon";
|
||||
|
||||
export const toastContent = {
|
||||
color,
|
||||
variants,
|
||||
customStyles,
|
||||
radius,
|
||||
placement,
|
||||
usage,
|
||||
customCloseIcon,
|
||||
};
|
||||
36
apps/docs/content/components/toast/placement.raw.jsx
Normal file
36
apps/docs/content/components/toast/placement.raw.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import {addToast, Button, ToastProvider} from "@heroui/react";
|
||||
import React from "react";
|
||||
|
||||
export default function App() {
|
||||
const [placement, setPlacement] = React.useState("right-bottom");
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
"left-top",
|
||||
"right-top",
|
||||
"center-top",
|
||||
"left-bottom",
|
||||
"right-bottom",
|
||||
"center-bottom",
|
||||
].map((position) => (
|
||||
<Button
|
||||
key={position}
|
||||
variant={"flat"}
|
||||
onPress={() => {
|
||||
setPlacement(position);
|
||||
addToast({
|
||||
title: "Toast title",
|
||||
description: "Toast displayed successfully",
|
||||
});
|
||||
}}
|
||||
>
|
||||
{position}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/placement.ts
Normal file
9
apps/docs/content/components/toast/placement.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./placement.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
24
apps/docs/content/components/toast/radius.raw.jsx
Normal file
24
apps/docs/content/components/toast/radius.raw.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import {addToast, Button} from "@heroui/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["none", "sm", "md", "lg", "full"].map((radius) => (
|
||||
<Button
|
||||
key={radius}
|
||||
radius={radius}
|
||||
variant={"flat"}
|
||||
onPress={() =>
|
||||
addToast({
|
||||
title: "Toast title",
|
||||
description: "Toast displayed successfully",
|
||||
radius: radius,
|
||||
})
|
||||
}
|
||||
>
|
||||
{radius}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/radius.ts
Normal file
9
apps/docs/content/components/toast/radius.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./radius.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
117
apps/docs/content/components/toast/usage.raw.jsx
Normal file
117
apps/docs/content/components/toast/usage.raw.jsx
Normal file
@ -0,0 +1,117 @@
|
||||
import {addToast, Button} from "@heroui/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Default
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
});
|
||||
}}
|
||||
>
|
||||
With Description
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
hideIcon: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Hidden Icon
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
promise: new Promise((resolve) => setTimeout(resolve, 3000)),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Promise (3000ms)
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
endContent: (
|
||||
<Button size="sm" variant="flat">
|
||||
Upgrade
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
}}
|
||||
>
|
||||
With endContent
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
timeout: 3000,
|
||||
shouldShowTimeoutProgess: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Timeout Progress (3000ms)
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="flat"
|
||||
onPress={() =>
|
||||
addToast({
|
||||
title: "Toast title",
|
||||
description: "Toast displayed successfully",
|
||||
icon: (
|
||||
<svg height={24} viewBox="0 0 24 24" width={24}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path
|
||||
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
|
||||
data-name="Stroke 1"
|
||||
/>
|
||||
<path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
|
||||
</g>
|
||||
</svg>
|
||||
),
|
||||
})
|
||||
}
|
||||
>
|
||||
Custom Icon
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/usage.ts
Normal file
9
apps/docs/content/components/toast/usage.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./usage.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
30
apps/docs/content/components/toast/variants.raw.jsx
Normal file
30
apps/docs/content/components/toast/variants.raw.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import {addToast, Button} from "@heroui/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
["solid", "solid"],
|
||||
["bordered", "bordered"],
|
||||
["flat", "faded"],
|
||||
].map((variant) => (
|
||||
<Button
|
||||
key={variant[0]}
|
||||
// @ts-ignore
|
||||
variant={variant[1]}
|
||||
onPress={() =>
|
||||
addToast({
|
||||
title: "Toast title",
|
||||
description: "Toast displayed successfully",
|
||||
// @ts-ignore
|
||||
variant: variant[0],
|
||||
color: "secondary",
|
||||
})
|
||||
}
|
||||
>
|
||||
{variant[0]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
apps/docs/content/components/toast/variants.ts
Normal file
9
apps/docs/content/components/toast/variants.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import App from "./variants.raw.jsx?raw";
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
343
apps/docs/content/docs/components/toast.mdx
Normal file
343
apps/docs/content/docs/components/toast.mdx
Normal file
@ -0,0 +1,343 @@
|
||||
---
|
||||
title: "Toast"
|
||||
description: "Toast are temporary notifications that provide concise feedback about an action or event."
|
||||
---
|
||||
|
||||
import {toastContent} from "@/content/components/toast";
|
||||
|
||||
# Toast
|
||||
|
||||
Toasts are temporary notifications that provide concise feedback about an action or event.
|
||||
|
||||
<ComponentLinks component="toast" />
|
||||
|
||||
---
|
||||
|
||||
<CarbonAd />
|
||||
|
||||
## Installation
|
||||
|
||||
<PackageManagers
|
||||
showGlobalInstallWarning
|
||||
commands={{
|
||||
cli: "npx heroui-cli@latest add toast",
|
||||
npm: "npm install @heroui/toast",
|
||||
yarn: "yarn add @heroui/toast",
|
||||
pnpm: "pnpm add @heroui/toast",
|
||||
bun: "bun add @heroui/toast",
|
||||
}}
|
||||
/>
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
commands={{
|
||||
main: 'import {addToast, ToastProvider} from "@heroui/react";',
|
||||
individual: 'import {addToast, ToastProvider} from "@heroui/toast";',
|
||||
}}
|
||||
/>
|
||||
|
||||
## Requirement
|
||||
|
||||
The `ToastProvider` must be added to the application before using the `addToast` function. This is required to initialize the context for managing toasts.
|
||||
|
||||
```jsx {4,9}
|
||||
// app/providers.tsx
|
||||
|
||||
import {HeroUIProvider} from '@heroui/react'
|
||||
import {ToastProvider} from "@heroui/toast";
|
||||
|
||||
export default function Providers({children}) {
|
||||
return (
|
||||
<HeroUIProvider>
|
||||
<ToastProvider />
|
||||
{children}
|
||||
</HeroUIProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
<Spacer y={4} />
|
||||
|
||||
```jsx {3,9,11}
|
||||
// app/layout.tsx
|
||||
|
||||
import {Providers} from "./providers";
|
||||
|
||||
export default function RootLayout({children}) {
|
||||
return (
|
||||
<html lang="en" className='dark'>
|
||||
<body>
|
||||
<Providers>
|
||||
{children}
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
<CodeDemo title="Usage" files={toastContent.usage} />
|
||||
|
||||
### Colors
|
||||
|
||||
Toast comes with 6 color variants to convey different meanings.
|
||||
|
||||
<CodeDemo title="Color" files={toastContent.color} />
|
||||
|
||||
### Variants
|
||||
|
||||
<CodeDemo
|
||||
title="Variants"
|
||||
files={toastContent.variants}
|
||||
/>
|
||||
|
||||
### Radius
|
||||
|
||||
<CodeDemo
|
||||
title="Radius"
|
||||
files={toastContent.radius}
|
||||
/>
|
||||
|
||||
### Toast Placement
|
||||
|
||||
<CodeDemo
|
||||
title="Placement"
|
||||
files={toastContent.placement}
|
||||
/>
|
||||
|
||||
### Custom Styles
|
||||
|
||||
You can customize the alert by passing custom Tailwind CSS classes to the component slots.
|
||||
|
||||
<CodeDemo
|
||||
title="Custom Style"
|
||||
files={toastContent.customStyles}
|
||||
/>
|
||||
|
||||
### Custom Close Icon
|
||||
|
||||
You can pass a custom close icon to the toast by passing the `closeIcon` prop and a custom class name to the `closeButton` slot.
|
||||
|
||||
<CodeDemo
|
||||
title="Custom Close Icon"
|
||||
files={toastContent.customCloseIcon}
|
||||
/>
|
||||
|
||||
### Global Toast Props
|
||||
|
||||
You can pass global toast props to the `ToastProvider` to apply to all toasts.
|
||||
|
||||
```jsx
|
||||
<ToastProvider
|
||||
toastProps={{
|
||||
radius: "full",
|
||||
color: "primary",
|
||||
variant: "flat",
|
||||
timeout: 1000,
|
||||
hideIcon: true,
|
||||
classNames: {
|
||||
closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
<Spacer y={4} />
|
||||
|
||||
## Data Attributes
|
||||
|
||||
Toast has the following attributes on the `base` element:
|
||||
|
||||
- **data-has-title**: When the toast has a title
|
||||
- **data-has-description**: When the toast has a description
|
||||
- **data-animation**: Shows the current animation of toast ("entering", "queued", "exiting", "undefined")
|
||||
- **data-placement**: Where the toast is placed on the view-port.
|
||||
- **data-drag-value**: Value by which the toast is dragged from it's original position. (This remains "0" in case of disabledAnimation)
|
||||
|
||||
<Spacer y={4} />
|
||||
|
||||
### Slots
|
||||
|
||||
Toast has the following slots:
|
||||
|
||||
- `base`: The main toast container element
|
||||
- `title`: The title element
|
||||
- `description`: The description element
|
||||
- `icon`: The icon element
|
||||
- `loadingIcon`: The icon to be displayed until `promise` is resolved/rejected.
|
||||
- `content`: The wrapper for the title, description and icon content.
|
||||
- `motionDiv`: The motion.div for the FramerMotion.
|
||||
- `progressTrack`: The track of the progressBar.
|
||||
- `progressIndicator`: The indicator of the progressBar.
|
||||
- `closeButton`: The close button element
|
||||
- `closeIcon`: The icon which resides in the close button.
|
||||
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Toast has role of `alert`
|
||||
- All Toasts are present in ToastRegion.
|
||||
- Close button has aria-label="Close" by default
|
||||
- When no toast are present, ToastRegion is removed from the DOM
|
||||
|
||||
<Spacer y={4} />
|
||||
|
||||
## API
|
||||
|
||||
### Toast Props
|
||||
|
||||
<APITable
|
||||
data={[
|
||||
{
|
||||
attribute: "title",
|
||||
type: "ReactNode",
|
||||
description: "The alert title",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "icon",
|
||||
type: "ReactNode",
|
||||
description: "The alert icon - overrides the default icon",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "description",
|
||||
type: "ReactNode",
|
||||
description: "The alert description",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "color",
|
||||
type: "default | primary | secondary | success | warning | danger",
|
||||
description: "The alert color theme",
|
||||
default: "default"
|
||||
},
|
||||
{
|
||||
attribute: "variant",
|
||||
type: "solid | bordered | flat",
|
||||
description: "The alert variant",
|
||||
default: "flat"
|
||||
},
|
||||
{
|
||||
attribute: "radius",
|
||||
type: "none | sm | md | lg | full",
|
||||
description: "The alert border radius",
|
||||
default: "md"
|
||||
},
|
||||
{
|
||||
attribute: "endContent",
|
||||
type: "ReactNode",
|
||||
description: "The alert end content",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "closeIcon",
|
||||
type: "ReactNode",
|
||||
description: "The close icon for the toast - overrides the default close icon",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "timeout",
|
||||
type: "number",
|
||||
description: "Time in milliseconds after which the toast will be closed",
|
||||
default: "6000"
|
||||
},
|
||||
{
|
||||
attribute: "promise",
|
||||
type: "Promise | undefined",
|
||||
description: "Promise based on which the notification will be styled",
|
||||
default: "undefined"
|
||||
},
|
||||
{
|
||||
attribute: "loadingIcon",
|
||||
type: "ReactNode",
|
||||
description: "The loading icon for toasts with promise prop - overrides the default loading icon",
|
||||
default: "-"
|
||||
},
|
||||
{
|
||||
attribute: "priority",
|
||||
type: "number | undefined",
|
||||
description: "Priority at which the toast will be displayed",
|
||||
default: "undefined",
|
||||
},
|
||||
{
|
||||
attribute: "hideIcon",
|
||||
type: "boolean",
|
||||
description: "Hides icon when true",
|
||||
default: "false"
|
||||
},
|
||||
{
|
||||
attribute: "hideCloseButton",
|
||||
type: "boolean",
|
||||
description: "Hides closeButton when true",
|
||||
default: "false"
|
||||
},
|
||||
{
|
||||
attribute: "shouldShowTimeoutProgress",
|
||||
type: "boolean",
|
||||
description: "Whether to indicate the timeout progress or not",
|
||||
default: "false",
|
||||
},
|
||||
{
|
||||
attribute: "classNames",
|
||||
type: "Partial<Record<\"base\" | \"content\" | \"title\" | \"description\" | \"icon\" | \"loadingIcon\" | \"progressTrack\" | \"progressIndicator\ | \"motionDiv\" | \"closeButton\" | \"closeIcon\", string>>",
|
||||
description: "Allows to set custom class names for the toast slots.",
|
||||
default: "-"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
### ToastProvider Props
|
||||
|
||||
<APITable
|
||||
data={[
|
||||
{
|
||||
attribute: "maxVisibleToasts",
|
||||
type: "number",
|
||||
description: "Maximum toasts which will be visible",
|
||||
default: "5"
|
||||
},
|
||||
{
|
||||
attribute: "placement",
|
||||
type: "right-bottom" | "left-bottom" | "center-bottom" | "right-top" | "left-top" | "center-top",
|
||||
description: "The placement of the toast.",
|
||||
default: "right-bottom"
|
||||
},
|
||||
{
|
||||
attribute: "disableAnimation",
|
||||
type: "boolean",
|
||||
description: "Disables the animation.",
|
||||
default: "false"
|
||||
},
|
||||
{
|
||||
attribute: "toastOffset",
|
||||
type: "number",
|
||||
description: "offset distance from the top or bottom",
|
||||
default: "0"
|
||||
},
|
||||
{
|
||||
attribute: "toastProps",
|
||||
type: "ToastProps",
|
||||
description: "Props to be passed to all toasts",
|
||||
default: "-"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
### Toast Events
|
||||
|
||||
<APITable
|
||||
data={[
|
||||
{
|
||||
attribute: "onClose",
|
||||
type: "() => void",
|
||||
description: "Handler called when the close button is clicked",
|
||||
default: "-"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@ -69,6 +69,9 @@ module.exports = {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
spacing: {
|
||||
'toast-gap': 'var(--toast-gap)',
|
||||
},
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
|
||||
22
packages/components/toast/README.md
Normal file
22
packages/components/toast/README.md
Normal file
@ -0,0 +1,22 @@
|
||||
# @heroui/toast
|
||||
|
||||
Toast Component helps to provide feedback on user-actions.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @heroui/toast
|
||||
# or
|
||||
npm i @heroui/toast
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/canary/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/heroui-inc/heroui/blob/canary/LICENSE).
|
||||
177
packages/components/toast/__tests__/toast.test.tsx
Normal file
177
packages/components/toast/__tests__/toast.test.tsx
Normal file
@ -0,0 +1,177 @@
|
||||
import * as React from "react";
|
||||
import {render, screen} from "@testing-library/react";
|
||||
import userEvent, {UserEvent} from "@testing-library/user-event";
|
||||
|
||||
import {addToast, ToastProvider} from "../src";
|
||||
|
||||
const title = "Testing Title";
|
||||
const description = "Testing Description";
|
||||
|
||||
describe("Toast", () => {
|
||||
let user: UserEvent;
|
||||
|
||||
beforeEach(() => {
|
||||
user = userEvent.setup();
|
||||
});
|
||||
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider />
|
||||
<button
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: "toast title",
|
||||
description: "toast description",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", async () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider />
|
||||
<button
|
||||
data-testid="button"
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: "toast title",
|
||||
description: "toast description",
|
||||
ref: ref,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
const button = wrapper.getByTestId("button");
|
||||
|
||||
await user.click(button);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should display title and description when component is rendered", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider />
|
||||
<button
|
||||
data-testid="button"
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: title,
|
||||
description: description,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
const button = wrapper.getByTestId("button");
|
||||
|
||||
await user.click(button);
|
||||
|
||||
const region = screen.getByRole("region");
|
||||
|
||||
expect(region).toContainHTML(title);
|
||||
expect(region).toContainHTML(description);
|
||||
|
||||
await user.click(wrapper.getAllByRole("button")[0]);
|
||||
});
|
||||
|
||||
it("should close", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider />
|
||||
<button
|
||||
data-testid="button"
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: title,
|
||||
description: description,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
const button = wrapper.getByTestId("button");
|
||||
|
||||
await user.click(button);
|
||||
|
||||
const initialCloseButtons = wrapper.getAllByRole("button");
|
||||
const initialButtonLength = initialCloseButtons.length;
|
||||
|
||||
await user.click(initialCloseButtons[0]);
|
||||
|
||||
const finalCloseButtons = wrapper.getAllByRole("button");
|
||||
const finalButtonLength = finalCloseButtons.length;
|
||||
|
||||
expect(initialButtonLength).toEqual(finalButtonLength + 1);
|
||||
});
|
||||
|
||||
it("should work with placement", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider placement="left-bottom" />
|
||||
<button
|
||||
data-testid="button"
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: title,
|
||||
description: description,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
const region = wrapper.getByRole("region");
|
||||
|
||||
expect(region).toHaveAttribute("data-placement", "left-bottom");
|
||||
});
|
||||
|
||||
it("should have loading-icon when promise prop is passed.", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<ToastProvider />
|
||||
<button
|
||||
data-testid="button"
|
||||
onClick={() => {
|
||||
addToast({
|
||||
title: title,
|
||||
description: description,
|
||||
promise: new Promise((resolve) => setTimeout(resolve, 3000)),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show Toast
|
||||
</button>
|
||||
</>,
|
||||
);
|
||||
|
||||
const button = wrapper.getByTestId("button");
|
||||
|
||||
await user.click(button);
|
||||
|
||||
const loadingIcon = wrapper.getByLabelText("loadingIcon");
|
||||
|
||||
expect(loadingIcon).toBeTruthy();
|
||||
});
|
||||
});
|
||||
64
packages/components/toast/package.json
Normal file
64
packages/components/toast/package.json
Normal file
@ -0,0 +1,64 @@
|
||||
{
|
||||
"name": "@heroui/toast",
|
||||
"version": "2.0.0",
|
||||
"description": "Toast are temporary notifications that provide concise feedback about an action or event",
|
||||
"keywords": [
|
||||
"toast"
|
||||
],
|
||||
"author": "HeroUI <support@heroui.com>",
|
||||
"homepage": "https://heroui.com",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/heroui-inc/heroui.git",
|
||||
"directory": "packages/components/toast"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/heroui-inc/heroui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src --dts",
|
||||
"build:fast": "tsup src",
|
||||
"dev": "pnpm build:fast --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@heroui/system": ">=2.4.8",
|
||||
"@heroui/theme": ">=2.4.7",
|
||||
"react": ">=18 || >=19.0.0-rc.0",
|
||||
"react-dom": ">=18 || >=19.0.0-rc.0",
|
||||
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroui/react-utils": "workspace:*",
|
||||
"@heroui/shared-utils": "workspace:*",
|
||||
"@heroui/shared-icons": "workspace:*",
|
||||
"@heroui/use-is-mobile": "workspace:*",
|
||||
"@heroui/spinner": "workspace:*",
|
||||
"@react-aria/toast": "3.0.0-beta.19",
|
||||
"@react-aria/utils": "3.27.0",
|
||||
"@react-aria/interactions": "3.23.0",
|
||||
"@react-stately/toast": "3.0.0-beta.7",
|
||||
"@react-stately/utils": "3.10.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@heroui/system": "workspace:*",
|
||||
"@heroui/theme": "workspace:*",
|
||||
"@heroui/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json"
|
||||
}
|
||||
14
packages/components/toast/src/index.ts
Normal file
14
packages/components/toast/src/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import Toast from "./toast";
|
||||
import {ToastProvider} from "./toast-provider";
|
||||
|
||||
// export types
|
||||
export type {ToastProps} from "./toast";
|
||||
|
||||
// export hooks
|
||||
export {useToast} from "./use-toast";
|
||||
export {addToast} from "./toast-provider";
|
||||
export {closeAll} from "./toast-provider";
|
||||
|
||||
// export component
|
||||
export {Toast};
|
||||
export {ToastProvider};
|
||||
83
packages/components/toast/src/toast-provider.tsx
Normal file
83
packages/components/toast/src/toast-provider.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast";
|
||||
import {useProviderContext} from "@heroui/system";
|
||||
|
||||
import {ToastRegion} from "./toast-region";
|
||||
import {ToastProps} from "./use-toast";
|
||||
|
||||
let globalToastQueue: ToastQueue<ToastProps> | null = null;
|
||||
|
||||
interface ToastProviderProps {
|
||||
maxVisibleToasts?: number;
|
||||
placement?:
|
||||
| "right-bottom"
|
||||
| "left-bottom"
|
||||
| "center-bottom"
|
||||
| "right-top"
|
||||
| "left-top"
|
||||
| "center-top";
|
||||
disableAnimation?: boolean;
|
||||
toastProps?: ToastProps;
|
||||
toastOffset?: number;
|
||||
}
|
||||
|
||||
export const getToastQueue = () => {
|
||||
if (!globalToastQueue) {
|
||||
globalToastQueue = new ToastQueue({
|
||||
maxVisibleToasts: Infinity,
|
||||
hasExitAnimation: true,
|
||||
});
|
||||
}
|
||||
|
||||
return globalToastQueue;
|
||||
};
|
||||
|
||||
export const ToastProvider = ({
|
||||
placement = "right-bottom",
|
||||
disableAnimation: disableAnimationProp = false,
|
||||
maxVisibleToasts = 3,
|
||||
toastOffset = 0,
|
||||
toastProps = {},
|
||||
}: ToastProviderProps) => {
|
||||
const toastQueue = useToastQueue(getToastQueue());
|
||||
const globalContext = useProviderContext();
|
||||
const disableAnimation = disableAnimationProp ?? globalContext?.disableAnimation ?? false;
|
||||
|
||||
if (toastQueue.visibleToasts.length == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ToastRegion
|
||||
disableAnimation={disableAnimation}
|
||||
maxVisibleToasts={maxVisibleToasts}
|
||||
placement={placement}
|
||||
toastOffset={toastOffset}
|
||||
toastProps={toastProps}
|
||||
toastQueue={toastQueue}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const addToast = ({...props}: ToastProps & ToastOptions) => {
|
||||
if (!globalToastQueue) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options: Partial<ToastOptions> = {
|
||||
priority: props?.priority,
|
||||
};
|
||||
|
||||
globalToastQueue.add(props, options);
|
||||
};
|
||||
|
||||
export const closeAll = () => {
|
||||
if (!globalToastQueue) {
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = globalToastQueue.visibleToasts.map((toast) => toast.key);
|
||||
|
||||
keys.map((key) => {
|
||||
globalToastQueue?.close(key);
|
||||
});
|
||||
};
|
||||
106
packages/components/toast/src/toast-region.tsx
Normal file
106
packages/components/toast/src/toast-region.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import {useCallback, useEffect, useMemo, useRef, useState} from "react";
|
||||
import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast";
|
||||
import {QueuedToast, ToastState} from "@react-stately/toast";
|
||||
import {useHover} from "@react-aria/interactions";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {toastRegion, ToastRegionVariantProps} from "@heroui/theme";
|
||||
|
||||
import Toast from "./toast";
|
||||
import {ToastProps} from "./use-toast";
|
||||
|
||||
interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps {
|
||||
toastQueue: ToastState<T>;
|
||||
placement?:
|
||||
| "right-bottom"
|
||||
| "left-bottom"
|
||||
| "center-bottom"
|
||||
| "right-top"
|
||||
| "left-top"
|
||||
| "center-top";
|
||||
maxVisibleToasts: number;
|
||||
toastOffset?: number;
|
||||
toastProps?: ToastProps;
|
||||
}
|
||||
|
||||
export function ToastRegion<T extends ToastProps>({
|
||||
toastQueue,
|
||||
placement,
|
||||
disableAnimation,
|
||||
maxVisibleToasts,
|
||||
toastOffset,
|
||||
toastProps = {},
|
||||
...props
|
||||
}: ToastRegionProps<T>) {
|
||||
const ref = useRef(null);
|
||||
const {regionProps} = useToastRegion(props, toastQueue, ref);
|
||||
const {hoverProps, isHovered} = useHover({
|
||||
isDisabled: false,
|
||||
});
|
||||
|
||||
const [isTouched, setIsTouched] = useState(false);
|
||||
|
||||
const slots = useMemo(
|
||||
() =>
|
||||
toastRegion({
|
||||
disableAnimation,
|
||||
}),
|
||||
[disableAnimation],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function handleTouchOutside(event: TouchEvent) {
|
||||
if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) {
|
||||
setIsTouched(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("touchstart", handleTouchOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("touchstart", handleTouchOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [heights, setHeights] = useState<number[]>([]);
|
||||
const total = toastQueue.visibleToasts?.length ?? 0;
|
||||
|
||||
const handleTouchStart = useCallback(() => {
|
||||
setIsTouched(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...mergeProps(regionProps, hoverProps)}
|
||||
ref={ref}
|
||||
className={slots.base()}
|
||||
data-placement={placement}
|
||||
onTouchStart={handleTouchStart}
|
||||
>
|
||||
{toastQueue.visibleToasts.map((toast: QueuedToast<ToastProps>, index) => {
|
||||
if (disableAnimation && total - index > maxVisibleToasts) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (total - index <= 4 || (isHovered && total - index <= maxVisibleToasts + 1)) {
|
||||
return (
|
||||
<Toast
|
||||
key={toast.key}
|
||||
state={toastQueue}
|
||||
toast={toast}
|
||||
{...mergeProps(toastProps, toast.content)}
|
||||
disableAnimation={disableAnimation}
|
||||
heights={heights}
|
||||
index={index}
|
||||
isRegionExpanded={isHovered || isTouched}
|
||||
placement={placement}
|
||||
setHeights={setHeights}
|
||||
toastOffset={toastOffset}
|
||||
total={total}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
packages/components/toast/src/toast.tsx
Normal file
130
packages/components/toast/src/toast.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import {forwardRef} from "@heroui/system";
|
||||
import {Button, ButtonProps} from "@heroui/button";
|
||||
import {
|
||||
CloseIcon,
|
||||
DangerIcon,
|
||||
InfoFilledIcon,
|
||||
SuccessIcon,
|
||||
WarningIcon,
|
||||
} from "@heroui/shared-icons";
|
||||
import {AnimatePresence, m, LazyMotion} from "framer-motion";
|
||||
import {cloneElement, isValidElement} from "react";
|
||||
import {Spinner} from "@heroui/spinner";
|
||||
|
||||
import {UseToastProps, useToast} from "./use-toast";
|
||||
|
||||
const loadFeatures = () => import("framer-motion").then((res) => res.domMax);
|
||||
|
||||
export interface ToastProps extends UseToastProps {}
|
||||
|
||||
const iconMap = {
|
||||
primary: InfoFilledIcon,
|
||||
secondary: InfoFilledIcon,
|
||||
success: SuccessIcon,
|
||||
warning: WarningIcon,
|
||||
danger: DangerIcon,
|
||||
} as const;
|
||||
|
||||
const Toast = forwardRef<"div", ToastProps>((props, ref) => {
|
||||
const {
|
||||
Component,
|
||||
icon,
|
||||
loadingIcon,
|
||||
domRef,
|
||||
endContent,
|
||||
color,
|
||||
hideIcon,
|
||||
closeIcon,
|
||||
disableAnimation,
|
||||
progressBarRef,
|
||||
classNames,
|
||||
slots,
|
||||
isProgressBarVisible,
|
||||
getToastProps,
|
||||
getContentProps,
|
||||
getTitleProps,
|
||||
getDescriptionProps,
|
||||
getCloseButtonProps,
|
||||
getIconProps,
|
||||
getMotionDivProps,
|
||||
getCloseIconProps,
|
||||
getLoadingIconProps,
|
||||
isLoading,
|
||||
} = useToast({
|
||||
...props,
|
||||
ref,
|
||||
});
|
||||
|
||||
const customIcon = icon && isValidElement(icon) ? cloneElement(icon, getIconProps()) : null;
|
||||
const IconComponent = iconMap[color] || iconMap.primary;
|
||||
const customLoadingIcon =
|
||||
loadingIcon && isValidElement(loadingIcon)
|
||||
? cloneElement(loadingIcon, getLoadingIconProps())
|
||||
: null;
|
||||
const loadingIconComponent = isLoading
|
||||
? customLoadingIcon || (
|
||||
<Spinner
|
||||
aria-label="loadingIcon"
|
||||
classNames={{wrapper: getLoadingIconProps().className}}
|
||||
color={color ?? "default"}
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
|
||||
const customCloseIcon =
|
||||
closeIcon && isValidElement(closeIcon) ? cloneElement(closeIcon, {}) : null;
|
||||
|
||||
const toastContent = (
|
||||
<Component ref={domRef} {...getToastProps()}>
|
||||
<main {...getContentProps()}>
|
||||
{hideIcon && !isLoading
|
||||
? null
|
||||
: loadingIconComponent || customIcon || <IconComponent {...getIconProps()} />}
|
||||
<div>
|
||||
<div {...getTitleProps()}>{props.toast.content.title}</div>
|
||||
<div {...getDescriptionProps()}>{props.toast.content.description}</div>
|
||||
</div>
|
||||
</main>
|
||||
{isProgressBarVisible && (
|
||||
<div className={slots.progressTrack({class: classNames?.progressTrack})}>
|
||||
<div
|
||||
ref={progressBarRef}
|
||||
className={slots.progressIndicator({class: classNames?.progressIndicator})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button isIconOnly {...(getCloseButtonProps() as ButtonProps)}>
|
||||
{customCloseIcon || <CloseIcon {...getCloseIconProps()} />}
|
||||
</Button>
|
||||
{endContent}
|
||||
</Component>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{disableAnimation ? (
|
||||
toastContent
|
||||
) : (
|
||||
<LazyMotion features={loadFeatures}>
|
||||
<AnimatePresence>
|
||||
<m.div {...getMotionDivProps()}>
|
||||
<m.div
|
||||
key={"inner-div"}
|
||||
animate={{opacity: 1}}
|
||||
exit={{opacity: 0}}
|
||||
initial={{opacity: 0}}
|
||||
transition={{duration: 0.25, ease: "easeOut", delay: 0.1}}
|
||||
>
|
||||
{toastContent}
|
||||
</m.div>
|
||||
</m.div>
|
||||
</AnimatePresence>
|
||||
</LazyMotion>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
Toast.displayName = "HeroUI.Toast";
|
||||
|
||||
export default Toast;
|
||||
621
packages/components/toast/src/use-toast.ts
Normal file
621
packages/components/toast/src/use-toast.ts
Normal file
@ -0,0 +1,621 @@
|
||||
import type {SlotsToClasses, ToastSlots, ToastVariantProps} from "@heroui/theme";
|
||||
|
||||
import {HTMLHeroUIProps, PropGetter, mapPropsVariants, useProviderContext} from "@heroui/system";
|
||||
import {toast as toastTheme} from "@heroui/theme";
|
||||
import {ReactRef, useDOMRef} from "@heroui/react-utils";
|
||||
import {clsx, dataAttr, isEmpty, objectToDeps} from "@heroui/shared-utils";
|
||||
import {ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
|
||||
import {useToast as useToastAria, AriaToastProps} from "@react-aria/toast";
|
||||
import {chain, mergeProps} from "@react-aria/utils";
|
||||
import {QueuedToast, ToastState} from "@react-stately/toast";
|
||||
import {MotionProps} from "framer-motion";
|
||||
import {useHover} from "@react-aria/interactions";
|
||||
import {useIsMobile} from "@heroui/use-is-mobile";
|
||||
|
||||
export interface ToastProps extends ToastVariantProps {
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
*/
|
||||
ref?: ReactRef<HTMLElement | null>;
|
||||
/**
|
||||
* title of the toast
|
||||
*/
|
||||
title?: ReactNode;
|
||||
/**
|
||||
* description of the toast
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* Promise based on which the notification will be styled.
|
||||
*/
|
||||
promise?: Promise<any>;
|
||||
/**
|
||||
* Classname or List of classes to change the classNames of the element.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* addToast({
|
||||
* classNames={{
|
||||
* base:"base-classes",
|
||||
* content: "content-classes"
|
||||
* description: "description-classes"
|
||||
* title: "title-classes"
|
||||
* loadingIcon: "loading-icon-classes",
|
||||
* icon: "icon-classes",
|
||||
* progressTrack: "progress-track-classes",
|
||||
* progressIndicator: "progress-indicator-classes",
|
||||
* closeButton: "closeButton-classes"
|
||||
* closeIcon: "closeIcon-classes"
|
||||
* }}
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
classNames?: SlotsToClasses<ToastSlots>;
|
||||
/**
|
||||
* Content to be displayed in the end side of the toast
|
||||
*/
|
||||
endContent?: ReactNode;
|
||||
/**
|
||||
* Icon to be displayed in the toast - overrides the default icon
|
||||
*/
|
||||
icon?: ReactNode;
|
||||
/**
|
||||
* Icon to be displayed in the close button - overrides the default close icon
|
||||
*/
|
||||
closeIcon?: ReactNode | ((props: any) => ReactNode);
|
||||
/**
|
||||
* Icon to be displayed in the loading toast - overrides the loading icon
|
||||
*/
|
||||
loadingIcon?: ReactNode;
|
||||
/**
|
||||
* Whether the toast-icon should be hidden.
|
||||
* @default false
|
||||
*/
|
||||
hideIcon?: boolean;
|
||||
/**
|
||||
* Time to auto-close the toast.
|
||||
*/
|
||||
timeout?: number;
|
||||
/**
|
||||
* hides the close button
|
||||
*/
|
||||
hideCloseButton?: boolean;
|
||||
/**
|
||||
* function which is called when toast is closed.
|
||||
*/
|
||||
onClose?: () => void;
|
||||
/**
|
||||
* props that will be passed to the m.div
|
||||
*/
|
||||
motionProps?: MotionProps;
|
||||
/**
|
||||
* should apply styles to indicate timeout progress
|
||||
*/
|
||||
shouldShowTimeoutProgess?: boolean;
|
||||
}
|
||||
|
||||
interface Props<T> extends Omit<HTMLHeroUIProps<"div">, "title">, ToastProps {
|
||||
toast: QueuedToast<T>;
|
||||
index: number;
|
||||
total: number;
|
||||
state: ToastState<T>;
|
||||
heights: number[];
|
||||
setHeights: (val: number[]) => void;
|
||||
disableAnimation?: boolean;
|
||||
isRegionExpanded: boolean;
|
||||
placement?:
|
||||
| "right-bottom"
|
||||
| "left-bottom"
|
||||
| "center-bottom"
|
||||
| "right-top"
|
||||
| "left-top"
|
||||
| "center-top";
|
||||
toastOffset?: number;
|
||||
}
|
||||
|
||||
export type UseToastProps<T = ToastProps> = Props<T> &
|
||||
ToastVariantProps &
|
||||
Omit<AriaToastProps<T>, "div">;
|
||||
|
||||
const SWIPE_THRESHOLD_X = 100;
|
||||
const SWIPE_THRESHOLD_Y = 20;
|
||||
const INITIAL_POSITION = 50;
|
||||
|
||||
export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>) {
|
||||
const [props, variantProps] = mapPropsVariants(originalProps, toastTheme.variantKeys);
|
||||
const {
|
||||
ref,
|
||||
as,
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
classNames,
|
||||
toast,
|
||||
endContent,
|
||||
closeIcon,
|
||||
hideIcon = false,
|
||||
placement: placementProp = "right-bottom",
|
||||
isRegionExpanded,
|
||||
hideCloseButton = false,
|
||||
state,
|
||||
total = 1,
|
||||
index = 0,
|
||||
heights,
|
||||
promise: promiseProp,
|
||||
setHeights,
|
||||
toastOffset = 0,
|
||||
motionProps,
|
||||
timeout = 6000,
|
||||
shouldShowTimeoutProgess = false,
|
||||
icon,
|
||||
onClose,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const {isHovered: isToastHovered, hoverProps} = useHover({
|
||||
isDisabled: false,
|
||||
});
|
||||
|
||||
const globalContext = useProviderContext();
|
||||
const disableAnimation =
|
||||
originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
let placement = placementProp;
|
||||
|
||||
if (isMobile) {
|
||||
if (placementProp.includes("top")) {
|
||||
placement = "center-top";
|
||||
} else {
|
||||
placement = "center-bottom";
|
||||
}
|
||||
}
|
||||
|
||||
const animationRef = useRef<number | null>(null);
|
||||
const startTime = useRef<number | null>(null);
|
||||
const progressRef = useRef<number>(0);
|
||||
const progressBarRef = useRef<HTMLDivElement>(null);
|
||||
const pausedTime = useRef<number>(0);
|
||||
const timeElapsed = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (progressBarRef.current) {
|
||||
progressBarRef.current.style.width = "0%";
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const updateProgress = (timestamp: number) => {
|
||||
if (!timeout) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (startTime.current === null) {
|
||||
startTime.current = timestamp;
|
||||
}
|
||||
|
||||
if (isToastHovered || isRegionExpanded || index != total - 1) {
|
||||
pausedTime.current += timestamp - startTime.current;
|
||||
startTime.current = null;
|
||||
animationRef.current = requestAnimationFrame(updateProgress);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const elapsed = timestamp - startTime.current + pausedTime.current;
|
||||
|
||||
timeElapsed.current = elapsed;
|
||||
if (timeElapsed.current >= timeout) {
|
||||
state.close(toast.key);
|
||||
}
|
||||
|
||||
progressRef.current = Math.min((elapsed / timeout) * 100, 100);
|
||||
|
||||
if (progressBarRef.current) {
|
||||
progressBarRef.current.style.width = `${
|
||||
shouldShowTimeoutProgess ? progressRef.current : 0
|
||||
}%`;
|
||||
}
|
||||
|
||||
if (progressRef.current < 100) {
|
||||
animationRef.current = requestAnimationFrame(updateProgress);
|
||||
}
|
||||
};
|
||||
|
||||
animationRef.current = requestAnimationFrame(updateProgress);
|
||||
|
||||
return () => {
|
||||
if (animationRef.current !== null) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [timeout, shouldShowTimeoutProgess, state, isToastHovered, index, total, isRegionExpanded]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
|
||||
|
||||
useEffect(() => {
|
||||
if (!promiseProp) return;
|
||||
promiseProp.finally(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, [promiseProp]);
|
||||
|
||||
const Component = as || "div";
|
||||
const loadingIcon: ReactNode = icon;
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
const baseStyles = clsx(className, classNames?.base);
|
||||
const {toastProps, contentProps, titleProps, descriptionProps, closeButtonProps} = useToastAria(
|
||||
props,
|
||||
state,
|
||||
domRef,
|
||||
);
|
||||
|
||||
const [mounted, setMounted] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const [initialHeight, setInitialHeight] = useState<number>(0);
|
||||
|
||||
// Following was inspired from sonner ❤️
|
||||
useLayoutEffect(() => {
|
||||
if (!domRef.current || !mounted) {
|
||||
return;
|
||||
}
|
||||
const toastNode = domRef.current;
|
||||
const originalHeight = toastNode.style.height;
|
||||
|
||||
toastNode.style.height = "auto";
|
||||
const computedStyle = getComputedStyle(toastNode);
|
||||
const marginTop = parseFloat(computedStyle.marginTop);
|
||||
const marginBottom = parseFloat(computedStyle.marginBottom);
|
||||
const newHeight = toastNode.getBoundingClientRect().height + marginTop + marginBottom;
|
||||
|
||||
toastNode.style.height = originalHeight;
|
||||
|
||||
setInitialHeight((prevHeight) => (prevHeight !== newHeight ? newHeight : prevHeight));
|
||||
const updatedHeights = [...heights];
|
||||
|
||||
if (updatedHeights.length > index) {
|
||||
updatedHeights[index] = newHeight;
|
||||
} else {
|
||||
updatedHeights.push(newHeight);
|
||||
}
|
||||
setHeights(updatedHeights);
|
||||
}, [mounted, total, setHeights, index]);
|
||||
|
||||
let liftHeight = 4;
|
||||
|
||||
for (let idx = index + 1; idx < total; idx++) {
|
||||
liftHeight += heights[idx];
|
||||
}
|
||||
|
||||
const frontHeight = heights[heights.length - 1];
|
||||
|
||||
const slots = useMemo(
|
||||
() =>
|
||||
toastTheme({
|
||||
...variantProps,
|
||||
disableAnimation,
|
||||
}),
|
||||
[objectToDeps(variantProps)],
|
||||
);
|
||||
|
||||
const multiplier = placement.includes("top") ? 1 : -1;
|
||||
const toastVariants = {
|
||||
hidden: {opacity: 0, y: -INITIAL_POSITION * multiplier},
|
||||
visible: {opacity: 1, y: 0},
|
||||
exit: {opacity: 0, y: -INITIAL_POSITION * multiplier},
|
||||
};
|
||||
|
||||
const [drag, setDrag] = useState(false);
|
||||
const [dragValue, setDragValue] = useState(0);
|
||||
|
||||
const shouldCloseToast = (offsetX: number, offsetY: number) => {
|
||||
const isRight = placement.includes("right");
|
||||
const isLeft = placement.includes("left");
|
||||
const isCenterTop = placement === "center-top";
|
||||
const isCenterBottom = placement === "center-bottom";
|
||||
|
||||
if (
|
||||
(isRight && offsetX >= SWIPE_THRESHOLD_X) ||
|
||||
(isLeft && offsetX <= -SWIPE_THRESHOLD_X) ||
|
||||
(isCenterTop && offsetY <= -SWIPE_THRESHOLD_Y) ||
|
||||
(isCenterBottom && offsetY >= SWIPE_THRESHOLD_Y)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const getDragElasticConstraints = (placement: string) => {
|
||||
const elasticConstraint = {top: 0, bottom: 0, right: 0, left: 0};
|
||||
|
||||
if (placement === "center-bottom") {
|
||||
elasticConstraint.bottom = 1;
|
||||
|
||||
return elasticConstraint;
|
||||
}
|
||||
if (placement === "center-top") {
|
||||
elasticConstraint.top = 1;
|
||||
|
||||
return elasticConstraint;
|
||||
}
|
||||
if (placement.includes("right")) {
|
||||
elasticConstraint.right = 1;
|
||||
|
||||
return elasticConstraint;
|
||||
}
|
||||
if (placement.includes("left")) {
|
||||
elasticConstraint.left = 1;
|
||||
|
||||
return elasticConstraint;
|
||||
}
|
||||
|
||||
elasticConstraint.left = 1;
|
||||
elasticConstraint.right = 1;
|
||||
|
||||
return elasticConstraint;
|
||||
};
|
||||
|
||||
let opacityValue: undefined | number = undefined;
|
||||
|
||||
if ((drag && placement === "center-bottom") || placement === "center-top") {
|
||||
opacityValue = Math.max(0, 1 - dragValue / (SWIPE_THRESHOLD_Y + 5));
|
||||
} else if (drag) {
|
||||
opacityValue = Math.max(0, 1 - dragValue / (SWIPE_THRESHOLD_X + 20));
|
||||
}
|
||||
|
||||
const getToastProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
ref: domRef,
|
||||
className: slots.base({class: clsx(baseStyles, classNames?.base)}),
|
||||
"data-has-title": dataAttr(!isEmpty(title)),
|
||||
"data-has-description": dataAttr(!isEmpty(description)),
|
||||
"data-placement": placement,
|
||||
"data-drag-value": dragValue,
|
||||
"data-toast": true,
|
||||
"data-animation": toast.animation,
|
||||
"aria-label": "toast",
|
||||
onTransitionEnd: () => {
|
||||
if (toast.animation === "exiting") {
|
||||
const updatedHeights = heights;
|
||||
|
||||
updatedHeights.splice(index, 1);
|
||||
setHeights([...updatedHeights]);
|
||||
|
||||
state.remove(toast.key);
|
||||
}
|
||||
},
|
||||
style: {
|
||||
opacity: opacityValue,
|
||||
},
|
||||
...mergeProps(props, otherProps, toastProps, hoverProps),
|
||||
}),
|
||||
[slots, classNames, toastProps, hoverProps, toast, toast.animation, toast.key, opacityValue],
|
||||
);
|
||||
|
||||
const getIconProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
"aria-label": "descriptionIcon",
|
||||
className: slots.icon({class: classNames?.icon}),
|
||||
...props,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const getLoadingIconProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.loadingIcon({class: classNames?.loadingIcon}),
|
||||
...props,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const getContentProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.content({class: classNames?.content}),
|
||||
...mergeProps(props, otherProps, contentProps),
|
||||
}),
|
||||
[contentProps],
|
||||
);
|
||||
|
||||
const getTitleProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.title({class: classNames?.title}),
|
||||
...mergeProps(props, otherProps, titleProps),
|
||||
}),
|
||||
[titleProps],
|
||||
);
|
||||
|
||||
const getDescriptionProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.description({class: classNames?.description}),
|
||||
...mergeProps(props, otherProps, descriptionProps),
|
||||
}),
|
||||
[descriptionProps],
|
||||
);
|
||||
|
||||
const getCloseButtonProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.closeButton({class: classNames?.closeButton}),
|
||||
"aria-label": "closeButton",
|
||||
"data-hidden": dataAttr(hideCloseButton),
|
||||
...mergeProps(props, closeButtonProps, {
|
||||
onPress: chain(() => {
|
||||
setTimeout(() => document.body.focus(), 0);
|
||||
}, onClose),
|
||||
}),
|
||||
}),
|
||||
[closeButtonProps, onClose],
|
||||
);
|
||||
|
||||
const getCloseIconProps: PropGetter = useCallback(
|
||||
(props = {}) => ({
|
||||
className: slots.closeIcon({class: classNames?.closeIcon}),
|
||||
"aria-label": "closeIcon",
|
||||
...props,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const getMotionDivProps = useCallback(
|
||||
(
|
||||
props = {},
|
||||
): MotionProps & {
|
||||
"data-drag": string | boolean;
|
||||
"data-placement": string;
|
||||
"data-drag-value": number;
|
||||
className: string;
|
||||
} => {
|
||||
const isCloseToEnd = total - index - 1 <= 2;
|
||||
const dragDirection = placement === "center-bottom" || placement === "center-top" ? "y" : "x";
|
||||
const dragConstraints = {left: 0, right: 0, top: 0, bottom: 0};
|
||||
const dragElastic = getDragElasticConstraints(placement);
|
||||
|
||||
const animateProps = (() => {
|
||||
if (placement.includes("top")) {
|
||||
return {
|
||||
top:
|
||||
isRegionExpanded || drag
|
||||
? liftHeight + toastOffset
|
||||
: (total - 1 - index) * 8 + toastOffset,
|
||||
bottom: "auto",
|
||||
};
|
||||
} else if (placement.includes("bottom")) {
|
||||
return {
|
||||
bottom:
|
||||
isRegionExpanded || drag
|
||||
? liftHeight + toastOffset
|
||||
: (total - 1 - index) * 8 + toastOffset,
|
||||
top: "auto",
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
})();
|
||||
|
||||
return {
|
||||
animate: {
|
||||
opacity: isCloseToEnd ? 1 : 0,
|
||||
pointerEvents: isCloseToEnd ? "all" : "none",
|
||||
scaleX: isRegionExpanded || drag ? 1 : 1 - (total - 1 - index) * 0.1,
|
||||
height: isRegionExpanded || drag ? initialHeight : frontHeight,
|
||||
y: 0,
|
||||
...animateProps,
|
||||
},
|
||||
drag: dragDirection,
|
||||
dragConstraints,
|
||||
exit: {opacity: 0},
|
||||
initial: {opacity: 0, scale: 1, y: -40 * multiplier},
|
||||
transition: {duration: 0.3, ease: "easeOut"},
|
||||
variants: toastVariants,
|
||||
dragElastic,
|
||||
onDragEnd: (_, info) => {
|
||||
const {x: offsetX, y: offsetY} = info.offset;
|
||||
|
||||
setDrag(false);
|
||||
|
||||
if (shouldCloseToast(offsetX, offsetY)) {
|
||||
const updatedHeights = heights;
|
||||
|
||||
updatedHeights.splice(index, 1);
|
||||
setHeights([...updatedHeights]);
|
||||
|
||||
state.close(toast.key);
|
||||
state.remove(toast.key);
|
||||
|
||||
return;
|
||||
}
|
||||
setDragValue(0);
|
||||
},
|
||||
onDrag: (_, info) => {
|
||||
let updatedDragValue = 0;
|
||||
|
||||
if (placement === "center-top") {
|
||||
updatedDragValue = -info.offset.y;
|
||||
} else if (placement === "center-bottom") {
|
||||
updatedDragValue = info.offset.y;
|
||||
} else if (placement.includes("right")) {
|
||||
updatedDragValue = info.offset.x;
|
||||
} else if (placement.includes("left")) {
|
||||
updatedDragValue = -info.offset.x;
|
||||
}
|
||||
|
||||
if (updatedDragValue >= 0) {
|
||||
setDragValue(updatedDragValue);
|
||||
}
|
||||
},
|
||||
onDragStart: () => {
|
||||
setDrag(true);
|
||||
},
|
||||
"data-drag": dataAttr(drag),
|
||||
"data-placement": placement,
|
||||
"data-drag-value": dragValue,
|
||||
className: slots.motionDiv({class: classNames?.motionDiv}),
|
||||
...props,
|
||||
...motionProps,
|
||||
};
|
||||
},
|
||||
[
|
||||
closeButtonProps,
|
||||
total,
|
||||
index,
|
||||
placement,
|
||||
isRegionExpanded,
|
||||
liftHeight,
|
||||
multiplier,
|
||||
initialHeight,
|
||||
frontHeight,
|
||||
toastVariants,
|
||||
classNames,
|
||||
drag,
|
||||
dataAttr,
|
||||
setDrag,
|
||||
shouldCloseToast,
|
||||
slots,
|
||||
toastOffset,
|
||||
],
|
||||
);
|
||||
|
||||
return {
|
||||
Component,
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
loadingIcon,
|
||||
domRef,
|
||||
closeIcon,
|
||||
classNames,
|
||||
color: variantProps["color"],
|
||||
hideIcon,
|
||||
placement,
|
||||
state,
|
||||
toast,
|
||||
disableAnimation,
|
||||
isProgressBarVisible: !!timeout,
|
||||
total,
|
||||
index,
|
||||
getToastProps,
|
||||
getTitleProps,
|
||||
getContentProps,
|
||||
getDescriptionProps,
|
||||
getCloseButtonProps,
|
||||
getIconProps,
|
||||
getMotionDivProps,
|
||||
getCloseIconProps,
|
||||
getLoadingIconProps,
|
||||
progressBarRef,
|
||||
endContent,
|
||||
slots,
|
||||
isRegionExpanded,
|
||||
liftHeight,
|
||||
frontHeight,
|
||||
initialHeight,
|
||||
isLoading,
|
||||
};
|
||||
}
|
||||
|
||||
export type UseToastReturn = ReturnType<typeof useToast>;
|
||||
410
packages/components/toast/stories/toast.stories.tsx
Normal file
410
packages/components/toast/stories/toast.stories.tsx
Normal file
@ -0,0 +1,410 @@
|
||||
import React, {useEffect} from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
import {cn, toast} from "@heroui/theme";
|
||||
import {Button} from "@heroui/button";
|
||||
|
||||
import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Components/Toast",
|
||||
component: Toast,
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: {type: "select"},
|
||||
options: ["flat", "bordered", "solid"],
|
||||
},
|
||||
color: {
|
||||
control: {type: "select"},
|
||||
options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
radius: {
|
||||
control: {type: "select"},
|
||||
options: ["none", "sm", "md", "lg", "full"],
|
||||
},
|
||||
size: {
|
||||
control: {type: "select"},
|
||||
options: ["sm", "md", "lg"],
|
||||
},
|
||||
hideIcon: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
control: {type: "select"},
|
||||
options: ["sm", "md", "lg"],
|
||||
},
|
||||
placement: {
|
||||
control: {type: "select"},
|
||||
options: [
|
||||
"right-bottom",
|
||||
"left-bottom",
|
||||
"center-bottom",
|
||||
"right-top",
|
||||
"left-top",
|
||||
"center-top",
|
||||
],
|
||||
},
|
||||
hideCloseButton: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="flex justify-start items-start w-screen h-screen">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
(Story) => {
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
closeAll();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <Story />;
|
||||
},
|
||||
],
|
||||
} as Meta<typeof Toast>;
|
||||
|
||||
const defaultProps = {
|
||||
...toast.defaultVariants,
|
||||
};
|
||||
|
||||
const Template = (args: ToastProps) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<div>
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show toast
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ShowTimeoutProgressTemplate = (args: ToastProps) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
timeout: 3000,
|
||||
shouldShowTimeoutProgess: true,
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Toast
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const WithEndContentTemplate = (args) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
endContent: (
|
||||
<Button color="warning" size="sm" variant="flat">
|
||||
Upgrade
|
||||
</Button>
|
||||
),
|
||||
color: "warning",
|
||||
variant: "faded",
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Toast
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PlacementTemplate = (args: ToastProps) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<div>
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Displayed Successfully",
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show toast
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const DisableAnimationTemplate = (args: ToastProps) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider disableAnimation={true} placement={args.placement} />
|
||||
<div>
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Displayed Successfully",
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show toast
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PromiseToastTemplate = (args: ToastProps) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<div>
|
||||
<Button
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Displayed Successfully",
|
||||
promise: new Promise((resolve) => setTimeout(resolve, 4000)),
|
||||
...args,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show toast
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomToastComponent = (args) => {
|
||||
const color = args.color;
|
||||
const colorMap = {
|
||||
primary: "before:bg-primary border-primary-200 dark:border-primary-100",
|
||||
secondary: "before:bg-secondary border-secondary-200 dark:border-secondary-100",
|
||||
success: "before:bg-success border-success-200 dark:border-success-100",
|
||||
warning: "before:bg-warning border-warning-200 dark:border-warning-100",
|
||||
danger: "before:bg-danger border-danger-200 dark:border-danger-100",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color={color}
|
||||
variant="bordered"
|
||||
onPress={() => {
|
||||
addToast({
|
||||
title: "Sucessful!",
|
||||
description: "Document uploaded to cloud successful.",
|
||||
classNames: {
|
||||
base: cn([
|
||||
"bg-default-50 dark:bg-background shadow-sm",
|
||||
"border-1",
|
||||
"relative before:content-[''] before:absolute before:z-10",
|
||||
"before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
|
||||
"rounded-l-none border-l-0",
|
||||
"rounded-md",
|
||||
"flex flex-col items-start",
|
||||
colorMap[color],
|
||||
]),
|
||||
icon: "w-6 h-6 fill-current",
|
||||
},
|
||||
endContent: (
|
||||
<div className="ms-11 my-2 flex gap-x-2">
|
||||
<Button color={color} size="sm" variant="bordered">
|
||||
View Document
|
||||
</Button>
|
||||
<Button className="underline-offset-2" color={color} size="sm" variant="light">
|
||||
Maybe Later
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
color: color,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Toast
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomToastTemplate = (args) => {
|
||||
const colors = ["primary", "secondary", "warning", "danger", "success"];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToastProvider placement={args.placement} />
|
||||
<div className="flex gap-2">
|
||||
{colors.map((color, idx) => (
|
||||
<CustomToastComponent key={idx} color={color} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const CustomCloseButtonTemplate = (args) => {
|
||||
return (
|
||||
<>
|
||||
<ToastProvider
|
||||
placement={args.placement}
|
||||
toastProps={{
|
||||
classNames: {
|
||||
closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onPress={() =>
|
||||
addToast({
|
||||
title: "Toast Title",
|
||||
description: "Toast Description",
|
||||
closeIcon: (
|
||||
<svg
|
||||
fill="none"
|
||||
height="32"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
),
|
||||
})
|
||||
}
|
||||
>
|
||||
Toast
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithDescription = {
|
||||
render: Template,
|
||||
args: {
|
||||
description: "Toast displayed successfully.",
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCustomIcon = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
title: "Custom Icon",
|
||||
icon: (
|
||||
<svg height={24} viewBox="0 0 24 24" width={24}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit={10}
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path
|
||||
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
|
||||
data-name="Stroke 1"
|
||||
/>
|
||||
<path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
|
||||
</g>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const iconHidden = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
hideIcon: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const DisableAnimation = {
|
||||
render: DisableAnimationTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const PromiseToast = {
|
||||
render: PromiseToastTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const ShowTimeoutProgress = {
|
||||
render: ShowTimeoutProgressTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const Placement = {
|
||||
render: PlacementTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithEndContent = {
|
||||
render: WithEndContentTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomStyles = {
|
||||
render: CustomToastTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomCloseButton = {
|
||||
render: CustomCloseButtonTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
10
packages/components/toast/tsconfig.json
Normal file
10
packages/components/toast/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
|
||||
},
|
||||
},
|
||||
"include": ["src", "index.ts"]
|
||||
}
|
||||
8
packages/components/toast/tsup.config.ts
Normal file
8
packages/components/toast/tsup.config.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import {defineConfig} from "tsup";
|
||||
|
||||
export default defineConfig({
|
||||
clean: true,
|
||||
target: "es2019",
|
||||
format: ["cjs", "esm"],
|
||||
banner: {js: '"use client";'},
|
||||
});
|
||||
@ -89,6 +89,7 @@
|
||||
"@heroui/drawer": "workspace:*",
|
||||
"@heroui/form": "workspace:*",
|
||||
"@heroui/alert": "workspace:*",
|
||||
"@heroui/toast": "workspace:*",
|
||||
"@react-aria/visually-hidden": "3.8.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -47,6 +47,7 @@ export * from "@heroui/form";
|
||||
export * from "@heroui/alert";
|
||||
export * from "@heroui/drawer";
|
||||
export * from "@heroui/input-otp";
|
||||
export * from "@heroui/toast";
|
||||
|
||||
/**
|
||||
* React Aria - Exports
|
||||
|
||||
@ -41,3 +41,4 @@ export * from "./date-picker";
|
||||
export * from "./alert";
|
||||
export * from "./drawer";
|
||||
export * from "./form";
|
||||
export * from "./toast";
|
||||
|
||||
389
packages/core/theme/src/components/toast.ts
Normal file
389
packages/core/theme/src/components/toast.ts
Normal file
@ -0,0 +1,389 @@
|
||||
import type {VariantProps} from "tailwind-variants";
|
||||
|
||||
import {tv} from "../utils/tv";
|
||||
import {colorVariants} from "../utils";
|
||||
|
||||
const toastRegion = tv({
|
||||
slots: {
|
||||
base: "relative z-50",
|
||||
},
|
||||
variants: {
|
||||
disableAnimation: {
|
||||
false: {
|
||||
base: "",
|
||||
},
|
||||
true: {
|
||||
base: [
|
||||
"data-[placement=right-bottom]:bottom-0 data-[placement=right-bottom]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-bottom]:fixed data-[placement=right-bottom]:flex data-[placement=right-bottom]:flex-col",
|
||||
"data-[placement=left-bottom]:bottom-0 data-[placement=left-bottom]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-bottom]:fixed data-[placement=left-bottom]:flex data-[placement=left-bottom]:flex-col",
|
||||
"data-[placement=center-bottom]:bottom-0 data-[placement=center-bottom]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-bottom]:flex data-[placement=center-bottom]:flex-col data-[placement=center-bottom]:left-1/2 data-[placement=center-bottom]:-translate-x-1/2",
|
||||
"data-[placement=right-top]:top-0 data-[placement=right-top]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-top]:fixed data-[placement=right-top]:flex data-[placement=right-top]:flex-col",
|
||||
"data-[placement=left-top]:top-0 data-[placement=left-top]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-top]:fixed data-[placement=left-top]:flex data-[placement=left-top]:flex-col",
|
||||
"data-[placement=center-top]:top-0 data-[placement=center-top]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-top]:flex data-[placement=center-top]:flex-col data-[placement=center-top]:left-1/2 data-[placement=center-top]:-translate-x-1/2",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
disableAnimation: false,
|
||||
},
|
||||
});
|
||||
|
||||
const toast = tv({
|
||||
slots: {
|
||||
base: [
|
||||
"flex gap-x-4 items-center",
|
||||
"group",
|
||||
"cursor-pointer",
|
||||
"relative",
|
||||
"z-50",
|
||||
"box-border",
|
||||
"outline-none",
|
||||
"p-3 sm:mx-1",
|
||||
"my-1",
|
||||
"w-full sm:w-[270px] md:w-[300px]",
|
||||
"min-h-4",
|
||||
],
|
||||
title: ["font-medium", "text-small", "me-4", "text-foreground"],
|
||||
description: ["text-small", "me-4", "text-default-600"],
|
||||
icon: ["w-6 h-6 fill-current"],
|
||||
loadingIcon: ["w-6 h-6 fill-current"],
|
||||
content: ["flex flex-grow flex-row gap-x-4 items-center relative"],
|
||||
progressTrack: ["absolute top-0 inset-0 bg-transparent overflow-hidden"],
|
||||
progressIndicator: ["h-full bg-default-400 opacity-20"],
|
||||
motionDiv: [
|
||||
"fixed",
|
||||
"px-4 sm:px-0",
|
||||
"data-[placement=right-bottom]:bottom-0 data-[placement=right-bottom]:right-0 data-[placement=right-bottom]:mx-auto w-full sm:data-[placement=right-bottom]:w-max mb-1 sm:data-[placement=right-bottom]:mr-2",
|
||||
"data-[placement=left-bottom]:bottom-0 data-[placement=left-bottom]:left-0 data-[placement=left-bottom]:mx-auto w-full sm:data-[placement=left-bottom]:w-max mb-1 sm:data-[placement=left-bottom]:ml-2",
|
||||
"data-[placement=center-bottom]:bottom-0 data-[placement=center-bottom]:left-0 data-[placement=center-bottom]:right-0 w-full sm:data-[placement=center-bottom]:w-max sm:data-[placement=center-bottom]:mx-auto",
|
||||
"data-[placement=right-top]:top-0 data-[placement=right-top]:right-0 data-[placement=right-top]:mx-auto w-full sm:data-[placement=right-top]:w-max sm:data-[placement=right-top]:mr-2",
|
||||
"data-[placement=left-top]:top-0 data-[placement=left-top]:left-0 data-[placement=left-top]:mx-auto w-full sm:data-[placement=left-top]:w-max sm:data-[placement=left-top]:ml-2",
|
||||
"data-[placement=center-top]:top-0 data-[placement=center-top]:left-0 data-[placement=center-top]:right-0 w-full sm:data-[placement=center-top]:w-max sm:data-[placement=center-top]:mx-auto",
|
||||
],
|
||||
closeButton: [
|
||||
"opacity-0 pointer-events-none group-hover:pointer-events-auto p-0 group-hover:opacity-100 w-6 h-6 min-w-4 absolute -right-2 -top-2 items-center justify-center bg-transparent text-default-400 hover:text-default-600 border border-3 border-transparent",
|
||||
"data-[hidden=true]:hidden",
|
||||
],
|
||||
closeIcon: ["rounded-full w-full h-full p-0.5 border border-default-400 bg-default-100"],
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
sm: {
|
||||
icon: "w-5 h-5",
|
||||
loadingIcon: "w-5 h-5",
|
||||
title: "text-sm font-medium",
|
||||
description: "text-xs",
|
||||
},
|
||||
md: {
|
||||
title: "text-sm font-semibold",
|
||||
description: "text-xs",
|
||||
},
|
||||
lg: {
|
||||
title: "text-md font-semibold",
|
||||
description: "text-sm",
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
flat: "bg-content1 border border-default-100",
|
||||
solid: colorVariants.solid.default,
|
||||
bordered: "bg-background border border-default-200",
|
||||
},
|
||||
color: {
|
||||
default: "",
|
||||
foreground: {
|
||||
progressIndicator: "h-full opacity-20 bg-foreground-400",
|
||||
},
|
||||
primary: {
|
||||
progressIndicator: "h-full opacity-20 bg-primary-400",
|
||||
},
|
||||
secondary: {
|
||||
progressIndicator: "h-full opacity-20 bg-secondary-400",
|
||||
},
|
||||
success: {
|
||||
progressIndicator: "h-full opacity-20 bg-success-400",
|
||||
},
|
||||
warning: {
|
||||
progressIndicator: "h-full opacity-20 bg-warning-400",
|
||||
},
|
||||
danger: {
|
||||
progressIndicator: "h-full opacity-20 bg-danger-400",
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
none: {
|
||||
base: "rounded-none",
|
||||
progressTrack: "rounded-none",
|
||||
},
|
||||
sm: {
|
||||
base: "rounded-small",
|
||||
progressTrack: "rounded-small",
|
||||
},
|
||||
md: {
|
||||
base: "rounded-medium",
|
||||
progressTrack: "rounded-medium",
|
||||
},
|
||||
lg: {
|
||||
base: "rounded-large",
|
||||
progressTrack: "rounded-large",
|
||||
},
|
||||
full: {
|
||||
base: "rounded-full",
|
||||
closeButton: "-top-px -right-px",
|
||||
progressTrack: "rounded-full",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
closeButton: "transition-none",
|
||||
base: "data-[animation=exiting]:opacity-0",
|
||||
},
|
||||
false: {
|
||||
closeButton: "transition-opacity ease-in duration-300",
|
||||
base: [
|
||||
"data-[animation=exiting]:transform",
|
||||
"data-[animation=exiting]:delay-100",
|
||||
"data-[animation=exiting]:data-[placement=right-bottom]:translate-x-28",
|
||||
"data-[animation=exiting]:data-[placement=left-bottom]:-translate-x-28",
|
||||
"data-[animation=exiting]:data-[placement=center-bottom]:translate-y-28",
|
||||
"data-[animation=exiting]:data-[placement=right-top]:translate-x-28",
|
||||
"data-[animation=exiting]:data-[placement=left-top]:-translate-x-28",
|
||||
"data-[animation=exiting]:data-[placement=center-top]:-translate-y-28",
|
||||
"data-[animation=exiting]:opacity-0",
|
||||
"data-[animation=exiting]:duration-200",
|
||||
],
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
none: {
|
||||
base: "shadow-none",
|
||||
},
|
||||
sm: {
|
||||
base: "shadow-small",
|
||||
},
|
||||
md: {
|
||||
base: "shadow-medium",
|
||||
},
|
||||
lg: {
|
||||
base: "shadow-large",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "md",
|
||||
variant: "flat",
|
||||
radius: "md",
|
||||
shadow: "sm",
|
||||
},
|
||||
compoundVariants: [
|
||||
// flat and color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "foreground",
|
||||
class: {
|
||||
base: "bg-foreground text-background",
|
||||
closeButton: "text-foreground-400 hover:text-foreground-600",
|
||||
closeIcon: "border border-foreground-400 bg-foreground-100",
|
||||
title: "text-background-600",
|
||||
description: "text-background-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "bg-primary-50 text-primary-600 border-primary-100",
|
||||
closeButton: "text-primary-400 hover:text-primary-600",
|
||||
closeIcon: "border border-primary-400 bg-primary-100",
|
||||
title: "text-primary-600",
|
||||
description: "text-primary-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "bg-secondary-50 text-secondary-600 border-secondary-100",
|
||||
closeButton: "text-secondary-400 hover:text-secondary-600",
|
||||
closeIcon: "border border-secondary-400 bg-secondary-100",
|
||||
title: "text-secondary-600",
|
||||
description: "text-secondary-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "bg-success-50 text-success-600 border-success-100",
|
||||
closeButton: "text-success-400 hover:text-success-600",
|
||||
closeIcon: "border border-success-400 bg-success-100",
|
||||
title: "text-success-600",
|
||||
description: "text-success-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "bg-warning-50 text-warning-600 border-warning-100",
|
||||
closeButton: "text-warning-400 hover:text-warning-600",
|
||||
closeIcon: "border border-warning-400 bg-warning-100",
|
||||
title: "text-warning-600",
|
||||
description: "text-warning-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "bg-danger-50 text-danger-600 border-danger-100",
|
||||
closeButton: "text-danger-400 hover:text-danger-600",
|
||||
closeIcon: "border border-danger-400 bg-danger-100",
|
||||
title: "text-danger-600",
|
||||
description: "text-danger-500",
|
||||
},
|
||||
},
|
||||
// bordered and color
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "foreground",
|
||||
class: {
|
||||
base: "bg-foreground border-foreground-400 text-background",
|
||||
closeButton: "text-foreground-400 hover:text-foreground-600",
|
||||
closeIcon: "border border-foreground-400 bg-foreground-100",
|
||||
title: "text-background-600",
|
||||
description: "text-background-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "border-primary-400 text-primary-600",
|
||||
closeButton: "text-primary-400 hover:text-primary-600",
|
||||
closeIcon: "border border-primary-400 bg-primary-100",
|
||||
title: "text-primary-600",
|
||||
description: "text-primary-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "border-secondary-400 text-secondary-600",
|
||||
closeButton: "text-secondary-400 hover:text-secondary-600",
|
||||
closeIcon: "border border-secondary-400 bg-secondary-100",
|
||||
title: "text-secondary-600",
|
||||
description: "text-secondary-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "border-success-400 text-success-600",
|
||||
closeButton: "text-success-400 hover:text-success-600",
|
||||
closeIcon: "border border-success-400 bg-success-100",
|
||||
title: "text-success-600",
|
||||
description: "text-success-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "border-warning-400 text-warning-600",
|
||||
closeButton: "text-warning-400 hover:text-warning-600",
|
||||
closeIcon: "border border-warning-400 bg-warning-100",
|
||||
title: "text-warning-600",
|
||||
description: "text-warning-500",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "border-danger-400 text-danger-600",
|
||||
closeButton: "text-danger-400 hover:text-danger-600",
|
||||
closeIcon: "border border-danger-400 bg-danger-100",
|
||||
title: "text-danger-600",
|
||||
description: "text-danger-500",
|
||||
},
|
||||
},
|
||||
// solid and color
|
||||
{
|
||||
variant: "solid",
|
||||
color: "foreground",
|
||||
class: {
|
||||
base: colorVariants.solid.foreground,
|
||||
closeButton: "text-foreground-400 hover:text-foreground-600",
|
||||
closeIcon: "border border-foreground-400 bg-foreground-100",
|
||||
title: "text-background",
|
||||
description: "text-background",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: colorVariants.solid.primary,
|
||||
closeButton: "text-primary-400 hover:text-primary-600",
|
||||
closeIcon: "border border-primary-400 bg-primary-100",
|
||||
title: "text-primary-foreground",
|
||||
description: "text-primary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: colorVariants.solid.secondary,
|
||||
closeButton: "text-secondary-400 hover:text-secondary-600",
|
||||
closeIcon: "border border-secondary-400 bg-secondary-100",
|
||||
title: "text-secondary-foreground",
|
||||
description: "text-secondary-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "success",
|
||||
class: {
|
||||
base: colorVariants.solid.success,
|
||||
closeButton: "text-success-400 hover:text-success-600",
|
||||
closeIcon: "border border-success-400 bg-success-100",
|
||||
title: "text-success-foreground",
|
||||
description: "text-success-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: colorVariants.solid.warning,
|
||||
closeButton: "text-warning-400 hover:text-warning-600",
|
||||
closeIcon: "border border-warning-400 bg-warning-100",
|
||||
title: "text-warning-foreground",
|
||||
description: "text-warning-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "solid",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: colorVariants.solid.danger,
|
||||
closeButton: "text-danger-400 hover:text-danger-600",
|
||||
closeIcon: "border border-danger-400 bg-danger-100",
|
||||
title: "text-danger-foreground",
|
||||
description: "text-danger-foreground",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type ToastVariantProps = VariantProps<typeof toast>;
|
||||
export type ToastSlots = keyof ReturnType<typeof toast>;
|
||||
|
||||
export type ToastRegionVariantProps = VariantProps<typeof toastRegion>;
|
||||
export type ToastRegionSlots = keyof ReturnType<typeof toastRegion>;
|
||||
|
||||
export {toast, toastRegion};
|
||||
@ -17,6 +17,7 @@ export const CloseIcon = (
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="fill-current"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
|
||||
@ -7,6 +7,7 @@ export const DangerIcon = (
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
className="fill-current"
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
|
||||
@ -18,6 +18,7 @@ export * from "./moon";
|
||||
export * from "./moon-filled";
|
||||
export * from "./headphones";
|
||||
export * from "./anchor";
|
||||
export * from "./info-filled";
|
||||
export * from "./info";
|
||||
export * from "./shield-security";
|
||||
export * from "./monitor-mobile";
|
||||
|
||||
20
packages/utilities/shared-icons/src/info-filled.tsx
Normal file
20
packages/utilities/shared-icons/src/info-filled.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import {IconSvgProps} from "./types";
|
||||
|
||||
export const InfoFilledIcon = (
|
||||
props: IconSvgProps & {
|
||||
className?: string;
|
||||
},
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@ -7,6 +7,7 @@ export const WarningIcon = (
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
className="fill-current"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
444
pnpm-lock.yaml
generated
444
pnpm-lock.yaml
generated
@ -66,7 +66,7 @@ importers:
|
||||
version: 3.27.0(react@18.3.0)
|
||||
'@storybook/react':
|
||||
specifier: ^8.4.5
|
||||
version: 8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)
|
||||
version: 8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)
|
||||
'@swc/core':
|
||||
specifier: ^1.3.35
|
||||
version: 1.10.6(@swc/helpers@0.5.15)
|
||||
@ -81,7 +81,7 @@ importers:
|
||||
version: 6.6.3
|
||||
'@testing-library/react':
|
||||
specifier: ^16.0.1
|
||||
version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@testing-library/user-event':
|
||||
specifier: ^14.5.2
|
||||
version: 14.5.2(@testing-library/dom@10.4.0)
|
||||
@ -123,16 +123,16 @@ importers:
|
||||
version: 7.32.0
|
||||
eslint-config-airbnb:
|
||||
specifier: ^18.2.1
|
||||
version: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
|
||||
version: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
|
||||
eslint-config-airbnb-typescript:
|
||||
specifier: ^12.3.1
|
||||
version: 12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
|
||||
version: 12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
|
||||
eslint-config-prettier:
|
||||
specifier: ^8.2.0
|
||||
version: 8.10.0(eslint@7.32.0)
|
||||
eslint-config-react-app:
|
||||
specifier: ^6.0.0
|
||||
version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
|
||||
version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3)
|
||||
eslint-config-ts-lambdas:
|
||||
specifier: ^1.2.3
|
||||
version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3)
|
||||
@ -141,7 +141,7 @@ importers:
|
||||
version: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
|
||||
eslint-loader:
|
||||
specifier: ^4.0.2
|
||||
version: 4.0.2(eslint@7.32.0)(webpack@5.97.1)
|
||||
version: 4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12))
|
||||
eslint-plugin-import:
|
||||
specifier: ^2.26.0
|
||||
version: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
|
||||
@ -195,13 +195,13 @@ importers:
|
||||
version: 10.7.11
|
||||
jest:
|
||||
specifier: ^29.7.0
|
||||
version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
jest-environment-jsdom:
|
||||
specifier: ^29.7.0
|
||||
version: 29.7.0
|
||||
jest-watch-typeahead:
|
||||
specifier: 2.2.2
|
||||
version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
|
||||
version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
|
||||
lint-staged:
|
||||
specifier: ^13.0.3
|
||||
version: 13.3.0(enquirer@2.4.1)
|
||||
@ -252,7 +252,7 @@ importers:
|
||||
version: 5.7.3
|
||||
webpack:
|
||||
specifier: ^5.53.0
|
||||
version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
|
||||
version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
|
||||
webpack-bundle-analyzer:
|
||||
specifier: ^4.4.2
|
||||
version: 4.10.2
|
||||
@ -3033,6 +3033,61 @@ importers:
|
||||
specifier: 0.13.0
|
||||
version: 0.13.0(react@18.3.0)
|
||||
|
||||
packages/components/toast:
|
||||
dependencies:
|
||||
'@heroui/react-utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../utilities/react-utils
|
||||
'@heroui/shared-icons':
|
||||
specifier: workspace:*
|
||||
version: link:../../utilities/shared-icons
|
||||
'@heroui/shared-utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../utilities/shared-utils
|
||||
'@heroui/spinner':
|
||||
specifier: workspace:*
|
||||
version: link:../spinner
|
||||
'@heroui/use-is-mobile':
|
||||
specifier: workspace:*
|
||||
version: link:../../hooks/use-is-mobile
|
||||
'@react-aria/interactions':
|
||||
specifier: 3.23.0
|
||||
version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/toast':
|
||||
specifier: 3.0.0-beta.19
|
||||
version: 3.0.0-beta.19(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/toast':
|
||||
specifier: 3.0.0-beta.7
|
||||
version: 3.0.0-beta.7(react@18.3.0)
|
||||
'@react-stately/utils':
|
||||
specifier: 3.10.5
|
||||
version: 3.10.5(react@18.3.0)
|
||||
framer-motion:
|
||||
specifier: '>=11.5.6 || >=12.0.0-alpha.1'
|
||||
version: 11.11.13(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
devDependencies:
|
||||
'@heroui/button':
|
||||
specifier: workspace:*
|
||||
version: link:../button
|
||||
'@heroui/system':
|
||||
specifier: workspace:*
|
||||
version: link:../../core/system
|
||||
'@heroui/theme':
|
||||
specifier: workspace:*
|
||||
version: link:../../core/theme
|
||||
clean-package:
|
||||
specifier: 2.2.0
|
||||
version: 2.2.0
|
||||
react:
|
||||
specifier: 18.3.0
|
||||
version: 18.3.0
|
||||
react-dom:
|
||||
specifier: 18.3.0
|
||||
version: 18.3.0(react@18.3.0)
|
||||
|
||||
packages/components/tooltip:
|
||||
dependencies:
|
||||
'@heroui/aria-utils':
|
||||
@ -3274,6 +3329,9 @@ importers:
|
||||
'@heroui/theme':
|
||||
specifier: workspace:*
|
||||
version: link:../theme
|
||||
'@heroui/toast':
|
||||
specifier: workspace:*
|
||||
version: link:../../components/toast
|
||||
'@heroui/tooltip':
|
||||
specifier: workspace:*
|
||||
version: link:../../components/tooltip
|
||||
@ -3363,7 +3421,7 @@ importers:
|
||||
version: 18.3.0
|
||||
tailwind-variants:
|
||||
specifier: ^0.3.0
|
||||
version: 0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
|
||||
version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
|
||||
|
||||
packages/core/theme:
|
||||
dependencies:
|
||||
@ -3390,7 +3448,7 @@ importers:
|
||||
version: 2.5.4
|
||||
tailwind-variants:
|
||||
specifier: 0.3.0
|
||||
version: 0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)))
|
||||
version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)))
|
||||
devDependencies:
|
||||
'@types/color':
|
||||
specifier: ^4.2.0
|
||||
@ -3403,22 +3461,22 @@ importers:
|
||||
version: 2.2.0
|
||||
tailwindcss:
|
||||
specifier: ^3.4.16
|
||||
version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
|
||||
packages/hooks/use-aria-accordion:
|
||||
dependencies:
|
||||
'@react-aria/button':
|
||||
specifier: 3.11.1
|
||||
version: 3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.11.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/focus':
|
||||
specifier: 3.19.1
|
||||
version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/selection':
|
||||
specifier: 3.22.0
|
||||
version: 3.22.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.22.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/tree':
|
||||
specifier: 3.8.7
|
||||
version: 3.8.7(react@18.3.0)
|
||||
@ -3440,10 +3498,10 @@ importers:
|
||||
dependencies:
|
||||
'@react-aria/button':
|
||||
specifier: 3.11.1
|
||||
version: 3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.11.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/focus':
|
||||
specifier: 3.19.1
|
||||
version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/tree':
|
||||
specifier: 3.8.7
|
||||
version: 3.8.7(react@18.3.0)
|
||||
@ -3465,13 +3523,13 @@ importers:
|
||||
version: link:../../utilities/shared-utils
|
||||
'@react-aria/focus':
|
||||
specifier: 3.19.1
|
||||
version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/interactions':
|
||||
specifier: 3.23.0
|
||||
version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/button':
|
||||
specifier: 3.10.2
|
||||
version: 3.10.2(react@18.3.0)
|
||||
@ -3493,13 +3551,13 @@ importers:
|
||||
version: link:../../utilities/shared-utils
|
||||
'@react-aria/focus':
|
||||
specifier: 3.19.1
|
||||
version: 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/interactions':
|
||||
specifier: 3.23.0
|
||||
version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/link':
|
||||
specifier: 3.5.10
|
||||
version: 3.5.10(react@18.3.0)
|
||||
@ -3636,7 +3694,7 @@ importers:
|
||||
version: link:../use-callback-ref
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/utils':
|
||||
specifier: 3.10.5
|
||||
version: 3.10.5(react@18.3.0)
|
||||
@ -3652,7 +3710,7 @@ importers:
|
||||
dependencies:
|
||||
'@react-aria/interactions':
|
||||
specifier: 3.23.0
|
||||
version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
devDependencies:
|
||||
clean-package:
|
||||
specifier: 2.2.0
|
||||
@ -3697,13 +3755,13 @@ importers:
|
||||
dependencies:
|
||||
'@react-aria/interactions':
|
||||
specifier: 3.23.0
|
||||
version: 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/ssr':
|
||||
specifier: 3.9.7
|
||||
version: 3.9.7(react@18.3.0)
|
||||
'@react-aria/utils':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared':
|
||||
specifier: 3.27.0
|
||||
version: 3.27.0(react@18.3.0)
|
||||
@ -3753,7 +3811,7 @@ importers:
|
||||
version: link:../../utilities/shared-utils
|
||||
'@react-aria/i18n':
|
||||
specifier: 3.12.5
|
||||
version: 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
version: 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
devDependencies:
|
||||
clean-package:
|
||||
specifier: 2.2.0
|
||||
@ -6920,6 +6978,12 @@ packages:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0
|
||||
|
||||
'@react-aria/landmark@3.0.0-beta.18':
|
||||
resolution: {integrity: sha512-jFtWL7TYZrKucWNDx6ppUkGSqS2itkjhyLo9MIFqEg2mi4Lc2EoUjI/Gw9xMT+IJgebTcdQeXJpPskspl3Pojg==}
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0
|
||||
|
||||
'@react-aria/link@3.7.8':
|
||||
resolution: {integrity: sha512-oiXUPQLZmf9Q9Xehb/sG1QRxfo28NFKdh9w+unD12sHI6NdLMETl5MA4CYyTgI0dfMtTjtfrF68GCnWfc7JvXQ==}
|
||||
peerDependencies:
|
||||
@ -7006,6 +7070,12 @@ packages:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0
|
||||
|
||||
'@react-aria/toast@3.0.0-beta.19':
|
||||
resolution: {integrity: sha512-LCMTcmSmum5CzBk+DIec66q6pJGEl+InQPJdsby7QG/row0ka6wHPvul78HVseN7dzg6G3xVjvHtVPOixkuegA==}
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0
|
||||
|
||||
'@react-aria/toggle@3.10.11':
|
||||
resolution: {integrity: sha512-J3jO3KJiUbaYVDEpeXSBwqcyKxpi9OreiHRGiaxb6VwB+FWCj7Gb2WKajByXNyfs8jc6kX9VUFaXa7jze60oEQ==}
|
||||
peerDependencies:
|
||||
@ -7148,6 +7218,11 @@ packages:
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
|
||||
'@react-stately/toast@3.0.0-beta.7':
|
||||
resolution: {integrity: sha512-+KDkaOS5Y4ApOfiP0HHij4ySwAd1VM9/pI4rVTyHrzkp0R2Q0eBxZ74MpWMpVfJa2lSjb/qEm60tqJ3A+4R/cQ==}
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
|
||||
'@react-stately/toggle@3.8.1':
|
||||
resolution: {integrity: sha512-MVpe79ghVQiwLmVzIPhF/O/UJAUc9B+ZSylVTyJiEPi0cwhbkKGQv9thOF0ebkkRkace5lojASqUAYtSTZHQJA==}
|
||||
peerDependencies:
|
||||
@ -8861,8 +8936,8 @@ packages:
|
||||
buffer@6.0.3:
|
||||
resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
|
||||
|
||||
bundle-require@5.0.0:
|
||||
resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
|
||||
bundle-require@5.1.0:
|
||||
resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
peerDependencies:
|
||||
esbuild: '>=0.18'
|
||||
@ -9017,8 +9092,8 @@ packages:
|
||||
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
|
||||
engines: {node: '>= 8.10.0'}
|
||||
|
||||
chokidar@4.0.2:
|
||||
resolution: {integrity: sha512-/b57FK+bblSU+dfewfFe0rT1YjVDfOmeLQwCAuC+vwvgLkXboATqqmy+Ipux6JrF6L5joe5CBnFOw+gLWH6yKg==}
|
||||
chokidar@4.0.3:
|
||||
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
|
||||
engines: {node: '>= 14.16.0'}
|
||||
|
||||
chownr@1.1.4:
|
||||
@ -10347,8 +10422,8 @@ packages:
|
||||
fd-package-json@1.2.0:
|
||||
resolution: {integrity: sha512-45LSPmWf+gC5tdCQMNH4s9Sr00bIkiD9aN7dc5hqkrEw1geRYyDQS1v1oMHAW3ysfxfndqGsrDREHHjNNbKUfA==}
|
||||
|
||||
fdir@6.4.2:
|
||||
resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
|
||||
fdir@6.4.3:
|
||||
resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
|
||||
peerDependencies:
|
||||
picomatch: ^3 || ^4
|
||||
peerDependenciesMeta:
|
||||
@ -13401,11 +13476,6 @@ packages:
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
|
||||
react-dom@18.3.1:
|
||||
resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
|
||||
peerDependencies:
|
||||
react: 18.3.0
|
||||
|
||||
react-error-overlay@6.0.9:
|
||||
resolution: {integrity: sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==}
|
||||
|
||||
@ -13532,9 +13602,9 @@ packages:
|
||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||
engines: {node: '>=8.10.0'}
|
||||
|
||||
readdirp@4.0.2:
|
||||
resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
|
||||
engines: {node: '>= 14.16.0'}
|
||||
readdirp@4.1.1:
|
||||
resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
|
||||
engines: {node: '>= 14.18.0'}
|
||||
|
||||
recast@0.23.9:
|
||||
resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==}
|
||||
@ -14432,8 +14502,8 @@ packages:
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
|
||||
tailwindcss@3.4.16:
|
||||
resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
|
||||
tailwindcss@3.4.17:
|
||||
resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
|
||||
@ -16795,7 +16865,7 @@ snapshots:
|
||||
lodash.merge: 4.6.2
|
||||
lodash.uniq: 4.5.0
|
||||
resolve-from: 5.0.0
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
|
||||
typescript: 5.7.3
|
||||
transitivePeerDependencies:
|
||||
- '@swc/core'
|
||||
@ -17514,7 +17584,7 @@ snapshots:
|
||||
jest-util: 29.7.0
|
||||
slash: 3.0.0
|
||||
|
||||
'@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))':
|
||||
'@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))':
|
||||
dependencies:
|
||||
'@jest/console': 29.7.0
|
||||
'@jest/reporters': 29.7.0
|
||||
@ -17528,7 +17598,7 @@ snapshots:
|
||||
exit: 0.1.2
|
||||
graceful-fs: 4.2.11
|
||||
jest-changed-files: 29.7.0
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
jest-haste-map: 29.7.0
|
||||
jest-message-util: 29.7.0
|
||||
jest-regex-util: 29.6.3
|
||||
@ -18946,19 +19016,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/button@3.11.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/toolbar': 3.0.0-beta.12(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/toggle': 3.8.1(react@18.3.0)
|
||||
'@react-types/button': 3.10.2(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/calendar@3.7.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@internationalized/date': 3.7.0
|
||||
@ -19054,16 +19111,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/focus@3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
clsx: 2.1.1
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/form@3.0.12(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/interactions': 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19105,19 +19152,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/i18n@3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@internationalized/date': 3.7.0
|
||||
'@internationalized/message': 3.1.6
|
||||
'@internationalized/number': 3.6.0
|
||||
'@internationalized/string': 3.2.5
|
||||
'@react-aria/ssr': 3.9.7(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/interactions@3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/ssr': 3.9.7(react@18.3.0)
|
||||
@ -19127,15 +19161,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/interactions@3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/ssr': 3.9.7(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/label@3.7.14(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19144,6 +19169,15 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/landmark@3.0.0-beta.18(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
use-sync-external-store: 1.4.0(react@18.3.0)
|
||||
|
||||
'@react-aria/link@3.7.8(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19246,18 +19280,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/selection@3.22.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/i18n': 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/selection': 3.19.0(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/slider@3.7.15(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19346,6 +19368,19 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/toast@3.0.0-beta.19(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/i18n': 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/interactions': 3.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/landmark': 3.0.0-beta.18(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
'@react-stately/toast': 3.0.0-beta.7(react@18.3.0)
|
||||
'@react-types/button': 3.10.2(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/toggle@3.10.11(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19368,16 +19403,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/toolbar@3.0.0-beta.12(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/i18n': 3.12.5(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-aria/utils': 3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/tooltip@3.7.11(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/focus': 3.19.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19400,16 +19425,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
|
||||
'@react-aria/utils@3.27.0(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/ssr': 3.9.7(react@18.3.0)
|
||||
'@react-stately/utils': 3.10.5(react@18.3.0)
|
||||
'@react-types/shared': 3.27.0(react@18.3.0)
|
||||
'@swc/helpers': 0.5.15
|
||||
clsx: 2.1.1
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
|
||||
'@react-aria/virtualizer@4.1.1(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-aria/i18n': 3.12.5(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
|
||||
@ -19625,6 +19640,12 @@ snapshots:
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
|
||||
'@react-stately/toast@3.0.0-beta.7(react@18.3.0)':
|
||||
dependencies:
|
||||
'@swc/helpers': 0.5.15
|
||||
react: 18.3.0
|
||||
use-sync-external-store: 1.4.0(react@18.3.0)
|
||||
|
||||
'@react-stately/toggle@3.8.1(react@18.3.0)':
|
||||
dependencies:
|
||||
'@react-stately/utils': 3.10.5(react@18.3.0)
|
||||
@ -20203,10 +20224,10 @@ snapshots:
|
||||
dependencies:
|
||||
storybook: 8.5.0(prettier@3.4.2)
|
||||
|
||||
'@storybook/react-dom-shim@8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))':
|
||||
'@storybook/react-dom-shim@8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))':
|
||||
dependencies:
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
storybook: 8.5.0(prettier@2.8.8)
|
||||
|
||||
'@storybook/react-dom-shim@8.5.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@3.4.2))':
|
||||
@ -20237,16 +20258,16 @@ snapshots:
|
||||
- supports-color
|
||||
- typescript
|
||||
|
||||
'@storybook/react@8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)':
|
||||
'@storybook/react@8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))(typescript@5.7.3)':
|
||||
dependencies:
|
||||
'@storybook/components': 8.4.7(storybook@8.5.0(prettier@2.8.8))
|
||||
'@storybook/global': 5.0.0
|
||||
'@storybook/manager-api': 8.4.7(storybook@8.5.0(prettier@2.8.8))
|
||||
'@storybook/preview-api': 8.4.7(storybook@8.5.0(prettier@2.8.8))
|
||||
'@storybook/react-dom-shim': 8.4.7(react-dom@18.3.1(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))
|
||||
'@storybook/react-dom-shim': 8.4.7(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(storybook@8.5.0(prettier@2.8.8))
|
||||
'@storybook/theming': 8.4.7(storybook@8.5.0(prettier@2.8.8))
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
storybook: 8.5.0(prettier@2.8.8)
|
||||
optionalDependencies:
|
||||
typescript: 5.7.3
|
||||
@ -20405,12 +20426,12 @@ snapshots:
|
||||
lodash: 4.17.21
|
||||
redent: 3.0.0
|
||||
|
||||
'@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.1(react@18.3.0))(react@18.3.0)':
|
||||
'@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.0
|
||||
'@testing-library/dom': 10.4.0
|
||||
react: 18.3.0
|
||||
react-dom: 18.3.1(react@18.3.0)
|
||||
react-dom: 18.3.0(react@18.3.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.2.8
|
||||
'@types/react-dom': 18.2.4
|
||||
@ -21599,7 +21620,7 @@ snapshots:
|
||||
base64-js: 1.5.1
|
||||
ieee754: 1.2.1
|
||||
|
||||
bundle-require@5.0.0(esbuild@0.24.2):
|
||||
bundle-require@5.1.0(esbuild@0.24.2):
|
||||
dependencies:
|
||||
esbuild: 0.24.2
|
||||
load-tsconfig: 0.2.5
|
||||
@ -21807,9 +21828,9 @@ snapshots:
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
chokidar@4.0.2:
|
||||
chokidar@4.0.3:
|
||||
dependencies:
|
||||
readdirp: 4.0.2
|
||||
readdirp: 4.1.1
|
||||
|
||||
chownr@1.1.4: {}
|
||||
|
||||
@ -22106,7 +22127,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/node': 20.5.1
|
||||
cosmiconfig: 8.3.6(typescript@5.7.3)
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
|
||||
typescript: 5.7.3
|
||||
|
||||
cosmiconfig@8.3.6(typescript@5.7.3):
|
||||
@ -22127,13 +22148,13 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.7.3
|
||||
|
||||
create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
'@jest/types': 29.6.3
|
||||
chalk: 4.1.2
|
||||
exit: 0.1.2
|
||||
graceful-fs: 4.2.11
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
jest-util: 29.7.0
|
||||
prompts: 2.4.2
|
||||
transitivePeerDependencies:
|
||||
@ -22796,7 +22817,7 @@ snapshots:
|
||||
optionalDependencies:
|
||||
source-map: 0.6.1
|
||||
|
||||
eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0):
|
||||
eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0):
|
||||
dependencies:
|
||||
confusing-browser-globals: 1.0.11
|
||||
eslint: 7.32.0
|
||||
@ -22804,11 +22825,11 @@ snapshots:
|
||||
object.assign: 4.1.7
|
||||
object.entries: 1.1.8
|
||||
|
||||
eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
|
||||
eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
|
||||
dependencies:
|
||||
'@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@5.7.3)
|
||||
eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
|
||||
eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
|
||||
eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)
|
||||
eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
|
||||
transitivePeerDependencies:
|
||||
- eslint
|
||||
- eslint-plugin-import
|
||||
@ -22818,10 +22839,10 @@ snapshots:
|
||||
- supports-color
|
||||
- typescript
|
||||
|
||||
eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0):
|
||||
eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0):
|
||||
dependencies:
|
||||
eslint: 7.32.0
|
||||
eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
|
||||
eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
|
||||
eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
|
||||
eslint-plugin-react: 7.37.3(eslint@7.32.0)
|
||||
@ -22853,7 +22874,7 @@ snapshots:
|
||||
dependencies:
|
||||
eslint: 7.32.0
|
||||
|
||||
eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
|
||||
eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3):
|
||||
dependencies:
|
||||
'@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3)
|
||||
'@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.7.3)
|
||||
@ -22912,7 +22933,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1):
|
||||
eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)):
|
||||
dependencies:
|
||||
eslint: 7.32.0
|
||||
find-cache-dir: 3.3.2
|
||||
@ -22920,9 +22941,9 @@ snapshots:
|
||||
loader-utils: 2.0.4
|
||||
object-hash: 2.2.0
|
||||
schema-utils: 2.7.1
|
||||
webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
|
||||
webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
|
||||
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
optionalDependencies:
|
||||
@ -22956,7 +22977,7 @@ snapshots:
|
||||
doctrine: 2.1.0
|
||||
eslint: 7.32.0
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
|
||||
hasown: 2.0.2
|
||||
is-core-module: 2.16.1
|
||||
is-glob: 4.0.3
|
||||
@ -23432,7 +23453,7 @@ snapshots:
|
||||
dependencies:
|
||||
walk-up-path: 3.0.1
|
||||
|
||||
fdir@6.4.2(picomatch@4.0.2):
|
||||
fdir@6.4.3(picomatch@4.0.2):
|
||||
optionalDependencies:
|
||||
picomatch: 4.0.2
|
||||
|
||||
@ -24682,16 +24703,16 @@ snapshots:
|
||||
- babel-plugin-macros
|
||||
- supports-color
|
||||
|
||||
jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
'@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
'@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
'@jest/test-result': 29.7.0
|
||||
'@jest/types': 29.6.3
|
||||
chalk: 4.1.2
|
||||
create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
exit: 0.1.2
|
||||
import-local: 3.2.0
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
jest-util: 29.7.0
|
||||
jest-validate: 29.7.0
|
||||
yargs: 17.7.2
|
||||
@ -24701,7 +24722,7 @@ snapshots:
|
||||
- supports-color
|
||||
- ts-node
|
||||
|
||||
jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
'@babel/core': 7.26.0
|
||||
'@jest/test-sequencer': 29.7.0
|
||||
@ -24727,7 +24748,7 @@ snapshots:
|
||||
strip-json-comments: 3.1.1
|
||||
optionalDependencies:
|
||||
'@types/node': 15.14.9
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
|
||||
transitivePeerDependencies:
|
||||
- babel-plugin-macros
|
||||
- supports-color
|
||||
@ -24944,11 +24965,11 @@ snapshots:
|
||||
leven: 3.1.0
|
||||
pretty-format: 29.7.0
|
||||
|
||||
jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))):
|
||||
jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))):
|
||||
dependencies:
|
||||
ansi-escapes: 6.2.1
|
||||
chalk: 5.4.1
|
||||
jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
jest-regex-util: 29.6.3
|
||||
jest-watcher: 29.7.0
|
||||
slash: 5.1.0
|
||||
@ -24979,12 +25000,12 @@ snapshots:
|
||||
merge-stream: 2.0.0
|
||||
supports-color: 8.1.1
|
||||
|
||||
jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
'@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
'@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
'@jest/types': 29.6.3
|
||||
import-local: 3.2.0
|
||||
jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
transitivePeerDependencies:
|
||||
- '@types/node'
|
||||
- babel-plugin-macros
|
||||
@ -27013,6 +27034,14 @@ snapshots:
|
||||
camelcase-css: 2.0.1
|
||||
postcss: 8.4.49
|
||||
|
||||
postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
lilconfig: 3.1.3
|
||||
yaml: 2.7.0
|
||||
optionalDependencies:
|
||||
postcss: 8.4.49
|
||||
ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)
|
||||
|
||||
postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
lilconfig: 3.1.3
|
||||
@ -27352,12 +27381,6 @@ snapshots:
|
||||
react: 18.3.0
|
||||
scheduler: 0.23.2
|
||||
|
||||
react-dom@18.3.1(react@18.3.0):
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
react: 18.3.0
|
||||
scheduler: 0.23.2
|
||||
|
||||
react-error-overlay@6.0.9: {}
|
||||
|
||||
react-hook-form@7.54.2(react@18.3.0):
|
||||
@ -27502,7 +27525,7 @@ snapshots:
|
||||
dependencies:
|
||||
picomatch: 2.3.1
|
||||
|
||||
readdirp@4.0.2: {}
|
||||
readdirp@4.1.1: {}
|
||||
|
||||
recast@0.23.9:
|
||||
dependencies:
|
||||
@ -28624,10 +28647,10 @@ snapshots:
|
||||
tailwind-merge: 2.5.4
|
||||
tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3))
|
||||
|
||||
tailwind-variants@0.3.0(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))):
|
||||
tailwind-variants@0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))):
|
||||
dependencies:
|
||||
tailwind-merge: 2.5.4
|
||||
tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
|
||||
tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
@ -28683,7 +28706,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
|
||||
tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)):
|
||||
tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)):
|
||||
dependencies:
|
||||
'@alloc/quick-lru': 5.2.0
|
||||
arg: 5.0.2
|
||||
@ -28702,7 +28725,7 @@ snapshots:
|
||||
postcss: 8.4.49
|
||||
postcss-import: 15.1.0(postcss@8.4.49)
|
||||
postcss-js: 4.0.1(postcss@8.4.49)
|
||||
postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))
|
||||
postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))
|
||||
postcss-nested: 6.2.0(postcss@8.4.49)
|
||||
postcss-selector-parser: 6.1.2
|
||||
resolve: 1.22.10
|
||||
@ -28758,7 +28781,7 @@ snapshots:
|
||||
|
||||
term-size@2.2.1: {}
|
||||
|
||||
terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1):
|
||||
terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))):
|
||||
dependencies:
|
||||
'@jridgewell/trace-mapping': 0.3.25
|
||||
jest-worker: 27.5.1
|
||||
@ -28770,6 +28793,18 @@ snapshots:
|
||||
'@swc/core': 1.10.6(@swc/helpers@0.5.15)
|
||||
esbuild: 0.24.2
|
||||
|
||||
terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)):
|
||||
dependencies:
|
||||
'@jridgewell/trace-mapping': 0.3.25
|
||||
jest-worker: 27.5.1
|
||||
schema-utils: 4.3.0
|
||||
serialize-javascript: 6.0.2
|
||||
terser: 5.37.0
|
||||
webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
|
||||
optionalDependencies:
|
||||
'@swc/core': 1.10.6(@swc/helpers@0.5.15)
|
||||
esbuild: 0.24.2
|
||||
|
||||
terser@5.37.0:
|
||||
dependencies:
|
||||
'@jridgewell/source-map': 0.3.6
|
||||
@ -28827,7 +28862,7 @@ snapshots:
|
||||
|
||||
tinyglobby@0.2.10:
|
||||
dependencies:
|
||||
fdir: 6.4.2(picomatch@4.0.2)
|
||||
fdir: 6.4.3(picomatch@4.0.2)
|
||||
picomatch: 4.0.2
|
||||
|
||||
tinypool@1.0.2: {}
|
||||
@ -28907,6 +28942,26 @@ snapshots:
|
||||
|
||||
ts-interface-checker@0.1.13: {}
|
||||
|
||||
ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3):
|
||||
dependencies:
|
||||
'@cspotcode/source-map-support': 0.8.1
|
||||
'@tsconfig/node10': 1.0.11
|
||||
'@tsconfig/node12': 1.0.11
|
||||
'@tsconfig/node14': 1.0.3
|
||||
'@tsconfig/node16': 1.0.4
|
||||
'@types/node': 15.14.9
|
||||
acorn: 8.14.0
|
||||
acorn-walk: 8.3.4
|
||||
arg: 4.1.3
|
||||
create-require: 1.1.1
|
||||
diff: 4.0.2
|
||||
make-error: 1.3.6
|
||||
typescript: 5.7.3
|
||||
v8-compile-cache-lib: 3.0.1
|
||||
yn: 3.1.1
|
||||
optionalDependencies:
|
||||
'@swc/core': 1.10.6(@swc/helpers@0.5.15)
|
||||
|
||||
ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3):
|
||||
dependencies:
|
||||
'@cspotcode/source-map-support': 0.8.1
|
||||
@ -28947,6 +29002,7 @@ snapshots:
|
||||
yn: 3.1.1
|
||||
optionalDependencies:
|
||||
'@swc/core': 1.10.6(@swc/helpers@0.5.15)
|
||||
optional: true
|
||||
|
||||
ts-pattern@5.6.0: {}
|
||||
|
||||
@ -28969,9 +29025,9 @@ snapshots:
|
||||
|
||||
tsup@8.3.5(@swc/core@1.10.6(@swc/helpers@0.5.15))(jiti@1.21.7)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
|
||||
dependencies:
|
||||
bundle-require: 5.0.0(esbuild@0.24.2)
|
||||
bundle-require: 5.1.0(esbuild@0.24.2)
|
||||
cac: 6.7.14
|
||||
chokidar: 4.0.2
|
||||
chokidar: 4.0.3
|
||||
consola: 3.3.3
|
||||
debug: 4.4.0
|
||||
esbuild: 0.24.2
|
||||
@ -29578,7 +29634,7 @@ snapshots:
|
||||
loader-utils: 1.4.2
|
||||
supports-color: 6.1.0
|
||||
v8-compile-cache: 2.4.0
|
||||
webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))
|
||||
webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)
|
||||
yargs: 13.3.2
|
||||
|
||||
webpack-merge@5.10.0:
|
||||
@ -29613,7 +29669,39 @@ snapshots:
|
||||
neo-async: 2.6.2
|
||||
schema-utils: 3.3.0
|
||||
tapable: 2.2.1
|
||||
terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1)
|
||||
terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1)))
|
||||
watchpack: 2.4.2
|
||||
webpack-sources: 3.2.3
|
||||
optionalDependencies:
|
||||
webpack-cli: 3.3.12(webpack@5.97.1)
|
||||
transitivePeerDependencies:
|
||||
- '@swc/core'
|
||||
- esbuild
|
||||
- uglify-js
|
||||
|
||||
webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12):
|
||||
dependencies:
|
||||
'@types/eslint-scope': 3.7.7
|
||||
'@types/estree': 1.0.6
|
||||
'@webassemblyjs/ast': 1.14.1
|
||||
'@webassemblyjs/wasm-edit': 1.14.1
|
||||
'@webassemblyjs/wasm-parser': 1.14.1
|
||||
acorn: 8.14.0
|
||||
browserslist: 4.24.3
|
||||
chrome-trace-event: 1.0.4
|
||||
enhanced-resolve: 5.18.0
|
||||
es-module-lexer: 1.6.0
|
||||
eslint-scope: 5.1.1
|
||||
events: 3.3.0
|
||||
glob-to-regexp: 0.4.1
|
||||
graceful-fs: 4.2.11
|
||||
json-parse-even-better-errors: 2.3.1
|
||||
loader-runner: 4.3.0
|
||||
mime-types: 2.1.35
|
||||
neo-async: 2.6.2
|
||||
schema-utils: 3.3.0
|
||||
tapable: 2.2.1
|
||||
terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12))
|
||||
watchpack: 2.4.2
|
||||
webpack-sources: 3.2.3
|
||||
optionalDependencies:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user