@avenue-ticketing/ui 0.4.0 → 0.6.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/react/avatar.d.ts +42 -0
- package/dist/react/avatar.js +159 -0
- package/dist/react/avatar.js.map +1 -0
- package/dist/react/badge.d.ts +12 -0
- package/dist/react/badge.js +35 -1
- package/dist/react/badge.js.map +1 -1
- package/dist/react/button.d.ts +1 -1
- package/dist/react/button.js +3 -3
- package/dist/react/button.js.map +1 -1
- package/dist/react/calendar.d.ts +13 -0
- package/dist/react/calendar.js +4639 -0
- package/dist/react/calendar.js.map +1 -0
- package/dist/react/card.d.ts +11 -0
- package/dist/react/card.js +113 -0
- package/dist/react/card.js.map +1 -0
- package/dist/react/checkbox.d.ts +11 -0
- package/dist/react/checkbox.js +129 -0
- package/dist/react/checkbox.js.map +1 -0
- package/dist/react/datetime-picker.d.ts +21 -0
- package/dist/react/datetime-picker.js +6124 -0
- package/dist/react/datetime-picker.js.map +1 -0
- package/dist/react/dialog.js +1 -1
- package/dist/react/dialog.js.map +1 -1
- package/dist/react/dropdown.d.ts +34 -9
- package/dist/react/dropdown.js +295 -144
- package/dist/react/dropdown.js.map +1 -1
- package/dist/react/input.d.ts +7 -0
- package/dist/react/input.js +15 -2
- package/dist/react/input.js.map +1 -1
- package/dist/react/pagination.d.ts +28 -0
- package/dist/react/pagination.js +262 -0
- package/dist/react/pagination.js.map +1 -0
- package/dist/react/popover.d.ts +76 -0
- package/dist/react/popover.js +564 -0
- package/dist/react/popover.js.map +1 -0
- package/dist/react/scroll-header.js +13 -1
- package/dist/react/scroll-header.js.map +1 -1
- package/dist/react/scroll-wheel.d.ts +45 -0
- package/dist/react/scroll-wheel.js +557 -0
- package/dist/react/scroll-wheel.js.map +1 -0
- package/dist/react/select.d.ts +62 -0
- package/dist/react/select.js +889 -0
- package/dist/react/select.js.map +1 -0
- package/dist/react/sheet.js +1 -1
- package/dist/react/sheet.js.map +1 -1
- package/dist/react/switch.d.ts +38 -0
- package/dist/react/switch.js +117 -0
- package/dist/react/switch.js.map +1 -0
- package/dist/react/table-pagination.d.ts +15 -0
- package/dist/react/table-pagination.js +1153 -0
- package/dist/react/table-pagination.js.map +1 -0
- package/dist/react/table-view/column-menu.d.ts +15 -0
- package/dist/react/table-view/column-menu.js +955 -0
- package/dist/react/table-view/column-menu.js.map +1 -0
- package/dist/react/table-view/index.d.ts +70 -0
- package/dist/react/table-view/index.js +2190 -0
- package/dist/react/table-view/index.js.map +1 -0
- package/dist/react/table.d.ts +86 -0
- package/dist/react/table.js +414 -0
- package/dist/react/table.js.map +1 -0
- package/dist/react/tabs.d.ts +9 -3
- package/dist/react/tabs.js +204 -48
- package/dist/react/tabs.js.map +1 -1
- package/dist/react/textarea.d.ts +6 -0
- package/dist/react/textarea.js +33 -0
- package/dist/react/textarea.js.map +1 -0
- package/dist/react/time-picker.d.ts +22 -0
- package/dist/react/time-picker.js +856 -0
- package/dist/react/time-picker.js.map +1 -0
- package/dist/react/tooltip.d.ts +45 -0
- package/dist/react/tooltip.js +540 -0
- package/dist/react/tooltip.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
declare const CardAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
|
|
11
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/react/card.tsx
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
var Card = React.forwardRef(
|
|
11
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
12
|
+
"div",
|
|
13
|
+
{
|
|
14
|
+
ref,
|
|
15
|
+
"data-slot": "card",
|
|
16
|
+
className: cn(
|
|
17
|
+
"bg-secondary-background text-primary flex flex-col gap-6 rounded-xl border border-primary/10 py-6",
|
|
18
|
+
className
|
|
19
|
+
),
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
);
|
|
24
|
+
Card.displayName = "Card";
|
|
25
|
+
var CardHeader = React.forwardRef(
|
|
26
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
"data-slot": "card-header",
|
|
31
|
+
className: cn(
|
|
32
|
+
"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[[data-slot=card-action]]:grid-cols-[1fr_auto]",
|
|
33
|
+
className
|
|
34
|
+
),
|
|
35
|
+
...props
|
|
36
|
+
}
|
|
37
|
+
)
|
|
38
|
+
);
|
|
39
|
+
CardHeader.displayName = "CardHeader";
|
|
40
|
+
var CardTitle = React.forwardRef(
|
|
41
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
ref,
|
|
45
|
+
"data-slot": "card-title",
|
|
46
|
+
className: cn(
|
|
47
|
+
"col-start-1 row-start-1 text-2xl font-bold leading-none tracking-tight",
|
|
48
|
+
className
|
|
49
|
+
),
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
);
|
|
54
|
+
CardTitle.displayName = "CardTitle";
|
|
55
|
+
var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
ref,
|
|
59
|
+
"data-slot": "card-description",
|
|
60
|
+
className: cn(
|
|
61
|
+
"text-muted-foreground col-start-1 row-start-2 text-sm",
|
|
62
|
+
className
|
|
63
|
+
),
|
|
64
|
+
...props
|
|
65
|
+
}
|
|
66
|
+
));
|
|
67
|
+
CardDescription.displayName = "CardDescription";
|
|
68
|
+
var CardAction = React.forwardRef(
|
|
69
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
ref,
|
|
73
|
+
"data-slot": "card-action",
|
|
74
|
+
className: cn(
|
|
75
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
76
|
+
className
|
|
77
|
+
),
|
|
78
|
+
...props
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
);
|
|
82
|
+
CardAction.displayName = "CardAction";
|
|
83
|
+
var CardContent = React.forwardRef(
|
|
84
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
ref,
|
|
88
|
+
"data-slot": "card-content",
|
|
89
|
+
className: cn("px-6", className),
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
);
|
|
94
|
+
CardContent.displayName = "CardContent";
|
|
95
|
+
var CardFooter = React.forwardRef(
|
|
96
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
ref,
|
|
100
|
+
"data-slot": "card-footer",
|
|
101
|
+
className: cn(
|
|
102
|
+
"text-primary flex items-center gap-2 px-6 [.border-t]:pt-6",
|
|
103
|
+
className
|
|
104
|
+
),
|
|
105
|
+
...props
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
);
|
|
109
|
+
CardFooter.displayName = "CardFooter";
|
|
110
|
+
|
|
111
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
112
|
+
//# sourceMappingURL=card.js.map
|
|
113
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/card.tsx"],"names":[],"mappings":"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","file":"card.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Card = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card\"\n className={cn(\n \"bg-secondary-background text-primary flex flex-col gap-6 rounded-xl border border-primary/10 py-6\",\n className,\n )}\n {...props}\n />\n ),\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-header\"\n className={cn(\n \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[[data-slot=card-action]]:grid-cols-[1fr_auto]\",\n className,\n )}\n {...props}\n />\n ),\n);\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-title\"\n className={cn(\n \"col-start-1 row-start-1 text-2xl font-bold leading-none tracking-tight\",\n className,\n )}\n {...props}\n />\n ),\n);\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-description\"\n className={cn(\n \"text-muted-foreground col-start-1 row-start-2 text-sm\",\n className,\n )}\n {...props}\n />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardAction = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className,\n )}\n {...props}\n />\n ),\n);\nCardAction.displayName = \"CardAction\";\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-content\"\n className={cn(\"px-6\", className)}\n {...props}\n />\n ),\n);\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"card-footer\"\n className={cn(\n \"text-primary flex items-center gap-2 px-6 [.border-t]:pt-6\",\n className,\n )}\n {...props}\n />\n ),\n);\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n};\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type CheckboxProps = Omit<React.ComponentProps<"button">, "type" | "role" | "aria-checked" | "children"> & {
|
|
4
|
+
checked?: boolean;
|
|
5
|
+
defaultChecked?: boolean;
|
|
6
|
+
onCheckedChange?: (next: boolean) => void;
|
|
7
|
+
indeterminate?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
|
|
11
|
+
export { Checkbox, type CheckboxProps };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useState, useRef, useLayoutEffect } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
var CHECKBOX_TICK_DELAY_MS = 60;
|
|
11
|
+
var CHECKBOX_TICK_DRAW_MS = 100;
|
|
12
|
+
function CheckboxAnimatedCheckMark() {
|
|
13
|
+
const lineRef = useRef(null);
|
|
14
|
+
useLayoutEffect(() => {
|
|
15
|
+
const poly = lineRef.current;
|
|
16
|
+
if (!poly || typeof poly.getTotalLength !== "function") return;
|
|
17
|
+
const len = poly.getTotalLength();
|
|
18
|
+
if (len <= 0) return;
|
|
19
|
+
poly.style.strokeDasharray = `${len}`;
|
|
20
|
+
poly.style.strokeDashoffset = `${len}`;
|
|
21
|
+
if (typeof poly.animate !== "function") {
|
|
22
|
+
poly.style.strokeDashoffset = "0";
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
const anim = poly.animate(
|
|
26
|
+
[{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
|
|
27
|
+
{
|
|
28
|
+
duration: CHECKBOX_TICK_DRAW_MS,
|
|
29
|
+
delay: CHECKBOX_TICK_DELAY_MS,
|
|
30
|
+
easing: "cubic-bezier(0.45, 0, 0.2, 1)",
|
|
31
|
+
fill: "forwards"
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
return () => anim.cancel();
|
|
35
|
+
}, []);
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
"svg",
|
|
38
|
+
{
|
|
39
|
+
className: "size-4 shrink-0 overflow-visible",
|
|
40
|
+
viewBox: "0 0 24 24",
|
|
41
|
+
"aria-hidden": true,
|
|
42
|
+
children: /* @__PURE__ */ jsx(
|
|
43
|
+
"polyline",
|
|
44
|
+
{
|
|
45
|
+
ref: lineRef,
|
|
46
|
+
points: "4 12 9 17 20 6",
|
|
47
|
+
fill: "none",
|
|
48
|
+
stroke: "currentColor",
|
|
49
|
+
strokeWidth: "3",
|
|
50
|
+
strokeLinecap: "round",
|
|
51
|
+
strokeLinejoin: "round"
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
var Checkbox = React.forwardRef(
|
|
58
|
+
({
|
|
59
|
+
checked: checkedProp,
|
|
60
|
+
defaultChecked = false,
|
|
61
|
+
onCheckedChange,
|
|
62
|
+
indeterminate = false,
|
|
63
|
+
disabled = false,
|
|
64
|
+
className,
|
|
65
|
+
onClick,
|
|
66
|
+
...rest
|
|
67
|
+
}, ref) => {
|
|
68
|
+
const isControlled = checkedProp !== void 0;
|
|
69
|
+
const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
|
|
70
|
+
const checked = isControlled ? checkedProp : uncontrolledChecked;
|
|
71
|
+
const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
73
|
+
"button",
|
|
74
|
+
{
|
|
75
|
+
ref,
|
|
76
|
+
type: "button",
|
|
77
|
+
role: "checkbox",
|
|
78
|
+
"data-slot": "checkbox",
|
|
79
|
+
"data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
|
|
80
|
+
disabled,
|
|
81
|
+
"aria-checked": ariaChecked,
|
|
82
|
+
className: cn(
|
|
83
|
+
"ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
|
|
84
|
+
"focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
85
|
+
"disabled:cursor-not-allowed",
|
|
86
|
+
className
|
|
87
|
+
),
|
|
88
|
+
onClick: (e) => {
|
|
89
|
+
onClick?.(e);
|
|
90
|
+
if (e.defaultPrevented) return;
|
|
91
|
+
if (disabled) return;
|
|
92
|
+
if (isControlled) {
|
|
93
|
+
onCheckedChange?.(!checked);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
setUncontrolledChecked((prev) => {
|
|
97
|
+
const next = !prev;
|
|
98
|
+
onCheckedChange?.(next);
|
|
99
|
+
return next;
|
|
100
|
+
});
|
|
101
|
+
},
|
|
102
|
+
...rest,
|
|
103
|
+
children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
"aria-hidden": true,
|
|
107
|
+
className: cn(
|
|
108
|
+
"flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
|
|
109
|
+
!disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
|
|
110
|
+
disabled && (indeterminate ? "border-transparent bg-primary/45 text-primary-foreground" : checked ? "border-transparent bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
|
|
111
|
+
),
|
|
112
|
+
children: indeterminate ? /* @__PURE__ */ jsx(
|
|
113
|
+
"span",
|
|
114
|
+
{
|
|
115
|
+
className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
|
|
116
|
+
"aria-hidden": true
|
|
117
|
+
}
|
|
118
|
+
) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
|
|
119
|
+
}
|
|
120
|
+
) })
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
Checkbox.displayName = "Checkbox";
|
|
126
|
+
|
|
127
|
+
export { Checkbox };
|
|
128
|
+
//# sourceMappingURL=checkbox.js.map
|
|
129
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/checkbox.tsx"],"names":[],"mappings":"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","file":"checkbox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\nfunction CheckboxAnimatedCheckMark() {\n const lineRef = useRef<SVGPolylineElement>(null);\n\n useLayoutEffect(() => {\n const poly = lineRef.current;\n if (!poly || typeof poly.getTotalLength !== \"function\") return;\n const len = poly.getTotalLength();\n if (len <= 0) return;\n\n poly.style.strokeDasharray = `${len}`;\n poly.style.strokeDashoffset = `${len}`;\n\n if (typeof poly.animate !== \"function\") {\n poly.style.strokeDashoffset = \"0\";\n return;\n }\n\n const anim = poly.animate(\n [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],\n {\n duration: CHECKBOX_TICK_DRAW_MS,\n delay: CHECKBOX_TICK_DELAY_MS,\n easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n fill: \"forwards\",\n },\n );\n return () => anim.cancel();\n }, []);\n\n return (\n <svg\n className=\"size-4 shrink-0 overflow-visible\"\n viewBox=\"0 0 24 24\"\n aria-hidden\n >\n <polyline\n ref={lineRef}\n points=\"4 12 9 17 20 6\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n}\n\nexport type CheckboxProps = Omit<\n React.ComponentProps<\"button\">,\n \"type\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n checked?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (next: boolean) => void;\n // tri-state: same frame as checked; center shows a visible “blank” (inner surface)\n indeterminate?: boolean;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n checked: checkedProp,\n defaultChecked = false,\n onCheckedChange,\n indeterminate = false,\n disabled = false,\n className,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const isControlled = checkedProp !== undefined;\n const [uncontrolledChecked, setUncontrolledChecked] =\n useState(defaultChecked);\n const checked = isControlled ? checkedProp : uncontrolledChecked;\n const ariaChecked: boolean | \"mixed\" = indeterminate\n ? \"mixed\"\n : checked\n ? true\n : false;\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"checkbox\"\n data-slot=\"checkbox\"\n data-state={\n indeterminate ? \"indeterminate\" : checked ? \"checked\" : \"unchecked\"\n }\n disabled={disabled}\n aria-checked={ariaChecked}\n className={cn(\n \"ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none\",\n \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"disabled:cursor-not-allowed\",\n className,\n )}\n onClick={(e) => {\n onClick?.(e);\n if (e.defaultPrevented) return;\n if (disabled) return;\n if (isControlled) {\n onCheckedChange?.(!checked);\n return;\n }\n setUncontrolledChecked((prev) => {\n const next = !prev;\n onCheckedChange?.(next);\n return next;\n });\n }}\n {...rest}\n >\n <span className=\"pointer-events-none\">\n <span\n aria-hidden\n className={cn(\n \"flex size-5 shrink-0 items-center justify-center rounded-[4px] border\",\n !disabled &&\n (indeterminate\n ? \"border-primary bg-primary text-background\"\n : checked\n ? \"border-primary bg-primary text-background\"\n : \"border-primary/20 bg-background\"),\n disabled &&\n (indeterminate\n ? \"border-transparent bg-primary/45 text-primary-foreground\"\n : checked\n ? \"border-transparent bg-primary/45 text-primary-foreground\"\n : \"border-primary/10 bg-muted/25\"),\n )}\n >\n {indeterminate ? (\n <span\n className=\"size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background\"\n aria-hidden\n />\n ) : checked ? (\n <CheckboxAnimatedCheckMark />\n ) : null}\n </span>\n </span>\n </button>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
declare const DATE_TIME_PICKER_DEFAULT_FORMAT: Intl.DateTimeFormatOptions;
|
|
5
|
+
/** Same default as the previous built-in trigger label (locale-aware). */
|
|
6
|
+
declare function formatDateTimePickerLabel(value: Date | undefined, placeholder: string, formatOptions?: Intl.DateTimeFormatOptions): string;
|
|
7
|
+
type DateTimePickerProps = {
|
|
8
|
+
value?: Date;
|
|
9
|
+
defaultValue?: Date;
|
|
10
|
+
onChange?: (value: Date | undefined) => void;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Element that toggles the popover (wrapped in `PopoverTrigger` with `asChild`). */
|
|
14
|
+
trigger: React.ReactElement;
|
|
15
|
+
/** Controlled popover visibility; pair with `onOpenChange`. */
|
|
16
|
+
open?: boolean;
|
|
17
|
+
onOpenChange?: (open: boolean) => void;
|
|
18
|
+
};
|
|
19
|
+
declare function DateTimePicker(props: DateTimePickerProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { DATE_TIME_PICKER_DEFAULT_FORMAT, DateTimePicker, type DateTimePickerProps, formatDateTimePickerLabel };
|