@7onic-ui/react 0.3.9 → 0.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/chart.mjs +3 -9
- package/dist/chart.mjs.map +1 -1
- package/dist/chunk-2WIIXHOV.mjs +148 -0
- package/dist/chunk-2WIIXHOV.mjs.map +1 -0
- package/dist/chunk-53MIUPSY.mjs +13 -0
- package/dist/chunk-53MIUPSY.mjs.map +1 -0
- package/dist/chunk-BN5BEA3V.mjs +195 -0
- package/dist/chunk-BN5BEA3V.mjs.map +1 -0
- package/dist/chunk-C5D3VRNJ.mjs +504 -0
- package/dist/chunk-C5D3VRNJ.mjs.map +1 -0
- package/dist/chunk-COW3B62M.mjs +214 -0
- package/dist/chunk-COW3B62M.mjs.map +1 -0
- package/dist/chunk-CTH6SN5Y.mjs +114 -0
- package/dist/chunk-CTH6SN5Y.mjs.map +1 -0
- package/dist/chunk-D3NTQNDW.mjs +440 -0
- package/dist/chunk-D3NTQNDW.mjs.map +1 -0
- package/dist/chunk-DDRYEJBJ.mjs +164 -0
- package/dist/chunk-DDRYEJBJ.mjs.map +1 -0
- package/dist/chunk-DJAEXCRU.mjs +190 -0
- package/dist/chunk-DJAEXCRU.mjs.map +1 -0
- package/dist/chunk-DYYQOHQR.mjs +214 -0
- package/dist/chunk-DYYQOHQR.mjs.map +1 -0
- package/dist/chunk-EG2GTK65.mjs +443 -0
- package/dist/chunk-EG2GTK65.mjs.map +1 -0
- package/dist/chunk-FHUAH6AJ.mjs +93 -0
- package/dist/chunk-FHUAH6AJ.mjs.map +1 -0
- package/dist/chunk-GD4YE5AE.mjs +209 -0
- package/dist/chunk-GD4YE5AE.mjs.map +1 -0
- package/dist/chunk-HHX4GABH.mjs +129 -0
- package/dist/chunk-HHX4GABH.mjs.map +1 -0
- package/dist/chunk-HS2VRYSX.mjs +148 -0
- package/dist/chunk-HS2VRYSX.mjs.map +1 -0
- package/dist/chunk-IHHI3LIN.mjs +155 -0
- package/dist/chunk-IHHI3LIN.mjs.map +1 -0
- package/dist/chunk-IJ2FZ3L5.mjs +159 -0
- package/dist/chunk-IJ2FZ3L5.mjs.map +1 -0
- package/dist/chunk-IPCIC2BI.mjs +148 -0
- package/dist/chunk-IPCIC2BI.mjs.map +1 -0
- package/dist/chunk-JCJEVXER.mjs +170 -0
- package/dist/chunk-JCJEVXER.mjs.map +1 -0
- package/dist/chunk-KBPYAMGS.mjs +157 -0
- package/dist/chunk-KBPYAMGS.mjs.map +1 -0
- package/dist/chunk-L55ABE4H.mjs +283 -0
- package/dist/chunk-L55ABE4H.mjs.map +1 -0
- package/dist/chunk-LJJ6K4IU.mjs +318 -0
- package/dist/chunk-LJJ6K4IU.mjs.map +1 -0
- package/dist/chunk-ND6TUVP2.mjs +148 -0
- package/dist/chunk-ND6TUVP2.mjs.map +1 -0
- package/dist/chunk-NWFMJWGX.mjs +165 -0
- package/dist/chunk-NWFMJWGX.mjs.map +1 -0
- package/dist/chunk-PTAPPOKU.mjs +117 -0
- package/dist/chunk-PTAPPOKU.mjs.map +1 -0
- package/dist/chunk-PVTBM7V7.mjs +316 -0
- package/dist/chunk-PVTBM7V7.mjs.map +1 -0
- package/dist/chunk-Q5WVLK2L.mjs +77 -0
- package/dist/chunk-Q5WVLK2L.mjs.map +1 -0
- package/dist/chunk-R7FJEO4K.mjs +252 -0
- package/dist/chunk-R7FJEO4K.mjs.map +1 -0
- package/dist/chunk-RKSB2N5L.mjs +206 -0
- package/dist/chunk-RKSB2N5L.mjs.map +1 -0
- package/dist/chunk-S4DGVKBK.mjs +151 -0
- package/dist/chunk-S4DGVKBK.mjs.map +1 -0
- package/dist/chunk-S4T4PU7F.mjs +114 -0
- package/dist/chunk-S4T4PU7F.mjs.map +1 -0
- package/dist/chunk-SDDAGZWA.mjs +224 -0
- package/dist/chunk-SDDAGZWA.mjs.map +1 -0
- package/dist/chunk-SZPZOGPC.mjs +394 -0
- package/dist/chunk-SZPZOGPC.mjs.map +1 -0
- package/dist/chunk-T5A4APEL.mjs +140 -0
- package/dist/chunk-T5A4APEL.mjs.map +1 -0
- package/dist/chunk-V5UFWYFI.mjs +255 -0
- package/dist/chunk-V5UFWYFI.mjs.map +1 -0
- package/dist/chunk-W6YNEU53.mjs +175 -0
- package/dist/chunk-W6YNEU53.mjs.map +1 -0
- package/dist/chunk-XK52LYR4.mjs +182 -0
- package/dist/chunk-XK52LYR4.mjs.map +1 -0
- package/dist/chunk-YIAH6KHV.mjs +164 -0
- package/dist/chunk-YIAH6KHV.mjs.map +1 -0
- package/dist/chunk-YZ7HHFKA.mjs +375 -0
- package/dist/chunk-YZ7HHFKA.mjs.map +1 -0
- package/dist/chunk-ZDRUTJ4T.mjs +119 -0
- package/dist/chunk-ZDRUTJ4T.mjs.map +1 -0
- package/dist/components/accordion.mjs +19 -0
- package/dist/components/accordion.mjs.map +1 -0
- package/dist/components/alert.mjs +15 -0
- package/dist/components/alert.mjs.map +1 -0
- package/dist/components/avatar.mjs +23 -0
- package/dist/components/avatar.mjs.map +1 -0
- package/dist/components/badge.mjs +11 -0
- package/dist/components/badge.mjs.map +1 -0
- package/dist/components/breadcrumb.mjs +23 -0
- package/dist/components/breadcrumb.mjs.map +1 -0
- package/dist/components/button-group.mjs +11 -0
- package/dist/components/button-group.mjs.map +1 -0
- package/dist/components/button.mjs +12 -0
- package/dist/components/button.mjs.map +1 -0
- package/dist/components/card.mjs +25 -0
- package/dist/components/card.mjs.map +1 -0
- package/dist/components/chat-input.mjs +15 -0
- package/dist/components/chat-input.mjs.map +1 -0
- package/dist/components/chat-message.mjs +17 -0
- package/dist/components/chat-message.mjs.map +1 -0
- package/dist/components/checkbox.mjs +12 -0
- package/dist/components/checkbox.mjs.map +1 -0
- package/dist/components/divider.mjs +11 -0
- package/dist/components/divider.mjs.map +1 -0
- package/dist/components/drawer.mjs +33 -0
- package/dist/components/drawer.mjs.map +1 -0
- package/dist/components/dropdown.mjs +35 -0
- package/dist/components/dropdown.mjs.map +1 -0
- package/dist/components/field.mjs +19 -0
- package/dist/components/field.mjs.map +1 -0
- package/dist/components/icon-button.mjs +12 -0
- package/dist/components/icon-button.mjs.map +1 -0
- package/dist/components/input.mjs +12 -0
- package/dist/components/input.mjs.map +1 -0
- package/dist/components/metric-card.mjs +23 -0
- package/dist/components/metric-card.mjs.map +1 -0
- package/dist/components/modal.mjs +57 -0
- package/dist/components/modal.mjs.map +1 -0
- package/dist/components/navigation-menu.mjs +27 -0
- package/dist/components/navigation-menu.mjs.map +1 -0
- package/dist/components/pagination.mjs +33 -0
- package/dist/components/pagination.mjs.map +1 -0
- package/dist/components/popover.mjs +23 -0
- package/dist/components/popover.mjs.map +1 -0
- package/dist/components/progress.mjs +11 -0
- package/dist/components/progress.mjs.map +1 -0
- package/dist/components/quick-reply.mjs +15 -0
- package/dist/components/quick-reply.mjs.map +1 -0
- package/dist/components/radio-group.mjs +16 -0
- package/dist/components/radio-group.mjs.map +1 -0
- package/dist/components/segmented.mjs +15 -0
- package/dist/components/segmented.mjs.map +1 -0
- package/dist/components/select.mjs +24 -0
- package/dist/components/select.mjs.map +1 -0
- package/dist/components/skeleton.mjs +11 -0
- package/dist/components/skeleton.mjs.map +1 -0
- package/dist/components/slider.mjs +12 -0
- package/dist/components/slider.mjs.map +1 -0
- package/dist/components/spinner.mjs +11 -0
- package/dist/components/spinner.mjs.map +1 -0
- package/dist/components/switch.mjs +12 -0
- package/dist/components/switch.mjs.map +1 -0
- package/dist/components/table.mjs +23 -0
- package/dist/components/table.mjs.map +1 -0
- package/dist/components/tabs.mjs +19 -0
- package/dist/components/tabs.mjs.map +1 -0
- package/dist/components/textarea.mjs +12 -0
- package/dist/components/textarea.mjs.map +1 -0
- package/dist/components/toast.mjs +13 -0
- package/dist/components/toast.mjs.map +1 -0
- package/dist/components/toggle-group.mjs +15 -0
- package/dist/components/toggle-group.mjs.map +1 -0
- package/dist/components/toggle.mjs +11 -0
- package/dist/components/toggle.mjs.map +1 -0
- package/dist/components/tooltip.mjs +21 -0
- package/dist/components/tooltip.mjs.map +1 -0
- package/dist/components/typing-indicator.mjs +11 -0
- package/dist/components/typing-indicator.mjs.map +1 -0
- package/dist/index.d.ts +11 -2
- package/dist/index.js +95 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +296 -7536
- package/dist/index.mjs.map +1 -1
- package/llms.txt +50 -32
- package/package.json +14 -14
- package/dist/chart.d.mts +0 -147
- package/dist/index.d.mts +0 -1535
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
cn
|
|
4
|
+
} from "./chunk-53MIUPSY.mjs";
|
|
5
|
+
|
|
6
|
+
// src/components/ui/avatar.tsx
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
9
|
+
import { cva } from "class-variance-authority";
|
|
10
|
+
var avatarVariants = cva(
|
|
11
|
+
"relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none",
|
|
12
|
+
{
|
|
13
|
+
variants: {
|
|
14
|
+
size: {
|
|
15
|
+
xs: "w-6 h-6",
|
|
16
|
+
// 24px
|
|
17
|
+
sm: "w-8 h-8",
|
|
18
|
+
// 32px
|
|
19
|
+
default: "w-10 h-10",
|
|
20
|
+
// 40px
|
|
21
|
+
lg: "w-12 h-12",
|
|
22
|
+
// 48px
|
|
23
|
+
xl: "w-16 h-16",
|
|
24
|
+
// 64px
|
|
25
|
+
"2xl": "w-20 h-20"
|
|
26
|
+
// 80px
|
|
27
|
+
},
|
|
28
|
+
shape: {
|
|
29
|
+
circle: "rounded-full",
|
|
30
|
+
square: "rounded-xl"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
defaultVariants: { size: "default", shape: "circle" }
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
var statusDotSizes = {
|
|
37
|
+
xs: "w-1.5 h-1.5",
|
|
38
|
+
sm: "w-2 h-2",
|
|
39
|
+
default: "w-2.5 h-2.5",
|
|
40
|
+
lg: "w-3 h-3",
|
|
41
|
+
xl: "w-3.5 h-3.5",
|
|
42
|
+
"2xl": "w-4 h-4"
|
|
43
|
+
};
|
|
44
|
+
var statusColors = {
|
|
45
|
+
online: "bg-success",
|
|
46
|
+
offline: "bg-text-muted",
|
|
47
|
+
busy: "bg-error",
|
|
48
|
+
away: "bg-warning"
|
|
49
|
+
};
|
|
50
|
+
var fallbackFontSizes = {
|
|
51
|
+
xs: "text-2xs",
|
|
52
|
+
sm: "text-xs",
|
|
53
|
+
default: "text-sm",
|
|
54
|
+
lg: "text-base",
|
|
55
|
+
xl: "text-xl",
|
|
56
|
+
"2xl": "text-2xl"
|
|
57
|
+
};
|
|
58
|
+
var groupNegativeMargins = {
|
|
59
|
+
xs: "-space-x-1.5",
|
|
60
|
+
sm: "-space-x-2",
|
|
61
|
+
default: "-space-x-2.5",
|
|
62
|
+
lg: "-space-x-3",
|
|
63
|
+
xl: "-space-x-4",
|
|
64
|
+
"2xl": "-space-x-5"
|
|
65
|
+
};
|
|
66
|
+
var avatarColors = [
|
|
67
|
+
{ vivid: { bg: "bg-[#DC2626]", text: "text-white" }, soft: { bg: "bg-[#FEE2E2]", text: "text-[#DC2626]" } },
|
|
68
|
+
// red
|
|
69
|
+
{ vivid: { bg: "bg-[#EA580C]", text: "text-white" }, soft: { bg: "bg-[#FFEDD5]", text: "text-[#EA580C]" } },
|
|
70
|
+
// orange
|
|
71
|
+
{ vivid: { bg: "bg-[#D97706]", text: "text-white" }, soft: { bg: "bg-[#FEF3C7]", text: "text-[#B45309]" } },
|
|
72
|
+
// amber
|
|
73
|
+
{ vivid: { bg: "bg-[#CA8A04]", text: "text-white" }, soft: { bg: "bg-[#FEF9C3]", text: "text-[#A16207]" } },
|
|
74
|
+
// yellow
|
|
75
|
+
{ vivid: { bg: "bg-[#059669]", text: "text-white" }, soft: { bg: "bg-[#D1FAE5]", text: "text-[#047857]" } },
|
|
76
|
+
// emerald
|
|
77
|
+
{ vivid: { bg: "bg-[#0D9488]", text: "text-white" }, soft: { bg: "bg-[#CCFBF1]", text: "text-[#0F766E]" } },
|
|
78
|
+
// teal
|
|
79
|
+
{ vivid: { bg: "bg-[#0891B2]", text: "text-white" }, soft: { bg: "bg-[#CFFAFE]", text: "text-[#0E7490]" } },
|
|
80
|
+
// cyan
|
|
81
|
+
{ vivid: { bg: "bg-[#2563EB]", text: "text-white" }, soft: { bg: "bg-[#DBEAFE]", text: "text-[#1D4ED8]" } },
|
|
82
|
+
// blue
|
|
83
|
+
{ vivid: { bg: "bg-[#4F46E5]", text: "text-white" }, soft: { bg: "bg-[#E0E7FF]", text: "text-[#4338CA]" } },
|
|
84
|
+
// indigo
|
|
85
|
+
{ vivid: { bg: "bg-[#7C3AED]", text: "text-white" }, soft: { bg: "bg-[#EDE9FE]", text: "text-[#6D28D9]" } },
|
|
86
|
+
// violet
|
|
87
|
+
{ vivid: { bg: "bg-[#9333EA]", text: "text-white" }, soft: { bg: "bg-[#F3E8FF]", text: "text-[#7E22CE]" } },
|
|
88
|
+
// purple
|
|
89
|
+
{ vivid: { bg: "bg-[#DB2777]", text: "text-white" }, soft: { bg: "bg-[#FCE7F3]", text: "text-[#BE185D]" } }
|
|
90
|
+
// pink
|
|
91
|
+
];
|
|
92
|
+
function getAvatarInitials(name, maxChars = 2) {
|
|
93
|
+
const trimmed = name.trim();
|
|
94
|
+
if (!trimmed) return "";
|
|
95
|
+
const cjkRegex = /[\u3000-\u9fff\uac00-\ud7af\uff00-\uffef]/;
|
|
96
|
+
if (cjkRegex.test(trimmed.charAt(0))) {
|
|
97
|
+
return trimmed.slice(0, maxChars);
|
|
98
|
+
}
|
|
99
|
+
const parts = trimmed.split(/[\s\-_.]+/).filter(Boolean);
|
|
100
|
+
if (parts.length === 1) {
|
|
101
|
+
return parts[0].charAt(0).toUpperCase();
|
|
102
|
+
}
|
|
103
|
+
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase().slice(0, maxChars);
|
|
104
|
+
}
|
|
105
|
+
function getAvatarColor(name, variant = "vivid") {
|
|
106
|
+
let hash = 5381;
|
|
107
|
+
for (let i = 0; i < name.length; i++) {
|
|
108
|
+
hash = (hash << 5) + hash ^ name.charCodeAt(i);
|
|
109
|
+
}
|
|
110
|
+
return avatarColors[(hash >>> 0) % avatarColors.length][variant];
|
|
111
|
+
}
|
|
112
|
+
var Avatar = React.forwardRef(({ className, size, shape, status, children, ...props }, ref) => {
|
|
113
|
+
const resolvedSize = size || "default";
|
|
114
|
+
if (!status) {
|
|
115
|
+
return /* @__PURE__ */ React.createElement(
|
|
116
|
+
AvatarPrimitive.Root,
|
|
117
|
+
{
|
|
118
|
+
ref,
|
|
119
|
+
className: cn(avatarVariants({ size, shape }), className),
|
|
120
|
+
...props
|
|
121
|
+
},
|
|
122
|
+
children
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
return /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex" }, /* @__PURE__ */ React.createElement(
|
|
126
|
+
AvatarPrimitive.Root,
|
|
127
|
+
{
|
|
128
|
+
ref,
|
|
129
|
+
className: cn(avatarVariants({ size, shape }), className),
|
|
130
|
+
...props
|
|
131
|
+
},
|
|
132
|
+
children
|
|
133
|
+
), /* @__PURE__ */ React.createElement(
|
|
134
|
+
"span",
|
|
135
|
+
{
|
|
136
|
+
className: cn(
|
|
137
|
+
"absolute bottom-0 right-0 rounded-full ring-2 ring-background",
|
|
138
|
+
statusDotSizes[resolvedSize],
|
|
139
|
+
statusColors[status]
|
|
140
|
+
)
|
|
141
|
+
}
|
|
142
|
+
));
|
|
143
|
+
});
|
|
144
|
+
Avatar.displayName = "Avatar";
|
|
145
|
+
var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
146
|
+
AvatarPrimitive.Image,
|
|
147
|
+
{
|
|
148
|
+
ref,
|
|
149
|
+
className: cn("object-cover w-full h-full", className),
|
|
150
|
+
...props
|
|
151
|
+
}
|
|
152
|
+
));
|
|
153
|
+
AvatarImage.displayName = "AvatarImage";
|
|
154
|
+
var AvatarFallback = React.forwardRef(({ className, size, name, colorized, colorVariant = "vivid", children, ...props }, ref) => {
|
|
155
|
+
const resolvedSize = size || "default";
|
|
156
|
+
const colorKey = name || colorized;
|
|
157
|
+
const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null;
|
|
158
|
+
const resolvedChildren = children ?? (name ? getAvatarInitials(name) : void 0);
|
|
159
|
+
return /* @__PURE__ */ React.createElement(
|
|
160
|
+
AvatarPrimitive.Fallback,
|
|
161
|
+
{
|
|
162
|
+
ref,
|
|
163
|
+
className: cn(
|
|
164
|
+
"flex items-center justify-center w-full h-full font-semibold",
|
|
165
|
+
color ? [color.bg, color.text] : "bg-background-muted text-text-muted",
|
|
166
|
+
fallbackFontSizes[resolvedSize],
|
|
167
|
+
className
|
|
168
|
+
),
|
|
169
|
+
...props
|
|
170
|
+
},
|
|
171
|
+
resolvedChildren
|
|
172
|
+
);
|
|
173
|
+
});
|
|
174
|
+
AvatarFallback.displayName = "AvatarFallback";
|
|
175
|
+
var AvatarGroup = React.forwardRef(
|
|
176
|
+
({ className, max, size = "default", shape = "circle", children, ...props }, ref) => {
|
|
177
|
+
const childArray = React.Children.toArray(children);
|
|
178
|
+
const visibleChildren = max ? childArray.slice(0, max) : childArray;
|
|
179
|
+
const overflowCount = max ? childArray.length - max : 0;
|
|
180
|
+
return /* @__PURE__ */ React.createElement(
|
|
181
|
+
"div",
|
|
182
|
+
{
|
|
183
|
+
ref,
|
|
184
|
+
className: cn(
|
|
185
|
+
"flex items-center",
|
|
186
|
+
groupNegativeMargins[size],
|
|
187
|
+
"[&>*]:ring-2 [&>*]:ring-background",
|
|
188
|
+
className
|
|
189
|
+
),
|
|
190
|
+
...props
|
|
191
|
+
},
|
|
192
|
+
visibleChildren,
|
|
193
|
+
overflowCount > 0 && /* @__PURE__ */ React.createElement(Avatar, { size, shape }, /* @__PURE__ */ React.createElement(AvatarFallback, { size }, "+", overflowCount))
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
);
|
|
197
|
+
AvatarGroup.displayName = "AvatarGroup";
|
|
198
|
+
|
|
199
|
+
export {
|
|
200
|
+
avatarVariants,
|
|
201
|
+
avatarColors,
|
|
202
|
+
getAvatarInitials,
|
|
203
|
+
getAvatarColor,
|
|
204
|
+
Avatar,
|
|
205
|
+
AvatarImage,
|
|
206
|
+
AvatarFallback,
|
|
207
|
+
AvatarGroup
|
|
208
|
+
};
|
|
209
|
+
//# sourceMappingURL=chunk-GD4YE5AE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Avatar root variants\nconst avatarVariants = cva(\n 'relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none',\n {\n variants: {\n size: {\n xs: 'w-6 h-6', // 24px\n sm: 'w-8 h-8', // 32px\n default: 'w-10 h-10', // 40px\n lg: 'w-12 h-12', // 48px\n xl: 'w-16 h-16', // 64px\n '2xl': 'w-20 h-20', // 80px\n },\n shape: {\n circle: 'rounded-full',\n square: 'rounded-xl',\n },\n },\n defaultVariants: { size: 'default', shape: 'circle' },\n }\n)\n\n// Status dot sizes per avatar size\nconst statusDotSizes = {\n xs: 'w-1.5 h-1.5',\n sm: 'w-2 h-2',\n default: 'w-2.5 h-2.5',\n lg: 'w-3 h-3',\n xl: 'w-3.5 h-3.5',\n '2xl': 'w-4 h-4',\n}\n\n// Status dot colors\nconst statusColors = {\n online: 'bg-success',\n offline: 'bg-text-muted',\n busy: 'bg-error',\n away: 'bg-warning',\n}\n\n// Fallback font sizes per avatar size\nconst fallbackFontSizes = {\n xs: 'text-2xs',\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n}\n\n// Negative margin per size for AvatarGroup overlap\nconst groupNegativeMargins = {\n xs: '-space-x-1.5',\n sm: '-space-x-2',\n default: '-space-x-2.5',\n lg: '-space-x-3',\n xl: '-space-x-4',\n '2xl': '-space-x-5',\n}\n\n// Colorized fallback palette (12 colors × 2 variants) — exception 13 in TOKEN-EXCEPTIONS.md\nconst avatarColors = [\n { vivid: { bg: 'bg-[#DC2626]', text: 'text-white' }, soft: { bg: 'bg-[#FEE2E2]', text: 'text-[#DC2626]' } }, // red\n { vivid: { bg: 'bg-[#EA580C]', text: 'text-white' }, soft: { bg: 'bg-[#FFEDD5]', text: 'text-[#EA580C]' } }, // orange\n { vivid: { bg: 'bg-[#D97706]', text: 'text-white' }, soft: { bg: 'bg-[#FEF3C7]', text: 'text-[#B45309]' } }, // amber\n { vivid: { bg: 'bg-[#CA8A04]', text: 'text-white' }, soft: { bg: 'bg-[#FEF9C3]', text: 'text-[#A16207]' } }, // yellow\n { vivid: { bg: 'bg-[#059669]', text: 'text-white' }, soft: { bg: 'bg-[#D1FAE5]', text: 'text-[#047857]' } }, // emerald\n { vivid: { bg: 'bg-[#0D9488]', text: 'text-white' }, soft: { bg: 'bg-[#CCFBF1]', text: 'text-[#0F766E]' } }, // teal\n { vivid: { bg: 'bg-[#0891B2]', text: 'text-white' }, soft: { bg: 'bg-[#CFFAFE]', text: 'text-[#0E7490]' } }, // cyan\n { vivid: { bg: 'bg-[#2563EB]', text: 'text-white' }, soft: { bg: 'bg-[#DBEAFE]', text: 'text-[#1D4ED8]' } }, // blue\n { vivid: { bg: 'bg-[#4F46E5]', text: 'text-white' }, soft: { bg: 'bg-[#E0E7FF]', text: 'text-[#4338CA]' } }, // indigo\n { vivid: { bg: 'bg-[#7C3AED]', text: 'text-white' }, soft: { bg: 'bg-[#EDE9FE]', text: 'text-[#6D28D9]' } }, // violet\n { vivid: { bg: 'bg-[#9333EA]', text: 'text-white' }, soft: { bg: 'bg-[#F3E8FF]', text: 'text-[#7E22CE]' } }, // purple\n { vivid: { bg: 'bg-[#DB2777]', text: 'text-white' }, soft: { bg: 'bg-[#FCE7F3]', text: 'text-[#BE185D]' } }, // pink\n] as const\n\nexport type AvatarColorVariant = 'vivid' | 'soft'\n\n/** Extract initials from a name string (e.g. \"John Doe\" → \"JD\", \"김민수\" → \"김민\") */\nfunction getAvatarInitials(name: string, maxChars = 2): string {\n const trimmed = name.trim()\n if (!trimmed) return ''\n\n // CJK: use first character(s) directly\n const cjkRegex = /[\\u3000-\\u9fff\\uac00-\\ud7af\\uff00-\\uffef]/\n if (cjkRegex.test(trimmed.charAt(0))) {\n return trimmed.slice(0, maxChars)\n }\n\n // Split on spaces, hyphens, underscores, dots\n const parts = trimmed.split(/[\\s\\-_.]+/).filter(Boolean)\n if (parts.length === 1) {\n return parts[0].charAt(0).toUpperCase()\n }\n\n // First + last part initials\n return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0))\n .toUpperCase()\n .slice(0, maxChars)\n}\n\n/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */\nfunction getAvatarColor(name: string, variant: AvatarColorVariant = 'vivid') {\n let hash = 5381\n for (let i = 0; i < name.length; i++) {\n hash = ((hash << 5) + hash) ^ name.charCodeAt(i)\n }\n return avatarColors[(hash >>> 0) % avatarColors.length][variant]\n}\n\nexport type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\nexport type AvatarShape = 'circle' | 'square'\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport interface AvatarProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n VariantProps<typeof avatarVariants> {\n status?: AvatarStatus\n}\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(({ className, size, shape, status, children, ...props }, ref) => {\n const resolvedSize = size || 'default'\n\n if (!status) {\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ size, shape }), className)}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n )\n }\n\n // Wrap with an outer span so the status dot is not clipped by overflow-hidden\n return (\n <span className=\"relative inline-flex\">\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ size, shape }), className)}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n <span\n className={cn(\n 'absolute bottom-0 right-0 rounded-full ring-2 ring-background',\n statusDotSizes[resolvedSize],\n statusColors[status]\n )}\n />\n </span>\n )\n})\nAvatar.displayName = 'Avatar'\n\nexport interface AvatarImageProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n AvatarImageProps\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn('object-cover w-full h-full', className)}\n {...props}\n />\n))\nAvatarImage.displayName = 'AvatarImage'\n\nexport interface AvatarFallbackProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n size?: AvatarSize\n /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */\n name?: string\n /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */\n colorized?: string\n /** Color style: \"vivid\" (strong bg + white text) or \"soft\" (pastel bg + dark text). Default: \"vivid\" */\n colorVariant?: AvatarColorVariant\n}\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, size, name, colorized, colorVariant = 'vivid', children, ...props }, ref) => {\n const resolvedSize = size || 'default'\n const colorKey = name || colorized\n const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null\n const resolvedChildren = children ?? (name ? getAvatarInitials(name) : undefined)\n return (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n 'flex items-center justify-center w-full h-full font-semibold',\n color ? [color.bg, color.text] : 'bg-background-muted text-text-muted',\n fallbackFontSizes[resolvedSize],\n className\n )}\n {...props}\n >\n {resolvedChildren}\n </AvatarPrimitive.Fallback>\n )\n})\nAvatarFallback.displayName = 'AvatarFallback'\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n max?: number\n size?: AvatarSize\n shape?: AvatarShape\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n ({ className, max, size = 'default', shape = 'circle', children, ...props }, ref) => {\n const childArray = React.Children.toArray(children)\n const visibleChildren = max ? childArray.slice(0, max) : childArray\n const overflowCount = max ? childArray.length - max : 0\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center',\n groupNegativeMargins[size],\n '[&>*]:ring-2 [&>*]:ring-background',\n className\n )}\n {...props}\n >\n {visibleChildren}\n {overflowCount > 0 && (\n <Avatar size={size} shape={shape}>\n <AvatarFallback size={size}>+{overflowCount}</AvatarFallback>\n </Avatar>\n )}\n </div>\n )\n }\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, avatarColors, getAvatarColor, getAvatarInitials }\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
cn
|
|
4
|
+
} from "./chunk-53MIUPSY.mjs";
|
|
5
|
+
|
|
6
|
+
// src/components/ui/popover.tsx
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
9
|
+
import { cva } from "class-variance-authority";
|
|
10
|
+
var DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
11
|
+
"svg",
|
|
12
|
+
{
|
|
13
|
+
className,
|
|
14
|
+
fill: "none",
|
|
15
|
+
viewBox: "0 0 24 24",
|
|
16
|
+
stroke: "currentColor",
|
|
17
|
+
strokeWidth: 2,
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
},
|
|
20
|
+
/* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
21
|
+
);
|
|
22
|
+
var ANIMATION_CLASSES = {
|
|
23
|
+
top: "data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit",
|
|
24
|
+
bottom: "data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit",
|
|
25
|
+
left: "data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit",
|
|
26
|
+
right: "data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit"
|
|
27
|
+
};
|
|
28
|
+
var popoverContentVariants = cva(
|
|
29
|
+
"relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none",
|
|
30
|
+
{
|
|
31
|
+
variants: {
|
|
32
|
+
variant: {
|
|
33
|
+
default: "bg-background-paper text-foreground border border-border shadow-lg",
|
|
34
|
+
elevated: "bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm"
|
|
35
|
+
},
|
|
36
|
+
size: {
|
|
37
|
+
sm: "text-sm p-3 rounded-lg",
|
|
38
|
+
default: "text-sm p-4 rounded-xl",
|
|
39
|
+
lg: "text-md p-5 rounded-xl"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
defaultVariants: {
|
|
43
|
+
variant: "default",
|
|
44
|
+
size: "default"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
var CSS_ARROW_CLASSES = {
|
|
49
|
+
bottom: "-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border",
|
|
50
|
+
top: "-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border",
|
|
51
|
+
right: "-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border",
|
|
52
|
+
left: "-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border"
|
|
53
|
+
};
|
|
54
|
+
var ARROW_ELEVATED = "fill-background-paper drop-shadow-sm";
|
|
55
|
+
function Popover(props) {
|
|
56
|
+
return /* @__PURE__ */ React.createElement(PopoverPrimitive.Root, { ...props });
|
|
57
|
+
}
|
|
58
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
59
|
+
var PopoverPortal = PopoverPrimitive.Portal;
|
|
60
|
+
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
61
|
+
var PopoverClose = PopoverPrimitive.Close;
|
|
62
|
+
var PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {
|
|
63
|
+
const resolvedSide = side;
|
|
64
|
+
const resolvedOffset = sideOffset ?? (variant === "default" && showArrow ? 12 : 6);
|
|
65
|
+
return /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
|
|
66
|
+
PopoverPrimitive.Content,
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
side,
|
|
70
|
+
sideOffset: resolvedOffset,
|
|
71
|
+
className: cn(
|
|
72
|
+
popoverContentVariants({ variant, size }),
|
|
73
|
+
ANIMATION_CLASSES[resolvedSide],
|
|
74
|
+
className
|
|
75
|
+
),
|
|
76
|
+
...props
|
|
77
|
+
},
|
|
78
|
+
showClose && /* @__PURE__ */ React.createElement(
|
|
79
|
+
PopoverPrimitive.Close,
|
|
80
|
+
{
|
|
81
|
+
className: "absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
|
|
82
|
+
"aria-label": "Close"
|
|
83
|
+
},
|
|
84
|
+
closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" })
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ React.createElement("div", { className: "min-h-0 overflow-y-auto -m-1 p-1" }, children),
|
|
87
|
+
showArrow && variant === "default" && /* @__PURE__ */ React.createElement(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
className: cn(
|
|
91
|
+
"absolute w-2.5 h-2.5 rotate-45 bg-background-paper",
|
|
92
|
+
CSS_ARROW_CLASSES[resolvedSide]
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
showArrow && variant === "elevated" && /* @__PURE__ */ React.createElement(
|
|
97
|
+
PopoverPrimitive.Arrow,
|
|
98
|
+
{
|
|
99
|
+
className: ARROW_ELEVATED,
|
|
100
|
+
width: 12,
|
|
101
|
+
height: 6
|
|
102
|
+
}
|
|
103
|
+
)
|
|
104
|
+
));
|
|
105
|
+
});
|
|
106
|
+
PopoverContent.displayName = "PopoverContent";
|
|
107
|
+
var PopoverArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
108
|
+
PopoverPrimitive.Arrow,
|
|
109
|
+
{
|
|
110
|
+
ref,
|
|
111
|
+
className: cn("fill-background-paper", className),
|
|
112
|
+
width: 10,
|
|
113
|
+
height: 5,
|
|
114
|
+
...props
|
|
115
|
+
}
|
|
116
|
+
));
|
|
117
|
+
PopoverArrow.displayName = "PopoverArrow";
|
|
118
|
+
|
|
119
|
+
export {
|
|
120
|
+
popoverContentVariants,
|
|
121
|
+
Popover,
|
|
122
|
+
PopoverTrigger,
|
|
123
|
+
PopoverPortal,
|
|
124
|
+
PopoverAnchor,
|
|
125
|
+
PopoverClose,
|
|
126
|
+
PopoverContent,
|
|
127
|
+
PopoverArrow
|
|
128
|
+
};
|
|
129
|
+
//# sourceMappingURL=chunk-HHX4GABH.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n top: 'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n left: 'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n right: 'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n 'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n {\n variants: {\n variant: {\n default: 'bg-background-paper text-foreground border border-border shadow-lg',\n elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n },\n size: {\n sm: 'text-sm p-3 rounded-lg',\n default: 'text-sm p-4 rounded-xl',\n lg: 'text-md p-5 rounded-xl',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — thin wrapper to expose as named export ──\nexport interface PopoverRootProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverRootProps) {\n return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n VariantProps<typeof popoverContentVariants> {\n /** Show arrow pointing to trigger */\n showArrow?: boolean\n /** Show built-in close button */\n showClose?: boolean\n /** Custom close icon (replaces default X icon) */\n closeIcon?: React.ReactNode\n}\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {\n const resolvedSide = side as PopoverSide\n // CSS arrow (default) needs more gap since it doesn't occupy layout space\n const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n side={side}\n sideOffset={resolvedOffset}\n className={cn(\n popoverContentVariants({ variant, size }),\n ANIMATION_CLASSES[resolvedSide],\n className,\n )}\n {...props}\n >\n {showClose && (\n <PopoverPrimitive.Close\n className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n aria-label=\"Close\"\n >\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n </PopoverPrimitive.Close>\n )}\n {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n -m-1 p-1 keeps children's focus rings inside the scroll area */}\n <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n {children}\n </div>\n {showArrow && variant === 'default' && (\n <div\n className={cn(\n 'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n CSS_ARROW_CLASSES[resolvedSide],\n )}\n />\n )}\n {showArrow && variant === 'elevated' && (\n <PopoverPrimitive.Arrow\n className={ARROW_ELEVATED}\n width={12}\n height={6}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <PopoverPrimitive.Arrow\n ref={ref}\n className={cn('fill-background-paper', className)}\n width={10}\n height={5}\n {...props}\n />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Popover,\n PopoverTrigger,\n PopoverContent,\n PopoverArrow,\n PopoverClose,\n PopoverAnchor,\n PopoverPortal,\n popoverContentVariants,\n}\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AAIvC,IAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAY;AAAA;AAAA,EAEZ,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAC9E;AAOF,IAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAKA,IAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,iBAAiB;AASvB,SAAS,QAAQ,OAAyB;AACxC,SAAO,oCAAkB,uBAAjB,EAAuB,GAAG,OAAO;AAC3C;AAGA,IAAM,iBAAkC;AAGxC,IAAM,gBAAiC;AAGvC,IAAM,gBAAiC;AAGvC,IAAM,eAAgC;AActC,IAAM,iBAAuB,iBAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpJ,QAAM,eAAe;AAErB,QAAM,iBAAiB,eAAe,YAAY,aAAa,YAAY,KAAK;AAEhF,SACE,oCAAkB,yBAAjB,MACC;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,aACC;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,MAEV,aAAa,oCAAC,oBAAiB,WAAU,WAAU;AAAA,IACtD;AAAA,IAIF,oCAAC,SAAI,WAAU,sCACZ,QACH;AAAA,IACC,aAAa,YAAY,aACxB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,YAAY;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,IAED,aAAa,YAAY,cACxB;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,EAEJ,CACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,IAAM,eAAqB,iBAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
useFieldContext,
|
|
4
|
+
useFieldControl
|
|
5
|
+
} from "./chunk-T5A4APEL.mjs";
|
|
6
|
+
import {
|
|
7
|
+
cn
|
|
8
|
+
} from "./chunk-53MIUPSY.mjs";
|
|
9
|
+
|
|
10
|
+
// src/components/ui/checkbox.tsx
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
13
|
+
import { cva } from "class-variance-authority";
|
|
14
|
+
var checkboxColorMap = {
|
|
15
|
+
default: "data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background",
|
|
16
|
+
primary: "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground"
|
|
17
|
+
};
|
|
18
|
+
var checkboxVariants = cva(
|
|
19
|
+
[
|
|
20
|
+
"peer relative shrink-0 border-border hover:border-border-strong transition-all duration-micro ease-out",
|
|
21
|
+
"focus-visible:focus-ring",
|
|
22
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
23
|
+
// Transparent hit area expansion via ::after
|
|
24
|
+
"after:absolute after:content-['']"
|
|
25
|
+
].join(" "),
|
|
26
|
+
{
|
|
27
|
+
variants: {
|
|
28
|
+
size: {
|
|
29
|
+
sm: "w-3.5 h-3.5 after:-inset-[5px]",
|
|
30
|
+
// 14px box → 24px click
|
|
31
|
+
default: "w-4 h-4 after:-inset-2",
|
|
32
|
+
// 16px box → 32px click
|
|
33
|
+
lg: "w-5 h-5 after:-inset-2"
|
|
34
|
+
// 20px box → 36px click
|
|
35
|
+
},
|
|
36
|
+
radius: {
|
|
37
|
+
none: "rounded-none",
|
|
38
|
+
// 0px — sharp square
|
|
39
|
+
sm: "rounded-sm",
|
|
40
|
+
// 2px — default checkbox style
|
|
41
|
+
md: "rounded"
|
|
42
|
+
// 4px — softer corners
|
|
43
|
+
},
|
|
44
|
+
weight: {
|
|
45
|
+
thin: "border",
|
|
46
|
+
// 1px
|
|
47
|
+
bold: "border-2"
|
|
48
|
+
// 2px
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
defaultVariants: {
|
|
52
|
+
size: "default",
|
|
53
|
+
radius: "sm",
|
|
54
|
+
weight: "bold"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
var checkIconSizes = {
|
|
59
|
+
sm: "w-2.5 h-2.5",
|
|
60
|
+
// 10px in 14px box
|
|
61
|
+
default: "w-3 h-3",
|
|
62
|
+
// 12px in 16px box
|
|
63
|
+
lg: "icon-xs"
|
|
64
|
+
// 14px in 20px box
|
|
65
|
+
};
|
|
66
|
+
var labelSizes = {
|
|
67
|
+
sm: "text-xs",
|
|
68
|
+
// 12px
|
|
69
|
+
default: "text-md",
|
|
70
|
+
// 14px
|
|
71
|
+
lg: "text-base"
|
|
72
|
+
// 16px
|
|
73
|
+
};
|
|
74
|
+
var gapSizes = {
|
|
75
|
+
sm: "gap-1.5",
|
|
76
|
+
default: "gap-2",
|
|
77
|
+
lg: "gap-2.5"
|
|
78
|
+
};
|
|
79
|
+
var Checkbox = React.forwardRef(({ className, size, radius, weight, color = "default", label, disabled, id, ...props }, ref) => {
|
|
80
|
+
const fieldContext = useFieldContext();
|
|
81
|
+
const resolvedSize = size || "default";
|
|
82
|
+
const resolvedDisabled = disabled ?? fieldContext?.disabled;
|
|
83
|
+
const generatedId = React.useId();
|
|
84
|
+
const hasOwnLabel = Boolean(label);
|
|
85
|
+
const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
|
|
86
|
+
useFieldControl(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
|
|
87
|
+
const checkbox = /* @__PURE__ */ React.createElement(
|
|
88
|
+
CheckboxPrimitive.Root,
|
|
89
|
+
{
|
|
90
|
+
ref,
|
|
91
|
+
id: checkboxId,
|
|
92
|
+
disabled: resolvedDisabled,
|
|
93
|
+
className: cn(
|
|
94
|
+
checkboxVariants({ size, radius, weight }),
|
|
95
|
+
checkboxColorMap[color],
|
|
96
|
+
className
|
|
97
|
+
),
|
|
98
|
+
...props
|
|
99
|
+
},
|
|
100
|
+
/* @__PURE__ */ React.createElement(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center animate-checkbox-enter" }, /* @__PURE__ */ React.createElement(CheckIcon, { className: checkIconSizes[resolvedSize] }))
|
|
101
|
+
);
|
|
102
|
+
if (!label) return checkbox;
|
|
103
|
+
return /* @__PURE__ */ React.createElement("div", { className: cn("group flex items-center", gapSizes[resolvedSize]) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, checkbox), /* @__PURE__ */ React.createElement(
|
|
104
|
+
"label",
|
|
105
|
+
{
|
|
106
|
+
htmlFor: checkboxId,
|
|
107
|
+
className: cn(
|
|
108
|
+
labelSizes[resolvedSize],
|
|
109
|
+
"text-text-muted cursor-pointer select-none transition-colors duration-micro",
|
|
110
|
+
"group-hover:text-foreground",
|
|
111
|
+
resolvedDisabled && "opacity-50 cursor-not-allowed"
|
|
112
|
+
)
|
|
113
|
+
},
|
|
114
|
+
label
|
|
115
|
+
));
|
|
116
|
+
});
|
|
117
|
+
Checkbox.displayName = "Checkbox";
|
|
118
|
+
function CheckIcon({ className }) {
|
|
119
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
120
|
+
"svg",
|
|
121
|
+
{
|
|
122
|
+
className: cn(className, "hidden [[data-state=checked]_&]:block"),
|
|
123
|
+
fill: "none",
|
|
124
|
+
viewBox: "0 0 24 24",
|
|
125
|
+
stroke: "currentColor",
|
|
126
|
+
strokeWidth: 3,
|
|
127
|
+
"aria-hidden": "true"
|
|
128
|
+
},
|
|
129
|
+
/* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
|
|
130
|
+
), /* @__PURE__ */ React.createElement(
|
|
131
|
+
"svg",
|
|
132
|
+
{
|
|
133
|
+
className: cn(className, "hidden [[data-state=indeterminate]_&]:block"),
|
|
134
|
+
fill: "none",
|
|
135
|
+
viewBox: "0 0 24 24",
|
|
136
|
+
stroke: "currentColor",
|
|
137
|
+
strokeWidth: 3,
|
|
138
|
+
"aria-hidden": "true"
|
|
139
|
+
},
|
|
140
|
+
/* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" })
|
|
141
|
+
));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
export {
|
|
145
|
+
checkboxVariants,
|
|
146
|
+
Checkbox
|
|
147
|
+
};
|
|
148
|
+
//# sourceMappingURL=chunk-HS2VRYSX.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Color maps for checked/indeterminate state\nconst checkboxColorMap = {\n default: 'data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background',\n primary: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\n} as const\n\nexport type CheckboxColor = keyof typeof checkboxColorMap\n\n// Checkbox box variants\nconst checkboxVariants = cva(\n [\n 'peer relative shrink-0 border-border hover:border-border-strong transition-all duration-micro ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n // Transparent hit area expansion via ::after\n \"after:absolute after:content-['']\",\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-3.5 h-3.5 after:-inset-[5px]', // 14px box → 24px click\n default: 'w-4 h-4 after:-inset-2', // 16px box → 32px click\n lg: 'w-5 h-5 after:-inset-2', // 20px box → 36px click\n },\n radius: {\n none: 'rounded-none', // 0px — sharp square\n sm: 'rounded-sm', // 2px — default checkbox style\n md: 'rounded', // 4px — softer corners\n },\n weight: {\n thin: 'border', // 1px\n bold: 'border-2', // 2px\n },\n },\n defaultVariants: {\n size: 'default',\n radius: 'sm',\n weight: 'bold',\n },\n }\n)\n\n// Check icon sizes per checkbox size\nconst checkIconSizes = {\n sm: 'w-2.5 h-2.5', // 10px in 14px box\n default: 'w-3 h-3', // 12px in 16px box\n lg: 'icon-xs', // 14px in 20px box\n}\n\n// Label font sizes per checkbox size\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\n// Gap between checkbox and label\nconst gapSizes = {\n sm: 'gap-1.5',\n default: 'gap-2',\n lg: 'gap-2.5',\n}\n\nexport interface CheckboxProps\n extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'children'>,\n VariantProps<typeof checkboxVariants> {\n /** Checked state color */\n color?: CheckboxColor\n label?: string\n radius?: 'none' | 'sm' | 'md'\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, size, radius, weight, color = 'default', label, disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n // With its own label the checkbox is one item of a group: keep a unique id. Only a\n // bare checkbox labelled by FieldLabel takes the Field id.\n const hasOwnLabel = Boolean(label)\n const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)\n useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))\n\n const checkbox = (\n <CheckboxPrimitive.Root\n ref={ref}\n id={checkboxId}\n disabled={resolvedDisabled}\n className={cn(\n checkboxVariants({ size, radius, weight }),\n checkboxColorMap[color],\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center animate-checkbox-enter\">\n <CheckIcon className={checkIconSizes[resolvedSize]} />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n\n if (!label) return checkbox\n\n return (\n <div className={cn('group flex items-center', gapSizes[resolvedSize])}>\n <div className=\"flex items-center\">\n {checkbox}\n </div>\n <label\n htmlFor={checkboxId}\n className={cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )}\n >\n {label}\n </label>\n </div>\n )\n})\nCheckbox.displayName = 'Checkbox'\n\n// Check icon — renders ✓ for checked, — for indeterminate\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n <>\n {/* Check mark (shown when data-state=checked on parent Indicator) */}\n <svg\n className={cn(className, 'hidden [[data-state=checked]_&]:block')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={3}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n {/* Dash (shown when data-state=indeterminate on parent Indicator) */}\n <svg\n className={cn(className, 'hidden [[data-state=indeterminate]_&]:block')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={3}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n </svg>\n </>\n )\n}\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":"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","names":[]}
|