@agent-factory-platform/ui-kit 0.8.0 → 0.9.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/README.md +18 -0
- package/dist/charts/adapter.js +111 -0
- package/dist/charts/basic.js +115 -0
- package/dist/charts/chart-tooltip.js +21 -0
- package/dist/charts/event-markers-primitive.d.ts +10 -1
- package/dist/charts/event-markers-primitive.js +116 -0
- package/dist/charts/index.d.ts +1 -0
- package/dist/charts/ohlc-annotations.d.ts +56 -0
- package/dist/charts/ohlc-annotations.js +84 -0
- package/dist/charts/ohlc.d.ts +5 -1
- package/dist/charts/ohlc.js +240 -0
- package/dist/charts/series.js +584 -0
- package/dist/charts/theme.js +35 -0
- package/dist/charts/time-combo.js +17 -0
- package/dist/component-api.js +3 -5
- package/dist/component-api.json.js +9 -0
- package/dist/component-manifest.json.js +9 -0
- package/dist/components/alert.js +35 -0
- package/dist/components/avatar.js +101 -0
- package/dist/components/badge.js +111 -0
- package/dist/components/button-group.js +22 -0
- package/dist/components/button.js +64 -0
- package/dist/components/calendar-period-navigator.js +34 -0
- package/dist/components/card.js +35 -0
- package/dist/components/chart-frame.js +53 -0
- package/dist/components/color-picker.js +155 -0
- package/dist/components/combobox.js +129 -0
- package/dist/components/command-dialog.js +89 -0
- package/dist/components/confirm-dialog.js +57 -0
- package/dist/components/data-table.js +135 -0
- package/dist/components/date-time.js +203 -0
- package/dist/components/disclosure.js +29 -0
- package/dist/components/drawer.js +150 -0
- package/dist/components/dropdown-select.js +191 -0
- package/dist/components/field.js +21 -0
- package/dist/components/floating-window.js +159 -0
- package/dist/components/heading.js +21 -0
- package/dist/components/hover-tip.js +90 -0
- package/dist/components/icon-tip.js +12 -0
- package/dist/components/input-group.js +16 -0
- package/dist/components/input-otp.js +56 -0
- package/dist/components/input.js +44 -0
- package/dist/components/item.js +47 -0
- package/dist/components/kbd.js +18 -0
- package/dist/components/line-chart.js +79 -0
- package/dist/components/listbox.js +33 -0
- package/dist/components/live-value.js +26 -0
- package/dist/components/modal.js +140 -0
- package/dist/components/multi-select.js +54 -0
- package/dist/components/native-select.js +17 -0
- package/dist/components/navigation.js +42 -0
- package/dist/components/page.js +24 -0
- package/dist/components/popover-menu.js +164 -0
- package/dist/components/progress.js +23 -0
- package/dist/components/resizable-pane.js +73 -0
- package/dist/components/scroll-load-more.js +61 -0
- package/dist/components/seg-slider.js +42 -0
- package/dist/components/segmented-control.js +46 -0
- package/dist/components/selection-controls.js +119 -0
- package/dist/components/sidebar.js +23 -0
- package/dist/components/skeleton.js +9 -0
- package/dist/components/slider.js +162 -0
- package/dist/components/sliding-tabs.js +118 -0
- package/dist/components/spinner.js +9 -0
- package/dist/components/spotlight-tour.js +122 -0
- package/dist/components/stat-card.js +23 -0
- package/dist/components/state-view.js +75 -0
- package/dist/components/stats-table.js +17 -0
- package/dist/components/table.js +24 -0
- package/dist/components/tag-pill.d.ts +4 -1
- package/dist/components/tag-pill.js +69 -0
- package/dist/components/theme-editor.js +159 -0
- package/dist/components/toast.js +66 -0
- package/dist/components/toolbar.js +46 -0
- package/dist/components/utility.js +19 -0
- package/dist/components/widget-frame.js +41 -0
- package/dist/components/widget-picker.js +87 -0
- package/dist/components/workspace-grid.js +468 -0
- package/dist/focus-modality.js +3 -15
- package/dist/index.d.ts +1 -1
- package/dist/index.js +228 -5564
- package/dist/lib/cn.js +6 -0
- package/dist/lib/focus-modality.js +16 -0
- package/dist/lib/motion.js +27 -0
- package/dist/lib/viewport.js +13 -0
- package/dist/manifest.js +5 -7
- package/dist/styles.js +1 -1
- package/dist/theme.js +158 -0
- package/package.json +1 -1
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { jsxs as s, jsx as r, Fragment as S } from "react/jsx-runtime";
|
|
2
|
+
import { useId as P, useRef as z } from "react";
|
|
3
|
+
import { X as $, Check as T } from "lucide-react";
|
|
4
|
+
import { ContextMenu as u, DropdownMenu as l, Slot as R, Popover as m } from "radix-ui";
|
|
5
|
+
import { cn as f } from "../lib/cn.js";
|
|
6
|
+
const I = "relative z-50 min-w-48 rounded-panel border border-border bg-surface-raised p-1 font-sohne text-body-sm text-ink shadow-pop outline-none", N = "flex h-row-default cursor-default select-none items-center rounded-control px-3 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-surface-hover";
|
|
7
|
+
function B({
|
|
8
|
+
trigger: i,
|
|
9
|
+
title: d,
|
|
10
|
+
closeLabel: n,
|
|
11
|
+
children: o,
|
|
12
|
+
open: a,
|
|
13
|
+
onOpenChange: b,
|
|
14
|
+
size: c = "sm",
|
|
15
|
+
align: g = "center",
|
|
16
|
+
side: v = "bottom",
|
|
17
|
+
sideOffset: x = 4,
|
|
18
|
+
contentClassName: h
|
|
19
|
+
}) {
|
|
20
|
+
return /* @__PURE__ */ s(m.Root, { open: a, onOpenChange: b, children: [
|
|
21
|
+
/* @__PURE__ */ r(m.Trigger, { asChild: !0, children: i }),
|
|
22
|
+
/* @__PURE__ */ r(m.Portal, { children: /* @__PURE__ */ s(
|
|
23
|
+
m.Content,
|
|
24
|
+
{
|
|
25
|
+
role: "dialog",
|
|
26
|
+
"aria-label": d,
|
|
27
|
+
sideOffset: x,
|
|
28
|
+
collisionPadding: 8,
|
|
29
|
+
align: g,
|
|
30
|
+
side: v,
|
|
31
|
+
className: f(I, "af-popup-bound p-3", c === "command" ? "w-overlay-command" : "w-overlay-sm", h),
|
|
32
|
+
children: [
|
|
33
|
+
n && /* @__PURE__ */ r(m.Close, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", "aria-label": n, className: "absolute right-2 top-2 z-10 grid size-7 place-items-center rounded-control text-graphite outline-none hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust/35", children: /* @__PURE__ */ r($, { size: 14, "aria-hidden": !0 }) }) }),
|
|
34
|
+
o
|
|
35
|
+
]
|
|
36
|
+
}
|
|
37
|
+
) })
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
function D({ label: i, className: d, children: n, ...o }) {
|
|
41
|
+
return /* @__PURE__ */ r("div", { role: "menu", "aria-label": i, className: d, ...o, children: n });
|
|
42
|
+
}
|
|
43
|
+
function X({ selected: i, asChild: d = !1, children: n, ...o }) {
|
|
44
|
+
const a = d ? R.Root : "button";
|
|
45
|
+
return /* @__PURE__ */ r(a, { role: "menuitemradio", "aria-checked": i, ...o, children: n });
|
|
46
|
+
}
|
|
47
|
+
function E({ asChild: i = !1, children: d, ...n }) {
|
|
48
|
+
const o = i ? R.Root : "button";
|
|
49
|
+
return /* @__PURE__ */ r(o, { role: "menuitem", ...n, children: d });
|
|
50
|
+
}
|
|
51
|
+
function H({
|
|
52
|
+
trigger: i,
|
|
53
|
+
label: d,
|
|
54
|
+
items: n,
|
|
55
|
+
value: o,
|
|
56
|
+
onValueChange: a,
|
|
57
|
+
open: b,
|
|
58
|
+
onOpenChange: c,
|
|
59
|
+
align: g = "start",
|
|
60
|
+
side: v = "bottom",
|
|
61
|
+
contentClassName: x
|
|
62
|
+
}) {
|
|
63
|
+
const h = P(), C = z(null), p = n.filter((e) => e.kind === "radio"), M = n.filter((e) => e.kind !== "radio"), y = (e, t = !1) => /* @__PURE__ */ s(S, { children: [
|
|
64
|
+
e.leading && /* @__PURE__ */ r("span", { className: "shrink-0", "aria-hidden": !0, children: e.leading }),
|
|
65
|
+
/* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
|
|
66
|
+
e.trailing,
|
|
67
|
+
t && !e.trailing && /* @__PURE__ */ r(T, { size: 14, className: "shrink-0 text-ink", "aria-hidden": !0 })
|
|
68
|
+
] });
|
|
69
|
+
return /* @__PURE__ */ s(
|
|
70
|
+
l.Root,
|
|
71
|
+
{
|
|
72
|
+
modal: !1,
|
|
73
|
+
open: b,
|
|
74
|
+
onOpenChange: (e) => {
|
|
75
|
+
c == null || c(e), e && requestAnimationFrame(() => {
|
|
76
|
+
var t;
|
|
77
|
+
return (t = C.current) == null ? void 0 : t.focus();
|
|
78
|
+
});
|
|
79
|
+
},
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ r(l.Trigger, { asChild: !0, children: i }),
|
|
82
|
+
/* @__PURE__ */ r(l.Portal, { children: /* @__PURE__ */ s(
|
|
83
|
+
l.Content,
|
|
84
|
+
{
|
|
85
|
+
"aria-labelledby": h,
|
|
86
|
+
sideOffset: 4,
|
|
87
|
+
collisionPadding: 8,
|
|
88
|
+
align: g,
|
|
89
|
+
side: v,
|
|
90
|
+
className: f(I, x),
|
|
91
|
+
children: [
|
|
92
|
+
/* @__PURE__ */ r("span", { id: h, className: "sr-only", children: d }),
|
|
93
|
+
p.length > 0 && /* @__PURE__ */ r(
|
|
94
|
+
l.RadioGroup,
|
|
95
|
+
{
|
|
96
|
+
value: o,
|
|
97
|
+
onValueChange: (e) => {
|
|
98
|
+
var t, k;
|
|
99
|
+
a == null || a(e), (k = (t = p.find((w) => w.id === e)) == null ? void 0 : t.onSelect) == null || k.call(t);
|
|
100
|
+
},
|
|
101
|
+
children: p.map((e, t) => /* @__PURE__ */ r(
|
|
102
|
+
l.RadioItem,
|
|
103
|
+
{
|
|
104
|
+
value: e.id,
|
|
105
|
+
ref: t === 0 ? C : void 0,
|
|
106
|
+
disabled: e.disabled,
|
|
107
|
+
className: f(N, "gap-2", e.danger && "text-danger"),
|
|
108
|
+
children: y(e, o === e.id)
|
|
109
|
+
},
|
|
110
|
+
e.id
|
|
111
|
+
))
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
M.map((e, t) => /* @__PURE__ */ s("div", { children: [
|
|
115
|
+
e.separatorBefore && /* @__PURE__ */ r(l.Separator, { className: "my-1 h-px bg-divider" }),
|
|
116
|
+
/* @__PURE__ */ r(
|
|
117
|
+
l.Item,
|
|
118
|
+
{
|
|
119
|
+
ref: p.length === 0 && t === 0 ? C : void 0,
|
|
120
|
+
disabled: e.disabled,
|
|
121
|
+
onSelect: e.onSelect,
|
|
122
|
+
className: f(N, "gap-2", e.danger && "text-danger"),
|
|
123
|
+
children: y(e)
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
] }, e.id))
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
) })
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
function J({
|
|
135
|
+
children: i,
|
|
136
|
+
label: d,
|
|
137
|
+
items: n
|
|
138
|
+
}) {
|
|
139
|
+
const o = P();
|
|
140
|
+
return /* @__PURE__ */ s(u.Root, { children: [
|
|
141
|
+
/* @__PURE__ */ r(u.Trigger, { asChild: !0, children: i }),
|
|
142
|
+
/* @__PURE__ */ r(u.Portal, { children: /* @__PURE__ */ s(u.Content, { "aria-labelledby": o, collisionPadding: 8, className: I, children: [
|
|
143
|
+
/* @__PURE__ */ r("span", { id: o, className: "sr-only", children: d }),
|
|
144
|
+
n.map((a) => /* @__PURE__ */ r(
|
|
145
|
+
u.Item,
|
|
146
|
+
{
|
|
147
|
+
disabled: a.disabled,
|
|
148
|
+
onSelect: a.onSelect,
|
|
149
|
+
className: `${N} ${a.danger ? "text-danger" : ""}`,
|
|
150
|
+
children: a.label
|
|
151
|
+
},
|
|
152
|
+
a.id
|
|
153
|
+
))
|
|
154
|
+
] }) })
|
|
155
|
+
] });
|
|
156
|
+
}
|
|
157
|
+
export {
|
|
158
|
+
J as ContextMenu,
|
|
159
|
+
H as Menu,
|
|
160
|
+
D as MenuChoiceGroup,
|
|
161
|
+
X as MenuChoiceItem,
|
|
162
|
+
E as MenuCommandItem,
|
|
163
|
+
B as Popover
|
|
164
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Progress as e } from "radix-ui";
|
|
3
|
+
function n({ value: o, label: l }) {
|
|
4
|
+
const r = Math.min(100, Math.max(0, o));
|
|
5
|
+
return /* @__PURE__ */ a(
|
|
6
|
+
e.Root,
|
|
7
|
+
{
|
|
8
|
+
value: r,
|
|
9
|
+
"aria-label": l,
|
|
10
|
+
className: "relative h-1 w-full overflow-hidden rounded-full bg-surface-hover",
|
|
11
|
+
children: /* @__PURE__ */ a(
|
|
12
|
+
e.Indicator,
|
|
13
|
+
{
|
|
14
|
+
className: "h-full w-full origin-left bg-rust transition-transform",
|
|
15
|
+
style: { transform: `translateX(-${100 - r}%)` }
|
|
16
|
+
}
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
n as Progress
|
|
23
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { jsxs as P, jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as R, useId as g } from "react";
|
|
3
|
+
import { cn as x } from "../lib/cn.js";
|
|
4
|
+
function A(a, c, u) {
|
|
5
|
+
return Math.min(u, Math.max(c, a));
|
|
6
|
+
}
|
|
7
|
+
function M({
|
|
8
|
+
value: a,
|
|
9
|
+
onValueChange: c,
|
|
10
|
+
label: u,
|
|
11
|
+
first: y,
|
|
12
|
+
second: D,
|
|
13
|
+
direction: o = "horizontal",
|
|
14
|
+
minimum: d = 20,
|
|
15
|
+
maximum: h = 80,
|
|
16
|
+
step: s = 5,
|
|
17
|
+
className: I
|
|
18
|
+
}) {
|
|
19
|
+
const w = R(null), m = g(), v = g(), n = (e, r = !1) => c(A(r ? Math.round(e / s) * s : e, d, h)), L = (e) => {
|
|
20
|
+
if (e.button !== 0) return;
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
const r = e.currentTarget;
|
|
23
|
+
r.setPointerCapture(e.pointerId);
|
|
24
|
+
const l = (i) => {
|
|
25
|
+
var b;
|
|
26
|
+
const t = (b = w.current) == null ? void 0 : b.getBoundingClientRect(), z = o === "horizontal" ? t == null ? void 0 : t.width : t == null ? void 0 : t.height;
|
|
27
|
+
if (!t || !z) return;
|
|
28
|
+
const E = o === "horizontal" ? i.clientX - t.left : i.clientY - t.top;
|
|
29
|
+
n(E / z * 100, !0);
|
|
30
|
+
}, f = (i) => {
|
|
31
|
+
r.hasPointerCapture(i.pointerId) && r.releasePointerCapture(i.pointerId), r.removeEventListener("pointermove", l), r.removeEventListener("pointerup", f), r.removeEventListener("pointercancel", f);
|
|
32
|
+
};
|
|
33
|
+
r.addEventListener("pointermove", l), r.addEventListener("pointerup", f), r.addEventListener("pointercancel", f);
|
|
34
|
+
}, k = (e) => {
|
|
35
|
+
const r = o === "horizontal" ? "ArrowLeft" : "ArrowUp", l = o === "horizontal" ? "ArrowRight" : "ArrowDown";
|
|
36
|
+
e.key === r ? (e.preventDefault(), n(a - s)) : e.key === l ? (e.preventDefault(), n(a + s)) : e.key === "Home" ? (e.preventDefault(), n(d)) : e.key === "End" && (e.preventDefault(), n(h));
|
|
37
|
+
};
|
|
38
|
+
return /* @__PURE__ */ P(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
ref: w,
|
|
42
|
+
className: x("flex min-h-0 min-w-0 overflow-hidden", o === "horizontal" ? "flex-row" : "flex-col", I),
|
|
43
|
+
"data-slot": "resizable-pane-group",
|
|
44
|
+
"data-direction": o,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ p("div", { id: m, "data-slot": "resizable-pane-first", className: "min-h-0 min-w-0 shrink-0 overflow-auto", style: { flexBasis: `${a}%` }, children: y }),
|
|
47
|
+
/* @__PURE__ */ p(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
role: "separator",
|
|
51
|
+
tabIndex: 0,
|
|
52
|
+
"aria-label": u,
|
|
53
|
+
"aria-orientation": o === "horizontal" ? "vertical" : "horizontal",
|
|
54
|
+
"aria-valuemin": d,
|
|
55
|
+
"aria-valuemax": h,
|
|
56
|
+
"aria-valuenow": a,
|
|
57
|
+
"aria-controls": `${m} ${v}`,
|
|
58
|
+
onPointerDown: L,
|
|
59
|
+
onKeyDown: k,
|
|
60
|
+
className: x(
|
|
61
|
+
"group relative z-10 shrink-0 touch-none bg-divider outline-none after:absolute after:rounded-full after:bg-graphite/60 hover:after:bg-rust focus-visible:after:bg-rust",
|
|
62
|
+
o === "horizontal" ? "w-1 cursor-col-resize after:inset-y-2 after:left-1/2 after:w-0.5 after:-translate-x-1/2" : "h-1 cursor-row-resize after:inset-x-2 after:top-1/2 after:h-0.5 after:-translate-y-1/2"
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ p("div", { id: v, "data-slot": "resizable-pane-second", className: "min-h-0 min-w-0 flex-1 overflow-auto", children: D })
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
M as ResizablePaneGroup
|
|
73
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as m, useEffect as N } from "react";
|
|
3
|
+
import { cn as k } from "../lib/cn.js";
|
|
4
|
+
function w(t) {
|
|
5
|
+
let e = (t == null ? void 0 : t.parentElement) ?? null;
|
|
6
|
+
for (; e; ) {
|
|
7
|
+
const { overflowY: n } = getComputedStyle(e);
|
|
8
|
+
if ((n === "auto" || n === "scroll" || n === "overlay") && e.scrollHeight > e.clientHeight + 1)
|
|
9
|
+
return e;
|
|
10
|
+
e = e.parentElement;
|
|
11
|
+
}
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
function E({
|
|
15
|
+
hasMore: t,
|
|
16
|
+
loading: e = !1,
|
|
17
|
+
onLoadMore: n,
|
|
18
|
+
loadingLabel: l,
|
|
19
|
+
endLabel: s,
|
|
20
|
+
hintLabel: a,
|
|
21
|
+
loadingSlot: x,
|
|
22
|
+
className: d,
|
|
23
|
+
rootMargin: u = "320px 0px"
|
|
24
|
+
}) {
|
|
25
|
+
const f = m(null), p = m(e);
|
|
26
|
+
return p.current = e, N(() => {
|
|
27
|
+
if (!t) return;
|
|
28
|
+
const c = f.current;
|
|
29
|
+
if (!c) return;
|
|
30
|
+
const v = w(c), h = new IntersectionObserver(
|
|
31
|
+
([i]) => {
|
|
32
|
+
i != null && i.isIntersecting && !p.current && n();
|
|
33
|
+
},
|
|
34
|
+
{ root: v, rootMargin: u, threshold: 0 }
|
|
35
|
+
);
|
|
36
|
+
return h.observe(c), () => h.disconnect();
|
|
37
|
+
}, [t, n, u]), !t && !e && !s ? null : /* @__PURE__ */ o("div", { className: k("flex flex-col gap-3", d), children: [
|
|
38
|
+
e && x,
|
|
39
|
+
/* @__PURE__ */ r(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
ref: f,
|
|
43
|
+
className: "flex min-h-12 flex-col items-center justify-center gap-2 py-3",
|
|
44
|
+
"aria-live": "polite",
|
|
45
|
+
children: e ? /* @__PURE__ */ o(g, { children: [
|
|
46
|
+
/* @__PURE__ */ r(R, {}),
|
|
47
|
+
l && /* @__PURE__ */ r("span", { className: "text-caption font-sohne text-graphite", children: l })
|
|
48
|
+
] }) : t ? a ? /* @__PURE__ */ r("span", { className: "text-[11px] font-sohne text-graphite", children: a }) : /* @__PURE__ */ r("span", { className: "h-1 w-full", "aria-hidden": !0 }) : s ? /* @__PURE__ */ r("span", { className: "text-[11px] font-sohne text-graphite", children: s }) : null
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
] });
|
|
52
|
+
}
|
|
53
|
+
function R() {
|
|
54
|
+
return /* @__PURE__ */ o("svg", { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", className: "animate-spin text-graphite", "aria-hidden": !0, children: [
|
|
55
|
+
/* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: "2.5" }),
|
|
56
|
+
/* @__PURE__ */ r("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
|
|
57
|
+
] });
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
E as ScrollLoadMore
|
|
61
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsxs as h, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { cn as o } from "../lib/cn.js";
|
|
3
|
+
import { useSlideIndicator as v } from "./sliding-tabs.js";
|
|
4
|
+
function S({
|
|
5
|
+
options: s,
|
|
6
|
+
value: t,
|
|
7
|
+
onChange: d,
|
|
8
|
+
onBlocked: n,
|
|
9
|
+
className: c,
|
|
10
|
+
size: r = "md",
|
|
11
|
+
ariaLabel: p
|
|
12
|
+
}) {
|
|
13
|
+
var a;
|
|
14
|
+
const { listRef: u, indRef: f, setBtn: m } = v(t), x = r === "sm" ? "gap-0.5 rounded-lg p-0.5" : "gap-1 rounded-xl p-1", g = r === "sm" ? "rounded-md py-1 text-caption font-[450]" : "rounded-lg py-1.5 text-[14px] font-[450]", b = r === "sm" ? "t-seg-pill t-seg-pill-sm" : "t-seg-pill", y = ((a = s.find((e) => e.key === t)) == null ? void 0 : a.tone) ?? "neutral";
|
|
15
|
+
return /* @__PURE__ */ h("div", { ref: u, role: "tablist", "aria-label": p, className: o("relative flex bg-surface-muted/50", x, c), children: [
|
|
16
|
+
/* @__PURE__ */ l("span", { ref: f, className: b, "data-tone": y, "aria-hidden": !0 }),
|
|
17
|
+
s.map((e) => {
|
|
18
|
+
const i = t === e.key;
|
|
19
|
+
return /* @__PURE__ */ l(
|
|
20
|
+
"button",
|
|
21
|
+
{
|
|
22
|
+
ref: m(e.key),
|
|
23
|
+
type: "button",
|
|
24
|
+
role: "tab",
|
|
25
|
+
"aria-selected": i,
|
|
26
|
+
onClick: () => e.disabled ? n == null ? void 0 : n(e.key) : d(e.key),
|
|
27
|
+
className: o(
|
|
28
|
+
"relative z-[1] flex-1 text-center font-sohne outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rust/35",
|
|
29
|
+
g,
|
|
30
|
+
i ? e.tone === "up" ? "text-up" : e.tone === "down" ? "text-down" : "text-ink" : "text-graphite hover:text-ink",
|
|
31
|
+
e.disabled && !i && "cursor-not-allowed opacity-45 hover:text-graphite"
|
|
32
|
+
),
|
|
33
|
+
children: e.label
|
|
34
|
+
},
|
|
35
|
+
e.key
|
|
36
|
+
);
|
|
37
|
+
})
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
S as SegSlider
|
|
42
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { cn as a } from "../lib/cn.js";
|
|
3
|
+
function f({
|
|
4
|
+
value: i,
|
|
5
|
+
options: l,
|
|
6
|
+
onChange: s,
|
|
7
|
+
ariaLabel: c,
|
|
8
|
+
density: o = "default",
|
|
9
|
+
semantics: t = "selection",
|
|
10
|
+
className: d
|
|
11
|
+
}) {
|
|
12
|
+
const u = o === "compact" ? "min-h-control-compact py-1 text-caption" : o === "touch" ? "min-h-control-touch py-1.5 text-body" : "min-h-control-default py-1 text-body-sm";
|
|
13
|
+
return /* @__PURE__ */ r(
|
|
14
|
+
"div",
|
|
15
|
+
{
|
|
16
|
+
role: t === "tabs" ? "tablist" : "group",
|
|
17
|
+
"aria-label": c,
|
|
18
|
+
"data-density": o,
|
|
19
|
+
className: a("inline-flex min-w-0 items-center rounded-selection bg-surface-muted p-0.5", d),
|
|
20
|
+
children: l.map((e) => {
|
|
21
|
+
const n = e.value === i;
|
|
22
|
+
return /* @__PURE__ */ r(
|
|
23
|
+
"button",
|
|
24
|
+
{
|
|
25
|
+
type: "button",
|
|
26
|
+
role: t === "tabs" ? "tab" : void 0,
|
|
27
|
+
"aria-selected": t === "tabs" ? n : void 0,
|
|
28
|
+
"aria-pressed": t === "selection" ? n : void 0,
|
|
29
|
+
disabled: e.disabled,
|
|
30
|
+
onClick: () => s(e.value),
|
|
31
|
+
className: a(
|
|
32
|
+
"min-w-0 flex-1 rounded-control px-3 font-sohne font-[500] outline-none transition-[background-color,color,box-shadow,transform] duration-150 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-rust/35 disabled:pointer-events-none disabled:opacity-45",
|
|
33
|
+
u,
|
|
34
|
+
n ? "bg-surface-raised text-ink shadow-subtle" : "text-graphite hover:text-ink"
|
|
35
|
+
),
|
|
36
|
+
children: /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center justify-center whitespace-normal break-words text-center", children: e.label })
|
|
37
|
+
},
|
|
38
|
+
e.value
|
|
39
|
+
);
|
|
40
|
+
})
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
export {
|
|
45
|
+
f as SegmentedControl
|
|
46
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { jsxs as u, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Check as g } from "lucide-react";
|
|
3
|
+
import { Checkbox as f, RadioGroup as c, Switch as h, ToggleGroup as m } from "radix-ui";
|
|
4
|
+
import { cn as o } from "../lib/cn.js";
|
|
5
|
+
function N({ label: l, checked: t, onCheckedChange: i, disabled: s = !1, className: e }) {
|
|
6
|
+
return /* @__PURE__ */ u("label", { className: o("inline-flex min-h-control-default items-center gap-2 font-sohne text-body-sm text-ink", e), children: [
|
|
7
|
+
/* @__PURE__ */ a(
|
|
8
|
+
f.Root,
|
|
9
|
+
{
|
|
10
|
+
checked: t,
|
|
11
|
+
onCheckedChange: (n) => i(n === !0),
|
|
12
|
+
disabled: s,
|
|
13
|
+
className: "inline-flex size-4 shrink-0 items-center justify-center rounded-indicator border border-border bg-surface-raised text-on-accent outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-rust disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-rust data-[state=checked]:bg-rust",
|
|
14
|
+
children: /* @__PURE__ */ a(f.Indicator, { children: /* @__PURE__ */ a(g, { size: 12, strokeWidth: 3, "aria-hidden": !0 }) })
|
|
15
|
+
}
|
|
16
|
+
),
|
|
17
|
+
/* @__PURE__ */ a("span", { children: l })
|
|
18
|
+
] });
|
|
19
|
+
}
|
|
20
|
+
function w({
|
|
21
|
+
label: l,
|
|
22
|
+
checked: t,
|
|
23
|
+
onCheckedChange: i,
|
|
24
|
+
disabled: s = !1,
|
|
25
|
+
labelPosition: e = "end",
|
|
26
|
+
hideLabel: n = !1,
|
|
27
|
+
className: d,
|
|
28
|
+
labelClassName: r
|
|
29
|
+
}) {
|
|
30
|
+
const b = /* @__PURE__ */ a("span", { className: o(n && "sr-only", r), children: l });
|
|
31
|
+
return /* @__PURE__ */ u("label", { className: o("inline-flex min-h-control-default items-center gap-2 font-sohne text-body-sm text-ink", d), children: [
|
|
32
|
+
e === "start" && b,
|
|
33
|
+
/* @__PURE__ */ a(
|
|
34
|
+
h.Root,
|
|
35
|
+
{
|
|
36
|
+
checked: t,
|
|
37
|
+
onCheckedChange: i,
|
|
38
|
+
disabled: s,
|
|
39
|
+
className: "relative h-5 w-9 shrink-0 rounded-full border border-border bg-surface-hover outline-none transition-colors focus-visible:ring-2 focus-visible:ring-rust disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-rust",
|
|
40
|
+
children: /* @__PURE__ */ a(h.Thumb, { className: "block size-4 translate-x-0.5 rounded-full bg-surface-raised shadow-subtle transition-transform data-[state=checked]:translate-x-4" })
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
e === "end" && b
|
|
44
|
+
] });
|
|
45
|
+
}
|
|
46
|
+
function y({
|
|
47
|
+
label: l,
|
|
48
|
+
value: t,
|
|
49
|
+
options: i,
|
|
50
|
+
onValueChange: s,
|
|
51
|
+
appearance: e = "control",
|
|
52
|
+
className: n,
|
|
53
|
+
optionClassName: d
|
|
54
|
+
}) {
|
|
55
|
+
return /* @__PURE__ */ a(
|
|
56
|
+
c.Root,
|
|
57
|
+
{
|
|
58
|
+
"aria-label": l,
|
|
59
|
+
value: t,
|
|
60
|
+
onValueChange: (r) => s(r),
|
|
61
|
+
className: o(e === "card" ? "grid min-w-0 gap-2" : "flex min-w-0 flex-wrap items-center gap-3", n),
|
|
62
|
+
children: i.map((r) => e === "card" ? /* @__PURE__ */ a(
|
|
63
|
+
c.Item,
|
|
64
|
+
{
|
|
65
|
+
value: r.value,
|
|
66
|
+
disabled: r.disabled,
|
|
67
|
+
className: o(
|
|
68
|
+
"min-w-0 rounded-panel border border-border bg-surface-card p-2 text-left text-ink outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-rust data-[state=checked]:border-rust data-[state=checked]:ring-1 data-[state=checked]:ring-rust",
|
|
69
|
+
d
|
|
70
|
+
),
|
|
71
|
+
children: r.label
|
|
72
|
+
},
|
|
73
|
+
r.value
|
|
74
|
+
) : /* @__PURE__ */ u("label", { className: "inline-flex min-h-control-default items-center gap-2 font-sohne text-body-sm text-ink", children: [
|
|
75
|
+
/* @__PURE__ */ a(
|
|
76
|
+
c.Item,
|
|
77
|
+
{
|
|
78
|
+
value: r.value,
|
|
79
|
+
disabled: r.disabled,
|
|
80
|
+
onFocus: () => {
|
|
81
|
+
r.value !== t && s(r.value);
|
|
82
|
+
},
|
|
83
|
+
className: "inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-surface-raised outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-rust disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-rust",
|
|
84
|
+
children: /* @__PURE__ */ a(c.Indicator, { className: "size-2 rounded-full bg-rust" })
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ a("span", { children: r.label })
|
|
88
|
+
] }, r.value))
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
function C({ label: l, value: t, options: i, onValueChange: s }) {
|
|
93
|
+
return /* @__PURE__ */ a(
|
|
94
|
+
m.Root,
|
|
95
|
+
{
|
|
96
|
+
type: "multiple",
|
|
97
|
+
"aria-label": l,
|
|
98
|
+
value: t,
|
|
99
|
+
onValueChange: (e) => s(e),
|
|
100
|
+
className: "inline-flex items-center gap-1 rounded-panel border border-border bg-surface-fog p-1",
|
|
101
|
+
children: i.map((e) => /* @__PURE__ */ a(
|
|
102
|
+
m.Item,
|
|
103
|
+
{
|
|
104
|
+
value: e.value,
|
|
105
|
+
"aria-label": e.label,
|
|
106
|
+
className: "inline-flex size-control-compact items-center justify-center rounded-control text-graphite outline-none transition-colors hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust data-[state=on]:bg-surface-raised data-[state=on]:text-ink",
|
|
107
|
+
children: e.label
|
|
108
|
+
},
|
|
109
|
+
e.value
|
|
110
|
+
))
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
export {
|
|
115
|
+
N as Checkbox,
|
|
116
|
+
y as RadioGroup,
|
|
117
|
+
w as Switch,
|
|
118
|
+
C as ToggleGroup
|
|
119
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as t, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { cn as i } from "../lib/cn.js";
|
|
3
|
+
function s({ label: e, className: r, ...n }) {
|
|
4
|
+
return /* @__PURE__ */ t("aside", { "aria-label": e, className: i("flex min-h-0 w-64 shrink-0 flex-col border-r border-divider bg-surface-fog", r), ...n });
|
|
5
|
+
}
|
|
6
|
+
function d({ className: e, ...r }) {
|
|
7
|
+
return /* @__PURE__ */ t("div", { className: i("flex min-h-row-touch shrink-0 items-center border-b border-divider px-4 font-product text-body-sm font-[600] text-ink", e), ...r });
|
|
8
|
+
}
|
|
9
|
+
function f({ className: e, ...r }) {
|
|
10
|
+
return /* @__PURE__ */ t("div", { className: i("min-h-0 flex-1 overflow-y-auto p-2", e), ...r });
|
|
11
|
+
}
|
|
12
|
+
function m({ label: e, children: r, className: n }) {
|
|
13
|
+
return /* @__PURE__ */ o("section", { className: i("py-2", n), children: [
|
|
14
|
+
/* @__PURE__ */ t("h2", { className: "px-2 pb-1 font-product text-micro font-[600] uppercase text-graphite", children: e }),
|
|
15
|
+
/* @__PURE__ */ t("div", { className: "min-w-0", children: r })
|
|
16
|
+
] });
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
s as Sidebar,
|
|
20
|
+
f as SidebarContent,
|
|
21
|
+
d as SidebarHeader,
|
|
22
|
+
m as SidebarSection
|
|
23
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { cn as e } from "../lib/cn.js";
|
|
4
|
+
function d({ className: r, style: o }) {
|
|
5
|
+
return /* @__PURE__ */ t("div", { "aria-hidden": !0, className: e("t-shimmer rounded-control", r), style: o });
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
d as Skeleton
|
|
9
|
+
};
|