@zentauri-ui/zentauri-components 1.1.0 → 1.2.0
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-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-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/ui/accordion.js +5 -5
- package/dist/ui/accordion.mjs +1 -1
- package/dist/ui/alert.js +7 -7
- package/dist/ui/alert.mjs +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 +7 -2
- 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
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';
|
package/dist/ui/alert.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 react = require('react');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
7
|
var hi2 = require('react-icons/hi2');
|
|
@@ -120,7 +120,7 @@ function Alert(props) {
|
|
|
120
120
|
"data-slot": "alert",
|
|
121
121
|
role: "alert",
|
|
122
122
|
"aria-live": live,
|
|
123
|
-
className:
|
|
123
|
+
className: chunkUOZYPWDZ_js.cn(
|
|
124
124
|
alertVariants({ appearance, size }),
|
|
125
125
|
closable ? "pr-12" : "",
|
|
126
126
|
className
|
|
@@ -137,7 +137,7 @@ function Alert(props) {
|
|
|
137
137
|
"data-slot": "alert-close",
|
|
138
138
|
"aria-label": closeLabel,
|
|
139
139
|
onClick: onClose,
|
|
140
|
-
className:
|
|
140
|
+
className: chunkUOZYPWDZ_js.cn(
|
|
141
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
142
|
triggerClassName
|
|
143
143
|
),
|
|
@@ -154,7 +154,7 @@ function AlertIcon({ className, children }) {
|
|
|
154
154
|
"span",
|
|
155
155
|
{
|
|
156
156
|
"data-slot": "alert-icon",
|
|
157
|
-
className:
|
|
157
|
+
className: chunkUOZYPWDZ_js.cn("mt-0.5 shrink-0 text-current", className),
|
|
158
158
|
children
|
|
159
159
|
}
|
|
160
160
|
);
|
|
@@ -166,7 +166,7 @@ function AlertTitle({ className, children }) {
|
|
|
166
166
|
"div",
|
|
167
167
|
{
|
|
168
168
|
"data-slot": "alert-title",
|
|
169
|
-
className:
|
|
169
|
+
className: chunkUOZYPWDZ_js.cn(alertTitleVariants({ size }), className),
|
|
170
170
|
children
|
|
171
171
|
}
|
|
172
172
|
);
|
|
@@ -178,7 +178,7 @@ function AlertDescription({ className, children }) {
|
|
|
178
178
|
"div",
|
|
179
179
|
{
|
|
180
180
|
"data-slot": "alert-description",
|
|
181
|
-
className:
|
|
181
|
+
className: chunkUOZYPWDZ_js.cn(alertDescriptionVariants({ size }), className),
|
|
182
182
|
children
|
|
183
183
|
}
|
|
184
184
|
);
|
|
@@ -197,7 +197,7 @@ function AlertClose({
|
|
|
197
197
|
"data-slot": "alert-close",
|
|
198
198
|
"aria-label": ariaLabel,
|
|
199
199
|
onClick,
|
|
200
|
-
className:
|
|
200
|
+
className: chunkUOZYPWDZ_js.cn(
|
|
201
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
202
|
className
|
|
203
203
|
),
|
package/dist/ui/alert.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 { createContext, useMemo, useContext } from 'react';
|
|
4
4
|
import { motion } from 'framer-motion';
|
|
5
5
|
import { HiXMark, HiExclamationTriangle, HiInformationCircle } from 'react-icons/hi2';
|
package/dist/ui/avatar.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 react = require('react');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -92,7 +92,7 @@ function Avatar({
|
|
|
92
92
|
{
|
|
93
93
|
ref,
|
|
94
94
|
"data-slot": "avatar",
|
|
95
|
-
className:
|
|
95
|
+
className: chunkUOZYPWDZ_js.cn(avatarVariants({ size, appearance }), className),
|
|
96
96
|
...motionProps,
|
|
97
97
|
...rest,
|
|
98
98
|
children
|
|
@@ -113,7 +113,7 @@ function AvatarImage({
|
|
|
113
113
|
{
|
|
114
114
|
ref,
|
|
115
115
|
"data-slot": "avatar-image",
|
|
116
|
-
className:
|
|
116
|
+
className: chunkUOZYPWDZ_js.cn(avatarImageVariants(), className),
|
|
117
117
|
onLoad: (e) => {
|
|
118
118
|
setImageStatus("loaded");
|
|
119
119
|
onLoad?.(e);
|
|
@@ -159,7 +159,7 @@ function AvatarFallback({
|
|
|
159
159
|
{
|
|
160
160
|
ref,
|
|
161
161
|
"data-slot": "avatar-fallback",
|
|
162
|
-
className:
|
|
162
|
+
className: chunkUOZYPWDZ_js.cn(avatarFallbackVariants(), className),
|
|
163
163
|
...rest
|
|
164
164
|
}
|
|
165
165
|
);
|
|
@@ -183,7 +183,7 @@ function AvatarGroup({
|
|
|
183
183
|
{
|
|
184
184
|
ref,
|
|
185
185
|
"data-slot": "avatar-group",
|
|
186
|
-
className:
|
|
186
|
+
className: chunkUOZYPWDZ_js.cn(avatarGroupVariants(), className),
|
|
187
187
|
...rest,
|
|
188
188
|
children: [
|
|
189
189
|
visible,
|
|
@@ -191,7 +191,7 @@ function AvatarGroup({
|
|
|
191
191
|
"span",
|
|
192
192
|
{
|
|
193
193
|
"data-slot": "avatar-group-overflow",
|
|
194
|
-
className:
|
|
194
|
+
className: chunkUOZYPWDZ_js.cn(
|
|
195
195
|
avatarVariants({ size: "md" }),
|
|
196
196
|
"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white"
|
|
197
197
|
),
|
package/dist/ui/avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/avatar/animations.ts","../../src/ui/avatar/variants.ts","../../src/ui/avatar/avatar.tsx"],"names":["cva","createContext","useContext","useState","useMemo","jsx","motion","cn","useEffect","Children","isValidElement","jsxs"],"mappings":"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","file":"avatar.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type AvatarAnimation = \"none\" | \"subtle\";\n\nexport type AvatarAnimationPresets = Record<\n AvatarAnimation,\n Pick<\n HTMLMotionProps<\"span\">,\n \"whileHover\" | \"whileTap\" | \"transition\" | \"initial\"\n >\n>;\n\nexport const avatarAnimationPresets: AvatarAnimationPresets = {\n none: { initial: false },\n subtle: {\n initial: false,\n whileHover: { scale: 1.03 },\n whileTap: { scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const avatarVariants = cva(\n \"relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/10 text-slate-200\",\n muted: \"border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200\",\n sky: \"border-sky-600 bg-sky-600/[0.03] text-slate-200\",\n rose: \"border-rose-600 bg-rose-600/[0.03] text-slate-200\",\n purple: \"border-purple-600 bg-purple-600/[0.03] text-slate-200\",\n pink: \"border-pink-600 bg-pink-600/[0.03] text-slate-200\",\n orange: \"border-orange-600 bg-orange-600/[0.03] text-slate-200\",\n yellow: \"border-yellow-600 bg-yellow-600/[0.03] text-slate-200\",\n teal: \"border-teal-600 bg-teal-600/[0.03] text-slate-200\",\n indigo: \"border-indigo-600 bg-indigo-600/[0.03] text-slate-200\",\n emerald: \"border-emerald-600 bg-emerald-600/[0.03] text-slate-200\",\n gray: \"border-gray-600 bg-gray-600/[0.03] text-slate-200\",\n amber: \"border-amber-600 bg-amber-600/[0.03] text-slate-200\",\n violet: \"border-violet-600 bg-violet-600/[0.03] text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-10 text-sm\",\n lg: \"size-12 text-base\",\n xl: \"size-16 text-lg\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const avatarImageVariants = cva(\"aspect-square size-full object-cover\");\n\nexport const avatarFallbackVariants = cva(\n \"flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100\",\n);\n\nexport const avatarGroupVariants = cva(\"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0\");\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { avatarAnimationPresets } from \"./animations\";\nimport type {\n AvatarFallbackProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\nimport {\n avatarFallbackVariants,\n avatarGroupVariants,\n avatarImageVariants,\n avatarVariants,\n} from \"./variants\";\n\ntype ImageStatus = \"idle\" | \"loaded\" | \"error\";\n\ntype AvatarCtx = {\n imageStatus: ImageStatus;\n setImageStatus: (v: ImageStatus) => void;\n};\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n const ctx = useContext(AvatarContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Avatar>`);\n }\n return ctx;\n}\n\nexport function Avatar({\n className,\n size,\n appearance,\n animation = \"none\",\n children,\n ref,\n ...rest\n}: AvatarProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n const motionProps = avatarAnimationPresets[animation];\n const ctx = useMemo(\n () => ({ imageStatus, setImageStatus }),\n [imageStatus],\n );\n\n return (\n <AvatarContext.Provider value={ctx}>\n <motion.span\n ref={ref}\n data-slot=\"avatar\"\n className={cn(avatarVariants({ size, appearance }), className)}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.span>\n </AvatarContext.Provider>\n );\n}\n\nAvatar.displayName = \"Avatar\";\n\nexport function AvatarImage({\n className,\n onLoad,\n onError,\n ref,\n ...rest\n}: AvatarImageProps & { ref?: React.Ref<HTMLImageElement> }) {\n const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n return (\n <img\n ref={ref}\n data-slot=\"avatar-image\"\n className={cn(avatarImageVariants(), className)}\n onLoad={(e) => {\n setImageStatus(\"loaded\");\n onLoad?.(e);\n }}\n onError={(e) => {\n setImageStatus(\"error\");\n onError?.(e);\n }}\n {...rest}\n />\n );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n className,\n delayMs = 0,\n ref,\n ...rest\n}: AvatarFallbackProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n const [show, setShow] = useState(delayMs === 0);\n\n useEffect(() => {\n if (imageStatus === \"loaded\") {\n setShow(false);\n return;\n }\n if (imageStatus === \"error\") {\n setShow(true);\n return;\n }\n if (delayMs <= 0) {\n setShow(true);\n return;\n }\n const t = window.setTimeout(() => setShow(true), delayMs);\n return () => window.clearTimeout(t);\n }, [delayMs, imageStatus]);\n\n if (!show) {\n return null;\n }\n\n return (\n <span\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(avatarFallbackVariants(), className)}\n {...rest}\n />\n );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n className,\n max,\n children,\n ref,\n ...rest\n}: AvatarGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n const childArray = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n const overflow =\n max !== undefined && childArray.length > max\n ? childArray.length - max\n : 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn(avatarGroupVariants(), className)}\n {...rest}\n >\n {visible}\n {overflow > 0 ? (\n <span\n data-slot=\"avatar-group-overflow\"\n className={cn(\n avatarVariants({ size: \"md\" }),\n \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n )}\n aria-label={`${overflow} more`}\n >\n +{overflow}\n </span>\n ) : null}\n </div>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/avatar/animations.ts","../../src/ui/avatar/variants.ts","../../src/ui/avatar/avatar.tsx"],"names":["cva","createContext","useContext","useState","useMemo","jsx","motion","cn","useEffect","Children","isValidElement","jsxs"],"mappings":"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","file":"avatar.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type AvatarAnimation = \"none\" | \"subtle\";\n\nexport type AvatarAnimationPresets = Record<\n AvatarAnimation,\n Pick<\n HTMLMotionProps<\"span\">,\n \"whileHover\" | \"whileTap\" | \"transition\" | \"initial\"\n >\n>;\n\nexport const avatarAnimationPresets: AvatarAnimationPresets = {\n none: { initial: false },\n subtle: {\n initial: false,\n whileHover: { scale: 1.03 },\n whileTap: { scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const avatarVariants = cva(\n \"relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/10 text-slate-200\",\n muted: \"border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200\",\n sky: \"border-sky-600 bg-sky-600/[0.03] text-slate-200\",\n rose: \"border-rose-600 bg-rose-600/[0.03] text-slate-200\",\n purple: \"border-purple-600 bg-purple-600/[0.03] text-slate-200\",\n pink: \"border-pink-600 bg-pink-600/[0.03] text-slate-200\",\n orange: \"border-orange-600 bg-orange-600/[0.03] text-slate-200\",\n yellow: \"border-yellow-600 bg-yellow-600/[0.03] text-slate-200\",\n teal: \"border-teal-600 bg-teal-600/[0.03] text-slate-200\",\n indigo: \"border-indigo-600 bg-indigo-600/[0.03] text-slate-200\",\n emerald: \"border-emerald-600 bg-emerald-600/[0.03] text-slate-200\",\n gray: \"border-gray-600 bg-gray-600/[0.03] text-slate-200\",\n amber: \"border-amber-600 bg-amber-600/[0.03] text-slate-200\",\n violet: \"border-violet-600 bg-violet-600/[0.03] text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-10 text-sm\",\n lg: \"size-12 text-base\",\n xl: \"size-16 text-lg\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const avatarImageVariants = cva(\"aspect-square size-full object-cover\");\n\nexport const avatarFallbackVariants = cva(\n \"flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100\",\n);\n\nexport const avatarGroupVariants = cva(\"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0\");\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { avatarAnimationPresets } from \"./animations\";\nimport type {\n AvatarFallbackProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n AvatarCtx,\n ImageStatus,\n} from \"./types\";\nimport {\n avatarFallbackVariants,\n avatarGroupVariants,\n avatarImageVariants,\n avatarVariants,\n} from \"./variants\";\n\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n const ctx = useContext(AvatarContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Avatar>`);\n }\n return ctx;\n}\n\nexport function Avatar({\n className,\n size,\n appearance,\n animation = \"none\",\n children,\n ref,\n ...rest\n}: AvatarProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n const motionProps = avatarAnimationPresets[animation];\n const ctx = useMemo(\n () => ({ imageStatus, setImageStatus }),\n [imageStatus],\n );\n\n return (\n <AvatarContext.Provider value={ctx}>\n <motion.span\n ref={ref}\n data-slot=\"avatar\"\n className={cn(avatarVariants({ size, appearance }), className)}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.span>\n </AvatarContext.Provider>\n );\n}\n\nAvatar.displayName = \"Avatar\";\n\nexport function AvatarImage({\n className,\n onLoad,\n onError,\n ref,\n ...rest\n}: AvatarImageProps & { ref?: React.Ref<HTMLImageElement> }) {\n const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n return (\n <img\n ref={ref}\n data-slot=\"avatar-image\"\n className={cn(avatarImageVariants(), className)}\n onLoad={(e) => {\n setImageStatus(\"loaded\");\n onLoad?.(e);\n }}\n onError={(e) => {\n setImageStatus(\"error\");\n onError?.(e);\n }}\n {...rest}\n />\n );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n className,\n delayMs = 0,\n ref,\n ...rest\n}: AvatarFallbackProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n const [show, setShow] = useState(delayMs === 0);\n\n useEffect(() => {\n if (imageStatus === \"loaded\") {\n setShow(false);\n return;\n }\n if (imageStatus === \"error\") {\n setShow(true);\n return;\n }\n if (delayMs <= 0) {\n setShow(true);\n return;\n }\n const t = window.setTimeout(() => setShow(true), delayMs);\n return () => window.clearTimeout(t);\n }, [delayMs, imageStatus]);\n\n if (!show) {\n return null;\n }\n\n return (\n <span\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(avatarFallbackVariants(), className)}\n {...rest}\n />\n );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n className,\n max,\n children,\n ref,\n ...rest\n}: AvatarGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n const childArray = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n const overflow =\n max !== undefined && childArray.length > max\n ? childArray.length - max\n : 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn(avatarGroupVariants(), className)}\n {...rest}\n >\n {visible}\n {overflow > 0 ? (\n <span\n data-slot=\"avatar-group-overflow\"\n className={cn(\n avatarVariants({ size: \"md\" }),\n \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n )}\n aria-label={`${overflow} more`}\n >\n +{overflow}\n </span>\n ) : null}\n </div>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}
|
package/dist/ui/avatar.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 { createContext, useState, useMemo, useEffect, Children, isValidElement, useContext } from 'react';
|
|
4
4
|
import { motion } from 'framer-motion';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
package/dist/ui/avatar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/avatar/animations.ts","../../src/ui/avatar/variants.ts","../../src/ui/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type AvatarAnimation = \"none\" | \"subtle\";\n\nexport type AvatarAnimationPresets = Record<\n AvatarAnimation,\n Pick<\n HTMLMotionProps<\"span\">,\n \"whileHover\" | \"whileTap\" | \"transition\" | \"initial\"\n >\n>;\n\nexport const avatarAnimationPresets: AvatarAnimationPresets = {\n none: { initial: false },\n subtle: {\n initial: false,\n whileHover: { scale: 1.03 },\n whileTap: { scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const avatarVariants = cva(\n \"relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/10 text-slate-200\",\n muted: \"border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200\",\n sky: \"border-sky-600 bg-sky-600/[0.03] text-slate-200\",\n rose: \"border-rose-600 bg-rose-600/[0.03] text-slate-200\",\n purple: \"border-purple-600 bg-purple-600/[0.03] text-slate-200\",\n pink: \"border-pink-600 bg-pink-600/[0.03] text-slate-200\",\n orange: \"border-orange-600 bg-orange-600/[0.03] text-slate-200\",\n yellow: \"border-yellow-600 bg-yellow-600/[0.03] text-slate-200\",\n teal: \"border-teal-600 bg-teal-600/[0.03] text-slate-200\",\n indigo: \"border-indigo-600 bg-indigo-600/[0.03] text-slate-200\",\n emerald: \"border-emerald-600 bg-emerald-600/[0.03] text-slate-200\",\n gray: \"border-gray-600 bg-gray-600/[0.03] text-slate-200\",\n amber: \"border-amber-600 bg-amber-600/[0.03] text-slate-200\",\n violet: \"border-violet-600 bg-violet-600/[0.03] text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-10 text-sm\",\n lg: \"size-12 text-base\",\n xl: \"size-16 text-lg\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const avatarImageVariants = cva(\"aspect-square size-full object-cover\");\n\nexport const avatarFallbackVariants = cva(\n \"flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100\",\n);\n\nexport const avatarGroupVariants = cva(\"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0\");\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { avatarAnimationPresets } from \"./animations\";\nimport type {\n AvatarFallbackProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n} from \"./types\";\nimport {\n avatarFallbackVariants,\n avatarGroupVariants,\n avatarImageVariants,\n avatarVariants,\n} from \"./variants\";\n\ntype ImageStatus = \"idle\" | \"loaded\" | \"error\";\n\ntype AvatarCtx = {\n imageStatus: ImageStatus;\n setImageStatus: (v: ImageStatus) => void;\n};\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n const ctx = useContext(AvatarContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Avatar>`);\n }\n return ctx;\n}\n\nexport function Avatar({\n className,\n size,\n appearance,\n animation = \"none\",\n children,\n ref,\n ...rest\n}: AvatarProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n const motionProps = avatarAnimationPresets[animation];\n const ctx = useMemo(\n () => ({ imageStatus, setImageStatus }),\n [imageStatus],\n );\n\n return (\n <AvatarContext.Provider value={ctx}>\n <motion.span\n ref={ref}\n data-slot=\"avatar\"\n className={cn(avatarVariants({ size, appearance }), className)}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.span>\n </AvatarContext.Provider>\n );\n}\n\nAvatar.displayName = \"Avatar\";\n\nexport function AvatarImage({\n className,\n onLoad,\n onError,\n ref,\n ...rest\n}: AvatarImageProps & { ref?: React.Ref<HTMLImageElement> }) {\n const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n return (\n <img\n ref={ref}\n data-slot=\"avatar-image\"\n className={cn(avatarImageVariants(), className)}\n onLoad={(e) => {\n setImageStatus(\"loaded\");\n onLoad?.(e);\n }}\n onError={(e) => {\n setImageStatus(\"error\");\n onError?.(e);\n }}\n {...rest}\n />\n );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n className,\n delayMs = 0,\n ref,\n ...rest\n}: AvatarFallbackProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n const [show, setShow] = useState(delayMs === 0);\n\n useEffect(() => {\n if (imageStatus === \"loaded\") {\n setShow(false);\n return;\n }\n if (imageStatus === \"error\") {\n setShow(true);\n return;\n }\n if (delayMs <= 0) {\n setShow(true);\n return;\n }\n const t = window.setTimeout(() => setShow(true), delayMs);\n return () => window.clearTimeout(t);\n }, [delayMs, imageStatus]);\n\n if (!show) {\n return null;\n }\n\n return (\n <span\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(avatarFallbackVariants(), className)}\n {...rest}\n />\n );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n className,\n max,\n children,\n ref,\n ...rest\n}: AvatarGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n const childArray = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n const overflow =\n max !== undefined && childArray.length > max\n ? childArray.length - max\n : 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn(avatarGroupVariants(), className)}\n {...rest}\n >\n {visible}\n {overflow > 0 ? (\n <span\n data-slot=\"avatar-group-overflow\"\n className={cn(\n avatarVariants({ size: \"md\" }),\n \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n )}\n aria-label={`${overflow} more`}\n >\n +{overflow}\n </span>\n ) : null}\n </div>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/avatar/animations.ts","../../src/ui/avatar/variants.ts","../../src/ui/avatar/avatar.tsx"],"names":[],"mappings":"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","file":"avatar.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type AvatarAnimation = \"none\" | \"subtle\";\n\nexport type AvatarAnimationPresets = Record<\n AvatarAnimation,\n Pick<\n HTMLMotionProps<\"span\">,\n \"whileHover\" | \"whileTap\" | \"transition\" | \"initial\"\n >\n>;\n\nexport const avatarAnimationPresets: AvatarAnimationPresets = {\n none: { initial: false },\n subtle: {\n initial: false,\n whileHover: { scale: 1.03 },\n whileTap: { scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const avatarVariants = cva(\n \"relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200\",\n {\n variants: {\n appearance: {\n default: \"border-white/10 bg-white/10 text-slate-200\",\n muted: \"border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200\",\n sky: \"border-sky-600 bg-sky-600/[0.03] text-slate-200\",\n rose: \"border-rose-600 bg-rose-600/[0.03] text-slate-200\",\n purple: \"border-purple-600 bg-purple-600/[0.03] text-slate-200\",\n pink: \"border-pink-600 bg-pink-600/[0.03] text-slate-200\",\n orange: \"border-orange-600 bg-orange-600/[0.03] text-slate-200\",\n yellow: \"border-yellow-600 bg-yellow-600/[0.03] text-slate-200\",\n teal: \"border-teal-600 bg-teal-600/[0.03] text-slate-200\",\n indigo: \"border-indigo-600 bg-indigo-600/[0.03] text-slate-200\",\n emerald: \"border-emerald-600 bg-emerald-600/[0.03] text-slate-200\",\n gray: \"border-gray-600 bg-gray-600/[0.03] text-slate-200\",\n amber: \"border-amber-600 bg-amber-600/[0.03] text-slate-200\",\n violet: \"border-violet-600 bg-violet-600/[0.03] text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n \"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 text-slate-200\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-10 text-sm\",\n lg: \"size-12 text-base\",\n xl: \"size-16 text-lg\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const avatarImageVariants = cva(\"aspect-square size-full object-cover\");\n\nexport const avatarFallbackVariants = cva(\n \"flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100\",\n);\n\nexport const avatarGroupVariants = cva(\"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0\");\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { avatarAnimationPresets } from \"./animations\";\nimport type {\n AvatarFallbackProps,\n AvatarGroupProps,\n AvatarImageProps,\n AvatarProps,\n AvatarCtx,\n ImageStatus,\n} from \"./types\";\nimport {\n avatarFallbackVariants,\n avatarGroupVariants,\n avatarImageVariants,\n avatarVariants,\n} from \"./variants\";\n\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n const ctx = useContext(AvatarContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Avatar>`);\n }\n return ctx;\n}\n\nexport function Avatar({\n className,\n size,\n appearance,\n animation = \"none\",\n children,\n ref,\n ...rest\n}: AvatarProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n const motionProps = avatarAnimationPresets[animation];\n const ctx = useMemo(\n () => ({ imageStatus, setImageStatus }),\n [imageStatus],\n );\n\n return (\n <AvatarContext.Provider value={ctx}>\n <motion.span\n ref={ref}\n data-slot=\"avatar\"\n className={cn(avatarVariants({ size, appearance }), className)}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.span>\n </AvatarContext.Provider>\n );\n}\n\nAvatar.displayName = \"Avatar\";\n\nexport function AvatarImage({\n className,\n onLoad,\n onError,\n ref,\n ...rest\n}: AvatarImageProps & { ref?: React.Ref<HTMLImageElement> }) {\n const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n return (\n <img\n ref={ref}\n data-slot=\"avatar-image\"\n className={cn(avatarImageVariants(), className)}\n onLoad={(e) => {\n setImageStatus(\"loaded\");\n onLoad?.(e);\n }}\n onError={(e) => {\n setImageStatus(\"error\");\n onError?.(e);\n }}\n {...rest}\n />\n );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n className,\n delayMs = 0,\n ref,\n ...rest\n}: AvatarFallbackProps & { ref?: React.Ref<HTMLSpanElement> }) {\n const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n const [show, setShow] = useState(delayMs === 0);\n\n useEffect(() => {\n if (imageStatus === \"loaded\") {\n setShow(false);\n return;\n }\n if (imageStatus === \"error\") {\n setShow(true);\n return;\n }\n if (delayMs <= 0) {\n setShow(true);\n return;\n }\n const t = window.setTimeout(() => setShow(true), delayMs);\n return () => window.clearTimeout(t);\n }, [delayMs, imageStatus]);\n\n if (!show) {\n return null;\n }\n\n return (\n <span\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(avatarFallbackVariants(), className)}\n {...rest}\n />\n );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n className,\n max,\n children,\n ref,\n ...rest\n}: AvatarGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n const childArray = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n const overflow =\n max !== undefined && childArray.length > max\n ? childArray.length - max\n : 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn(avatarGroupVariants(), className)}\n {...rest}\n >\n {visible}\n {overflow > 0 ? (\n <span\n data-slot=\"avatar-group-overflow\"\n className={cn(\n avatarVariants({ size: \"md\" }),\n \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n )}\n aria-label={`${overflow} more`}\n >\n +{overflow}\n </span>\n ) : null}\n </div>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}
|
package/dist/ui/badge.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 hi2 = require('react-icons/hi2');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -123,7 +123,7 @@ function Badge(props) {
|
|
|
123
123
|
role: "status",
|
|
124
124
|
"data-slot": "badge",
|
|
125
125
|
"aria-label": resolvedAriaLabel,
|
|
126
|
-
className:
|
|
126
|
+
className: chunkUOZYPWDZ_js.cn(badgeVariants({ appearance, size, shape }), className),
|
|
127
127
|
initial: animation === "none" ? false : void 0,
|
|
128
128
|
...motionProps,
|
|
129
129
|
...rest,
|
package/dist/ui/badge.mjs
CHANGED
package/dist/ui/breadcrumb.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 classVarianceAuthority = require('class-variance-authority');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
|
|
@@ -63,7 +63,7 @@ function Breadcrumb({
|
|
|
63
63
|
ref,
|
|
64
64
|
"data-slot": "breadcrumb",
|
|
65
65
|
"aria-label": ariaLabel,
|
|
66
|
-
className:
|
|
66
|
+
className: chunkUOZYPWDZ_js.cn(className),
|
|
67
67
|
...rest
|
|
68
68
|
}
|
|
69
69
|
);
|
|
@@ -79,7 +79,7 @@ function BreadcrumbList({
|
|
|
79
79
|
{
|
|
80
80
|
ref,
|
|
81
81
|
"data-slot": "breadcrumb-list",
|
|
82
|
-
className:
|
|
82
|
+
className: chunkUOZYPWDZ_js.cn(breadcrumbListVariants(), className),
|
|
83
83
|
...rest
|
|
84
84
|
}
|
|
85
85
|
);
|
|
@@ -95,7 +95,7 @@ function BreadcrumbItem({
|
|
|
95
95
|
{
|
|
96
96
|
ref,
|
|
97
97
|
"data-slot": "breadcrumb-item",
|
|
98
|
-
className:
|
|
98
|
+
className: chunkUOZYPWDZ_js.cn(breadcrumbItemVariants(), className),
|
|
99
99
|
...rest
|
|
100
100
|
}
|
|
101
101
|
);
|
|
@@ -112,7 +112,7 @@ function BreadcrumbLink({
|
|
|
112
112
|
{
|
|
113
113
|
ref,
|
|
114
114
|
"data-slot": "breadcrumb-link",
|
|
115
|
-
className:
|
|
115
|
+
className: chunkUOZYPWDZ_js.cn(breadcrumbLinkVariants(), breadcrumbNavVariants({ appearance }), className),
|
|
116
116
|
...rest
|
|
117
117
|
}
|
|
118
118
|
);
|
|
@@ -130,7 +130,7 @@ function BreadcrumbPage({
|
|
|
130
130
|
ref,
|
|
131
131
|
"data-slot": "breadcrumb-page",
|
|
132
132
|
"aria-current": "page",
|
|
133
|
-
className:
|
|
133
|
+
className: chunkUOZYPWDZ_js.cn(breadcrumbPageVariants(), breadcrumbNavVariants({ appearance }), className),
|
|
134
134
|
...rest
|
|
135
135
|
}
|
|
136
136
|
);
|
|
@@ -150,7 +150,7 @@ function BreadcrumbSeparator({
|
|
|
150
150
|
"data-slot": "breadcrumb-separator",
|
|
151
151
|
"aria-hidden": true,
|
|
152
152
|
role: "presentation",
|
|
153
|
-
className:
|
|
153
|
+
className: chunkUOZYPWDZ_js.cn(breadcrumbSeparatorVariants({ size }), className),
|
|
154
154
|
...rest,
|
|
155
155
|
children
|
|
156
156
|
}
|
package/dist/ui/breadcrumb.mjs
CHANGED
package/dist/ui/buttons.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var chunkBITDSQMR_js = require('../chunk-BITDSQMR.js');
|
|
5
|
-
var
|
|
5
|
+
var chunkUOZYPWDZ_js = require('../chunk-UOZYPWDZ.js');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
@@ -60,7 +60,7 @@ var Button = (props) => {
|
|
|
60
60
|
target,
|
|
61
61
|
rel: target === "_blank" ? "noopener noreferrer" : void 0,
|
|
62
62
|
"data-slot": "button",
|
|
63
|
-
className:
|
|
63
|
+
className: chunkUOZYPWDZ_js.cn(chunkBITDSQMR_js.buttonVariants({ appearance: appearance2, size: size2 }), className2),
|
|
64
64
|
initial: false,
|
|
65
65
|
...motionProps2,
|
|
66
66
|
...rest2,
|
|
@@ -85,7 +85,7 @@ var Button = (props) => {
|
|
|
85
85
|
ref,
|
|
86
86
|
type,
|
|
87
87
|
"data-slot": "button",
|
|
88
|
-
className:
|
|
88
|
+
className: chunkUOZYPWDZ_js.cn(chunkBITDSQMR_js.buttonVariants({ appearance, size }), className),
|
|
89
89
|
initial: false,
|
|
90
90
|
...motionProps,
|
|
91
91
|
...rest,
|
package/dist/ui/buttons.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { buttonVariants } from '../chunk-BORK3BJO.mjs';
|
|
3
3
|
export { buttonVariants } from '../chunk-BORK3BJO.mjs';
|
|
4
|
-
import { cn } from '../chunk-
|
|
4
|
+
import { cn } from '../chunk-DFEZH7TC.mjs';
|
|
5
5
|
import { motion } from 'framer-motion';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
package/dist/ui/card.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 react = require('react');
|
|
6
6
|
var framerMotion = require('framer-motion');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -154,7 +154,7 @@ function Card(props) {
|
|
|
154
154
|
{
|
|
155
155
|
ref,
|
|
156
156
|
"data-slot": "card",
|
|
157
|
-
className:
|
|
157
|
+
className: chunkUOZYPWDZ_js.cn(cardVariants({ appearance, size, rounded }), className),
|
|
158
158
|
initial: false,
|
|
159
159
|
...motionProps,
|
|
160
160
|
...rest,
|
|
@@ -169,7 +169,7 @@ function CardHeader({ className, children }) {
|
|
|
169
169
|
"header",
|
|
170
170
|
{
|
|
171
171
|
"data-slot": "card-header",
|
|
172
|
-
className:
|
|
172
|
+
className: chunkUOZYPWDZ_js.cn(cardHeaderVariants({ size }), className),
|
|
173
173
|
children
|
|
174
174
|
}
|
|
175
175
|
);
|
|
@@ -180,7 +180,7 @@ function CardBody({ className, children }) {
|
|
|
180
180
|
"div",
|
|
181
181
|
{
|
|
182
182
|
"data-slot": "card-body",
|
|
183
|
-
className:
|
|
183
|
+
className: chunkUOZYPWDZ_js.cn("flex flex-1 flex-col gap-2", className),
|
|
184
184
|
children
|
|
185
185
|
}
|
|
186
186
|
);
|
|
@@ -192,7 +192,7 @@ function CardFooter({ className, children }) {
|
|
|
192
192
|
"footer",
|
|
193
193
|
{
|
|
194
194
|
"data-slot": "card-footer",
|
|
195
|
-
className:
|
|
195
|
+
className: chunkUOZYPWDZ_js.cn(cardFooterVariants({ size }), className),
|
|
196
196
|
children
|
|
197
197
|
}
|
|
198
198
|
);
|
|
@@ -212,7 +212,7 @@ function CardTitle({
|
|
|
212
212
|
{
|
|
213
213
|
ref,
|
|
214
214
|
"data-slot": "card-title",
|
|
215
|
-
className:
|
|
215
|
+
className: chunkUOZYPWDZ_js.cn(cardTitleVariants({ size }), className),
|
|
216
216
|
...rest,
|
|
217
217
|
children
|
|
218
218
|
}
|
|
@@ -233,7 +233,7 @@ function CardDescription({
|
|
|
233
233
|
{
|
|
234
234
|
ref,
|
|
235
235
|
"data-slot": "card-description",
|
|
236
|
-
className:
|
|
236
|
+
className: chunkUOZYPWDZ_js.cn(cardDescriptionVariants({ size }), className),
|
|
237
237
|
...rest,
|
|
238
238
|
children
|
|
239
239
|
}
|
package/dist/ui/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/card/animations.ts","../../src/ui/card/variants.ts","../../src/ui/card/card.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","motion","cn"],"mappings":"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","file":"card.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { CardAnimation } from \"./types\";\n\ntype CardPresetMotionProps = Pick<\n HTMLMotionProps<\"article\">,\n \"style\" | \"transition\" | \"whileHover\" | \"whileTap\"\n>;\n\nexport type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;\n\nexport const cardAnimationPresets: CardAnimationPresets = {\n none: {},\n lift: {\n whileHover: { y: -4, scale: 1.01 },\n whileTap: { y: 0, scale: 0.995 },\n transition: { type: \"spring\", stiffness: 380, damping: 26 },\n },\n glow: {\n whileHover: {\n boxShadow:\n \"0 0 0 1px rgba(255,255,255,0.18), 0 22px 48px rgba(15,23,42,0.45)\",\n },\n transition: { duration: 0.22, ease: \"easeOut\" },\n },\n tilt: {\n whileHover: { rotateX: 4, rotateY: -4, scale: 1.01 },\n whileTap: { rotateX: 0, rotateY: 0, scale: 0.99 },\n transition: { type: \"spring\", stiffness: 280, damping: 22 },\n style: { transformStyle: \"preserve-3d\" },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const cardVariants = cva(\n [\n \"relative flex w-full flex-col overflow-hidden text-slate-50\",\n \"ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n glass:\n \"border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n outline: \"border border-white/15 bg-transparent\",\n ghost: \"border border-transparent bg-transparent\",\n elevated:\n \"border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]\",\n sky: \"border border-sky-600 bg-sky-950/70 backdrop-blur-xl\",\n rose: \"border border-rose-600 bg-rose-950/70 backdrop-blur-xl\",\n purple: \"border border-purple-600 bg-purple-950/70 backdrop-blur-xl\",\n pink: \"border border-pink-600 bg-pink-950/70 backdrop-blur-xl\",\n orange: \"border border-orange-600 bg-orange-950/70 backdrop-blur-xl\",\n yellow: \"border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl\",\n teal: \"border border-teal-600 bg-teal-950/70 backdrop-blur-xl\",\n indigo: \"border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl\",\n emerald: \"border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl\",\n gray: \"border border-gray-600 bg-gray-950/70 backdrop-blur-xl\",\n amber: \"border border-amber-600 bg-amber-950/70 backdrop-blur-xl\",\n violet: \"border border-violet-600 bg-violet-950/70 backdrop-blur-xl\",\n \"gradient-blue\":\n \"border 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 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 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 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 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 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 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 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 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: \"gap-2 p-3 text-sm\",\n md: \"gap-3 p-4 text-sm\",\n lg: \"gap-4 p-6 text-base\",\n },\n rounded: {\n sm: \"rounded-lg\",\n md: \"rounded-xl\",\n lg: \"rounded-2xl\",\n full: \"rounded-3xl\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n rounded: \"md\",\n },\n },\n);\n\nexport const cardHeaderVariants = cva(\n \"flex flex-col gap-1 border-b border-white/10 pb-3\",\n {\n variants: {\n size: {\n sm: \"pb-2\",\n md: \"pb-3\",\n lg: \"pb-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardFooterVariants = cva(\n \"flex flex-col gap-2 border-t border-white/10 pt-3\",\n {\n variants: {\n size: {\n sm: \"pt-2\",\n md: \"pt-3\",\n lg: \"pt-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardTitleVariants = cva(\n \"font-semibold tracking-tight text-slate-50\",\n {\n variants: {\n size: {\n sm: \"text-sm\",\n md: \"text-base\",\n lg: \"text-lg\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardDescriptionVariants = cva(\"text-slate-400\", {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { cardAnimationPresets } from \"./animations\";\nimport type {\n CardDescriptionProps,\n CardProps,\n CardSectionProps,\n CardTitleProps,\n} from \"./types\";\nimport {\n cardDescriptionVariants,\n cardFooterVariants,\n cardHeaderVariants,\n cardTitleVariants,\n cardVariants,\n} from \"./variants\";\n\ntype CardSize = NonNullable<CardProps[\"size\"]>;\n\nconst CardSizeContext = createContext<CardSize>(\"md\");\n\nfunction useCardSize(): CardSize {\n return useContext(CardSizeContext);\n}\n\nexport function Card(props: CardProps) {\n const {\n className,\n appearance,\n size = \"md\",\n rounded,\n animation = \"none\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = cardAnimationPresets[animation];\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <CardSizeContext.Provider value={ctx}>\n <motion.article\n ref={ref}\n data-slot=\"card\"\n className={cn(cardVariants({ appearance, size, rounded }), className)}\n initial={false}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.article>\n </CardSizeContext.Provider>\n );\n}\n\nCard.displayName = \"Card\";\n\nexport function CardHeader({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <header\n data-slot=\"card-header\"\n className={cn(cardHeaderVariants({ size }), className)}\n >\n {children}\n </header>\n );\n}\n\nCardHeader.displayName = \"CardHeader\";\n\nexport function CardBody({ className, children }: CardSectionProps) {\n return (\n <div\n data-slot=\"card-body\"\n className={cn(\"flex flex-1 flex-col gap-2\", className)}\n >\n {children}\n </div>\n );\n}\n\nCardBody.displayName = \"CardBody\";\n\nexport function CardFooter({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <footer\n data-slot=\"card-footer\"\n className={cn(cardFooterVariants({ size }), className)}\n >\n {children}\n </footer>\n );\n}\n\nCardFooter.displayName = \"CardFooter\";\n\nexport function CardTitle({\n className,\n children,\n as = \"h3\",\n ref,\n ...rest\n}: CardTitleProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-title\"\n className={cn(cardTitleVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardTitle.displayName = \"CardTitle\";\n\nexport function CardDescription({\n className,\n children,\n as = \"p\",\n ref,\n ...rest\n}: CardDescriptionProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-description\"\n className={cn(cardDescriptionVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardDescription.displayName = \"CardDescription\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/card/animations.ts","../../src/ui/card/variants.ts","../../src/ui/card/card.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","motion","cn"],"mappings":"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","file":"card.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { CardAnimation } from \"./types\";\n\ntype CardPresetMotionProps = Pick<\n HTMLMotionProps<\"article\">,\n \"style\" | \"transition\" | \"whileHover\" | \"whileTap\"\n>;\n\nexport type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;\n\nexport const cardAnimationPresets: CardAnimationPresets = {\n none: {},\n lift: {\n whileHover: { y: -4, scale: 1.01 },\n whileTap: { y: 0, scale: 0.995 },\n transition: { type: \"spring\", stiffness: 380, damping: 26 },\n },\n glow: {\n whileHover: {\n boxShadow:\n \"0 0 0 1px rgba(255,255,255,0.18), 0 22px 48px rgba(15,23,42,0.45)\",\n },\n transition: { duration: 0.22, ease: \"easeOut\" },\n },\n tilt: {\n whileHover: { rotateX: 4, rotateY: -4, scale: 1.01 },\n whileTap: { rotateX: 0, rotateY: 0, scale: 0.99 },\n transition: { type: \"spring\", stiffness: 280, damping: 22 },\n style: { transformStyle: \"preserve-3d\" },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const cardVariants = cva(\n [\n \"relative flex w-full flex-col overflow-hidden text-slate-50\",\n \"ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n glass:\n \"border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n outline: \"border border-white/15 bg-transparent\",\n ghost: \"border border-transparent bg-transparent\",\n elevated:\n \"border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]\",\n sky: \"border border-sky-600 bg-sky-950/70 backdrop-blur-xl\",\n rose: \"border border-rose-600 bg-rose-950/70 backdrop-blur-xl\",\n purple: \"border border-purple-600 bg-purple-950/70 backdrop-blur-xl\",\n pink: \"border border-pink-600 bg-pink-950/70 backdrop-blur-xl\",\n orange: \"border border-orange-600 bg-orange-950/70 backdrop-blur-xl\",\n yellow: \"border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl\",\n teal: \"border border-teal-600 bg-teal-950/70 backdrop-blur-xl\",\n indigo: \"border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl\",\n emerald: \"border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl\",\n gray: \"border border-gray-600 bg-gray-950/70 backdrop-blur-xl\",\n amber: \"border border-amber-600 bg-amber-950/70 backdrop-blur-xl\",\n violet: \"border border-violet-600 bg-violet-950/70 backdrop-blur-xl\",\n \"gradient-blue\":\n \"border 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 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 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 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 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 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 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 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 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: \"gap-2 p-3 text-sm\",\n md: \"gap-3 p-4 text-sm\",\n lg: \"gap-4 p-6 text-base\",\n },\n rounded: {\n sm: \"rounded-lg\",\n md: \"rounded-xl\",\n lg: \"rounded-2xl\",\n full: \"rounded-3xl\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n rounded: \"md\",\n },\n },\n);\n\nexport const cardHeaderVariants = cva(\n \"flex flex-col gap-1 border-b border-white/10 pb-3\",\n {\n variants: {\n size: {\n sm: \"pb-2\",\n md: \"pb-3\",\n lg: \"pb-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardFooterVariants = cva(\n \"flex flex-col gap-2 border-t border-white/10 pt-3\",\n {\n variants: {\n size: {\n sm: \"pt-2\",\n md: \"pt-3\",\n lg: \"pt-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardTitleVariants = cva(\n \"font-semibold tracking-tight text-slate-50\",\n {\n variants: {\n size: {\n sm: \"text-sm\",\n md: \"text-base\",\n lg: \"text-lg\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardDescriptionVariants = cva(\"text-slate-400\", {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { cardAnimationPresets } from \"./animations\";\nimport type {\n CardDescriptionProps,\n CardProps,\n CardSectionProps,\n CardSize,\n CardTitleProps,\n} from \"./types\";\nimport {\n cardDescriptionVariants,\n cardFooterVariants,\n cardHeaderVariants,\n cardTitleVariants,\n cardVariants,\n} from \"./variants\";\n\nconst CardSizeContext = createContext<CardSize>(\"md\");\n\nfunction useCardSize(): CardSize {\n return useContext(CardSizeContext);\n}\n\nexport function Card(props: CardProps) {\n const {\n className,\n appearance,\n size = \"md\",\n rounded,\n animation = \"none\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = cardAnimationPresets[animation];\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <CardSizeContext.Provider value={ctx}>\n <motion.article\n ref={ref}\n data-slot=\"card\"\n className={cn(cardVariants({ appearance, size, rounded }), className)}\n initial={false}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.article>\n </CardSizeContext.Provider>\n );\n}\n\nCard.displayName = \"Card\";\n\nexport function CardHeader({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <header\n data-slot=\"card-header\"\n className={cn(cardHeaderVariants({ size }), className)}\n >\n {children}\n </header>\n );\n}\n\nCardHeader.displayName = \"CardHeader\";\n\nexport function CardBody({ className, children }: CardSectionProps) {\n return (\n <div\n data-slot=\"card-body\"\n className={cn(\"flex flex-1 flex-col gap-2\", className)}\n >\n {children}\n </div>\n );\n}\n\nCardBody.displayName = \"CardBody\";\n\nexport function CardFooter({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <footer\n data-slot=\"card-footer\"\n className={cn(cardFooterVariants({ size }), className)}\n >\n {children}\n </footer>\n );\n}\n\nCardFooter.displayName = \"CardFooter\";\n\nexport function CardTitle({\n className,\n children,\n as = \"h3\",\n ref,\n ...rest\n}: CardTitleProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-title\"\n className={cn(cardTitleVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardTitle.displayName = \"CardTitle\";\n\nexport function CardDescription({\n className,\n children,\n as = \"p\",\n ref,\n ...rest\n}: CardDescriptionProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-description\"\n className={cn(cardDescriptionVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardDescription.displayName = \"CardDescription\";\n"]}
|
package/dist/ui/card.mjs
CHANGED