@photon-ai/pho-ui 2.13.0 → 2.15.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/IconChevronRight-CzoJnYNI.js +11 -0
- package/dist/chunks/IconChevronRight-CzoJnYNI.js.map +1 -0
- package/dist/chunks/{basic-page-CJwG4I83.js → basic-page-CVZT_zaH.js} +619 -614
- package/dist/chunks/basic-page-CVZT_zaH.js.map +1 -0
- package/dist/chunks/code-block-CdozzaHM.js +139 -0
- package/dist/chunks/code-block-CdozzaHM.js.map +1 -0
- package/dist/chunks/combobox-D4LiGJB2.js +136 -0
- package/dist/chunks/combobox-D4LiGJB2.js.map +1 -0
- package/dist/chunks/command-Ck8IAgV7.js +192 -0
- package/dist/chunks/command-Ck8IAgV7.js.map +1 -0
- package/dist/chunks/copy-button-B_B15mEi.js +56 -0
- package/dist/chunks/copy-button-B_B15mEi.js.map +1 -0
- package/dist/chunks/description-list-C-mwe4ki.js +59 -0
- package/dist/chunks/description-list-C-mwe4ki.js.map +1 -0
- package/dist/chunks/filter-bar-Cjjq38xo.js +259 -0
- package/dist/chunks/filter-bar-Cjjq38xo.js.map +1 -0
- package/dist/chunks/log-list-0AXnjFrk.js +244 -0
- package/dist/chunks/log-list-0AXnjFrk.js.map +1 -0
- package/dist/chunks/toggle-o84tawXy.js +33 -0
- package/dist/chunks/toggle-o84tawXy.js.map +1 -0
- package/dist/chunks/tooltip-BTF7GChl.js +32 -0
- package/dist/chunks/tooltip-BTF7GChl.js.map +1 -0
- package/dist/chunks/trace-CbH0IohX.js +314 -0
- package/dist/chunks/trace-CbH0IohX.js.map +1 -0
- package/dist/chunks/use-copy-D6JwKUll.js +25 -0
- package/dist/chunks/use-copy-D6JwKUll.js.map +1 -0
- package/dist/components/code-block.js +6 -0
- package/dist/components/combobox.js +1 -1
- package/dist/components/command.js +3 -189
- package/dist/components/copy-button.js +6 -0
- package/dist/components/description-list.js +5 -0
- package/dist/components/filter-bar.js +8 -0
- package/dist/components/log-list.js +8 -0
- package/dist/components/phone-input.js +1 -1
- package/dist/components/toggle.js +3 -30
- package/dist/components/tooltip.js +2 -29
- package/dist/components/trace.js +9 -0
- package/dist/index.js +122 -96
- package/dist/primitives.js +2 -2
- package/dist/sections/basic-page.js +17 -17
- package/dist/src/components/accordion/index.d.ts +1 -1
- package/dist/src/components/code-block/code-block.d.ts +43 -0
- package/dist/src/components/code-block/index.d.ts +2 -0
- package/dist/src/components/code-block/tokenize-json.d.ts +12 -0
- package/dist/src/components/combobox/combobox.d.ts +30 -4
- package/dist/src/components/combobox/index.d.ts +1 -1
- package/dist/src/components/copy-button/copy-button.d.ts +49 -0
- package/dist/src/components/copy-button/index.d.ts +1 -0
- package/dist/src/components/description-list/description-list.d.ts +60 -0
- package/dist/src/components/description-list/index.d.ts +1 -0
- package/dist/src/components/filter-bar/filter-bar.d.ts +101 -0
- package/dist/src/components/filter-bar/index.d.ts +1 -0
- package/dist/src/components/log-list/index.d.ts +1 -0
- package/dist/src/components/log-list/log-list.d.ts +136 -0
- package/dist/src/components/trace/index.d.ts +2 -0
- package/dist/src/components/trace/layout.d.ts +48 -0
- package/dist/src/components/trace/trace.d.ts +53 -0
- package/dist/src/index.d.ts +6 -0
- package/dist/src/sections/basic-page/basic-page.d.ts +34 -24
- package/dist/src/utils/index.d.ts +1 -0
- package/dist/src/utils/use-copy.d.ts +14 -0
- package/dist/utils.js +6 -3
- package/package.json +25 -1
- package/src/styles/theme.css +30 -0
- package/dist/chunks/basic-page-CJwG4I83.js.map +0 -1
- package/dist/chunks/combobox-Dj5m_dDd.js +0 -117
- package/dist/chunks/combobox-Dj5m_dDd.js.map +0 -1
- package/dist/components/command.js.map +0 -1
- package/dist/components/toggle.js.map +0 -1
- package/dist/components/tooltip.js.map +0 -1
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as b } from "./cn-ChIgwEl3.js";
|
|
3
|
+
import { a as K } from "./button-CdqS_t5a.js";
|
|
4
|
+
import { t as L } from "./createReactComponent-BqCmnqfX.js";
|
|
5
|
+
import { n as A } from "./copy-button-B_B15mEi.js";
|
|
6
|
+
import { n as I } from "./toggle-o84tawXy.js";
|
|
7
|
+
import { useMemo as v, useState as N } from "react";
|
|
8
|
+
import { jsx as n, jsxs as k } from "react/jsx-runtime";
|
|
9
|
+
var J = [
|
|
10
|
+
["path", {
|
|
11
|
+
d: "M4 6l16 0",
|
|
12
|
+
key: "svg-0"
|
|
13
|
+
}],
|
|
14
|
+
["path", {
|
|
15
|
+
d: "M4 18l5 0",
|
|
16
|
+
key: "svg-1"
|
|
17
|
+
}],
|
|
18
|
+
["path", {
|
|
19
|
+
d: "M4 12h13a3 3 0 0 1 0 6h-4l2 -2m0 4l-2 -2",
|
|
20
|
+
key: "svg-2"
|
|
21
|
+
}]
|
|
22
|
+
], R = L("outline", "text-wrap", "TextWrap", J), f = /("(?:[^"\\]|\\.)*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|([{}[\]:,])/g;
|
|
23
|
+
function D(e) {
|
|
24
|
+
const t = [];
|
|
25
|
+
let o = 0;
|
|
26
|
+
f.lastIndex = 0;
|
|
27
|
+
for (let s = f.exec(e); s != null; s = f.exec(e)) {
|
|
28
|
+
s.index > o && t.push({
|
|
29
|
+
type: "plain",
|
|
30
|
+
text: e.slice(o, s.index)
|
|
31
|
+
});
|
|
32
|
+
const [, a, l, i, p, c] = s;
|
|
33
|
+
a != null ? (t.push({
|
|
34
|
+
type: l != null ? "key" : "string",
|
|
35
|
+
text: a
|
|
36
|
+
}), l != null && t.push({
|
|
37
|
+
type: "punctuation",
|
|
38
|
+
text: l
|
|
39
|
+
})) : i != null ? t.push({
|
|
40
|
+
type: "number",
|
|
41
|
+
text: i
|
|
42
|
+
}) : p != null ? t.push({
|
|
43
|
+
type: "keyword",
|
|
44
|
+
text: p
|
|
45
|
+
}) : c != null && t.push({
|
|
46
|
+
type: "punctuation",
|
|
47
|
+
text: c
|
|
48
|
+
}), o = s.index + s[0].length;
|
|
49
|
+
}
|
|
50
|
+
return o < e.length && t.push({
|
|
51
|
+
type: "plain",
|
|
52
|
+
text: e.slice(o)
|
|
53
|
+
}), t;
|
|
54
|
+
}
|
|
55
|
+
var F = {
|
|
56
|
+
key: "text-pho-code-key",
|
|
57
|
+
string: "text-pho-code-string",
|
|
58
|
+
number: "text-pho-code-number",
|
|
59
|
+
keyword: "text-pho-code-keyword",
|
|
60
|
+
punctuation: "text-pho-code-punctuation",
|
|
61
|
+
plain: void 0
|
|
62
|
+
}, H = "rounded-base border border-pho-secondary bg-pho-code-bg text-pho-code-fg";
|
|
63
|
+
function U(e) {
|
|
64
|
+
if (e == null) return "";
|
|
65
|
+
if (typeof e == "string") return e;
|
|
66
|
+
try {
|
|
67
|
+
return JSON.stringify(e, null, 2) ?? "";
|
|
68
|
+
} catch {
|
|
69
|
+
return String(e);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
function $({ code: e, language: t = "text", title: o, maxLines: s = 30, wrap: a, defaultWrap: l = !1, onWrapChange: i, copy: p = !0, empty: c = "Nothing to show.", actions: y, className: C, ...S }) {
|
|
73
|
+
const d = v(() => U(e), [e]), u = v(() => d.split(`
|
|
74
|
+
`), [d]), [E, O] = N(l), g = a ?? E, T = (r) => {
|
|
75
|
+
a == null && O(r), i?.(r);
|
|
76
|
+
}, [x, W] = N(!1), w = u.length > s, B = w && !x ? u.slice(0, s) : u, h = d === "", _ = o != null || y != null || p || !h, z = typeof o == "string" ? o.toLowerCase() : "code";
|
|
77
|
+
return /* @__PURE__ */ k("div", {
|
|
78
|
+
"data-code-block": "",
|
|
79
|
+
"data-language": t,
|
|
80
|
+
className: b(H, "flex min-w-0 flex-col", C),
|
|
81
|
+
...S,
|
|
82
|
+
children: [
|
|
83
|
+
_ ? /* @__PURE__ */ k("div", {
|
|
84
|
+
className: "border-pho-secondary flex min-h-10 items-center gap-2 border-b py-1 pr-1.5 pl-3",
|
|
85
|
+
children: [
|
|
86
|
+
/* @__PURE__ */ n("div", {
|
|
87
|
+
className: "text-pho-secondary min-w-0 flex-1 truncate text-xs font-medium",
|
|
88
|
+
children: o
|
|
89
|
+
}),
|
|
90
|
+
y,
|
|
91
|
+
h ? null : /* @__PURE__ */ n(I, {
|
|
92
|
+
size: "sm",
|
|
93
|
+
pressed: g,
|
|
94
|
+
onPressedChange: T,
|
|
95
|
+
"aria-label": "Wrap long lines",
|
|
96
|
+
className: "rounded-sm",
|
|
97
|
+
children: /* @__PURE__ */ n(R, { "aria-hidden": !0 })
|
|
98
|
+
}),
|
|
99
|
+
p && !h ? /* @__PURE__ */ n(A, {
|
|
100
|
+
value: d,
|
|
101
|
+
label: z,
|
|
102
|
+
size: "md"
|
|
103
|
+
}) : null
|
|
104
|
+
]
|
|
105
|
+
}) : null,
|
|
106
|
+
h ? /* @__PURE__ */ n("p", {
|
|
107
|
+
className: "text-pho-description m-0 px-3 py-3 text-base",
|
|
108
|
+
children: c
|
|
109
|
+
}) : /* @__PURE__ */ n("pre", {
|
|
110
|
+
className: b("m-0 min-w-0 px-3 py-3 font-mono text-xs leading-5", g ? "[overflow-wrap:anywhere] whitespace-pre-wrap" : "overflow-x-auto whitespace-pre"),
|
|
111
|
+
children: /* @__PURE__ */ n("code", { children: B.map((r, M) => /* @__PURE__ */ n("span", {
|
|
112
|
+
"data-line": "",
|
|
113
|
+
className: "block min-h-5",
|
|
114
|
+
children: t === "json" ? D(r).map((m, j) => m.type === "plain" ? m.text : /* @__PURE__ */ n("span", {
|
|
115
|
+
className: F[m.type],
|
|
116
|
+
children: m.text
|
|
117
|
+
}, j)) : r
|
|
118
|
+
}, M)) })
|
|
119
|
+
}),
|
|
120
|
+
w ? /* @__PURE__ */ n("div", {
|
|
121
|
+
className: "border-pho-secondary flex items-center border-t px-1.5 py-1",
|
|
122
|
+
children: /* @__PURE__ */ n(K, {
|
|
123
|
+
variant: "ghost",
|
|
124
|
+
size: "sm",
|
|
125
|
+
"aria-expanded": x,
|
|
126
|
+
onClick: () => W((r) => !r),
|
|
127
|
+
children: x ? "Show less" : `Show all ${u.length} lines`
|
|
128
|
+
})
|
|
129
|
+
}) : null
|
|
130
|
+
]
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
$.displayName = "CodeBlock";
|
|
134
|
+
export {
|
|
135
|
+
D as n,
|
|
136
|
+
$ as t
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
//# sourceMappingURL=code-block-CdozzaHM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-CdozzaHM.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.46.0_react@19.2.8/node_modules/@tabler/icons-react/dist/esm/icons/IconTextWrap.mjs","../../src/components/code-block/tokenize-json.ts","../../src/components/code-block/code-block.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.46.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 6l16 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M4 18l5 0\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M4 12h13a3 3 0 0 1 0 6h-4l2 -2m0 4l-2 -2\", \"key\": \"svg-2\" }]];\nconst IconTextWrap = createReactComponent(\"outline\", \"text-wrap\", \"TextWrap\", __iconNode);\n\nexport { __iconNode, IconTextWrap as default };\n//# sourceMappingURL=IconTextWrap.mjs.map\n","/**\n * A tokenizer for JSON, and nothing else: keys, strings, numbers, the\n * three keywords, and punctuation. Runs one line at a time (a JSON\n * string never spans lines) so a panel can show its first N lines and\n * stop. Text that isn't JSON comes back as it is, in plain tokens.\n */\n\nexport type JsonTokenType =\n \"key\" | \"string\" | \"number\" | \"keyword\" | \"punctuation\" | \"plain\";\n\nexport interface JsonToken {\n type: JsonTokenType;\n text: string;\n}\n\n// One pass, left to right: a string (a key when a colon follows), a\n// number, a keyword, a bracket or a comma. Anything between is plain.\nconst TOKEN =\n /(\"(?:[^\"\\\\]|\\\\.)*\")(\\s*:)?|(-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?)|\\b(true|false|null)\\b|([{}[\\]:,])/g;\n\nexport function tokenizeJson(line: string): JsonToken[] {\n const tokens: JsonToken[] = [];\n let last = 0;\n TOKEN.lastIndex = 0;\n for (let match = TOKEN.exec(line); match != null; match = TOKEN.exec(line)) {\n if (match.index > last) {\n tokens.push({ type: \"plain\", text: line.slice(last, match.index) });\n }\n const [, string, colon, number, keyword, punctuation] = match;\n if (string != null) {\n tokens.push({ type: colon != null ? \"key\" : \"string\", text: string });\n if (colon != null) tokens.push({ type: \"punctuation\", text: colon });\n } else if (number != null) {\n tokens.push({ type: \"number\", text: number });\n } else if (keyword != null) {\n tokens.push({ type: \"keyword\", text: keyword });\n } else if (punctuation != null) {\n tokens.push({ type: \"punctuation\", text: punctuation });\n }\n last = match.index + match[0].length;\n }\n if (last < line.length) {\n tokens.push({ type: \"plain\", text: line.slice(last) });\n }\n return tokens;\n}\n","import {\n useMemo,\n useState,\n type ComponentProps,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { IconTextWrap } from \"@tabler/icons-react\";\nimport { Button } from \"../button\";\nimport { CopyButton } from \"../copy-button\";\nimport { Toggle } from \"../toggle\";\nimport { cn } from \"../../utils/cn\";\nimport { tokenizeJson, type JsonTokenType } from \"./tokenize-json\";\n\n/**\n * Code Block — a read-only panel for a request body, a response, an\n * event's JSON. Mono text on the code surface, a title row with a wrap\n * toggle and a copy control, and past `maxLines` a fold that shows the\n * first lines with a button for the rest.\n *\n * Design notes:\n * - Wide lines scroll sideways inside the panel; the page never does.\n * Wrapping is a toggle (`wrap` / `defaultWrap`), off by default so a\n * body reads the way it was sent.\n * - `language=\"json\"` colors keys, strings, numbers, and keywords with a\n * built-in tokenizer — no highlighter library at runtime — on the\n * `--color-pho-code-*` tokens, which carry light and dark.\n * - A body that isn't a string (an object) is pretty-printed as JSON.\n */\n\nexport type CodeBlockLanguage = \"json\" | \"text\";\n\nconst TOKEN_CLASS: Record<JsonTokenType, string | undefined> = {\n key: \"text-pho-code-key\",\n string: \"text-pho-code-string\",\n number: \"text-pho-code-number\",\n keyword: \"text-pho-code-keyword\",\n punctuation: \"text-pho-code-punctuation\",\n plain: undefined,\n};\n\n/** The panel's chrome — the card hairline around the code surface. */\nconst CODE_BLOCK_SURFACE =\n \"rounded-base border border-pho-secondary bg-pho-code-bg text-pho-code-fg\";\n\nexport interface CodeBlockProps extends Omit<\n ComponentProps<\"div\">,\n \"title\" | \"children\"\n> {\n /** The text. An object is pretty-printed as JSON (two-space indent). */\n code?: string | object | null;\n /** `json` colors the text; `text` leaves it plain. @default \"text\" */\n language?: CodeBlockLanguage;\n /** The title row's words — \"Request body\", \"Response\". */\n title?: ReactNode;\n /** Past this many lines the panel folds. @default 30 */\n maxLines?: number;\n /** Wrap long lines (controlled). */\n wrap?: boolean;\n /** Wrap long lines at first (uncontrolled). @default false */\n defaultWrap?: boolean;\n onWrapChange?: (wrap: boolean) => void;\n /** The copy control in the title row. @default true */\n copy?: boolean;\n /** What the panel says with no code. @default \"Nothing to show.\" */\n empty?: ReactNode;\n /** More controls in the title row, before the built-in ones. */\n actions?: ReactNode;\n ref?: Ref<HTMLDivElement>;\n}\n\nfunction toText(code: CodeBlockProps[\"code\"]): string {\n if (code == null) return \"\";\n if (typeof code === \"string\") return code;\n try {\n return JSON.stringify(code, null, 2) ?? \"\";\n } catch {\n return String(code);\n }\n}\n\nexport function CodeBlock({\n code,\n language = \"text\",\n title,\n maxLines = 30,\n wrap: wrapProp,\n defaultWrap = false,\n onWrapChange,\n copy = true,\n empty = \"Nothing to show.\",\n actions,\n className,\n ...props\n}: CodeBlockProps) {\n const text = useMemo(() => toText(code), [code]);\n const lines = useMemo(() => text.split(\"\\n\"), [text]);\n const [ownWrap, setOwnWrap] = useState(defaultWrap);\n const wrap = wrapProp ?? ownWrap;\n const setWrap = (next: boolean) => {\n if (wrapProp == null) setOwnWrap(next);\n onWrapChange?.(next);\n };\n const [expanded, setExpanded] = useState(false);\n const folds = lines.length > maxLines;\n const shown = folds && !expanded ? lines.slice(0, maxLines) : lines;\n const isEmpty = text === \"\";\n const hasHeader = title != null || actions != null || copy || !isEmpty;\n const copyLabel = typeof title === \"string\" ? title.toLowerCase() : \"code\";\n return (\n <div\n data-code-block=\"\"\n data-language={language}\n className={cn(CODE_BLOCK_SURFACE, \"flex min-w-0 flex-col\", className)}\n {...props}\n >\n {hasHeader ? (\n <div className=\"border-pho-secondary flex min-h-10 items-center gap-2 border-b py-1 pr-1.5 pl-3\">\n <div className=\"text-pho-secondary min-w-0 flex-1 truncate text-xs font-medium\">\n {title}\n </div>\n {actions}\n {isEmpty ? null : (\n <Toggle\n size=\"sm\"\n pressed={wrap}\n onPressedChange={setWrap}\n aria-label=\"Wrap long lines\"\n className=\"rounded-sm\"\n >\n <IconTextWrap aria-hidden />\n </Toggle>\n )}\n {copy && !isEmpty ? (\n <CopyButton value={text} label={copyLabel} size=\"md\" />\n ) : null}\n </div>\n ) : null}\n {isEmpty ? (\n <p className=\"text-pho-description m-0 px-3 py-3 text-base\">{empty}</p>\n ) : (\n <pre\n className={cn(\n \"m-0 min-w-0 px-3 py-3 font-mono text-xs leading-5\",\n wrap\n ? \"[overflow-wrap:anywhere] whitespace-pre-wrap\"\n : \"overflow-x-auto whitespace-pre\",\n )}\n >\n <code>\n {shown.map((line, index) => (\n <span key={index} data-line=\"\" className=\"block min-h-5\">\n {language === \"json\"\n ? tokenizeJson(line).map((token, at) =>\n token.type === \"plain\" ? (\n token.text\n ) : (\n <span key={at} className={TOKEN_CLASS[token.type]}>\n {token.text}\n </span>\n ),\n )\n : line}\n </span>\n ))}\n </code>\n </pre>\n )}\n {folds ? (\n <div className=\"border-pho-secondary flex items-center border-t px-1.5 py-1\">\n <Button\n variant=\"ghost\"\n size=\"sm\"\n aria-expanded={expanded}\n onClick={() => setExpanded((prev) => !prev)}\n >\n {expanded ? \"Show less\" : `Show all ${lines.length} lines`}\n </Button>\n </div>\n ) : null}\n </div>\n );\n}\n\nCodeBlock.displayName = \"CodeBlock\";\n"],"x_google_ignoreList":[0],"mappings":"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"}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as n } from "./cn-ChIgwEl3.js";
|
|
3
|
+
import { r as p } from "./use-press-pulse-IbNstUT0.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
6
|
+
import { motion as l } from "motion/react";
|
|
7
|
+
import { Combobox as r } from "@base-ui/react/combobox";
|
|
8
|
+
var c = r.Root, u = r.Value, d = r.Portal, h = r.Group, m = r.Collection;
|
|
9
|
+
function g({ className: e, ...t }) {
|
|
10
|
+
return /* @__PURE__ */ o(r.InputGroup, {
|
|
11
|
+
className: n("relative flex items-center", e),
|
|
12
|
+
...t
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function x({ className: e, variant: t = "field", ...a }) {
|
|
16
|
+
return /* @__PURE__ */ o(r.Input, {
|
|
17
|
+
className: n(t === "popup" ? "border-pho-secondary text-pho-primary placeholder:text-pho-placeholder -mx-1 -mt-1 mb-1 w-[calc(100%+0.5rem)] border-b bg-transparent px-3 py-2 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50" : "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", e),
|
|
18
|
+
...a
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function b({ className: e, ...t }) {
|
|
22
|
+
return /* @__PURE__ */ o(r.Clear, {
|
|
23
|
+
className: n("combobox-clear text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4", e),
|
|
24
|
+
...t
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function y({ className: e, variant: t = "icon", disabled: a, ...i }) {
|
|
28
|
+
const { motionProps: s } = p({
|
|
29
|
+
scale: 0.98,
|
|
30
|
+
disabled: !!a
|
|
31
|
+
});
|
|
32
|
+
return t === "field" ? /* @__PURE__ */ o(r.Trigger, {
|
|
33
|
+
disabled: a,
|
|
34
|
+
render: /* @__PURE__ */ o(l.button, { ...s }),
|
|
35
|
+
className: n("bg-pho-primary ring-pho-primary text-pho-primary rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 select-none ring-inset", "transition-[color,background-color,box-shadow,outline-color] duration-150 ease-out focus-visible:outline-none", "data-[popup-open]:ring-pho-brand focus-visible:ring-pho-brand focus-visible:ring-2 data-[popup-open]:ring-2", "data-[placeholder]:text-pho-placeholder", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-pho-secondary [&_svg]:size-4", e),
|
|
36
|
+
...i
|
|
37
|
+
}) : /* @__PURE__ */ o(r.Trigger, {
|
|
38
|
+
disabled: a,
|
|
39
|
+
className: n("text-pho-secondary hover:text-pho-secondary-hover absolute right-2.5 flex cursor-pointer items-center [&>svg]:size-4", e),
|
|
40
|
+
...i
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function f({ className: e, ...t }) {
|
|
44
|
+
return /* @__PURE__ */ o(r.Icon, {
|
|
45
|
+
className: n("flex shrink-0 items-center", e),
|
|
46
|
+
...t
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
function v({ className: e, sideOffset: t = 6, ...a }) {
|
|
50
|
+
return /* @__PURE__ */ o(r.Positioner, {
|
|
51
|
+
sideOffset: t,
|
|
52
|
+
className: n("z-50 outline-none", e),
|
|
53
|
+
...a
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
function w({ className: e, ...t }) {
|
|
57
|
+
return /* @__PURE__ */ o(r.Popup, {
|
|
58
|
+
className: 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", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", e),
|
|
59
|
+
...t
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function N({ className: e, ...t }) {
|
|
63
|
+
return /* @__PURE__ */ o(r.List, {
|
|
64
|
+
className: n("max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain", e),
|
|
65
|
+
...t
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
function C({ className: e, ...t }) {
|
|
69
|
+
return /* @__PURE__ */ o(r.Empty, {
|
|
70
|
+
className: n("text-pho-description px-2.5 py-6 text-center text-base empty:m-0 empty:p-0", e),
|
|
71
|
+
...t
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
function I({ className: e, ...t }) {
|
|
75
|
+
return /* @__PURE__ */ o(r.Item, {
|
|
76
|
+
className: n("text-pho-secondary relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-8 text-base outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary", e),
|
|
77
|
+
...t
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function P({ className: e, ...t }) {
|
|
81
|
+
return /* @__PURE__ */ o(r.ItemIndicator, {
|
|
82
|
+
className: n("text-pho-brand absolute top-1/2 left-2 flex -translate-y-1/2 items-center [&>svg]:size-4", e),
|
|
83
|
+
...t
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
function z({ className: e, ...t }) {
|
|
87
|
+
return /* @__PURE__ */ o(r.GroupLabel, {
|
|
88
|
+
className: n("text-pho-secondary px-2.5 py-1.5 text-xs font-medium", e),
|
|
89
|
+
...t
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
function G({ className: e, ...t }) {
|
|
93
|
+
return /* @__PURE__ */ o(r.Chips, {
|
|
94
|
+
className: 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", e),
|
|
95
|
+
...t
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
function L({ className: e, ...t }) {
|
|
99
|
+
return /* @__PURE__ */ o(r.Chip, {
|
|
100
|
+
className: 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", e),
|
|
101
|
+
...t
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function R({ className: e, ...t }) {
|
|
105
|
+
return /* @__PURE__ */ o(r.ChipRemove, {
|
|
106
|
+
className: 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", e),
|
|
107
|
+
...t
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
var B = {
|
|
111
|
+
Root: c,
|
|
112
|
+
Value: u,
|
|
113
|
+
InputGroup: g,
|
|
114
|
+
Input: x,
|
|
115
|
+
Trigger: y,
|
|
116
|
+
Icon: f,
|
|
117
|
+
Clear: b,
|
|
118
|
+
Portal: d,
|
|
119
|
+
Positioner: v,
|
|
120
|
+
Popup: w,
|
|
121
|
+
List: N,
|
|
122
|
+
Collection: m,
|
|
123
|
+
Empty: C,
|
|
124
|
+
Item: I,
|
|
125
|
+
ItemIndicator: P,
|
|
126
|
+
Group: h,
|
|
127
|
+
GroupLabel: z,
|
|
128
|
+
Chips: G,
|
|
129
|
+
Chip: L,
|
|
130
|
+
ChipRemove: R
|
|
131
|
+
};
|
|
132
|
+
export {
|
|
133
|
+
B as t
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
//# sourceMappingURL=combobox-D4LiGJB2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combobox-D4LiGJB2.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 { motion } from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePressPulse } from \"../../utils/use-press-pulse\";\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\nexport type ComboboxInputVariant = \"field\" | \"popup\";\n\nfunction Input({\n className,\n variant = \"field\",\n ...props\n}: StyledProps<typeof BaseCombobox.Input> & {\n /**\n * `field` (default) is the boxed control a list filters under. `popup`\n * is the search line at the top of the popup when a field `Trigger`\n * stands in for the input: borderless, a hairline below, spanning the\n * popup's width.\n * @default \"field\"\n */\n variant?: ComboboxInputVariant;\n}) {\n return (\n <BaseCombobox.Input\n className={cn(\n variant === \"popup\"\n ? \"border-pho-secondary text-pho-primary placeholder:text-pho-placeholder -mx-1 -mt-1 mb-1 w-[calc(100%+0.5rem)] border-b bg-transparent px-3 py-2 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50\"\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\nexport type ComboboxTriggerVariant = \"icon\" | \"field\";\n\nfunction Trigger({\n className,\n variant = \"icon\",\n disabled,\n ...props\n}: StyledProps<typeof BaseCombobox.Trigger> & {\n /**\n * `icon` (default) is the small button beside the input in an\n * `InputGroup`. `field` is the whole control: `Select`'s trigger chrome\n * around a `Combobox.Value` and a `Combobox.Icon`, for a searchable\n * select whose `Input` then lives inside the popup (`variant=\"popup\"`).\n * @default \"icon\"\n */\n variant?: ComboboxTriggerVariant;\n}) {\n // The field pulses on press the way Select's trigger does.\n const { motionProps } = usePressPulse({\n scale: 0.98,\n disabled: Boolean(disabled),\n });\n if (variant === \"field\") {\n return (\n <BaseCombobox.Trigger\n disabled={disabled}\n render={<motion.button {...motionProps} />}\n className={cn(\n // Select's flat field surface, so a searchable select stands in\n // a form beside a Select and no one can tell them apart at rest.\n \"bg-pho-primary ring-pho-primary text-pho-primary rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 select-none ring-inset\",\n \"transition-[color,background-color,box-shadow,outline-color] duration-150 ease-out focus-visible:outline-none\",\n \"data-[popup-open]:ring-pho-brand focus-visible:ring-pho-brand focus-visible:ring-2 data-[popup-open]:ring-2\",\n \"data-[placeholder]:text-pho-placeholder\",\n \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n \"[&_svg]:text-pho-secondary [&_svg]:size-4\",\n className,\n )}\n {...props}\n />\n );\n }\n return (\n <BaseCombobox.Trigger\n disabled={disabled}\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\n/** The glyph at a field trigger's end, `IconSelector` as on `Select`. */\nfunction Icon({ className, ...props }: StyledProps<typeof BaseCombobox.Icon>) {\n return (\n <BaseCombobox.Icon\n className={cn(\"flex shrink-0 items-center\", className)}\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 // The selection mark has a seat of its own at the left (see\n // `ItemIndicator`), reserved by padding rather than a grid column:\n // Base UI mounts the indicator only while the item is selected, and\n // free-form children (a text node, a label with spaces) must not\n // slide into that seat and wrap there when it is empty.\n \"text-pho-secondary relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-8 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 absolute top-1/2 left-2 flex -translate-y-1/2 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 a searchable\n * select, `Combobox.Trigger variant=\"field\"` holds the `Value` and an\n * `Icon`, and the `Input` (`variant=\"popup\"`) moves inside the popup. For\n * free-form text with suggestions, use `Autocomplete`; for a small fixed\n * set, use `Select`.\n */\nexport const Combobox = {\n Root,\n Value,\n InputGroup,\n Input,\n Trigger,\n Icon,\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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"}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as a } from "./cn-ChIgwEl3.js";
|
|
3
|
+
import { SPRING_SETTLE as z } from "../motion.js";
|
|
4
|
+
import { t as C } from "./IconArrowUpRight-DGgKzQwV.js";
|
|
5
|
+
import { t as M } from "./IconChevronLeft-CSWMKQ4C.js";
|
|
6
|
+
import { t as O } from "./animated-height-CCO-Ocoz.js";
|
|
7
|
+
import { t as d } from "./dialog-BxKACOj5.js";
|
|
8
|
+
import { useEffect as T, useId as D, useLayoutEffect as V, useRef as $ } from "react";
|
|
9
|
+
import { Fragment as w, jsx as t, jsxs as u } from "react/jsx-runtime";
|
|
10
|
+
import { LayoutGroup as A, motion as x, useReducedMotion as F } from "motion/react";
|
|
11
|
+
import { Command as s, useCommandState as R } from "cmdk";
|
|
12
|
+
var H = z;
|
|
13
|
+
function E({ shouldFilter: r = !1, className: e, children: n, ...l }) {
|
|
14
|
+
const i = D();
|
|
15
|
+
return /* @__PURE__ */ t(s, {
|
|
16
|
+
className: a("bg-pho-primary text-pho-primary flex w-full flex-col overflow-hidden outline-none", e),
|
|
17
|
+
shouldFilter: r,
|
|
18
|
+
...l,
|
|
19
|
+
children: /* @__PURE__ */ t(A, {
|
|
20
|
+
id: i,
|
|
21
|
+
children: n
|
|
22
|
+
})
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function B({ className: r, ...e }) {
|
|
26
|
+
return /* @__PURE__ */ t("div", {
|
|
27
|
+
className: a("border-pho-secondary relative flex items-center border-b", r),
|
|
28
|
+
...e
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
var U = typeof window > "u" ? T : V;
|
|
32
|
+
function W(r, e) {
|
|
33
|
+
typeof r == "function" ? r(e) : r && (r.current = e);
|
|
34
|
+
}
|
|
35
|
+
function q({ className: r, value: e, ref: n, ...l }) {
|
|
36
|
+
const i = $(null), c = R((o) => o.search);
|
|
37
|
+
return U(() => {
|
|
38
|
+
const o = i.current;
|
|
39
|
+
e == null || o == null || e === c || (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(o, e), o.dispatchEvent(new Event("input", { bubbles: !0 })));
|
|
40
|
+
}, [e, c]), /* @__PURE__ */ t(s.Input, {
|
|
41
|
+
className: a("text-pho-primary placeholder:text-pho-placeholder text-display-xs w-full bg-transparent px-3 py-3 outline-none disabled:cursor-not-allowed disabled:opacity-50", r),
|
|
42
|
+
...l,
|
|
43
|
+
ref: (o) => {
|
|
44
|
+
i.current = o, W(n, o);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function J({ className: r, children: e, ...n }) {
|
|
49
|
+
return /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(x.div, {
|
|
50
|
+
layoutScroll: !0,
|
|
51
|
+
className: "max-h-[min(24rem,60vh)] scroll-py-1 overflow-y-auto overscroll-contain",
|
|
52
|
+
children: /* @__PURE__ */ t(s.List, {
|
|
53
|
+
className: a("relative isolate p-1", r),
|
|
54
|
+
...n,
|
|
55
|
+
children: e
|
|
56
|
+
})
|
|
57
|
+
}) });
|
|
58
|
+
}
|
|
59
|
+
function K({ className: r, ...e }) {
|
|
60
|
+
return /* @__PURE__ */ t(s.Empty, {
|
|
61
|
+
className: a("text-pho-description px-2.5 py-6 text-center text-base", r),
|
|
62
|
+
...e
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
function Q({ className: r, ...e }) {
|
|
66
|
+
return /* @__PURE__ */ t(s.Group, {
|
|
67
|
+
className: a("[&_[cmdk-group-heading]]:text-pho-secondary [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs", r),
|
|
68
|
+
...e
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
function f({ className: r, ...e }) {
|
|
72
|
+
return /* @__PURE__ */ t("span", {
|
|
73
|
+
className: a("text-pho-secondary flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", r),
|
|
74
|
+
...e
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
function k({ className: r, level: e = "item", ...n }) {
|
|
78
|
+
return /* @__PURE__ */ t("span", {
|
|
79
|
+
className: a("text-md block truncate", e === "item" && "text-pho-primary", r),
|
|
80
|
+
...n
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function I() {
|
|
84
|
+
return /* @__PURE__ */ t(C, {
|
|
85
|
+
"aria-hidden": !0,
|
|
86
|
+
className: "text-pho-description size-4 shrink-0"
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function X({ className: r, level: e = "item", icon: n, iconSlot: l, title: i, path: c, scope: o, external: y, children: m, value: p, ...L }) {
|
|
90
|
+
const S = F(), g = typeof p == "string" ? p.trim() : "", G = R((h) => h.value), _ = g !== "" && G === g, b = i != null, N = e === "result", P = N && (n != null || l), v = /* @__PURE__ */ t(s.Item, {
|
|
91
|
+
"data-level": e,
|
|
92
|
+
value: p,
|
|
93
|
+
className: a("text-pho-secondary flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-2 pr-2.5 text-base outline-none select-none", e === "subsubitem" ? "pl-6" : "pl-2", "data-[selected=true]:text-pho-primary data-[selected=true]:bg-pho-ghost-hover", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", r),
|
|
94
|
+
...L,
|
|
95
|
+
children: b && N ? /* @__PURE__ */ u(w, { children: [
|
|
96
|
+
P ? /* @__PURE__ */ t(f, {
|
|
97
|
+
"aria-hidden": n == null ? !0 : void 0,
|
|
98
|
+
children: n ?? null
|
|
99
|
+
}) : null,
|
|
100
|
+
/* @__PURE__ */ u("span", {
|
|
101
|
+
className: "text-md flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
|
|
102
|
+
children: [/* @__PURE__ */ t("span", {
|
|
103
|
+
className: "text-pho-primary truncate",
|
|
104
|
+
children: i
|
|
105
|
+
}), (c ?? []).map((h, j) => /* @__PURE__ */ u("span", {
|
|
106
|
+
className: "text-pho-description flex shrink-0 items-center gap-0.5",
|
|
107
|
+
children: [/* @__PURE__ */ t(M, {
|
|
108
|
+
"aria-hidden": !0,
|
|
109
|
+
className: "size-4 shrink-0"
|
|
110
|
+
}), h]
|
|
111
|
+
}, j))]
|
|
112
|
+
}),
|
|
113
|
+
o != null && o !== "" ? /* @__PURE__ */ t("span", {
|
|
114
|
+
className: "text-pho-description shrink-0 text-xs",
|
|
115
|
+
children: o
|
|
116
|
+
}) : null,
|
|
117
|
+
y ? /* @__PURE__ */ t(I, {}) : null,
|
|
118
|
+
m
|
|
119
|
+
] }) : b ? /* @__PURE__ */ u(w, { children: [
|
|
120
|
+
/* @__PURE__ */ t(f, {
|
|
121
|
+
"aria-hidden": n == null ? !0 : void 0,
|
|
122
|
+
children: n ?? null
|
|
123
|
+
}),
|
|
124
|
+
/* @__PURE__ */ t("span", {
|
|
125
|
+
className: "min-w-0 flex-1",
|
|
126
|
+
children: /* @__PURE__ */ t(k, {
|
|
127
|
+
level: e,
|
|
128
|
+
children: i
|
|
129
|
+
})
|
|
130
|
+
}),
|
|
131
|
+
y ? /* @__PURE__ */ t(I, {}) : null,
|
|
132
|
+
m
|
|
133
|
+
] }) : m
|
|
134
|
+
});
|
|
135
|
+
return S ? v : /* @__PURE__ */ t(x.div, {
|
|
136
|
+
layout: "position",
|
|
137
|
+
layoutId: typeof p == "string" ? p : void 0,
|
|
138
|
+
initial: !1,
|
|
139
|
+
transition: _ ? { duration: 0 } : H,
|
|
140
|
+
children: v
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
function Y({ className: r, ...e }) {
|
|
144
|
+
return /* @__PURE__ */ t(s.Separator, {
|
|
145
|
+
className: a("-mx-1 my-1 h-px bg-[var(--border-color-pho-secondary)]", r),
|
|
146
|
+
...e
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
function Z({ className: r, ...e }) {
|
|
150
|
+
return /* @__PURE__ */ t(s.Loading, {
|
|
151
|
+
className: a("text-pho-description px-2.5 py-1.5 text-base", r),
|
|
152
|
+
...e
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
function ee({ open: r, onOpenChange: e, label: n, className: l, children: i, ...c }) {
|
|
156
|
+
return /* @__PURE__ */ t(d.Root, {
|
|
157
|
+
open: r,
|
|
158
|
+
onOpenChange: e,
|
|
159
|
+
children: /* @__PURE__ */ u(d.Portal, { children: [/* @__PURE__ */ t(d.Backdrop, {}), /* @__PURE__ */ t(d.Popup, {
|
|
160
|
+
"aria-label": n,
|
|
161
|
+
className: a("top-[max(4rem,18vh)] max-w-xl translate-y-0 overflow-hidden p-0", l),
|
|
162
|
+
children: /* @__PURE__ */ t(x.div, {
|
|
163
|
+
layoutRoot: !0,
|
|
164
|
+
children: /* @__PURE__ */ t(E, {
|
|
165
|
+
label: n,
|
|
166
|
+
...c,
|
|
167
|
+
children: i
|
|
168
|
+
})
|
|
169
|
+
})
|
|
170
|
+
})] })
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
var ue = {
|
|
174
|
+
Root: E,
|
|
175
|
+
InputGroup: B,
|
|
176
|
+
Input: q,
|
|
177
|
+
List: J,
|
|
178
|
+
Empty: K,
|
|
179
|
+
Group: Q,
|
|
180
|
+
Item: X,
|
|
181
|
+
ItemIcon: f,
|
|
182
|
+
ItemTitle: k,
|
|
183
|
+
Separator: Y,
|
|
184
|
+
Loading: Z,
|
|
185
|
+
Dialog: ee
|
|
186
|
+
};
|
|
187
|
+
export {
|
|
188
|
+
R as n,
|
|
189
|
+
ue as t
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
//# sourceMappingURL=command-Ck8IAgV7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command-Ck8IAgV7.js","names":[],"sources":["../../src/components/command/command.tsx"],"sourcesContent":["import {\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n type ComponentProps,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { IconArrowUpRight, IconChevronLeft } from \"@tabler/icons-react\";\nimport { SPRING_SETTLE } from \"../../motion\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\";\nimport { AnimatedHeight } from \"../../utils/animated-height\";\nimport { cn } from \"../../utils/cn\";\nimport { Dialog as PhoDialog } from \"../dialog\";\n\n/**\n * Spring for row moves (FLIP / shared-layout) — same feel as\n * `AnimatedHeight`: quick and critically damped, so rows glide to their new\n * slot without overshooting into neighbours.\n */\nconst ROW_MOVE_SPRING = SPRING_SETTLE;\n\nfunction Root({\n // Filtering is yours by default: filter in render (state above the\n // palette) so the rows' FLIP diff can glide survivors to their slots.\n // cmdk's built-in matcher reorders DOM imperatively — invisible to the\n // layout pass — so it is opt-in: pass `shouldFilter` to hand matching\n // and ranking back to cmdk at the cost of the animation.\n shouldFilter = false,\n className,\n children,\n ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n // Namespace row layoutIds per palette instance — the docs page mounts the\n // inline demo and the dialog demo at once, with identical item values.\n const layoutNamespace = useId();\n return (\n <CommandPrimitive\n className={cn(\n \"bg-pho-primary text-pho-primary flex w-full flex-col overflow-hidden outline-none\",\n className,\n )}\n shouldFilter={shouldFilter}\n {...props}\n >\n <LayoutGroup id={layoutNamespace}>{children}</LayoutGroup>\n </CommandPrimitive>\n );\n}\n\n/**\n * The input row — a bottom hairline separates it from the list. Position\n * leading icons absolutely and pad the input (`pl-9`), mirroring\n * `Autocomplete.InputGroup`.\n */\nfunction InputGroup({ className, ...props }: ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\n \"border-pho-secondary relative flex items-center border-b\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/** SSR-safe layout effect (same pattern cmdk uses internally). */\nconst useIsomorphicLayoutEffect =\n typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (typeof ref === \"function\") ref(value);\n else if (ref) ref.current = value;\n}\n\nfunction Input({\n className,\n value,\n ref: consumerRef,\n ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n const inputRef = useRef<HTMLInputElement>(null);\n const search = useCommandState((state) => state.search);\n\n // cmdk stays uncontrolled here on purpose. Its controlled path syncs the\n // `value` prop into the search store through a passive effect — one painted\n // frame late — so on that stale frame the old row is still \"selected\" while\n // the list has already reflowed, and the selection pill visibly rides it\n // before snapping to the re-selected first row. Uncontrolled keystrokes\n // update search + first-row selection synchronously (pre-paint), killing\n // that frame in both directions (typing and clearing).\n //\n // The consumer-facing API is still controlled: external `value` changes\n // (programmatic reset, initial query) are replayed through the native input\n // path below so store, display, and selection take the same sync route.\n useIsomorphicLayoutEffect(() => {\n const input = inputRef.current;\n if (value == null || input == null || value === search) return;\n const setNativeValue = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n \"value\",\n )?.set;\n setNativeValue?.call(input, value);\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }, [value, search]);\n\n return (\n <CommandPrimitive.Input\n className={cn(\n // Borderless inside the palette surface — the InputGroup hairline\n // carries the edge. display-xs (18px) keeps iOS from zooming in.\n \"text-pho-primary placeholder:text-pho-placeholder text-display-xs w-full bg-transparent px-3 py-3 outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n ref={(node) => {\n inputRef.current = node;\n assignRef(consumerRef, node);\n }}\n />\n );\n}\n\nfunction List({\n className,\n children,\n ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n return (\n // Same spring as the onboarding / invite Card shell — list height glides\n // when idle ↔ search (or filter) changes instead of jumping.\n <AnimatedHeight>\n {/* The scroller is a motion element with layoutScroll so the rows'\n FLIP projections account for its scroll offset — without it,\n scrolling reads as a layout change and every row glides to\n compensate. scroll-py keeps a breath above and below the row\n being scrolled into view. */}\n <motion.div\n layoutScroll\n className=\"max-h-[min(24rem,60vh)] scroll-py-1 overflow-y-auto overscroll-contain\"\n >\n <CommandPrimitive.List\n className={cn(\"relative isolate p-1\", className)}\n {...props}\n >\n {children}\n </CommandPrimitive.List>\n </motion.div>\n </AnimatedHeight>\n );\n}\n\nfunction Empty({\n className,\n ...props\n}: ComponentProps<typeof CommandPrimitive.Empty>) {\n return (\n <CommandPrimitive.Empty\n className={cn(\n \"text-pho-description px-2.5 py-6 text-center text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Group({\n className,\n ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n return (\n <CommandPrimitive.Group\n className={cn(\n // cmdk renders the `heading` prop in a [cmdk-group-heading] wrapper —\n // typography mirrors `Autocomplete.GroupLabel`.\n \"[&_[cmdk-group-heading]]:text-pho-secondary [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Row layout mode:\n * - `item` / `subitem` / `subsubitem` — idle hierarchy (icon column + indent)\n * - `result` — flat search hit (breadcrumb + trailing scope)\n */\nexport type CommandItemLevel = \"item\" | \"subitem\" | \"subsubitem\" | \"result\";\n\ntype ItemPrimitiveProps = ComponentProps<typeof CommandPrimitive.Item>;\n\nexport interface CommandItemProps extends Omit<\n ItemPrimitiveProps,\n \"children\" | \"title\"\n> {\n /**\n * Row depth / mode in the palette:\n * - `item` — page / top destination (icon + title)\n * - `subitem` — section under an item (label aligns with the item title)\n * - `subsubitem` — row under a section (one step deeper)\n * - `result` — flat search hit (`title` + `path` crumbs + `scope`)\n */\n level?: CommandItemLevel;\n /**\n * Leading glyph. On idle `item` rows (and reserved for sub-levels). On\n * `result` rows, pass the resolved icon (self → parent → grandparent).\n */\n icon?: ReactNode;\n /**\n * When `level=\"result\"`, force the icon column so labels align across the\n * list even if this row's `icon` is empty. Set true when any sibling result\n * has an icon; omit when the whole result set is icon-less.\n */\n iconSlot?: boolean;\n /** Primary label. Prefer this over free-form children for the shared layout. */\n title?: ReactNode;\n /**\n * Ancestors after `title` for `level=\"result\"` — parent → page\n * (e.g. `[\"Agent profile\", \"Settings\"]` → `Name < Agent profile < Settings`).\n */\n path?: ReactNode[];\n /**\n * Trailing scope for `level=\"result\"` — `Project` vs `Personal`, not a nav group.\n */\n scope?: ReactNode;\n /** Shows a trailing external-link glyph (opens outside the app). */\n external?: boolean;\n /**\n * Free-form content. When `title` is set, rendered after the label stack.\n * When `title` is omitted, becomes the row body (legacy / simple items).\n */\n children?: ReactNode;\n}\n\n/** Leading icon column — `size-4`, secondary ink. */\nfunction ItemIcon({ className, ...props }: ComponentProps<\"span\">) {\n return (\n <span\n className={cn(\n \"text-pho-secondary flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/** Primary label — medium + primary ink on `item` rows. */\nfunction ItemTitle({\n className,\n level = \"item\",\n ...props\n}: ComponentProps<\"span\"> & { level?: CommandItemLevel }) {\n return (\n <span\n className={cn(\n \"text-md block truncate\",\n level === \"item\" && \"text-pho-primary\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * One selectable row. Idle palettes use `level` + `icon` / `title`\n * (item → subitem → subsubitem). Searching uses `level=\"result\"` with `path`\n * crumbs and a trailing `scope` (Project / Personal). No description line —\n * match via `keywords` / aliases instead.\n */\nfunction ExternalGlyph() {\n return (\n <IconArrowUpRight\n aria-hidden\n className=\"text-pho-description size-4 shrink-0\"\n />\n );\n}\n\nfunction Item({\n className,\n level = \"item\",\n icon,\n iconSlot,\n title,\n path,\n scope,\n external,\n children,\n value,\n ...props\n}: CommandItemProps) {\n const reduceMotion = useReducedMotion();\n // cmdk registers `value.trim()` and exposes the selected one as\n // `state.value` — mirrors cmdk's own `data-selected` computation.\n const trimmedValue = typeof value === \"string\" ? value.trim() : \"\";\n const selectedValue = useCommandState((state) => state.value);\n const isSelected = trimmedValue !== \"\" && selectedValue === trimmedValue;\n const structured = title != null;\n const isResult = level === \"result\";\n // Reserve the icon column when the row has an icon, or when the list asks\n // for alignment (`iconSlot`) even if this row's glyph is empty.\n const showResultIcon = isResult && (icon != null || iconSlot);\n\n const row = (\n <CommandPrimitive.Item\n data-level={level}\n value={value}\n className={cn(\n \"text-pho-secondary flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-2 pr-2.5 text-base outline-none select-none\",\n // subsubitem steps in; item/subitem share the base gutter.\n level === \"subsubitem\" ? \"pl-6\" : \"pl-2\",\n // Secondary at rest; selection lifts to primary ink (Menu idiom).\n // The wash lands with it instantly — stepping through rows is a\n // snap, not a flight.\n \"data-[selected=true]:text-pho-primary data-[selected=true]:bg-pho-ghost-hover\",\n \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n className,\n )}\n {...props}\n >\n {structured && isResult ? (\n <>\n {showResultIcon ? (\n <ItemIcon aria-hidden={icon == null ? true : undefined}>\n {icon ?? null}\n </ItemIcon>\n ) : null}\n {/* Same text-md line box as idle ItemTitle so row height matches (36px). */}\n <span className=\"text-md flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n <span className=\"text-pho-primary truncate\">{title}</span>\n {(path ?? []).map((segment, index) => (\n <span\n key={index}\n className=\"text-pho-description flex shrink-0 items-center gap-0.5\"\n >\n <IconChevronLeft aria-hidden className=\"size-4 shrink-0\" />\n {segment}\n </span>\n ))}\n </span>\n {scope != null && scope !== \"\" ? (\n <span className=\"text-pho-description shrink-0 text-xs\">\n {scope}\n </span>\n ) : null}\n {external ? <ExternalGlyph /> : null}\n {children}\n </>\n ) : structured ? (\n <>\n {/* Icon column always reserved so subitem labels share the item title edge. */}\n <ItemIcon aria-hidden={icon == null ? true : undefined}>\n {icon ?? null}\n </ItemIcon>\n <span className=\"min-w-0 flex-1\">\n <ItemTitle level={level}>{title}</ItemTitle>\n </span>\n {external ? <ExternalGlyph /> : null}\n {children}\n </>\n ) : (\n children\n )}\n </CommandPrimitive.Item>\n );\n\n if (reduceMotion) return row;\n\n return (\n // FLIP wrapper: rows that stay mounted glide when neighbours enter or\n // leave, and a row remounting elsewhere with the same `value` (idle group\n // ↔ flat search result) inherits the old bounds via its layoutId and\n // slides to the new slot — the iOS list-diff feel. Rows without a match\n // simply appear / disappear so the whole list never swarms.\n //\n // The selected row is the exception: it skips the travel and appears at\n // its final slot immediately, so the selection wash is never sitting on\n // empty space waiting for its row to fly in.\n <motion.div\n layout=\"position\"\n layoutId={typeof value === \"string\" ? value : undefined}\n initial={false}\n transition={isSelected ? { duration: 0 } : ROW_MOVE_SPRING}\n >\n {row}\n </motion.div>\n );\n}\n\nfunction Separator({\n className,\n ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n return (\n <CommandPrimitive.Separator\n className={cn(\n \"-mx-1 my-1 h-px bg-[var(--border-color-pho-secondary)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction Loading({\n className,\n ...props\n}: ComponentProps<typeof CommandPrimitive.Loading>) {\n return (\n <CommandPrimitive.Loading\n className={cn(\"text-pho-description px-2.5 py-1.5 text-base\", className)}\n {...props}\n />\n );\n}\n\ntype DialogRootProps = ComponentProps<typeof PhoDialog.Root>;\n\ninterface CommandDialogProps extends ComponentProps<typeof CommandPrimitive> {\n /** Controlled dialog state — pass straight through to `Dialog.Root`. */\n open?: DialogRootProps[\"open\"];\n onOpenChange?: DialogRootProps[\"onOpenChange\"];\n /** Accessible name for the palette (dialog and command menu). */\n label?: string;\n /** Extra classes for the dialog panel (not the command root). */\n className?: string;\n}\n\n/**\n * A command palette in a modal — Pho's `Dialog` overlay (Base UI) around a\n * `Command.Root`, raised above center. We deliberately skip cmdk's own\n * `Command.Dialog` (Radix) so overlays stay on one primitive stack.\n *\n * List height springs via `AnimatedHeight` (same feel as the Card shell on\n * onboarding / invite) — the input row stays put while results resize.\n */\nfunction Dialog({\n open,\n onOpenChange,\n label,\n className,\n children,\n ...props\n}: CommandDialogProps) {\n return (\n <PhoDialog.Root open={open} onOpenChange={onOpenChange}>\n <PhoDialog.Portal>\n <PhoDialog.Backdrop />\n <PhoDialog.Popup\n aria-label={label}\n // Palette sits above center so the list grows downward from a\n // stable top edge instead of jumping around it.\n className={cn(\n \"top-[max(4rem,18vh)] max-w-xl translate-y-0 overflow-hidden p-0\",\n className,\n )}\n >\n {/* The popup is position: fixed; layout animations inside a fixed\n element need a layoutRoot to project against, or their\n measurements drift with the page scroll. */}\n <motion.div layoutRoot>\n <Root label={label} {...props}>\n {children}\n </Root>\n </motion.div>\n </PhoDialog.Popup>\n </PhoDialog.Portal>\n </PhoDialog.Root>\n );\n}\n\n/**\n * Command menu built on `cmdk` — a filterable list of actions driven from a\n * single input, keyboard-first. Compose inline (`Command.Root`) or as a\n * ⌘K-style modal palette (`Command.Dialog`, which owns the overlay).\n * Filtering is yours by default — filter in render so the rows' diff can\n * glide; pass `shouldFilter` to hand matching and ranking to cmdk (its\n * imperative reorder skips the animation).\n *\n * Rows share one layout via `Command.Item` `level` — idle\n * `item` → `subitem` → `subsubitem`, or flat `result` while searching.\n */\nexport const Command = {\n Root,\n InputGroup,\n Input,\n List,\n Empty,\n Group,\n Item,\n ItemIcon,\n ItemTitle,\n Separator,\n Loading,\n Dialog,\n};\n\n/** Re-export of cmdk's state selector hook (search, value, filtered counts). */\nexport { useCommandState };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as d } from "./cn-ChIgwEl3.js";
|
|
3
|
+
import { t as u } from "./resolve-variant-CcD8iG5l.js";
|
|
4
|
+
import { n as h } from "./use-copy-D6JwKUll.js";
|
|
5
|
+
import { t as m } from "./createReactComponent-BqCmnqfX.js";
|
|
6
|
+
import { t as v } from "./IconCheck-D2WuculQ.js";
|
|
7
|
+
import "react";
|
|
8
|
+
import { jsx as o, jsxs as f } from "react/jsx-runtime";
|
|
9
|
+
var y = [["path", {
|
|
10
|
+
d: "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666",
|
|
11
|
+
key: "svg-0"
|
|
12
|
+
}], ["path", {
|
|
13
|
+
d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",
|
|
14
|
+
key: "svg-1"
|
|
15
|
+
}]], x = m("outline", "copy", "Copy", y), C = {
|
|
16
|
+
xs: {
|
|
17
|
+
classes: "size-6 [&>svg]:size-3.5",
|
|
18
|
+
description: "Extra small — inline after a mono value"
|
|
19
|
+
},
|
|
20
|
+
sm: {
|
|
21
|
+
classes: "size-7 [&>svg]:size-4",
|
|
22
|
+
description: "Small — the default; row cells, panel headers"
|
|
23
|
+
},
|
|
24
|
+
md: {
|
|
25
|
+
classes: "size-8 [&>svg]:size-4",
|
|
26
|
+
description: "Medium — toolbars"
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
function b({ value: s, label: t = "to clipboard", size: a = "sm", onCopied: r, className: n, onClick: c, ...l }) {
|
|
30
|
+
const { copied: e, copy: p } = h();
|
|
31
|
+
return /* @__PURE__ */ f("span", {
|
|
32
|
+
className: "inline-flex shrink-0",
|
|
33
|
+
children: [/* @__PURE__ */ o("button", {
|
|
34
|
+
type: "button",
|
|
35
|
+
"aria-label": e ? `${t} copied` : `Copy ${t}`,
|
|
36
|
+
"data-copied": e || void 0,
|
|
37
|
+
onClick: async (i) => {
|
|
38
|
+
c?.(i), !i.defaultPrevented && await p(s) && r?.(s);
|
|
39
|
+
},
|
|
40
|
+
className: d("text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-[color,background-color] duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "data-[copied]:text-pho-success data-[copied]:hover:text-pho-success", u(C, a), n),
|
|
41
|
+
...l,
|
|
42
|
+
children: e ? /* @__PURE__ */ o(v, { "aria-hidden": !0 }) : /* @__PURE__ */ o(x, { "aria-hidden": !0 })
|
|
43
|
+
}), /* @__PURE__ */ o("output", {
|
|
44
|
+
className: "sr-only",
|
|
45
|
+
"aria-live": "polite",
|
|
46
|
+
children: e ? "Copied" : ""
|
|
47
|
+
})]
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
b.displayName = "CopyButton";
|
|
51
|
+
export {
|
|
52
|
+
b as n,
|
|
53
|
+
C as t
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
//# sourceMappingURL=copy-button-B_B15mEi.js.map
|