@photon-ai/pho-ui 1.4.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js +11 -0
- package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js.map +1 -0
- package/dist/chunks/IconArrowUpRight-DGgKzQwV.js +14 -0
- package/dist/chunks/IconArrowUpRight-DGgKzQwV.js.map +1 -0
- package/dist/chunks/IconChevronLeft-CSWMKQ4C.js +11 -0
- package/dist/chunks/IconChevronLeft-CSWMKQ4C.js.map +1 -0
- package/dist/chunks/IconInfoCircle-L0zfhg7R.js +21 -0
- package/dist/chunks/IconInfoCircle-L0zfhg7R.js.map +1 -0
- package/dist/chunks/animated-height-DhNSac85.js +50 -0
- package/dist/chunks/animated-height-DhNSac85.js.map +1 -0
- package/dist/chunks/basic-page-D1zm81YS.js +481 -0
- package/dist/chunks/basic-page-D1zm81YS.js.map +1 -0
- package/dist/chunks/{close-button-B8gF5UNk.js → button-X5wsWvRa.js} +127 -147
- package/dist/chunks/button-X5wsWvRa.js.map +1 -0
- package/dist/chunks/close-button-xadxp0j8.js +29 -0
- package/dist/chunks/close-button-xadxp0j8.js.map +1 -0
- package/dist/chunks/combobox-rLdS6fl-.js +117 -0
- package/dist/chunks/combobox-rLdS6fl-.js.map +1 -0
- package/dist/chunks/dialog-Caze1vkf.js +252 -0
- package/dist/chunks/dialog-Caze1vkf.js.map +1 -0
- package/dist/chunks/error-DR6G2LmG.js +251 -0
- package/dist/chunks/error-DR6G2LmG.js.map +1 -0
- package/dist/chunks/{input-CxS7ndpb.js → input-D3XQcC4J.js} +29 -31
- package/dist/chunks/input-D3XQcC4J.js.map +1 -0
- package/dist/chunks/{menu-BSXds3Rt.js → menu-BC-9IP29.js} +39 -39
- package/dist/chunks/menu-BC-9IP29.js.map +1 -0
- package/dist/chunks/popover-EL1SE1kj.js +46 -0
- package/dist/chunks/popover-EL1SE1kj.js.map +1 -0
- package/dist/chunks/{sidebar-DGpEKxOn.js → sidebar-DDJC1MeD.js} +72 -64
- package/dist/chunks/sidebar-DDJC1MeD.js.map +1 -0
- package/dist/components/button.js +13 -12
- package/dist/components/combobox.js +2 -114
- package/dist/components/command.js +242 -0
- package/dist/components/command.js.map +1 -0
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/error.js +13 -0
- package/dist/components/input.js +1 -1
- package/dist/components/menu.js +1 -1
- package/dist/components/notification.js +27 -39
- package/dist/components/notification.js.map +1 -1
- package/dist/components/phone-input.js +17001 -0
- package/dist/components/phone-input.js.map +1 -0
- package/dist/components/popover.js +2 -43
- package/dist/components/toast.js.map +1 -1
- package/dist/index.js +62 -50
- package/dist/primitives.js +1 -1
- package/dist/sections/basic-page.js +1 -1
- package/dist/sections/sidebar.js +1 -1
- package/dist/src/components/command/command.d.ts +114 -0
- package/dist/src/components/command/index.d.ts +1 -0
- package/dist/src/components/dialog/dialog.d.ts +89 -1
- package/dist/src/components/drawer/drawer.d.ts +2 -2
- package/dist/src/components/error/error.d.ts +56 -0
- package/dist/src/components/error/index.d.ts +2 -0
- package/dist/src/components/error/problem.d.ts +80 -0
- package/dist/src/components/notification/notification.d.ts +1 -1
- package/dist/src/components/phone-input/country-alpha3.d.ts +250 -0
- package/dist/src/components/phone-input/country-search.d.ts +8 -0
- package/dist/src/components/phone-input/index.d.ts +1 -0
- package/dist/src/components/phone-input/phone-input.d.ts +47 -0
- package/dist/src/components/toast/toast.d.ts +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/sections/basic-page/basic-page.d.ts +165 -45
- package/dist/src/sections/sidebar/sidebar.d.ts +8 -3
- package/dist/src/utils/animated-height.d.ts +13 -0
- package/package.json +16 -5
- package/src/styles/theme.css +27 -0
- package/dist/chunks/basic-page-4_GZOvRr.js +0 -255
- package/dist/chunks/basic-page-4_GZOvRr.js.map +0 -1
- package/dist/chunks/close-button-B8gF5UNk.js.map +0 -1
- package/dist/chunks/dialog-Ba0UUE5g.js +0 -155
- package/dist/chunks/dialog-Ba0UUE5g.js.map +0 -1
- package/dist/chunks/input-CxS7ndpb.js.map +0 -1
- package/dist/chunks/menu-BSXds3Rt.js.map +0 -1
- package/dist/chunks/sidebar-DGpEKxOn.js.map +0 -1
- package/dist/components/alert-dialog.js +0 -59
- package/dist/components/alert-dialog.js.map +0 -1
- package/dist/components/combobox.js.map +0 -1
- package/dist/components/popover.js.map +0 -1
- package/dist/src/components/alert-dialog/alert-dialog.d.ts +0 -41
- package/dist/src/components/alert-dialog/index.d.ts +0 -1
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { t as m } from "./cn-DTiB6ek_.js";
|
|
3
|
-
import { o as R, t as w } from "./close-button-B8gF5UNk.js";
|
|
4
|
-
import { createContext as A, useCallback as E, useContext as b, useEffect as v, useMemo as _, useRef as y, useState as N } from "react";
|
|
5
|
-
import { jsx as n, jsxs as g } from "react/jsx-runtime";
|
|
6
|
-
import { Dialog as c } from "@base-ui/react/dialog";
|
|
7
|
-
var x = A(null);
|
|
8
|
-
function K() {
|
|
9
|
-
return b(x)?.pending ?? !1;
|
|
10
|
-
}
|
|
11
|
-
function O({ onOpenChange: e, actionsRef: t, ...u }) {
|
|
12
|
-
const [l, r] = N(!1), s = y(!1), o = y(null);
|
|
13
|
-
v(() => {
|
|
14
|
-
if (t)
|
|
15
|
-
return t.current = o.current, () => {
|
|
16
|
-
t.current = null;
|
|
17
|
-
};
|
|
18
|
-
}, [t]);
|
|
19
|
-
const i = E((a, d) => {
|
|
20
|
-
if (!a && s.current) {
|
|
21
|
-
d.cancel();
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
e?.(a, d);
|
|
25
|
-
}, [e]), f = _(() => ({
|
|
26
|
-
pending: l,
|
|
27
|
-
beginPending: () => {
|
|
28
|
-
s.current = !0, r(!0);
|
|
29
|
-
},
|
|
30
|
-
endPending: () => {
|
|
31
|
-
s.current = !1, r(!1);
|
|
32
|
-
},
|
|
33
|
-
close: () => o.current?.close()
|
|
34
|
-
}), [l]);
|
|
35
|
-
return /* @__PURE__ */ n(x.Provider, {
|
|
36
|
-
value: f,
|
|
37
|
-
children: /* @__PURE__ */ n(c.Root, {
|
|
38
|
-
actionsRef: o,
|
|
39
|
-
onOpenChange: i,
|
|
40
|
-
...u
|
|
41
|
-
})
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
var V = c.Trigger, C = c.Portal, P = c.Close;
|
|
45
|
-
function H(e) {
|
|
46
|
-
return e != null && typeof e.then == "function";
|
|
47
|
-
}
|
|
48
|
-
function M({ onClick: e, loading: t, disabled: u, ...l }) {
|
|
49
|
-
const r = b(x), [s, o] = N(!1), i = y(!0);
|
|
50
|
-
v(() => (i.current = !0, () => {
|
|
51
|
-
i.current = !1;
|
|
52
|
-
}), []);
|
|
53
|
-
function f(d) {
|
|
54
|
-
if (s || t) return;
|
|
55
|
-
const p = e?.(d);
|
|
56
|
-
if (!H(p)) {
|
|
57
|
-
r?.close();
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
o(!0), r?.beginPending(), p.then(() => {
|
|
61
|
-
r?.endPending(), i.current && o(!1), r?.close();
|
|
62
|
-
}, (h) => {
|
|
63
|
-
r?.endPending(), i.current && o(!1), typeof process < "u" && process.env.NODE_ENV !== "production" && console.error("Dialog.Action: async onClick rejected —", h);
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
const a = s || t;
|
|
67
|
-
return /* @__PURE__ */ n(R, {
|
|
68
|
-
...l,
|
|
69
|
-
disabled: u || a,
|
|
70
|
-
loading: a,
|
|
71
|
-
onClick: f
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
function B({ className: e, ...t }) {
|
|
75
|
-
return /* @__PURE__ */ n(c.Backdrop, {
|
|
76
|
-
className: m("bg-pho-overlay fixed inset-0 z-50 transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:opacity-0", e),
|
|
77
|
-
...t
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
function D({ className: e, ...t }) {
|
|
81
|
-
return /* @__PURE__ */ n(c.Popup, {
|
|
82
|
-
className: m("border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border outline-none", "transition-[opacity,scale] duration-200 ease-out", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150", e),
|
|
83
|
-
...t
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
function k({ className: e, ...t }) {
|
|
87
|
-
return /* @__PURE__ */ n(c.Title, {
|
|
88
|
-
className: m("text-pho-primary font-display text-display-sm font-medium text-balance", e),
|
|
89
|
-
...t
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
function T({ className: e, ...t }) {
|
|
93
|
-
return /* @__PURE__ */ n(c.Description, {
|
|
94
|
-
className: m("text-pho-description text-display-xs font-normal", e),
|
|
95
|
-
...t
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
function S({ title: e, description: t, consequences: u, warning: l, actions: r, showClose: s = !0, children: o, className: i, ...f }) {
|
|
99
|
-
const a = r == null && s, d = !!(e || t || a), p = u != null && u.length > 0, h = p || l != null || o != null || r != null;
|
|
100
|
-
return /* @__PURE__ */ g(C, { children: [/* @__PURE__ */ n(B, {}), /* @__PURE__ */ g(D, {
|
|
101
|
-
className: i,
|
|
102
|
-
...f,
|
|
103
|
-
children: [d && /* @__PURE__ */ g("div", {
|
|
104
|
-
className: "flex flex-col gap-1 px-6 pt-6",
|
|
105
|
-
children: [(e || a) && /* @__PURE__ */ g("div", {
|
|
106
|
-
className: "relative",
|
|
107
|
-
children: [e ? /* @__PURE__ */ n(k, {
|
|
108
|
-
className: a ? "pr-12" : void 0,
|
|
109
|
-
children: e
|
|
110
|
-
}) : /* @__PURE__ */ n("div", {
|
|
111
|
-
className: "h-[1.625rem]",
|
|
112
|
-
"aria-hidden": "true"
|
|
113
|
-
}), a && /* @__PURE__ */ n(P, { render: /* @__PURE__ */ n(w, { className: "absolute top-1/2 right-0 z-10 -translate-y-1/2" }) })]
|
|
114
|
-
}), t && /* @__PURE__ */ n(T, { children: t })]
|
|
115
|
-
}), h && /* @__PURE__ */ g("div", {
|
|
116
|
-
className: "flex flex-col gap-5 px-6 py-5",
|
|
117
|
-
children: [
|
|
118
|
-
p && /* @__PURE__ */ n("ul", {
|
|
119
|
-
className: "text-pho-description text-md [&_strong]:text-pho-secondary space-y-1 [&_strong]:font-medium",
|
|
120
|
-
children: u.map((j, z) => /* @__PURE__ */ n("li", {
|
|
121
|
-
className: "relative pl-4 before:absolute before:top-2.5 before:left-1 before:size-1 before:rounded-full before:bg-current",
|
|
122
|
-
children: j
|
|
123
|
-
}, z))
|
|
124
|
-
}),
|
|
125
|
-
l != null && /* @__PURE__ */ n("p", {
|
|
126
|
-
className: "text-pho-error text-display-xs font-medium",
|
|
127
|
-
children: l
|
|
128
|
-
}),
|
|
129
|
-
o,
|
|
130
|
-
r != null && /* @__PURE__ */ n("div", {
|
|
131
|
-
className: "flex justify-end gap-2",
|
|
132
|
-
children: r
|
|
133
|
-
})
|
|
134
|
-
]
|
|
135
|
-
})]
|
|
136
|
-
})] });
|
|
137
|
-
}
|
|
138
|
-
var L = {
|
|
139
|
-
Root: O,
|
|
140
|
-
Trigger: V,
|
|
141
|
-
Portal: C,
|
|
142
|
-
Backdrop: B,
|
|
143
|
-
Popup: D,
|
|
144
|
-
Title: k,
|
|
145
|
-
Description: T,
|
|
146
|
-
Close: P,
|
|
147
|
-
Action: M,
|
|
148
|
-
Content: S
|
|
149
|
-
};
|
|
150
|
-
export {
|
|
151
|
-
K as n,
|
|
152
|
-
L as t
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
//# sourceMappingURL=dialog-Ba0UUE5g.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-Ba0UUE5g.js","names":[],"sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ComponentProps,\n type ElementType,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport { CloseButton } from \"../button/close-button\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n ComponentProps<T>,\n \"className\"\n> & {\n className?: string;\n};\n\n/* ========================== Async pending context ========================== */\n\n/** Imperative actions exposed by Base UI's `actionsRef`. */\ninterface RootActions {\n unmount: () => void;\n close: () => void;\n}\n\ninterface DialogPendingContextValue {\n /** True while a `Dialog.Action` promise is in flight. */\n pending: boolean;\n beginPending: () => void;\n endPending: () => void;\n /** Close the dialog imperatively (used by `Dialog.Action` on resolve). */\n close: () => void;\n}\n\nconst DialogPendingContext = createContext<DialogPendingContextValue | null>(\n null,\n);\n\n/**\n * Whether the surrounding dialog has a `Dialog.Action` promise in flight —\n * use it to disable secondary actions (Cancel etc.) while work is pending.\n * Returns `false` outside a `Dialog.Root`.\n */\nexport function useDialogPending(): boolean {\n return useContext(DialogPendingContext)?.pending ?? false;\n}\n\ntype RootProps = ComponentProps<typeof BaseDialog.Root>;\n\n/**\n * `Dialog.Root` with async awareness: while a `Dialog.Action` promise is\n * pending, every close request (outside press, Escape, `Dialog.Close`) is\n * cancelled so the dialog stays open until the work settles. Props pass\n * through to Base UI's `Dialog.Root` unchanged.\n */\nfunction Root({ onOpenChange, actionsRef, ...props }: RootProps) {\n const [pending, setPending] = useState(false);\n // Guard reads a ref so a resolve → close() in the same tick isn't blocked\n // by a not-yet-flushed state update.\n const pendingRef = useRef(false);\n const internalActionsRef = useRef<RootActions | null>(null);\n\n // Keep a caller-supplied actionsRef working alongside our internal one.\n useEffect(() => {\n if (!actionsRef) return;\n actionsRef.current = internalActionsRef.current;\n return () => {\n actionsRef.current = null;\n };\n }, [actionsRef]);\n\n const handleOpenChange = useCallback<NonNullable<RootProps[\"onOpenChange\"]>>(\n (open, eventDetails) => {\n if (!open && pendingRef.current) {\n eventDetails.cancel();\n return;\n }\n onOpenChange?.(open, eventDetails);\n },\n [onOpenChange],\n );\n\n const contextValue = useMemo<DialogPendingContextValue>(\n () => ({\n pending,\n beginPending: () => {\n pendingRef.current = true;\n setPending(true);\n },\n endPending: () => {\n pendingRef.current = false;\n setPending(false);\n },\n close: () => internalActionsRef.current?.close(),\n }),\n [pending],\n );\n\n return (\n <DialogPendingContext.Provider value={contextValue}>\n <BaseDialog.Root\n actionsRef={internalActionsRef}\n onOpenChange={handleOpenChange}\n {...props}\n />\n </DialogPendingContext.Provider>\n );\n}\n\nconst Trigger = BaseDialog.Trigger;\nconst Portal = BaseDialog.Portal;\nconst Close = BaseDialog.Close;\n\n/* ============================== Dialog.Action ============================== */\n\nexport interface DialogActionProps extends Omit<ButtonProps, \"onClick\"> {\n /**\n * Confirm handler. Return a promise to keep the dialog open while it runs:\n * the button shows `loading`, all dismissal is locked, and the dialog\n * closes when the promise resolves. On rejection the dialog stays open —\n * surface errors inside the handler. A non-promise return closes\n * immediately, like `Dialog.Close`.\n */\n onClick?: (\n event: ReactMouseEvent<HTMLButtonElement>,\n ) => void | Promise<unknown>;\n}\n\nfunction isThenable(value: unknown): value is Promise<unknown> {\n return (\n value != null && typeof (value as { then?: unknown }).then === \"function\"\n );\n}\n\n/**\n * The confirm button of an action row, with native promise support — a\n * `Button` that runs its (possibly async) `onClick` and closes the dialog\n * when the work settles successfully.\n */\nfunction Action({ onClick, loading, disabled, ...props }: DialogActionProps) {\n const pendingContext = useContext(DialogPendingContext);\n const [busy, setBusy] = useState(false);\n const mountedRef = useRef(true);\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n function handleClick(event: ReactMouseEvent<HTMLButtonElement>) {\n if (busy || loading) return;\n const result = onClick?.(event);\n if (!isThenable(result)) {\n pendingContext?.close();\n return;\n }\n setBusy(true);\n pendingContext?.beginPending();\n result.then(\n () => {\n pendingContext?.endPending();\n if (mountedRef.current) setBusy(false);\n pendingContext?.close();\n },\n (error: unknown) => {\n pendingContext?.endPending();\n if (mountedRef.current) setBusy(false);\n if (\n typeof process !== \"undefined\" &&\n process.env?.NODE_ENV !== \"production\"\n ) {\n console.error(\"Dialog.Action: async onClick rejected —\", error);\n }\n },\n );\n }\n\n const inert = busy || loading;\n return (\n <Button\n {...props}\n disabled={disabled || inert}\n loading={inert}\n onClick={handleClick}\n />\n );\n}\n\nfunction Backdrop({\n className,\n ...props\n}: StyledProps<typeof BaseDialog.Backdrop>) {\n return (\n <BaseDialog.Backdrop\n className={cn(\n \"bg-pho-overlay fixed inset-0 z-50 transition-opacity duration-200 ease-out\",\n \"data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>) {\n return (\n <BaseDialog.Popup\n className={cn(\n // Floating layer: bg-pho-primary + border-pho-secondary hairline, elevation kept.\n \"border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border outline-none\",\n // Opacity + scale only — leave translate centering alone (no transition-all).\n \"transition-[opacity,scale] duration-200 ease-out\",\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>) {\n return (\n <BaseDialog.Title\n className={cn(\n \"text-pho-primary font-display text-display-sm font-medium text-balance\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Description({\n className,\n ...props\n}: StyledProps<typeof BaseDialog.Description>) {\n return (\n <BaseDialog.Description\n className={cn(\n \"text-pho-description text-display-xs font-normal\",\n className,\n )}\n {...props}\n />\n );\n}\n\ninterface ContentProps extends Omit<\n StyledProps<typeof BaseDialog.Popup>,\n \"title\"\n> {\n /** Heading rendered in the panel header. */\n title?: ReactNode;\n /** Supporting text under the title. */\n description?: ReactNode;\n /**\n * Consequence bullets rendered as a list at the top of the body — one item\n * per outcome (what is deleted, what survives, who loses access). Use on\n * destructive confirms where the one-line description undersells the\n * impact; keep each item to a single short sentence. Wrap the load-bearing\n * figure in `<strong>` (\"<strong>3 members</strong> lose access\") — the\n * list styles it (secondary ink, medium weight); no classes needed.\n */\n consequences?: ReactNode[];\n /**\n * Final cautionary line under `consequences` — error ink at description\n * size (e.g. \"It cannot be undone. Please be certain.\"). Reserve it for\n * irreversible actions; keep it short.\n */\n warning?: ReactNode;\n /**\n * Footer action row (Cancel / Confirm, etc.). Iron rule: when `actions` is\n * set, the header close button is never shown — dismiss via the actions.\n */\n actions?: ReactNode;\n /**\n * Header close control. Only applies when `actions` is absent.\n * @default true\n */\n showClose?: boolean;\n children?: ReactNode;\n}\n\n/**\n * Convenience panel: renders the portal, backdrop, and styled popup with an\n * optional header (title/description + close) and optional action row. For\n * full control, compose the parts directly (`Dialog.Portal` /\n * `Dialog.Backdrop` / `Dialog.Popup`).\n */\nfunction Content({\n title,\n description,\n consequences,\n warning,\n actions,\n showClose = true,\n children,\n className,\n ...props\n}: ContentProps) {\n // Iron rule: action dialogs dismiss via their actions — never a header X.\n const showCloseButton = actions == null && showClose;\n const hasHeader = Boolean(title || description || showCloseButton);\n const hasConsequences = consequences != null && consequences.length > 0;\n const hasBody =\n hasConsequences || warning != null || children != null || actions != null;\n\n return (\n <Portal>\n <Backdrop />\n <Popup className={className} {...props}>\n {hasHeader && (\n <div className=\"flex flex-col gap-1 px-6 pt-6\">\n {(title || showCloseButton) && (\n // Title row height = title only. Close is out of flow, centered\n // on the row, and may paint outside it (no clip, no stretch).\n <div className=\"relative\">\n {title ? (\n <Title className={showCloseButton ? \"pr-12\" : undefined}>\n {title}\n </Title>\n ) : (\n <div className=\"h-[1.625rem]\" aria-hidden=\"true\" />\n )}\n {showCloseButton && (\n <Close\n render={\n <CloseButton className=\"absolute top-1/2 right-0 z-10 -translate-y-1/2\" />\n }\n />\n )}\n </div>\n )}\n {description && <Description>{description}</Description>}\n </div>\n )}\n {hasBody && (\n <div className=\"flex flex-col gap-5 px-6 py-5\">\n {hasConsequences && (\n <ul className=\"text-pho-description text-md [&_strong]:text-pho-secondary space-y-1 [&_strong]:font-medium\">\n {consequences.map((item, index) => (\n // Hand-drawn marker: a 4px dot on the first line's center —\n // quieter than the browser disc, ink tracks the text.\n <li\n key={index}\n className=\"relative pl-4 before:absolute before:top-2.5 before:left-1 before:size-1 before:rounded-full before:bg-current\"\n >\n {item}\n </li>\n ))}\n </ul>\n )}\n {warning != null && (\n <p className=\"text-pho-error text-display-xs font-medium\">\n {warning}\n </p>\n )}\n {children}\n {actions != null && (\n <div className=\"flex justify-end gap-2\">{actions}</div>\n )}\n </div>\n )}\n </Popup>\n </Portal>\n );\n}\n\n/**\n * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via\n * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`). `Dialog.Action`\n * adds native promise support: an async confirm keeps the dialog open and\n * undismissable until the work resolves.\n */\nexport const Dialog = {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Popup,\n Title,\n Description,\n Close,\n Action,\n Content,\n};\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-CxS7ndpb.js","names":["__iconNode","__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconEyeOff.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconEye.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircleFilled.mjs","../../src/components/input/input.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M10.585 10.587a2 2 0 0 0 2.829 2.828\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M3 3l18 18\", \"key\": \"svg-2\" }]];\nconst IconEyeOff = createReactComponent(\"outline\", \"eye-off\", \"EyeOff\", __iconNode);\n\nexport { __iconNode, IconEyeOff as default };\n//# sourceMappingURL=IconEyeOff.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\", \"key\": \"svg-1\" }]];\nconst IconEye = createReactComponent(\"outline\", \"eye\", \"Eye\", __iconNode);\n\nexport { __iconNode, IconEye as default };\n//# sourceMappingURL=IconEye.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\", \"key\": \"svg-0\" }]];\nconst IconAlertCircleFilled = createReactComponent(\"filled\", \"alert-circle-filled\", \"AlertCircleFilled\", __iconNode);\n\nexport { __iconNode, IconAlertCircleFilled as default };\n//# sourceMappingURL=IconAlertCircleFilled.mjs.map\n","import {\n useState,\n type ComponentType,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport {\n IconAlertCircleFilled,\n IconEye,\n IconEyeOff,\n} from \"@tabler/icons-react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { cn } from \"../../utils/cn\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\n// Control padding per size. The wrapper carries a 2px inset (`p-0.5`) so the\n// control's border box — and the browser's autofill fill it paints — sits\n// inside the ring instead of over it; these paddings are the documented\n// effective padding (sm/md 12/8px, lg 14/10px) minus that 2px inset, so the\n// text position and total field height are unchanged.\nconst SIZE_PAD: Record<InputSize, string> = {\n // 16px on small viewports — iOS zooms into any focused field under 16px.\n sm: \"px-2.5 py-1.5 text-md md:text-base\",\n md: \"px-2.5 py-1.5 text-md\",\n lg: \"px-3 py-2 text-md\",\n};\n// Effective icon clearance minus the wrapper's 2px inset.\nconst LEADING_PAD: Record<InputSize, string> = {\n sm: \"pl-8.5\",\n md: \"pl-9.5\",\n lg: \"pl-10\",\n};\n// Icons are absolutely positioned, so they're placed from the wrapper's\n// padding edge — which, with no border, is the visible field edge; the\n// wrapper's `p-0.5` does not offset them.\nconst LEADING_ICON_POS: Record<InputSize, string> = {\n sm: \"left-3 size-4\",\n md: \"left-3 size-5\",\n lg: \"left-3.5 size-5\",\n};\n// Wrapper corner radius — `rounded-base` (12px) at every size; `lg` also gets\n// `squircle` superellipse smoothing (the ring is a box-shadow on this wrapper,\n// so it follows the border-radius automatically).\nconst SIZE_RADIUS: Record<InputSize, string> = {\n sm: \"rounded-base\",\n md: \"rounded-base\",\n lg: \"squircle rounded-base\",\n};\n// Concentric inner-curve cover, `lg` only. Nested corner radii must follow\n// innerRadius = outerRadius − inset, so the hairline's inner edge at a 12px\n// outer radius is 11px at rest (ring-1) and 10px when focused (ring-2).\n// Browsers derive that automatically for plain round corners, but with\n// `corner-shape: superellipse(...)` shipping engines still scale (rather than\n// offset) the inner shadow curve, which renders the ring visibly thicker at\n// the four corners (see w3c/csswg-drafts#12961). This ::before repaints the\n// field surface over everything inside the correct concentric curve — a round\n// radius is the right parallel-offset approximation of the mild superellipse —\n// so the ring reads as a uniform hairline in every engine. `isolate` +\n// `-z-10` slot the cover above the wrapper's background/ring but below the\n// control's text, icons, and autofill fill. `sm`/`md` have no corner-shape,\n// so the native (already concentric) rendering is kept there.\n// The ::before is absolutely positioned, so its inset is measured from the\n// wrapper's border box (border 0): 1px in at rest, 2px in when focused.\nconst SIZE_RING_COVER: Record<InputSize, string> = {\n sm: \"\",\n md: \"\",\n lg: cn(\n \"isolate before:pointer-events-none before:absolute before:-z-10 before:content-['']\",\n \"before:bg-pho-primary before:inset-px before:rounded-[calc(var(--radius-base)-1px)]\",\n // Invalid sits between rest (1px) and focus (2px) — keep the cover concentric.\n \"data-[invalid]:before:inset-[1.5px] data-[invalid]:before:rounded-[calc(var(--radius-base)-1.5px)]\",\n \"has-[input:focus-visible]:before:inset-0.5 has-[input:focus-visible]:before:rounded-[calc(var(--radius-base)-2px)]\",\n \"before:transition-[inset,border-radius] before:duration-100 before:ease-linear\",\n ),\n};\n// The control's border box sits 2px inside the wrapper (its `p-0.5` inset),\n// clear of both ring widths, so the browser's autofill fill paints inside the\n// hairline instead of over it. Rounding follows inner = outer − gap, derived\n// from the token with calc. Round (not squircle) — the parallel offset of\n// the wrapper's mild superellipse is effectively circular.\nconst SIZE_AUTOFILL_RADIUS: Record<InputSize, string> = {\n sm: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n md: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n lg: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n};\n\nexport interface InputProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\"\n> {\n /** Field label (associated for accessibility). */\n label?: ReactNode;\n /** Helper text below the field; rendered in the error color when `invalid`. */\n hint?: ReactNode;\n /** Size variant. @default \"md\" */\n size?: InputSize;\n /** Render the invalid state (ring + icon + error-colored hint). */\n invalid?: boolean;\n /** Leading icon component (e.g. a Tabler icon). */\n icon?: ComponentType<{ className?: string }>;\n /** Node rendered at the right edge of the label row (e.g. \"Forgot?\"). */\n labelTrailing?: ReactNode;\n /** Class applied to the input wrapper. */\n wrapperClassName?: string;\n ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Text input built on Base UI `Field` (label/description a11y wiring) with\n * Pho's bordered surface, leading icon, invalid state, and a built-in password\n * reveal toggle.\n */\nexport function Input({\n label,\n hint,\n size = \"md\",\n invalid,\n icon: Icon,\n labelTrailing,\n disabled,\n required,\n type = \"text\",\n className,\n wrapperClassName,\n id,\n ref,\n ...props\n}: InputProps) {\n const [reveal, setReveal] = useState(false);\n const isPassword = type === \"password\";\n const resolvedType = isPassword && reveal ? \"text\" : type;\n const hasLeadingIcon = Boolean(Icon);\n const hasTrailingIcon = isPassword || invalid;\n\n return (\n <Field.Root\n disabled={disabled}\n className=\"group/field flex w-full flex-col gap-1.5\"\n >\n {label && (\n <div className=\"flex items-center justify-between gap-2\">\n <Field.Label className=\"text-pho-secondary flex cursor-default items-center gap-0.5 text-base font-medium\">\n {label}\n {required && <span className=\"text-pho-brand\">*</span>}\n </Field.Label>\n {labelTrailing}\n </div>\n )}\n\n <div\n data-invalid={invalid || undefined}\n className={cn(\n // Flat field surface — hairline ring only; elevation shadows are\n // reserved for floating layers (menus/popovers/dialogs). `p-0.5`\n // insets the control 2px (the focused ring width) so its background\n // and the browser's autofill fill nest inside the ring; the size\n // maps compensate so effective padding/height are unchanged.\n \"bg-pho-primary ring-pho-primary relative flex w-full items-center p-0.5 ring-1 transition-shadow duration-100 ease-linear ring-inset\",\n SIZE_RADIUS[size],\n SIZE_RING_COVER[size],\n \"has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2\",\n // Invalid is mid-weight: thicker than the 1px rest hairline, thinner\n // than the 2px focus ring. Rest uses the subtle error ink; focus\n // steps up to the solid error (same hue, full opacity).\n \"data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error data-[invalid]:ring-[1.5px]\",\n \"group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50\",\n wrapperClassName,\n )}\n >\n {Icon && (\n <Icon\n className={cn(\n \"text-pho-secondary pointer-events-none absolute\",\n LEADING_ICON_POS[size],\n )}\n />\n )}\n\n <Field.Control\n ref={ref}\n id={id}\n type={resolvedType}\n required={required}\n {...props}\n className={cn(\n \"text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed\",\n SIZE_PAD[size],\n SIZE_AUTOFILL_RADIUS[size],\n hasLeadingIcon && LEADING_PAD[size],\n // 34px + the wrapper's 2px inset = the previous 36px clearance.\n hasTrailingIcon && \"pr-8.5\",\n className,\n )}\n />\n\n {invalid && !isPassword && (\n <IconAlertCircleFilled className=\"text-pho-error pointer-events-none absolute right-3 size-4\" />\n )}\n\n {isPassword && (\n <button\n type=\"button\"\n // Reachable by click but skipped in tab order so Tab moves field→field.\n tabIndex={-1}\n aria-label=\"Toggle password visibility\"\n onClick={() => setReveal((v) => !v)}\n className=\"text-pho-secondary hover:text-pho-secondary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none\"\n >\n {reveal ? (\n <IconEyeOff className=\"size-4\" />\n ) : (\n <IconEye className=\"size-4\" />\n )}\n </button>\n )}\n </div>\n\n {hint && (\n <Field.Description\n className={cn(\n \"text-pho-description text-base\",\n invalid && \"text-pho-error\",\n )}\n >\n {hint}\n </Field.Description>\n )}\n </Field.Root>\n );\n}\n\nInput.displayName = \"Input\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"menu-BSXds3Rt.js","names":[],"sources":["../../src/components/menu/menu-pending.tsx","../../src/components/menu/menu.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ComponentType,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n type RefObject,\n} from \"react\";\nimport { Spinner } from \"../spinner/spinner\";\n\n/** Imperative actions exposed by Base UI menu `actionsRef`. */\ninterface RootActions {\n unmount: () => void;\n close: () => void;\n}\n\ninterface MenuPendingContextValue {\n /** True while a menu item promise is in flight. */\n pending: boolean;\n beginPending: () => void;\n endPending: () => void;\n /** Close the menu imperatively (used by async items on resolve). */\n close: () => void;\n}\n\nconst MenuPendingContext = createContext<MenuPendingContextValue | null>(null);\n\n/**\n * Whether the surrounding menu has an async item promise in flight —\n * use it to disable sibling items while work is pending.\n * Returns `false` outside a `Menu.Root` / `ContextMenu.Root`.\n */\nexport function useMenuPending(): boolean {\n return useContext(MenuPendingContext)?.pending ?? false;\n}\n\nexport function isThenable(value: unknown): value is Promise<unknown> {\n return (\n value != null && typeof (value as { then?: unknown }).then === \"function\"\n );\n}\n\ntype PreventableMouseEvent = ReactMouseEvent<HTMLElement> & {\n preventBaseUIHandler?: () => void;\n};\n\ntype RootWithPendingProps = {\n onOpenChange?: (open: boolean, eventDetails: { cancel: () => void }) => void;\n actionsRef?: RefObject<RootActions | null>;\n children?: ReactNode;\n};\n\n/**\n * Wraps a Base UI menu root so async `Menu.Item` clicks can lock dismissal\n * (outside press, Escape) until the promise settles.\n */\nexport function withMenuPendingRoot<P extends RootWithPendingProps>(\n BaseRoot: ComponentType<P>,\n): ComponentType<P> {\n function PendingRoot({ onOpenChange, actionsRef, ...props }: P) {\n const [pending, setPending] = useState(false);\n // Guard reads a ref so a resolve → close() in the same tick isn't blocked\n // by a not-yet-flushed state update.\n const pendingRef = useRef(false);\n const internalActionsRef = useRef<RootActions | null>(null);\n\n useEffect(() => {\n if (!actionsRef) return;\n // Proxy so callers always hit the live Base UI actions, even if the\n // popup remounts after this effect runs.\n actionsRef.current = {\n unmount: () => internalActionsRef.current?.unmount(),\n close: () => internalActionsRef.current?.close(),\n };\n return () => {\n actionsRef.current = null;\n };\n }, [actionsRef]);\n\n const handleOpenChange = useCallback(\n (open: boolean, eventDetails: { cancel: () => void }) => {\n if (!open && pendingRef.current) {\n eventDetails.cancel();\n return;\n }\n onOpenChange?.(open, eventDetails);\n },\n [onOpenChange],\n );\n\n const contextValue = useMemo<MenuPendingContextValue>(\n () => ({\n pending,\n beginPending: () => {\n pendingRef.current = true;\n setPending(true);\n },\n endPending: () => {\n pendingRef.current = false;\n setPending(false);\n },\n close: () => internalActionsRef.current?.close(),\n }),\n [pending],\n );\n\n return (\n <MenuPendingContext.Provider value={contextValue}>\n <BaseRoot\n {...(props as P)}\n actionsRef={internalActionsRef}\n onOpenChange={handleOpenChange}\n />\n </MenuPendingContext.Provider>\n );\n }\n\n return PendingRoot as ComponentType<P>;\n}\n\nexport type AsyncMenuItemClick = (\n event: ReactMouseEvent<HTMLElement>,\n) => void | Promise<unknown>;\n\n/**\n * Shared click handler for `Menu.Item` / `ContextMenu.Item` promise support.\n * Returns whether the item should show its loading state.\n */\nexport function useAsyncMenuItem({\n onClick,\n closeOnClick = true,\n loading = false,\n disabled = false,\n}: {\n onClick?: AsyncMenuItemClick;\n closeOnClick?: boolean;\n loading?: boolean;\n disabled?: boolean;\n}) {\n const pendingContext = useContext(MenuPendingContext);\n const menuPending = pendingContext?.pending ?? false;\n const [busy, setBusy] = useState(false);\n const mountedRef = useRef(true);\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n const inert = busy || loading;\n // Disable siblings while any item promise is in flight — not the busy item itself.\n const blocked = disabled || (menuPending && !busy);\n\n function handleClick(event: ReactMouseEvent<HTMLElement>) {\n if (inert || (menuPending && !busy)) {\n (event as PreventableMouseEvent).preventBaseUIHandler?.();\n return;\n }\n const result = onClick?.(event);\n if (!isThenable(result)) {\n return;\n }\n // Stop Base UI's closeOnClick for this press; close on resolve instead.\n (event as PreventableMouseEvent).preventBaseUIHandler?.();\n setBusy(true);\n pendingContext?.beginPending();\n result.then(\n () => {\n pendingContext?.endPending();\n if (mountedRef.current) setBusy(false);\n if (closeOnClick) pendingContext?.close();\n },\n (error: unknown) => {\n pendingContext?.endPending();\n if (mountedRef.current) setBusy(false);\n if (\n typeof process !== \"undefined\" &&\n process.env?.NODE_ENV !== \"production\"\n ) {\n console.error(\"Menu.Item: async onClick rejected —\", error);\n }\n },\n );\n }\n\n return { inert, blocked, handleClick };\n}\n\n/** Menu-row spinner — keeps `data-menu-spinner` for the hide-siblings CSS. */\nexport function MenuItemSpinner() {\n return <Spinner data-menu-spinner=\"\" size=\"md\" />;\n}\n","import {\n type ComponentProps,\n type ElementType,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\nimport {\n MenuItemSpinner,\n useAsyncMenuItem,\n useMenuPending,\n withMenuPendingRoot,\n type AsyncMenuItemClick,\n} from \"./menu-pending\";\n\nexport { useMenuPending };\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n ComponentProps<T>,\n \"className\" | \"color\"\n> & {\n className?: string;\n};\n\n/** Shared popup + item styles, reused by `ContextMenu` and `Menubar` menus. */\n// Floating layer: keeps its elevation shadow, sits on the primary surface\n// with the site's hairline (ring-pho-secondary, #eee/#202020) as its edge.\n// `base` radius + p-1.5 inset — the highlight floats 6px clear of the edge.\nexport const MENU_POPUP =\n \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] min-w-44 rounded-base p-1.5 ring-1 ring-inset outline-none transition-[transform,opacity] duration-150 ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0\";\n// Rest at secondary; highlighted lifts to primary with the quiet ghost wash.\n// Icons use `text-current` so they follow the row ink (including destructive).\n// While loading, the spinner is first; hide the rest of the leading icons.\n// Concentric correction (see /scale): row radius = popup radius − popup\n// padding (base − 6px). py-2 + 20px line-height lands the 36px row height.\nexport const MENU_ITEM =\n \"relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-6px)] py-2 pr-2.5 pl-2.5 text-base text-pho-secondary outline-none select-none data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-loading:data-[disabled]:opacity-100 data-loading:[&>svg:not([data-menu-spinner])]:hidden [&>svg]:size-4 [&>svg]:text-current\";\n\n/** Semantic ink for `Menu.Item` / `LinkItem` / `ContextMenu.Item`. */\nexport const MENU_ITEM_COLORS = {\n default: { classes: \"\", description: \"Secondary → primary on highlight\" },\n destructive: {\n classes:\n \"text-pho-error data-[highlighted]:bg-pho-error-primary data-[highlighted]:text-pho-error\",\n description: \"Error ink + error wash on highlight\",\n },\n} satisfies VariantMap;\n\nexport type MenuItemColor = keyof typeof MENU_ITEM_COLORS;\n\ntype ItemColorProps = {\n /** Semantic ink. @default \"default\" */\n color?: MenuItemColor;\n};\n\nexport type MenuItemProps = Omit<StyledProps<typeof BaseMenu.Item>, \"onClick\"> &\n ItemColorProps & {\n /**\n * Action handler. Return a promise to keep the menu open while it runs:\n * the item shows a spinner, dismissal is locked, and the menu closes when\n * the promise resolves (if `closeOnClick`). On rejection the menu stays\n * open — surface errors inside the handler.\n */\n onClick?: AsyncMenuItemClick;\n /**\n * Declarative loading state (same visual as an in-flight promise).\n * @default false\n */\n loading?: boolean;\n };\n\nconst Root = withMenuPendingRoot(BaseMenu.Root);\nconst Trigger = BaseMenu.Trigger;\nconst Portal = BaseMenu.Portal;\nconst Group = BaseMenu.Group;\nconst RadioGroup = BaseMenu.RadioGroup;\n// Don't wrap SubmenuRoot — nested pending context would shadow the parent\n// Root and fail to lock dismissal for async items inside a submenu.\nconst SubmenuRoot = BaseMenu.SubmenuRoot;\n\nfunction Positioner({\n className,\n sideOffset = 6,\n ...props\n}: StyledProps<typeof BaseMenu.Positioner>) {\n return (\n <BaseMenu.Positioner\n sideOffset={sideOffset}\n className={cn(\"z-50\", className)}\n {...props}\n />\n );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseMenu.Popup>) {\n return <BaseMenu.Popup className={cn(MENU_POPUP, className)} {...props} />;\n}\n\nfunction Item({\n className,\n color = \"default\",\n onClick,\n closeOnClick = true,\n loading = false,\n disabled = false,\n children,\n ...props\n}: MenuItemProps) {\n const { inert, blocked, handleClick } = useAsyncMenuItem({\n onClick,\n closeOnClick,\n loading,\n disabled,\n });\n\n return (\n <BaseMenu.Item\n className={cn(\n MENU_ITEM,\n resolveVariant(MENU_ITEM_COLORS, color),\n className,\n )}\n closeOnClick={closeOnClick}\n disabled={blocked}\n data-loading={inert || undefined}\n aria-busy={inert || undefined}\n onClick={handleClick as (event: ReactMouseEvent<HTMLElement>) => void}\n {...props}\n >\n {inert ? (\n <>\n <MenuItemSpinner />\n <output className=\"sr-only\" aria-live=\"polite\" />\n </>\n ) : null}\n {children}\n </BaseMenu.Item>\n );\n}\n\nfunction LinkItem({\n className,\n color = \"default\",\n ...props\n}: StyledProps<typeof BaseMenu.LinkItem> & ItemColorProps) {\n return (\n <BaseMenu.LinkItem\n className={cn(\n MENU_ITEM,\n resolveVariant(MENU_ITEM_COLORS, color),\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction GroupLabel({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.GroupLabel>) {\n return (\n <BaseMenu.GroupLabel\n className={cn(\n \"text-pho-secondary px-2.5 py-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Separator({ className, ...props }: StyledProps<typeof BaseSeparator>) {\n return (\n <BaseSeparator\n className={cn(\n \"-mx-1.5 my-1.5 h-px bg-[var(--border-color-pho-secondary)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SubmenuTrigger({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.SubmenuTrigger>) {\n return (\n <BaseMenu.SubmenuTrigger\n className={cn(\n MENU_ITEM,\n \"data-[popup-open]:bg-pho-ghost-hover\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CheckboxItem({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.CheckboxItem>) {\n return (\n <BaseMenu.CheckboxItem\n className={cn(MENU_ITEM, \"pl-8\", className)}\n {...props}\n />\n );\n}\n\nfunction RadioItem({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.RadioItem>) {\n return (\n <BaseMenu.RadioItem\n className={cn(MENU_ITEM, \"pl-8\", className)}\n {...props}\n />\n );\n}\n\nconst CHECK_INDICATOR =\n \"text-pho-brand absolute left-2.5 flex items-center [&>svg]:size-4\";\n\nfunction CheckboxItemIndicator({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.CheckboxItemIndicator>) {\n return (\n <BaseMenu.CheckboxItemIndicator\n className={cn(CHECK_INDICATOR, className)}\n {...props}\n />\n );\n}\n\nfunction RadioItemIndicator({\n className,\n ...props\n}: StyledProps<typeof BaseMenu.RadioItemIndicator>) {\n return (\n <BaseMenu.RadioItemIndicator\n className={cn(CHECK_INDICATOR, className)}\n {...props}\n />\n );\n}\n\n/**\n * Dropdown menu built on Base UI `Menu` — a list of actions opened from a\n * trigger. Supports grouped items, separators, submenus\n * (`SubmenuRoot` + `SubmenuTrigger`), and stateful `CheckboxItem` /\n * `RadioItem`s. `Menu.Item` has native promise support (spinner + locked\n * dismissal while pending). For a right-click menu use `ContextMenu`.\n */\nexport const Menu = {\n Root,\n Trigger,\n Portal,\n Positioner,\n Popup,\n Item,\n LinkItem,\n Group,\n GroupLabel,\n Separator,\n SubmenuRoot,\n SubmenuTrigger,\n CheckboxItem,\n CheckboxItemIndicator,\n RadioGroup,\n RadioItem,\n RadioItemIndicator,\n};\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-DGpEKxOn.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUpRight.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconDots.mjs","../../src/sections/sidebar/sidebar.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M17 7l-10 10\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M8 7l9 0l0 9\", \"key\": \"svg-1\" }]];\nconst IconArrowUpRight = createReactComponent(\"outline\", \"arrow-up-right\", \"ArrowUpRight\", __iconNode);\n\nexport { __iconNode, IconArrowUpRight as default };\n//# sourceMappingURL=IconArrowUpRight.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-2\" }]];\nconst IconDots = createReactComponent(\"outline\", \"dots\", \"Dots\", __iconNode);\n\nexport { __iconNode, IconDots as default };\n//# sourceMappingURL=IconDots.mjs.map\n","import {\n createContext,\n isValidElement,\n useContext,\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ComponentProps,\n type FC,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { IconArrowUpRight, IconDots } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { isReactComponent } from \"../../utils/is-react-component\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Avatar } from \"../../components/avatar\";\nimport { buttonVariants } from \"../../components/button\";\n\n/**\n * Sidebar — Pho's first SECTION: a composed app rail, not a micro component.\n * It encodes the navigation rail used across Photon surfaces (the Pho docs\n * site, the dashboard): a sticky full-height column with a brand header, a\n * scrollable stack of titled nav groups, and a pinned footer that usually\n * carries the account row.\n *\n * Sections stay presentational — no router, no data fetching, no theme\n * plumbing. Links render through the host's `LinkProvider` (same contract as\n * `ButtonLink`), state arrives via props (`active`), and interactive footers\n * compose with other Pho parts (e.g. wrap `Sidebar.AccountRow` in a\n * `Menu.Trigger render={...}` to open an account menu).\n *\n * `Root` takes `inset` (`base` | `sm`, default `base`) for the rail's outer\n * padding and header spacing — prefer that over host-app class overrides.\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** The rail itself — sticky, full-height, hairline right edge (no inset). */\nexport const SIDEBAR_ROOT =\n \"border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r\";\n\n/** Outer inset on `Root` — `base` is the docs/default rail; `sm` is tighter. */\nexport const SIDEBAR_ROOT_INSET = {\n base: \"px-4 pt-5 pb-4\",\n sm: \"px-3 pt-4 pb-3\",\n} as const;\n\n/** `SIDEBAR_ROOT` with the default `base` inset — one string for docs chrome. */\nexport const SIDEBAR_ROOT_BASE = cn(SIDEBAR_ROOT, SIDEBAR_ROOT_INSET.base);\n\n/** Header spacing paired with `Root`'s `inset`. */\nexport const SIDEBAR_HEADER_INSET = {\n base: \"mb-6 px-2\",\n sm: \"mb-3 px-0\",\n} as const;\n\nexport type SidebarInset = keyof typeof SIDEBAR_ROOT_INSET;\n\n/** A nav row at rest and on hover. Active/inactive inks split below. */\nexport const SIDEBAR_ITEM =\n \"outline-pho-brand flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1\";\n\n/**\n * Selected row — lifted onto the primary surface with the site hairline.\n * The icon carries the same ink as the label so the pair reads as one unit.\n */\nexport const SIDEBAR_ITEM_ACTIVE =\n \"bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-pho-primary\";\n\n/**\n * Resting row — secondary ink (75%). Hover lifts onto the primary surface\n * (same plane as the active chip, without the ring) so the wash stays quiet\n * on `pho-page`. Icon tracks the label's ink at every state.\n */\nexport const SIDEBAR_ITEM_INACTIVE = cn(\n \"text-pho-secondary *:data-icon:text-pho-secondary\",\n \"hover:bg-pho-primary hover:text-pho-primary hover:*:data-icon:text-pho-primary\",\n);\n\nconst SidebarInsetContext = createContext<SidebarInset>(\"base\");\n\n/* --------------------------------- frame --------------------------------- */\n\ninterface RootProps extends ComponentProps<\"aside\"> {\n /** Outer padding + header spacing. Defaults to `base`. */\n inset?: SidebarInset;\n ref?: Ref<HTMLElement>;\n}\n\n/** The rail — a sticky, full-height `<aside>` with the hairline right edge. */\nfunction Root({ className, inset = \"base\", ...props }: RootProps) {\n return (\n <SidebarInsetContext.Provider value={inset}>\n <aside\n className={cn(SIDEBAR_ROOT, SIDEBAR_ROOT_INSET[inset], className)}\n {...props}\n data-inset={inset}\n />\n </SidebarInsetContext.Provider>\n );\n}\n\n/** Brand slot at the top of the rail — logo, wordmark, workspace switcher. */\nfunction Header({ className, ...props }: ComponentProps<\"div\">) {\n const inset = useContext(SidebarInsetContext);\n return (\n <div\n className={cn(\n \"flex items-center gap-2.5\",\n SIDEBAR_HEADER_INSET[inset],\n className,\n )}\n {...props}\n />\n );\n}\n\n/** The scrollable middle — a stack of `Sidebar.Group`s. */\nfunction Nav({ className, ...props }: ComponentProps<\"nav\">) {\n return (\n <nav\n className={cn(\"flex flex-1 flex-col gap-6 overflow-y-auto\", className)}\n {...props}\n />\n );\n}\n\n/** One titled cluster of nav rows: a `GroupLabel` followed by a `List`. */\nfunction Group({ className, ...props }: ComponentProps<\"div\">) {\n return <div className={className} {...props} />;\n}\n\n/** The cluster's caption — description ink, regular weight. */\nfunction GroupLabel({ className, ...props }: ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\n \"text-pho-description mb-2 px-2 text-xs font-normal\",\n className,\n )}\n {...props}\n />\n );\n}\n\ninterface ListProps extends ComponentProps<\"ul\"> {\n /** Lay the rows out in two columns — for long, flat registries. */\n columns?: boolean;\n}\n\n/** The rows of a group. `columns` switches to a two-column grid. */\nfunction List({ className, columns, ...props }: ListProps) {\n return (\n <ul\n className={cn(\n // list-none/m-0/p-0 shield the rail from host prose styles.\n \"m-0 list-none p-0 *:m-0\",\n columns\n ? \"grid grid-cols-2 gap-x-2 gap-y-0.5\"\n : \"flex flex-col gap-0.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/** Pinned bottom cluster — docs link, account row, theme toggle. */\nfunction Footer({ className, ...props }: ComponentProps<\"div\">) {\n return (\n <div className={cn(\"mt-4 flex flex-col gap-0.5\", className)} {...props} />\n );\n}\n\n/* --------------------------------- item ---------------------------------- */\n\n/** An icon slot — a component (`IconBook`) or element (`<IconBook />`). */\ntype Slottable = ReactNode | FC<{ className?: string }>;\n\nfunction renderIcon(icon: Slottable): ReactNode {\n if (icon == null || icon === false) return null;\n let content: ReactNode = null;\n if (isReactComponent(icon)) {\n const Icon = icon;\n content = <Icon />;\n } else if (isValidElement(icon)) {\n content = icon;\n }\n if (content == null) return null;\n return (\n <span\n data-icon\n className=\"pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0\"\n >\n {content}\n </span>\n );\n}\n\ninterface ItemBaseProps {\n /** Slot before the label — a component (`IconBook`) or element. */\n icon?: Slottable;\n /** Marks the row as the current destination (adds `aria-current=\"page\"`). */\n active?: boolean;\n children?: ReactNode;\n className?: string;\n}\n\nexport interface SidebarItemLinkProps\n extends\n ItemBaseProps,\n Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ItemBaseProps> {\n /** Destination — rendered through the host's `LinkProvider`. */\n href: string;\n /** Leaves the app: opens in a new tab and renders a ↗ cue. */\n external?: boolean;\n}\n\nexport interface SidebarItemButtonProps\n extends\n ItemBaseProps,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ItemBaseProps> {\n href?: undefined;\n external?: undefined;\n}\n\nexport type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps;\n\n/**\n * A nav row — a link when `href` is given (rendered through the host's\n * `LinkProvider`), otherwise a button. `active` lifts the row onto the\n * primary surface; `external` opens a new tab and appends a ↗ cue.\n */\nfunction Item({\n icon,\n active,\n className,\n children,\n href,\n external,\n ...rest\n}: SidebarItemProps) {\n const Link = useLinkComponent();\n const rowClass = cn(\n SIDEBAR_ITEM,\n active ? SIDEBAR_ITEM_ACTIVE : SIDEBAR_ITEM_INACTIVE,\n className,\n );\n const label = <span className=\"min-w-0 flex-1 truncate\">{children}</span>;\n\n if (href !== undefined) {\n return (\n <li>\n <Link\n href={href}\n aria-current={active ? \"page\" : undefined}\n {...(external && { target: \"_blank\", rel: \"noopener noreferrer\" })}\n {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}\n className={rowClass}\n >\n {renderIcon(icon)}\n {label}\n {external && (\n <>\n {renderIcon(<IconArrowUpRight aria-hidden />)}\n <span className=\"sr-only\">(opens in a new tab)</span>\n </>\n )}\n </Link>\n </li>\n );\n }\n\n return (\n <li>\n <button\n type=\"button\"\n aria-current={active ? \"page\" : undefined}\n {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}\n className={rowClass}\n >\n {renderIcon(icon)}\n {label}\n </button>\n </li>\n );\n}\n\n/* ------------------------------ account row ------------------------------ */\n\n/**\n * Whole-row account trigger. The row itself stays visually quiet — it only\n * carries the `group` state (hover/press/popup-open) and the focus ring;\n * all visual feedback renders on the ⋯ circle via `group-*` classes.\n */\nconst ACCOUNT_ROW =\n \"group outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-base p-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/** Avatar initials: first + last word initial, else the first character. */\nfunction initialsFrom(name: string): string {\n const words = name.split(/\\s+/).filter(Boolean);\n const first = words[0]?.[0] ?? name[0] ?? \"?\";\n const last = words.length >= 2 ? (words[words.length - 1]?.[0] ?? \"\") : \"\";\n return (first + last).toUpperCase();\n}\n\nexport interface SidebarAccountRowProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"children\"\n> {\n /** Display name — also the source for fallback initials. */\n name: string;\n /** Avatar image URL; falls back to initials while loading or on error. */\n avatarSrc?: string;\n /** Override the derived initials. */\n initials?: string;\n ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The account chip pinned to the rail's footer — an xs avatar, the name, and\n * a decorative ⋯ circle. The WHOLE row is one button, but the row is only the\n * control — the circle is the indicator: hover, press, and menu-open feedback\n * all render on the ⋯ (a span wearing the stock secondary-circle button\n * classes), driven by the row's `group` state, so it reads as a button\n * without nesting one.\n *\n * It renders a plain `<button>` and forwards every prop, so it slots straight\n * into a menu: `<Menu.Trigger render={<Sidebar.AccountRow name=\"…\" />} />` —\n * Base UI's `data-popup-open` / `data-pressed` states light up the circle.\n */\nfunction AccountRow({\n name,\n avatarSrc,\n initials,\n className,\n ...props\n}: SidebarAccountRowProps) {\n return (\n <button type=\"button\" className={cn(ACCOUNT_ROW, className)} {...props}>\n <Avatar.Root size=\"xs\">\n {avatarSrc && <Avatar.Image src={avatarSrc} alt=\"\" />}\n <Avatar.Fallback>{initials ?? initialsFrom(name)}</Avatar.Fallback>\n </Avatar.Root>\n <span className=\"text-pho-primary min-w-0 flex-1 truncate text-base\">\n {name}\n </span>\n <span\n aria-hidden\n className={buttonVariants({\n variant: \"outlined\",\n size: \"sm\",\n shape: \"circle\",\n className:\n \"group-hover:bg-pho-primary-hover group-hover:text-pho-secondary-hover group-data-[popup-open]:bg-pho-primary-hover group-data-[popup-open]:text-pho-secondary-hover p-1 group-data-[pressed]:scale-[0.97]\",\n })}\n >\n <IconDots className=\"size-4\" />\n </span>\n </button>\n );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * The composed sidebar rail. Assemble the frame parts and fill them with\n * rows; wire interactivity by composing other Pho parts around them:\n *\n * ```tsx\n * <Sidebar.Root>\n * <Sidebar.Header>…brand…</Sidebar.Header>\n * <Sidebar.Nav>\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Pages</Sidebar.GroupLabel>\n * <Sidebar.List>\n * <Sidebar.Item href=\"/\" icon={IconHome} active>\n * Overview\n * </Sidebar.Item>\n * </Sidebar.List>\n * </Sidebar.Group>\n * </Sidebar.Nav>\n * <Sidebar.Footer>\n * <Menu.Root>\n * <Menu.Trigger render={<Sidebar.AccountRow name=\"Ada Lovelace\" />} />\n * …\n * </Menu.Root>\n * </Sidebar.Footer>\n * </Sidebar.Root>\n * ```\n */\nexport const Sidebar = {\n Root,\n Header,\n Nav,\n Group,\n GroupLabel,\n List,\n Item,\n Footer,\n AccountRow,\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { t as r } from "../chunks/cn-DTiB6ek_.js";
|
|
3
|
-
import "react";
|
|
4
|
-
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
5
|
-
import { AlertDialog as o } from "@base-ui/react/alert-dialog";
|
|
6
|
-
var u = o.Root, g = o.Trigger, i = o.Portal, x = o.Close;
|
|
7
|
-
function l({ className: t, ...a }) {
|
|
8
|
-
return /* @__PURE__ */ e(o.Backdrop, {
|
|
9
|
-
className: r("bg-pho-overlay fixed inset-0 z-50 transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:opacity-0", t),
|
|
10
|
-
...a
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
function s({ className: t, ...a }) {
|
|
14
|
-
return /* @__PURE__ */ e(o.Popup, {
|
|
15
|
-
className: r("border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border outline-none", "transition-[opacity,scale] duration-200 ease-out", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150", t),
|
|
16
|
-
...a
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
function d({ className: t, ...a }) {
|
|
20
|
-
return /* @__PURE__ */ e(o.Title, {
|
|
21
|
-
className: r("text-pho-primary font-display text-display-sm font-medium text-balance", t),
|
|
22
|
-
...a
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
function c({ className: t, ...a }) {
|
|
26
|
-
return /* @__PURE__ */ e(o.Description, {
|
|
27
|
-
className: r("text-pho-description text-display-xs mt-1 font-normal", t),
|
|
28
|
-
...a
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
function f({ title: t, description: a, children: p, className: m, ...y }) {
|
|
32
|
-
return /* @__PURE__ */ n(i, { children: [/* @__PURE__ */ e(l, {}), /* @__PURE__ */ n(s, {
|
|
33
|
-
className: m,
|
|
34
|
-
...y,
|
|
35
|
-
children: [(t || a) && /* @__PURE__ */ n("div", {
|
|
36
|
-
className: "flex flex-col gap-1 px-6 pt-5",
|
|
37
|
-
children: [t && /* @__PURE__ */ e(d, { children: t }), a && /* @__PURE__ */ e(c, { children: a })]
|
|
38
|
-
}), /* @__PURE__ */ e("div", {
|
|
39
|
-
className: "px-6 py-5",
|
|
40
|
-
children: p
|
|
41
|
-
})]
|
|
42
|
-
})] });
|
|
43
|
-
}
|
|
44
|
-
var D = {
|
|
45
|
-
Root: u,
|
|
46
|
-
Trigger: g,
|
|
47
|
-
Portal: i,
|
|
48
|
-
Backdrop: l,
|
|
49
|
-
Popup: s,
|
|
50
|
-
Title: d,
|
|
51
|
-
Description: c,
|
|
52
|
-
Close: x,
|
|
53
|
-
Content: f
|
|
54
|
-
};
|
|
55
|
-
export {
|
|
56
|
-
D as AlertDialog
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType, type ReactNode } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n ComponentProps<T>,\n \"className\"\n> & {\n className?: string;\n};\n\nconst Root = BaseAlertDialog.Root;\nconst Trigger = BaseAlertDialog.Trigger;\nconst Portal = BaseAlertDialog.Portal;\nconst Close = BaseAlertDialog.Close;\n\nfunction Backdrop({\n className,\n ...props\n}: StyledProps<typeof BaseAlertDialog.Backdrop>) {\n return (\n <BaseAlertDialog.Backdrop\n className={cn(\n \"bg-pho-overlay fixed inset-0 z-50 transition-opacity duration-200 ease-out\",\n \"data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Popup({\n className,\n ...props\n}: StyledProps<typeof BaseAlertDialog.Popup>) {\n return (\n <BaseAlertDialog.Popup\n className={cn(\n \"border-pho-secondary bg-pho-primary shadow-pho-xl fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border outline-none\",\n // Opacity + scale only — leave translate centering alone (no transition-all).\n \"transition-[opacity,scale] duration-200 ease-out\",\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Title({\n className,\n ...props\n}: StyledProps<typeof BaseAlertDialog.Title>) {\n return (\n <BaseAlertDialog.Title\n className={cn(\n \"text-pho-primary font-display text-display-sm font-medium text-balance\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Description({\n className,\n ...props\n}: StyledProps<typeof BaseAlertDialog.Description>) {\n return (\n <BaseAlertDialog.Description\n className={cn(\n \"text-pho-description text-display-xs mt-1 font-normal\",\n className,\n )}\n {...props}\n />\n );\n}\n\ninterface ContentProps extends Omit<\n StyledProps<typeof BaseAlertDialog.Popup>,\n \"title\"\n> {\n /** Heading rendered in the panel header. */\n title?: ReactNode;\n /** Supporting text under the title. */\n description?: ReactNode;\n children?: ReactNode;\n}\n\n/**\n * Convenience panel: portal + backdrop + styled popup with a title/description\n * header. The action buttons are your responsibility — an alert dialog requires\n * an explicit choice and must not be dismissed by clicking away.\n */\nfunction Content({\n title,\n description,\n children,\n className,\n ...props\n}: ContentProps) {\n return (\n <Portal>\n <Backdrop />\n <Popup className={className} {...props}>\n {(title || description) && (\n <div className=\"flex flex-col gap-1 px-6 pt-5\">\n {title && <Title>{title}</Title>}\n {description && <Description>{description}</Description>}\n </div>\n )}\n <div className=\"px-6 py-5\">{children}</div>\n </Popup>\n </Portal>\n );\n}\n\n/**\n * Alert dialog built on Base UI `AlertDialog` — a modal that interrupts to\n * confirm a consequential or destructive action. Unlike `Dialog`, it does not\n * close on outside press or Escape: the user must pick an action. Reach for\n * `Dialog` for anything that isn't a forced decision.\n */\nexport const AlertDialog = {\n Root,\n Trigger,\n Portal,\n Backdrop,\n Popup,\n Title,\n Description,\n Close,\n Content,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAgB,MACvB,IAAU,EAAgB,SAC1B,IAAS,EAAgB,QACzB,IAAQ,EAAgB;AAE9B,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GAC4C;AAC/C,SACE,gBAAA,EAAC,EAAgB,UAAjB;AAAA,IACE,WAAW,EACT,8EACA,kGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAgB,OAAjB;AAAA,IACE,WAAW,EACT,+LAEA,oDACA,kEACA,+FACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAgB,OAAjB;AAAA,IACE,WAAW,EACT,0EACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GAC+C;AAClD,SACE,gBAAA,EAAC,EAAgB,aAAjB;AAAA,IACE,WAAW,EACT,yDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAkBA,SAAS,EAAQ,EACf,OAAA,GACA,aAAA,GACA,UAAA,GACA,WAAA,GACA,GAAG,EAAA,GACY;AACf,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAW,CAAA,GACX,gBAAA,EAAC,GAAD;AAAA,IAAkB,WAAA;AAAA,IAAW,GAAI;AAAA,cAAjC,EACI,KAAS,MACT,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAf,CACG,KAAS,gBAAA,EAAC,GAAD,EAAA,UAAQ,EAAa,CAAA,GAC9B,KAAe,gBAAA,EAAC,GAAD,EAAA,UAAc,EAAyB,CAAA,CACpD;AAAA,QAEP,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAa,UAAA;AAAA,IAAc,CAAA,CACrC;AAAA,IACD,EAAA,CAAA;AAEZ;AAQA,IAAa,IAAc;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","names":[],"sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n ComponentProps<T>,\n \"className\"\n> & {\n className?: string;\n};\n\nconst Root = BaseCombobox.Root;\nconst Value = BaseCombobox.Value;\nconst Portal = BaseCombobox.Portal;\nconst Group = BaseCombobox.Group;\nconst Collection = BaseCombobox.Collection;\n\nfunction InputGroup({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.InputGroup>) {\n return (\n <BaseCombobox.InputGroup\n className={cn(\"relative flex items-center\", className)}\n {...props}\n />\n );\n}\n\nfunction Input({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Input>) {\n return (\n <BaseCombobox.Input\n className={cn(\n // text-md on small viewports — iOS zooms into fields under 16px.\n \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand text-md rounded-base w-full px-3 py-2 ring-1 transition-shadow duration-100 ease-linear outline-none ring-inset focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Clear({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Clear>) {\n return (\n <BaseCombobox.Clear\n className={cn(\n \"combobox-clear text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Trigger({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Trigger>) {\n return (\n <BaseCombobox.Trigger\n className={cn(\n \"text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Positioner({\n className,\n sideOffset = 6,\n ...props\n}: StyledProps<typeof BaseCombobox.Positioner>) {\n return (\n <BaseCombobox.Positioner\n sideOffset={sideOffset}\n className={cn(\"z-50 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction Popup({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Popup>) {\n return (\n <BaseCombobox.Popup\n className={cn(\n \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] p-1 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction List({ className, ...props }: StyledProps<typeof BaseCombobox.List>) {\n return (\n <BaseCombobox.List\n className={cn(\n \"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Empty({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Empty>) {\n return (\n <BaseCombobox.Empty\n className={cn(\n \"text-pho-description px-2.5 py-6 text-center text-base empty:m-0 empty:p-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Item({ className, ...props }: StyledProps<typeof BaseCombobox.Item>) {\n return (\n <BaseCombobox.Item\n className={cn(\n \"text-pho-secondary grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none\",\n \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemIndicator({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.ItemIndicator>) {\n return (\n <BaseCombobox.ItemIndicator\n className={cn(\n \"text-pho-brand col-start-1 flex items-center [&>svg]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction GroupLabel({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.GroupLabel>) {\n return (\n <BaseCombobox.GroupLabel\n className={cn(\n \"text-pho-secondary px-2.5 py-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Chips({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.Chips>) {\n return (\n <BaseCombobox.Chips\n className={cn(\n \"bg-pho-primary ring-pho-primary focus-within:ring-pho-brand rounded-base flex flex-wrap items-center gap-1.5 p-1.5 ring-1 ring-inset focus-within:ring-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Chip({ className, ...props }: StyledProps<typeof BaseCombobox.Chip>) {\n return (\n <BaseCombobox.Chip\n className={cn(\n // Keyboard-highlighted chip flips to the inverse chip surface.\n \"bg-pho-secondary text-pho-secondary data-[highlighted]:bg-pho-inverse data-[highlighted]:text-pho-inverse flex items-center gap-1 rounded-sm py-0.5 pr-1 pl-2 text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ChipRemove({\n className,\n ...props\n}: StyledProps<typeof BaseCombobox.ChipRemove>) {\n return (\n <BaseCombobox.ChipRemove\n className={cn(\n \"text-pho-secondary hover:text-pho-secondary-hover in-data-[highlighted]:text-pho-inverse flex cursor-pointer items-center rounded-sm [&>svg]:size-3.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Combobox built on Base UI `Combobox` — a text input that filters a list as\n * you type and commits to a value from it. Pass `items` to `Combobox.Root`;\n * `Combobox.List` takes a render function mapping each (filtered) item to a\n * `Combobox.Item`. Add `Combobox.Chips` for multi-select. For free-form text\n * with suggestions, use `Autocomplete`; for a small fixed set, use `Select`.\n */\nexport const Combobox = {\n Root,\n Value,\n InputGroup,\n Input,\n Trigger,\n Clear,\n Portal,\n Positioner,\n Popup,\n List,\n Collection,\n Empty,\n Item,\n ItemIndicator,\n Group,\n GroupLabel,\n Chips,\n Chip,\n ChipRemove,\n};\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../../src/components/popover/popover.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n ComponentProps<T>,\n \"className\"\n> & {\n className?: string;\n};\n\nconst Root = BasePopover.Root;\nconst Trigger = BasePopover.Trigger;\nconst Portal = BasePopover.Portal;\nconst Close = BasePopover.Close;\n\nfunction Positioner({\n className,\n sideOffset = 8,\n ...props\n}: StyledProps<typeof BasePopover.Positioner>) {\n return (\n <BasePopover.Positioner\n sideOffset={sideOffset}\n className={cn(\"z-50\", className)}\n {...props}\n />\n );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BasePopover.Popup>) {\n return (\n <BasePopover.Popup\n className={cn(\n // Floating layer: keeps shadow elevation; ring-pho-secondary is the\n // site card-hairline edge (#eee / #202020).\n \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-w-[calc(100vw-2rem)] origin-[var(--transform-origin)] p-4 ring-1 transition-[transform,opacity] duration-150 ease-out outline-none ring-inset\",\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Title({ className, ...props }: StyledProps<typeof BasePopover.Title>) {\n return (\n <BasePopover.Title\n className={cn(\"text-pho-primary text-base font-medium\", className)}\n {...props}\n />\n );\n}\n\nfunction Description({\n className,\n ...props\n}: StyledProps<typeof BasePopover.Description>) {\n return (\n <BasePopover.Description\n className={cn(\"text-pho-description mt-1 text-base\", className)}\n {...props}\n />\n );\n}\n\n/**\n * Popover built on Base UI `Popover` — a click-triggered floating panel\n * anchored to its trigger, for rich, interactive content (forms, menus of\n * actions, details). Unlike a `Tooltip`, it can hold focusable controls and is\n * dismissed by clicking away or pressing Escape.\n */\nexport const Popover = {\n Root,\n Trigger,\n Portal,\n Positioner,\n Popup,\n Title,\n Description,\n Close,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAY,MACnB,IAAU,EAAY,SACtB,IAAS,EAAY,QACrB,IAAQ,EAAY;AAE1B,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAY,YAAb;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,QAAQ,CAAS;AAAA,IAC/B,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAGT,mOACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAAG,0CAA0C,CAAS;AAAA,IACjE,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,WAAA,GACA,GAAG,EAAA,GAC2C;AAC9C,SACE,gBAAA,EAAC,EAAY,aAAb;AAAA,IACE,WAAW,EAAG,uCAAuC,CAAS;AAAA,IAC9D,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAU;AAAA,EACrB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AACF"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { ComponentProps, ElementType, ReactNode } from 'react';
|
|
2
|
-
import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
|
|
3
|
-
/** Override Base UI's `string | (state) => string` className with plain string. */
|
|
4
|
-
type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
|
|
5
|
-
className?: string;
|
|
6
|
-
};
|
|
7
|
-
declare function Backdrop({ className, ...props }: StyledProps<typeof BaseAlertDialog.Backdrop>): import("react").JSX.Element;
|
|
8
|
-
declare function Popup({ className, ...props }: StyledProps<typeof BaseAlertDialog.Popup>): import("react").JSX.Element;
|
|
9
|
-
declare function Title({ className, ...props }: StyledProps<typeof BaseAlertDialog.Title>): import("react").JSX.Element;
|
|
10
|
-
declare function Description({ className, ...props }: StyledProps<typeof BaseAlertDialog.Description>): import("react").JSX.Element;
|
|
11
|
-
interface ContentProps extends Omit<StyledProps<typeof BaseAlertDialog.Popup>, "title"> {
|
|
12
|
-
/** Heading rendered in the panel header. */
|
|
13
|
-
title?: ReactNode;
|
|
14
|
-
/** Supporting text under the title. */
|
|
15
|
-
description?: ReactNode;
|
|
16
|
-
children?: ReactNode;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Convenience panel: portal + backdrop + styled popup with a title/description
|
|
20
|
-
* header. The action buttons are your responsibility — an alert dialog requires
|
|
21
|
-
* an explicit choice and must not be dismissed by clicking away.
|
|
22
|
-
*/
|
|
23
|
-
declare function Content({ title, description, children, className, ...props }: ContentProps): import("react").JSX.Element;
|
|
24
|
-
/**
|
|
25
|
-
* Alert dialog built on Base UI `AlertDialog` — a modal that interrupts to
|
|
26
|
-
* confirm a consequential or destructive action. Unlike `Dialog`, it does not
|
|
27
|
-
* close on outside press or Escape: the user must pick an action. Reach for
|
|
28
|
-
* `Dialog` for anything that isn't a forced decision.
|
|
29
|
-
*/
|
|
30
|
-
export declare const AlertDialog: {
|
|
31
|
-
Root: typeof BaseAlertDialog.Root;
|
|
32
|
-
Trigger: BaseAlertDialog.Trigger;
|
|
33
|
-
Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
34
|
-
Backdrop: typeof Backdrop;
|
|
35
|
-
Popup: typeof Popup;
|
|
36
|
-
Title: typeof Title;
|
|
37
|
-
Description: typeof Description;
|
|
38
|
-
Close: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
39
|
-
Content: typeof Content;
|
|
40
|
-
};
|
|
41
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { AlertDialog } from './alert-dialog';
|