@timmbr/ui 1.11.0 → 1.13.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/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion/Accordion.js +23 -12
- package/dist/components/AuthModal/AuthModal.styles.js +1 -1
- package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts +1 -1
- package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts.map +1 -1
- package/dist/components/AuthModal/subcomponents/AuthModalParts.js +24 -42
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +10 -1
- package/dist/components/Checkbox/Checkbox.styles.js +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.ts +3 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts.map +1 -1
- package/dist/components/Chip/Chip.js +1 -1
- package/dist/components/Dialog/Dialog.js +1 -1
- package/dist/components/Drawer/Drawer.js +1 -1
- package/dist/components/FilterChips/FilterChips.d.ts.map +1 -1
- package/dist/components/FilterChips/FilterChips.js +2 -9
- package/dist/components/FilterPanel/FilterPanel.d.ts.map +1 -1
- package/dist/components/FilterPanel/FilterPanel.js +9 -7
- package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.js +1 -1
- package/dist/components/Inline/Inline.d.ts.map +1 -1
- package/dist/components/Inline/Inline.js +2 -1
- package/dist/components/Inline/Inline.types.d.ts +5 -0
- package/dist/components/Inline/Inline.types.d.ts.map +1 -1
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +2 -1
- package/dist/components/NavFooter/NavFooter.styles.js +1 -1
- package/dist/components/NavFooter/subcomponents/FooterBrand.js +1 -1
- package/dist/components/NavHeader/NavHeader.js +1 -1
- package/dist/components/NavHeader/NavHeader.styles.js +4 -4
- package/dist/components/PageProgress/PageProgress.d.ts +12 -0
- package/dist/components/PageProgress/PageProgress.d.ts.map +1 -0
- package/dist/components/PageProgress/PageProgress.js +68 -0
- package/dist/components/PageProgress/PageProgress.styles.d.ts +8 -0
- package/dist/components/PageProgress/PageProgress.styles.d.ts.map +1 -0
- package/dist/components/PageProgress/PageProgress.styles.js +32 -0
- package/dist/components/PageProgress/PageProgress.types.d.ts +18 -0
- package/dist/components/PageProgress/PageProgress.types.d.ts.map +1 -0
- package/dist/components/PageProgress/index.d.ts +3 -0
- package/dist/components/PageProgress/index.d.ts.map +1 -0
- package/dist/components/ScrollRail/ScrollRail.d.ts +4 -0
- package/dist/components/ScrollRail/ScrollRail.d.ts.map +1 -0
- package/dist/components/ScrollRail/ScrollRail.js +103 -0
- package/dist/components/ScrollRail/ScrollRail.styles.d.ts +10 -0
- package/dist/components/ScrollRail/ScrollRail.styles.d.ts.map +1 -0
- package/dist/components/ScrollRail/ScrollRail.styles.js +31 -0
- package/dist/components/ScrollRail/ScrollRail.types.d.ts +16 -0
- package/dist/components/ScrollRail/ScrollRail.types.d.ts.map +1 -0
- package/dist/components/ScrollRail/index.d.ts +4 -0
- package/dist/components/ScrollRail/index.d.ts.map +1 -0
- package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/components/Snackbar/Snackbar.js +6 -2
- package/dist/components/Snackbar/Snackbar.styles.d.ts +1 -0
- package/dist/components/Snackbar/Snackbar.styles.d.ts.map +1 -1
- package/dist/components/Snackbar/Snackbar.styles.js +8 -4
- package/dist/components/Snackbar/Snackbar.types.d.ts +3 -0
- package/dist/components/Snackbar/Snackbar.types.d.ts.map +1 -1
- package/dist/components/Snackbar/snackbarStore.d.ts +3 -0
- package/dist/components/Snackbar/snackbarStore.d.ts.map +1 -1
- package/dist/components/Stack/Stack.d.ts.map +1 -1
- package/dist/components/Stack/Stack.js +2 -1
- package/dist/components/Stack/Stack.types.d.ts +5 -0
- package/dist/components/Stack/Stack.types.d.ts.map +1 -1
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +19 -2
- package/dist/components/Switch/Switch.styles.js +2 -2
- package/dist/components/Switch/Switch.types.d.ts +3 -0
- package/dist/components/Switch/Switch.types.d.ts.map +1 -1
- package/dist/components/Toast/Toast.js +2 -2
- package/dist/components/Toast/toastStore.d.ts +4 -0
- package/dist/components/Toast/toastStore.d.ts.map +1 -1
- package/dist/components/ZoneProgress/ZoneProgress.d.ts +6 -0
- package/dist/components/ZoneProgress/ZoneProgress.d.ts.map +1 -0
- package/dist/components/ZoneProgress/ZoneProgress.js +96 -0
- package/dist/components/ZoneProgress/index.d.ts +2 -0
- package/dist/components/ZoneProgress/index.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/providers/AnimationProvider.d.ts +5 -1
- package/dist/providers/AnimationProvider.d.ts.map +1 -1
- package/dist/providers/AnimationProvider.js +6 -3
- package/package.json +3 -3
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
const pageProgressVariants = cva(
|
|
4
|
+
"fixed top-0 left-0 right-0 overflow-hidden",
|
|
5
|
+
{
|
|
6
|
+
variants: {
|
|
7
|
+
fading: {
|
|
8
|
+
true: "transition-opacity duration-300 opacity-0",
|
|
9
|
+
false: ""
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
defaultVariants: { fading: false }
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
const pageProgressBarVariants = cva(
|
|
16
|
+
"absolute top-0 bottom-0 rounded-full",
|
|
17
|
+
{
|
|
18
|
+
variants: {
|
|
19
|
+
indeterminate: {
|
|
20
|
+
true: "animate-indeterminate-bar",
|
|
21
|
+
false: ""
|
|
22
|
+
},
|
|
23
|
+
animated: {
|
|
24
|
+
true: "",
|
|
25
|
+
false: "transition-none animate-none"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: { indeterminate: false, animated: true }
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
export { pageProgressBarVariants, pageProgressVariants };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { MotionProp } from '../../types/motion';
|
|
2
|
+
export interface PageProgressProps {
|
|
3
|
+
/** When false, the bar is hidden; when true (or omitted while mounted), it shows. */
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Determinate value 0–100. Omit for indeterminate mode (the bar crawls to ~80% and stalls
|
|
7
|
+
* until `loading` becomes false, at which point it completes and fades out).
|
|
8
|
+
*/
|
|
9
|
+
progress?: number;
|
|
10
|
+
/** Bar height in px. Default: 3. */
|
|
11
|
+
height?: number;
|
|
12
|
+
/** CSS stack order. Default: 9999. */
|
|
13
|
+
zIndex?: number;
|
|
14
|
+
/** Tailwind color class for the bar. Default: bg-primary. */
|
|
15
|
+
color?: string;
|
|
16
|
+
motion?: MotionProp;
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=PageProgress.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageProgress.types.d.ts","sourceRoot":"","sources":["../../../src/components/PageProgress/PageProgress.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollRail.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D,eAAO,MAAM,UAAU,wFA+GtB,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ChevronLeft, ChevronRight } from '@timmbr/icons';
|
|
5
|
+
import { cn } from '@timmbr/utils';
|
|
6
|
+
import { tapGestures, hoverGestures, Presence, motion, fadeVariants } from '@timmbr/motion';
|
|
7
|
+
import { scrollRailVariants, scrollRailChevronVariants, scrollRailWrapperVariants } from './ScrollRail.styles.js';
|
|
8
|
+
import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
|
|
9
|
+
|
|
10
|
+
const SCROLL_THRESHOLD = 4;
|
|
11
|
+
const ScrollRail = React.forwardRef(
|
|
12
|
+
({
|
|
13
|
+
gap,
|
|
14
|
+
scrollAmount,
|
|
15
|
+
hideChevrons = false,
|
|
16
|
+
labelPrev = "Scroll left",
|
|
17
|
+
labelNext = "Scroll right",
|
|
18
|
+
className,
|
|
19
|
+
children,
|
|
20
|
+
...props
|
|
21
|
+
}, ref) => {
|
|
22
|
+
const globalMotion = useGlobalAnimation();
|
|
23
|
+
const trackRef = React.useRef(null);
|
|
24
|
+
const [canScrollLeft, setCanScrollLeft] = React.useState(false);
|
|
25
|
+
const [canScrollRight, setCanScrollRight] = React.useState(false);
|
|
26
|
+
const updateScrollState = React.useCallback(() => {
|
|
27
|
+
const t = trackRef.current;
|
|
28
|
+
if (!t) return;
|
|
29
|
+
setCanScrollLeft(t.scrollLeft > SCROLL_THRESHOLD);
|
|
30
|
+
setCanScrollRight(t.scrollLeft + t.clientWidth < t.scrollWidth - SCROLL_THRESHOLD);
|
|
31
|
+
}, []);
|
|
32
|
+
React.useLayoutEffect(() => {
|
|
33
|
+
updateScrollState();
|
|
34
|
+
}, [updateScrollState]);
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
const t = trackRef.current;
|
|
37
|
+
if (!t || typeof ResizeObserver === "undefined") return;
|
|
38
|
+
const ro = new ResizeObserver(updateScrollState);
|
|
39
|
+
ro.observe(t);
|
|
40
|
+
return () => ro.disconnect();
|
|
41
|
+
}, [updateScrollState]);
|
|
42
|
+
const getScrollAmount = () => scrollAmount ?? (trackRef.current?.clientWidth ?? 320) * 0.8;
|
|
43
|
+
const gestureProps = globalMotion ? { whileHover: hoverGestures.scale, whileTap: tapGestures.compress } : {};
|
|
44
|
+
return /* @__PURE__ */ jsxs(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
ref,
|
|
48
|
+
"data-slot": "scroll-rail",
|
|
49
|
+
className: cn(scrollRailWrapperVariants(), className),
|
|
50
|
+
...props,
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsx(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
ref: trackRef,
|
|
56
|
+
"data-slot": "scroll-rail-track",
|
|
57
|
+
className: scrollRailVariants({ gap }),
|
|
58
|
+
onScroll: updateScrollState,
|
|
59
|
+
children
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
!hideChevrons && /* @__PURE__ */ jsx(Presence, { initial: false, children: canScrollLeft && /* @__PURE__ */ jsx(
|
|
63
|
+
motion.button,
|
|
64
|
+
{
|
|
65
|
+
type: "button",
|
|
66
|
+
"aria-label": labelPrev,
|
|
67
|
+
"data-slot": "scroll-rail-prev",
|
|
68
|
+
className: scrollRailChevronVariants({ side: "left" }),
|
|
69
|
+
initial: "hidden",
|
|
70
|
+
animate: "visible",
|
|
71
|
+
exit: "exit",
|
|
72
|
+
variants: fadeVariants,
|
|
73
|
+
onClick: () => trackRef.current?.scrollBy({ left: -getScrollAmount(), behavior: "smooth" }),
|
|
74
|
+
...gestureProps,
|
|
75
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-5" })
|
|
76
|
+
},
|
|
77
|
+
"scroll-rail-prev"
|
|
78
|
+
) }),
|
|
79
|
+
!hideChevrons && /* @__PURE__ */ jsx(Presence, { initial: false, children: canScrollRight && /* @__PURE__ */ jsx(
|
|
80
|
+
motion.button,
|
|
81
|
+
{
|
|
82
|
+
type: "button",
|
|
83
|
+
"aria-label": labelNext,
|
|
84
|
+
"data-slot": "scroll-rail-next",
|
|
85
|
+
className: scrollRailChevronVariants({ side: "right" }),
|
|
86
|
+
initial: "hidden",
|
|
87
|
+
animate: "visible",
|
|
88
|
+
exit: "exit",
|
|
89
|
+
variants: fadeVariants,
|
|
90
|
+
onClick: () => trackRef.current?.scrollBy({ left: getScrollAmount(), behavior: "smooth" }),
|
|
91
|
+
...gestureProps,
|
|
92
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-5" })
|
|
93
|
+
},
|
|
94
|
+
"scroll-rail-next"
|
|
95
|
+
) })
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
ScrollRail.displayName = "ScrollRail";
|
|
102
|
+
|
|
103
|
+
export { ScrollRail };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const scrollRailWrapperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
3
|
+
export declare const scrollRailVariants: (props?: ({
|
|
4
|
+
gap?: "sm" | "md" | "lg" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export declare const scrollRailChevronVariants: (props?: ({
|
|
7
|
+
side?: "left" | "right" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
+
export type ScrollRailVariants = VariantProps<typeof scrollRailVariants>;
|
|
10
|
+
//# sourceMappingURL=ScrollRail.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollRail.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,yBAAyB,oFAAyB,CAAC;AAEhE,eAAO,MAAM,kBAAkB;;8EAc9B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAUrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
const scrollRailWrapperVariants = cva("relative w-full");
|
|
4
|
+
const scrollRailVariants = cva(
|
|
5
|
+
"w-full overflow-x-auto pb-4 pt-1 px-1 flex snap-x snap-mandatory scroll-smooth focus:outline-none [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
|
|
6
|
+
{
|
|
7
|
+
variants: {
|
|
8
|
+
gap: {
|
|
9
|
+
sm: "gap-3",
|
|
10
|
+
md: "gap-5 sm:gap-6",
|
|
11
|
+
lg: "gap-6 sm:gap-8"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: {
|
|
15
|
+
gap: "md"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
const scrollRailChevronVariants = cva(
|
|
20
|
+
"absolute top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-grey-50/70 text-grey-950 shadow-sm backdrop-blur-sm transition-colors hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:flex",
|
|
21
|
+
{
|
|
22
|
+
variants: {
|
|
23
|
+
side: {
|
|
24
|
+
left: "left-2",
|
|
25
|
+
right: "right-2"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
export { scrollRailChevronVariants, scrollRailVariants, scrollRailWrapperVariants };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import type { ScrollRailVariants } from './ScrollRail.styles';
|
|
3
|
+
export interface ScrollRailProps extends React.HTMLAttributes<HTMLDivElement>, ScrollRailVariants {
|
|
4
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
5
|
+
/** Override px amount scrolled per chevron click. Default: 80% of track clientWidth. */
|
|
6
|
+
scrollAmount?: number;
|
|
7
|
+
/** Suppress chevrons entirely (touch-only contexts). */
|
|
8
|
+
hideChevrons?: boolean;
|
|
9
|
+
/** Accessible label for the left button. @default 'Scroll left' */
|
|
10
|
+
labelPrev?: string;
|
|
11
|
+
/** Accessible label for the right button. @default 'Scroll right' */
|
|
12
|
+
labelNext?: string;
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=ScrollRail.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollRail.types.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/ScrollRail.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,kBAAkB;IACpB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollRail/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAatD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,sFAiGpB,CAAC"}
|
|
@@ -3,7 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from '@timmbr/icons';
|
|
5
5
|
import { cn } from '@timmbr/utils';
|
|
6
|
+
import { resolveMotion } from '../../types/motion.js';
|
|
6
7
|
import { snackbarIconVariants, snackbarActionVariants, snackbarCloseVariants, snackbarVariants } from './Snackbar.styles.js';
|
|
8
|
+
import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
|
|
7
9
|
|
|
8
10
|
const ICONS = {
|
|
9
11
|
default: Info,
|
|
@@ -14,9 +16,11 @@ const ICONS = {
|
|
|
14
16
|
};
|
|
15
17
|
const SWIPE_DISMISS_PX = 48;
|
|
16
18
|
const Snackbar = React.forwardRef(
|
|
17
|
-
({ item, onDismiss, dismissLabel = "Dismiss", className, style, ...props }, ref) => {
|
|
19
|
+
({ item, onDismiss, dismissLabel = "Dismiss", motion, className, style, ...props }, ref) => {
|
|
18
20
|
const variant = item.variant ?? "default";
|
|
19
21
|
const Icon = ICONS[variant];
|
|
22
|
+
const globalMotion = useGlobalAnimation();
|
|
23
|
+
const { shouldAnimate } = resolveMotion(motion, globalMotion);
|
|
20
24
|
const duration = item.duration ?? (item.action ? 6e3 : 4e3);
|
|
21
25
|
const [paused, setPaused] = React.useState(false);
|
|
22
26
|
const remaining = React.useRef(duration);
|
|
@@ -62,7 +66,7 @@ const Snackbar = React.forwardRef(
|
|
|
62
66
|
"data-slot": "snackbar",
|
|
63
67
|
"data-variant": variant,
|
|
64
68
|
"data-state": item.open ? "open" : "closed",
|
|
65
|
-
className: cn(snackbarVariants({ open: item.open }), dragging && "transition-none", className),
|
|
69
|
+
className: cn(snackbarVariants({ open: item.open, animated: shouldAnimate }), dragging && "transition-none", className),
|
|
66
70
|
style: {
|
|
67
71
|
...style,
|
|
68
72
|
...dragging && {
|
|
@@ -7,6 +7,7 @@ export declare const snackbarHostVariants: (props?: import("class-variance-autho
|
|
|
7
7
|
/** Inverse surface (dark bar, light text), as on Android and most shopping apps. */
|
|
8
8
|
export declare const snackbarVariants: (props?: ({
|
|
9
9
|
open?: boolean | null | undefined;
|
|
10
|
+
animated?: boolean | null | undefined;
|
|
10
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
12
|
export declare const snackbarIconVariants: (props?: ({
|
|
12
13
|
variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"Snackbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,gBAAgB;;;8EAe5B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAW/B,CAAC;AAEH,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC"}
|
|
@@ -4,15 +4,19 @@ const snackbarHostVariants = cva(
|
|
|
4
4
|
"pointer-events-none fixed inset-x-3 z-[110] flex justify-center bottom-[calc(0.75rem+env(safe-area-inset-bottom)+var(--toast-offset-bottom,0px))] transition-[bottom] duration-200 sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2"
|
|
5
5
|
);
|
|
6
6
|
const snackbarVariants = cva(
|
|
7
|
-
"pointer-events-auto flex w-full min-h-12 touch-pan-y select-none items-center gap-3 rounded-md bg-grey-950 py-2.5 pl-4 pr-2 font-sans text-grey-50 shadow-xl sm:w-auto sm:min-w-[22rem] sm:max-w-[36rem]
|
|
7
|
+
"pointer-events-auto flex w-full min-h-12 touch-pan-y select-none items-center gap-3 rounded-md bg-grey-950 py-2.5 pl-4 pr-2 font-sans text-grey-50 shadow-xl sm:w-auto sm:min-w-[22rem] sm:max-w-[36rem]",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
open: {
|
|
11
11
|
true: "translate-y-0 opacity-100",
|
|
12
12
|
false: "translate-y-2 opacity-0"
|
|
13
|
+
},
|
|
14
|
+
animated: {
|
|
15
|
+
true: "transition-[transform,opacity] duration-200",
|
|
16
|
+
false: "transition-none"
|
|
13
17
|
}
|
|
14
18
|
},
|
|
15
|
-
defaultVariants: { open: true }
|
|
19
|
+
defaultVariants: { open: true, animated: true }
|
|
16
20
|
}
|
|
17
21
|
);
|
|
18
22
|
const snackbarIconVariants = cva("size-5 shrink-0", {
|
|
@@ -28,10 +32,10 @@ const snackbarIconVariants = cva("size-5 shrink-0", {
|
|
|
28
32
|
defaultVariants: { variant: "default" }
|
|
29
33
|
});
|
|
30
34
|
const snackbarActionVariants = cva(
|
|
31
|
-
"shrink-0 rounded-sm px-2.5 py-2 text-body-3 font-bold uppercase tracking-wide text-primary-200 transition-colors hover:bg-grey-50/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
|
|
35
|
+
"cursor-pointer shrink-0 rounded-sm px-2.5 py-2 text-body-3 font-bold uppercase tracking-wide text-primary-200 transition-colors hover:bg-grey-50/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
|
|
32
36
|
);
|
|
33
37
|
const snackbarCloseVariants = cva(
|
|
34
|
-
"flex size-8 shrink-0 items-center justify-center rounded-full text-grey-400 transition-colors hover:bg-grey-50/10 hover:text-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
|
|
38
|
+
"cursor-pointer flex size-8 shrink-0 items-center justify-center rounded-full text-grey-400 transition-colors hover:bg-grey-50/10 hover:text-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50"
|
|
35
39
|
);
|
|
36
40
|
|
|
37
41
|
export { snackbarActionVariants, snackbarCloseVariants, snackbarHostVariants, snackbarIconVariants, snackbarVariants };
|
|
@@ -22,11 +22,14 @@ export interface SnackbarItem extends SnackbarOptions {
|
|
|
22
22
|
/** False while it animates out. */
|
|
23
23
|
open: boolean;
|
|
24
24
|
}
|
|
25
|
+
import type { MotionProp } from '../../types/motion';
|
|
25
26
|
export interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
26
27
|
item: SnackbarItem;
|
|
27
28
|
onDismiss: () => void;
|
|
28
29
|
/** Labels for assistive tech. */
|
|
29
30
|
dismissLabel?: string;
|
|
31
|
+
/** Override animation behaviour. `false` disables entry/exit transitions; omit to inherit global setting. */
|
|
32
|
+
motion?: MotionProp;
|
|
30
33
|
}
|
|
31
34
|
export interface SnackbarHostProps {
|
|
32
35
|
/** Accessible name of the dismiss control (snackbars can be swiped away too). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAEzF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mFAAmF;IACnF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Snackbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAEzF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mFAAmF;IACnF,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6GAA6G;IAC7G,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -4,6 +4,9 @@ import type { SnackbarItem, SnackbarOptions } from './Snackbar.types';
|
|
|
4
4
|
export declare const SNACKBAR_EXIT_MS = 180;
|
|
5
5
|
type Listener = () => void;
|
|
6
6
|
/**
|
|
7
|
+
* Browser-only module-level singleton. Not SSR-safe — never import this on the server.
|
|
8
|
+
* Use `.reset()` in tests to clear state between cases.
|
|
9
|
+
*
|
|
7
10
|
* One snackbar at a time (the mobile pattern): showing a new one closes the current one first;
|
|
8
11
|
* extra ones wait their turn. Re-showing an id that's on screen or queued updates it in place.
|
|
9
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbarStore.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/snackbarStore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AAEvF,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B
|
|
1
|
+
{"version":3,"file":"snackbarStore.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/snackbarStore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAmB,MAAM,kBAAkB,CAAC;AAEvF,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B;;;;;;GAMG;AACH,cAAM,aAAa;IACjB,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,SAAS,CAA4C;IAC7D,OAAO,CAAC,KAAK,CAAK;IAElB,0FAA0F;IAC1F,YAAY,mBAKV;IAEF,OAAO,gBAAwB;IAE/B,SAAS,GAAI,UAAU,QAAQ,gBAK7B;IAEF,UAAU,4BAAsB;IAEhC,OAAO,CAAC,MAAM;IAId,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM;IAsBrE,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM;IAMnB,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,IAAI;IAKZ,mBAAmB;IACnB,KAAK;CAMN;AAED,eAAO,MAAM,aAAa,eAAsB,CAAC;AAEjD,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,KAAK,MAAM,CAAC;AAExG,MAAM,WAAW,gBAAgB;IAC/B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC9D,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAOD,8FAA8F;AAC9F,eAAO,MAAM,QAAQ,EAAE,gBAStB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD,eAAO,MAAM,KAAK,mFA6CjB,CAAC"}
|
|
@@ -29,11 +29,12 @@ const Stack = React.forwardRef(
|
|
|
29
29
|
align = "stretch",
|
|
30
30
|
justify = "start",
|
|
31
31
|
divider,
|
|
32
|
+
as,
|
|
32
33
|
asChild = false,
|
|
33
34
|
children,
|
|
34
35
|
...props
|
|
35
36
|
}, ref) => {
|
|
36
|
-
const Component = asChild ? Slot : "div";
|
|
37
|
+
const Component = asChild ? Slot : as ?? "div";
|
|
37
38
|
const gapClass = formatGap(gap);
|
|
38
39
|
const renderChildren = () => {
|
|
39
40
|
if (!divider) return children;
|
|
@@ -22,6 +22,11 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
22
22
|
* Optional divider element rendered between each child in the stack.
|
|
23
23
|
*/
|
|
24
24
|
divider?: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Renders as a different HTML element or component while keeping Stack styles.
|
|
27
|
+
* e.g. `as="article"`, `as="section"`, `as="header"`. Ignored when `asChild` is true.
|
|
28
|
+
*/
|
|
29
|
+
as?: React.ElementType;
|
|
25
30
|
/**
|
|
26
31
|
* If true, renders child element via Radix Slot.
|
|
27
32
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,mBAAmB,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
1
|
+
{"version":3,"file":"Stack.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,mBAAmB,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFAkFlB,CAAC"}
|
|
@@ -3,7 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
5
5
|
import { cn } from '@timmbr/utils';
|
|
6
|
+
import { resolveMotion } from '../../types/motion.js';
|
|
6
7
|
import { switchThumbVariants, switchVariants } from './Switch.styles.js';
|
|
8
|
+
import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
|
|
7
9
|
|
|
8
10
|
const Switch = React.forwardRef(
|
|
9
11
|
({
|
|
@@ -13,22 +15,37 @@ const Switch = React.forwardRef(
|
|
|
13
15
|
size,
|
|
14
16
|
label,
|
|
15
17
|
description,
|
|
18
|
+
motion,
|
|
16
19
|
id: customId,
|
|
17
20
|
disabled,
|
|
18
21
|
...props
|
|
19
22
|
}, ref) => {
|
|
20
23
|
const generatedId = React.useId();
|
|
21
24
|
const id = customId || generatedId;
|
|
25
|
+
const globalMotion = useGlobalAnimation();
|
|
26
|
+
const { shouldAnimate } = resolveMotion(motion, globalMotion);
|
|
22
27
|
const switchElement = /* @__PURE__ */ jsx(
|
|
23
28
|
SwitchPrimitive.Root,
|
|
24
29
|
{
|
|
25
30
|
ref,
|
|
26
31
|
id,
|
|
27
32
|
disabled,
|
|
28
|
-
className: cn(
|
|
33
|
+
className: cn(
|
|
34
|
+
switchVariants({ size }),
|
|
35
|
+
shouldAnimate ? "transition-colors" : "transition-none",
|
|
36
|
+
!label && className
|
|
37
|
+
),
|
|
29
38
|
style: !label ? style : void 0,
|
|
30
39
|
...props,
|
|
31
|
-
children: /* @__PURE__ */ jsx(
|
|
40
|
+
children: /* @__PURE__ */ jsx(
|
|
41
|
+
SwitchPrimitive.Thumb,
|
|
42
|
+
{
|
|
43
|
+
className: cn(
|
|
44
|
+
switchThumbVariants({ size }),
|
|
45
|
+
shouldAnimate ? "transition-transform" : "transition-none"
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
)
|
|
32
49
|
}
|
|
33
50
|
);
|
|
34
51
|
if (!label && !description) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cva } from 'class-variance-authority';
|
|
2
2
|
|
|
3
3
|
const switchVariants = cva(
|
|
4
|
-
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent
|
|
4
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-grey-200 dark:data-[state=unchecked]:bg-grey-700",
|
|
5
5
|
{
|
|
6
6
|
variants: {
|
|
7
7
|
size: {
|
|
@@ -17,7 +17,7 @@ const switchVariants = cva(
|
|
|
17
17
|
}
|
|
18
18
|
);
|
|
19
19
|
const switchThumbVariants = cva(
|
|
20
|
-
"pointer-events-none block rounded-full bg-grey-50 shadow-md ring-0
|
|
20
|
+
"pointer-events-none block rounded-full bg-grey-50 shadow-md ring-0 data-[state=unchecked]:translate-x-0",
|
|
21
21
|
{
|
|
22
22
|
variants: {
|
|
23
23
|
size: {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
2
|
import type * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
3
3
|
import type { SwitchVariants } from './Switch.styles';
|
|
4
|
+
import type { MotionProp } from '../../types/motion';
|
|
4
5
|
export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'size'>, SwitchVariants {
|
|
5
6
|
/**
|
|
6
7
|
* Primary label text displayed next to the switch toggle.
|
|
@@ -14,5 +15,7 @@ export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof
|
|
|
14
15
|
* Custom className for the outer container wrapper.
|
|
15
16
|
*/
|
|
16
17
|
containerClassName?: string;
|
|
18
|
+
/** Override animation behaviour. `false` disables transitions; omit to inherit global setting. */
|
|
19
|
+
motion?: MotionProp;
|
|
17
20
|
}
|
|
18
21
|
//# sourceMappingURL=Switch.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,WACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3D,MAAM,CACP,EACD,cAAc;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kGAAkG;IAClG,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}
|
|
@@ -77,7 +77,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
77
77
|
ref,
|
|
78
78
|
"data-slot": "toast-action",
|
|
79
79
|
className: cn(
|
|
80
|
-
"inline-flex h-8 shrink-0 items-center justify-center rounded-[2px] border bg-transparent px-3 text-body-3 font-semibold ring-offset-background transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:outline-none focus:ring-2 focus:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
|
|
80
|
+
"inline-flex h-8 shrink-0 items-center justify-center rounded-[2px] border bg-transparent px-3 text-body-3 font-semibold ring-offset-background transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
|
|
81
81
|
className
|
|
82
82
|
),
|
|
83
83
|
...props
|
|
@@ -90,7 +90,7 @@ const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
90
90
|
ref,
|
|
91
91
|
"data-slot": "toast-close",
|
|
92
92
|
className: cn(
|
|
93
|
-
"absolute right-
|
|
93
|
+
"absolute right-1 top-1 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
|
|
94
94
|
className
|
|
95
95
|
),
|
|
96
96
|
"toast-close": "",
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ToastItem, ToastOptions } from './Toast.types';
|
|
3
3
|
type ToastSubscriber = () => void;
|
|
4
|
+
/**
|
|
5
|
+
* Browser-only module-level singleton. Not SSR-safe — never import this on the server.
|
|
6
|
+
* Use `.reset()` in tests to clear state between cases.
|
|
7
|
+
*/
|
|
4
8
|
declare class ToastStore {
|
|
5
9
|
private toasts;
|
|
6
10
|
private listeners;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toastStore.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toastStore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAUhF,KAAK,eAAe,GAAG,MAAM,IAAI,CAAC;AAElC,cAAM,UAAU;IACd,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,YAAY,CAAoC;IACxD,OAAO,CAAC,eAAe,CAAqB;IAE5C,SAAS,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;IAOhD,OAAO,CAAC,MAAM;IAId,SAAS,IAAI,SAAS,EAAE;IAIxB,aAAa,CAAC,GAAG,EAAE,MAAM;IAIzB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAI5C,4FAA4F;IAC5F,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAQlB,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM;IA2CvC,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM;CAmBpB;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC1G,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC5G,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC5G,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IACzG,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,KAAK,EAAE,aA8BlB,CAAC;AAEH,wBAAgB,QAAQ;;mBAWa,MAAM;;EAG1C"}
|
|
1
|
+
{"version":3,"file":"toastStore.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toastStore.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAUhF,KAAK,eAAe,GAAG,MAAM,IAAI,CAAC;AAElC;;;GAGG;AACH,cAAM,UAAU;IACd,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,YAAY,CAAoC;IACxD,OAAO,CAAC,eAAe,CAAqB;IAE5C,SAAS,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;IAOhD,OAAO,CAAC,MAAM;IAId,SAAS,IAAI,SAAS,EAAE;IAIxB,aAAa,CAAC,GAAG,EAAE,MAAM;IAIzB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAI5C,4FAA4F;IAC5F,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;IAI/C;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAQlB,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM;IA2CvC,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM;CAmBpB;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC1G,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC5G,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAC5G,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IACzG,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,KAAK,EAAE,aA8BlB,CAAC;AAEH,wBAAgB,QAAQ;;mBAWa,MAAM;;EAG1C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ZoneProgress.d.ts","sourceRoot":"","sources":["../../../src/components/ZoneProgress/ZoneProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,wBAAgB,YAAY,sBA2F3B;yBA3Fe,YAAY"}
|