@zentauri-ui/zentauri-components 1.1.1 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -21
- package/dist/chunk-2VQJ6OIL.js +31 -0
- package/dist/chunk-2VQJ6OIL.js.map +1 -0
- package/dist/chunk-73VCO5TE.mjs +29 -0
- package/dist/chunk-73VCO5TE.mjs.map +1 -0
- package/dist/chunk-BSWYZTYK.js +31 -0
- package/dist/chunk-BSWYZTYK.js.map +1 -0
- package/dist/chunk-CY5BQKRZ.mjs +29 -0
- package/dist/chunk-CY5BQKRZ.mjs.map +1 -0
- package/dist/chunk-DFEZH7TC.mjs +27 -0
- package/dist/chunk-DFEZH7TC.mjs.map +1 -0
- package/dist/chunk-FT2LMA66.mjs +25 -0
- package/dist/chunk-FT2LMA66.mjs.map +1 -0
- package/dist/chunk-JE3PD5ZA.js +107 -0
- package/dist/chunk-JE3PD5ZA.js.map +1 -0
- package/dist/chunk-JXCTEAXD.js +38 -0
- package/dist/chunk-JXCTEAXD.js.map +1 -0
- package/dist/chunk-LIJ6BDGP.mjs +36 -0
- package/dist/chunk-LIJ6BDGP.mjs.map +1 -0
- package/dist/chunk-P6YRSEOY.js +225 -0
- package/dist/chunk-P6YRSEOY.js.map +1 -0
- package/dist/chunk-PMAF6FBF.mjs +37 -0
- package/dist/chunk-PMAF6FBF.mjs.map +1 -0
- package/dist/chunk-TZ2JVWTZ.mjs +104 -0
- package/dist/chunk-TZ2JVWTZ.mjs.map +1 -0
- package/dist/chunk-UIYFEP3I.js +39 -0
- package/dist/chunk-UIYFEP3I.js.map +1 -0
- package/dist/chunk-UJ3AER3U.mjs +214 -0
- package/dist/chunk-UJ3AER3U.mjs.map +1 -0
- package/dist/chunk-UOZYPWDZ.js +32 -0
- package/dist/chunk-UOZYPWDZ.js.map +1 -0
- package/dist/chunk-WL5I7RVS.mjs +54 -0
- package/dist/chunk-WL5I7RVS.mjs.map +1 -0
- package/dist/chunk-WP7GYBRI.js +27 -0
- package/dist/chunk-WP7GYBRI.js.map +1 -0
- package/dist/chunk-YPLVTUYL.js +56 -0
- package/dist/chunk-YPLVTUYL.js.map +1 -0
- package/dist/hooks/useBodyScrollLock.d.mts +14 -0
- package/dist/hooks/useBodyScrollLock.d.ts +14 -0
- package/dist/hooks/useBodyScrollLock.js +13 -0
- package/dist/hooks/useBodyScrollLock.js.map +1 -0
- package/dist/hooks/useBodyScrollLock.mjs +4 -0
- package/dist/hooks/useBodyScrollLock.mjs.map +1 -0
- package/dist/hooks/useClickOutside.d.mts +23 -0
- package/dist/hooks/useClickOutside.d.ts +23 -0
- package/dist/hooks/useClickOutside.js +13 -0
- package/dist/hooks/useClickOutside.js.map +1 -0
- package/dist/hooks/useClickOutside.mjs +4 -0
- package/dist/hooks/useClickOutside.mjs.map +1 -0
- package/dist/hooks/useClipboard.d.mts +22 -0
- package/dist/hooks/useClipboard.d.ts +22 -0
- package/dist/hooks/useClipboard.js +51 -0
- package/dist/hooks/useClipboard.js.map +1 -0
- package/dist/hooks/useClipboard.mjs +49 -0
- package/dist/hooks/useClipboard.mjs.map +1 -0
- package/dist/hooks/useControllableState.d.mts +22 -0
- package/dist/hooks/useControllableState.d.ts +22 -0
- package/dist/hooks/useControllableState.js +13 -0
- package/dist/hooks/useControllableState.js.map +1 -0
- package/dist/hooks/useControllableState.mjs +4 -0
- package/dist/hooks/useControllableState.mjs.map +1 -0
- package/dist/hooks/useDebouncedValue.d.mts +14 -0
- package/dist/hooks/useDebouncedValue.d.ts +14 -0
- package/dist/hooks/useDebouncedValue.js +22 -0
- package/dist/hooks/useDebouncedValue.js.map +1 -0
- package/dist/hooks/useDebouncedValue.mjs +20 -0
- package/dist/hooks/useDebouncedValue.mjs.map +1 -0
- package/dist/hooks/useDisclosure.d.mts +25 -0
- package/dist/hooks/useDisclosure.d.ts +25 -0
- package/dist/hooks/useDisclosure.js +37 -0
- package/dist/hooks/useDisclosure.js.map +1 -0
- package/dist/hooks/useDisclosure.mjs +35 -0
- package/dist/hooks/useDisclosure.mjs.map +1 -0
- package/dist/hooks/useDocumentTitle.d.mts +19 -0
- package/dist/hooks/useDocumentTitle.d.ts +19 -0
- package/dist/hooks/useDocumentTitle.js +40 -0
- package/dist/hooks/useDocumentTitle.js.map +1 -0
- package/dist/hooks/useDocumentTitle.mjs +38 -0
- package/dist/hooks/useDocumentTitle.mjs.map +1 -0
- package/dist/hooks/useFocusManagement.d.mts +24 -0
- package/dist/hooks/useFocusManagement.d.ts +24 -0
- package/dist/hooks/useFocusManagement.js +14 -0
- package/dist/hooks/useFocusManagement.js.map +1 -0
- package/dist/hooks/useFocusManagement.mjs +5 -0
- package/dist/hooks/useFocusManagement.mjs.map +1 -0
- package/dist/hooks/useHover.d.mts +15 -0
- package/dist/hooks/useHover.d.ts +15 -0
- package/dist/hooks/useHover.js +37 -0
- package/dist/hooks/useHover.js.map +1 -0
- package/dist/hooks/useHover.mjs +35 -0
- package/dist/hooks/useHover.mjs.map +1 -0
- package/dist/hooks/useInView.d.mts +19 -0
- package/dist/hooks/useInView.d.ts +19 -0
- package/dist/hooks/useInView.js +15 -0
- package/dist/hooks/useInView.js.map +1 -0
- package/dist/hooks/useInView.mjs +13 -0
- package/dist/hooks/useInView.mjs.map +1 -0
- package/dist/hooks/useIntersectionObserver.d.mts +19 -0
- package/dist/hooks/useIntersectionObserver.d.ts +19 -0
- package/dist/hooks/useIntersectionObserver.js +13 -0
- package/dist/hooks/useIntersectionObserver.js.map +1 -0
- package/dist/hooks/useIntersectionObserver.mjs +4 -0
- package/dist/hooks/useIntersectionObserver.mjs.map +1 -0
- package/dist/hooks/useIsMounted.d.mts +11 -0
- package/dist/hooks/useIsMounted.d.ts +11 -0
- package/dist/hooks/useIsMounted.js +20 -0
- package/dist/hooks/useIsMounted.js.map +1 -0
- package/dist/hooks/useIsMounted.mjs +18 -0
- package/dist/hooks/useIsMounted.mjs.map +1 -0
- package/dist/hooks/useIsomorphicLayoutEffect.d.mts +11 -0
- package/dist/hooks/useIsomorphicLayoutEffect.d.ts +11 -0
- package/dist/hooks/useIsomorphicLayoutEffect.js +11 -0
- package/dist/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/dist/hooks/useIsomorphicLayoutEffect.mjs +9 -0
- package/dist/hooks/useIsomorphicLayoutEffect.mjs.map +1 -0
- package/dist/hooks/useLocalStorage.d.mts +22 -0
- package/dist/hooks/useLocalStorage.d.ts +22 -0
- package/dist/hooks/useLocalStorage.js +84 -0
- package/dist/hooks/useLocalStorage.js.map +1 -0
- package/dist/hooks/useLocalStorage.mjs +82 -0
- package/dist/hooks/useLocalStorage.mjs.map +1 -0
- package/dist/hooks/useMediaQuery.d.mts +13 -0
- package/dist/hooks/useMediaQuery.d.ts +13 -0
- package/dist/hooks/useMediaQuery.js +13 -0
- package/dist/hooks/useMediaQuery.js.map +1 -0
- package/dist/hooks/useMediaQuery.mjs +4 -0
- package/dist/hooks/useMediaQuery.mjs.map +1 -0
- package/dist/hooks/useNetworkStatus.d.mts +10 -0
- package/dist/hooks/useNetworkStatus.d.ts +10 -0
- package/dist/hooks/useNetworkStatus.js +30 -0
- package/dist/hooks/useNetworkStatus.js.map +1 -0
- package/dist/hooks/useNetworkStatus.mjs +28 -0
- package/dist/hooks/useNetworkStatus.mjs.map +1 -0
- package/dist/hooks/usePageVisibility.d.mts +10 -0
- package/dist/hooks/usePageVisibility.d.ts +10 -0
- package/dist/hooks/usePageVisibility.js +28 -0
- package/dist/hooks/usePageVisibility.js.map +1 -0
- package/dist/hooks/usePageVisibility.mjs +26 -0
- package/dist/hooks/usePageVisibility.mjs.map +1 -0
- package/dist/hooks/usePagination.d.mts +5 -0
- package/dist/hooks/usePagination.d.ts +5 -0
- package/dist/hooks/usePagination.js +18 -0
- package/dist/hooks/usePagination.js.map +1 -0
- package/dist/hooks/usePagination.mjs +5 -0
- package/dist/hooks/usePagination.mjs.map +1 -0
- package/dist/hooks/usePrefersColorScheme.d.mts +10 -0
- package/dist/hooks/usePrefersColorScheme.d.ts +10 -0
- package/dist/hooks/usePrefersColorScheme.js +17 -0
- package/dist/hooks/usePrefersColorScheme.js.map +1 -0
- package/dist/hooks/usePrefersColorScheme.mjs +15 -0
- package/dist/hooks/usePrefersColorScheme.mjs.map +1 -0
- package/dist/hooks/usePrefersReducedMotion.d.mts +10 -0
- package/dist/hooks/usePrefersReducedMotion.d.ts +10 -0
- package/dist/hooks/usePrefersReducedMotion.js +13 -0
- package/dist/hooks/usePrefersReducedMotion.js.map +1 -0
- package/dist/hooks/usePrefersReducedMotion.mjs +11 -0
- package/dist/hooks/usePrefersReducedMotion.mjs.map +1 -0
- package/dist/hooks/useResizeObserver.d.mts +23 -0
- package/dist/hooks/useResizeObserver.d.ts +23 -0
- package/dist/hooks/useResizeObserver.js +38 -0
- package/dist/hooks/useResizeObserver.js.map +1 -0
- package/dist/hooks/useResizeObserver.mjs +36 -0
- package/dist/hooks/useResizeObserver.mjs.map +1 -0
- package/dist/hooks/useSessionStorage.d.mts +22 -0
- package/dist/hooks/useSessionStorage.d.ts +22 -0
- package/dist/hooks/useSessionStorage.js +58 -0
- package/dist/hooks/useSessionStorage.js.map +1 -0
- package/dist/hooks/useSessionStorage.mjs +56 -0
- package/dist/hooks/useSessionStorage.mjs.map +1 -0
- package/dist/hooks/useThrottledCallback.d.mts +14 -0
- package/dist/hooks/useThrottledCallback.d.ts +14 -0
- package/dist/hooks/useThrottledCallback.js +27 -0
- package/dist/hooks/useThrottledCallback.js.map +1 -0
- package/dist/hooks/useThrottledCallback.mjs +25 -0
- package/dist/hooks/useThrottledCallback.mjs.map +1 -0
- package/dist/hooks/useToggle.d.mts +9 -0
- package/dist/hooks/useToggle.d.ts +9 -0
- package/dist/hooks/useToggle.js +20 -0
- package/dist/hooks/useToggle.js.map +1 -0
- package/dist/hooks/useToggle.mjs +18 -0
- package/dist/hooks/useToggle.mjs.map +1 -0
- package/dist/hooks/useWindowSize.d.mts +14 -0
- package/dist/hooks/useWindowSize.d.ts +14 -0
- package/dist/hooks/useWindowSize.js +30 -0
- package/dist/hooks/useWindowSize.js.map +1 -0
- package/dist/hooks/useWindowSize.mjs +28 -0
- package/dist/hooks/useWindowSize.mjs.map +1 -0
- package/dist/hooks/utils.d.mts +8 -0
- package/dist/hooks/utils.d.ts +8 -0
- package/dist/hooks/utils.js +24 -0
- package/dist/hooks/utils.js.map +1 -0
- package/dist/hooks/utils.mjs +3 -0
- package/dist/hooks/utils.mjs.map +1 -0
- package/dist/index-ClPu5gDp.d.ts +86 -0
- package/dist/index-D4p9fn1o.d.mts +86 -0
- package/dist/types-BQ2H3yG7.d.mts +34 -0
- package/dist/types-BQ2H3yG7.d.ts +34 -0
- package/dist/ui/accordion.js +5 -5
- package/dist/ui/accordion.mjs +1 -1
- package/dist/ui/alert/animated.d.mts +13 -0
- package/dist/ui/alert/animated.d.ts +13 -0
- package/dist/ui/alert/animated.js +27 -0
- package/dist/ui/alert/animated.js.map +1 -0
- package/dist/ui/alert/animated.mjs +25 -0
- package/dist/ui/alert/animated.mjs.map +1 -0
- package/dist/ui/alert.d.mts +11 -36
- package/dist/ui/alert.d.ts +11 -36
- package/dist/ui/alert.js +40 -218
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/alert.mjs +7 -211
- package/dist/ui/alert.mjs.map +1 -1
- package/dist/ui/avatar.js +6 -6
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/avatar.mjs +1 -1
- package/dist/ui/avatar.mjs.map +1 -1
- package/dist/ui/badge.js +2 -2
- package/dist/ui/badge.mjs +1 -1
- package/dist/ui/breadcrumb.js +7 -7
- package/dist/ui/breadcrumb.mjs +1 -1
- package/dist/ui/buttons.js +3 -3
- package/dist/ui/buttons.mjs +1 -1
- package/dist/ui/card.js +7 -7
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/card.mjs +1 -1
- package/dist/ui/card.mjs.map +1 -1
- package/dist/ui/divider.js +6 -6
- package/dist/ui/divider.mjs +1 -1
- package/dist/ui/drawer.js +15 -60
- package/dist/ui/drawer.js.map +1 -1
- package/dist/ui/drawer.mjs +9 -54
- package/dist/ui/drawer.mjs.map +1 -1
- package/dist/ui/dropdown.js +6 -13
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +4 -11
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/empty-state.js +6 -6
- package/dist/ui/empty-state.js.map +1 -1
- package/dist/ui/empty-state.mjs +1 -1
- package/dist/ui/empty-state.mjs.map +1 -1
- package/dist/ui/file-upload.js +3 -3
- package/dist/ui/file-upload.mjs +1 -1
- package/dist/ui/inputs.js +3 -3
- package/dist/ui/inputs.mjs +1 -1
- package/dist/ui/modal.js +16 -61
- package/dist/ui/modal.js.map +1 -1
- package/dist/ui/modal.mjs +9 -54
- package/dist/ui/modal.mjs.map +1 -1
- package/dist/ui/pagination.d.mts +3 -81
- package/dist/ui/pagination.d.ts +3 -81
- package/dist/ui/pagination.js +13 -122
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +5 -114
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/progress.js +7 -10
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/progress.mjs +1 -4
- package/dist/ui/progress.mjs.map +1 -1
- package/dist/ui/select.js +6 -6
- package/dist/ui/select.mjs +1 -1
- package/dist/ui/skeleton.js +7 -7
- package/dist/ui/skeleton.mjs +1 -1
- package/dist/ui/slider.js +9 -9
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/slider.mjs +1 -1
- package/dist/ui/slider.mjs.map +1 -1
- package/dist/ui/spinner.js +24 -10
- package/dist/ui/spinner.js.map +1 -1
- package/dist/ui/spinner.mjs +17 -3
- package/dist/ui/spinner.mjs.map +1 -1
- package/dist/ui/stepper.js +6 -6
- package/dist/ui/stepper.mjs +1 -1
- package/dist/ui/table.js +9 -9
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/table.mjs +1 -1
- package/dist/ui/table.mjs.map +1 -1
- package/dist/ui/tabs.js +5 -5
- package/dist/ui/tabs.mjs +1 -1
- package/dist/ui/toast.js +7 -7
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toast.mjs +1 -1
- package/dist/ui/toast.mjs.map +1 -1
- package/dist/ui/toggle.js +3 -3
- package/dist/ui/toggle.mjs +1 -1
- package/dist/ui/tooltip.js +2 -2
- package/dist/ui/tooltip.mjs +1 -1
- package/package.json +13 -3
- package/dist/chunk-B23TPTVG.mjs +0 -11
- package/dist/chunk-B23TPTVG.mjs.map +0 -1
- package/dist/chunk-WZ2GOU2J.js +0 -13
- package/dist/chunk-WZ2GOU2J.js.map +0 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
declare const alertVariants: (props?: ({
|
|
6
|
+
appearance?: "default" | "success" | "warning" | "error" | "info" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
declare const alertTitleVariants: (props?: ({
|
|
10
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
11
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
|
+
declare const alertDescriptionVariants: (props?: ({
|
|
13
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
14
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
|
+
|
|
16
|
+
type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
|
|
17
|
+
type AlertAppearance = VariantProps<typeof alertVariants>["appearance"];
|
|
18
|
+
type AlertSize = VariantProps<typeof alertVariants>["size"];
|
|
19
|
+
interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
|
|
20
|
+
appearance?: AlertAppearance;
|
|
21
|
+
size?: AlertSize;
|
|
22
|
+
closable?: boolean;
|
|
23
|
+
onClose?: () => void;
|
|
24
|
+
closeLabel?: string;
|
|
25
|
+
triggerClassName?: string;
|
|
26
|
+
as?: ElementType;
|
|
27
|
+
}
|
|
28
|
+
type AlertSectionProps = {
|
|
29
|
+
className?: string;
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
};
|
|
32
|
+
type AlertProps = Omit<AlertBaseProps, "as">;
|
|
33
|
+
|
|
34
|
+
export { type AlertBaseProps as A, type AlertAnimation as a, type AlertSectionProps as b, type AlertProps as c, type AlertSize as d, alertDescriptionVariants as e, alertTitleVariants as f, alertVariants as g };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
declare const alertVariants: (props?: ({
|
|
6
|
+
appearance?: "default" | "success" | "warning" | "error" | "info" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
declare const alertTitleVariants: (props?: ({
|
|
10
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
11
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
|
+
declare const alertDescriptionVariants: (props?: ({
|
|
13
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
14
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
|
+
|
|
16
|
+
type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
|
|
17
|
+
type AlertAppearance = VariantProps<typeof alertVariants>["appearance"];
|
|
18
|
+
type AlertSize = VariantProps<typeof alertVariants>["size"];
|
|
19
|
+
interface AlertBaseProps extends ComponentPropsWithRef<"div"> {
|
|
20
|
+
appearance?: AlertAppearance;
|
|
21
|
+
size?: AlertSize;
|
|
22
|
+
closable?: boolean;
|
|
23
|
+
onClose?: () => void;
|
|
24
|
+
closeLabel?: string;
|
|
25
|
+
triggerClassName?: string;
|
|
26
|
+
as?: ElementType;
|
|
27
|
+
}
|
|
28
|
+
type AlertSectionProps = {
|
|
29
|
+
className?: string;
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
};
|
|
32
|
+
type AlertProps = Omit<AlertBaseProps, "as">;
|
|
33
|
+
|
|
34
|
+
export { type AlertBaseProps as A, type AlertAnimation as a, type AlertSectionProps as b, type AlertProps as c, type AlertSize as d, alertDescriptionVariants as e, alertTitleVariants as f, alertVariants as g };
|
package/dist/ui/accordion.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var chunkUOZYPWDZ_js = require('../chunk-UOZYPWDZ.js');
|
|
5
5
|
var framerMotion = require('framer-motion');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -197,7 +197,7 @@ function Accordion({
|
|
|
197
197
|
"div",
|
|
198
198
|
{
|
|
199
199
|
"data-slot": "accordion",
|
|
200
|
-
className:
|
|
200
|
+
className: chunkUOZYPWDZ_js.cn(accordionVariants({ appearance, size }), className),
|
|
201
201
|
children
|
|
202
202
|
}
|
|
203
203
|
) });
|
|
@@ -217,7 +217,7 @@ function AccordionItem({
|
|
|
217
217
|
ref,
|
|
218
218
|
"data-slot": "accordion-item",
|
|
219
219
|
"data-value": value,
|
|
220
|
-
className:
|
|
220
|
+
className: chunkUOZYPWDZ_js.cn(accordionItemVariants({ appearance }), className),
|
|
221
221
|
...rest,
|
|
222
222
|
children
|
|
223
223
|
}
|
|
@@ -244,7 +244,7 @@ function AccordionTrigger({
|
|
|
244
244
|
id: `${baseId}-trigger-${itemValue}`,
|
|
245
245
|
"aria-expanded": open,
|
|
246
246
|
"aria-controls": panelId,
|
|
247
|
-
className:
|
|
247
|
+
className: chunkUOZYPWDZ_js.cn(accordionTriggerVariants({ size }), className),
|
|
248
248
|
onClick: () => toggle(itemValue),
|
|
249
249
|
...rest,
|
|
250
250
|
children
|
|
@@ -274,7 +274,7 @@ function AccordionContent({
|
|
|
274
274
|
id: panelId,
|
|
275
275
|
role: "region",
|
|
276
276
|
"data-slot": "accordion-content",
|
|
277
|
-
className:
|
|
277
|
+
className: chunkUOZYPWDZ_js.cn(accordionContentVariants({ size }), className),
|
|
278
278
|
initial: motionless ? false : { opacity: 0 },
|
|
279
279
|
animate: motionless ? void 0 : { opacity: 1 },
|
|
280
280
|
exit: motionless ? void 0 : { opacity: 0 },
|
package/dist/ui/accordion.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn } from '../chunk-
|
|
2
|
+
import { cn } from '../chunk-DFEZH7TC.mjs';
|
|
3
3
|
import { motion } from 'framer-motion';
|
|
4
4
|
import { createContext, useState, useMemo, useCallback, useId, useContext } from 'react';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { A as AlertBaseProps, a as AlertAnimation } from '../../types-BQ2H3yG7.mjs';
|
|
3
|
+
import 'class-variance-authority';
|
|
4
|
+
import 'react';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
6
|
+
|
|
7
|
+
type AlertAnimatedProps = Omit<AlertBaseProps, "as"> & {
|
|
8
|
+
animation?: AlertAnimation;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
declare const AlertAnimated: ({ animation, ...props }: AlertAnimatedProps) => react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { AlertAnimated, type AlertAnimatedProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { A as AlertBaseProps, a as AlertAnimation } from '../../types-BQ2H3yG7.js';
|
|
3
|
+
import 'class-variance-authority';
|
|
4
|
+
import 'react';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
6
|
+
|
|
7
|
+
type AlertAnimatedProps = Omit<AlertBaseProps, "as"> & {
|
|
8
|
+
animation?: AlertAnimation;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
declare const AlertAnimated: ({ animation, ...props }: AlertAnimatedProps) => react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { AlertAnimated, type AlertAnimatedProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkP6YRSEOY_js = require('../../chunk-P6YRSEOY.js');
|
|
5
|
+
require('../../chunk-UOZYPWDZ.js');
|
|
6
|
+
var framerMotion = require('framer-motion');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
var AlertAnimated = ({
|
|
10
|
+
animation = "none",
|
|
11
|
+
...props
|
|
12
|
+
}) => {
|
|
13
|
+
const motionProps = chunkP6YRSEOY_js.alertAnimationPresets[animation];
|
|
14
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
15
|
+
chunkP6YRSEOY_js.AlertBase,
|
|
16
|
+
{
|
|
17
|
+
as: framerMotion.motion.div,
|
|
18
|
+
initial: animation === "none" ? false : void 0,
|
|
19
|
+
...motionProps,
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.AlertAnimated = AlertAnimated;
|
|
26
|
+
//# sourceMappingURL=animated.js.map
|
|
27
|
+
//# sourceMappingURL=animated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/alert/animated/alert-animated.tsx"],"names":["alertAnimationPresets","jsx","AlertBase","motion"],"mappings":";;;;;;;AAKO,IAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA,GAAY,MAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,WAAA,GAAcA,uCAAsB,SAAS,CAAA;AAEnD,EAAA,uBACEC,cAAA;AAAA,IAACC,0BAAA;AAAA,IAAA;AAAA,MACC,IAAIC,mBAAA,CAAO,GAAA;AAAA,MACX,OAAA,EAAS,SAAA,KAAc,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,MACvC,GAAG,WAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ","file":"animated.js","sourcesContent":["import { motion } from \"framer-motion\";\nimport { AlertBase } from \"../alert-base\";\nimport { alertAnimationPresets } from \"../animations\";\nimport type { AlertAnimatedProps } from \"./types\";\n\nexport const AlertAnimated = ({\n animation = \"none\",\n ...props\n}: AlertAnimatedProps) => {\n const motionProps = alertAnimationPresets[animation];\n\n return (\n <AlertBase\n as={motion.div}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...props}\n />\n );\n};\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { alertAnimationPresets, AlertBase } from '../../chunk-UJ3AER3U.mjs';
|
|
3
|
+
import '../../chunk-DFEZH7TC.mjs';
|
|
4
|
+
import { motion } from 'framer-motion';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var AlertAnimated = ({
|
|
8
|
+
animation = "none",
|
|
9
|
+
...props
|
|
10
|
+
}) => {
|
|
11
|
+
const motionProps = alertAnimationPresets[animation];
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
13
|
+
AlertBase,
|
|
14
|
+
{
|
|
15
|
+
as: motion.div,
|
|
16
|
+
initial: animation === "none" ? false : void 0,
|
|
17
|
+
...motionProps,
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { AlertAnimated };
|
|
24
|
+
//# sourceMappingURL=animated.mjs.map
|
|
25
|
+
//# sourceMappingURL=animated.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/alert/animated/alert-animated.tsx"],"names":[],"mappings":";;;;;AAKO,IAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA,GAAY,MAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,sBAAsB,SAAS,CAAA;AAEnD,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAI,MAAA,CAAO,GAAA;AAAA,MACX,OAAA,EAAS,SAAA,KAAc,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,MACvC,GAAG,WAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ","file":"animated.mjs","sourcesContent":["import { motion } from \"framer-motion\";\nimport { AlertBase } from \"../alert-base\";\nimport { alertAnimationPresets } from \"../animations\";\nimport type { AlertAnimatedProps } from \"./types\";\n\nexport const AlertAnimated = ({\n animation = \"none\",\n ...props\n}: AlertAnimatedProps) => {\n const motionProps = alertAnimationPresets[animation];\n\n return (\n <AlertBase\n as={motion.div}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...props}\n />\n );\n};\n"]}
|
package/dist/ui/alert.d.mts
CHANGED
|
@@ -1,41 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { b as AlertSectionProps, c as AlertProps, a as AlertAnimation } from '../types-BQ2H3yG7.mjs';
|
|
3
|
+
export { d as AlertSize, e as alertDescriptionVariants, f as alertTitleVariants, g as alertVariants } from '../types-BQ2H3yG7.mjs';
|
|
3
4
|
import { HTMLMotionProps } from 'framer-motion';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
5
|
+
import 'class-variance-authority';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'class-variance-authority/types';
|
|
6
8
|
|
|
7
|
-
declare const alertVariants: (props?: ({
|
|
8
|
-
appearance?: "default" | "success" | "warning" | "error" | "info" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
|
|
9
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
declare const alertTitleVariants: (props?: ({
|
|
12
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
13
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
14
|
-
declare const alertDescriptionVariants: (props?: ({
|
|
15
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
16
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
17
|
-
|
|
18
|
-
type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
|
|
19
|
-
type AlertVariantProps = VariantProps<typeof alertVariants> & {
|
|
20
|
-
closable?: boolean;
|
|
21
|
-
};
|
|
22
|
-
type AlertProps = AlertVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
|
|
23
|
-
triggerClassName?: string;
|
|
24
|
-
animation?: AlertAnimation;
|
|
25
|
-
children?: ReactNode;
|
|
26
|
-
onClose?: () => void;
|
|
27
|
-
closeLabel?: string;
|
|
28
|
-
};
|
|
29
|
-
type AlertSectionProps = {
|
|
30
|
-
className?: string;
|
|
31
|
-
children?: ReactNode;
|
|
32
|
-
};
|
|
33
|
-
type AlertSize = NonNullable<AlertProps["size"]>;
|
|
34
|
-
|
|
35
|
-
declare function Alert(props: AlertProps): react_jsx_runtime.JSX.Element;
|
|
36
|
-
declare namespace Alert {
|
|
37
|
-
var displayName: string;
|
|
38
|
-
}
|
|
39
9
|
declare function AlertIcon({ className, children }: AlertSectionProps): react_jsx_runtime.JSX.Element;
|
|
40
10
|
declare namespace AlertIcon {
|
|
41
11
|
var displayName: string;
|
|
@@ -59,8 +29,13 @@ declare function AlertDefaultIcon({ appearance, }: {
|
|
|
59
29
|
appearance?: AlertProps["appearance"];
|
|
60
30
|
}): react_jsx_runtime.JSX.Element;
|
|
61
31
|
|
|
32
|
+
declare const Alert: {
|
|
33
|
+
(props: AlertProps): react_jsx_runtime.JSX.Element;
|
|
34
|
+
displayName: string;
|
|
35
|
+
};
|
|
36
|
+
|
|
62
37
|
type AlertPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "transition">;
|
|
63
38
|
type AlertAnimationPresets = Record<AlertAnimation, AlertPresetMotionProps>;
|
|
64
39
|
declare const alertAnimationPresets: AlertAnimationPresets;
|
|
65
40
|
|
|
66
|
-
export { Alert,
|
|
41
|
+
export { Alert, AlertAnimation, AlertClose, AlertDefaultIcon, AlertDescription, AlertIcon, AlertProps, AlertSectionProps, AlertTitle, alertAnimationPresets };
|
package/dist/ui/alert.d.ts
CHANGED
|
@@ -1,41 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { b as AlertSectionProps, c as AlertProps, a as AlertAnimation } from '../types-BQ2H3yG7.js';
|
|
3
|
+
export { d as AlertSize, e as alertDescriptionVariants, f as alertTitleVariants, g as alertVariants } from '../types-BQ2H3yG7.js';
|
|
3
4
|
import { HTMLMotionProps } from 'framer-motion';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
5
|
+
import 'class-variance-authority';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'class-variance-authority/types';
|
|
6
8
|
|
|
7
|
-
declare const alertVariants: (props?: ({
|
|
8
|
-
appearance?: "default" | "success" | "warning" | "error" | "info" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
|
|
9
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
declare const alertTitleVariants: (props?: ({
|
|
12
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
13
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
14
|
-
declare const alertDescriptionVariants: (props?: ({
|
|
15
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
16
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
17
|
-
|
|
18
|
-
type AlertAnimation = "none" | "slide-down" | "fade" | "pop";
|
|
19
|
-
type AlertVariantProps = VariantProps<typeof alertVariants> & {
|
|
20
|
-
closable?: boolean;
|
|
21
|
-
};
|
|
22
|
-
type AlertProps = AlertVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
|
|
23
|
-
triggerClassName?: string;
|
|
24
|
-
animation?: AlertAnimation;
|
|
25
|
-
children?: ReactNode;
|
|
26
|
-
onClose?: () => void;
|
|
27
|
-
closeLabel?: string;
|
|
28
|
-
};
|
|
29
|
-
type AlertSectionProps = {
|
|
30
|
-
className?: string;
|
|
31
|
-
children?: ReactNode;
|
|
32
|
-
};
|
|
33
|
-
type AlertSize = NonNullable<AlertProps["size"]>;
|
|
34
|
-
|
|
35
|
-
declare function Alert(props: AlertProps): react_jsx_runtime.JSX.Element;
|
|
36
|
-
declare namespace Alert {
|
|
37
|
-
var displayName: string;
|
|
38
|
-
}
|
|
39
9
|
declare function AlertIcon({ className, children }: AlertSectionProps): react_jsx_runtime.JSX.Element;
|
|
40
10
|
declare namespace AlertIcon {
|
|
41
11
|
var displayName: string;
|
|
@@ -59,8 +29,13 @@ declare function AlertDefaultIcon({ appearance, }: {
|
|
|
59
29
|
appearance?: AlertProps["appearance"];
|
|
60
30
|
}): react_jsx_runtime.JSX.Element;
|
|
61
31
|
|
|
32
|
+
declare const Alert: {
|
|
33
|
+
(props: AlertProps): react_jsx_runtime.JSX.Element;
|
|
34
|
+
displayName: string;
|
|
35
|
+
};
|
|
36
|
+
|
|
62
37
|
type AlertPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "transition">;
|
|
63
38
|
type AlertAnimationPresets = Record<AlertAnimation, AlertPresetMotionProps>;
|
|
64
39
|
declare const alertAnimationPresets: AlertAnimationPresets;
|
|
65
40
|
|
|
66
|
-
export { Alert,
|
|
41
|
+
export { Alert, AlertAnimation, AlertClose, AlertDefaultIcon, AlertDescription, AlertIcon, AlertProps, AlertSectionProps, AlertTitle, alertAnimationPresets };
|
package/dist/ui/alert.js
CHANGED
|
@@ -1,229 +1,51 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
var framerMotion = require('framer-motion');
|
|
7
|
-
var hi2 = require('react-icons/hi2');
|
|
8
|
-
var classVarianceAuthority = require('class-variance-authority');
|
|
4
|
+
var chunkP6YRSEOY_js = require('../chunk-P6YRSEOY.js');
|
|
5
|
+
require('../chunk-UOZYPWDZ.js');
|
|
9
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
7
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
none: {},
|
|
14
|
-
"slide-down": {
|
|
15
|
-
initial: { y: -8, opacity: 0 },
|
|
16
|
-
animate: { y: 0, opacity: 1 },
|
|
17
|
-
transition: { type: "spring", stiffness: 420, damping: 30 }
|
|
18
|
-
},
|
|
19
|
-
fade: {
|
|
20
|
-
initial: { opacity: 0 },
|
|
21
|
-
animate: { opacity: 1 },
|
|
22
|
-
transition: { duration: 0.2 }
|
|
23
|
-
},
|
|
24
|
-
pop: {
|
|
25
|
-
initial: { scale: 0.96, opacity: 0 },
|
|
26
|
-
animate: { scale: 1, opacity: 1 },
|
|
27
|
-
transition: { type: "spring", stiffness: 520, damping: 28 }
|
|
28
|
-
}
|
|
8
|
+
var Alert = (props) => {
|
|
9
|
+
return /* @__PURE__ */ jsxRuntime.jsx(chunkP6YRSEOY_js.AlertBase, { ...props });
|
|
29
10
|
};
|
|
30
|
-
var alertVariants = classVarianceAuthority.cva(
|
|
31
|
-
"relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors",
|
|
32
|
-
{
|
|
33
|
-
variants: {
|
|
34
|
-
appearance: {
|
|
35
|
-
default: "border-white/10 bg-white/5 text-slate-50",
|
|
36
|
-
success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
|
|
37
|
-
warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
|
|
38
|
-
error: "border-rose-500/50 bg-rose-500/10 text-rose-50",
|
|
39
|
-
info: "border-sky-500/40 bg-sky-500/10 text-sky-50",
|
|
40
|
-
ghost: "border-transparent bg-transparent text-slate-200",
|
|
41
|
-
purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
|
|
42
|
-
pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
|
|
43
|
-
orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
|
|
44
|
-
yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
|
|
45
|
-
teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
|
|
46
|
-
indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
|
|
47
|
-
gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
|
|
48
|
-
violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
|
|
49
|
-
"gradient-blue": "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
|
|
50
|
-
"gradient-green": "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
|
|
51
|
-
"gradient-red": "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
|
|
52
|
-
"gradient-yellow": "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
|
|
53
|
-
"gradient-purple": "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
|
|
54
|
-
"gradient-teal": "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
|
|
55
|
-
"gradient-indigo": "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
|
|
56
|
-
"gradient-pink": "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
|
|
57
|
-
"gradient-orange": "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl"
|
|
58
|
-
},
|
|
59
|
-
size: {
|
|
60
|
-
sm: "rounded-lg p-3",
|
|
61
|
-
md: "rounded-xl p-4",
|
|
62
|
-
lg: "rounded-2xl p-5 text-base"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: {
|
|
66
|
-
appearance: "default",
|
|
67
|
-
size: "md"
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
);
|
|
71
|
-
var alertTitleVariants = classVarianceAuthority.cva("font-semibold leading-tight", {
|
|
72
|
-
variants: {
|
|
73
|
-
size: {
|
|
74
|
-
sm: "text-xs md:text-sm",
|
|
75
|
-
md: "text-xs md:text-sm",
|
|
76
|
-
lg: "text-xs md:text-sm"
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
defaultVariants: { size: "md" }
|
|
80
|
-
});
|
|
81
|
-
var alertDescriptionVariants = classVarianceAuthority.cva("text-slate-300", {
|
|
82
|
-
variants: {
|
|
83
|
-
size: {
|
|
84
|
-
sm: "text-xs md:text-sm",
|
|
85
|
-
md: "text-xs md:text-sm",
|
|
86
|
-
lg: "text-xs md:text-sm"
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
defaultVariants: { size: "md" }
|
|
90
|
-
});
|
|
91
|
-
var AlertSizeContext = react.createContext("md");
|
|
92
|
-
function useAlertSize() {
|
|
93
|
-
const ctx = react.useContext(AlertSizeContext);
|
|
94
|
-
if (!ctx) {
|
|
95
|
-
throw new Error("useAlertSize must be used within an Alert");
|
|
96
|
-
}
|
|
97
|
-
return ctx;
|
|
98
|
-
}
|
|
99
|
-
function Alert(props) {
|
|
100
|
-
const {
|
|
101
|
-
className,
|
|
102
|
-
triggerClassName,
|
|
103
|
-
appearance,
|
|
104
|
-
size = "md",
|
|
105
|
-
animation = "none",
|
|
106
|
-
closable = false,
|
|
107
|
-
onClose,
|
|
108
|
-
closeLabel = "Dismiss alert",
|
|
109
|
-
children,
|
|
110
|
-
ref,
|
|
111
|
-
...rest
|
|
112
|
-
} = props;
|
|
113
|
-
const motionProps = alertAnimationPresets[animation];
|
|
114
|
-
const live = appearance === "error" ? "assertive" : "polite";
|
|
115
|
-
const ctx = react.useMemo(() => size ?? "md", [size]);
|
|
116
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AlertSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
117
|
-
framerMotion.motion.div,
|
|
118
|
-
{
|
|
119
|
-
ref,
|
|
120
|
-
"data-slot": "alert",
|
|
121
|
-
role: "alert",
|
|
122
|
-
"aria-live": live,
|
|
123
|
-
className: chunkWZ2GOU2J_js.cn(
|
|
124
|
-
alertVariants({ appearance, size }),
|
|
125
|
-
closable ? "pr-12" : "",
|
|
126
|
-
className
|
|
127
|
-
),
|
|
128
|
-
initial: animation === "none" ? false : void 0,
|
|
129
|
-
...motionProps,
|
|
130
|
-
...rest,
|
|
131
|
-
children: [
|
|
132
|
-
children,
|
|
133
|
-
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
-
"button",
|
|
135
|
-
{
|
|
136
|
-
type: "button",
|
|
137
|
-
"data-slot": "alert-close",
|
|
138
|
-
"aria-label": closeLabel,
|
|
139
|
-
onClick: onClose,
|
|
140
|
-
className: chunkWZ2GOU2J_js.cn(
|
|
141
|
-
"absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
|
|
142
|
-
triggerClassName
|
|
143
|
-
),
|
|
144
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "size-4", "aria-hidden": true })
|
|
145
|
-
}
|
|
146
|
-
) : null
|
|
147
|
-
]
|
|
148
|
-
}
|
|
149
|
-
) });
|
|
150
|
-
}
|
|
151
11
|
Alert.displayName = "Alert";
|
|
152
|
-
function AlertIcon({ className, children }) {
|
|
153
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
|
-
"span",
|
|
155
|
-
{
|
|
156
|
-
"data-slot": "alert-icon",
|
|
157
|
-
className: chunkWZ2GOU2J_js.cn("mt-0.5 shrink-0 text-current", className),
|
|
158
|
-
children
|
|
159
|
-
}
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
AlertIcon.displayName = "AlertIcon";
|
|
163
|
-
function AlertTitle({ className, children }) {
|
|
164
|
-
const size = useAlertSize();
|
|
165
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
-
"div",
|
|
167
|
-
{
|
|
168
|
-
"data-slot": "alert-title",
|
|
169
|
-
className: chunkWZ2GOU2J_js.cn(alertTitleVariants({ size }), className),
|
|
170
|
-
children
|
|
171
|
-
}
|
|
172
|
-
);
|
|
173
|
-
}
|
|
174
|
-
AlertTitle.displayName = "AlertTitle";
|
|
175
|
-
function AlertDescription({ className, children }) {
|
|
176
|
-
const size = useAlertSize();
|
|
177
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
178
|
-
"div",
|
|
179
|
-
{
|
|
180
|
-
"data-slot": "alert-description",
|
|
181
|
-
className: chunkWZ2GOU2J_js.cn(alertDescriptionVariants({ size }), className),
|
|
182
|
-
children
|
|
183
|
-
}
|
|
184
|
-
);
|
|
185
|
-
}
|
|
186
|
-
AlertDescription.displayName = "AlertDescription";
|
|
187
|
-
function AlertClose({
|
|
188
|
-
className,
|
|
189
|
-
children,
|
|
190
|
-
"aria-label": ariaLabel = "Dismiss alert",
|
|
191
|
-
onClick
|
|
192
|
-
}) {
|
|
193
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
194
|
-
"button",
|
|
195
|
-
{
|
|
196
|
-
type: "button",
|
|
197
|
-
"data-slot": "alert-close",
|
|
198
|
-
"aria-label": ariaLabel,
|
|
199
|
-
onClick,
|
|
200
|
-
className: chunkWZ2GOU2J_js.cn(
|
|
201
|
-
"inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
|
|
202
|
-
className
|
|
203
|
-
),
|
|
204
|
-
children: children ?? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiXMark, { className: "size-4", "aria-hidden": true })
|
|
205
|
-
}
|
|
206
|
-
);
|
|
207
|
-
}
|
|
208
|
-
AlertClose.displayName = "AlertClose";
|
|
209
|
-
function AlertDefaultIcon({
|
|
210
|
-
appearance
|
|
211
|
-
}) {
|
|
212
|
-
if (appearance === "error") {
|
|
213
|
-
return /* @__PURE__ */ jsxRuntime.jsx(hi2.HiExclamationTriangle, { className: "size-5", "aria-hidden": true });
|
|
214
|
-
}
|
|
215
|
-
return /* @__PURE__ */ jsxRuntime.jsx(hi2.HiInformationCircle, { className: "size-5", "aria-hidden": true });
|
|
216
|
-
}
|
|
217
12
|
|
|
13
|
+
Object.defineProperty(exports, "AlertClose", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return chunkP6YRSEOY_js.AlertClose; }
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "AlertDefaultIcon", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return chunkP6YRSEOY_js.AlertDefaultIcon; }
|
|
20
|
+
});
|
|
21
|
+
Object.defineProperty(exports, "AlertDescription", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return chunkP6YRSEOY_js.AlertDescription; }
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "AlertIcon", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return chunkP6YRSEOY_js.AlertIcon; }
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "AlertTitle", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () { return chunkP6YRSEOY_js.AlertTitle; }
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(exports, "alertAnimationPresets", {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: function () { return chunkP6YRSEOY_js.alertAnimationPresets; }
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "alertDescriptionVariants", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () { return chunkP6YRSEOY_js.alertDescriptionVariants; }
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "alertTitleVariants", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () { return chunkP6YRSEOY_js.alertTitleVariants; }
|
|
44
|
+
});
|
|
45
|
+
Object.defineProperty(exports, "alertVariants", {
|
|
46
|
+
enumerable: true,
|
|
47
|
+
get: function () { return chunkP6YRSEOY_js.alertVariants; }
|
|
48
|
+
});
|
|
218
49
|
exports.Alert = Alert;
|
|
219
|
-
exports.AlertClose = AlertClose;
|
|
220
|
-
exports.AlertDefaultIcon = AlertDefaultIcon;
|
|
221
|
-
exports.AlertDescription = AlertDescription;
|
|
222
|
-
exports.AlertIcon = AlertIcon;
|
|
223
|
-
exports.AlertTitle = AlertTitle;
|
|
224
|
-
exports.alertAnimationPresets = alertAnimationPresets;
|
|
225
|
-
exports.alertDescriptionVariants = alertDescriptionVariants;
|
|
226
|
-
exports.alertTitleVariants = alertTitleVariants;
|
|
227
|
-
exports.alertVariants = alertVariants;
|
|
228
50
|
//# sourceMappingURL=alert.js.map
|
|
229
51
|
//# sourceMappingURL=alert.js.map
|
package/dist/ui/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/alert/animations.ts","../../src/ui/alert/variants.ts","../../src/ui/alert/alert.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","jsxs","motion","cn","HiXMark","HiExclamationTriangle","HiInformationCircle"],"mappings":"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","file":"alert.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { AlertAnimation } from \"./types\";\n\ntype AlertPresetMotionProps = Pick<\n HTMLMotionProps<\"div\">,\n \"initial\" | \"animate\" | \"transition\"\n>;\n\nexport type AlertAnimationPresets = Record<\n AlertAnimation,\n AlertPresetMotionProps\n>;\n\nexport const alertAnimationPresets: AlertAnimationPresets = {\n none: {},\n \"slide-down\": {\n initial: { y: -8, opacity: 0 },\n animate: { y: 0, opacity: 1 },\n transition: { type: \"spring\", stiffness: 420, damping: 30 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.2 },\n },\n pop: {\n initial: { scale: 0.96, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { type: \"spring\", stiffness: 520, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const alertVariants = cva(\n \"relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/5 text-slate-50\",\n success: \"border-emerald-500/40 bg-emerald-500/10 text-emerald-50\",\n warning: \"border-amber-500/40 bg-amber-500/10 text-amber-50\",\n error: \"border-rose-500/50 bg-rose-500/10 text-rose-50\",\n info: \"border-sky-500/40 bg-sky-500/10 text-sky-50\",\n ghost: \"border-transparent bg-transparent text-slate-200\",\n purple: \"border-purple-600 bg-purple-950/70 backdrop-blur-xl\",\n pink: \"border-pink-600 bg-pink-950/70 backdrop-blur-xl\",\n orange: \"border-orange-600 bg-orange-950/70 backdrop-blur-xl\",\n yellow: \"border-yellow-600 bg-yellow-950/70 backdrop-blur-xl\",\n teal: \"border-teal-600 bg-teal-950/70 backdrop-blur-xl\",\n indigo: \"border-indigo-600 bg-indigo-950/70 backdrop-blur-xl\",\n gray: \"border-gray-600 bg-gray-950/70 backdrop-blur-xl\",\n violet: \"border-violet-600 bg-violet-950/70 backdrop-blur-xl\",\n \"gradient-blue\":\n \"border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl\",\n \"gradient-green\":\n \"border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl\",\n \"gradient-red\":\n \"border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl\",\n \"gradient-yellow\":\n \"border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl\",\n \"gradient-purple\":\n \"border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl\",\n \"gradient-teal\":\n \"border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl\",\n \"gradient-indigo\":\n \"border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl\",\n \"gradient-pink\":\n \"border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl\",\n \"gradient-orange\":\n \"border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl\",\n },\n size: {\n sm: \"rounded-lg p-3\",\n md: \"rounded-xl p-4\",\n lg: \"rounded-2xl p-5 text-base\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n },\n);\n\nexport const alertTitleVariants = cva(\"font-semibold leading-tight\", {\n variants: {\n size: {\n sm: \"text-xs md:text-sm\",\n md: \"text-xs md:text-sm\",\n lg: \"text-xs md:text-sm\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const alertDescriptionVariants = cva(\"text-slate-300\", {\n variants: {\n size: {\n sm: \"text-xs md:text-sm\",\n md: \"text-xs md:text-sm\",\n lg: \"text-xs md:text-sm\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n HiExclamationTriangle,\n HiInformationCircle,\n HiXMark,\n} from \"react-icons/hi2\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { alertAnimationPresets } from \"./animations\";\nimport type { AlertProps, AlertSectionProps, AlertSize } from \"./types\";\nimport {\n alertDescriptionVariants,\n alertTitleVariants,\n alertVariants,\n} from \"./variants\";\n\nconst AlertSizeContext = createContext<AlertSize>(\"md\");\n\nfunction useAlertSize(): AlertSize {\n const ctx = useContext(AlertSizeContext);\n if (!ctx) {\n throw new Error(\"useAlertSize must be used within an Alert\");\n }\n return ctx;\n}\n\nexport function Alert(props: AlertProps) {\n const {\n className,\n triggerClassName,\n appearance,\n size = \"md\",\n animation = \"none\",\n closable = false,\n onClose,\n closeLabel = \"Dismiss alert\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = alertAnimationPresets[animation];\n const live = appearance === \"error\" ? \"assertive\" : \"polite\";\n\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <AlertSizeContext.Provider value={ctx}>\n <motion.div\n ref={ref}\n data-slot=\"alert\"\n role=\"alert\"\n aria-live={live}\n className={cn(\n alertVariants({ appearance, size }),\n closable ? \"pr-12\" : \"\",\n className,\n )}\n initial={animation === \"none\" ? false : undefined}\n {...motionProps}\n {...rest}\n >\n {children}\n {closable ? (\n <button\n type=\"button\"\n data-slot=\"alert-close\"\n aria-label={closeLabel}\n onClick={onClose}\n className={cn(\n \"absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30\",\n triggerClassName,\n )}\n >\n <HiXMark className=\"size-4\" aria-hidden />\n </button>\n ) : null}\n </motion.div>\n </AlertSizeContext.Provider>\n );\n}\n\nAlert.displayName = \"Alert\";\n\nexport function AlertIcon({ className, children }: AlertSectionProps) {\n return (\n <span\n data-slot=\"alert-icon\"\n className={cn(\"mt-0.5 shrink-0 text-current\", className)}\n >\n {children}\n </span>\n );\n}\n\nAlertIcon.displayName = \"AlertIcon\";\n\nexport function AlertTitle({ className, children }: AlertSectionProps) {\n const size = useAlertSize();\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(alertTitleVariants({ size }), className)}\n >\n {children}\n </div>\n );\n}\n\nAlertTitle.displayName = \"AlertTitle\";\n\nexport function AlertDescription({ className, children }: AlertSectionProps) {\n const size = useAlertSize();\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(alertDescriptionVariants({ size }), className)}\n >\n {children}\n </div>\n );\n}\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport function AlertClose({\n className,\n children,\n \"aria-label\": ariaLabel = \"Dismiss alert\",\n onClick,\n}: AlertSectionProps & { onClick?: () => void; \"aria-label\"?: string }) {\n return (\n <button\n type=\"button\"\n data-slot=\"alert-close\"\n aria-label={ariaLabel}\n onClick={onClick}\n className={cn(\n \"inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30\",\n className,\n )}\n >\n {children ?? <HiXMark className=\"size-4\" aria-hidden />}\n </button>\n );\n}\n\nAlertClose.displayName = \"AlertClose\";\n\nexport function AlertDefaultIcon({\n appearance,\n}: {\n appearance?: AlertProps[\"appearance\"];\n}) {\n if (appearance === \"error\") {\n return <HiExclamationTriangle className=\"size-5\" aria-hidden />;\n }\n return <HiInformationCircle className=\"size-5\" aria-hidden />;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/alert/alert.tsx"],"names":["jsx","AlertBase"],"mappings":";;;;;;AAIO,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,uBAAOA,cAAA,CAACC,0BAAA,EAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/B;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"alert.js","sourcesContent":["// alert.tsx ← users import this by default\nimport { AlertBase } from \"./alert-base\";\nimport type { AlertProps } from \"./types\";\n\nexport const Alert = (props: AlertProps) => {\n return <AlertBase {...props} />;\n}\n\nAlert.displayName = \"Alert\";"]}
|