@schemavaults/ui 0.29.1 → 0.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/circular-progress/circular-progress.d.ts +41 -0
- package/dist/components/ui/circular-progress/circular-progress.js +76 -0
- package/dist/components/ui/circular-progress/circular-progress.js.map +1 -0
- package/dist/components/ui/circular-progress/index.d.ts +3 -0
- package/dist/components/ui/circular-progress/index.js +3 -0
- package/dist/components/ui/circular-progress/index.js.map +1 -0
- package/dist/components/ui/index.d.ts +4 -0
- package/dist/components/ui/index.js +2 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/toggle/index.d.ts +5 -0
- package/dist/components/ui/toggle/index.js +4 -0
- package/dist/components/ui/toggle/index.js.map +1 -0
- package/dist/components/ui/toggle/toggle-group.d.ts +34 -0
- package/dist/components/ui/toggle/toggle-group.js +96 -0
- package/dist/components/ui/toggle/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle/toggle.d.ts +24 -0
- package/dist/components/ui/toggle/toggle.js +58 -0
- package/dist/components/ui/toggle/toggle.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type { ReactElement, ReactNode, HTMLAttributes } from "react";
|
|
3
|
+
export declare const circularProgressVariants: (props?: ({
|
|
4
|
+
size?: "sm" | "default" | "lg" | "xl" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export declare const circularProgressIndicatorVariants: (props?: ({
|
|
7
|
+
color?: "default" | "destructive" | "warning" | "positive" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
+
export declare const circularProgressLabelVariants: (props?: ({
|
|
10
|
+
size?: "sm" | "default" | "lg" | "xl" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
export declare const circularProgressSizeIds: readonly ["sm", "default", "lg", "xl"];
|
|
13
|
+
export type CircularProgressSizeId = (typeof circularProgressSizeIds)[number];
|
|
14
|
+
export declare const circularProgressColorIds: readonly ["default", "positive", "warning", "destructive"];
|
|
15
|
+
export type CircularProgressColorId = (typeof circularProgressColorIds)[number];
|
|
16
|
+
export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "color">, VariantProps<typeof circularProgressVariants>, VariantProps<typeof circularProgressIndicatorVariants> {
|
|
17
|
+
/** Current progress value (0-100 by default; respects min/max) */
|
|
18
|
+
value: number;
|
|
19
|
+
/** Accessible label describing what the progress represents */
|
|
20
|
+
label: string;
|
|
21
|
+
/** Minimum value (defaults to 0) */
|
|
22
|
+
min?: number;
|
|
23
|
+
/** Maximum value (defaults to 100) */
|
|
24
|
+
max?: number;
|
|
25
|
+
/** Override the stroke width (in SVG user units). Defaults are size-aware. */
|
|
26
|
+
strokeWidth?: number;
|
|
27
|
+
/** When true (default), shows the percentage in the center of the ring */
|
|
28
|
+
showValue?: boolean;
|
|
29
|
+
/** Custom content to render in the center, overrides showValue */
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
/** Additional classes for the indicator (animated) circle stroke */
|
|
32
|
+
indicatorClassName?: string;
|
|
33
|
+
/** Additional classes for the track (background) circle stroke */
|
|
34
|
+
trackClassName?: string;
|
|
35
|
+
/** Additional classes for the centered label/content */
|
|
36
|
+
labelClassName?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare function CircularProgress({ value, label, min, max, size, color, strokeWidth, showValue, children, className, indicatorClassName, trackClassName, labelClassName, ...props }: CircularProgressProps): ReactElement;
|
|
39
|
+
export declare namespace CircularProgress {
|
|
40
|
+
var displayName: string;
|
|
41
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { m } from "../../../framer-motion";
|
|
5
|
+
import { cn } from "../../../lib/utils";
|
|
6
|
+
export const circularProgressVariants = cva("relative inline-flex shrink-0", {
|
|
7
|
+
variants: {
|
|
8
|
+
size: {
|
|
9
|
+
sm: "h-10 w-10",
|
|
10
|
+
default: "h-16 w-16",
|
|
11
|
+
lg: "h-24 w-24",
|
|
12
|
+
xl: "h-32 w-32",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
size: "default",
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
export const circularProgressIndicatorVariants = cva("transition-colors duration-300", {
|
|
20
|
+
variants: {
|
|
21
|
+
color: {
|
|
22
|
+
default: "stroke-schemavaults-brand-blue",
|
|
23
|
+
positive: "stroke-green-500",
|
|
24
|
+
warning: "stroke-yellow-500",
|
|
25
|
+
destructive: "stroke-red-500",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
color: "default",
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
export const circularProgressLabelVariants = cva("absolute inset-0 flex items-center justify-center font-medium tabular-nums text-foreground", {
|
|
33
|
+
variants: {
|
|
34
|
+
size: {
|
|
35
|
+
sm: "text-xs",
|
|
36
|
+
default: "text-sm",
|
|
37
|
+
lg: "text-base",
|
|
38
|
+
xl: "text-lg",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
size: "default",
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
export const circularProgressSizeIds = ["sm", "default", "lg", "xl"];
|
|
46
|
+
export const circularProgressColorIds = [
|
|
47
|
+
"default",
|
|
48
|
+
"positive",
|
|
49
|
+
"warning",
|
|
50
|
+
"destructive",
|
|
51
|
+
];
|
|
52
|
+
const SIZE_TO_PIXELS = {
|
|
53
|
+
sm: 40,
|
|
54
|
+
default: 64,
|
|
55
|
+
lg: 96,
|
|
56
|
+
xl: 128,
|
|
57
|
+
};
|
|
58
|
+
const SIZE_TO_STROKE_WIDTH = {
|
|
59
|
+
sm: 4,
|
|
60
|
+
default: 6,
|
|
61
|
+
lg: 8,
|
|
62
|
+
xl: 10,
|
|
63
|
+
};
|
|
64
|
+
export function CircularProgress({ value, label, min = 0, max = 100, size, color, strokeWidth, showValue = true, children, className, indicatorClassName, trackClassName, labelClassName, ...props }) {
|
|
65
|
+
const resolvedSize = size ?? "default";
|
|
66
|
+
const pixelSize = SIZE_TO_PIXELS[resolvedSize];
|
|
67
|
+
const resolvedStrokeWidth = strokeWidth ?? SIZE_TO_STROKE_WIDTH[resolvedSize];
|
|
68
|
+
const radius = (pixelSize - resolvedStrokeWidth) / 2;
|
|
69
|
+
const circumference = 2 * Math.PI * radius;
|
|
70
|
+
const clampedValue = Math.min(max, Math.max(min, value));
|
|
71
|
+
const percentage = ((clampedValue - min) / (max - min)) * 100;
|
|
72
|
+
const targetOffset = circumference * (1 - percentage / 100);
|
|
73
|
+
return (_jsxs("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": min, "aria-valuemax": max, "aria-label": label, className: cn(circularProgressVariants({ size }), className), ...props, children: [_jsxs("svg", { viewBox: `0 0 ${pixelSize} ${pixelSize}`, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [_jsx("circle", { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: resolvedStrokeWidth, className: cn("stroke-secondary", trackClassName) }), _jsx(m.circle, { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: resolvedStrokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: targetOffset }, transition: { duration: 0.5, ease: "easeOut" }, className: cn(circularProgressIndicatorVariants({ color }), indicatorClassName) })] }), (children || showValue) && (_jsx("div", { className: cn(circularProgressLabelVariants({ size }), labelClassName), "aria-hidden": "true", children: children ?? `${Math.round(percentage)}%` }))] }));
|
|
74
|
+
}
|
|
75
|
+
CircularProgress.displayName = "CircularProgress";
|
|
76
|
+
//# sourceMappingURL=circular-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../../src/components/ui/circular-progress/circular-progress.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { CircularProgress, circularProgressVariants, circularProgressIndicatorVariants, circularProgressLabelVariants, circularProgressSizeIds, circularProgressColorIds, } from "./circular-progress";
|
|
2
|
+
export type * from "./circular-progress";
|
|
3
|
+
export { CircularProgress as default } from "./circular-progress";
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { CircularProgress, circularProgressVariants, circularProgressIndicatorVariants, circularProgressLabelVariants, circularProgressSizeIds, circularProgressColorIds, } from "./circular-progress";
|
|
2
|
+
export { CircularProgress as default } from "./circular-progress";
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/circular-progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,iCAAiC,EACjC,6BAA6B,EAC7B,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -98,6 +98,8 @@ export * from "./switch";
|
|
|
98
98
|
export type * from "./switch";
|
|
99
99
|
export * from "./progress-bar";
|
|
100
100
|
export type * from "./progress-bar";
|
|
101
|
+
export * from "./circular-progress";
|
|
102
|
+
export type * from "./circular-progress";
|
|
101
103
|
export * from "./breadcrumb";
|
|
102
104
|
export type * from "./breadcrumb";
|
|
103
105
|
export * from "./pagination";
|
|
@@ -126,3 +128,5 @@ export * from "./segmented-control";
|
|
|
126
128
|
export type * from "./segmented-control";
|
|
127
129
|
export * from "./marquee";
|
|
128
130
|
export type * from "./marquee";
|
|
131
|
+
export * from "./toggle";
|
|
132
|
+
export type * from "./toggle";
|
|
@@ -48,6 +48,7 @@ export * from "./tabs";
|
|
|
48
48
|
export * from "./slider";
|
|
49
49
|
export * from "./switch";
|
|
50
50
|
export * from "./progress-bar";
|
|
51
|
+
export * from "./circular-progress";
|
|
51
52
|
export * from "./breadcrumb";
|
|
52
53
|
export * from "./pagination";
|
|
53
54
|
export * from "./kbd";
|
|
@@ -62,4 +63,5 @@ export * from "./number-input";
|
|
|
62
63
|
export * from "./code-block";
|
|
63
64
|
export * from "./segmented-control";
|
|
64
65
|
export * from "./marquee";
|
|
66
|
+
export * from "./toggle";
|
|
65
67
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { Toggle, toggleVariants, toggleVariantIds, toggleSizeIds, } from "./toggle";
|
|
2
|
+
export type { ToggleProps, ToggleVariantId, ToggleSizeId, } from "./toggle";
|
|
3
|
+
export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
|
|
4
|
+
export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps, } from "./toggle-group";
|
|
5
|
+
export { Toggle as default } from "./toggle";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,aAAa,GACd,MAAM,UAAU,CAAC;AAOlB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAQ9D,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactElement, type Ref } from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { toggleVariants, type ToggleProps } from "./toggle";
|
|
4
|
+
type ToggleGroupBaseProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & VariantProps<typeof toggleVariants> & {
|
|
5
|
+
/** Whether all items are disabled. */
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
ref?: Ref<HTMLDivElement>;
|
|
8
|
+
};
|
|
9
|
+
export type ToggleGroupSingleProps = ToggleGroupBaseProps & {
|
|
10
|
+
type: "single";
|
|
11
|
+
value?: string;
|
|
12
|
+
defaultValue?: string;
|
|
13
|
+
onValueChange?: (value: string) => void;
|
|
14
|
+
};
|
|
15
|
+
export type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
|
|
16
|
+
type: "multiple";
|
|
17
|
+
value?: string[];
|
|
18
|
+
defaultValue?: string[];
|
|
19
|
+
onValueChange?: (value: string[]) => void;
|
|
20
|
+
};
|
|
21
|
+
export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
|
|
22
|
+
declare function ToggleGroup(props: ToggleGroupProps): ReactElement;
|
|
23
|
+
declare namespace ToggleGroup {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
export interface ToggleGroupItemProps extends Omit<ToggleProps, "pressed" | "defaultPressed" | "onPressedChange"> {
|
|
27
|
+
/** Stable identifier for this item within the group. */
|
|
28
|
+
value: string;
|
|
29
|
+
}
|
|
30
|
+
declare function ToggleGroupItem({ value, variant, size, disabled, onClick, ...props }: ToggleGroupItemProps): ReactElement;
|
|
31
|
+
declare namespace ToggleGroupItem {
|
|
32
|
+
var displayName: string;
|
|
33
|
+
}
|
|
34
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useCallback, useContext, useMemo, useState, } from "react";
|
|
4
|
+
import { cn } from "../../../lib/utils";
|
|
5
|
+
import { Toggle, } from "./toggle";
|
|
6
|
+
const ToggleGroupContext = createContext(null);
|
|
7
|
+
function useToggleGroupContext() {
|
|
8
|
+
return useContext(ToggleGroupContext);
|
|
9
|
+
}
|
|
10
|
+
function ToggleGroup(props) {
|
|
11
|
+
const { className, variant, size, disabled = false, children, ref, ...rest } = props;
|
|
12
|
+
const [internalSingle, setInternalSingle] = useState(props.type === "single" ? (props.defaultValue ?? "") : "");
|
|
13
|
+
const [internalMultiple, setInternalMultiple] = useState(props.type === "multiple" ? (props.defaultValue ?? []) : []);
|
|
14
|
+
const isControlledSingle = props.type === "single" && props.value !== undefined;
|
|
15
|
+
const isControlledMultiple = props.type === "multiple" && props.value !== undefined;
|
|
16
|
+
const propsType = props.type;
|
|
17
|
+
const singlePropValue = props.type === "single" ? props.value : undefined;
|
|
18
|
+
const multiplePropValue = props.type === "multiple" ? props.value : undefined;
|
|
19
|
+
const singleValue = useMemo(() => {
|
|
20
|
+
if (propsType !== "single")
|
|
21
|
+
return "";
|
|
22
|
+
return isControlledSingle ? (singlePropValue ?? "") : internalSingle;
|
|
23
|
+
}, [propsType, isControlledSingle, singlePropValue, internalSingle]);
|
|
24
|
+
const multipleValue = useMemo(() => {
|
|
25
|
+
if (propsType !== "multiple")
|
|
26
|
+
return [];
|
|
27
|
+
return isControlledMultiple ? (multiplePropValue ?? []) : internalMultiple;
|
|
28
|
+
}, [propsType, isControlledMultiple, multiplePropValue, internalMultiple]);
|
|
29
|
+
const isItemPressed = useCallback((value) => {
|
|
30
|
+
if (props.type === "single") {
|
|
31
|
+
return singleValue === value;
|
|
32
|
+
}
|
|
33
|
+
return multipleValue.includes(value);
|
|
34
|
+
}, [props.type, singleValue, multipleValue]);
|
|
35
|
+
const toggleItem = useCallback((value) => {
|
|
36
|
+
if (props.type === "single") {
|
|
37
|
+
const next = singleValue === value ? "" : value;
|
|
38
|
+
if (!isControlledSingle) {
|
|
39
|
+
setInternalSingle(next);
|
|
40
|
+
}
|
|
41
|
+
props.onValueChange?.(next);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const exists = multipleValue.includes(value);
|
|
45
|
+
const next = exists
|
|
46
|
+
? multipleValue.filter((v) => v !== value)
|
|
47
|
+
: [...multipleValue, value];
|
|
48
|
+
if (!isControlledMultiple) {
|
|
49
|
+
setInternalMultiple(next);
|
|
50
|
+
}
|
|
51
|
+
props.onValueChange?.(next);
|
|
52
|
+
}, [
|
|
53
|
+
props,
|
|
54
|
+
singleValue,
|
|
55
|
+
multipleValue,
|
|
56
|
+
isControlledSingle,
|
|
57
|
+
isControlledMultiple,
|
|
58
|
+
]);
|
|
59
|
+
const ctx = useMemo(() => ({
|
|
60
|
+
variant,
|
|
61
|
+
size,
|
|
62
|
+
isItemPressed,
|
|
63
|
+
toggleItem,
|
|
64
|
+
disabled,
|
|
65
|
+
}), [variant, size, isItemPressed, toggleItem, disabled]);
|
|
66
|
+
// Strip out single/multiple specific props before spreading on div.
|
|
67
|
+
const divProps = {};
|
|
68
|
+
for (const key of Object.keys(rest)) {
|
|
69
|
+
if (key === "type" ||
|
|
70
|
+
key === "value" ||
|
|
71
|
+
key === "defaultValue" ||
|
|
72
|
+
key === "onValueChange") {
|
|
73
|
+
continue;
|
|
74
|
+
}
|
|
75
|
+
divProps[key] = rest[key];
|
|
76
|
+
}
|
|
77
|
+
return (_jsx(ToggleGroupContext.Provider, { value: ctx, children: _jsx("div", { ref: ref, "data-slot": "toggle-group", "data-type": props.type, role: "group", className: cn("inline-flex items-center gap-1", className), ...divProps, children: children }) }));
|
|
78
|
+
}
|
|
79
|
+
ToggleGroup.displayName = "ToggleGroup";
|
|
80
|
+
function ToggleGroupItem({ value, variant, size, disabled, onClick, ...props }) {
|
|
81
|
+
const ctx = useToggleGroupContext();
|
|
82
|
+
if (!ctx) {
|
|
83
|
+
// Fallback: render as a standalone Toggle if not inside a group.
|
|
84
|
+
return (_jsx(Toggle, { variant: variant, size: size, disabled: disabled, onClick: onClick, ...props }));
|
|
85
|
+
}
|
|
86
|
+
const pressed = ctx.isItemPressed(value);
|
|
87
|
+
return (_jsx(Toggle, { variant: variant ?? ctx.variant, size: size ?? ctx.size, disabled: disabled || ctx.disabled, pressed: pressed, onClick: (event) => {
|
|
88
|
+
onClick?.(event);
|
|
89
|
+
if (event.defaultPrevented)
|
|
90
|
+
return;
|
|
91
|
+
ctx.toggleItem(value);
|
|
92
|
+
}, ...props }));
|
|
93
|
+
}
|
|
94
|
+
ToggleGroupItem.displayName = "ToggleGroupItem";
|
|
95
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
96
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle-group.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
export declare const toggleVariantIds: readonly ["default", "outline", "ghost", "primary", "destructive"];
|
|
4
|
+
export type ToggleVariantId = (typeof toggleVariantIds)[number];
|
|
5
|
+
export declare const toggleSizeIds: readonly ["sm", "default", "lg", "icon"];
|
|
6
|
+
export type ToggleSizeId = (typeof toggleSizeIds)[number];
|
|
7
|
+
export declare const toggleVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "ghost" | "destructive" | "outline" | "primary" | null | undefined;
|
|
9
|
+
size?: "sm" | "default" | "lg" | "icon" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof toggleVariants> {
|
|
12
|
+
/** Controlled pressed state. */
|
|
13
|
+
pressed?: boolean;
|
|
14
|
+
/** Initial pressed state when uncontrolled. */
|
|
15
|
+
defaultPressed?: boolean;
|
|
16
|
+
/** Called when the pressed state changes. */
|
|
17
|
+
onPressedChange?: (pressed: boolean) => void;
|
|
18
|
+
ref?: Ref<HTMLButtonElement>;
|
|
19
|
+
}
|
|
20
|
+
declare function Toggle({ className, variant, size, pressed: pressedProp, defaultPressed, onPressedChange, onClick, disabled, type, ref, ...props }: ToggleProps): ReactElement;
|
|
21
|
+
declare namespace Toggle {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
24
|
+
export { Toggle };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useState, } from "react";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../../../lib/utils";
|
|
6
|
+
export const toggleVariantIds = [
|
|
7
|
+
"default",
|
|
8
|
+
"outline",
|
|
9
|
+
"ghost",
|
|
10
|
+
"primary",
|
|
11
|
+
"destructive",
|
|
12
|
+
];
|
|
13
|
+
export const toggleSizeIds = [
|
|
14
|
+
"sm",
|
|
15
|
+
"default",
|
|
16
|
+
"lg",
|
|
17
|
+
"icon",
|
|
18
|
+
];
|
|
19
|
+
export const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 select-none", {
|
|
20
|
+
variants: {
|
|
21
|
+
variant: {
|
|
22
|
+
default: "bg-transparent text-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
|
|
23
|
+
outline: "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:border-accent",
|
|
24
|
+
ghost: "bg-transparent text-muted-foreground hover:text-foreground data-[state=on]:bg-muted data-[state=on]:text-foreground",
|
|
25
|
+
primary: "bg-transparent text-foreground hover:bg-primary/10 hover:text-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:hover:bg-primary/90 data-[state=on]:hover:text-primary-foreground",
|
|
26
|
+
destructive: "bg-transparent text-foreground hover:bg-destructive/10 hover:text-destructive data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground data-[state=on]:hover:bg-destructive/90 data-[state=on]:hover:text-destructive-foreground",
|
|
27
|
+
},
|
|
28
|
+
size: {
|
|
29
|
+
sm: "h-8 px-2 text-xs",
|
|
30
|
+
default: "h-9 px-3",
|
|
31
|
+
lg: "h-10 px-4",
|
|
32
|
+
icon: "h-9 w-9 p-0",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
variant: "default",
|
|
37
|
+
size: "default",
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
function Toggle({ className, variant, size, pressed: pressedProp, defaultPressed = false, onPressedChange, onClick, disabled, type, ref, ...props }) {
|
|
41
|
+
const [internalPressed, setInternalPressed] = useState(defaultPressed);
|
|
42
|
+
const isControlled = pressedProp !== undefined;
|
|
43
|
+
const pressed = isControlled ? pressedProp : internalPressed;
|
|
44
|
+
const handleClick = useCallback((event) => {
|
|
45
|
+
onClick?.(event);
|
|
46
|
+
if (event.defaultPrevented)
|
|
47
|
+
return;
|
|
48
|
+
const next = !pressed;
|
|
49
|
+
if (!isControlled) {
|
|
50
|
+
setInternalPressed(next);
|
|
51
|
+
}
|
|
52
|
+
onPressedChange?.(next);
|
|
53
|
+
}, [pressed, isControlled, onClick, onPressedChange]);
|
|
54
|
+
return (_jsx("button", { ref: ref, type: type ?? "button", "data-slot": "toggle", "data-state": pressed ? "on" : "off", "aria-pressed": pressed, disabled: disabled, onClick: handleClick, className: cn(toggleVariants({ variant, size }), className), ...props }));
|
|
55
|
+
}
|
|
56
|
+
Toggle.displayName = "Toggle";
|
|
57
|
+
export { Toggle };
|
|
58
|
+
//# sourceMappingURL=toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,WAAW,EACX,QAAQ,GAKT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS;IACT,SAAS;IACT,OAAO;IACP,SAAS;IACT,aAAa;CACuB,CAAC;AAGvC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,MAAM;CAC8B,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,+XAA+X,EAC/X;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,iGAAiG;YACnG,OAAO,EACL,gMAAgM;YAClM,KAAK,EACH,qHAAqH;YACvH,OAAO,EACL,4NAA4N;YAC9N,WAAW,EACT,oPAAoP;SAC7M;QAC3C,IAAI,EAAE;YACJ,EAAE,EAAE,kBAAkB;YACtB,OAAO,EAAE,UAAU;YACnB,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,aAAa;SACmB;KACzC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAcF,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAO,EAAE,WAAW,EACpB,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAU,cAAc,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,WAAW,KAAK,SAAS,CAAC;IAC/C,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAE7D,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAoC,EAAQ,EAAE;QAC7C,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QACnC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,CAAC,CAClD,CAAC;IAEF,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,IAAI,QAAQ,eACZ,QAAQ,gBACN,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,kBACpB,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schemavaults/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"description": "React.js UI components for SchemaVaults frontend applications",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"eslint-plugin-react": "7.37.5",
|
|
79
79
|
"eslint-plugin-react-hooks": "7.0.1",
|
|
80
80
|
"eslint-plugin-jsx-a11y": "6.10.2",
|
|
81
|
-
"@schemavaults/send-email": "0.0.
|
|
81
|
+
"@schemavaults/send-email": "0.0.18"
|
|
82
82
|
},
|
|
83
83
|
"scripts": {
|
|
84
84
|
"build:pkg": "tsc --project tsconfig.pkg.json && tsc-alias --project tsconfig.pkg.json",
|