@music-vine/cadence 2.4.0 → 2.4.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/accordion.js.map +2 -2
- package/dist/components/badge.js.map +2 -2
- package/dist/components/breadcrumb.js +1 -4
- package/dist/components/breadcrumb.js.map +2 -2
- package/dist/components/button.js +20 -17
- package/dist/components/button.js.map +2 -2
- package/dist/components/card.js +5 -1
- package/dist/components/card.js.map +2 -2
- package/dist/components/carousel.js +8 -1
- package/dist/components/carousel.js.map +2 -2
- package/dist/components/checkbox.js +13 -2
- package/dist/components/checkbox.js.map +2 -2
- package/dist/components/context-menu.js +47 -8
- package/dist/components/context-menu.js.map +2 -2
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/drawer.js.map +2 -2
- package/dist/components/index.js +7 -4
- package/dist/components/index.js.map +2 -2
- package/dist/components/input.js +5 -1
- package/dist/components/input.js.map +2 -2
- package/dist/components/popover.js +13 -15
- package/dist/components/popover.js.map +2 -2
- package/dist/components/select.js +159 -139
- package/dist/components/select.js.map +2 -2
- package/dist/components/separator.js.map +2 -2
- package/dist/components/skeleton.js +12 -14
- package/dist/components/skeleton.js.map +2 -2
- package/dist/components/stacking-card.js +1 -1
- package/dist/components/stacking-card.js.map +2 -2
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/textarea.js +7 -1
- package/dist/components/textarea.js.map +2 -2
- package/dist/components/toast.js +33 -8
- package/dist/components/toast.js.map +2 -2
- package/dist/components/typography/heading.js +8 -1
- package/dist/components/typography/heading.js.map +2 -2
- package/dist/components/typography/list.js +15 -2
- package/dist/components/typography/list.js.map +2 -2
- package/dist/components/typography/text.js +7 -1
- package/dist/components/typography/text.js.map +2 -2
- package/dist/icons/custom/boards-indicator.js.map +2 -2
- package/dist/icons/custom/exclamation-mark-in-octagon.js.map +2 -2
- package/dist/icons/custom/tick.js.map +2 -2
- package/dist/lib/utils.js +3 -1
- package/dist/lib/utils.js.map +2 -2
- package/dist/styles/index.css +14 -14
- package/dist/styles/index.v4.css +14 -14
- package/dist/test/setup.js +4 -2
- package/dist/test/setup.js.map +2 -2
- package/dist/theme/index.js +39 -13
- package/dist/theme/index.js.map +2 -2
- package/package.json +2 -2
- package/tailwind.config.ts +3 -2
- package/tailwind.config.v4.css +1 -0
|
@@ -5,147 +5,167 @@ import { cn } from "../lib/utils";
|
|
|
5
5
|
const Select = SelectPrimitive.Root;
|
|
6
6
|
const SelectGroup = SelectPrimitive.Group;
|
|
7
7
|
const SelectValue = SelectPrimitive.Value;
|
|
8
|
-
const SelectTrigger = ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
const SelectTrigger = ({
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
11
|
+
icon,
|
|
12
|
+
ref,
|
|
13
|
+
...props
|
|
14
|
+
}) => /* @__PURE__ */ jsxs(
|
|
15
|
+
SelectPrimitive.Trigger,
|
|
16
|
+
{
|
|
17
|
+
className: cn(
|
|
18
|
+
"group flex h-8 w-full items-center justify-between gap-2 border border-gray-200 border-solid bg-white px-4 py-2 text-base focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
19
|
+
"dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:focus-visible:ring-0 dark:focus-visible:ring-offset-gray-700",
|
|
20
|
+
className
|
|
21
|
+
),
|
|
22
|
+
ref,
|
|
23
|
+
...props,
|
|
24
|
+
children: [
|
|
25
|
+
children,
|
|
26
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: icon ?? /* @__PURE__ */ jsx(ChevronDown, { className: "h-5 w-5" }) })
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
const SelectScrollUpButton = ({
|
|
31
|
+
className,
|
|
32
|
+
ref,
|
|
33
|
+
...props
|
|
34
|
+
}) => /* @__PURE__ */ jsx(
|
|
35
|
+
SelectPrimitive.ScrollUpButton,
|
|
36
|
+
{
|
|
37
|
+
className: cn(
|
|
38
|
+
"flex cursor-default items-center justify-center py-1",
|
|
39
|
+
className
|
|
40
|
+
),
|
|
41
|
+
ref,
|
|
42
|
+
...props,
|
|
43
|
+
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-5 w-5" })
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
const SelectScrollDownButton = ({
|
|
47
|
+
className,
|
|
48
|
+
ref,
|
|
49
|
+
...props
|
|
50
|
+
}) => /* @__PURE__ */ jsx(
|
|
51
|
+
SelectPrimitive.ScrollDownButton,
|
|
52
|
+
{
|
|
53
|
+
className: cn(
|
|
54
|
+
"flex cursor-default items-center justify-center py-1",
|
|
55
|
+
className
|
|
56
|
+
),
|
|
57
|
+
ref,
|
|
58
|
+
...props,
|
|
59
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
const SelectContent = ({
|
|
63
|
+
className,
|
|
64
|
+
children,
|
|
65
|
+
position,
|
|
66
|
+
ref,
|
|
67
|
+
...props
|
|
68
|
+
}) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
69
|
+
SelectPrimitive.Content,
|
|
70
|
+
{
|
|
71
|
+
className: cn(
|
|
72
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-[0px_2px_4px_0px_rgba(0,_0,_0,_0.15)] data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white",
|
|
73
|
+
position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
|
|
74
|
+
className
|
|
75
|
+
),
|
|
76
|
+
position,
|
|
77
|
+
ref,
|
|
78
|
+
...props,
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
SelectPrimitive.Viewport,
|
|
83
|
+
{
|
|
84
|
+
className: cn(
|
|
85
|
+
"p-1",
|
|
86
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
87
|
+
),
|
|
88
|
+
children
|
|
89
|
+
}
|
|
16
90
|
),
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
...props,
|
|
50
|
-
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
51
|
-
}
|
|
52
|
-
);
|
|
53
|
-
};
|
|
54
|
-
const SelectContent = ({ className, children, position, ref, ...props }) => {
|
|
55
|
-
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
56
|
-
SelectPrimitive.Content,
|
|
57
|
-
{
|
|
58
|
-
className: cn(
|
|
59
|
-
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-[0px_2px_4px_0px_rgba(0,_0,_0,_0.15)] data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white",
|
|
60
|
-
position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
|
|
61
|
-
className
|
|
62
|
-
),
|
|
63
|
-
position,
|
|
64
|
-
ref,
|
|
65
|
-
...props,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
69
|
-
SelectPrimitive.Viewport,
|
|
70
|
-
{
|
|
71
|
-
className: cn(
|
|
72
|
-
"p-1",
|
|
73
|
-
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
74
|
-
),
|
|
75
|
-
children
|
|
76
|
-
}
|
|
77
|
-
),
|
|
78
|
-
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
79
|
-
]
|
|
80
|
-
}
|
|
81
|
-
) });
|
|
82
|
-
};
|
|
83
|
-
const SelectContentPopper = ({ className, children, position = "popper", ref, ...props }) => {
|
|
84
|
-
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
85
|
-
SelectPrimitive.Content,
|
|
86
|
-
{
|
|
87
|
-
className: cn(
|
|
88
|
-
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-100 data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white",
|
|
89
|
-
position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
|
|
90
|
-
className
|
|
91
|
-
),
|
|
92
|
-
position,
|
|
93
|
-
ref,
|
|
94
|
-
...props,
|
|
95
|
-
children: [
|
|
96
|
-
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
97
|
-
/* @__PURE__ */ jsx(
|
|
98
|
-
SelectPrimitive.Viewport,
|
|
99
|
-
{
|
|
100
|
-
className: cn(
|
|
101
|
-
"p-1",
|
|
102
|
-
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
103
|
-
),
|
|
104
|
-
children
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
) });
|
|
111
|
-
};
|
|
112
|
-
const SelectLabel = ({ className, ref, ...props }) => {
|
|
113
|
-
return /* @__PURE__ */ jsx(
|
|
114
|
-
SelectPrimitive.Label,
|
|
115
|
-
{
|
|
116
|
-
className: cn("py-1.5 pr-2 pl-8 font-semibold text-base", className),
|
|
117
|
-
ref,
|
|
118
|
-
...props
|
|
119
|
-
}
|
|
120
|
-
);
|
|
121
|
-
};
|
|
122
|
-
const SelectItem = ({ className, children, hideCheck, ref, ...props }) => {
|
|
123
|
-
return /* @__PURE__ */ jsxs(
|
|
124
|
-
SelectPrimitive.Item,
|
|
125
|
-
{
|
|
126
|
-
className: cn(
|
|
127
|
-
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white",
|
|
128
|
-
className
|
|
91
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
) });
|
|
95
|
+
const SelectContentPopper = ({
|
|
96
|
+
className,
|
|
97
|
+
children,
|
|
98
|
+
position = "popper",
|
|
99
|
+
ref,
|
|
100
|
+
...props
|
|
101
|
+
}) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
102
|
+
SelectPrimitive.Content,
|
|
103
|
+
{
|
|
104
|
+
className: cn(
|
|
105
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-100 data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white",
|
|
106
|
+
position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
|
|
107
|
+
className
|
|
108
|
+
),
|
|
109
|
+
position,
|
|
110
|
+
ref,
|
|
111
|
+
...props,
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
114
|
+
/* @__PURE__ */ jsx(
|
|
115
|
+
SelectPrimitive.Viewport,
|
|
116
|
+
{
|
|
117
|
+
className: cn(
|
|
118
|
+
"p-1",
|
|
119
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
120
|
+
),
|
|
121
|
+
children
|
|
122
|
+
}
|
|
129
123
|
),
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
124
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
) });
|
|
128
|
+
const SelectLabel = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
|
|
129
|
+
SelectPrimitive.Label,
|
|
130
|
+
{
|
|
131
|
+
className: cn("py-1.5 pr-2 pl-8 font-semibold text-base", className),
|
|
132
|
+
ref,
|
|
133
|
+
...props
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
const SelectItem = ({
|
|
137
|
+
className,
|
|
138
|
+
children,
|
|
139
|
+
hideCheck,
|
|
140
|
+
ref,
|
|
141
|
+
...props
|
|
142
|
+
}) => /* @__PURE__ */ jsxs(
|
|
143
|
+
SelectPrimitive.Item,
|
|
144
|
+
{
|
|
145
|
+
className: cn(
|
|
146
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white",
|
|
147
|
+
className
|
|
148
|
+
),
|
|
149
|
+
ref,
|
|
150
|
+
...props,
|
|
151
|
+
children: [
|
|
152
|
+
hideCheck ? null : /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
|
|
153
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
const SelectSeparator = ({
|
|
158
|
+
className,
|
|
159
|
+
ref,
|
|
160
|
+
...props
|
|
161
|
+
}) => /* @__PURE__ */ jsx(
|
|
162
|
+
SelectPrimitive.Separator,
|
|
163
|
+
{
|
|
164
|
+
className: cn("-mx-1 my-1 h-px bg-gray-150 dark:bg-gray-800", className),
|
|
165
|
+
ref,
|
|
166
|
+
...props
|
|
167
|
+
}
|
|
168
|
+
);
|
|
149
169
|
export {
|
|
150
170
|
Select,
|
|
151
171
|
SelectContent,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/select.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @module Select\n *\n * Dropdown select menu for single value selection. Built on Radix UI Select primitive.\n * Includes keyboard navigation, typeahead, and customizable styling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/select Shadcn Select}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/select Radix Select}\n *\n * @example\n * // Basic select\n * <Select>\n * <SelectTrigger className=\"w-48\">\n * <SelectValue placeholder=\"Select option\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * @example\n * // Grouped options\n * <SelectContent>\n * <SelectGroup>\n * <SelectLabel>Fruits</SelectLabel>\n * <SelectItem value=\"apple\">Apple</SelectItem>\n * <SelectItem value=\"banana\">Banana</SelectItem>\n * </SelectGroup>\n * <SelectSeparator />\n * <SelectGroup>\n * <SelectLabel>Vegetables</SelectLabel>\n * <SelectItem value=\"carrot\">Carrot</SelectItem>\n * </SelectGroup>\n * </SelectContent>\n */\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages select state. */\nconst Select = SelectPrimitive.Root;\n\n/** Container for grouping related select items with a label. */\nconst SelectGroup = SelectPrimitive.Group;\n\n/** Displays the selected value or placeholder text. */\nconst SelectValue = SelectPrimitive.Value;\n\n/**\n * Button that opens the select dropdown.\n * @param icon - Custom dropdown icon (defaults to ChevronDown)\n */\ninterface SelectTriggerProps\n extends Omit
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * @module Select\n *\n * Dropdown select menu for single value selection. Built on Radix UI Select primitive.\n * Includes keyboard navigation, typeahead, and customizable styling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/select Shadcn Select}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/select Radix Select}\n *\n * @example\n * // Basic select\n * <Select>\n * <SelectTrigger className=\"w-48\">\n * <SelectValue placeholder=\"Select option\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * @example\n * // Grouped options\n * <SelectContent>\n * <SelectGroup>\n * <SelectLabel>Fruits</SelectLabel>\n * <SelectItem value=\"apple\">Apple</SelectItem>\n * <SelectItem value=\"banana\">Banana</SelectItem>\n * </SelectGroup>\n * <SelectSeparator />\n * <SelectGroup>\n * <SelectLabel>Vegetables</SelectLabel>\n * <SelectItem value=\"carrot\">Carrot</SelectItem>\n * </SelectGroup>\n * </SelectContent>\n */\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages select state. */\nconst Select = SelectPrimitive.Root;\n\n/** Container for grouping related select items with a label. */\nconst SelectGroup = SelectPrimitive.Group;\n\n/** Displays the selected value or placeholder text. */\nconst SelectValue = SelectPrimitive.Value;\n\n/**\n * Button that opens the select dropdown.\n * @param icon - Custom dropdown icon (defaults to ChevronDown)\n */\ninterface SelectTriggerProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n \"ref\"\n > {\n icon?: React.ReactNode;\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Trigger>>;\n}\n\nconst SelectTrigger = ({\n className,\n children,\n icon,\n ref,\n ...props\n}: SelectTriggerProps) => (\n <SelectPrimitive.Trigger\n className={cn(\n \"group flex h-8 w-full items-center justify-between gap-2 border border-gray-200 border-solid bg-white px-4 py-2 text-base focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n \"dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:focus-visible:ring-0 dark:focus-visible:ring-offset-gray-700\",\n className\n )}\n ref={ref}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n {icon ?? <ChevronDown className=\"h-5 w-5\" />}\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\ninterface SelectScrollUpButtonProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;\n}\n\nconst SelectScrollUpButton = ({\n className,\n ref,\n ...props\n}: SelectScrollUpButtonProps) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n ref={ref}\n {...props}\n >\n <ChevronUp className=\"h-5 w-5\" />\n </SelectPrimitive.ScrollUpButton>\n);\n\ninterface SelectScrollDownButtonProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;\n}\n\nconst SelectScrollDownButton = ({\n className,\n ref,\n ...props\n}: SelectScrollDownButtonProps) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n ref={ref}\n {...props}\n >\n <ChevronDown className=\"h-4 w-4\" />\n </SelectPrimitive.ScrollDownButton>\n);\n\ninterface SelectContentProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Content>>;\n}\n\nconst SelectContent = ({\n className,\n children,\n position,\n ref,\n ...props\n}: SelectContentProps) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-[0px_2px_4px_0px_rgba(0,_0,_0,_0.15)] data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n position === \"popper\" &&\n \"data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n className\n )}\n position={position}\n ref={ref}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\ninterface SelectContentPopperProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Content>>;\n}\n\nconst SelectContentPopper = ({\n className,\n children,\n position = \"popper\",\n ref,\n ...props\n}: SelectContentPopperProps) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 border-solid bg-white text-gray-950 shadow-100 data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n position === \"popper\" &&\n \"data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n className\n )}\n position={position}\n ref={ref}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\ninterface SelectLabelProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Label>>;\n}\n\nconst SelectLabel = ({ className, ref, ...props }: SelectLabelProps) => (\n <SelectPrimitive.Label\n className={cn(\"py-1.5 pr-2 pl-8 font-semibold text-base\", className)}\n ref={ref}\n {...props}\n />\n);\n\ninterface SelectItemProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n \"ref\"\n > {\n hideCheck?: boolean;\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Item>>;\n}\n\nconst SelectItem = ({\n className,\n children,\n hideCheck,\n ref,\n ...props\n}: SelectItemProps) => (\n <SelectPrimitive.Item\n className={cn(\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white\",\n className\n )}\n ref={ref}\n {...props}\n >\n {hideCheck ? null : (\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n )}\n\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\ninterface SelectSeparatorProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>,\n \"ref\"\n > {\n ref?: Ref<React.ElementRef<typeof SelectPrimitive.Separator>>;\n}\n\nconst SelectSeparator = ({\n className,\n ref,\n ...props\n}: SelectSeparatorProps) => (\n <SelectPrimitive.Separator\n className={cn(\"-mx-1 my-1 h-px bg-gray-150 dark:bg-gray-800\", className)}\n ref={ref}\n {...props}\n />\n);\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectContentPopper,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/separator.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @module Separator\n *\n * Visual divider for separating content. Built on Radix UI Separator primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/separator Shadcn Separator}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/separator Radix Separator}\n *\n * @example\n * // Horizontal separator\n * <Separator />\n *\n * @example\n * // Vertical separator\n * <Separator orientation=\"vertical\" className=\"h-4\" />\n *\n * @example\n * // Between sections\n * <div>Section 1</div>\n * <Separator className=\"my-4\" />\n * <div>Section 2</div>\n */\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Visual divider line, horizontal or vertical.\n * @param orientation - `\"horizontal\"` (default) or `\"vertical\"`\n * @param decorative - If true, removes from accessibility tree (default: true)\n */\ninterface SeparatorProps
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * @module Separator\n *\n * Visual divider for separating content. Built on Radix UI Separator primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/separator Shadcn Separator}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/separator Radix Separator}\n *\n * @example\n * // Horizontal separator\n * <Separator />\n *\n * @example\n * // Vertical separator\n * <Separator orientation=\"vertical\" className=\"h-4\" />\n *\n * @example\n * // Between sections\n * <div>Section 1</div>\n * <Separator className=\"my-4\" />\n * <div>Section 2</div>\n */\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Visual divider line, horizontal or vertical.\n * @param orientation - `\"horizontal\"` (default) or `\"vertical\"`\n * @param decorative - If true, removes from accessibility tree (default: true)\n */\ninterface SeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n ref?: Ref<React.ElementRef<typeof SeparatorPrimitive.Root>>;\n}\n\nconst Separator = ({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ref,\n ...props\n}: SeparatorProps) => (\n <SeparatorPrimitive.Root\n className={cn(\n \"shrink-0 bg-gray-150 dark:bg-gray-800\",\n orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n className\n )}\n decorative={decorative}\n orientation={orientation}\n ref={ref}\n {...props}\n />\n);\n\nexport { Separator };\n"],
|
|
5
|
+
"mappings": "AA2CE;AArBF,SAAS,aAAa,0BAA0B;AAEhD,SAAS,UAAU;AAYnB,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,eAAe,gBAAgB;AAAA,MAC/C;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,20 +6,18 @@ const Skeleton = ({
|
|
|
6
6
|
items = 1,
|
|
7
7
|
ref,
|
|
8
8
|
...props
|
|
9
|
-
}) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
));
|
|
22
|
-
};
|
|
9
|
+
}) => Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
className: cn(
|
|
13
|
+
"animate-pulse rounded-md bg-gray-100 dark:bg-gray-900",
|
|
14
|
+
className
|
|
15
|
+
),
|
|
16
|
+
ref,
|
|
17
|
+
...props
|
|
18
|
+
},
|
|
19
|
+
i
|
|
20
|
+
));
|
|
23
21
|
const SkeletonFragment = ({
|
|
24
22
|
items = 1,
|
|
25
23
|
children
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/skeleton.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @module Skeleton\n *\n * Loading placeholder with pulse animation. Use to indicate content is loading.\n *\n * @example\n * // Single skeleton\n * <Skeleton className=\"h-4 w-48\" />\n *\n * @example\n * // Multiple skeletons\n * <Skeleton className=\"h-4 w-full\" items={3} />\n *\n * @example\n * // Complex loading state with SkeletonFragment\n * <SkeletonFragment items={3}>\n * <div className=\"flex gap-2\">\n * <Skeleton className=\"h-12 w-12 rounded-full\" />\n * <div className=\"space-y-2\">\n * <Skeleton className=\"h-4 w-32\" />\n * <Skeleton className=\"h-4 w-24\" />\n * </div>\n * </div>\n * </SkeletonFragment>\n */\nimport type { ReactNode } from \"react\";\nimport { Fragment } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Animated loading placeholder.\n * @param items - Number of skeleton elements to render (default: 1)\n */\nconst Skeleton = ({\n className,\n items = 1,\n ref,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * @module Skeleton\n *\n * Loading placeholder with pulse animation. Use to indicate content is loading.\n *\n * @example\n * // Single skeleton\n * <Skeleton className=\"h-4 w-48\" />\n *\n * @example\n * // Multiple skeletons\n * <Skeleton className=\"h-4 w-full\" items={3} />\n *\n * @example\n * // Complex loading state with SkeletonFragment\n * <SkeletonFragment items={3}>\n * <div className=\"flex gap-2\">\n * <Skeleton className=\"h-12 w-12 rounded-full\" />\n * <div className=\"space-y-2\">\n * <Skeleton className=\"h-4 w-32\" />\n * <Skeleton className=\"h-4 w-24\" />\n * </div>\n * </div>\n * </SkeletonFragment>\n */\nimport type { ReactNode } from \"react\";\nimport { Fragment } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * Animated loading placeholder.\n * @param items - Number of skeleton elements to render (default: 1)\n */\nconst Skeleton = ({\n className,\n items = 1,\n ref,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n items?: number;\n ref?: React.Ref<HTMLDivElement>;\n}) =>\n Array.from({ length: items }).map((_, i) => (\n <div\n className={cn(\n \"animate-pulse rounded-md bg-gray-100 dark:bg-gray-900\",\n className\n )}\n key={i}\n ref={ref}\n {...props}\n />\n ));\n\n/**\n * Repeats children multiple times for complex loading layouts.\n * @param items - Number of times to repeat children (default: 1)\n */\nconst SkeletonFragment = ({\n items = 1,\n children,\n}: {\n items?: number;\n children?: ReactNode;\n}) =>\n Array.from({ length: items }).map((_, i) => (\n <Fragment key={i}>{children}</Fragment>\n ));\n\nexport { Skeleton, SkeletonFragment };\n"],
|
|
5
|
+
"mappings": "AA2CI;AAjBJ,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAMnB,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAIE,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACpC;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IAEA;AAAA,IACC,GAAG;AAAA;AAAA,EAFC;AAGP,CACD;AAMH,MAAM,mBAAmB,CAAC;AAAA,EACxB,QAAQ;AAAA,EACR;AACF,MAIE,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACpC,oBAAC,YAAkB,YAAJ,CAAa,CAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|