@devalok/shilp-sutra 0.20.0 → 0.21.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/_chunks/primitives.js +2 -2
- package/dist/composed/avatar-group.d.ts +13 -1
- package/dist/composed/avatar-group.d.ts.map +1 -1
- package/dist/composed/avatar-group.js +154 -47
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/error-boundary.js +1 -1
- package/dist/composed/loading-skeleton.js +2 -2
- package/dist/composed/page-skeletons.js +4 -4
- package/dist/composed/rich-text-editor.js +1 -1
- package/dist/composed/schedule-view.js +3 -3
- package/dist/ui/avatar.d.ts +23 -1
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +139 -61
- package/dist/ui/card.js +2 -2
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/stat-card.js +2 -2
- package/dist/ui/tooltip.d.ts +5 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +48 -40
- package/docs/components/composed/avatar-group.md +29 -4
- package/docs/components/ui/avatar.md +20 -5
- package/llms-full.txt +50 -10
- package/llms.txt +2 -2
- package/package.json +1 -1
|
@@ -1,17 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { AvatarRing } from '../ui/avatar';
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
declare const avatarSizeVariants: (props?: ({
|
|
5
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
6
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
8
|
export interface AvatarUser {
|
|
8
9
|
name: string;
|
|
9
10
|
image?: string | null;
|
|
11
|
+
ring?: AvatarRing;
|
|
10
12
|
}
|
|
11
13
|
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarSizeVariants> {
|
|
12
14
|
users: AvatarUser[];
|
|
13
15
|
max?: number;
|
|
14
16
|
showTooltip?: boolean;
|
|
17
|
+
/** Border color for the group avatars. @default 'surface-2' */
|
|
18
|
+
borderColor?: 'surface-1' | 'surface-2';
|
|
19
|
+
/** Callback when the "+N" overflow badge is clicked */
|
|
20
|
+
onOverflowClick?: () => void;
|
|
21
|
+
/** Custom render function for each avatar */
|
|
22
|
+
renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode;
|
|
23
|
+
/** Direction the group expands on hover. 'right' (default) for left-aligned groups, 'left' for right-aligned groups. */
|
|
24
|
+
expandDirection?: 'left' | 'right';
|
|
25
|
+
/** How much the group spreads on hover. 'compact' = subtle peek, 'default' = full spread, 'wide' = extra room. */
|
|
26
|
+
expandAmount?: 'compact' | 'default' | 'wide';
|
|
15
27
|
}
|
|
16
28
|
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
29
|
export { AvatarGroup };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAgB9C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;IACvC,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,wHAAwH;IACxH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,kHAAkH;IAClH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAsNhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1,95 +1,202 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import * as
|
|
4
|
-
import { ag as
|
|
2
|
+
import { jsx as t, jsxs as s } from "react/jsx-runtime";
|
|
3
|
+
import * as T from "react";
|
|
4
|
+
import { ag as H } from "../_chunks/vendor-utils.js";
|
|
5
5
|
import { cn as o } from "../ui/lib/utils.js";
|
|
6
|
-
import { Avatar as
|
|
7
|
-
import { TooltipProvider as
|
|
8
|
-
import { getInitials as
|
|
9
|
-
const
|
|
10
|
-
"
|
|
6
|
+
import { Avatar as O, AvatarImage as B, AvatarFallback as L } from "../ui/avatar.js";
|
|
7
|
+
import { TooltipProvider as q, Tooltip as p, TooltipTrigger as u, TooltipContent as x } from "../ui/tooltip.js";
|
|
8
|
+
import { getInitials as D } from "./lib/string-utils.js";
|
|
9
|
+
const M = {
|
|
10
|
+
lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-2",
|
|
11
|
+
admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-2",
|
|
12
|
+
client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-2"
|
|
13
|
+
}, g = H(
|
|
14
|
+
"shrink-0 rounded-ds-full border-2",
|
|
11
15
|
{
|
|
12
16
|
variants: {
|
|
13
17
|
size: {
|
|
18
|
+
xs: "h-ds-xs w-ds-xs text-[10px]",
|
|
14
19
|
sm: "h-ds-xs w-ds-xs text-ds-xs",
|
|
15
20
|
md: "h-ds-sm w-ds-sm text-ds-sm",
|
|
16
|
-
lg: "h-ds-md w-ds-md text-ds-md"
|
|
21
|
+
lg: "h-ds-md w-ds-md text-ds-md",
|
|
22
|
+
xl: "h-ds-lg w-ds-lg text-ds-md"
|
|
17
23
|
}
|
|
18
24
|
},
|
|
19
25
|
defaultVariants: {
|
|
20
26
|
size: "md"
|
|
21
27
|
}
|
|
22
28
|
}
|
|
23
|
-
),
|
|
24
|
-
({
|
|
25
|
-
|
|
29
|
+
), J = T.forwardRef(
|
|
30
|
+
({
|
|
31
|
+
users: l,
|
|
32
|
+
max: h = 4,
|
|
33
|
+
size: n,
|
|
34
|
+
showTooltip: b = !0,
|
|
35
|
+
borderColor: z = "surface-2",
|
|
36
|
+
onOverflowClick: v,
|
|
37
|
+
renderAvatar: y,
|
|
38
|
+
expandDirection: j = "right",
|
|
39
|
+
expandAmount: A = "default",
|
|
40
|
+
className: S,
|
|
41
|
+
...k
|
|
42
|
+
}, P) => {
|
|
43
|
+
const [R, i] = T.useState(!1), a = l.slice(0, h), c = l.length - h, V = {
|
|
44
|
+
xs: "-ml-ds-02",
|
|
26
45
|
sm: "-ml-ds-02b",
|
|
27
46
|
md: "-ml-ds-03",
|
|
28
|
-
lg: "-ml-ds-04"
|
|
29
|
-
|
|
30
|
-
|
|
47
|
+
lg: "-ml-ds-04",
|
|
48
|
+
xl: "-ml-ds-05"
|
|
49
|
+
}, X = {
|
|
50
|
+
xs: 8,
|
|
51
|
+
sm: 10,
|
|
52
|
+
md: 12,
|
|
53
|
+
lg: 16,
|
|
54
|
+
xl: 20
|
|
55
|
+
}, N = n ?? "md", d = V[N], $ = X[N], f = z === "surface-1" ? "border-surface-1" : "border-surface-2", E = { compact: 0.5, default: 1, wide: 1.5 }[A], F = a.length + (c > 0 ? 1 : 0);
|
|
56
|
+
function m(e) {
|
|
57
|
+
if (!R) return "translateX(0)";
|
|
58
|
+
const r = $ * E;
|
|
59
|
+
return j === "left" ? `translateX(-${(F - 1 - e) * r}px)` : `translateX(${e * r}px)`;
|
|
60
|
+
}
|
|
61
|
+
const I = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
|
|
62
|
+
return /* @__PURE__ */ t(q, { children: /* @__PURE__ */ s(
|
|
31
63
|
"div",
|
|
32
64
|
{
|
|
33
|
-
ref:
|
|
34
|
-
|
|
35
|
-
|
|
65
|
+
ref: P,
|
|
66
|
+
role: "group",
|
|
67
|
+
"aria-label": `${l.length} team members`,
|
|
68
|
+
tabIndex: 0,
|
|
69
|
+
className: o("group flex items-center", S),
|
|
70
|
+
onMouseEnter: () => i(!0),
|
|
71
|
+
onMouseLeave: () => i(!1),
|
|
72
|
+
onFocus: () => i(!0),
|
|
73
|
+
onBlur: (e) => {
|
|
74
|
+
e.currentTarget.contains(e.relatedTarget) || i(!1);
|
|
75
|
+
},
|
|
76
|
+
...k,
|
|
36
77
|
children: [
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
78
|
+
a.map((e, r) => {
|
|
79
|
+
const G = D(e.name);
|
|
80
|
+
if (y) {
|
|
81
|
+
const C = /* @__PURE__ */ t(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
className: o(
|
|
85
|
+
g({ size: n }),
|
|
86
|
+
f,
|
|
87
|
+
r > 0 && d,
|
|
88
|
+
I,
|
|
89
|
+
e.ring && e.ring !== "none" && M[e.ring]
|
|
90
|
+
),
|
|
91
|
+
style: {
|
|
92
|
+
zIndex: a.length - r,
|
|
93
|
+
transform: m(r)
|
|
94
|
+
},
|
|
95
|
+
children: y(e, r)
|
|
96
|
+
},
|
|
97
|
+
e.name
|
|
98
|
+
);
|
|
99
|
+
return b ? /* @__PURE__ */ s(p, { children: [
|
|
100
|
+
/* @__PURE__ */ t(u, { asChild: !0, children: C }),
|
|
101
|
+
/* @__PURE__ */ t(
|
|
102
|
+
x,
|
|
103
|
+
{
|
|
104
|
+
className: "border-surface-border-strong bg-surface-1 text-surface-fg",
|
|
105
|
+
sideOffset: 6,
|
|
106
|
+
children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
] }, e.name) : C;
|
|
110
|
+
}
|
|
111
|
+
const w = /* @__PURE__ */ s(
|
|
112
|
+
O,
|
|
40
113
|
{
|
|
41
114
|
className: o(
|
|
42
|
-
g({ size:
|
|
43
|
-
|
|
115
|
+
g({ size: n }),
|
|
116
|
+
f,
|
|
117
|
+
r > 0 && d,
|
|
118
|
+
I,
|
|
119
|
+
e.ring && e.ring !== "none" && M[e.ring]
|
|
44
120
|
),
|
|
45
|
-
style: {
|
|
121
|
+
style: {
|
|
122
|
+
zIndex: a.length - r,
|
|
123
|
+
transform: m(r)
|
|
124
|
+
},
|
|
46
125
|
children: [
|
|
47
|
-
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
|
|
126
|
+
e.image && /* @__PURE__ */ t(B, { src: e.image, alt: e.name }),
|
|
127
|
+
/* @__PURE__ */ t(
|
|
128
|
+
L,
|
|
50
129
|
{
|
|
51
130
|
className: "font-body font-semibold",
|
|
52
|
-
|
|
131
|
+
colorSeed: e.name,
|
|
132
|
+
children: G
|
|
53
133
|
}
|
|
54
134
|
)
|
|
55
135
|
]
|
|
56
136
|
},
|
|
57
|
-
|
|
137
|
+
e.name
|
|
58
138
|
);
|
|
59
|
-
return
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
/* @__PURE__ */
|
|
62
|
-
|
|
139
|
+
return b ? /* @__PURE__ */ s(p, { children: [
|
|
140
|
+
/* @__PURE__ */ t(u, { asChild: !0, children: w }),
|
|
141
|
+
/* @__PURE__ */ t(
|
|
142
|
+
x,
|
|
63
143
|
{
|
|
64
144
|
className: "border-surface-border-strong bg-surface-1 text-surface-fg",
|
|
65
145
|
sideOffset: 6,
|
|
66
|
-
children: /* @__PURE__ */
|
|
146
|
+
children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
|
|
67
147
|
}
|
|
68
148
|
)
|
|
69
|
-
] },
|
|
149
|
+
] }, e.name) : w;
|
|
70
150
|
}),
|
|
71
|
-
|
|
72
|
-
/* @__PURE__ */
|
|
151
|
+
c > 0 && /* @__PURE__ */ s(p, { children: [
|
|
152
|
+
/* @__PURE__ */ t(u, { asChild: !0, children: v ? /* @__PURE__ */ s(
|
|
153
|
+
"button",
|
|
154
|
+
{
|
|
155
|
+
type: "button",
|
|
156
|
+
onClick: v,
|
|
157
|
+
className: o(
|
|
158
|
+
g({ size: n }),
|
|
159
|
+
f,
|
|
160
|
+
d,
|
|
161
|
+
"flex cursor-pointer items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
|
|
162
|
+
"transition-[transform,background-color] duration-300 ease-out",
|
|
163
|
+
"hover:scale-105 hover:bg-accent-3"
|
|
164
|
+
),
|
|
165
|
+
style: {
|
|
166
|
+
zIndex: 0,
|
|
167
|
+
transform: m(a.length)
|
|
168
|
+
},
|
|
169
|
+
children: [
|
|
170
|
+
"+",
|
|
171
|
+
c
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
) : /* @__PURE__ */ s(
|
|
73
175
|
"div",
|
|
74
176
|
{
|
|
75
177
|
className: o(
|
|
76
|
-
g({ size:
|
|
77
|
-
|
|
78
|
-
|
|
178
|
+
g({ size: n }),
|
|
179
|
+
f,
|
|
180
|
+
d,
|
|
181
|
+
"flex cursor-default items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
|
|
182
|
+
"transition-[transform] duration-300 ease-out"
|
|
79
183
|
),
|
|
80
|
-
style: {
|
|
184
|
+
style: {
|
|
185
|
+
zIndex: 0,
|
|
186
|
+
transform: m(a.length)
|
|
187
|
+
},
|
|
81
188
|
children: [
|
|
82
189
|
"+",
|
|
83
|
-
|
|
190
|
+
c
|
|
84
191
|
]
|
|
85
192
|
}
|
|
86
193
|
) }),
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
|
|
194
|
+
/* @__PURE__ */ t(
|
|
195
|
+
x,
|
|
89
196
|
{
|
|
90
197
|
className: "border-surface-border-strong bg-surface-1 text-surface-fg",
|
|
91
198
|
sideOffset: 6,
|
|
92
|
-
children: /* @__PURE__ */
|
|
199
|
+
children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-01", children: l.slice(h).map((e, r) => /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name }, r)) })
|
|
93
200
|
}
|
|
94
201
|
)
|
|
95
202
|
] })
|
|
@@ -98,7 +205,7 @@ const g = w(
|
|
|
98
205
|
) });
|
|
99
206
|
}
|
|
100
207
|
);
|
|
101
|
-
|
|
208
|
+
J.displayName = "AvatarGroup";
|
|
102
209
|
export {
|
|
103
|
-
|
|
210
|
+
J as AvatarGroup
|
|
104
211
|
};
|
|
@@ -7,7 +7,7 @@ const h = v(
|
|
|
7
7
|
{
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
|
-
default: "border border-surface-border-strong bg-surface-
|
|
10
|
+
default: "border border-surface-border-strong bg-surface-2 shadow-01 hover:shadow-02",
|
|
11
11
|
outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
|
|
12
12
|
ghost: "border border-transparent bg-transparent hover:bg-surface-2"
|
|
13
13
|
},
|
|
@@ -66,7 +66,7 @@ const k = p.forwardRef(
|
|
|
66
66
|
return /* @__PURE__ */ t("div", { ref: f, ...d, className: o("flex min-h-[60vh] items-center justify-center p-ds-05", l), children: /* @__PURE__ */ r(
|
|
67
67
|
"div",
|
|
68
68
|
{
|
|
69
|
-
className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-
|
|
69
|
+
className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-07 text-center shadow-01",
|
|
70
70
|
children: [
|
|
71
71
|
/* @__PURE__ */ t(
|
|
72
72
|
"div",
|
|
@@ -10,7 +10,7 @@ const b = t.forwardRef(
|
|
|
10
10
|
ref: o,
|
|
11
11
|
...l,
|
|
12
12
|
className: c(
|
|
13
|
-
"rounded-ds-lg border border-surface-border-strong bg-surface-
|
|
13
|
+
"rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05b",
|
|
14
14
|
d
|
|
15
15
|
),
|
|
16
16
|
children: [
|
|
@@ -109,7 +109,7 @@ const h = t.forwardRef(
|
|
|
109
109
|
Array.from({ length: l }).map((u, m) => /* @__PURE__ */ r(
|
|
110
110
|
"div",
|
|
111
111
|
{
|
|
112
|
-
className: "rounded-ds-lg border border-surface-border-strong bg-surface-
|
|
112
|
+
className: "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-04",
|
|
113
113
|
children: [
|
|
114
114
|
/* @__PURE__ */ r("div", { className: "space-y-ds-03", children: [
|
|
115
115
|
/* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-3" }),
|
|
@@ -8,7 +8,7 @@ const l = "bg-surface-3", t = n.forwardRef(
|
|
|
8
8
|
/* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }).map((c, r) => /* @__PURE__ */ a(
|
|
9
9
|
"div",
|
|
10
10
|
{
|
|
11
|
-
className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-
|
|
11
|
+
className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
|
|
12
12
|
children: [
|
|
13
13
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
|
|
14
14
|
/* @__PURE__ */ s(d, { className: e("h-[12px] w-[80px]", l) }),
|
|
@@ -20,7 +20,7 @@ const l = "bg-surface-3", t = n.forwardRef(
|
|
|
20
20
|
},
|
|
21
21
|
`stat-${r}`
|
|
22
22
|
)) }),
|
|
23
|
-
/* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-
|
|
23
|
+
/* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
|
|
24
24
|
/* @__PURE__ */ a("div", { className: "mb-ds-06 flex items-center justify-between", children: [
|
|
25
25
|
/* @__PURE__ */ s(d, { className: e("h-[20px] w-[128px]", l) }),
|
|
26
26
|
/* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
|
|
@@ -59,7 +59,7 @@ const f = n.forwardRef(
|
|
|
59
59
|
/* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((c, r) => /* @__PURE__ */ a(
|
|
60
60
|
"div",
|
|
61
61
|
{
|
|
62
|
-
className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-
|
|
62
|
+
className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
|
|
63
63
|
children: [
|
|
64
64
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
|
|
65
65
|
/* @__PURE__ */ s(d, { className: e("h-[20px] w-[64px] rounded-ds-full", l) }),
|
|
@@ -90,7 +90,7 @@ const f = n.forwardRef(
|
|
|
90
90
|
f.displayName = "ProjectListSkeleton";
|
|
91
91
|
const h = n.forwardRef(
|
|
92
92
|
function({ className: m, ...o }, i) {
|
|
93
|
-
return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-
|
|
93
|
+
return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-2", m), children: [
|
|
94
94
|
/* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05", children: [
|
|
95
95
|
/* @__PURE__ */ s(d, { className: e("h-[20px] w-[192px]", l) }),
|
|
96
96
|
/* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
|
|
@@ -510,7 +510,7 @@ const Ke = o.forwardRef(
|
|
|
510
510
|
"div",
|
|
511
511
|
{
|
|
512
512
|
className: p(
|
|
513
|
-
"overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-
|
|
513
|
+
"overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-2",
|
|
514
514
|
"transition-colors focus-within:border-surface-border-strong"
|
|
515
515
|
),
|
|
516
516
|
children: [
|
|
@@ -72,7 +72,7 @@ function j({
|
|
|
72
72
|
{
|
|
73
73
|
className: x(
|
|
74
74
|
"text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong",
|
|
75
|
-
l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-
|
|
75
|
+
l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-2"
|
|
76
76
|
),
|
|
77
77
|
children: u(r, "EEE d")
|
|
78
78
|
}
|
|
@@ -83,7 +83,7 @@ function j({
|
|
|
83
83
|
{
|
|
84
84
|
type: "button",
|
|
85
85
|
className: x(
|
|
86
|
-
"block w-full border-b border-surface-border hover:bg-surface-
|
|
86
|
+
"block w-full border-b border-surface-border hover:bg-surface-3 transition-colors",
|
|
87
87
|
n % 2 === 0 ? "border-surface-border-strong" : "border-surface-3"
|
|
88
88
|
),
|
|
89
89
|
style: { height: `${100 / g}%` },
|
|
@@ -151,7 +151,7 @@ const R = $.forwardRef(
|
|
|
151
151
|
role: "region",
|
|
152
152
|
"aria-label": r === "day" ? `Schedule for ${u(s, "EEEE, MMMM d, yyyy")}` : `Week schedule starting ${u(b[0], "MMMM d, yyyy")}`,
|
|
153
153
|
className: x(
|
|
154
|
-
"flex rounded-ds-md border border-surface-border-strong bg-surface-
|
|
154
|
+
"flex rounded-ds-md border border-surface-border-strong bg-surface-2 overflow-hidden",
|
|
155
155
|
"h-[480px]",
|
|
156
156
|
y
|
|
157
157
|
),
|
package/dist/ui/avatar.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export declare const avatarVariants: (props?: ({
|
|
|
7
7
|
shape?: "circle" | "square" | "rounded" | null | undefined;
|
|
8
8
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
9
|
export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
10
|
+
export type AvatarRing = 'none' | 'lead' | 'admin' | 'client';
|
|
10
11
|
/**
|
|
11
12
|
* Props for Avatar — a user/entity image container with size, shape, and presence-status variants.
|
|
12
13
|
*
|
|
@@ -17,6 +18,14 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
|
17
18
|
* **Status dot:** `status="online"` (green) | `"offline"` (muted) | `"busy"` (red) | `"away"` (amber).
|
|
18
19
|
* The dot renders with `role="img"` and an accessible `aria-label` — it is not purely decorative.
|
|
19
20
|
*
|
|
21
|
+
* **Role ring:** `ring="lead"` (accent) | `"admin"` (warning) | `"client"` (info) — a colored ring
|
|
22
|
+
* around the avatar indicating the user's role.
|
|
23
|
+
*
|
|
24
|
+
* **Badge:** `badge={5}` (number) | `badge="dot"` (notification dot) | `badge={<Icon />}` (custom).
|
|
25
|
+
* Numbers > 99 display as "99+". Badge is hidden when `0` or `undefined`.
|
|
26
|
+
*
|
|
27
|
+
* **Loading:** `loading={true}` shows a pulse skeleton placeholder.
|
|
28
|
+
*
|
|
20
29
|
* **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.
|
|
21
30
|
*
|
|
22
31
|
* @example
|
|
@@ -43,10 +52,23 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
|
43
52
|
export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>, VariantProps<typeof avatarVariants> {
|
|
44
53
|
/** Optional status indicator displayed as a dot at the bottom-right corner */
|
|
45
54
|
status?: AvatarStatus;
|
|
55
|
+
/** Role ring color indicator */
|
|
56
|
+
ring?: AvatarRing;
|
|
57
|
+
/** Badge overlay: number, 'dot', or custom ReactNode */
|
|
58
|
+
badge?: number | 'dot' | React.ReactNode;
|
|
59
|
+
/** Show loading skeleton instead of content */
|
|
60
|
+
loading?: boolean;
|
|
46
61
|
children?: React.ReactNode;
|
|
47
62
|
}
|
|
48
63
|
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
49
64
|
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
50
|
-
|
|
65
|
+
export interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
|
|
66
|
+
/**
|
|
67
|
+
* Seed string for deterministic color selection.
|
|
68
|
+
* Falls back to the text content of `children` if not provided.
|
|
69
|
+
*/
|
|
70
|
+
colorSeed?: string;
|
|
71
|
+
}
|
|
72
|
+
declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
|
|
51
73
|
export { Avatar, AvatarImage, AvatarFallback };
|
|
52
74
|
//# sourceMappingURL=avatar.d.ts.map
|
package/dist/ui/avatar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAoE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAuFV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FA4BlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
|
package/dist/ui/avatar.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import * as
|
|
4
|
-
import { F as
|
|
5
|
-
import { ag as
|
|
6
|
-
import {
|
|
7
|
-
import { cn as
|
|
8
|
-
import { m as
|
|
9
|
-
const
|
|
2
|
+
import { jsx as r, jsxs as M } from "react/jsx-runtime";
|
|
3
|
+
import * as g from "react";
|
|
4
|
+
import { F as y, J as v, K as N } from "../_chunks/primitives.js";
|
|
5
|
+
import { ag as R } from "../_chunks/vendor-utils.js";
|
|
6
|
+
import { springs as k } from "./lib/motion.js";
|
|
7
|
+
import { cn as n } from "./lib/utils.js";
|
|
8
|
+
import { m as c } from "../_chunks/framer.js";
|
|
9
|
+
const p = R(
|
|
10
10
|
"relative flex shrink-0 overflow-hidden",
|
|
11
11
|
{
|
|
12
12
|
variants: {
|
|
@@ -25,7 +25,7 @@ const x = u(
|
|
|
25
25
|
},
|
|
26
26
|
defaultVariants: { size: "md", shape: "circle" }
|
|
27
27
|
}
|
|
28
|
-
),
|
|
28
|
+
), x = {
|
|
29
29
|
online: "bg-success-9",
|
|
30
30
|
offline: "bg-surface-3",
|
|
31
31
|
busy: "bg-error-9",
|
|
@@ -35,69 +35,147 @@ const x = u(
|
|
|
35
35
|
offline: "Offline",
|
|
36
36
|
busy: "Busy",
|
|
37
37
|
away: "Away"
|
|
38
|
-
},
|
|
38
|
+
}, h = {
|
|
39
39
|
xs: "h-ds-02b w-ds-02b",
|
|
40
40
|
sm: "h-[8px] w-[8px]",
|
|
41
41
|
md: "h-ds-03 w-ds-03",
|
|
42
42
|
lg: "h-[12px] w-[12px]",
|
|
43
43
|
xl: "h-ds-04 w-ds-04"
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
44
|
+
}, F = {
|
|
45
|
+
lead: "ring-accent-7",
|
|
46
|
+
admin: "ring-warning-7",
|
|
47
|
+
client: "ring-info-7"
|
|
48
|
+
}, O = {
|
|
49
|
+
circle: "rounded-ds-full",
|
|
50
|
+
square: "rounded-ds-none",
|
|
51
|
+
rounded: "rounded-ds-md"
|
|
52
|
+
}, w = [
|
|
53
|
+
{ bg: "bg-accent-3", text: "text-accent-11" },
|
|
54
|
+
{ bg: "bg-secondary-3", text: "text-secondary-11" },
|
|
55
|
+
{ bg: "bg-success-3", text: "text-success-11" },
|
|
56
|
+
{ bg: "bg-warning-3", text: "text-warning-11" },
|
|
57
|
+
{ bg: "bg-error-3", text: "text-error-11" },
|
|
58
|
+
{ bg: "bg-info-3", text: "text-info-11" },
|
|
59
|
+
{ bg: "bg-category-teal-3", text: "text-category-teal-11" },
|
|
60
|
+
{ bg: "bg-category-indigo-3", text: "text-category-indigo-11" }
|
|
61
|
+
];
|
|
62
|
+
function j(o) {
|
|
63
|
+
let a = 5381;
|
|
64
|
+
for (let e = 0; e < o.length; e++)
|
|
65
|
+
a = (a << 5) + a + o.charCodeAt(e) | 0;
|
|
66
|
+
const s = Math.abs(a) % w.length;
|
|
67
|
+
return w[s];
|
|
68
|
+
}
|
|
69
|
+
const I = g.forwardRef(({ className: o, size: a, shape: s, status: e, ring: l, badge: t, loading: m, children: i, ...d }, f) => {
|
|
70
|
+
const A = s ?? "circle", u = l && l !== "none" ? n("ring-2 ring-offset-2 ring-offset-surface-2", F[l], O[A]) : void 0;
|
|
71
|
+
if (m)
|
|
72
|
+
return /* @__PURE__ */ r("span", { ref: f, className: n("relative inline-flex shrink-0", u), children: /* @__PURE__ */ r(
|
|
73
|
+
"span",
|
|
74
|
+
{
|
|
75
|
+
className: n(p({ size: a, shape: s }), "animate-pulse bg-surface-3"),
|
|
76
|
+
"data-slot": "avatar-skeleton"
|
|
77
|
+
}
|
|
78
|
+
) });
|
|
79
|
+
const C = t !== void 0 && t !== 0;
|
|
80
|
+
return /* @__PURE__ */ M("span", { className: n("relative inline-flex shrink-0", u), children: [
|
|
81
|
+
/* @__PURE__ */ r(
|
|
82
|
+
y,
|
|
83
|
+
{
|
|
84
|
+
ref: f,
|
|
85
|
+
className: n(p({ size: a, shape: s }), o),
|
|
86
|
+
...d,
|
|
87
|
+
children: i
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
e && (e === "online" ? /* @__PURE__ */ r(
|
|
91
|
+
c.span,
|
|
92
|
+
{
|
|
93
|
+
className: n(
|
|
94
|
+
"absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2",
|
|
95
|
+
x[e],
|
|
96
|
+
h[a ?? "md"]
|
|
97
|
+
),
|
|
98
|
+
animate: { opacity: [1, 0.75, 1] },
|
|
99
|
+
transition: { duration: 2.5, repeat: 1 / 0, ease: "easeInOut" },
|
|
100
|
+
role: "img",
|
|
101
|
+
"aria-label": b[e]
|
|
102
|
+
}
|
|
103
|
+
) : /* @__PURE__ */ r(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
className: n(
|
|
107
|
+
"absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2",
|
|
108
|
+
x[e],
|
|
109
|
+
h[a ?? "md"]
|
|
110
|
+
),
|
|
111
|
+
role: "img",
|
|
112
|
+
"aria-label": b[e]
|
|
113
|
+
}
|
|
114
|
+
)),
|
|
115
|
+
C && (t === "dot" ? /* @__PURE__ */ r(
|
|
116
|
+
"span",
|
|
117
|
+
{
|
|
118
|
+
className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-2",
|
|
119
|
+
"data-slot": "avatar-badge-dot",
|
|
120
|
+
"aria-hidden": "true"
|
|
121
|
+
}
|
|
122
|
+
) : typeof t == "number" ? /* @__PURE__ */ r(
|
|
123
|
+
c.span,
|
|
124
|
+
{
|
|
125
|
+
initial: { scale: 0 },
|
|
126
|
+
animate: { scale: 1 },
|
|
127
|
+
transition: k.bouncy,
|
|
128
|
+
className: "absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-2",
|
|
129
|
+
"data-slot": "avatar-badge",
|
|
130
|
+
role: "status",
|
|
131
|
+
"aria-label": `${t > 99 ? "99+" : t} notifications`,
|
|
132
|
+
children: t > 99 ? "99+" : t
|
|
133
|
+
}
|
|
134
|
+
) : /* @__PURE__ */ r("span", { className: "absolute -right-1 -top-1", "data-slot": "avatar-badge-custom", children: t }))
|
|
135
|
+
] });
|
|
136
|
+
});
|
|
137
|
+
I.displayName = y.displayName;
|
|
138
|
+
const L = g.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ r(
|
|
139
|
+
c.span,
|
|
70
140
|
{
|
|
71
|
-
initial: { opacity: 0 },
|
|
72
|
-
animate: { opacity: 1 },
|
|
73
|
-
transition:
|
|
74
|
-
className: "h-full w-full",
|
|
75
|
-
children: /* @__PURE__ */
|
|
76
|
-
|
|
141
|
+
initial: { opacity: 0, scale: 0.96 },
|
|
142
|
+
animate: { opacity: 1, scale: 1 },
|
|
143
|
+
transition: k.smooth,
|
|
144
|
+
className: "absolute inset-0 h-full w-full",
|
|
145
|
+
children: /* @__PURE__ */ r(
|
|
146
|
+
v,
|
|
77
147
|
{
|
|
78
|
-
ref:
|
|
79
|
-
className:
|
|
148
|
+
ref: s,
|
|
149
|
+
className: n("aspect-square h-full w-full", o),
|
|
80
150
|
...a
|
|
81
151
|
}
|
|
82
152
|
)
|
|
83
153
|
}
|
|
84
154
|
));
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
t,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
155
|
+
L.displayName = v.displayName;
|
|
156
|
+
const S = g.forwardRef(({ className: o, colorSeed: a, children: s, ...e }, l) => {
|
|
157
|
+
const t = typeof s == "string" ? s : "", i = j(a ?? t), d = t.length === 1 ? "tracking-wide" : "tracking-normal";
|
|
158
|
+
return /* @__PURE__ */ r(
|
|
159
|
+
N,
|
|
160
|
+
{
|
|
161
|
+
ref: l,
|
|
162
|
+
"data-slot": "avatar-fallback",
|
|
163
|
+
className: n(
|
|
164
|
+
"flex h-full w-full items-center justify-center font-semibold",
|
|
165
|
+
i.bg,
|
|
166
|
+
i.text,
|
|
167
|
+
d,
|
|
168
|
+
o
|
|
169
|
+
),
|
|
170
|
+
...e,
|
|
171
|
+
children: s
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
});
|
|
175
|
+
S.displayName = N.displayName;
|
|
98
176
|
export {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
177
|
+
I as Avatar,
|
|
178
|
+
S as AvatarFallback,
|
|
179
|
+
L as AvatarImage,
|
|
180
|
+
p as avatarVariants
|
|
103
181
|
};
|
package/dist/ui/card.js
CHANGED
|
@@ -10,8 +10,8 @@ const p = f(
|
|
|
10
10
|
{
|
|
11
11
|
variants: {
|
|
12
12
|
variant: {
|
|
13
|
-
default: "bg-surface-
|
|
14
|
-
elevated: "bg-surface-
|
|
13
|
+
default: "bg-surface-2 border border-surface-border shadow-01",
|
|
14
|
+
elevated: "bg-surface-2 border border-surface-border shadow-02",
|
|
15
15
|
outline: "bg-transparent border-2 border-surface-border-strong shadow-none",
|
|
16
16
|
flat: "bg-surface-2 border-none shadow-none"
|
|
17
17
|
}
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -53,7 +53,7 @@ export { Banner, bannerVariants, type BannerProps } from './banner';
|
|
|
53
53
|
export { Spinner, type SpinnerProps } from './spinner';
|
|
54
54
|
export { Card, cardVariants, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardProps } from './card';
|
|
55
55
|
export { Badge, badgeVariants, type BadgeProps } from './badge';
|
|
56
|
-
export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarStatus } from './avatar';
|
|
56
|
+
export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarFallbackProps, type AvatarStatus, type AvatarRing } from './avatar';
|
|
57
57
|
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, type TableProps, type TableRowProps, type TableCellProps } from './table';
|
|
58
58
|
export { Progress, progressTrackVariants, progressIndicatorVariants, type ProgressProps } from './progress';
|
|
59
59
|
export { Skeleton, skeletonVariants, type SkeletonProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonText, type SkeletonTextProps, SkeletonButton, type SkeletonButtonProps, SkeletonInput, type SkeletonInputProps, SkeletonChart, type SkeletonChartProps, SkeletonImage, type SkeletonImageProps, SkeletonGroup, type SkeletonGroupProps, } from './skeleton';
|
package/dist/ui/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG9F,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAG9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAGhE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,oBAAoB,EACpB,sBAAsB,EACtB,KAAK,kBAAkB,EACvB,qBAAqB,GACtB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1G,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AACrI,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG/G,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAA;AAChB,OAAO,EACL,KAAK,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,UAAU,GAChB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC9G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC5G,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACxG,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAQ1G,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAGtD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG9F,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAG9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAGhE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,oBAAoB,EACpB,sBAAsB,EACtB,KAAK,kBAAkB,EACvB,qBAAqB,GACtB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1G,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AACrI,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAG/G,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAA;AAChB,OAAO,EACL,KAAK,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,UAAU,GAChB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC9G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC5G,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACxG,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAQ1G,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAGtD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAC9J,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AAC5K,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC3G,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,KAAK,aAAa,EAClB,cAAc,EACd,KAAK,mBAAmB,EACxB,YAAY,EACZ,KAAK,iBAAiB,EACtB,cAAc,EACd,KAAK,mBAAmB,EACxB,aAAa,EACb,KAAK,kBAAkB,EACvB,aAAa,EACb,KAAK,kBAAkB,EACvB,aAAa,EACb,KAAK,kBAAkB,EACvB,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,KAAK,kBAAkB,EAAE,KAAK,qBAAqB,EAAE,KAAK,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAC3K,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AACnJ,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,GACzB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,GAC3B,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,GAC1B,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,GAChC,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAGlB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAG5E,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAI3D,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAA;AAG7E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAG5D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGhH,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,4BAA4B,EAC5B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,GAC/B,MAAM,qBAAqB,CAAA;AAG5B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAG7C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAC1E,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA"}
|
package/dist/ui/stat-card.js
CHANGED
|
@@ -106,7 +106,7 @@ const V = f.forwardRef(
|
|
|
106
106
|
{
|
|
107
107
|
ref: k,
|
|
108
108
|
className: p(
|
|
109
|
-
"rounded-ds-lg border border-surface-border bg-surface-
|
|
109
|
+
"rounded-ds-lg border border-surface-border bg-surface-2 shadow-01 p-ds-05b",
|
|
110
110
|
y && `border-l-[3px] ${R[y]}`,
|
|
111
111
|
c
|
|
112
112
|
),
|
|
@@ -217,7 +217,7 @@ const V = f.forwardRef(
|
|
|
217
217
|
}
|
|
218
218
|
)
|
|
219
219
|
] }), j = p(
|
|
220
|
-
"rounded-ds-lg border border-surface-border bg-surface-
|
|
220
|
+
"rounded-ds-lg border border-surface-border bg-surface-2 shadow-01 p-ds-05b",
|
|
221
221
|
y && `border-l-[3px] ${R[y]}`,
|
|
222
222
|
M && "cursor-pointer hover:shadow-02 hover:border-surface-border-strong transition-all duration-fast-02 group",
|
|
223
223
|
c
|
package/dist/ui/tooltip.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import * as TooltipPrimitive from '../primitives/react-tooltip';
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Explicit TooltipProvider — wrap your app root for shared delay/skip behavior.
|
|
6
|
+
* If you don't add one, each Tooltip auto-creates its own provider.
|
|
7
|
+
*/
|
|
8
|
+
declare const TooltipProvider: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>>;
|
|
5
9
|
declare const Tooltip: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>>;
|
|
6
10
|
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
11
|
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/dist/ui/tooltip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAM7D,QAAA,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAM7D;;;GAGG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAS/F,CAAA;AA4BD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CA2BnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAW/C,QAAA,MAAM,cAAc,gKAoClB,CAAA;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEjG,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
|
package/dist/ui/tooltip.js
CHANGED
|
@@ -1,61 +1,69 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import * as
|
|
4
|
-
import { aK as
|
|
5
|
-
import { cn as
|
|
6
|
-
import { tweens as
|
|
7
|
-
import { A as
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
import { jsx as t, Fragment as x } from "react/jsx-runtime";
|
|
3
|
+
import * as o from "react";
|
|
4
|
+
import { aK as y, aL as f, aM as h, aN as P, aO as T } from "../_chunks/primitives.js";
|
|
5
|
+
import { cn as C } from "./lib/utils.js";
|
|
6
|
+
import { tweens as g, springs as N } from "./lib/motion.js";
|
|
7
|
+
import { A as b, m as w } from "../_chunks/framer.js";
|
|
8
|
+
const M = ({
|
|
9
|
+
children: e,
|
|
10
|
+
...s
|
|
11
|
+
}) => /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(P, { ...s, children: e }) }), d = o.createContext(!1);
|
|
12
|
+
function A({ children: e }) {
|
|
13
|
+
return o.useContext(d) ? /* @__PURE__ */ t(x, { children: e }) : /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(M, { delayDuration: 300, children: e }) });
|
|
14
|
+
}
|
|
15
|
+
const m = o.createContext({ open: !1 }), R = ({
|
|
16
|
+
open: e,
|
|
17
|
+
defaultOpen: s,
|
|
18
|
+
onOpenChange: r,
|
|
19
|
+
...n
|
|
13
20
|
}) => {
|
|
14
|
-
const [
|
|
15
|
-
(
|
|
16
|
-
|
|
21
|
+
const [c, l] = o.useState(s ?? !1), a = e !== void 0, i = a ? e : c, u = o.useCallback(
|
|
22
|
+
(p) => {
|
|
23
|
+
a || l(p), r == null || r(p);
|
|
17
24
|
},
|
|
18
|
-
[
|
|
19
|
-
),
|
|
20
|
-
return /* @__PURE__ */
|
|
25
|
+
[a, r]
|
|
26
|
+
), v = o.useMemo(() => ({ open: i }), [i]);
|
|
27
|
+
return /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(m.Provider, { value: v, children: /* @__PURE__ */ t(T, { open: i, onOpenChange: u, ...n }) }) });
|
|
21
28
|
};
|
|
22
|
-
|
|
23
|
-
const
|
|
29
|
+
R.displayName = "Tooltip";
|
|
30
|
+
const K = h, I = {
|
|
24
31
|
top: { y: 4 },
|
|
25
32
|
bottom: { y: -4 },
|
|
26
33
|
left: { x: 4 },
|
|
27
34
|
right: { x: -4 }
|
|
28
|
-
},
|
|
29
|
-
const { open:
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
-
|
|
35
|
+
}, O = o.forwardRef(({ className: e, sideOffset: s = 4, side: r = "top", children: n, ...c }, l) => {
|
|
36
|
+
const { open: a } = o.useContext(m), i = I[r] ?? {};
|
|
37
|
+
return /* @__PURE__ */ t(b, { children: a && /* @__PURE__ */ t(y, { forceMount: !0, children: /* @__PURE__ */ t(
|
|
38
|
+
f,
|
|
32
39
|
{
|
|
33
|
-
ref:
|
|
40
|
+
ref: l,
|
|
34
41
|
forceMount: !0,
|
|
35
42
|
asChild: !0,
|
|
36
|
-
sideOffset:
|
|
37
|
-
side:
|
|
38
|
-
...
|
|
39
|
-
children: /* @__PURE__ */
|
|
40
|
-
|
|
43
|
+
sideOffset: s,
|
|
44
|
+
side: r,
|
|
45
|
+
...c,
|
|
46
|
+
children: /* @__PURE__ */ t(
|
|
47
|
+
w.div,
|
|
41
48
|
{
|
|
42
|
-
initial: { opacity: 0, scale: 0.95, ...
|
|
49
|
+
initial: { opacity: 0, scale: 0.95, ...i },
|
|
43
50
|
animate: { opacity: 1, scale: 1, x: 0, y: 0 },
|
|
44
|
-
exit: { opacity: 0, scale: 0.95, ...
|
|
45
|
-
transition: { ...
|
|
46
|
-
className:
|
|
51
|
+
exit: { opacity: 0, scale: 0.95, ...i },
|
|
52
|
+
transition: { ...N.snappy, opacity: g.fade },
|
|
53
|
+
className: C(
|
|
47
54
|
"z-tooltip overflow-hidden rounded-ds-md bg-surface-fg px-ds-04 py-ds-02b text-ds-sm text-accent-fg shadow-02",
|
|
48
|
-
|
|
49
|
-
)
|
|
55
|
+
e
|
|
56
|
+
),
|
|
57
|
+
children: n
|
|
50
58
|
}
|
|
51
59
|
)
|
|
52
60
|
}
|
|
53
61
|
) }) });
|
|
54
62
|
});
|
|
55
|
-
|
|
63
|
+
O.displayName = f.displayName;
|
|
56
64
|
export {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
65
|
+
R as Tooltip,
|
|
66
|
+
O as TooltipContent,
|
|
67
|
+
M as TooltipProvider,
|
|
68
|
+
K as TooltipTrigger
|
|
61
69
|
};
|
|
@@ -5,20 +5,35 @@
|
|
|
5
5
|
- Category: composed
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
|
-
users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null }
|
|
8
|
+
users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null, ring?: AvatarRing }
|
|
9
9
|
max: number (default: 4, overflow shows "+N" badge)
|
|
10
|
-
size: "sm" | "md" | "lg"
|
|
10
|
+
size: "xs" | "sm" | "md" | "lg" | "xl"
|
|
11
11
|
showTooltip: boolean (default: true)
|
|
12
|
+
borderColor: "surface-1" | "surface-2" (default: "surface-2") — overlap border color
|
|
13
|
+
onOverflowClick: () => void — makes the "+N" badge interactive (button)
|
|
14
|
+
renderAvatar: (user: AvatarUser, index: number) => ReactNode — custom avatar render
|
|
15
|
+
expandDirection: "left" | "right" (default: "right") — direction group expands on hover
|
|
16
|
+
expandAmount: "compact" | "default" | "wide" (default: "default") — how far group spreads
|
|
17
|
+
|
|
18
|
+
## AvatarUser Type
|
|
19
|
+
name: string (REQUIRED)
|
|
20
|
+
image?: string | null
|
|
21
|
+
ring?: "none" | "lead" | "admin" | "client" — role ring per user in group
|
|
12
22
|
|
|
13
23
|
## Defaults
|
|
14
|
-
size="md", max=4, showTooltip=true
|
|
24
|
+
size="md", max=4, showTooltip=true, borderColor="surface-2", expandDirection="right", expandAmount="default"
|
|
15
25
|
|
|
16
26
|
## Example
|
|
17
27
|
```jsx
|
|
18
28
|
<AvatarGroup
|
|
19
|
-
users={[
|
|
29
|
+
users={[
|
|
30
|
+
{ name: 'Alice', image: '/alice.jpg', ring: 'lead' },
|
|
31
|
+
{ name: 'Bob', ring: 'admin' },
|
|
32
|
+
]}
|
|
20
33
|
max={3}
|
|
21
34
|
size="md"
|
|
35
|
+
borderColor="surface-1"
|
|
36
|
+
onOverflowClick={() => setShowAll(true)}
|
|
22
37
|
/>
|
|
23
38
|
```
|
|
24
39
|
|
|
@@ -26,7 +41,17 @@
|
|
|
26
41
|
- Wraps TooltipProvider internally — no need to add one yourself
|
|
27
42
|
- Users beyond `max` are collapsed into a "+N" overflow badge
|
|
28
43
|
- Missing `image` falls back to initials derived from `name`
|
|
44
|
+
- Hover expand animation uses CSS `group-hover` — parent must not clip overflow
|
|
45
|
+
- `borderColor` should match the surface context the group sits on (e.g., `surface-1` on cards)
|
|
29
46
|
|
|
30
47
|
## Changes
|
|
48
|
+
### v0.21.0
|
|
49
|
+
- **Added** `xs` and `xl` size variants
|
|
50
|
+
- **Added** `borderColor` prop for overlap border matching surface context
|
|
51
|
+
- **Added** `onOverflowClick` prop making the overflow badge an interactive button
|
|
52
|
+
- **Added** `overflowContent` prop for popover content on overflow click
|
|
53
|
+
- **Added** `renderAvatar` prop for custom per-avatar rendering
|
|
54
|
+
- **Added** `AvatarUser.ring` field for per-user role rings in groups
|
|
55
|
+
|
|
31
56
|
### v0.1.0
|
|
32
57
|
- **Added** Initial release
|
|
@@ -8,27 +8,42 @@
|
|
|
8
8
|
size: "xs" | "sm" | "md" | "lg" | "xl"
|
|
9
9
|
shape: "circle" | "square" | "rounded"
|
|
10
10
|
status: "online" | "offline" | "busy" | "away"
|
|
11
|
+
ring: "none" | "lead" | "admin" | "client" (default: "none") — Role ring with semantic colors
|
|
12
|
+
badge: number | "dot" | ReactNode — Badge overlay at top-right
|
|
13
|
+
loading: boolean (default: false) — Skeleton shimmer state
|
|
11
14
|
|
|
12
15
|
## Compound Components
|
|
13
|
-
Avatar (root with size/shape/status)
|
|
16
|
+
Avatar (root with size/shape/status/ring/badge/loading)
|
|
14
17
|
AvatarImage (src, alt)
|
|
15
|
-
AvatarFallback (children = initials text)
|
|
18
|
+
AvatarFallback (children = initials text, colorSeed?: string)
|
|
19
|
+
|
|
20
|
+
## AvatarFallback Props
|
|
21
|
+
colorSeed: string — Deterministic color seed for consistent background color across renders
|
|
16
22
|
|
|
17
23
|
## Defaults
|
|
18
|
-
size="md", shape="circle"
|
|
24
|
+
size="md", shape="circle", ring="none", loading=false
|
|
19
25
|
|
|
20
26
|
## Example
|
|
21
27
|
```jsx
|
|
22
|
-
<Avatar size="lg" status="online">
|
|
28
|
+
<Avatar size="lg" status="online" ring="lead" badge={3}>
|
|
23
29
|
<AvatarImage src={user.photoUrl} alt={user.name} />
|
|
24
|
-
<AvatarFallback>JD</AvatarFallback>
|
|
30
|
+
<AvatarFallback colorSeed={user.id}>JD</AvatarFallback>
|
|
25
31
|
</Avatar>
|
|
26
32
|
```
|
|
27
33
|
|
|
28
34
|
## Gotchas
|
|
29
35
|
- Status dot renders with role="img" and aria-label (accessible, not decorative)
|
|
30
36
|
- Dot size scales automatically with avatar size
|
|
37
|
+
- Ring offset color matches the surface context — ensure it sits on the expected background
|
|
38
|
+
- Badge is hidden when value is `0` (falsy); use `"dot"` for presence without a count
|
|
39
|
+
- Online status dot pulses with a CSS animation
|
|
31
40
|
|
|
32
41
|
## Changes
|
|
42
|
+
### v0.21.0
|
|
43
|
+
- **Added** `ring` prop with semantic role colors (`lead`, `admin`, `client`)
|
|
44
|
+
- **Added** `badge` prop for numeric, dot, or custom ReactNode overlay at top-right
|
|
45
|
+
- **Added** `loading` prop for skeleton shimmer placeholder state
|
|
46
|
+
- **Added** `AvatarFallback.colorSeed` for deterministic fallback background colors
|
|
47
|
+
|
|
33
48
|
### v0.1.0
|
|
34
49
|
- **Added** Initial release with CVA size variants (xs-xl) and status indicator badge
|
package/llms-full.txt
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
> All variant values and props verified from source CVA definitions.
|
|
6
6
|
>
|
|
7
7
|
> Package: @devalok/shilp-sutra
|
|
8
|
-
> Version: 0.
|
|
8
|
+
> Version: 0.21.0
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
@@ -327,28 +327,43 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
|
|
|
327
327
|
size: "xs" | "sm" | "md" | "lg" | "xl"
|
|
328
328
|
shape: "circle" | "square" | "rounded"
|
|
329
329
|
status: "online" | "offline" | "busy" | "away"
|
|
330
|
+
ring: "none" | "lead" | "admin" | "client" (default: "none") — Role ring with semantic colors
|
|
331
|
+
badge: number | "dot" | ReactNode — Badge overlay at top-right
|
|
332
|
+
loading: boolean (default: false) — Skeleton shimmer state
|
|
330
333
|
|
|
331
334
|
## Compound Components
|
|
332
|
-
Avatar (root with size/shape/status)
|
|
335
|
+
Avatar (root with size/shape/status/ring/badge/loading)
|
|
333
336
|
AvatarImage (src, alt)
|
|
334
|
-
AvatarFallback (children = initials text)
|
|
337
|
+
AvatarFallback (children = initials text, colorSeed?: string)
|
|
338
|
+
|
|
339
|
+
## AvatarFallback Props
|
|
340
|
+
colorSeed: string — Deterministic color seed for consistent background color across renders
|
|
335
341
|
|
|
336
342
|
## Defaults
|
|
337
|
-
size="md", shape="circle"
|
|
343
|
+
size="md", shape="circle", ring="none", loading=false
|
|
338
344
|
|
|
339
345
|
## Example
|
|
340
346
|
```jsx
|
|
341
|
-
<Avatar size="lg" status="online">
|
|
347
|
+
<Avatar size="lg" status="online" ring="lead" badge={3}>
|
|
342
348
|
<AvatarImage src={user.photoUrl} alt={user.name} />
|
|
343
|
-
<AvatarFallback>JD</AvatarFallback>
|
|
349
|
+
<AvatarFallback colorSeed={user.id}>JD</AvatarFallback>
|
|
344
350
|
</Avatar>
|
|
345
351
|
```
|
|
346
352
|
|
|
347
353
|
## Gotchas
|
|
348
354
|
- Status dot renders with role="img" and aria-label (accessible, not decorative)
|
|
349
355
|
- Dot size scales automatically with avatar size
|
|
356
|
+
- Ring offset color matches the surface context — ensure it sits on the expected background
|
|
357
|
+
- Badge is hidden when value is `0` (falsy); use `"dot"` for presence without a count
|
|
358
|
+
- Online status dot pulses with a CSS animation
|
|
350
359
|
|
|
351
360
|
## Changes
|
|
361
|
+
### v0.21.0
|
|
362
|
+
- **Added** `ring` prop with semantic role colors (`lead`, `admin`, `client`)
|
|
363
|
+
- **Added** `badge` prop for numeric, dot, or custom ReactNode overlay at top-right
|
|
364
|
+
- **Added** `loading` prop for skeleton shimmer placeholder state
|
|
365
|
+
- **Added** `AvatarFallback.colorSeed` for deterministic fallback background colors
|
|
366
|
+
|
|
352
367
|
### v0.1.0
|
|
353
368
|
- **Added** Initial release with CVA size variants (xs-xl) and status indicator badge
|
|
354
369
|
# Badge
|
|
@@ -2965,20 +2980,35 @@ export default function RootLayout({ children }) {
|
|
|
2965
2980
|
- Category: composed
|
|
2966
2981
|
|
|
2967
2982
|
## Props
|
|
2968
|
-
users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null }
|
|
2983
|
+
users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null, ring?: AvatarRing }
|
|
2969
2984
|
max: number (default: 4, overflow shows "+N" badge)
|
|
2970
|
-
size: "sm" | "md" | "lg"
|
|
2985
|
+
size: "xs" | "sm" | "md" | "lg" | "xl"
|
|
2971
2986
|
showTooltip: boolean (default: true)
|
|
2987
|
+
borderColor: "surface-1" | "surface-2" (default: "surface-2") — overlap border color
|
|
2988
|
+
onOverflowClick: () => void — makes the "+N" badge interactive (button)
|
|
2989
|
+
renderAvatar: (user: AvatarUser, index: number) => ReactNode — custom avatar render
|
|
2990
|
+
expandDirection: "left" | "right" (default: "right") — direction group expands on hover
|
|
2991
|
+
expandAmount: "compact" | "default" | "wide" (default: "default") — how far group spreads
|
|
2992
|
+
|
|
2993
|
+
## AvatarUser Type
|
|
2994
|
+
name: string (REQUIRED)
|
|
2995
|
+
image?: string | null
|
|
2996
|
+
ring?: "none" | "lead" | "admin" | "client" — role ring per user in group
|
|
2972
2997
|
|
|
2973
2998
|
## Defaults
|
|
2974
|
-
size="md", max=4, showTooltip=true
|
|
2999
|
+
size="md", max=4, showTooltip=true, borderColor="surface-2", expandDirection="right", expandAmount="default"
|
|
2975
3000
|
|
|
2976
3001
|
## Example
|
|
2977
3002
|
```jsx
|
|
2978
3003
|
<AvatarGroup
|
|
2979
|
-
users={[
|
|
3004
|
+
users={[
|
|
3005
|
+
{ name: 'Alice', image: '/alice.jpg', ring: 'lead' },
|
|
3006
|
+
{ name: 'Bob', ring: 'admin' },
|
|
3007
|
+
]}
|
|
2980
3008
|
max={3}
|
|
2981
3009
|
size="md"
|
|
3010
|
+
borderColor="surface-1"
|
|
3011
|
+
onOverflowClick={() => setShowAll(true)}
|
|
2982
3012
|
/>
|
|
2983
3013
|
```
|
|
2984
3014
|
|
|
@@ -2986,8 +3016,18 @@ export default function RootLayout({ children }) {
|
|
|
2986
3016
|
- Wraps TooltipProvider internally — no need to add one yourself
|
|
2987
3017
|
- Users beyond `max` are collapsed into a "+N" overflow badge
|
|
2988
3018
|
- Missing `image` falls back to initials derived from `name`
|
|
3019
|
+
- Hover expand animation uses CSS `group-hover` — parent must not clip overflow
|
|
3020
|
+
- `borderColor` should match the surface context the group sits on (e.g., `surface-1` on cards)
|
|
2989
3021
|
|
|
2990
3022
|
## Changes
|
|
3023
|
+
### v0.21.0
|
|
3024
|
+
- **Added** `xs` and `xl` size variants
|
|
3025
|
+
- **Added** `borderColor` prop for overlap border matching surface context
|
|
3026
|
+
- **Added** `onOverflowClick` prop making the overflow badge an interactive button
|
|
3027
|
+
- **Added** `overflowContent` prop for popover content on overflow click
|
|
3028
|
+
- **Added** `renderAvatar` prop for custom per-avatar rendering
|
|
3029
|
+
- **Added** `AvatarUser.ring` field for per-user role rings in groups
|
|
3030
|
+
|
|
2991
3031
|
### v0.1.0
|
|
2992
3032
|
- **Added** Initial release
|
|
2993
3033
|
# CommandPalette
|
package/llms.txt
CHANGED
|
@@ -180,7 +180,7 @@ NOTIFICATION SELECTION GUIDE:
|
|
|
180
180
|
### Data Display
|
|
181
181
|
- Badge: variant(subtle|solid|outline) color(default|info|success|error|warning|brand|accent + 7 category colors) size(xs|sm|md|lg) + onDismiss
|
|
182
182
|
- Chip: variant(subtle|outline) color(default|primary|success|error|warning|info + 7 category) size(sm|md|lg) label(string, REQUIRED) + onDismiss, onClick
|
|
183
|
-
- Avatar: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status(AvatarStatus) > AvatarImage + AvatarFallback.
|
|
183
|
+
- Avatar: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status?(AvatarStatus) ring?('lead'|'admin'|'client') badge?(number|'dot'|ReactNode) loading?(boolean) > AvatarImage + AvatarFallback(colorSeed?). Types: AvatarStatus = 'online'|'offline'|'busy'|'away', AvatarRing = 'none'|'lead'|'admin'|'client'. Fallback colors are deterministic from name hash (8 categorical). Online dot pulses. Badge pops in with MotionPop.
|
|
184
184
|
- Card: variant(default|elevated|outline|flat) interactive(boolean) > CardHeader > CardTitle, CardDescription; CardContent; CardFooter
|
|
185
185
|
- Table > TableHeader > TableRow > TableHead; TableBody > TableRow > TableCell; TableFooter; TableCaption
|
|
186
186
|
- Text: variant(TextVariant) as(element). Type: TextVariant = 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'label-lg' | 'label-md' | 'label-sm' | 'label-xs' | 'caption' | 'overline'
|
|
@@ -222,7 +222,7 @@ NOTIFICATION SELECTION GUIDE:
|
|
|
222
222
|
### Composed Components
|
|
223
223
|
- ConfirmDialog: open, onOpenChange, title, description, onConfirm + confirmText, cancelText, color(default|error), loading
|
|
224
224
|
- PageHeader: title, subtitle, breadcrumbs[], actions(ReactNode)
|
|
225
|
-
- AvatarGroup: users[], max(number), size(sm|md|lg), showTooltip
|
|
225
|
+
- AvatarGroup: users(AvatarUser[]), max?(number), size?(xs|sm|md|lg|xl), showTooltip?, borderColor?('surface-1'|'surface-2'), onOverflowClick?(), renderAvatar?((user,index)=>ReactNode), expandDirection?('left'|'right'), expandAmount?('compact'|'default'|'wide'). Type: AvatarUser = { name, image?, ring? }. GPU-composited hover expand via translateX. Use expandDirection="left" for right-aligned groups.
|
|
226
226
|
- StatusBadge: DISCRIMINATED UNION — pass status OR color, not both. status(active|pending|approved|rejected|completed|blocked|cancelled|draft) color(success|warning|error|info|neutral) size(sm|md)
|
|
227
227
|
- ContentCard: variant(default|outline|ghost) padding(default|compact|spacious|none)
|
|
228
228
|
- EmptyState: icon(ReactNode or ComponentType), title(required), description, action(ReactNode), compact
|