@devalok/shilp-sutra 0.49.0 â 0.49.2
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/badge-group.js +41 -41
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/block-shell.js +1 -1
- package/dist/_chunks/chart-container.js +1 -1
- package/dist/_chunks/chat.js +6 -15
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/colors.js +2 -2
- package/dist/_chunks/document-preview.js +4 -4
- package/dist/_chunks/emoji-suggestion.js +5 -5
- package/dist/_chunks/emoji-suggestion.js.map +1 -1
- package/dist/_chunks/emoji.js +1 -1
- package/dist/_chunks/field-state.js +1 -1
- package/dist/_chunks/grid-lines.js +1 -1
- package/dist/_chunks/image-preview.js +7 -7
- package/dist/_chunks/keybinding.js +1 -1
- package/dist/_chunks/link-context.js +1 -1
- package/dist/_chunks/mention-suggestion.js +2 -2
- package/dist/_chunks/mention.js +1 -1
- package/dist/_chunks/motion-provider.js +1 -1
- package/dist/_chunks/normalize-icon.js +1 -1
- package/dist/_chunks/oauth-button.js +2 -2
- package/dist/_chunks/popover.js +17 -17
- package/dist/_chunks/primitives.js +1 -1
- package/dist/_chunks/shared.js +5 -5
- package/dist/_chunks/success.js +5 -8
- package/dist/_chunks/success.js.map +1 -1
- package/dist/_chunks/tiptap.js +11 -11
- package/dist/_chunks/tooltip.js +1 -1
- package/dist/_chunks/tree-view.js +2 -2
- package/dist/_chunks/use-calendar.js +1 -1
- package/dist/_chunks/use-controllable-open.js +1 -1
- package/dist/_chunks/vendor-client.js +1 -1
- package/dist/_chunks/vendor-utils.js +1 -1
- package/dist/ai/block-renderer.js +8 -11
- package/dist/ai/block-renderer.js.map +1 -1
- package/dist/ai/blocks/error.js +1 -1
- package/dist/ai/blocks/index.js +2 -2
- package/dist/ai/blocks/text.js +1 -1
- package/dist/ai/command-bar.d.ts.map +1 -1
- package/dist/ai/command-bar.js +8 -39
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.js +4 -10
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/devadoot-icon.d.ts.map +1 -1
- package/dist/ai/index.js +10 -41
- package/dist/ai/index.js.map +1 -1
- package/dist/composed/activity-feed.js +3 -3
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.js +3 -3
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/bulk-action-bar.js +1 -1
- package/dist/composed/command-palette.js +6 -6
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/date-picker/index.js +10 -10
- package/dist/composed/emoji-picker.js +4 -4
- package/dist/composed/empty-state.d.ts.map +1 -1
- package/dist/composed/empty-state.js +23 -33
- package/dist/composed/empty-state.js.map +1 -1
- package/dist/composed/extensions/emoji-node.js +1 -1
- package/dist/composed/extensions/emoji-suggestion.js +1 -1
- package/dist/composed/file-preview.js +14 -14
- package/dist/composed/filter-bar.js +1 -1
- package/dist/composed/multi-select-popover.js +3 -3
- package/dist/composed/priority-indicator.js +1 -1
- package/dist/composed/responsive-modal.js +21 -21
- package/dist/composed/rich-chat-input.js +445 -445
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +28 -28
- package/dist/composed/schedule-view.js +1 -1
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.js +1 -1
- package/dist/motion/index.js +2 -2
- package/dist/shell/bottom-navbar.js +3 -3
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.js +2 -2
- package/dist/shell/link-context.js +2 -2
- package/dist/shell/notification-center.js +3 -3
- package/dist/shell/sidebar.js +2 -2
- package/dist/shell/top-bar.js +1 -1
- package/dist/ui/accordion.js +14 -14
- package/dist/ui/alert-dialog.js +31 -31
- package/dist/ui/alert.js +1 -1
- package/dist/ui/aspect-ratio.js +1 -1
- package/dist/ui/autocomplete.js +7 -7
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +52 -67
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-group.js +1 -1
- package/dist/ui/badge.d.ts +2 -0
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/badge.js +1 -1
- package/dist/ui/banner.js +1 -1
- package/dist/ui/breadcrumb.js +1 -1
- package/dist/ui/button.js +9 -9
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.js +1 -1
- package/dist/ui/charts/area-chart.js +6 -6
- package/dist/ui/charts/bar-chart.js +6 -6
- package/dist/ui/charts/chart-container.js +1 -1
- package/dist/ui/charts/gauge-chart.js +2 -2
- package/dist/ui/charts/index.js +2 -2
- package/dist/ui/charts/line-chart.js +6 -6
- package/dist/ui/charts/pie-chart.js +5 -5
- package/dist/ui/charts/radar-chart.js +5 -5
- package/dist/ui/charts/sparkline.js +2 -2
- package/dist/ui/chat/index.js +2 -2
- package/dist/ui/checkbox.js +5 -5
- package/dist/ui/collapsible.js +4 -4
- package/dist/ui/color-input.js +4 -4
- package/dist/ui/combobox.js +8 -8
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.js +41 -41
- package/dist/ui/dialog.js +25 -25
- package/dist/ui/dot.d.ts.map +1 -1
- package/dist/ui/dot.js +24 -32
- package/dist/ui/dot.js.map +1 -1
- package/dist/ui/dropdown-menu.js +51 -51
- package/dist/ui/hover-card.js +9 -9
- package/dist/ui/icon-button.js +1 -1
- package/dist/ui/index.js +6 -6
- package/dist/ui/input.js +2 -2
- package/dist/ui/label.js +1 -1
- package/dist/ui/lib/utils.js +4 -4
- package/dist/ui/link.js +1 -1
- package/dist/ui/menubar.js +53 -53
- package/dist/ui/navigation-menu.js +27 -27
- package/dist/ui/number-input.js +2 -2
- package/dist/ui/oauth-button/index.js +2 -2
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/popover.js +2 -2
- package/dist/ui/progress.js +2 -2
- package/dist/ui/radio.js +2 -2
- package/dist/ui/segmented-control.js +1 -1
- package/dist/ui/select.js +35 -35
- package/dist/ui/separator.js +1 -1
- package/dist/ui/sheet.js +22 -22
- package/dist/ui/sidebar.js +2 -2
- package/dist/ui/skeleton.js +1 -1
- package/dist/ui/slider.js +8 -8
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.js +3 -3
- package/dist/ui/stat-card.d.ts +2 -0
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +94 -126
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stat-flash.js +1 -1
- package/dist/ui/stepper.js +1 -1
- package/dist/ui/surface.js +2 -2
- package/dist/ui/switch.js +2 -2
- package/dist/ui/table-row-link.js +1 -1
- package/dist/ui/tabs.js +13 -13
- package/dist/ui/text.js +1 -1
- package/dist/ui/textarea.js +2 -2
- package/dist/ui/toggle-group.js +1 -1
- package/dist/ui/toggle.js +2 -2
- package/dist/ui/tooltip.js +16 -16
- package/dist/ui/tree-view/index.js +2 -2
- package/llms.txt +1 -1
- package/mcp-manifest.json +1 -1
- package/package.json +1 -1
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +1 -1
package/dist/ui/alert-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Action as e, Cancel as t, Content2$7 as n, Description2 as r, Overlay2 as i, Portal2$3 as a, Root2$9 as o, Title2 as s, Trigger2 as c } from "../_chunks/primitives.js";
|
|
3
3
|
import { springs as l, tweens as u } from "./lib/motion.js";
|
|
4
4
|
import { cn as d } from "./lib/utils.js";
|
|
5
5
|
import { useIsMobile as f } from "../hooks/use-mobile.js";
|
|
@@ -7,29 +7,29 @@ import * as p from "react";
|
|
|
7
7
|
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
8
8
|
import { AnimatePresence as g, motion as _ } from "framer-motion";
|
|
9
9
|
//#region src/ui/alert-dialog.tsx
|
|
10
|
-
var v = p.createContext({ open: !1 }), y = () => p.useContext(v), b = ({ open: e, defaultOpen:
|
|
11
|
-
let [
|
|
12
|
-
s ||
|
|
13
|
-
}, [s,
|
|
10
|
+
var v = p.createContext({ open: !1 }), y = () => p.useContext(v), b = ({ open: e, defaultOpen: t, onOpenChange: n, ...r }) => {
|
|
11
|
+
let [i, a] = p.useState(t ?? !1), s = e !== void 0, c = s ? e : i, l = p.useCallback((e) => {
|
|
12
|
+
s || a(e), n?.(e);
|
|
13
|
+
}, [s, n]), u = p.useMemo(() => ({ open: c }), [c]);
|
|
14
14
|
return /* @__PURE__ */ m(v.Provider, {
|
|
15
15
|
value: u,
|
|
16
|
-
children: /* @__PURE__ */ m(
|
|
16
|
+
children: /* @__PURE__ */ m(o, {
|
|
17
17
|
open: c,
|
|
18
18
|
onOpenChange: l,
|
|
19
|
-
...
|
|
19
|
+
...r
|
|
20
20
|
})
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
b.displayName = "AlertDialog";
|
|
24
|
-
var x =
|
|
24
|
+
var x = c, S = a, C = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(i, {
|
|
25
25
|
ref: n,
|
|
26
26
|
forceMount: !0,
|
|
27
27
|
className: d("fixed inset-0 z-modal bg-overlay", e),
|
|
28
28
|
...t
|
|
29
29
|
}));
|
|
30
|
-
C.displayName =
|
|
31
|
-
var w = p.forwardRef(({ className: e, children: t, responsive:
|
|
32
|
-
let { open: o } = y(), s = f(), c =
|
|
30
|
+
C.displayName = i.displayName;
|
|
31
|
+
var w = p.forwardRef(({ className: e, children: t, responsive: r, ...i }, a) => {
|
|
32
|
+
let { open: o } = y(), s = f(), c = r !== !1 && s;
|
|
33
33
|
return /* @__PURE__ */ m(g, { children: o && /* @__PURE__ */ h(S, {
|
|
34
34
|
forceMount: !0,
|
|
35
35
|
children: [/* @__PURE__ */ m(C, {
|
|
@@ -40,11 +40,11 @@ var w = p.forwardRef(({ className: e, children: t, responsive: n, ...r }, i) =>
|
|
|
40
40
|
exit: { opacity: 0 },
|
|
41
41
|
transition: u.fade
|
|
42
42
|
})
|
|
43
|
-
}), /* @__PURE__ */ m(
|
|
44
|
-
ref:
|
|
43
|
+
}), /* @__PURE__ */ m(n, {
|
|
44
|
+
ref: a,
|
|
45
45
|
forceMount: !0,
|
|
46
46
|
asChild: !0,
|
|
47
|
-
...
|
|
47
|
+
...i,
|
|
48
48
|
children: /* @__PURE__ */ m(_.div, {
|
|
49
49
|
initial: c ? { y: "100%" } : {
|
|
50
50
|
opacity: 0,
|
|
@@ -68,13 +68,13 @@ var w = p.forwardRef(({ className: e, children: t, responsive: n, ...r }, i) =>
|
|
|
68
68
|
...l.smooth,
|
|
69
69
|
opacity: u.fade
|
|
70
70
|
},
|
|
71
|
-
className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06",
|
|
71
|
+
className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", r === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", e),
|
|
72
72
|
children: t
|
|
73
73
|
})
|
|
74
74
|
})]
|
|
75
75
|
}) });
|
|
76
76
|
});
|
|
77
|
-
w.displayName =
|
|
77
|
+
w.displayName = n.displayName;
|
|
78
78
|
var T = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
|
|
79
79
|
ref: n,
|
|
80
80
|
className: d("flex flex-col space-y-ds-02b text-center sm:text-left", e),
|
|
@@ -87,29 +87,29 @@ var E = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
|
|
|
87
87
|
...t
|
|
88
88
|
}));
|
|
89
89
|
E.displayName = "AlertDialogFooter";
|
|
90
|
-
var D = p.forwardRef(({ className:
|
|
91
|
-
ref: r,
|
|
92
|
-
className: d("text-ds-lg font-semibold", t),
|
|
93
|
-
...n
|
|
94
|
-
}));
|
|
95
|
-
D.displayName = e.displayName;
|
|
96
|
-
var O = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(c, {
|
|
90
|
+
var D = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(s, {
|
|
97
91
|
ref: n,
|
|
98
|
-
className: d("text-ds-
|
|
92
|
+
className: d("text-ds-lg font-semibold", e),
|
|
99
93
|
...t
|
|
100
94
|
}));
|
|
101
|
-
|
|
102
|
-
var
|
|
95
|
+
D.displayName = s.displayName;
|
|
96
|
+
var O = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(r, {
|
|
103
97
|
ref: n,
|
|
104
|
-
className: d("
|
|
98
|
+
className: d("text-ds-md text-surface-fg-muted", e),
|
|
105
99
|
...t
|
|
106
100
|
}));
|
|
107
|
-
|
|
108
|
-
var
|
|
101
|
+
O.displayName = r.displayName;
|
|
102
|
+
var k = p.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ m(e, {
|
|
103
|
+
ref: r,
|
|
104
|
+
className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", t),
|
|
105
|
+
...n
|
|
106
|
+
}));
|
|
107
|
+
k.displayName = e.displayName;
|
|
108
|
+
var A = p.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ m(t, {
|
|
109
109
|
ref: r,
|
|
110
110
|
className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
|
|
111
|
-
...
|
|
111
|
+
...n
|
|
112
112
|
}));
|
|
113
|
-
A.displayName =
|
|
113
|
+
A.displayName = t.displayName;
|
|
114
114
|
//#endregion
|
|
115
115
|
export { b as AlertDialog, k as AlertDialogAction, A as AlertDialogCancel, w as AlertDialogContent, O as AlertDialogDescription, E as AlertDialogFooter, T as AlertDialogHeader, C as AlertDialogOverlay, S as AlertDialogPortal, D as AlertDialogTitle, x as AlertDialogTrigger };
|
package/dist/ui/alert.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { motionProps as e, springs as t } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
3
|
+
import { cva as n } from "../_chunks/vendor-utils.js";
|
|
4
4
|
import { cn as r } from "./lib/utils.js";
|
|
5
5
|
import { Icon as i } from "./icon.js";
|
|
6
6
|
import * as a from "react";
|
package/dist/ui/aspect-ratio.js
CHANGED
package/dist/ui/autocomplete.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives.js";
|
|
3
3
|
import { springs as o, tweens as s } from "./lib/motion.js";
|
|
4
4
|
import { cn as c } from "./lib/utils.js";
|
|
5
5
|
import { useFormField as l } from "./form.js";
|
|
@@ -22,15 +22,15 @@ var g = {
|
|
|
22
22
|
transition: o.snappy
|
|
23
23
|
}
|
|
24
24
|
}, v = u.forwardRef(({ options: o, value: v, onValueChange: y, placeholder: b, emptyText: x = "No options", disabled: S, className: C, id: w, ...T }, E) => {
|
|
25
|
-
let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } =
|
|
25
|
+
let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } = a({
|
|
26
26
|
open: N,
|
|
27
27
|
placement: "bottom-start",
|
|
28
|
-
whileElementsMounted:
|
|
28
|
+
whileElementsMounted: e,
|
|
29
29
|
middleware: [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
n(4),
|
|
31
|
+
t(),
|
|
32
|
+
r(),
|
|
33
|
+
i({ apply({ availableHeight: e, rects: t, elements: n }) {
|
|
34
34
|
Object.assign(n.floating.style, {
|
|
35
35
|
maxHeight: `${Math.min(e, 240)}px`,
|
|
36
36
|
width: `${t.reference.width}px`
|
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,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,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;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,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;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,qFA4EV,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,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}
|
package/dist/ui/avatar.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Fallback as e, Image as t, Root$6 as n } from "../_chunks/primitives.js";
|
|
3
3
|
import { springs as r } from "./lib/motion.js";
|
|
4
|
-
import {
|
|
4
|
+
import { cva as i } from "../_chunks/vendor-utils.js";
|
|
5
5
|
import { cn as a } from "./lib/utils.js";
|
|
6
6
|
import { Dot as o } from "./dot.js";
|
|
7
7
|
import { Skeleton as s } from "./skeleton.js";
|
|
8
8
|
import * as c from "react";
|
|
9
9
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
10
|
-
import { motion as d
|
|
10
|
+
import { motion as d } from "framer-motion";
|
|
11
11
|
//#region src/ui/avatar.tsx
|
|
12
|
-
var
|
|
12
|
+
var f = c.createContext("circle"), p = c.createContext("md"), m = i("relative flex shrink-0 overflow-hidden", {
|
|
13
13
|
variants: {
|
|
14
14
|
size: {
|
|
15
15
|
xs: "h-ds-xs w-ds-xs",
|
|
@@ -28,37 +28,37 @@ var p = c.createContext("circle"), m = c.createContext("md"), h = i("relative fl
|
|
|
28
28
|
size: "md",
|
|
29
29
|
shape: "circle"
|
|
30
30
|
}
|
|
31
|
-
}),
|
|
31
|
+
}), h = {
|
|
32
32
|
online: "success",
|
|
33
33
|
offline: "neutral",
|
|
34
34
|
busy: "error",
|
|
35
35
|
away: "warning"
|
|
36
|
-
},
|
|
36
|
+
}, g = {
|
|
37
37
|
online: "Online",
|
|
38
38
|
offline: "Offline",
|
|
39
39
|
busy: "Busy",
|
|
40
40
|
away: "Away"
|
|
41
|
-
},
|
|
41
|
+
}, _ = {
|
|
42
42
|
xs: "xs",
|
|
43
43
|
sm: "sm",
|
|
44
44
|
md: "md",
|
|
45
45
|
lg: "lg",
|
|
46
46
|
xl: "lg"
|
|
47
|
-
},
|
|
47
|
+
}, v = {
|
|
48
48
|
lead: "ring-accent-7",
|
|
49
49
|
admin: "ring-warning-7",
|
|
50
50
|
client: "ring-info-7"
|
|
51
|
-
},
|
|
51
|
+
}, y = {
|
|
52
52
|
circle: "rounded-pill",
|
|
53
53
|
square: "rounded-none",
|
|
54
54
|
rounded: "rounded-control"
|
|
55
|
-
},
|
|
55
|
+
}, b = {
|
|
56
56
|
xs: "text-ds-2xs",
|
|
57
57
|
sm: "text-ds-xs",
|
|
58
58
|
md: "text-ds-sm",
|
|
59
59
|
lg: "text-ds-md",
|
|
60
60
|
xl: "text-ds-lg"
|
|
61
|
-
},
|
|
61
|
+
}, x = [
|
|
62
62
|
{
|
|
63
63
|
bg: "bg-accent-3",
|
|
64
64
|
text: "text-accent-11"
|
|
@@ -92,93 +92,78 @@ var p = c.createContext("circle"), m = c.createContext("md"), h = i("relative fl
|
|
|
92
92
|
text: "text-category-cyan-11"
|
|
93
93
|
}
|
|
94
94
|
];
|
|
95
|
-
function
|
|
95
|
+
function S(e) {
|
|
96
96
|
let t = 5381;
|
|
97
97
|
for (let n = 0; n < e.length; n++) t = (t << 5) + t + e.charCodeAt(n) | 0;
|
|
98
|
-
return
|
|
98
|
+
return x[Math.abs(t) % x.length];
|
|
99
99
|
}
|
|
100
|
-
var
|
|
101
|
-
let
|
|
102
|
-
if (
|
|
103
|
-
ref:
|
|
104
|
-
className: a("relative inline-flex shrink-0",
|
|
100
|
+
var C = c.forwardRef(({ className: e, size: t, shape: i, status: c, ring: b, badge: x, loading: S, children: C, ...w }, T) => {
|
|
101
|
+
let E = i ?? "circle", D = b && b !== "none" ? a("ring-2 ring-offset-2 ring-offset-surface-raised", v[b], y[E]) : void 0;
|
|
102
|
+
if (S) return /* @__PURE__ */ l("span", {
|
|
103
|
+
ref: T,
|
|
104
|
+
className: a("relative inline-flex shrink-0", D),
|
|
105
105
|
children: /* @__PURE__ */ l(s, {
|
|
106
|
-
className: a(
|
|
107
|
-
size:
|
|
106
|
+
className: a(m({
|
|
107
|
+
size: t,
|
|
108
108
|
shape: i
|
|
109
109
|
})),
|
|
110
110
|
"data-slot": "avatar-skeleton"
|
|
111
111
|
})
|
|
112
112
|
});
|
|
113
|
-
let
|
|
114
|
-
return /* @__PURE__ */ l(
|
|
115
|
-
value:
|
|
116
|
-
children: /* @__PURE__ */ l(
|
|
117
|
-
value:
|
|
113
|
+
let O = x !== void 0 && x !== 0;
|
|
114
|
+
return /* @__PURE__ */ l(f.Provider, {
|
|
115
|
+
value: E,
|
|
116
|
+
children: /* @__PURE__ */ l(p.Provider, {
|
|
117
|
+
value: t ?? "md",
|
|
118
118
|
children: /* @__PURE__ */ u("span", {
|
|
119
|
-
className: a("relative inline-flex shrink-0",
|
|
119
|
+
className: a("relative inline-flex shrink-0", D),
|
|
120
120
|
children: [
|
|
121
|
-
/* @__PURE__ */ l(
|
|
122
|
-
ref:
|
|
123
|
-
className: a(
|
|
124
|
-
size:
|
|
121
|
+
/* @__PURE__ */ l(n, {
|
|
122
|
+
ref: T,
|
|
123
|
+
className: a(m({
|
|
124
|
+
size: t,
|
|
125
125
|
shape: i
|
|
126
|
-
}),
|
|
127
|
-
...
|
|
128
|
-
children:
|
|
126
|
+
}), e),
|
|
127
|
+
...w,
|
|
128
|
+
children: C
|
|
129
129
|
}),
|
|
130
|
-
c && /* @__PURE__ */ l(
|
|
130
|
+
c && /* @__PURE__ */ l("span", {
|
|
131
131
|
className: "absolute bottom-0 right-0",
|
|
132
132
|
role: "img",
|
|
133
|
-
"aria-label":
|
|
134
|
-
...c === "online" && !O ? {
|
|
135
|
-
animate: { opacity: [
|
|
136
|
-
1,
|
|
137
|
-
.75,
|
|
138
|
-
1
|
|
139
|
-
] },
|
|
140
|
-
transition: {
|
|
141
|
-
duration: 2.5,
|
|
142
|
-
repeat: Infinity,
|
|
143
|
-
ease: "easeInOut"
|
|
144
|
-
}
|
|
145
|
-
} : {},
|
|
133
|
+
"aria-label": g[c],
|
|
146
134
|
children: /* @__PURE__ */ l(o, {
|
|
147
|
-
color:
|
|
148
|
-
size:
|
|
135
|
+
color: h[c],
|
|
136
|
+
size: _[t ?? "md"],
|
|
149
137
|
withBorder: !0,
|
|
150
138
|
"aria-hidden": !0
|
|
151
139
|
})
|
|
152
140
|
}),
|
|
153
|
-
|
|
141
|
+
O && (x === "dot" ? /* @__PURE__ */ l("span", {
|
|
154
142
|
className: "absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised",
|
|
155
143
|
"data-slot": "avatar-badge-dot",
|
|
156
144
|
"aria-hidden": "true"
|
|
157
|
-
}) : typeof
|
|
145
|
+
}) : typeof x == "number" ? /* @__PURE__ */ l(d.span, {
|
|
158
146
|
initial: { scale: 0 },
|
|
159
147
|
animate: { scale: 1 },
|
|
160
148
|
transition: r.smooth,
|
|
161
149
|
className: "absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised",
|
|
162
150
|
"data-slot": "avatar-badge",
|
|
163
151
|
role: "status",
|
|
164
|
-
"aria-label": `${
|
|
165
|
-
children:
|
|
152
|
+
"aria-label": `${x > 99 ? "99+" : x} notifications`,
|
|
153
|
+
children: x > 99 ? "99+" : x
|
|
166
154
|
}) : /* @__PURE__ */ l("span", {
|
|
167
155
|
className: "absolute -right-1 -top-1",
|
|
168
156
|
"data-slot": "avatar-badge-custom",
|
|
169
|
-
children:
|
|
157
|
+
children: x
|
|
170
158
|
}))
|
|
171
159
|
]
|
|
172
160
|
})
|
|
173
161
|
})
|
|
174
162
|
});
|
|
175
163
|
});
|
|
176
|
-
|
|
177
|
-
var
|
|
178
|
-
initial: {
|
|
179
|
-
opacity: 0,
|
|
180
|
-
scale: .96
|
|
181
|
-
},
|
|
164
|
+
C.displayName = n.displayName;
|
|
165
|
+
var w = c.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ l(d.span, {
|
|
166
|
+
initial: { scale: .96 },
|
|
182
167
|
animate: {
|
|
183
168
|
opacity: 1,
|
|
184
169
|
scale: 1
|
|
@@ -191,17 +176,17 @@ var T = c.forwardRef(({ className: e, ...n }, i) => /* @__PURE__ */ l(d.span, {
|
|
|
191
176
|
...n
|
|
192
177
|
})
|
|
193
178
|
}));
|
|
194
|
-
|
|
195
|
-
var
|
|
196
|
-
let s = typeof r == "string" ? r : "", u =
|
|
197
|
-
return /* @__PURE__ */ l(
|
|
179
|
+
w.displayName = t.displayName;
|
|
180
|
+
var T = c.forwardRef(({ className: t, colorSeed: n, children: r, ...i }, o) => {
|
|
181
|
+
let s = typeof r == "string" ? r : "", u = S(n ?? s), d = c.useContext(f), m = c.useContext(p), h = d === "square" ? "rounded-none" : d === "rounded" ? "rounded-control" : "rounded-pill", g = s.length === 1 ? "tracking-wide" : "tracking-normal";
|
|
182
|
+
return /* @__PURE__ */ l(e, {
|
|
198
183
|
ref: o,
|
|
199
184
|
"data-slot": "avatar-fallback",
|
|
200
|
-
className: a("flex h-full w-full items-center justify-center font-semibold", h,
|
|
185
|
+
className: a("flex h-full w-full items-center justify-center font-semibold", h, b[m], u.bg, u.text, g, t),
|
|
201
186
|
...i,
|
|
202
187
|
children: r
|
|
203
188
|
});
|
|
204
189
|
});
|
|
205
|
-
|
|
190
|
+
T.displayName = e.displayName;
|
|
206
191
|
//#endregion
|
|
207
|
-
export {
|
|
192
|
+
export { C as Avatar, T as AvatarFallback, w as AvatarImage, m as avatarVariants };
|
package/dist/ui/avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion, useReducedMotion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ââ Contexts so AvatarFallback can inherit shape & size from Avatar ââ\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n 'relative flex shrink-0 overflow-hidden',\n {\n variants: {\n size: {\n xs: 'h-ds-xs w-ds-xs',\n sm: 'h-ds-sm w-ds-sm',\n md: 'h-ds-md w-ds-md',\n lg: 'h-ds-lg w-ds-lg',\n xl: 'h-ds-xl w-ds-xl',\n },\n shape: {\n circle: 'rounded-pill',\n square: 'rounded-none',\n rounded: 'rounded-control',\n },\n },\n defaultVariants: { size: 'md', shape: 'circle' },\n }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status â shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n online: 'success',\n offline: 'neutral',\n busy: 'error',\n away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n online: 'Online',\n offline: 'Offline',\n busy: 'Busy',\n away: 'Away',\n}\n\n/** Avatar size â Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'lg',\n}\n\n// ââ Role ring âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n lead: 'ring-accent-7',\n admin: 'ring-warning-7',\n client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n circle: 'rounded-pill',\n square: 'rounded-none',\n rounded: 'rounded-control',\n}\n\n// ââ Fallback font sizes that scale with avatar size âââââââââââââââââââââââââ\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n xs: 'text-ds-2xs',\n sm: 'text-ds-xs',\n md: 'text-ds-sm',\n lg: 'text-ds-md',\n xl: 'text-ds-lg',\n}\n\n// ââ Deterministic fallback colors âââââââââââââââââââââââââââââââââââââââââââ\n\nconst FALLBACK_COLORS = [\n { bg: 'bg-accent-3', text: 'text-accent-11' },\n { bg: 'bg-success-3', text: 'text-success-11' },\n { bg: 'bg-warning-3', text: 'text-warning-11' },\n { bg: 'bg-error-3', text: 'text-error-11' },\n { bg: 'bg-info-3', text: 'text-info-11' },\n { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n let hash = 5381\n for (let i = 0; i < seed.length; i++) {\n hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n }\n const index = Math.abs(hash) % FALLBACK_COLORS.length\n return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar â a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` â the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` â it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) â a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n * <AvatarImage src={user.avatarUrl} alt={user.name} />\n * <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n * <AvatarImage src={user.photoUrl} alt={user.name} />\n * <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n * <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways â feel free to combine props creatively!\n */\nexport interface AvatarProps\n extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n VariantProps<typeof avatarVariants> {\n /** Optional status indicator displayed as a dot at the bottom-right corner */\n status?: AvatarStatus\n /** Role ring color indicator */\n ring?: AvatarRing\n /** Badge overlay: number, 'dot', or custom ReactNode */\n badge?: number | 'dot' | React.ReactNode\n /** Show loading skeleton instead of content */\n loading?: boolean\n children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n const resolvedShape = shape ?? 'circle'\n // MotionConfig can't stop this opacity loop (non-transform), so guard it locally.\n const prefersReduced = useReducedMotion()\n\n // Build ring classes for the outer wrapper\n const ringClasses = ring && ring !== 'none'\n ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n : undefined\n\n // Loading skeleton â early return\n if (loading) {\n return (\n <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n <Skeleton\n className={cn(avatarVariants({ size, shape }))}\n data-slot=\"avatar-skeleton\"\n />\n </span>\n )\n }\n\n // Determine whether to render badge\n const showBadge = badge !== undefined && badge !== 0\n\n return (\n <AvatarShapeContext.Provider value={resolvedShape}>\n <AvatarSizeContext.Provider value={size ?? 'md'}>\n <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ size, shape }), className)}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n {status && (\n <motion.span\n className=\"absolute bottom-0 right-0\"\n role=\"img\"\n aria-label={statusLabelMap[status]}\n {...(status === 'online' && !prefersReduced\n ? { animate: { opacity: [1, 0.75, 1] }, transition: { duration: 2.5, repeat: Infinity, ease: 'easeInOut' } }\n : {})}\n >\n {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + presence breathe + a11y. */}\n <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n </motion.span>\n )}\n {showBadge && (\n badge === 'dot' ? (\n <span\n className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised\"\n data-slot=\"avatar-badge-dot\"\n aria-hidden=\"true\"\n />\n ) : typeof badge === 'number' ? (\n <motion.span\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n transition={springs.smooth}\n className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n data-slot=\"avatar-badge\"\n role=\"status\"\n aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n >\n {badge > 99 ? '99+' : badge}\n </motion.span>\n ) : (\n <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n {badge}\n </span>\n )\n )}\n </span>\n </AvatarSizeContext.Provider>\n </AvatarShapeContext.Provider>\n )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n <motion.span\n initial={{ opacity: 0, scale: 0.96 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={springs.smooth}\n className=\"absolute inset-0 h-full w-full\"\n >\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"aspect-square h-full w-full\", className)}\n {...props}\n />\n </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n /**\n * Seed string for deterministic color selection.\n * Falls back to the text content of `children` if not provided.\n */\n colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n // Derive seed: explicit colorSeed > children text content > empty string\n const childrenText = typeof children === 'string' ? children : ''\n const seed = colorSeed ?? childrenText\n const color = getFallbackColor(seed)\n\n // Inherit shape and size from parent Avatar via context\n const shape = React.useContext(AvatarShapeContext)\n const size = React.useContext(AvatarSizeContext)\n const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n // Letter-spacing based on character count\n const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n return (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(\n 'flex h-full w-full items-center justify-center font-semibold',\n shapeClass,\n fallbackTextSizeMap[size],\n color.bg,\n color.text,\n tracking,\n className,\n )}\n {...props}\n >\n {children}\n </AvatarPrimitive.Fallback>\n )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,IAAqB,EAAM,cAA2B,SAAS,EAC/D,IAAoB,EAAM,cAA0B,KAAK,EAElD,IAAiB,EAC5B,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EAAE,MAAM;EAAM,OAAO;EAAU;CACjD,CACF,EAOK,IAAiD;CACrD,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACP,EAEK,IAA+C;CACnD,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACP,EAGK,IAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAIK,IAA4D;CAChE,MAAM;CACN,OAAO;CACP,QAAQ;CACT,EAEK,IAAuC;CAC3C,QAAQ;CACR,QAAQ;CACR,SAAS;CACV,EAGK,IAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAIK,IAAkB;CACtB;EAAE,IAAI;EAAe,MAAM;EAAkB;CAC7C;EAAE,IAAI;EAAgB,MAAM;EAAmB;CAC/C;EAAE,IAAI;EAAgB,MAAM;EAAmB;CAC/C;EAAE,IAAI;EAAc,MAAM;EAAiB;CAC3C;EAAE,IAAI;EAAa,MAAM;EAAgB;CACzC;EAAE,IAAI;EAAsB,MAAM;EAAyB;CAC3D;EAAE,IAAI;EAAwB,MAAM;EAA2B;CAC/D;EAAE,IAAI;EAAsB,MAAM;EAAyB;CAC5D;AAMD,SAAS,EAAiB,GAAgD;CACxE,IAAI,IAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,IAC/B,MAAS,KAAQ,KAAK,IAAO,EAAK,WAAW,EAAE,GAAI;AAGrD,QAAO,EADO,KAAK,IAAI,EAAK,GAAG,EAAgB;;AA2DjD,IAAM,IAAS,EAAM,YAGlB,EAAE,cAAW,SAAM,UAAO,WAAQ,SAAM,UAAO,YAAS,aAAU,GAAG,KAAS,MAAQ;CACvF,IAAM,IAAgB,KAAS,UAEzB,IAAiB,GAAkB,EAGnC,IAAc,KAAQ,MAAS,SACjC,EAAG,mDAAmD,EAAa,IAAO,EAAa,GAAe,GACtG,KAAA;AAGJ,KAAI,EACF,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAG,iCAAiC,EAAY;YACzE,kBAAC,GAAD;GACE,WAAW,EAAG,EAAe;IAAE;IAAM;IAAO,CAAC,CAAC;GAC9C,aAAU;GACV,CAAA;EACG,CAAA;CAKX,IAAM,IAAY,MAAU,KAAA,KAAa,MAAU;AAEnD,QACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YACpC,kBAAC,EAAkB,UAAnB;GAA4B,OAAO,KAAQ;aAC3C,kBAAC,QAAD;IAAM,WAAW,EAAG,iCAAiC,EAAY;cAAjE;KACE,kBAAC,GAAD;MACO;MACL,WAAW,EAAG,EAAe;OAAE;OAAM;OAAO,CAAC,EAAE,EAAU;MACzD,GAAI;MAEH;MACoB,CAAA;KACtB,KACC,kBAAC,EAAO,MAAR;MACE,WAAU;MACV,MAAK;MACL,cAAY,EAAe;MAC3B,GAAK,MAAW,YAAY,CAAC,IACzB;OAAE,SAAS,EAAE,SAAS;QAAC;QAAG;QAAM;QAAE,EAAE;OAAE,YAAY;QAAE,UAAU;QAAK,QAAQ;QAAU,MAAM;QAAa;OAAE,GAC1G,EAAE;gBAGN,kBAAC,GAAD;OAAK,OAAO,EAAe;OAAS,MAAM,EAAc,KAAQ;OAAO,YAAA;OAAW,eAAA;OAAc,CAAA;MACpF,CAAA;KAEf,MACC,MAAU,QACR,kBAAC,QAAD;MACE,WAAU;MACV,aAAU;MACV,eAAY;MACZ,CAAA,GACA,OAAO,KAAU,WACnB,kBAAC,EAAO,MAAR;MACE,SAAS,EAAE,OAAO,GAAG;MACrB,SAAS,EAAE,OAAO,GAAG;MACrB,YAAY,EAAQ;MACpB,WAAU;MACV,aAAU;MACV,MAAK;MACL,cAAY,GAAG,IAAQ,KAAK,QAAQ,EAAM;gBAEzC,IAAQ,KAAK,QAAQ;MACV,CAAA,GAEd,kBAAC,QAAD;MAAM,WAAU;MAA2B,aAAU;gBAClD;MACI,CAAA;KAGN;;GACsB,CAAA;EACC,CAAA;EAEhC;AACF,EAAO,cAAA,EAAmC;AAE1C,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAO,MAAR;CACE,SAAS;EAAE,SAAS;EAAG,OAAO;EAAM;CACpC,SAAS;EAAE,SAAS;EAAG,OAAO;EAAG;CACjC,YAAY,EAAQ;CACpB,WAAU;WAEV,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,+BAA+B,EAAU;EACvD,GAAI;EACJ,CAAA;CACU,CAAA,CACd;AACF,EAAY,cAAA,EAAoC;AAWhD,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,cAAW,aAAU,GAAG,KAAS,MAAQ;CAEvD,IAAM,IAAe,OAAO,KAAa,WAAW,IAAW,IAEzD,IAAQ,EADD,KAAa,EACU,EAG9B,IAAQ,EAAM,WAAW,EAAmB,EAC5C,IAAO,EAAM,WAAW,EAAkB,EAC1C,IAAa,MAAU,WAAW,iBAAiB,MAAU,YAAY,oBAAoB,gBAG7F,IAAW,EAAa,WAAW,IAAI,kBAAkB;AAE/D,QACE,kBAAC,GAAD;EACO;EACL,aAAU;EACV,WAAW,EACT,gEACA,GACA,EAAoB,IACpB,EAAM,IACN,EAAM,MACN,GACA,EACD;EACD,GAAI;EAEH;EACwB,CAAA;EAE7B;AACF,EAAe,cAAA,EAAuC"}
|
|
1
|
+
{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ââ Contexts so AvatarFallback can inherit shape & size from Avatar ââ\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n 'relative flex shrink-0 overflow-hidden',\n {\n variants: {\n size: {\n xs: 'h-ds-xs w-ds-xs',\n sm: 'h-ds-sm w-ds-sm',\n md: 'h-ds-md w-ds-md',\n lg: 'h-ds-lg w-ds-lg',\n xl: 'h-ds-xl w-ds-xl',\n },\n shape: {\n circle: 'rounded-pill',\n square: 'rounded-none',\n rounded: 'rounded-control',\n },\n },\n defaultVariants: { size: 'md', shape: 'circle' },\n }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status â shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n online: 'success',\n offline: 'neutral',\n busy: 'error',\n away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n online: 'Online',\n offline: 'Offline',\n busy: 'Busy',\n away: 'Away',\n}\n\n/** Avatar size â Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'lg',\n}\n\n// ââ Role ring âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n lead: 'ring-accent-7',\n admin: 'ring-warning-7',\n client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n circle: 'rounded-pill',\n square: 'rounded-none',\n rounded: 'rounded-control',\n}\n\n// ââ Fallback font sizes that scale with avatar size âââââââââââââââââââââââââ\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n xs: 'text-ds-2xs',\n sm: 'text-ds-xs',\n md: 'text-ds-sm',\n lg: 'text-ds-md',\n xl: 'text-ds-lg',\n}\n\n// ââ Deterministic fallback colors âââââââââââââââââââââââââââââââââââââââââââ\n\nconst FALLBACK_COLORS = [\n { bg: 'bg-accent-3', text: 'text-accent-11' },\n { bg: 'bg-success-3', text: 'text-success-11' },\n { bg: 'bg-warning-3', text: 'text-warning-11' },\n { bg: 'bg-error-3', text: 'text-error-11' },\n { bg: 'bg-info-3', text: 'text-info-11' },\n { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n let hash = 5381\n for (let i = 0; i < seed.length; i++) {\n hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n }\n const index = Math.abs(hash) % FALLBACK_COLORS.length\n return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar â a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` â the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` â it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) â a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n * <AvatarImage src={user.avatarUrl} alt={user.name} />\n * <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n * <AvatarImage src={user.photoUrl} alt={user.name} />\n * <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n * <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways â feel free to combine props creatively!\n */\nexport interface AvatarProps\n extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n VariantProps<typeof avatarVariants> {\n /** Optional status indicator displayed as a dot at the bottom-right corner */\n status?: AvatarStatus\n /** Role ring color indicator */\n ring?: AvatarRing\n /** Badge overlay: number, 'dot', or custom ReactNode */\n badge?: number | 'dot' | React.ReactNode\n /** Show loading skeleton instead of content */\n loading?: boolean\n children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n const resolvedShape = shape ?? 'circle'\n\n // Build ring classes for the outer wrapper\n const ringClasses = ring && ring !== 'none'\n ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n : undefined\n\n // Loading skeleton â early return\n if (loading) {\n return (\n <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n <Skeleton\n className={cn(avatarVariants({ size, shape }))}\n data-slot=\"avatar-skeleton\"\n />\n </span>\n )\n }\n\n // Determine whether to render badge\n const showBadge = badge !== undefined && badge !== 0\n\n return (\n <AvatarShapeContext.Provider value={resolvedShape}>\n <AvatarSizeContext.Provider value={size ?? 'md'}>\n <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ size, shape }), className)}\n {...props}\n >\n {children}\n </AvatarPrimitive.Root>\n {status && (\n <span\n className=\"absolute bottom-0 right-0\"\n role=\"img\"\n aria-label={statusLabelMap[status]}\n >\n {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n </span>\n )}\n {showBadge && (\n badge === 'dot' ? (\n <span\n className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised\"\n data-slot=\"avatar-badge-dot\"\n aria-hidden=\"true\"\n />\n ) : typeof badge === 'number' ? (\n <motion.span\n initial={{ scale: 0 }}\n animate={{ scale: 1 }}\n transition={springs.smooth}\n className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n data-slot=\"avatar-badge\"\n role=\"status\"\n aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n >\n {badge > 99 ? '99+' : badge}\n </motion.span>\n ) : (\n <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n {badge}\n </span>\n )\n )}\n </span>\n </AvatarSizeContext.Provider>\n </AvatarShapeContext.Provider>\n )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n <motion.span\n initial={{ scale: 0.96 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={springs.smooth}\n className=\"absolute inset-0 h-full w-full\"\n >\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"aspect-square h-full w-full\", className)}\n {...props}\n />\n </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n /**\n * Seed string for deterministic color selection.\n * Falls back to the text content of `children` if not provided.\n */\n colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n // Derive seed: explicit colorSeed > children text content > empty string\n const childrenText = typeof children === 'string' ? children : ''\n const seed = colorSeed ?? childrenText\n const color = getFallbackColor(seed)\n\n // Inherit shape and size from parent Avatar via context\n const shape = React.useContext(AvatarShapeContext)\n const size = React.useContext(AvatarSizeContext)\n const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n // Letter-spacing based on character count\n const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n return (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot=\"avatar-fallback\"\n className={cn(\n 'flex h-full w-full items-center justify-center font-semibold',\n shapeClass,\n fallbackTextSizeMap[size],\n color.bg,\n color.text,\n tracking,\n className,\n )}\n {...props}\n >\n {children}\n </AvatarPrimitive.Fallback>\n )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}
|
package/dist/ui/badge-group.js
CHANGED
package/dist/ui/badge.d.ts
CHANGED
|
@@ -139,6 +139,8 @@ interface BadgeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, V
|
|
|
139
139
|
startIcon?: IconInput;
|
|
140
140
|
endIcon?: IconInput;
|
|
141
141
|
dot?: boolean;
|
|
142
|
+
/** Pulse the status dot (opt-in; static by default). @default false */
|
|
143
|
+
dotPulse?: boolean;
|
|
142
144
|
onDismiss?: () => void;
|
|
143
145
|
selected?: boolean;
|
|
144
146
|
disabled?: boolean;
|
package/dist/ui/badge.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAclD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAclD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AA0LD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,KAAK,UAAU,EAAC,KAAK,UAAU,EAAE,aAAa,EAAE,CAAA"}
|
package/dist/ui/badge.js
CHANGED
package/dist/ui/banner.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { motionProps as e, springs as t } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
3
|
+
import { cva as n } from "../_chunks/vendor-utils.js";
|
|
4
4
|
import { cn as r } from "./lib/utils.js";
|
|
5
5
|
import { Icon as i } from "./icon.js";
|
|
6
6
|
import * as a from "react";
|
package/dist/ui/breadcrumb.js
CHANGED
package/dist/ui/button.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Slot as e, Slottable as t } from "../_chunks/primitives.js";
|
|
3
3
|
import { IconProvider as n } from "./icon-context.js";
|
|
4
4
|
import { motionProps as ee } from "./lib/motion.js";
|
|
5
|
-
import {
|
|
5
|
+
import { cva as r } from "../_chunks/vendor-utils.js";
|
|
6
6
|
import { cn as i } from "./lib/utils.js";
|
|
7
7
|
import { Spinner as a } from "./spinner.js";
|
|
8
8
|
import { Icon as te } from "./icon.js";
|
|
9
|
-
import {
|
|
9
|
+
import { normalizeIcon as o } from "../_chunks/normalize-icon.js";
|
|
10
10
|
import { getGroupPositionStyle as ne, useButtonGroup as re, useButtonGroupItem as ie } from "./button-group.js";
|
|
11
11
|
import { ProcessingOverlay as ae } from "./button-processing.js";
|
|
12
12
|
import * as s from "react";
|
|
@@ -53,22 +53,22 @@ var u = r("relative inline-flex items-center justify-center whitespace-nowrap fo
|
|
|
53
53
|
{
|
|
54
54
|
variant: "solid",
|
|
55
55
|
color: "accent",
|
|
56
|
-
className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised
|
|
56
|
+
className: "bg-accent-9 text-accent-fg hover:bg-accent-10 shadow-raised"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
variant: "solid",
|
|
60
60
|
color: "error",
|
|
61
|
-
className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised
|
|
61
|
+
className: "bg-error-9 text-error-fg hover:bg-error-10 shadow-raised"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
variant: "solid",
|
|
65
65
|
color: "success",
|
|
66
|
-
className: "bg-success-9 text-success-fg hover:bg-success-10 shadow-raised
|
|
66
|
+
className: "bg-success-9 text-success-fg hover:bg-success-10 shadow-raised"
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
variant: "solid",
|
|
70
70
|
color: "warning",
|
|
71
|
-
className: "bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised
|
|
71
|
+
className: "bg-warning-9 text-warning-fg hover:bg-warning-10 shadow-raised"
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
variant: "solid",
|
|
@@ -292,7 +292,7 @@ var u = r("relative inline-flex items-center justify-center whitespace-nowrap fo
|
|
|
292
292
|
}, b));
|
|
293
293
|
}));
|
|
294
294
|
}, W = !!y, G = W ? B === "loading" : _e, K = B === "success" || B === "error", q = K ? void 0 : x === !0 ? "working" : x === !1 || !x ? W && B === "loading" && !x ? "working" : void 0 : x, J = !!q, Se = be ?? k ?? "accent";
|
|
295
|
-
if (he) return /* @__PURE__ */ c(
|
|
295
|
+
if (he) return /* @__PURE__ */ c(e, {
|
|
296
296
|
className: i(u({
|
|
297
297
|
variant: O,
|
|
298
298
|
color: k,
|
|
@@ -303,7 +303,7 @@ var u = r("relative inline-flex items-center justify-center whitespace-nowrap fo
|
|
|
303
303
|
disabled: N || G,
|
|
304
304
|
"aria-busy": G || void 0,
|
|
305
305
|
...w,
|
|
306
|
-
children: /* @__PURE__ */ c(
|
|
306
|
+
children: /* @__PURE__ */ c(t, { children: C })
|
|
307
307
|
});
|
|
308
308
|
let Y = de[M] ?? {
|
|
309
309
|
start: "",
|