@neuronection/assistant-ui 0.1.0 → 0.2.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 +15 -4
- package/dist/badge.js +1 -1
- package/dist/button.js +1 -1
- package/dist/check-indicator.d.ts +12 -0
- package/dist/check-indicator.js +3 -0
- package/dist/check-indicator.js.map +1 -0
- package/dist/chunk-3522NABN.js +452 -0
- package/dist/chunk-3522NABN.js.map +1 -0
- package/dist/chunk-4SW3ESVI.js +111 -0
- package/dist/chunk-4SW3ESVI.js.map +1 -0
- package/dist/chunk-BJOY3XL7.js +27 -0
- package/dist/chunk-BJOY3XL7.js.map +1 -0
- package/dist/chunk-BPTGPF3L.js +3 -0
- package/dist/chunk-BPTGPF3L.js.map +1 -0
- package/dist/chunk-DV3MXDLN.js +46 -0
- package/dist/chunk-DV3MXDLN.js.map +1 -0
- package/dist/chunk-ESUTPQDO.js +21 -0
- package/dist/chunk-ESUTPQDO.js.map +1 -0
- package/dist/{chunk-TLTKWLMN.js → chunk-GA3XIDVX.js} +3 -3
- package/dist/{chunk-TLTKWLMN.js.map → chunk-GA3XIDVX.js.map} +1 -1
- package/dist/chunk-GPIN2ITX.js +63 -0
- package/dist/chunk-GPIN2ITX.js.map +1 -0
- package/dist/{chunk-56VRWCLJ.js → chunk-GTXGTQ6F.js} +2 -2
- package/dist/{chunk-56VRWCLJ.js.map → chunk-GTXGTQ6F.js.map} +1 -1
- package/dist/chunk-H5U4KNXF.js +63 -0
- package/dist/chunk-H5U4KNXF.js.map +1 -0
- package/dist/chunk-HSUCCANX.js +44 -0
- package/dist/chunk-HSUCCANX.js.map +1 -0
- package/dist/chunk-KXLMTAZ5.js +109 -0
- package/dist/chunk-KXLMTAZ5.js.map +1 -0
- package/dist/chunk-LEDQQBVV.js +184 -0
- package/dist/chunk-LEDQQBVV.js.map +1 -0
- package/dist/chunk-MXOBOS4Y.js +60 -0
- package/dist/chunk-MXOBOS4Y.js.map +1 -0
- package/dist/chunk-N5KQRHXU.js +107 -0
- package/dist/chunk-N5KQRHXU.js.map +1 -0
- package/dist/chunk-OAR74ML4.js +3 -0
- package/dist/chunk-OAR74ML4.js.map +1 -0
- package/dist/chunk-OUHUVACM.js +45 -0
- package/dist/chunk-OUHUVACM.js.map +1 -0
- package/dist/chunk-PPH3G7AL.js +3 -0
- package/dist/chunk-PPH3G7AL.js.map +1 -0
- package/dist/chunk-RU3DEF2O.js +186 -0
- package/dist/chunk-RU3DEF2O.js.map +1 -0
- package/dist/{chunk-NQQNTK6L.js → chunk-SKTLC2XY.js} +2 -2
- package/dist/{chunk-NQQNTK6L.js.map → chunk-SKTLC2XY.js.map} +1 -1
- package/dist/chunk-WZSAUESL.js +58 -0
- package/dist/chunk-WZSAUESL.js.map +1 -0
- package/dist/chunk-XE4TFW63.js +34 -0
- package/dist/chunk-XE4TFW63.js.map +1 -0
- package/dist/combobox.d.ts +54 -0
- package/dist/combobox.js +3 -0
- package/dist/combobox.js.map +1 -0
- package/dist/confirmation-modal.js +1 -1
- package/dist/context-menu.d.ts +22 -0
- package/dist/context-menu.js +3 -0
- package/dist/context-menu.js.map +1 -0
- package/dist/error-banner.d.ts +10 -0
- package/dist/error-banner.js +3 -0
- package/dist/error-banner.js.map +1 -0
- package/dist/expandable-search.d.ts +16 -0
- package/dist/expandable-search.js +3 -0
- package/dist/expandable-search.js.map +1 -0
- package/dist/field-label.d.ts +13 -0
- package/dist/field-label.js +3 -0
- package/dist/field-label.js.map +1 -0
- package/dist/form-modal.d.ts +23 -0
- package/dist/form-modal.js +3 -0
- package/dist/form-modal.js.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +22 -6
- package/dist/info-button.d.ts +13 -0
- package/dist/info-button.js +3 -0
- package/dist/info-button.js.map +1 -0
- package/dist/marquee.d.ts +39 -0
- package/dist/marquee.js +3 -0
- package/dist/marquee.js.map +1 -0
- package/dist/menu.d.ts +38 -0
- package/dist/menu.js +3 -0
- package/dist/menu.js.map +1 -0
- package/dist/popover-button.d.ts +23 -0
- package/dist/popover-button.js +3 -0
- package/dist/popover-button.js.map +1 -0
- package/dist/search-input.d.ts +15 -0
- package/dist/search-input.js +3 -0
- package/dist/search-input.js.map +1 -0
- package/dist/selection-bar.d.ts +13 -0
- package/dist/selection-bar.js +3 -0
- package/dist/selection-bar.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/undo-notice.d.ts +14 -0
- package/dist/undo-notice.js +3 -0
- package/dist/undo-notice.js.map +1 -0
- package/dist/view-toggle.d.ts +13 -0
- package/dist/view-toggle.js +3 -0
- package/dist/view-toggle.js.map +1 -0
- package/dist/wizard.d.ts +57 -0
- package/dist/wizard.js +3 -0
- package/dist/wizard.js.map +1 -0
- package/package.json +70 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/menu/Menu.tsx"],"names":["MenuContent","MenuItem","MenuSeparator","MenuLabel"],"mappings":"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","file":"chunk-KXLMTAZ5.js","sourcesContent":["import * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { Loader2, type LucideIcon } from 'lucide-react'\nimport { cn } from '../../lib/utils'\n\nexport const Menu = DropdownMenuPrimitive.Root\nexport const MenuTrigger = DropdownMenuPrimitive.Trigger\nexport const MenuGroup = DropdownMenuPrimitive.Group\n\nexport const MenuContent = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(function MenuContent({ className, sideOffset = 6, children, ...props }, ref) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n data-as=\"menu\"\n sideOffset={sideOffset}\n collisionPadding={8}\n className={cn(\n 'as-anim-pop z-50 min-w-40 overflow-hidden rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-1 text-[var(--as-fg)] shadow-[var(--as-shadow-3)]',\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n )\n})\n\nexport interface MenuItemProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n icon?: LucideIcon\n danger?: boolean\n pending?: boolean\n}\n\nexport const MenuItem = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n MenuItemProps\n>(function MenuItem({ className, icon: Icon, danger, pending, disabled, children, ...props }, ref) {\n const SpinnerIcon = pending ? Loader2 : null\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n disabled={disabled || pending}\n aria-busy={pending || undefined}\n className={cn(\n 'flex w-full cursor-pointer select-none items-center gap-2 rounded-[calc(var(--as-radius-sm)-2px)] px-2 py-1.5 text-left text-sm outline-none transition-colors focus:bg-[var(--as-secondary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',\n danger && 'text-[var(--as-danger)] focus:bg-[var(--as-danger)]/10',\n className,\n )}\n {...props}\n >\n {SpinnerIcon ? (\n <SpinnerIcon className=\"animate-spin\" aria-hidden />\n ) : Icon ? (\n <Icon aria-hidden />\n ) : null}\n {children}\n </DropdownMenuPrimitive.Item>\n )\n})\n\nexport const MenuSeparator = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(function MenuSeparator({ className, ...props }, ref) {\n return (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-[var(--as-border)]', className)}\n {...props}\n />\n )\n})\n\nexport const MenuLabel = React.forwardRef<\n React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>\n>(function MenuLabel({ className, ...props }, ref) {\n return (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn('px-2 py-1.5 text-xs font-medium text-[var(--as-muted-fg)]', className)}\n {...props}\n />\n )\n})\n\nexport interface ActionMenuItem {\n key: string\n label: string\n icon?: LucideIcon\n danger?: boolean\n disabled?: boolean\n pending?: boolean\n onSelect: () => void\n}\n\nexport interface ActionMenuProps {\n label: string\n trigger: React.ReactNode\n items: ActionMenuItem[]\n align?: 'start' | 'center' | 'end'\n side?: 'top' | 'right' | 'bottom' | 'left'\n triggerClassName?: string\n panelClassName?: string\n disabled?: boolean\n}\n\nexport function ActionMenu({\n label,\n trigger,\n items,\n align = 'end',\n side = 'bottom',\n triggerClassName,\n panelClassName,\n disabled = false,\n}: ActionMenuProps) {\n return (\n <Menu modal={false}>\n <MenuTrigger\n type=\"button\"\n aria-label={label}\n disabled={disabled}\n className={cn(\n 'inline-flex cursor-pointer items-center justify-center gap-1 rounded-full transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50',\n triggerClassName ?? 'size-9',\n )}\n >\n {trigger}\n </MenuTrigger>\n <MenuContent align={align} side={side} className={cn('w-52 p-1', panelClassName)}>\n <div className=\"flex flex-col\">\n {items.map((item) => (\n <MenuItem\n key={item.key}\n icon={item.icon}\n danger={item.danger}\n disabled={item.disabled}\n pending={item.pending}\n onSelect={() => item.onSelect()}\n >\n {item.label}\n </MenuItem>\n ))}\n </div>\n </MenuContent>\n </Menu>\n )\n}\n"]}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import { Button } from './chunk-GTXGTQ6F.js';
|
|
2
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
5
|
+
import { Sparkles, X } from 'lucide-react';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
function Stepper({
|
|
9
|
+
steps,
|
|
10
|
+
current,
|
|
11
|
+
variant = "dots",
|
|
12
|
+
onStepClick,
|
|
13
|
+
className
|
|
14
|
+
}) {
|
|
15
|
+
if (variant === "dots") {
|
|
16
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), "data-as": "stepper", children: [
|
|
17
|
+
/* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
|
|
18
|
+
"Step ",
|
|
19
|
+
Math.min(current + 1, steps.length),
|
|
20
|
+
" of ",
|
|
21
|
+
steps.length
|
|
22
|
+
] }),
|
|
23
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", "aria-hidden": true, children: steps.map((step, index) => /* @__PURE__ */ jsx(
|
|
24
|
+
"span",
|
|
25
|
+
{
|
|
26
|
+
className: cn(
|
|
27
|
+
"size-2 rounded-full",
|
|
28
|
+
index === current ? "bg-[var(--as-primary)]" : index < current ? "bg-[var(--as-primary)]/50" : "bg-[var(--as-border)]"
|
|
29
|
+
)
|
|
30
|
+
},
|
|
31
|
+
step.id
|
|
32
|
+
)) })
|
|
33
|
+
] });
|
|
34
|
+
}
|
|
35
|
+
return /* @__PURE__ */ jsx("ol", { className: cn("flex items-center gap-1", className), "data-as": "stepper", children: steps.map((step, index) => {
|
|
36
|
+
const Icon = step.icon;
|
|
37
|
+
const state = index < current ? "done" : index === current ? "current" : "todo";
|
|
38
|
+
const disabled = onStepClick === void 0 || state === "current";
|
|
39
|
+
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
|
|
40
|
+
"button",
|
|
41
|
+
{
|
|
42
|
+
type: "button",
|
|
43
|
+
"aria-current": state === "current" ? "step" : void 0,
|
|
44
|
+
disabled,
|
|
45
|
+
onClick: () => onStepClick?.(index),
|
|
46
|
+
className: cn(
|
|
47
|
+
"flex cursor-pointer items-center gap-1.5 rounded-[var(--as-radius)] px-2.5 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)] disabled:cursor-default",
|
|
48
|
+
state === "current" && "bg-[var(--as-primary)]/10 font-medium text-[var(--as-primary)]",
|
|
49
|
+
state === "done" && "text-[var(--as-fg)] hover:bg-[var(--as-secondary)]",
|
|
50
|
+
state === "todo" && "text-[var(--as-muted-fg)] hover:bg-[var(--as-secondary)]"
|
|
51
|
+
),
|
|
52
|
+
children: [
|
|
53
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) : null,
|
|
54
|
+
step.label
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
) }, step.id);
|
|
58
|
+
}) });
|
|
59
|
+
}
|
|
60
|
+
function Wizard({
|
|
61
|
+
open,
|
|
62
|
+
onOpenChange,
|
|
63
|
+
title,
|
|
64
|
+
steps,
|
|
65
|
+
renderStep,
|
|
66
|
+
initialStep = 0,
|
|
67
|
+
step: stepProp,
|
|
68
|
+
onStepChange,
|
|
69
|
+
onSkip,
|
|
70
|
+
skipLabel = "Skip",
|
|
71
|
+
backLabel = "Back",
|
|
72
|
+
nextLabel = "Next",
|
|
73
|
+
getStartedLabel = "Get started",
|
|
74
|
+
closeLabel = "Close",
|
|
75
|
+
variant = "modal",
|
|
76
|
+
size = "lg",
|
|
77
|
+
contentClassName
|
|
78
|
+
}) {
|
|
79
|
+
const [internalStep, setInternalStep] = React.useState(initialStep);
|
|
80
|
+
const isControlled = stepProp !== void 0;
|
|
81
|
+
const step = isControlled ? stepProp : internalStep;
|
|
82
|
+
const lastStep = Math.max(steps.length - 1, 0);
|
|
83
|
+
const clamped = Math.min(Math.max(step, 0), lastStep);
|
|
84
|
+
const current = steps[clamped];
|
|
85
|
+
const StepIcon = current?.icon ?? Sparkles;
|
|
86
|
+
React.useEffect(() => {
|
|
87
|
+
if (!open && !isControlled) {
|
|
88
|
+
setInternalStep(initialStep);
|
|
89
|
+
}
|
|
90
|
+
}, [open, isControlled, initialStep]);
|
|
91
|
+
const goTo = React.useCallback(
|
|
92
|
+
(index) => {
|
|
93
|
+
const next = Math.min(Math.max(index, 0), lastStep);
|
|
94
|
+
if (!isControlled) {
|
|
95
|
+
setInternalStep(next);
|
|
96
|
+
}
|
|
97
|
+
onStepChange?.(next);
|
|
98
|
+
},
|
|
99
|
+
[isControlled, lastStep, onStepChange]
|
|
100
|
+
);
|
|
101
|
+
const ctx = {
|
|
102
|
+
id: current?.id ?? "",
|
|
103
|
+
index: clamped,
|
|
104
|
+
step: current ?? { id: "empty" },
|
|
105
|
+
isFirst: clamped === 0,
|
|
106
|
+
isLast: clamped === lastStep,
|
|
107
|
+
next: () => goTo(clamped + 1),
|
|
108
|
+
back: () => goTo(clamped - 1),
|
|
109
|
+
goTo
|
|
110
|
+
};
|
|
111
|
+
const skip = onSkip ?? (() => onOpenChange(false));
|
|
112
|
+
const showFooter = !(current?.hideFooter ?? clamped === lastStep);
|
|
113
|
+
const canContinue = current?.canContinue !== false;
|
|
114
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
DialogPrimitive.Overlay,
|
|
117
|
+
{
|
|
118
|
+
"data-as": "wizard-overlay",
|
|
119
|
+
className: "as-anim-fade fixed inset-0 z-50 bg-[var(--as-overlay)]"
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
/* @__PURE__ */ jsxs(
|
|
123
|
+
DialogPrimitive.Content,
|
|
124
|
+
{
|
|
125
|
+
"data-as": "wizard",
|
|
126
|
+
"aria-describedby": void 0,
|
|
127
|
+
className: cn(
|
|
128
|
+
"flex flex-col overflow-hidden border border-[var(--as-border)] bg-[var(--as-surface-raised)] text-[var(--as-fg)] shadow-[var(--as-shadow-3)] focus:outline-none",
|
|
129
|
+
variant === "drawer" ? "as-anim-drawer fixed inset-y-0 right-0 z-50 h-full w-4/5 max-w-md border-l" : "as-anim-modal fixed left-1/2 top-1/2 z-50 max-h-[92vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--as-radius-lg)]",
|
|
130
|
+
variant === "modal" && cn(
|
|
131
|
+
size === "sm" && "max-w-sm",
|
|
132
|
+
size === "md" && "max-w-md",
|
|
133
|
+
size === "lg" && "max-w-2xl",
|
|
134
|
+
size === "xl" && "max-w-4xl"
|
|
135
|
+
),
|
|
136
|
+
contentClassName
|
|
137
|
+
),
|
|
138
|
+
children: [
|
|
139
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-[var(--as-border)] px-5 py-4", children: [
|
|
140
|
+
/* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-[var(--as-radius)] bg-[var(--as-primary)]/10 text-[var(--as-primary)]", children: /* @__PURE__ */ jsx(StepIcon, { className: "size-5", "aria-hidden": true }) }),
|
|
141
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
142
|
+
/* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "truncate text-sm font-semibold", children: title }),
|
|
143
|
+
current?.subtitle !== void 0 ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--as-muted-fg)]", children: current.subtitle }) : null
|
|
144
|
+
] }),
|
|
145
|
+
/* @__PURE__ */ jsx(Stepper, { steps, current: clamped, variant: "dots" }),
|
|
146
|
+
/* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
147
|
+
Button,
|
|
148
|
+
{
|
|
149
|
+
variant: "ghost",
|
|
150
|
+
size: "icon",
|
|
151
|
+
title: closeLabel,
|
|
152
|
+
"aria-label": closeLabel,
|
|
153
|
+
onClick: skip,
|
|
154
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true })
|
|
155
|
+
}
|
|
156
|
+
) })
|
|
157
|
+
] }),
|
|
158
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-4", "data-as": "wizard-body", children: [
|
|
159
|
+
current?.title !== void 0 ? /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold", children: current.title }) : null,
|
|
160
|
+
open ? renderStep(ctx) : null
|
|
161
|
+
] }),
|
|
162
|
+
showFooter ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-[var(--as-border)] px-5 py-3", children: [
|
|
163
|
+
/* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled: clamped === 0, onClick: ctx.back, children: backLabel }),
|
|
164
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1" }),
|
|
165
|
+
skipLabel !== null ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: skip, children: skipLabel }) : null,
|
|
166
|
+
/* @__PURE__ */ jsx(
|
|
167
|
+
Button,
|
|
168
|
+
{
|
|
169
|
+
size: "sm",
|
|
170
|
+
disabled: !canContinue,
|
|
171
|
+
onClick: ctx.next,
|
|
172
|
+
children: clamped === 0 ? getStartedLabel : current?.nextLabel ?? nextLabel
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
] }) : null
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
)
|
|
179
|
+
] }) });
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
export { Stepper, Wizard };
|
|
183
|
+
//# sourceMappingURL=chunk-LEDQQBVV.js.map
|
|
184
|
+
//# sourceMappingURL=chunk-LEDQQBVV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/wizard/Wizard.tsx"],"names":[],"mappings":"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","file":"chunk-LEDQQBVV.js","sourcesContent":["import * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Sparkles, X, type LucideIcon } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../button/Button'\n\nexport interface StepperStep {\n id: string\n label?: React.ReactNode\n icon?: LucideIcon\n}\n\nexport interface StepperProps {\n steps: StepperStep[]\n current: number\n variant?: 'dots' | 'labels'\n onStepClick?: (index: number) => void\n className?: string\n}\n\nexport function Stepper({\n steps,\n current,\n variant = 'dots',\n onStepClick,\n className,\n}: StepperProps) {\n if (variant === 'dots') {\n return (\n <div className={cn('flex items-center gap-1.5', className)} data-as=\"stepper\">\n <span className=\"sr-only\">\n Step {Math.min(current + 1, steps.length)} of {steps.length}\n </span>\n <div className=\"flex items-center gap-1.5\" aria-hidden>\n {steps.map((step, index) => (\n <span\n key={step.id}\n className={cn(\n 'size-2 rounded-full',\n index === current\n ? 'bg-[var(--as-primary)]'\n : index < current\n ? 'bg-[var(--as-primary)]/50'\n : 'bg-[var(--as-border)]',\n )}\n />\n ))}\n </div>\n </div>\n )\n }\n return (\n <ol className={cn('flex items-center gap-1', className)} data-as=\"stepper\">\n {steps.map((step, index) => {\n const Icon = step.icon\n const state = index < current ? 'done' : index === current ? 'current' : 'todo'\n const disabled = onStepClick === undefined || state === 'current'\n return (\n <li key={step.id}>\n <button\n type=\"button\"\n aria-current={state === 'current' ? 'step' : undefined}\n disabled={disabled}\n onClick={() => onStepClick?.(index)}\n className={cn(\n 'flex cursor-pointer items-center gap-1.5 rounded-[var(--as-radius)] px-2.5 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)] disabled:cursor-default',\n state === 'current' && 'bg-[var(--as-primary)]/10 font-medium text-[var(--as-primary)]',\n state === 'done' && 'text-[var(--as-fg)] hover:bg-[var(--as-secondary)]',\n state === 'todo' && 'text-[var(--as-muted-fg)] hover:bg-[var(--as-secondary)]',\n )}\n >\n {Icon ? <Icon className=\"size-4\" aria-hidden /> : null}\n {step.label}\n </button>\n </li>\n )\n })}\n </ol>\n )\n}\n\nexport interface WizardStep {\n id: string\n icon?: LucideIcon\n title?: React.ReactNode\n subtitle?: React.ReactNode\n canContinue?: boolean\n nextLabel?: string\n hideFooter?: boolean\n}\n\nexport interface WizardContext {\n id: string\n index: number\n step: WizardStep\n isFirst: boolean\n isLast: boolean\n next: () => void\n back: () => void\n goTo: (index: number) => void\n}\n\nexport interface WizardProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n title: React.ReactNode\n steps: WizardStep[]\n renderStep: (ctx: WizardContext) => React.ReactNode\n initialStep?: number\n step?: number\n onStepChange?: (index: number) => void\n onSkip?: () => void\n skipLabel?: string | null\n backLabel?: string\n nextLabel?: string\n getStartedLabel?: string\n closeLabel?: string\n variant?: 'modal' | 'drawer'\n size?: 'sm' | 'md' | 'lg' | 'xl'\n contentClassName?: string\n}\n\nexport function Wizard({\n open,\n onOpenChange,\n title,\n steps,\n renderStep,\n initialStep = 0,\n step: stepProp,\n onStepChange,\n onSkip,\n skipLabel = 'Skip',\n backLabel = 'Back',\n nextLabel = 'Next',\n getStartedLabel = 'Get started',\n closeLabel = 'Close',\n variant = 'modal',\n size = 'lg',\n contentClassName,\n}: WizardProps) {\n const [internalStep, setInternalStep] = React.useState(initialStep)\n const isControlled = stepProp !== undefined\n const step = isControlled ? stepProp : internalStep\n const lastStep = Math.max(steps.length - 1, 0)\n const clamped = Math.min(Math.max(step, 0), lastStep)\n const current: WizardStep | undefined = steps[clamped]\n const StepIcon = current?.icon ?? Sparkles\n\n React.useEffect(() => {\n if (!open && !isControlled) {\n setInternalStep(initialStep)\n }\n }, [open, isControlled, initialStep])\n\n const goTo = React.useCallback(\n (index: number) => {\n const next = Math.min(Math.max(index, 0), lastStep)\n if (!isControlled) {\n setInternalStep(next)\n }\n onStepChange?.(next)\n },\n [isControlled, lastStep, onStepChange],\n )\n\n const ctx: WizardContext = {\n id: current?.id ?? '',\n index: clamped,\n step: current ?? { id: 'empty' },\n isFirst: clamped === 0,\n isLast: clamped === lastStep,\n next: () => goTo(clamped + 1),\n back: () => goTo(clamped - 1),\n goTo,\n }\n\n const skip = onSkip ?? (() => onOpenChange(false))\n const showFooter = !(current?.hideFooter ?? clamped === lastStep)\n const canContinue = current?.canContinue !== false\n\n return (\n <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n data-as=\"wizard-overlay\"\n className=\"as-anim-fade fixed inset-0 z-50 bg-[var(--as-overlay)]\"\n />\n <DialogPrimitive.Content\n data-as=\"wizard\"\n aria-describedby={undefined}\n className={cn(\n 'flex flex-col overflow-hidden border border-[var(--as-border)] bg-[var(--as-surface-raised)] text-[var(--as-fg)] shadow-[var(--as-shadow-3)] focus:outline-none',\n variant === 'drawer'\n ? 'as-anim-drawer fixed inset-y-0 right-0 z-50 h-full w-4/5 max-w-md border-l'\n : 'as-anim-modal fixed left-1/2 top-1/2 z-50 max-h-[92vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--as-radius-lg)]',\n variant === 'modal' &&\n cn(\n size === 'sm' && 'max-w-sm',\n size === 'md' && 'max-w-md',\n size === 'lg' && 'max-w-2xl',\n size === 'xl' && 'max-w-4xl',\n ),\n contentClassName,\n )}\n >\n <div className=\"flex items-center gap-3 border-b border-[var(--as-border)] px-5 py-4\">\n <span className=\"flex size-9 shrink-0 items-center justify-center rounded-[var(--as-radius)] bg-[var(--as-primary)]/10 text-[var(--as-primary)]\">\n <StepIcon className=\"size-5\" aria-hidden />\n </span>\n <div className=\"min-w-0 flex-1\">\n <DialogPrimitive.Title className=\"truncate text-sm font-semibold\">\n {title}\n </DialogPrimitive.Title>\n {current?.subtitle !== undefined ? (\n <p className=\"truncate text-xs text-[var(--as-muted-fg)]\">\n {current.subtitle}\n </p>\n ) : null}\n </div>\n <Stepper steps={steps} current={clamped} variant=\"dots\" />\n <DialogPrimitive.Close asChild>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n title={closeLabel}\n aria-label={closeLabel}\n onClick={skip}\n >\n <X className=\"size-4\" aria-hidden />\n </Button>\n </DialogPrimitive.Close>\n </div>\n <div className=\"flex-1 overflow-y-auto px-5 py-4\" data-as=\"wizard-body\">\n {current?.title !== undefined ? (\n <h2 className=\"mb-3 text-lg font-semibold\">{current.title}</h2>\n ) : null}\n {open ? renderStep(ctx) : null}\n </div>\n {showFooter ? (\n <div className=\"flex items-center gap-2 border-t border-[var(--as-border)] px-5 py-3\">\n <Button variant=\"ghost\" size=\"sm\" disabled={clamped === 0} onClick={ctx.back}>\n {backLabel}\n </Button>\n <div className=\"flex-1\" />\n {skipLabel !== null ? (\n <Button variant=\"ghost\" size=\"sm\" onClick={skip}>\n {skipLabel}\n </Button>\n ) : null}\n <Button\n size=\"sm\"\n disabled={!canContinue}\n onClick={ctx.next}\n >\n {clamped === 0 ? getStartedLabel : (current?.nextLabel ?? nextLabel)}\n </Button>\n </div>\n ) : null}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n )\n}\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
2
|
+
import { LayoutGrid, List } from 'lucide-react';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function ViewToggle({
|
|
6
|
+
view,
|
|
7
|
+
onChange,
|
|
8
|
+
gridLabel = "Grid view",
|
|
9
|
+
listLabel = "List view",
|
|
10
|
+
className
|
|
11
|
+
}) {
|
|
12
|
+
const base = "cursor-pointer rounded-[calc(var(--as-radius)-2px)] p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--as-focus-ring)]";
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
"div",
|
|
15
|
+
{
|
|
16
|
+
"data-as": "view-toggle",
|
|
17
|
+
role: "group",
|
|
18
|
+
className: cn(
|
|
19
|
+
"flex overflow-hidden rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)]",
|
|
20
|
+
className
|
|
21
|
+
),
|
|
22
|
+
children: [
|
|
23
|
+
/* @__PURE__ */ jsx(
|
|
24
|
+
"button",
|
|
25
|
+
{
|
|
26
|
+
type: "button",
|
|
27
|
+
title: gridLabel,
|
|
28
|
+
"aria-label": gridLabel,
|
|
29
|
+
"aria-pressed": view === "grid",
|
|
30
|
+
className: cn(
|
|
31
|
+
base,
|
|
32
|
+
view === "grid" ? "bg-[var(--as-secondary)] text-[var(--as-fg)]" : "text-[var(--as-muted-fg)]"
|
|
33
|
+
),
|
|
34
|
+
onClick: () => onChange("grid"),
|
|
35
|
+
children: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4", "aria-hidden": true })
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
"button",
|
|
40
|
+
{
|
|
41
|
+
type: "button",
|
|
42
|
+
title: listLabel,
|
|
43
|
+
"aria-label": listLabel,
|
|
44
|
+
"aria-pressed": view === "list",
|
|
45
|
+
className: cn(
|
|
46
|
+
base,
|
|
47
|
+
view === "list" ? "bg-[var(--as-secondary)] text-[var(--as-fg)]" : "text-[var(--as-muted-fg)]"
|
|
48
|
+
),
|
|
49
|
+
onClick: () => onChange("list"),
|
|
50
|
+
children: /* @__PURE__ */ jsx(List, { className: "size-4", "aria-hidden": true })
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export { ViewToggle };
|
|
59
|
+
//# sourceMappingURL=chunk-MXOBOS4Y.js.map
|
|
60
|
+
//# sourceMappingURL=chunk-MXOBOS4Y.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/view-toggle/ViewToggle.tsx"],"names":[],"mappings":";;;;AAcO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,WAAA;AAAA,EACZ,SAAA,GAAY,WAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,IAAA,GACJ,sLAAA;AACF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAQ,aAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAO,SAAA;AAAA,YACP,YAAA,EAAY,SAAA;AAAA,YACZ,gBAAc,IAAA,KAAS,MAAA;AAAA,YACvB,SAAA,EAAW,EAAA;AAAA,cACT,IAAA;AAAA,cACA,IAAA,KAAS,SACL,8CAAA,GACA;AAAA,aACN;AAAA,YACA,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,YAE9B,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA,SAC7C;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAO,SAAA;AAAA,YACP,YAAA,EAAY,SAAA;AAAA,YACZ,gBAAc,IAAA,KAAS,MAAA;AAAA,YACvB,SAAA,EAAW,EAAA;AAAA,cACT,IAAA;AAAA,cACA,IAAA,KAAS,SACL,8CAAA,GACA;AAAA,aACN;AAAA,YACA,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,YAE9B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AACvC;AAAA;AAAA,GACF;AAEJ","file":"chunk-MXOBOS4Y.js","sourcesContent":["import * as React from 'react'\nimport { LayoutGrid, List } from 'lucide-react'\nimport { cn } from '../../lib/utils'\n\nexport type ViewToggleView = 'grid' | 'list'\n\nexport interface ViewToggleProps {\n view: ViewToggleView\n onChange: (view: ViewToggleView) => void\n gridLabel?: string\n listLabel?: string\n className?: string\n}\n\nexport function ViewToggle({\n view,\n onChange,\n gridLabel = 'Grid view',\n listLabel = 'List view',\n className,\n}: ViewToggleProps) {\n const base =\n 'cursor-pointer rounded-[calc(var(--as-radius)-2px)] p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--as-focus-ring)]'\n return (\n <div\n data-as=\"view-toggle\"\n role=\"group\"\n className={cn(\n 'flex overflow-hidden rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)]',\n className,\n )}\n >\n <button\n type=\"button\"\n title={gridLabel}\n aria-label={gridLabel}\n aria-pressed={view === 'grid'}\n className={cn(\n base,\n view === 'grid'\n ? 'bg-[var(--as-secondary)] text-[var(--as-fg)]'\n : 'text-[var(--as-muted-fg)]',\n )}\n onClick={() => onChange('grid')}\n >\n <LayoutGrid className=\"size-4\" aria-hidden />\n </button>\n <button\n type=\"button\"\n title={listLabel}\n aria-label={listLabel}\n aria-pressed={view === 'list'}\n className={cn(\n base,\n view === 'list'\n ? 'bg-[var(--as-secondary)] text-[var(--as-fg)]'\n : 'text-[var(--as-muted-fg)]',\n )}\n onClick={() => onChange('list')}\n >\n <List className=\"size-4\" aria-hidden />\n </button>\n </div>\n )\n}\n"]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function PopoverButton({
|
|
7
|
+
trigger,
|
|
8
|
+
children,
|
|
9
|
+
label,
|
|
10
|
+
align = "end",
|
|
11
|
+
side = "bottom",
|
|
12
|
+
sideOffset = 8,
|
|
13
|
+
panelClassName,
|
|
14
|
+
triggerClassName,
|
|
15
|
+
openOnHover = false,
|
|
16
|
+
focusOnOpen = true,
|
|
17
|
+
preserveFocus = false,
|
|
18
|
+
closeSignal = 0,
|
|
19
|
+
open: openProp,
|
|
20
|
+
defaultOpen = false,
|
|
21
|
+
onOpenChange,
|
|
22
|
+
disabled = false
|
|
23
|
+
}) {
|
|
24
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
|
|
25
|
+
const isControlled = openProp !== void 0;
|
|
26
|
+
const open = isControlled ? openProp : uncontrolledOpen;
|
|
27
|
+
const contentRef = React.useRef(null);
|
|
28
|
+
const setOpen = React.useCallback(
|
|
29
|
+
(next) => {
|
|
30
|
+
if (!isControlled) {
|
|
31
|
+
setUncontrolledOpen(next);
|
|
32
|
+
}
|
|
33
|
+
onOpenChange?.(next);
|
|
34
|
+
},
|
|
35
|
+
[isControlled, onOpenChange]
|
|
36
|
+
);
|
|
37
|
+
React.useEffect(() => {
|
|
38
|
+
if (closeSignal > 0) {
|
|
39
|
+
setOpen(false);
|
|
40
|
+
}
|
|
41
|
+
}, [closeSignal, setOpen]);
|
|
42
|
+
const content = typeof children === "function" ? open ? children() : null : children;
|
|
43
|
+
const hoverProps = openOnHover ? {
|
|
44
|
+
onMouseEnter: () => setOpen(true),
|
|
45
|
+
onMouseLeave: (event) => {
|
|
46
|
+
const related = event.relatedTarget;
|
|
47
|
+
if (related instanceof Node && contentRef.current?.contains(related) === true) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
setOpen(false);
|
|
51
|
+
}
|
|
52
|
+
} : {};
|
|
53
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", "data-as": "popover-button", ...hoverProps, children: [
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
PopoverPrimitive.Trigger,
|
|
56
|
+
{
|
|
57
|
+
type: "button",
|
|
58
|
+
"aria-label": label,
|
|
59
|
+
disabled,
|
|
60
|
+
className: cn(
|
|
61
|
+
"inline-flex items-center justify-center gap-1 rounded-full transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
|
|
62
|
+
triggerClassName ?? "size-9"
|
|
63
|
+
),
|
|
64
|
+
onMouseDown: preserveFocus ? (event) => event.preventDefault() : void 0,
|
|
65
|
+
onClick: openOnHover ? (event) => {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
setOpen(true);
|
|
68
|
+
} : void 0,
|
|
69
|
+
children: trigger
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
73
|
+
PopoverPrimitive.Content,
|
|
74
|
+
{
|
|
75
|
+
ref: contentRef,
|
|
76
|
+
role: "dialog",
|
|
77
|
+
"aria-label": label,
|
|
78
|
+
align,
|
|
79
|
+
side,
|
|
80
|
+
sideOffset,
|
|
81
|
+
collisionPadding: 8,
|
|
82
|
+
onOpenAutoFocus: (event) => {
|
|
83
|
+
if (!focusOnOpen) {
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
onMouseLeave: openOnHover ? (event) => {
|
|
88
|
+
const related = event.relatedTarget;
|
|
89
|
+
const insideTrigger = related instanceof Element && related.closest('[data-as="popover-button"]') !== null;
|
|
90
|
+
const insideContent = related instanceof Node && contentRef.current?.contains(related) === true;
|
|
91
|
+
if (!insideTrigger && !insideContent) {
|
|
92
|
+
setOpen(false);
|
|
93
|
+
}
|
|
94
|
+
} : void 0,
|
|
95
|
+
className: cn(
|
|
96
|
+
"as-anim-pop z-50 w-80 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-3 text-[var(--as-fg)] shadow-[var(--as-shadow-3)] outline-none",
|
|
97
|
+
panelClassName
|
|
98
|
+
),
|
|
99
|
+
children: content
|
|
100
|
+
}
|
|
101
|
+
) })
|
|
102
|
+
] }) });
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export { PopoverButton };
|
|
106
|
+
//# sourceMappingURL=chunk-N5KQRHXU.js.map
|
|
107
|
+
//# sourceMappingURL=chunk-N5KQRHXU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/popover-button/PopoverButton.tsx"],"names":[],"mappings":"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","file":"chunk-N5KQRHXU.js","sourcesContent":["import * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cn } from '../../lib/utils'\n\nexport interface PopoverButtonProps {\n trigger: React.ReactNode\n children: React.ReactNode | (() => React.ReactNode)\n label: string\n align?: 'start' | 'center' | 'end'\n side?: 'top' | 'right' | 'bottom' | 'left'\n sideOffset?: number\n panelClassName?: string\n triggerClassName?: string\n openOnHover?: boolean\n focusOnOpen?: boolean\n preserveFocus?: boolean\n closeSignal?: number\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n disabled?: boolean\n}\n\nexport function PopoverButton({\n trigger,\n children,\n label,\n align = 'end',\n side = 'bottom',\n sideOffset = 8,\n panelClassName,\n triggerClassName,\n openOnHover = false,\n focusOnOpen = true,\n preserveFocus = false,\n closeSignal = 0,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disabled = false,\n}: PopoverButtonProps) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : uncontrolledOpen\n const contentRef = React.useRef<HTMLDivElement | null>(null)\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (!isControlled) {\n setUncontrolledOpen(next)\n }\n onOpenChange?.(next)\n },\n [isControlled, onOpenChange],\n )\n\n React.useEffect(() => {\n if (closeSignal > 0) {\n setOpen(false)\n }\n }, [closeSignal, setOpen])\n\n const content =\n typeof children === 'function' ? (open ? children() : null) : children\n\n const hoverProps = openOnHover\n ? {\n onMouseEnter: () => setOpen(true),\n onMouseLeave: (event: React.MouseEvent) => {\n const related = event.relatedTarget\n if (related instanceof Node && contentRef.current?.contains(related) === true) {\n return\n }\n setOpen(false)\n },\n }\n : {}\n\n return (\n <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n <span className=\"relative inline-flex\" data-as=\"popover-button\" {...hoverProps}>\n <PopoverPrimitive.Trigger\n type=\"button\"\n aria-label={label}\n disabled={disabled}\n className={cn(\n 'inline-flex items-center justify-center gap-1 rounded-full transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50',\n triggerClassName ?? 'size-9',\n )}\n onMouseDown={preserveFocus ? (event) => event.preventDefault() : undefined}\n onClick={\n openOnHover\n ? (event) => {\n event.preventDefault()\n setOpen(true)\n }\n : undefined\n }\n >\n {trigger}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={contentRef}\n role=\"dialog\"\n aria-label={label}\n align={align}\n side={side}\n sideOffset={sideOffset}\n collisionPadding={8}\n onOpenAutoFocus={(event) => {\n if (!focusOnOpen) {\n event.preventDefault()\n }\n }}\n onMouseLeave={\n openOnHover\n ? (event) => {\n const related = event.relatedTarget\n const insideTrigger =\n related instanceof Element &&\n related.closest('[data-as=\"popover-button\"]') !== null\n const insideContent =\n related instanceof Node && contentRef.current?.contains(related) === true\n if (!insideTrigger && !insideContent) {\n setOpen(false)\n }\n }\n : undefined\n }\n className={cn(\n 'as-anim-pop z-50 w-80 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-3 text-[var(--as-fg)] shadow-[var(--as-shadow-3)] outline-none',\n panelClassName,\n )}\n >\n {content}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </span>\n </PopoverPrimitive.Root>\n )\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-OAR74ML4.js"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { Button } from './chunk-GTXGTQ6F.js';
|
|
2
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { History } from 'lucide-react';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function UndoNotice({
|
|
8
|
+
message = "Item deleted",
|
|
9
|
+
actionLabel = "Undo",
|
|
10
|
+
onUndo,
|
|
11
|
+
undoing = false,
|
|
12
|
+
duration = 8e3,
|
|
13
|
+
onDismiss,
|
|
14
|
+
className
|
|
15
|
+
}) {
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
if (duration <= 0) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
const timer = window.setTimeout(onDismiss, duration);
|
|
21
|
+
return () => window.clearTimeout(timer);
|
|
22
|
+
}, [duration, onDismiss]);
|
|
23
|
+
return /* @__PURE__ */ jsxs(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
"data-as": "undo-notice",
|
|
27
|
+
role: "status",
|
|
28
|
+
className: cn(
|
|
29
|
+
"flex items-center justify-between gap-2 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-secondary)] px-3 py-1.5 text-xs text-[var(--as-fg)]",
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
|
|
34
|
+
/* @__PURE__ */ jsx(History, { className: "size-3.5", "aria-hidden": true }),
|
|
35
|
+
message
|
|
36
|
+
] }),
|
|
37
|
+
/* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: undoing, loading: undoing, onClick: () => onUndo(), children: actionLabel })
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { UndoNotice };
|
|
44
|
+
//# sourceMappingURL=chunk-OUHUVACM.js.map
|
|
45
|
+
//# sourceMappingURL=chunk-OUHUVACM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/undo-notice/UndoNotice.tsx"],"names":[],"mappings":";;;;;;AAeO,SAAS,UAAA,CAAW;AAAA,EACzB,OAAA,GAAU,cAAA;AAAA,EACV,WAAA,GAAc,MAAA;AAAA,EACd,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,GAAA;AAAA,EACX,SAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,YAAY,CAAA,EAAG;AACjB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,UAAA,CAAW,SAAA,EAAW,QAAQ,CAAA;AACnD,IAAA,OAAO,MAAM,MAAA,CAAO,YAAA,CAAa,KAAK,CAAA;AAAA,EACxC,CAAA,EAAG,CAAC,QAAA,EAAU,SAAS,CAAC,CAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAQ,aAAA;AAAA,MACR,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,sKAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,2BAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,UAAA,EAAW,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,UACzC;AAAA,SAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,MAAK,IAAA,EAAK,QAAA,EAAU,OAAA,EAAS,OAAA,EAAS,OAAA,EAAS,OAAA,EAAS,MAAM,MAAA,IACrF,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-OUHUVACM.js","sourcesContent":["import * as React from 'react'\nimport { History } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../button/Button'\n\nexport interface UndoNoticeProps {\n message?: string\n actionLabel?: string\n onUndo: () => void\n undoing?: boolean\n duration?: number\n onDismiss: () => void\n className?: string\n}\n\nexport function UndoNotice({\n message = 'Item deleted',\n actionLabel = 'Undo',\n onUndo,\n undoing = false,\n duration = 8000,\n onDismiss,\n className,\n}: UndoNoticeProps) {\n React.useEffect(() => {\n if (duration <= 0) {\n return\n }\n const timer = window.setTimeout(onDismiss, duration)\n return () => window.clearTimeout(timer)\n }, [duration, onDismiss])\n\n return (\n <div\n data-as=\"undo-notice\"\n role=\"status\"\n className={cn(\n 'flex items-center justify-between gap-2 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-secondary)] px-3 py-1.5 text-xs text-[var(--as-fg)]',\n className,\n )}\n >\n <span className=\"flex items-center gap-1.5\">\n <History className=\"size-3.5\" aria-hidden />\n {message}\n </span>\n <Button variant=\"outline\" size=\"sm\" disabled={undoing} loading={undoing} onClick={() => onUndo()}>\n {actionLabel}\n </Button>\n </div>\n )\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PPH3G7AL.js"}
|