@actioneer/ads 0.5.9 → 0.7.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/components/ai-elements/agent-trace.d.ts +2 -2
- package/components/ai-elements/agent-trace.js +163 -104
- package/components/ai-elements/chain-of-thought.d.ts +2 -2
- package/components/ai-elements/chain-of-thought.js +1 -1
- package/components/ai-elements/index.d.ts +0 -5
- package/components/ai-elements/inline-citation.js +1 -1
- package/components/alert.d.ts +6 -6
- package/components/alert.js +89 -53
- package/components/answer-sources.d.ts +2 -6
- package/components/answer-sources.js +58 -60
- package/components/answer.d.ts +5 -0
- package/components/answer.js +311 -271
- package/components/assistant-ui/composer-harness.js +11 -14
- package/components/assistant-ui/composer.d.ts +3 -1
- package/components/assistant-ui/composer.js +148 -144
- package/components/assistant-ui/index.d.ts +0 -3
- package/components/assistant-ui/thread-context.d.ts +3 -1
- package/components/assistant-ui/thread.js +50 -42
- package/components/avatar.js +42 -42
- package/components/badge.d.ts +5 -6
- package/components/badge.js +13 -76
- package/components/body-page-header.d.ts +15 -0
- package/components/body-page-header.js +24 -0
- package/components/brand-loader.d.ts +0 -3
- package/components/brand-loader.js +10 -32
- package/components/breadcrumbs.d.ts +1 -8
- package/components/breadcrumbs.js +65 -78
- package/components/button.d.ts +1 -1
- package/components/button.js +55 -49
- package/components/card.js +19 -18
- package/components/chart.js +526 -503
- package/components/chip.d.ts +13 -1
- package/components/chip.js +93 -80
- package/components/collection-header.d.ts +17 -0
- package/components/collection-header.js +31 -0
- package/components/connector-card.d.ts +6 -6
- package/components/connector-card.js +31 -32
- package/components/date-range-picker.d.ts +26 -0
- package/components/date-range-picker.js +223 -0
- package/components/drawer.d.ts +19 -3
- package/components/drawer.js +143 -116
- package/components/dropdown.d.ts +1 -2
- package/components/dropdown.js +88 -89
- package/components/field.js +39 -34
- package/components/file-dropzone.js +1 -1
- package/components/index.d.ts +5 -4
- package/components/index.js +501 -546
- package/components/infinite-canvas.js +24 -24
- package/components/input-field.d.ts +18 -3
- package/components/input-field.js +88 -72
- package/components/input.js +16 -15
- package/components/modal.d.ts +31 -3
- package/components/modal.js +243 -169
- package/components/number-field.js +45 -42
- package/components/page-body.d.ts +12 -0
- package/components/page-body.js +18 -0
- package/components/pagination.js +36 -36
- package/components/panel.js +31 -28
- package/components/select.d.ts +21 -0
- package/components/select.js +189 -148
- package/components/setting-row.d.ts +6 -5
- package/components/setting-row.js +33 -32
- package/components/sidebar.d.ts +2 -0
- package/components/sidebar.js +165 -155
- package/components/skeleton.js +8 -7
- package/components/slider.js +1 -1
- package/components/surface-loader.d.ts +11 -0
- package/components/surface-loader.js +35 -0
- package/components/table.d.ts +16 -10
- package/components/table.js +426 -410
- package/components/tabs.d.ts +2 -0
- package/components/tabs.js +159 -294
- package/components/textarea.js +9 -9
- package/components/toast.d.ts +1 -1
- package/components/toast.js +181 -118
- package/components/tree.d.ts +5 -1
- package/components/tree.js +96 -63
- package/components/typography.d.ts +4 -4
- package/components/typography.js +13 -13
- package/components/ui/button.d.ts +1 -1
- package/components/ui/dialog.js +33 -33
- package/components/viz-charts.js +186 -183
- package/demo/components/add-to-artifact.js +8 -10
- package/fonts.css +2 -0
- package/lib/cn.js +11 -4
- package/lib/icons.d.ts +4 -0
- package/lib/icons.js +107 -106
- package/lib/interactive.d.ts +1 -1
- package/llms.txt +115 -152
- package/manifest.json +13730 -1084
- package/package.json +4 -2
- package/styles.css +365 -225
- package/theme.css +315 -176
- package/components/agent-icon.d.ts +0 -76
- package/components/agent-icon.js +0 -265
- package/components/ai-elements/queue.d.ts +0 -60
- package/components/ai-elements/queue.js +0 -193
- package/components/ai-elements/speech-input.d.ts +0 -16
- package/components/ai-elements/speech-input.js +0 -151
- package/components/ai-elements/task-progress.d.ts +0 -41
- package/components/ai-elements/task-progress.js +0 -224
- package/components/ai-elements/task.d.ts +0 -39
- package/components/ai-elements/task.js +0 -105
- package/components/ai-elements/voice.d.ts +0 -90
- package/components/ai-elements/voice.js +0 -496
- package/components/assistant-ui/follow-up-suggestions.d.ts +0 -11
- package/components/assistant-ui/follow-up-suggestions.js +0 -72
- package/components/assistant-ui/suggestions.d.ts +0 -7
- package/components/assistant-ui/suggestions.js +0 -19
- package/components/assistant-ui/voice.d.ts +0 -18
- package/components/link.d.ts +0 -14
- package/components/link.js +0 -72
- package/components/navbar.d.ts +0 -15
- package/components/navbar.js +0 -68
- package/components/pixel-icon.d.ts +0 -37
- package/components/pixel-icon.js +0 -859
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t, jsxs as d } from "react/jsx-runtime";
|
|
3
|
+
import * as c from "react";
|
|
4
|
+
import { parseDate as p } from "@internationalized/date";
|
|
5
|
+
import { I18nProvider as L, DateRangePicker as A, Label as I, Group as J, DateInput as g, DateSegment as v, Button as m, Text as N, Popover as O, Dialog as E, RangeCalendar as T, Heading as Y, CalendarGrid as F, CalendarGridHeader as _, CalendarHeaderCell as $, CalendarGridBody as q, CalendarCell as K } from "react-aria-components";
|
|
6
|
+
import { Calendar as Q, ChevronLeft as U, ChevronRight as W } from "../lib/icons.js";
|
|
7
|
+
import { cn as o } from "../lib/cn.js";
|
|
8
|
+
import { interactive as X } from "../lib/interactive.js";
|
|
9
|
+
function w(e) {
|
|
10
|
+
if (!(e != null && e.start) || !e.end) return null;
|
|
11
|
+
try {
|
|
12
|
+
return {
|
|
13
|
+
start: p(e.start),
|
|
14
|
+
end: p(e.end)
|
|
15
|
+
};
|
|
16
|
+
} catch {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
function D(e) {
|
|
21
|
+
if (e)
|
|
22
|
+
try {
|
|
23
|
+
return p(e);
|
|
24
|
+
} catch {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function Z(e) {
|
|
29
|
+
return e ? {
|
|
30
|
+
start: e.start.toString(),
|
|
31
|
+
end: e.end.toString()
|
|
32
|
+
} : null;
|
|
33
|
+
}
|
|
34
|
+
const ee = [
|
|
35
|
+
"Jan",
|
|
36
|
+
"Feb",
|
|
37
|
+
"Mar",
|
|
38
|
+
"Apr",
|
|
39
|
+
"May",
|
|
40
|
+
"Jun",
|
|
41
|
+
"Jul",
|
|
42
|
+
"Aug",
|
|
43
|
+
"Sep",
|
|
44
|
+
"Oct",
|
|
45
|
+
"Nov",
|
|
46
|
+
"Dec"
|
|
47
|
+
];
|
|
48
|
+
function S(e) {
|
|
49
|
+
return e.type === "literal" ? " " : e.value == null ? e.type === "day" ? "DD" : e.type === "month" ? "MMM" : e.type === "year" ? "YY" : e.text : e.type === "day" ? String(e.value).padStart(2, "0") : e.type === "month" ? ee[e.value - 1] ?? e.text : e.type === "year" ? String(e.value).slice(-2) : e.text;
|
|
50
|
+
}
|
|
51
|
+
function se({
|
|
52
|
+
value: e,
|
|
53
|
+
defaultValue: f,
|
|
54
|
+
onChange: u,
|
|
55
|
+
label: x,
|
|
56
|
+
description: h,
|
|
57
|
+
errorMessage: n,
|
|
58
|
+
disabled: z,
|
|
59
|
+
minValue: k,
|
|
60
|
+
maxValue: B,
|
|
61
|
+
className: C,
|
|
62
|
+
"aria-label": R
|
|
63
|
+
}) {
|
|
64
|
+
const l = c.useMemo(() => w(e), [e]), b = c.useMemo(
|
|
65
|
+
() => w(f),
|
|
66
|
+
[f]
|
|
67
|
+
), [j, y] = c.useState(
|
|
68
|
+
!!(l ?? b)
|
|
69
|
+
);
|
|
70
|
+
c.useEffect(() => {
|
|
71
|
+
e !== void 0 && y(!!l);
|
|
72
|
+
}, [l, e]);
|
|
73
|
+
const V = (r) => {
|
|
74
|
+
const a = Z(r);
|
|
75
|
+
y(!!a), u == null || u(a);
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ t(L, { locale: "en-GB", children: /* @__PURE__ */ d(
|
|
78
|
+
A,
|
|
79
|
+
{
|
|
80
|
+
"aria-label": R,
|
|
81
|
+
className: o("flex w-full flex-col gap-1.5", C),
|
|
82
|
+
value: e === void 0 ? void 0 : l,
|
|
83
|
+
defaultValue: b ?? void 0,
|
|
84
|
+
isDisabled: z,
|
|
85
|
+
minValue: D(k),
|
|
86
|
+
maxValue: D(B),
|
|
87
|
+
isInvalid: !!n,
|
|
88
|
+
onChange: V,
|
|
89
|
+
children: [
|
|
90
|
+
x && /* @__PURE__ */ t(I, { className: "text-m font-medium text-foreground", children: x }),
|
|
91
|
+
/* @__PURE__ */ d(
|
|
92
|
+
J,
|
|
93
|
+
{
|
|
94
|
+
"aria-invalid": n ? !0 : void 0,
|
|
95
|
+
"data-value-set": j || void 0,
|
|
96
|
+
className: o(
|
|
97
|
+
"group/field flex h-8 w-full items-center rounded-md border bg-elevated px-3 text-m font-medium text-on-white-tertiary outline-none",
|
|
98
|
+
"hover:text-on-white-secondary focus-within:text-on-white-primary",
|
|
99
|
+
"transition-[border-color,box-shadow]",
|
|
100
|
+
X({
|
|
101
|
+
on: "within",
|
|
102
|
+
color: "brand",
|
|
103
|
+
intensity: "medium",
|
|
104
|
+
animate: !0
|
|
105
|
+
}),
|
|
106
|
+
"[--glow-border-rest:var(--input)]",
|
|
107
|
+
"[--glow-border-active:var(--field-focus)]",
|
|
108
|
+
"[--glow-inset:var(--inner-glow-field)]",
|
|
109
|
+
"data-[value-set]:text-on-white-primary!",
|
|
110
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
|
111
|
+
),
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ t(g, { slot: "start", className: "flex shrink-0 items-center", children: (r) => /* @__PURE__ */ t(
|
|
114
|
+
v,
|
|
115
|
+
{
|
|
116
|
+
segment: r,
|
|
117
|
+
className: ({ isFocused: a, isPlaceholder: i, type: s }) => o(
|
|
118
|
+
"tabular-nums outline-none",
|
|
119
|
+
s !== "literal" && "-mx-0.5 cursor-text rounded-xs px-0.5 transition-colors duration-150 hover:bg-action-primary-soft hover:text-action-primary-text",
|
|
120
|
+
i && "text-muted-foreground",
|
|
121
|
+
a && "bg-action-primary-soft text-action-primary-text"
|
|
122
|
+
),
|
|
123
|
+
children: S(r)
|
|
124
|
+
}
|
|
125
|
+
) }),
|
|
126
|
+
/* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0", children: " - " }),
|
|
127
|
+
/* @__PURE__ */ t(g, { slot: "end", className: "flex shrink-0 items-center", children: (r) => /* @__PURE__ */ t(
|
|
128
|
+
v,
|
|
129
|
+
{
|
|
130
|
+
segment: r,
|
|
131
|
+
className: ({ isFocused: a, isPlaceholder: i, type: s }) => o(
|
|
132
|
+
"tabular-nums outline-none",
|
|
133
|
+
s !== "literal" && "-mx-0.5 cursor-text rounded-xs px-0.5 transition-colors duration-150 hover:bg-action-primary-soft hover:text-action-primary-text",
|
|
134
|
+
i && "text-muted-foreground",
|
|
135
|
+
a && "bg-action-primary-soft text-action-primary-text"
|
|
136
|
+
),
|
|
137
|
+
children: S(r)
|
|
138
|
+
}
|
|
139
|
+
) }),
|
|
140
|
+
/* @__PURE__ */ t(
|
|
141
|
+
m,
|
|
142
|
+
{
|
|
143
|
+
"aria-label": "Open calendar",
|
|
144
|
+
className: o(
|
|
145
|
+
"ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent text-muted-foreground outline-none",
|
|
146
|
+
"transition-[background,color,transform] duration-150 ease-out",
|
|
147
|
+
"group-hover/field:text-foreground group-focus-within/field:text-g12!",
|
|
148
|
+
"hover:bg-action-primary-soft hover:text-action-primary-text!",
|
|
149
|
+
"data-[pressed]:scale-[0.97] data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text!",
|
|
150
|
+
"motion-reduce:data-[pressed]:scale-100",
|
|
151
|
+
"size-7 rounded-sm"
|
|
152
|
+
),
|
|
153
|
+
children: /* @__PURE__ */ t(Q, { className: "size-4" })
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
h && !n && /* @__PURE__ */ t(N, { slot: "description", className: "text-m font-normal text-muted-foreground", children: h }),
|
|
160
|
+
n && /* @__PURE__ */ t(N, { slot: "errorMessage", className: "text-m font-normal text-danger", children: n }),
|
|
161
|
+
/* @__PURE__ */ t(
|
|
162
|
+
O,
|
|
163
|
+
{
|
|
164
|
+
placement: "bottom end",
|
|
165
|
+
offset: 6,
|
|
166
|
+
className: "z-50 w-72 rounded-md border border-input bg-popover p-3 text-popover-foreground shadow-elevation outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
|
|
167
|
+
children: /* @__PURE__ */ t(E, { className: "outline-none", children: /* @__PURE__ */ d(T, { className: "w-full", visibleDuration: { months: 1 }, children: [
|
|
168
|
+
/* @__PURE__ */ d("header", { className: "mb-3 flex items-center justify-between gap-2", children: [
|
|
169
|
+
/* @__PURE__ */ t(
|
|
170
|
+
m,
|
|
171
|
+
{
|
|
172
|
+
slot: "previous",
|
|
173
|
+
className: "inline-flex size-8 cursor-pointer items-center justify-center rounded-sm border border-input bg-elevated text-foreground outline-none transition-[background,border,color,transform] duration-150 ease-out hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text data-[pressed]:scale-[0.97] data-[pressed]:border-action-primary data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 motion-reduce:data-[pressed]:scale-100",
|
|
174
|
+
children: /* @__PURE__ */ t(U, { className: "size-4" })
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
/* @__PURE__ */ t(Y, { className: "text-sm font-semibold" }),
|
|
178
|
+
/* @__PURE__ */ t(
|
|
179
|
+
m,
|
|
180
|
+
{
|
|
181
|
+
slot: "next",
|
|
182
|
+
className: "inline-flex size-8 cursor-pointer items-center justify-center rounded-sm border border-input bg-elevated text-foreground outline-none transition-[background,border,color,transform] duration-150 ease-out hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text data-[pressed]:scale-[0.97] data-[pressed]:border-action-primary data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 motion-reduce:data-[pressed]:scale-100",
|
|
183
|
+
children: /* @__PURE__ */ t(W, { className: "size-4" })
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
] }),
|
|
187
|
+
/* @__PURE__ */ d(F, { weekdayStyle: "short", className: "w-full border-separate border-spacing-0.5", children: [
|
|
188
|
+
/* @__PURE__ */ t(_, { children: (r) => /* @__PURE__ */ t($, { className: "h-7 text-center text-xs font-medium text-muted-foreground", children: r }) }),
|
|
189
|
+
/* @__PURE__ */ t(q, { children: (r) => /* @__PURE__ */ t(
|
|
190
|
+
K,
|
|
191
|
+
{
|
|
192
|
+
date: r,
|
|
193
|
+
className: ({
|
|
194
|
+
isDisabled: a,
|
|
195
|
+
isFocusVisible: i,
|
|
196
|
+
isOutsideMonth: s,
|
|
197
|
+
isSelected: G,
|
|
198
|
+
isSelectionEnd: H,
|
|
199
|
+
isSelectionStart: M,
|
|
200
|
+
isUnavailable: P
|
|
201
|
+
}) => o(
|
|
202
|
+
"relative flex size-8 cursor-pointer items-center justify-center rounded-sm text-xs tabular-nums outline-none transition-colors duration-150",
|
|
203
|
+
"hover:bg-action-primary-soft hover:text-action-primary-text",
|
|
204
|
+
"data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text",
|
|
205
|
+
G && "bg-action-primary-soft font-medium text-action-primary-text",
|
|
206
|
+
(M || H) && "bg-action-primary text-action-primary-foreground hover:bg-action-primary-hover hover:text-action-primary-foreground",
|
|
207
|
+
s && "text-muted-foreground/45",
|
|
208
|
+
(a || P) && "pointer-events-none cursor-default text-muted-foreground/35 line-through",
|
|
209
|
+
i && "ring-3 ring-ring"
|
|
210
|
+
)
|
|
211
|
+
}
|
|
212
|
+
) })
|
|
213
|
+
] })
|
|
214
|
+
] }) })
|
|
215
|
+
}
|
|
216
|
+
)
|
|
217
|
+
]
|
|
218
|
+
}
|
|
219
|
+
) });
|
|
220
|
+
}
|
|
221
|
+
export {
|
|
222
|
+
se as DateRangePicker
|
|
223
|
+
};
|
package/components/drawer.d.ts
CHANGED
|
@@ -2,13 +2,20 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
declare const panelVariants: (props?: ({
|
|
4
4
|
side?: "bottom" | "left" | "right" | null | undefined;
|
|
5
|
-
size?: "
|
|
5
|
+
size?: "xl" | "sm" | "md" | "lg" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export type DrawerAppearance = "flat" | "floating";
|
|
7
8
|
export interface DrawerProps extends VariantProps<typeof panelVariants> {
|
|
8
9
|
open: boolean;
|
|
9
10
|
onOpenChange: (open: boolean) => void;
|
|
11
|
+
/** Flat joins a canvas layout; floating adds an NG3 stroke and shadow 400. */
|
|
12
|
+
appearance?: DrawerAppearance;
|
|
13
|
+
/** Whether Escape and the built-in close button can dismiss the drawer. */
|
|
14
|
+
dismissible?: boolean;
|
|
10
15
|
/** Accessible label for the drawer landmark. */
|
|
11
16
|
"aria-label": string;
|
|
17
|
+
/** Optional classes for the inline animation slot around the panel. */
|
|
18
|
+
containerClassName?: string;
|
|
12
19
|
className?: string;
|
|
13
20
|
children: React.ReactNode;
|
|
14
21
|
}
|
|
@@ -53,9 +60,18 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
|
|
|
53
60
|
*
|
|
54
61
|
* This mirrors the shell's main + chat layout — white panels on the canvas.
|
|
55
62
|
* If the panel doesn't read, fix the ground; never add a border or shadow to
|
|
56
|
-
* force it (that fights principle 1).
|
|
63
|
+
* force it (that fights principle 1). Use `FloatingDrawer` when the surface is
|
|
64
|
+
* intentionally inset and should read as an elevated utility panel.
|
|
57
65
|
*/
|
|
58
|
-
export declare function Drawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
|
|
66
|
+
export declare function Drawer({ open, onOpenChange, appearance, dismissible, side: sideProp, size, containerClassName, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
|
|
67
|
+
export type FloatingDrawerProps = Omit<DrawerProps, "appearance">;
|
|
68
|
+
/**
|
|
69
|
+
* FloatingDrawer — an inset utility drawer with a card surface, NG3 stroke,
|
|
70
|
+
* and shadow 400. It keeps the Drawer interaction and motion model while
|
|
71
|
+
* providing the elevated treatment used for chat history, section trees, and
|
|
72
|
+
* property inspectors.
|
|
73
|
+
*/
|
|
74
|
+
export declare function FloatingDrawer(props: FloatingDrawerProps): React.JSX.Element;
|
|
59
75
|
/** @deprecated Alias for `Drawer` — the canonical drawer is now the inline
|
|
60
76
|
* variant. Kept for any code still importing `InlineDrawer`. */
|
|
61
77
|
export declare const InlineDrawer: typeof Drawer;
|
package/components/drawer.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as i, jsxs as
|
|
3
|
-
import * as
|
|
2
|
+
import { jsx as i, jsxs as y } from "react/jsx-runtime";
|
|
3
|
+
import * as s from "react";
|
|
4
4
|
import { createPortal as R } from "react-dom";
|
|
5
|
-
import { MotionConfig as
|
|
6
|
-
import { Close as
|
|
7
|
-
import { cva as
|
|
8
|
-
import { cn as
|
|
9
|
-
import { springSheet as
|
|
10
|
-
const N =
|
|
5
|
+
import { MotionConfig as z, AnimatePresence as D, motion as g } from "motion/react";
|
|
6
|
+
import { Close as j } from "../lib/icons.js";
|
|
7
|
+
import { cva as F } from "class-variance-authority";
|
|
8
|
+
import { cn as n } from "../lib/cn.js";
|
|
9
|
+
import { springSheet as l, drawerOffset as v, drawerBackdropVariants as A } from "../lib/motion.js";
|
|
10
|
+
const N = F(
|
|
11
11
|
[
|
|
12
12
|
"relative flex flex-col",
|
|
13
13
|
"bg-elevated text-foreground",
|
|
@@ -43,97 +43,102 @@ const N = j(
|
|
|
43
43
|
],
|
|
44
44
|
defaultVariants: { side: "right", size: "md" }
|
|
45
45
|
}
|
|
46
|
-
),
|
|
46
|
+
), B = {
|
|
47
47
|
right: "justify-end items-stretch",
|
|
48
48
|
left: "justify-start items-stretch",
|
|
49
49
|
bottom: "justify-center items-end"
|
|
50
|
+
}, L = {
|
|
51
|
+
sm: "25%",
|
|
52
|
+
md: "33.333333%",
|
|
53
|
+
lg: "50%",
|
|
54
|
+
xl: "66.666667%"
|
|
50
55
|
};
|
|
51
56
|
function k({
|
|
52
|
-
onClick:
|
|
53
|
-
className:
|
|
57
|
+
onClick: e,
|
|
58
|
+
className: t
|
|
54
59
|
}) {
|
|
55
60
|
return /* @__PURE__ */ i(
|
|
56
61
|
"button",
|
|
57
62
|
{
|
|
58
63
|
type: "button",
|
|
59
|
-
onClick:
|
|
64
|
+
onClick: e,
|
|
60
65
|
"aria-label": "Close",
|
|
61
|
-
className:
|
|
66
|
+
className: n(
|
|
62
67
|
"absolute inline-flex size-8 items-center justify-center",
|
|
63
68
|
"rounded-sm text-muted-foreground",
|
|
64
69
|
"transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted hover:text-foreground",
|
|
65
70
|
"active:scale-[0.97] motion-reduce:active:scale-100",
|
|
66
71
|
"outline-none focus-visible:ring-3 focus-visible:ring-ring",
|
|
67
72
|
"[&_svg]:size-4 [&_svg]:shrink-0",
|
|
68
|
-
|
|
73
|
+
t
|
|
69
74
|
),
|
|
70
|
-
children: /* @__PURE__ */ i(
|
|
75
|
+
children: /* @__PURE__ */ i(j, { "aria-hidden": !0 })
|
|
71
76
|
}
|
|
72
77
|
);
|
|
73
78
|
}
|
|
74
|
-
function
|
|
75
|
-
open:
|
|
76
|
-
onOpenChange:
|
|
77
|
-
side:
|
|
78
|
-
size:
|
|
79
|
-
className:
|
|
80
|
-
children:
|
|
81
|
-
"aria-label":
|
|
79
|
+
function G({
|
|
80
|
+
open: e,
|
|
81
|
+
onOpenChange: t,
|
|
82
|
+
side: o,
|
|
83
|
+
size: c,
|
|
84
|
+
className: x,
|
|
85
|
+
children: m,
|
|
86
|
+
"aria-label": p
|
|
82
87
|
}) {
|
|
83
|
-
const
|
|
84
|
-
return
|
|
85
|
-
if (!
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
+
const d = o ?? "right", f = s.useRef(null), u = s.useRef(null);
|
|
89
|
+
return s.useEffect(() => {
|
|
90
|
+
if (!e) return;
|
|
91
|
+
u.current = document.activeElement;
|
|
92
|
+
const a = document.body.style.overflow;
|
|
88
93
|
document.body.style.overflow = "hidden";
|
|
89
|
-
const
|
|
90
|
-
|
|
94
|
+
const w = (r) => {
|
|
95
|
+
r.key === "Escape" && (r.stopPropagation(), t(!1));
|
|
91
96
|
};
|
|
92
|
-
document.addEventListener("keydown",
|
|
93
|
-
const
|
|
94
|
-
var
|
|
95
|
-
(
|
|
97
|
+
document.addEventListener("keydown", w);
|
|
98
|
+
const b = requestAnimationFrame(() => {
|
|
99
|
+
var r;
|
|
100
|
+
(r = f.current) == null || r.focus();
|
|
96
101
|
});
|
|
97
102
|
return () => {
|
|
98
|
-
var
|
|
99
|
-
document.removeEventListener("keydown",
|
|
103
|
+
var r, h;
|
|
104
|
+
document.removeEventListener("keydown", w), document.body.style.overflow = a, cancelAnimationFrame(b), (h = (r = u.current) == null ? void 0 : r.focus) == null || h.call(r);
|
|
100
105
|
};
|
|
101
|
-
}, [
|
|
102
|
-
/* @__PURE__ */ i(
|
|
106
|
+
}, [e, t]), R(
|
|
107
|
+
/* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(D, { children: e && /* @__PURE__ */ y("div", { className: n("fixed inset-0 z-50 flex", B[d]), children: [
|
|
103
108
|
/* @__PURE__ */ i(
|
|
104
|
-
|
|
109
|
+
g.div,
|
|
105
110
|
{
|
|
106
|
-
variants:
|
|
111
|
+
variants: A,
|
|
107
112
|
initial: "hidden",
|
|
108
113
|
animate: "visible",
|
|
109
114
|
exit: "hidden",
|
|
110
115
|
className: "absolute inset-0 bg-overlay",
|
|
111
|
-
onClick: () =>
|
|
116
|
+
onClick: () => t(!1),
|
|
112
117
|
"aria-hidden": !0
|
|
113
118
|
},
|
|
114
119
|
"backdrop"
|
|
115
120
|
),
|
|
116
|
-
/* @__PURE__ */
|
|
117
|
-
|
|
121
|
+
/* @__PURE__ */ y(
|
|
122
|
+
g.div,
|
|
118
123
|
{
|
|
119
|
-
ref:
|
|
120
|
-
initial:
|
|
121
|
-
animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition:
|
|
122
|
-
exit: { ...
|
|
124
|
+
ref: f,
|
|
125
|
+
initial: v[d],
|
|
126
|
+
animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
|
|
127
|
+
exit: { ...v[d], pointerEvents: "none", transition: l },
|
|
123
128
|
role: "dialog",
|
|
124
129
|
"aria-modal": "true",
|
|
125
|
-
"aria-label":
|
|
130
|
+
"aria-label": p,
|
|
126
131
|
tabIndex: -1,
|
|
127
|
-
className:
|
|
132
|
+
className: n(N({ side: d, size: c }), "relative outline-none", x),
|
|
128
133
|
children: [
|
|
129
134
|
/* @__PURE__ */ i(
|
|
130
135
|
k,
|
|
131
136
|
{
|
|
132
|
-
onClick: () =>
|
|
137
|
+
onClick: () => t(!1),
|
|
133
138
|
className: "right-4 top-4"
|
|
134
139
|
}
|
|
135
140
|
),
|
|
136
|
-
|
|
141
|
+
m
|
|
137
142
|
]
|
|
138
143
|
},
|
|
139
144
|
"panel"
|
|
@@ -142,96 +147,118 @@ function S({
|
|
|
142
147
|
document.body
|
|
143
148
|
);
|
|
144
149
|
}
|
|
145
|
-
function
|
|
146
|
-
open:
|
|
147
|
-
onOpenChange:
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
function E({
|
|
151
|
+
open: e,
|
|
152
|
+
onOpenChange: t,
|
|
153
|
+
appearance: o = "flat",
|
|
154
|
+
dismissible: c = !0,
|
|
155
|
+
side: x,
|
|
156
|
+
size: m,
|
|
157
|
+
containerClassName: p,
|
|
158
|
+
className: d,
|
|
159
|
+
children: f,
|
|
160
|
+
"aria-label": u
|
|
153
161
|
}) {
|
|
154
|
-
const
|
|
155
|
-
return
|
|
156
|
-
if (!
|
|
157
|
-
const
|
|
158
|
-
|
|
162
|
+
const a = x ?? "right", w = m ?? "md", b = s.useRef(null);
|
|
163
|
+
return s.useEffect(() => {
|
|
164
|
+
if (!e || !c) return;
|
|
165
|
+
const r = (h) => {
|
|
166
|
+
h.key === "Escape" && t(!1);
|
|
159
167
|
};
|
|
160
|
-
return document.addEventListener("keydown",
|
|
161
|
-
}, [t,
|
|
162
|
-
|
|
168
|
+
return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
|
|
169
|
+
}, [e, t, c]), /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(D, { initial: !1, children: e && /* @__PURE__ */ i(
|
|
170
|
+
g.div,
|
|
163
171
|
{
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
N({ side: o, size: f }),
|
|
172
|
-
"relative shrink-0 overflow-hidden rounded-lg bg-card shadow-none outline-none",
|
|
173
|
-
u
|
|
172
|
+
initial: a === "bottom" ? { height: "0%" } : { width: 0 },
|
|
173
|
+
animate: a === "bottom" ? { height: L[w], transition: l } : { width: "auto", transition: l },
|
|
174
|
+
exit: a === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
|
|
175
|
+
className: n(
|
|
176
|
+
"shrink-0 overflow-hidden",
|
|
177
|
+
a === "bottom" ? "w-full" : "h-full",
|
|
178
|
+
p
|
|
174
179
|
),
|
|
175
|
-
children:
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
180
|
+
children: /* @__PURE__ */ y(
|
|
181
|
+
g.aside,
|
|
182
|
+
{
|
|
183
|
+
ref: b,
|
|
184
|
+
initial: v[a],
|
|
185
|
+
animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
|
|
186
|
+
exit: { ...v[a], pointerEvents: "none", transition: l },
|
|
187
|
+
role: "complementary",
|
|
188
|
+
"aria-label": u,
|
|
189
|
+
className: n(
|
|
190
|
+
N({ side: a, size: m }),
|
|
191
|
+
"relative shrink-0 overflow-hidden rounded-lg bg-card outline-none",
|
|
192
|
+
o === "floating" ? "border border-ng3 shadow-400" : "border-0 shadow-none",
|
|
193
|
+
a === "bottom" && "h-full",
|
|
194
|
+
d
|
|
195
|
+
),
|
|
196
|
+
children: [
|
|
197
|
+
c && /* @__PURE__ */ i(
|
|
198
|
+
k,
|
|
199
|
+
{
|
|
200
|
+
onClick: () => t(!1),
|
|
201
|
+
className: "right-2 top-1"
|
|
202
|
+
}
|
|
203
|
+
),
|
|
204
|
+
f
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
)
|
|
185
208
|
},
|
|
186
|
-
"inline-drawer"
|
|
209
|
+
"inline-drawer-slot"
|
|
187
210
|
) }) });
|
|
188
211
|
}
|
|
189
|
-
|
|
212
|
+
function J(e) {
|
|
213
|
+
return /* @__PURE__ */ i(E, { ...e, appearance: "floating" });
|
|
214
|
+
}
|
|
215
|
+
const Q = E, M = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
|
|
190
216
|
"div",
|
|
191
217
|
{
|
|
192
|
-
ref:
|
|
193
|
-
className:
|
|
194
|
-
...
|
|
218
|
+
ref: o,
|
|
219
|
+
className: n("flex flex-col gap-1 px-6 py-4 pr-14", e),
|
|
220
|
+
...t
|
|
195
221
|
}
|
|
196
222
|
));
|
|
197
|
-
|
|
198
|
-
const
|
|
223
|
+
M.displayName = "DrawerHeader";
|
|
224
|
+
const V = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
|
|
199
225
|
"h2",
|
|
200
226
|
{
|
|
201
|
-
ref:
|
|
202
|
-
className:
|
|
203
|
-
...
|
|
227
|
+
ref: o,
|
|
228
|
+
className: n("text-lg font-medium text-foreground", e),
|
|
229
|
+
...t
|
|
204
230
|
}
|
|
205
231
|
));
|
|
206
|
-
|
|
207
|
-
const
|
|
232
|
+
V.displayName = "DrawerTitle";
|
|
233
|
+
const I = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
|
|
208
234
|
"div",
|
|
209
235
|
{
|
|
210
|
-
ref:
|
|
236
|
+
ref: o,
|
|
211
237
|
tabIndex: 0,
|
|
212
|
-
className:
|
|
213
|
-
...
|
|
238
|
+
className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", e),
|
|
239
|
+
...t
|
|
214
240
|
}
|
|
215
241
|
));
|
|
216
|
-
|
|
217
|
-
const
|
|
242
|
+
I.displayName = "DrawerBody";
|
|
243
|
+
const P = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
|
|
218
244
|
"div",
|
|
219
245
|
{
|
|
220
|
-
ref:
|
|
221
|
-
className:
|
|
246
|
+
ref: o,
|
|
247
|
+
className: n(
|
|
222
248
|
"flex items-center justify-end gap-2 px-6 py-4",
|
|
223
|
-
|
|
249
|
+
e
|
|
224
250
|
),
|
|
225
|
-
...
|
|
251
|
+
...t
|
|
226
252
|
}
|
|
227
253
|
));
|
|
228
|
-
|
|
254
|
+
P.displayName = "DrawerFooter";
|
|
229
255
|
export {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
256
|
+
E as Drawer,
|
|
257
|
+
I as DrawerBody,
|
|
258
|
+
P as DrawerFooter,
|
|
259
|
+
M as DrawerHeader,
|
|
260
|
+
V as DrawerTitle,
|
|
261
|
+
J as FloatingDrawer,
|
|
262
|
+
Q as InlineDrawer,
|
|
263
|
+
G as ModalDrawer
|
|
237
264
|
};
|
package/components/dropdown.d.ts
CHANGED
|
@@ -17,11 +17,10 @@ export interface DropdownContentProps extends React.HTMLAttributes<HTMLDivElemen
|
|
|
17
17
|
align?: "start" | "end";
|
|
18
18
|
/** Which side of the trigger the menu opens on. Default below. */
|
|
19
19
|
side?: "top" | "bottom";
|
|
20
|
-
sideOffset?: number;
|
|
21
20
|
/** Opt in to focusing the first item when the menu opens. */
|
|
22
21
|
autoFocusFirstItem?: boolean;
|
|
23
22
|
}
|
|
24
|
-
export declare function DropdownContent({ className, align, side,
|
|
23
|
+
export declare function DropdownContent({ className, align, side, autoFocusFirstItem, children, ...props }: DropdownContentProps): React.ReactPortal;
|
|
25
24
|
export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
26
25
|
startContent?: React.ReactNode;
|
|
27
26
|
danger?: boolean;
|