@photon-ai/pho-ui 1.0.0 → 1.1.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/{close-button-8f-oRJXt.js → close-button-Bq9f-H15.js} +256 -181
- package/dist/chunks/close-button-Bq9f-H15.js.map +1 -0
- package/dist/chunks/{dialog-Bgb2Z1_v.js → dialog-DolPKFGS.js} +2 -2
- package/dist/chunks/{dialog-Bgb2Z1_v.js.map → dialog-DolPKFGS.js.map} +1 -1
- package/dist/chunks/{menu-COLB_liS.js → menu-Dan0oRvL.js} +79 -76
- package/dist/chunks/menu-Dan0oRvL.js.map +1 -0
- package/dist/chunks/settings-B3ilbRcF.js +104 -0
- package/dist/chunks/settings-B3ilbRcF.js.map +1 -0
- package/dist/chunks/{sidebar-16Pfn7IC.js → sidebar-C5cIhWs1.js} +4 -4
- package/dist/chunks/sidebar-C5cIhWs1.js.map +1 -0
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/context-menu.js +52 -49
- package/dist/components/context-menu.js.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/menu.js +1 -1
- package/dist/components/select.js +16 -16
- package/dist/components/select.js.map +1 -1
- package/dist/components/skeleton.js +18 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/theme-toggle.js +22 -18
- package/dist/components/theme-toggle.js.map +1 -1
- package/dist/index.js +21 -17
- package/dist/sections/settings.js +7 -0
- package/dist/sections/sidebar.js +1 -1
- package/dist/src/components/skeleton/index.d.ts +1 -0
- package/dist/src/components/skeleton/skeleton.d.ts +11 -0
- package/dist/src/components/theme-toggle/theme-toggle.d.ts +4 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/sections/settings/index.d.ts +1 -0
- package/dist/src/sections/settings/settings.d.ts +128 -0
- package/dist/src/sections/sidebar/sidebar.d.ts +5 -4
- package/package.json +9 -1
- package/src/styles/theme.css +13 -2
- package/dist/chunks/close-button-8f-oRJXt.js.map +0 -1
- package/dist/chunks/menu-COLB_liS.js.map +0 -1
- package/dist/chunks/sidebar-16Pfn7IC.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"settings-B3ilbRcF.js","names":[],"sources":["../../src/sections/settings/settings.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Settings — Pho's settings-page section: a page title, section titles, and\n * bordered cards of label/control rows.\n *\n * Spacing: `Stack` separates blocks (`gap-10`). Inside a block, children share\n * `gap-3`. Wrap a section title + description in `Header` (`gap-0.5`) so that\n * pair stays tight — don't put them as loose siblings. Host the page at\n * `max-w-xl` (parts already carry `px-5`).\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** Bordered card that stacks rows with hairline dividers. */\nexport const SETTINGS_CARD =\n \"divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary\";\n\n/**\n * One settings row — label (+ optional description) left, control right.\n * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter\n * than a comfortable touch target.\n */\nexport const SETTINGS_ROW =\n \"flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\";\n\n/* --------------------------------- parts --------------------------------- */\n\n/** Page title — largest heading on the surface. */\nfunction PageTitle({\n className,\n children,\n ...props\n}: ComponentProps<\"h1\"> & { ref?: Ref<HTMLHeadingElement> }) {\n return (\n <h1\n className={cn(\n \"text-display-base text-pho-primary px-5 font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n </h1>\n );\n}\n\n/**\n * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;\n * each block lays out its children with `gap-3`.\n */\nfunction Stack({\n className,\n ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n return (\n <div\n className={cn(\n \"mt-6 flex flex-col gap-10\",\n \"*:flex *:flex-col *:gap-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so\n * the block's `gap-3` only applies between this header and the card.\n */\nfunction Header({\n className,\n ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n return <div className={cn(\"flex flex-col gap-0.5\", className)} {...props} />;\n}\n\n/** Section heading — same padding as the page title, smaller type. */\nfunction SectionTitle({\n className,\n children,\n ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n return (\n <h2\n className={cn(\n \"text-display-xs text-pho-primary px-5 font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n </h2>\n );\n}\n\n/**\n * Supporting copy under a section title. Same display step as the title;\n * color + normal weight keep it secondary. Always wrap with `Header`.\n */\nfunction Description({\n className,\n ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n return (\n <p\n className={cn(\n \"text-display-xs text-pho-description px-5 font-normal\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/** Bordered card that stacks settings rows with hairline dividers. */\nfunction Card({\n className,\n ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n return <div className={cn(SETTINGS_CARD, className)} {...props} />;\n}\n\nexport interface SettingsRowProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n /** Left-side field name. */\n label: string;\n /** Optional helper under the label. */\n description?: ReactNode;\n /** Associates the label with a control id. When omitted, the label is not a `<label>`. */\n htmlFor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One settings row: label (+ optional description) left, control right.\n * Pass `htmlFor` when the row wraps a labelled input; omit it for display/\n * action rows (avatar, danger-zone delete).\n */\nfunction Row({\n label,\n description,\n htmlFor,\n className,\n children,\n ...props\n}: SettingsRowProps) {\n return (\n <div className={cn(SETTINGS_ROW, className)} {...props}>\n <div className=\"min-w-0\">\n {htmlFor ? (\n <label\n htmlFor={htmlFor}\n className=\"text-pho-primary block text-base font-normal\"\n >\n {label}\n </label>\n ) : (\n <p className=\"text-pho-primary text-base font-normal\">{label}</p>\n )}\n {description ? (\n <p className=\"text-pho-description mt-0.5 text-xs\">{description}</p>\n ) : null}\n </div>\n <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n {children}\n </div>\n </div>\n );\n}\n\n/** Read-only value on the right side of a row (email, etc.). */\nfunction Value({\n className,\n ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n return (\n <p\n className={cn(\"text-pho-description truncate text-base\", className)}\n {...props}\n />\n );\n}\n\n/**\n * Inline error under a row (still inside the card). Matches card horizontal\n * padding so hosts don't re-apply `px-5`.\n */\nfunction Alert({\n className,\n ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n return (\n <p\n role=\"alert\"\n className={cn(\"text-pho-error px-5 pb-3 text-xs\", className)}\n {...props}\n />\n );\n}\n\n/**\n * Trailing bar inside a card — typically a save status + submit button that\n * appears after the form is dirty. Same horizontal/vertical padding as a row.\n */\nfunction Footer({\n className,\n ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n return (\n <div\n className={cn(\n \"flex items-center justify-between gap-6 px-5 py-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * Settings page layout. One stack, one gap rhythm — only title scale differs:\n *\n * ```tsx\n * <Settings.PageTitle>Profile</Settings.PageTitle>\n * <Settings.Stack>\n * <form>\n * <Settings.Card>\n * <Settings.Row label=\"Name\" htmlFor=\"first-name\">\n * <Input id=\"first-name\" size=\"sm\" />\n * </Settings.Row>\n * </Settings.Card>\n * </form>\n * <form>\n * <Settings.Header>\n * <Settings.SectionTitle>Agent profile</Settings.SectionTitle>\n * <Settings.Description>…</Settings.Description>\n * </Settings.Header>\n * <Settings.Card>…</Settings.Card>\n * </form>\n * <div>\n * <Settings.SectionTitle>Danger zone</Settings.SectionTitle>\n * <Settings.Card>\n * <Settings.Row label=\"Delete account\" description=\"…\">\n * <Button color=\"destructive\" size=\"sm\">Delete</Button>\n * </Settings.Row>\n * </Settings.Card>\n * </div>\n * </Settings.Stack>\n * ```\n */\nexport const Settings = {\n PageTitle,\n Stack,\n Header,\n SectionTitle,\n Description,\n Card,\n Row,\n Value,\n Alert,\n Footer,\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { t as o } from "./cn-DTiB6ek_.js";
|
|
3
3
|
import { n as g, r as v } from "./link-provider-9TFNyDqO.js";
|
|
4
|
-
import { d as x } from "./close-button-
|
|
4
|
+
import { d as x } from "./close-button-Bq9f-H15.js";
|
|
5
5
|
import { t as h } from "./createReactComponent-BqCmnqfX.js";
|
|
6
6
|
import { n as l } from "./avatar-CiAvJNNs.js";
|
|
7
7
|
import { isValidElement as b } from "react";
|
|
@@ -25,7 +25,7 @@ var N = [["path", {
|
|
|
25
25
|
d: "M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
|
|
26
26
|
key: "svg-2"
|
|
27
27
|
}]
|
|
28
|
-
], w = h("outline", "dots", "Dots", k), R = "border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r px-4
|
|
28
|
+
], w = h("outline", "dots", "Dots", k), R = "border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r px-4 pt-5 pb-4", _ = "outline-pho-brand flex min-h-8 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", A = "bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-pho-primary", E = o("text-pho-secondary *:data-icon:text-pho-secondary", "hover:bg-pho-primary hover:text-pho-primary hover:*:data-icon:text-pho-primary");
|
|
29
29
|
function C({ className: r, ...e }) {
|
|
30
30
|
return /* @__PURE__ */ t("aside", {
|
|
31
31
|
className: o(R, r),
|
|
@@ -126,7 +126,7 @@ function U({ name: r, avatarSrc: e, initials: n, className: i, ...s }) {
|
|
|
126
126
|
}), /* @__PURE__ */ t(l.Fallback, { children: n ?? S(r) })]
|
|
127
127
|
}),
|
|
128
128
|
/* @__PURE__ */ t("span", {
|
|
129
|
-
className: "text-pho-primary min-w-0 flex-1 truncate text-
|
|
129
|
+
className: "text-pho-primary min-w-0 flex-1 truncate text-base",
|
|
130
130
|
children: r
|
|
131
131
|
}),
|
|
132
132
|
/* @__PURE__ */ t("span", {
|
|
@@ -161,4 +161,4 @@ export {
|
|
|
161
161
|
_ as t
|
|
162
162
|
};
|
|
163
163
|
|
|
164
|
-
//# sourceMappingURL=sidebar-
|
|
164
|
+
//# sourceMappingURL=sidebar-C5cIhWs1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-C5cIhWs1.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 isValidElement,\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\n/* ------------------------------- class map ------------------------------- */\n\n/** The rail itself — sticky, full-height, hairline right edge. */\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 px-4 pt-5 pb-4\";\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-8 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\n/* --------------------------------- frame --------------------------------- */\n\ninterface RootProps extends ComponentProps<\"aside\"> {\n ref?: Ref<HTMLElement>;\n}\n\n/** The rail — a sticky, full-height `<aside>` with the hairline right edge. */\nfunction Root({ className, ...props }: RootProps) {\n return <aside className={cn(SIDEBAR_ROOT, className)} {...props} />;\n}\n\n/** Brand slot at the top of the rail — logo, wordmark, workspace switcher. */\nfunction Header({ className, ...props }: ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\"mb-6 flex items-center gap-2.5 px-2\", className)}\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":";;;;;;;;AASA,IAAMA,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAgB,KAAO;AAAQ,CAAC,GAAG,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAgB,KAAO;AAAQ,CAAC,CAAC,GAClH,IAAmB,EAAqB,WAAW,kBAAkB,gBAAgBA,CAAU,GCD/F,IAAa;AAAA,EAAC,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAsC,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAuC,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAuC,KAAO;AAAA,EAAQ,CAAC;AAAC,GACzO,IAAW,EAAqB,WAAW,QAAQ,QAAQ,CAAU,GCuB9D,IACX,2GAGW,IACX,gMAMW,IACX,iHAOW,IAAwB,EACnC,qDACA,gFACF;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAAoB;AAChD,SAAO,gBAAA,EAAC,SAAD;AAAA,IAAO,WAAW,EAAG,GAAc,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AACpE;AAGA,SAAS,EAAO,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAC9D,SACE,gBAAA,EAAC,OAAD;AAAA,IACE,WAAW,EAAG,uCAAuC,CAAS;AAAA,IAC9D,GAAI;AAAA,EACL,CAAA;AAEL;AAGA,SAAS,EAAI,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAC3D,SACE,gBAAA,EAAC,OAAD;AAAA,IACE,WAAW,EAAG,8CAA8C,CAAS;AAAA,IACrE,GAAI;AAAA,EACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAC7D,SAAO,gBAAA,EAAC,OAAD;AAAA,IAAgB,WAAA;AAAA,IAAW,GAAI;AAAA,EAAQ,CAAA;AAChD;AAGA,SAAS,EAAW,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAClE,SACE,gBAAA,EAAC,OAAD;AAAA,IACE,WAAW,EACT,sDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,SAAS,EAAK,EAAE,WAAA,GAAW,SAAA,GAAS,GAAG,EAAA,GAAoB;AACzD,SACE,gBAAA,EAAC,MAAD;AAAA,IACE,WAAW,EAET,2BACA,IACI,uCACA,yBACJ,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAGA,SAAS,EAAO,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgC;AAC9D,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,EAAG,8BAA8B,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE7E;AAOA,SAAS,EAAW,GAA4B;AAC9C,MAAI,KAAQ,QAAQ,MAAS,GAAO,QAAO;AAC3C,MAAI,IAAqB;AAOzB,SANI,EAAiB,CAAI,IAEvB,IAAU,gBAAA,EAAC,GAAD,CAAO,CAAA,IACR,EAAe,CAAI,MAC5B,IAAU,IAER,KAAW,OAAa,OAE1B,gBAAA,EAAC,QAAD;AAAA,IACE,aAAA;AAAA,IACA,WAAU;AAAA,cAET;AAAA,EACG,CAAA;AAEV;AAoCA,SAAS,EAAK,EACZ,MAAA,GACA,QAAA,GACA,WAAA,GACA,UAAA,GACA,MAAA,GACA,UAAA,GACA,GAAG,EAAA,GACgB;AACnB,QAAM,IAAO,EAAiB,GACxB,IAAW,EACf,GACA,IAAS,IAAsB,GAC/B,CACF,GACM,IAAQ,gBAAA,EAAC,QAAD;AAAA,IAAM,WAAU;AAAA,IAA2B,UAAA;AAAA,EAAe,CAAA;AAExE,SAAI,MAAS,SAET,gBAAA,EAAC,MAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACQ,MAAA;AAAA,IACN,gBAAc,IAAS,SAAS;AAAA,IAChC,GAAK,KAAY;AAAA,MAAE,QAAQ;AAAA,MAAU,KAAK;AAAA,IAAsB;AAAA,IAChE,GAAK;AAAA,IACL,WAAW;AAAA,cALb;AAAA,MAOG,EAAW,CAAI;AAAA,MACf;AAAA,MACA,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAW,gBAAA,EAAC,GAAD,EAAkB,eAAA,GAAa,CAAA,CAAC,GAC5C,gBAAA,EAAC,QAAD;AAAA,QAAM,WAAU;AAAA,kBAAU;AAAA,MAA0B,CAAA,CACpD,EAAA,CAAA;AAAA,IAEA;AAAA,KACJ,CAAA,IAKN,gBAAA,EAAC,MAAD,EAAA,UACE,gBAAA,EAAC,UAAD;AAAA,IACE,MAAK;AAAA,IACL,gBAAc,IAAS,SAAS;AAAA,IAChC,GAAK;AAAA,IACL,WAAW;AAAA,cAJb,CAMG,EAAW,CAAI,GACf,CACK;AAAA,KACN,CAAA;AAER;AASA,IAAM,IACJ;AAGF,SAAS,EAAa,GAAsB;AAC1C,QAAM,IAAQ,EAAK,MAAM,KAAK,EAAE,OAAO,OAAO;AAG9C,WAFc,EAAM,CAAA,IAAK,CAAA,KAAM,EAAK,CAAA,KAAM,QAC7B,EAAM,UAAU,IAAK,EAAM,EAAM,SAAS,CAAA,IAAK,CAAA,KAAM,KAAM,KAClD,YAAY;AACpC;AA2BA,SAAS,EAAW,EAClB,MAAA,GACA,WAAA,GACA,UAAA,GACA,WAAA,GACA,GAAG,EAAA,GACsB;AACzB,SACE,gBAAA,EAAC,UAAD;AAAA,IAAQ,MAAK;AAAA,IAAS,WAAW,EAAG,GAAa,CAAS;AAAA,IAAG,GAAI;AAAA,cAAjE;AAAA,MACE,gBAAA,EAAC,EAAO,MAAR;AAAA,QAAa,MAAK;AAAA,kBAAlB,CACG,KAAa,gBAAA,EAAC,EAAO,OAAR;AAAA,UAAc,KAAK;AAAA,UAAW,KAAI;AAAA,QAAI,CAAA,GACpD,gBAAA,EAAC,EAAO,UAAR,EAAA,UAAkB,KAAY,EAAa,CAAI,EAAmB,CAAA,CACvD;AAAA;MACb,gBAAA,EAAC,QAAD;AAAA,QAAM,WAAU;AAAA,kBACb;AAAA,MACG,CAAA;AAAA,MACN,gBAAA,EAAC,QAAD;AAAA,QACE,eAAA;AAAA,QACA,WAAW,EAAe;AAAA,UACxB,SAAS;AAAA,UACT,MAAM;AAAA,UACN,OAAO;AAAA,UACP,WACE;AAAA,QACJ,CAAC;AAAA,kBAED,gBAAA,EAAC,GAAD,EAAU,WAAU,SAAU,CAAA;AAAA,MAC1B,CAAA;AAAA,IACA;AAAA;AAEZ;AA8BA,IAAa,IAAU;AAAA,EACrB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AACF"}
|
|
@@ -49,7 +49,7 @@ function x({ className: e, ...t }) {
|
|
|
49
49
|
}
|
|
50
50
|
function f({ className: e, ...t }) {
|
|
51
51
|
return /* @__PURE__ */ a(o.Item, {
|
|
52
|
-
className: r("text-pho-secondary
|
|
52
|
+
className: r("text-pho-secondary flex cursor-pointer items-center gap-2 rounded-[calc(var(--radius-base)-4px)] py-1.5 pr-2.5 pl-2 text-base outline-none select-none", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary", e),
|
|
53
53
|
...t
|
|
54
54
|
});
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Autocomplete as BaseAutocomplete } from \"@base-ui/react/autocomplete\";\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 = BaseAutocomplete.Root;\nconst Value = BaseAutocomplete.Value;\nconst Portal = BaseAutocomplete.Portal;\nconst Group = BaseAutocomplete.Group;\nconst Collection = BaseAutocomplete.Collection;\n\nfunction InputGroup({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.InputGroup>) {\n return (\n <BaseAutocomplete.InputGroup\n className={cn(\"relative flex items-center\", className)}\n {...props}\n />\n );\n}\n\nfunction Input({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.Input>) {\n return (\n <BaseAutocomplete.Input\n className={cn(\n // Flat field surface — the 15% hairline ring carries the edge; shadows\n // are reserved for floating layers.\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 BaseAutocomplete.Clear>) {\n return (\n <BaseAutocomplete.Clear\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 BaseAutocomplete.Positioner>) {\n return (\n <BaseAutocomplete.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 BaseAutocomplete.Popup>) {\n return (\n <BaseAutocomplete.Popup\n className={cn(\n // Floating layer: keeps its elevation shadow, edged with the site\n // hairline (ring-pho-secondary).\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({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.List>) {\n return (\n <BaseAutocomplete.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 BaseAutocomplete.Empty>) {\n return (\n <BaseAutocomplete.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({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.Item>) {\n return (\n <BaseAutocomplete.Item\n className={cn(\n \"text-pho-secondary
|
|
1
|
+
{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Autocomplete as BaseAutocomplete } from \"@base-ui/react/autocomplete\";\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 = BaseAutocomplete.Root;\nconst Value = BaseAutocomplete.Value;\nconst Portal = BaseAutocomplete.Portal;\nconst Group = BaseAutocomplete.Group;\nconst Collection = BaseAutocomplete.Collection;\n\nfunction InputGroup({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.InputGroup>) {\n return (\n <BaseAutocomplete.InputGroup\n className={cn(\"relative flex items-center\", className)}\n {...props}\n />\n );\n}\n\nfunction Input({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.Input>) {\n return (\n <BaseAutocomplete.Input\n className={cn(\n // Flat field surface — the 15% hairline ring carries the edge; shadows\n // are reserved for floating layers.\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 BaseAutocomplete.Clear>) {\n return (\n <BaseAutocomplete.Clear\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 BaseAutocomplete.Positioner>) {\n return (\n <BaseAutocomplete.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 BaseAutocomplete.Popup>) {\n return (\n <BaseAutocomplete.Popup\n className={cn(\n // Floating layer: keeps its elevation shadow, edged with the site\n // hairline (ring-pho-secondary).\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({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.List>) {\n return (\n <BaseAutocomplete.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 BaseAutocomplete.Empty>) {\n return (\n <BaseAutocomplete.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({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.Item>) {\n return (\n <BaseAutocomplete.Item\n className={cn(\n \"text-pho-secondary flex cursor-pointer 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 // Secondary at rest; highlight lifts to primary + ghost wash (Menu idiom).\n \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction GroupLabel({\n className,\n ...props\n}: StyledProps<typeof BaseAutocomplete.GroupLabel>) {\n return (\n <BaseAutocomplete.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\n/**\n * Autocomplete built on Base UI `Autocomplete` — a free-text input that offers\n * matching suggestions as you type. Unlike `Combobox`, the value isn't\n * constrained to the list: the user can submit text that matches no suggestion.\n * Pass `items` to `Autocomplete.Root` and render an `Item` per suggestion.\n */\nexport const Autocomplete = {\n Root,\n Value,\n InputGroup,\n Input,\n Clear,\n Portal,\n Positioner,\n Popup,\n List,\n Collection,\n Empty,\n Item,\n Group,\n GroupLabel,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAiB,MACxB,IAAQ,EAAiB,OACzB,IAAS,EAAiB,QAC1B,IAAQ,EAAiB,OACzB,IAAa,EAAiB;AAEpC,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GAC+C;AAClD,SACE,gBAAA,EAAC,EAAiB,YAAlB;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAiB,OAAlB;AAAA,IACE,WAAW,EAIT,oTACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAiB,OAAlB;AAAA,IACE,WAAW,EACT,wHACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC+C;AAClD,SACE,gBAAA,EAAC,EAAiB,YAAlB;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,qBAAqB,CAAS;AAAA,IAC5C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAiB,OAAlB;AAAA,IACE,WAAW,EAGT,iQACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EACZ,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAiB,MAAlB;AAAA,IACE,WAAW,EACT,iFACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAiB,OAAlB;AAAA,IACE,WAAW,EACT,8EACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EACZ,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAiB,MAAlB;AAAA,IACE,WAAW,EACT,0JAEA,6EACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GAC+C;AAClD,SACE,gBAAA,EAAC,EAAiB,YAAlB;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAe;AAAA,EAC1B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { a, c as s, d as n, f as o, i as T, l as B, n as u, o as e, r as f, s as S, t as i, u as E } from "../chunks/close-button-
|
|
2
|
+
import { a, c as s, d as n, f as o, i as T, l as B, n as u, o as e, r as f, s as S, t as i, u as E } from "../chunks/close-button-Bq9f-H15.js";
|
|
3
3
|
export {
|
|
4
4
|
u as BUTTON_COLORS,
|
|
5
5
|
f as BUTTON_SHAPES,
|
|
@@ -55,7 +55,7 @@ function b({ className: e, ...t }) {
|
|
|
55
55
|
}
|
|
56
56
|
function f({ className: e, ...t }) {
|
|
57
57
|
return /* @__PURE__ */ n(r.Item, {
|
|
58
|
-
className: o("text-pho-secondary
|
|
58
|
+
className: o("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", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary", e),
|
|
59
59
|
...t
|
|
60
60
|
});
|
|
61
61
|
}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,73 +1,76 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t } from "../chunks/cn-DTiB6ek_.js";
|
|
3
|
-
import { t as
|
|
4
|
-
import { a as b, c as
|
|
2
|
+
import { t as a } from "../chunks/cn-DTiB6ek_.js";
|
|
3
|
+
import { t as v } from "../chunks/resolve-variant-CcD8iG5l.js";
|
|
4
|
+
import { a as b, c as x, n as M, o as h, r as N, t as s } from "../chunks/menu-Dan0oRvL.js";
|
|
5
5
|
import "react";
|
|
6
|
-
import { jsx as
|
|
6
|
+
import { Fragment as P, jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
7
7
|
import { ContextMenu as e } from "@base-ui/react/context-menu";
|
|
8
|
-
import { Separator as
|
|
9
|
-
var
|
|
10
|
-
function
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
className:
|
|
13
|
-
...
|
|
8
|
+
import { Separator as S } from "@base-ui/react/separator";
|
|
9
|
+
var R = x(e.Root), y = e.Trigger, G = e.Portal, I = e.Group, T = e.RadioGroup, C = e.SubmenuRoot;
|
|
10
|
+
function E({ className: r, ...o }) {
|
|
11
|
+
return /* @__PURE__ */ t(e.Positioner, {
|
|
12
|
+
className: a("z-50", r),
|
|
13
|
+
...o
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
className:
|
|
19
|
-
...
|
|
16
|
+
function U({ className: r, ...o }) {
|
|
17
|
+
return /* @__PURE__ */ t(e.Popup, {
|
|
18
|
+
className: a(N, r),
|
|
19
|
+
...o
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
const { inert: n, blocked:
|
|
24
|
-
onClick:
|
|
22
|
+
function _({ className: r, color: o = "default", onClick: p, closeOnClick: u = !0, loading: m = !1, disabled: l = !1, children: c, ...d }) {
|
|
23
|
+
const { inert: n, blocked: f, handleClick: g } = h({
|
|
24
|
+
onClick: p,
|
|
25
25
|
closeOnClick: u,
|
|
26
|
-
loading:
|
|
27
|
-
disabled:
|
|
26
|
+
loading: m,
|
|
27
|
+
disabled: l
|
|
28
28
|
});
|
|
29
|
-
return /* @__PURE__ */
|
|
30
|
-
className:
|
|
29
|
+
return /* @__PURE__ */ i(e.Item, {
|
|
30
|
+
className: a(s, v(M, o), r),
|
|
31
31
|
closeOnClick: u,
|
|
32
|
-
disabled:
|
|
32
|
+
disabled: f,
|
|
33
33
|
"data-loading": n || void 0,
|
|
34
34
|
"aria-busy": n || void 0,
|
|
35
|
-
onClick:
|
|
36
|
-
...
|
|
37
|
-
children: [n ? /* @__PURE__ */
|
|
35
|
+
onClick: g,
|
|
36
|
+
...d,
|
|
37
|
+
children: [n ? /* @__PURE__ */ i(P, { children: [/* @__PURE__ */ t(b, {}), /* @__PURE__ */ t("output", {
|
|
38
|
+
className: "sr-only",
|
|
39
|
+
"aria-live": "polite"
|
|
40
|
+
})] }) : null, c]
|
|
38
41
|
});
|
|
39
42
|
}
|
|
40
|
-
function
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
className:
|
|
43
|
-
...
|
|
43
|
+
function L({ className: r, ...o }) {
|
|
44
|
+
return /* @__PURE__ */ t(e.GroupLabel, {
|
|
45
|
+
className: a("text-pho-secondary px-2.5 py-1.5 text-xs font-medium", r),
|
|
46
|
+
...o
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
|
-
function
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
className:
|
|
49
|
-
...
|
|
49
|
+
function j({ className: r, ...o }) {
|
|
50
|
+
return /* @__PURE__ */ t(S, {
|
|
51
|
+
className: a("-mx-1.5 my-1.5 h-px bg-[var(--border-color-pho-secondary)]", r),
|
|
52
|
+
...o
|
|
50
53
|
});
|
|
51
54
|
}
|
|
52
|
-
function
|
|
53
|
-
return /* @__PURE__ */
|
|
54
|
-
className:
|
|
55
|
-
...
|
|
55
|
+
function k({ className: r, ...o }) {
|
|
56
|
+
return /* @__PURE__ */ t(e.SubmenuTrigger, {
|
|
57
|
+
className: a(s, "data-[popup-open]:bg-pho-ghost-hover", r),
|
|
58
|
+
...o
|
|
56
59
|
});
|
|
57
60
|
}
|
|
58
61
|
var q = {
|
|
59
|
-
Root:
|
|
60
|
-
Trigger:
|
|
61
|
-
Portal:
|
|
62
|
-
Positioner:
|
|
63
|
-
Popup:
|
|
64
|
-
Item:
|
|
65
|
-
Group:
|
|
66
|
-
GroupLabel:
|
|
67
|
-
Separator:
|
|
68
|
-
SubmenuRoot:
|
|
69
|
-
SubmenuTrigger:
|
|
70
|
-
RadioGroup:
|
|
62
|
+
Root: R,
|
|
63
|
+
Trigger: y,
|
|
64
|
+
Portal: G,
|
|
65
|
+
Positioner: E,
|
|
66
|
+
Popup: U,
|
|
67
|
+
Item: _,
|
|
68
|
+
Group: I,
|
|
69
|
+
GroupLabel: L,
|
|
70
|
+
Separator: j,
|
|
71
|
+
SubmenuRoot: C,
|
|
72
|
+
SubmenuTrigger: k,
|
|
73
|
+
RadioGroup: T
|
|
71
74
|
};
|
|
72
75
|
export {
|
|
73
76
|
q as ContextMenu
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/components/context-menu/context-menu.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type ElementType,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n MENU_POPUP,\n MENU_ITEM,\n MENU_ITEM_COLORS,\n type MenuItemColor,\n} from \"../menu/menu\";\nimport {\n MenuItemSpinner,\n useAsyncMenuItem,\n withMenuPendingRoot,\n type AsyncMenuItemClick,\n} from \"../menu/menu-pending\";\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\ntype ContextMenuItemProps = Omit<\n StyledProps<typeof BaseContextMenu.Item>,\n \"onClick\"\n> & {\n /** Semantic ink. @default \"default\" */\n color?: MenuItemColor;\n /**\n * Action handler. Return a promise to keep the menu open while it runs —\n * same behavior as `Menu.Item`.\n */\n onClick?: AsyncMenuItemClick;\n /** Declarative loading state. @default false */\n loading?: boolean;\n};\n\nconst Root = withMenuPendingRoot(BaseContextMenu.Root);\nconst Trigger = BaseContextMenu.Trigger;\nconst Portal = BaseContextMenu.Portal;\nconst Group = BaseContextMenu.Group;\nconst RadioGroup = BaseContextMenu.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 = BaseContextMenu.SubmenuRoot;\n\nfunction Positioner({\n className,\n ...props\n}: StyledProps<typeof BaseContextMenu.Positioner>) {\n return (\n <BaseContextMenu.Positioner className={cn(\"z-50\", className)} {...props} />\n );\n}\n\nfunction Popup({\n className,\n ...props\n}: StyledProps<typeof BaseContextMenu.Popup>) {\n return (\n <BaseContextMenu.Popup className={cn(MENU_POPUP, className)} {...props} />\n );\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}: ContextMenuItemProps) {\n const { inert, blocked, handleClick } = useAsyncMenuItem({\n onClick,\n closeOnClick,\n loading,\n disabled,\n });\n\n return (\n <BaseContextMenu.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 ? <MenuItemSpinner
|
|
1
|
+
{"version":3,"file":"context-menu.js","names":[],"sources":["../../src/components/context-menu/context-menu.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type ElementType,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n MENU_POPUP,\n MENU_ITEM,\n MENU_ITEM_COLORS,\n type MenuItemColor,\n} from \"../menu/menu\";\nimport {\n MenuItemSpinner,\n useAsyncMenuItem,\n withMenuPendingRoot,\n type AsyncMenuItemClick,\n} from \"../menu/menu-pending\";\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\ntype ContextMenuItemProps = Omit<\n StyledProps<typeof BaseContextMenu.Item>,\n \"onClick\"\n> & {\n /** Semantic ink. @default \"default\" */\n color?: MenuItemColor;\n /**\n * Action handler. Return a promise to keep the menu open while it runs —\n * same behavior as `Menu.Item`.\n */\n onClick?: AsyncMenuItemClick;\n /** Declarative loading state. @default false */\n loading?: boolean;\n};\n\nconst Root = withMenuPendingRoot(BaseContextMenu.Root);\nconst Trigger = BaseContextMenu.Trigger;\nconst Portal = BaseContextMenu.Portal;\nconst Group = BaseContextMenu.Group;\nconst RadioGroup = BaseContextMenu.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 = BaseContextMenu.SubmenuRoot;\n\nfunction Positioner({\n className,\n ...props\n}: StyledProps<typeof BaseContextMenu.Positioner>) {\n return (\n <BaseContextMenu.Positioner className={cn(\"z-50\", className)} {...props} />\n );\n}\n\nfunction Popup({\n className,\n ...props\n}: StyledProps<typeof BaseContextMenu.Popup>) {\n return (\n <BaseContextMenu.Popup className={cn(MENU_POPUP, className)} {...props} />\n );\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}: ContextMenuItemProps) {\n const { inert, blocked, handleClick } = useAsyncMenuItem({\n onClick,\n closeOnClick,\n loading,\n disabled,\n });\n\n return (\n <BaseContextMenu.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 </BaseContextMenu.Item>\n );\n}\n\nfunction GroupLabel({\n className,\n ...props\n}: StyledProps<typeof BaseContextMenu.GroupLabel>) {\n return (\n <BaseContextMenu.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 BaseContextMenu.SubmenuTrigger>) {\n return (\n <BaseContextMenu.SubmenuTrigger\n className={cn(\n MENU_ITEM,\n \"data-[popup-open]:bg-pho-ghost-hover\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/**\n * Right-click (context) menu built on Base UI `ContextMenu`. `ContextMenu.Trigger`\n * wraps the area that opens the menu on right-click / long-press; the popup\n * shares its look with `Menu`. `ContextMenu.Item` has the same native promise\n * support as `Menu.Item`. Always mirror these actions somewhere visible —\n * a context menu must not be the only way to reach them.\n */\nexport const ContextMenu = {\n Root,\n Trigger,\n Portal,\n Positioner,\n Popup,\n Item,\n Group,\n GroupLabel,\n Separator,\n SubmenuRoot,\n SubmenuTrigger,\n RadioGroup,\n};\n"],"mappings":";;;;;;;;AA6CA,IAAM,IAAO,EAAoB,EAAgB,IAAI,GAC/C,IAAU,EAAgB,SAC1B,IAAS,EAAgB,QACzB,IAAQ,EAAgB,OACxB,IAAa,EAAgB,YAG7B,IAAc,EAAgB;AAEpC,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GAC8C;AACjD,SACE,gBAAA,EAAC,EAAgB,YAAjB;AAAA,IAA4B,WAAW,EAAG,QAAQ,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAM,EACb,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAgB,OAAjB;AAAA,IAAuB,WAAW,EAAG,GAAY,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE7E;AAEA,SAAS,EAAK,EACZ,WAAA,GACA,OAAA,IAAQ,WACR,SAAA,GACA,cAAA,IAAe,IACf,SAAA,IAAU,IACV,UAAA,IAAW,IACX,UAAA,GACA,GAAG,EAAA,GACoB;AACvB,QAAM,EAAE,OAAA,GAAO,SAAA,GAAS,aAAA,EAAA,IAAgB,EAAiB;AAAA,IACvD,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,EACF,CAAC;AAED,SACE,gBAAA,EAAC,EAAgB,MAAjB;AAAA,IACE,WAAW,EACT,GACA,EAAe,GAAkB,CAAK,GACtC,CACF;AAAA,IACc,cAAA;AAAA,IACd,UAAU;AAAA,IACV,gBAAc,KAAS;AAAA,IACvB,aAAW,KAAS;AAAA,IACpB,SAAS;AAAA,IACT,GAAI;AAAA,cAXN,CAaG,IACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAkB,CAAA,GAClB,gBAAA,EAAC,UAAD;AAAA,MAAQ,WAAU;AAAA,MAAU,aAAU;AAAA,IAAU,CAAA,CAChD,EAAA,CAAA,IACA,MACH,CACmB;AAAA;AAE1B;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GAC8C;AACjD,SACE,gBAAA,EAAC,EAAgB,YAAjB;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,WAAA,GAAW,GAAG,EAAA,GAA4C;AAC7E,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EACT,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAe,EACtB,WAAA,GACA,GAAG,EAAA,GACkD;AACrD,SACE,gBAAA,EAAC,EAAgB,gBAAjB;AAAA,IACE,WAAW,EACT,GACA,wCACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAc;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AACF"}
|
package/dist/components/menu.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { t as
|
|
2
|
+
import { t as a } from "../chunks/cn-DTiB6ek_.js";
|
|
3
3
|
import "react";
|
|
4
|
-
import { jsx as
|
|
4
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
5
5
|
import { Select as r } from "@base-ui/react/select";
|
|
6
6
|
var i = r.Root, s = r.Value, p = r.Portal, l = r.List, c = r.Group, u = r.ItemText;
|
|
7
7
|
function d({ className: e, ...t }) {
|
|
8
|
-
return /* @__PURE__ */
|
|
9
|
-
className:
|
|
8
|
+
return /* @__PURE__ */ o(r.Trigger, {
|
|
9
|
+
className: a("bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 transition select-none ring-inset", "data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:text-pho-secondary [&_svg]:size-4", e),
|
|
10
10
|
...t
|
|
11
11
|
});
|
|
12
12
|
}
|
|
13
13
|
function m({ className: e, ...t }) {
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
className:
|
|
14
|
+
return /* @__PURE__ */ o(r.Icon, {
|
|
15
|
+
className: a("flex shrink-0 items-center", e),
|
|
16
16
|
...t
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
function g({ className: e, sideOffset: t = 6, ...n }) {
|
|
20
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ o(r.Positioner, {
|
|
21
21
|
sideOffset: t,
|
|
22
|
-
className:
|
|
22
|
+
className: a("z-50 outline-none", e),
|
|
23
23
|
...n
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
function h({ className: e, ...t }) {
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
-
className:
|
|
27
|
+
return /* @__PURE__ */ o(r.Popup, {
|
|
28
|
+
className: a("bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto 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),
|
|
29
29
|
...t
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
function y({ className: e, ...t }) {
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
-
className:
|
|
33
|
+
return /* @__PURE__ */ o(r.Item, {
|
|
34
|
+
className: a("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", "data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50", e),
|
|
35
35
|
...t
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
function f({ className: e, ...t }) {
|
|
39
|
-
return /* @__PURE__ */
|
|
40
|
-
className:
|
|
39
|
+
return /* @__PURE__ */ o(r.ItemIndicator, {
|
|
40
|
+
className: a("text-pho-brand col-start-1 flex items-center [&>svg]:size-4", e),
|
|
41
41
|
...t
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
44
|
function x({ className: e, ...t }) {
|
|
45
|
-
return /* @__PURE__ */
|
|
46
|
-
className:
|
|
45
|
+
return /* @__PURE__ */ o(r.GroupLabel, {
|
|
46
|
+
className: a("text-pho-secondary px-2.5 py-1.5 text-xs font-medium", e),
|
|
47
47
|
...t
|
|
48
48
|
});
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\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 = BaseSelect.Root;\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\nconst ItemText = BaseSelect.ItemText;\n\nfunction Trigger({\n className,\n ...props\n}: StyledProps<typeof BaseSelect.Trigger>) {\n return (\n <BaseSelect.Trigger\n className={cn(\n // Flat field surface — shadows are reserved for floating layers;\n // the 15% ring-pho-primary hairline is the input edge.\n \"bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 transition select-none ring-inset\",\n \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\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\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n return (\n <BaseSelect.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 BaseSelect.Positioner>) {\n return (\n <BaseSelect.Positioner\n sideOffset={sideOffset}\n className={cn(\"z-50 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n return (\n <BaseSelect.Popup\n className={cn(\n // Floating layer: keeps its elevation shadow, edged with the site\n // hairline (ring-pho-secondary, #eee/#202020).\n \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto 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 Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n return (\n <BaseSelect.Item\n className={cn(\n \"text-pho-secondary
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\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 = BaseSelect.Root;\nconst Value = BaseSelect.Value;\nconst Portal = BaseSelect.Portal;\nconst List = BaseSelect.List;\nconst Group = BaseSelect.Group;\nconst ItemText = BaseSelect.ItemText;\n\nfunction Trigger({\n className,\n ...props\n}: StyledProps<typeof BaseSelect.Trigger>) {\n return (\n <BaseSelect.Trigger\n className={cn(\n // Flat field surface — shadows are reserved for floating layers;\n // the 15% ring-pho-primary hairline is the input edge.\n \"bg-pho-primary ring-pho-primary text-pho-primary outline-pho-brand rounded-base flex min-w-44 cursor-pointer items-center justify-between gap-2 px-3 py-2 text-base ring-1 transition select-none ring-inset\",\n \"data-[popup-open]:ring-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-1\",\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\nfunction Icon({ className, ...props }: StyledProps<typeof BaseSelect.Icon>) {\n return (\n <BaseSelect.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 BaseSelect.Positioner>) {\n return (\n <BaseSelect.Positioner\n sideOffset={sideOffset}\n className={cn(\"z-50 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseSelect.Popup>) {\n return (\n <BaseSelect.Popup\n className={cn(\n // Floating layer: keeps its elevation shadow, edged with the site\n // hairline (ring-pho-secondary, #eee/#202020).\n \"bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary rounded-base max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto 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 Item({ className, ...props }: StyledProps<typeof BaseSelect.Item>) {\n return (\n <BaseSelect.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 // Secondary at rest; highlight lifts to primary + ghost wash (Menu idiom).\n \"data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemIndicator({\n className,\n ...props\n}: StyledProps<typeof BaseSelect.ItemIndicator>) {\n return (\n <BaseSelect.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 BaseSelect.GroupLabel>) {\n return (\n <BaseSelect.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\n/**\n * Select built on Base UI `Select` — pick one option (or several with\n * `multiple`) from a list that opens on click. Pass `items` to `Select.Root`,\n * render an `Item` per option, and show the selection with `Select.Value`. For\n * a short, always-visible set use `RadioGroup`; to filter a long list by typing\n * use `Combobox`.\n */\nexport const Select = {\n Root,\n Trigger,\n Value,\n Icon,\n Portal,\n Positioner,\n Popup,\n List,\n Item,\n ItemText,\n ItemIndicator,\n Group,\n GroupLabel,\n};\n"],"mappings":";;;;;AAYA,IAAM,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAS,EAAW,QACpB,IAAO,EAAW,MAClB,IAAQ,EAAW,OACnB,IAAW,EAAW;AAE5B,SAAS,EAAQ,EACf,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAW,SAAZ;AAAA,IACE,WAAW,EAGT,gNACA,4FACA,iEACA,6CACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EAAG,8BAA8B,CAAS;AAAA,IACrD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,qBAAqB,CAAS;AAAA,IAC5C,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAGT,sRACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA8C;AAC1E,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,+KAEA,wGACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAc,EACrB,WAAA,GACA,GAAG,EAAA,GAC4C;AAC/C,SACE,gBAAA,EAAC,EAAW,eAAZ;AAAA,IACE,WAAW,EACT,+DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAW,YAAZ;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAS;AAAA,EACpB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AACF"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t } from "../chunks/cn-DTiB6ek_.js";
|
|
3
|
+
import { forwardRef as n } from "react";
|
|
4
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
5
|
+
var i = n(function({ className: e, ...o }, r) {
|
|
6
|
+
return /* @__PURE__ */ a("div", {
|
|
7
|
+
ref: r,
|
|
8
|
+
"aria-hidden": !0,
|
|
9
|
+
className: t("bg-pho-secondary animate-pho-skeleton rounded-sm", e),
|
|
10
|
+
...o
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
i.displayName = "Skeleton";
|
|
14
|
+
export {
|
|
15
|
+
i as Skeleton
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface SkeletonProps extends ComponentProps<\"div\"> {}\n\n/**\n * A pulsing placeholder bone for loading surfaces. Size and shape come from\n * `className` (`h-*`, `w-*`, `rounded-full`, …) — the component only supplies\n * the wash and motion. Decorative by default (`aria-hidden`); mark the\n * surrounding region with `aria-busy` / `aria-label` instead of labeling each\n * bone. Prefer `Spinner` when a single control is pending.\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n function Skeleton({ className, ...props }, ref) {\n return (\n <div\n ref={ref}\n aria-hidden\n className={cn(\n \"bg-pho-secondary animate-pho-skeleton rounded-sm\",\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;AAYA,IAAa,IAAW,EACtB,SAAkB,EAAE,WAAA,GAAW,GAAG,EAAA,GAAS,GAAK;AAC9C,SACE,gBAAA,EAAC,OAAD;AAAA,IACO,KAAA;AAAA,IACL,eAAA;AAAA,IACA,WAAW,EACT,oDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL,CACF;AAEA,EAAS,cAAc"}
|