@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,43 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Collapsible } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collapsible/collapsible.tsx
+const collapsibleStyles = /* @__PURE__ */ tv({ slots: {
+	root: "",
+	trigger: "",
+	content: "overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down"
+} });
+const s = collapsibleStyles();
+/**
+* Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+* sections use Accordion.
+*/
+function Collapsible$1(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Collapsible", inProps);
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		className: s.root({ class: [slots.root, className] }),
+		...rest
+	});
+}
+function CollapsibleTrigger({ className, ...props }) {
+	const [, slots] = useComponentConfig("Collapsible", {});
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		className: s.trigger({ class: [slots.trigger, className] }),
+		...props
+	});
+}
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+function CollapsibleContent({ className, ...props }) {
+	const [, slots] = useComponentConfig("Collapsible", {});
+	return /* @__PURE__ */ jsx(Collapsible.Content, {
+		"data-slot": "collapsible-content",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger, collapsibleStyles };

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, collapsibleStyles } from "./collapsible.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger, collapsibleStyles };

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+//#region src/components/combobox/combobox.d.ts
+export interface ComboboxOption<T extends string = string> {
+  value: T;
+  /** Shown in the list and trigger, and matched by search. */
+  label: string;
+  description?: ReactNode;
+  /** Extra search terms, e.g. abbreviations. */
+  keywords?: readonly string[];
+  disabled?: boolean;
+}
+interface SingleProps<T extends string> {
+  multiple?: false;
+  value?: T | null;
+  defaultValue?: T | null;
+  onValueChange?: (value: T | null) => void;
+}
+interface MultipleProps<T extends string> {
+  multiple: true;
+  value?: readonly T[];
+  defaultValue?: readonly T[];
+  onValueChange?: (value: T[]) => void;
+}
+interface SharedProps<T extends string> {
+  options: readonly ComboboxOption<T>[];
+  placeholder?: ReactNode;
+  searchPlaceholder?: string;
+  /** Shown when the search matches nothing. */
+  emptyText?: ReactNode;
+  /** Chips shown in the trigger before collapsing to "+N". Multiple mode only. Default 3. */
+  maxChips?: number;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  required?: boolean;
+  /** Submits the value with a native form (comma-free: one hidden input per value). */
+  name?: string;
+  id?: string;
+  className?: string;
+  contentClassName?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+export type ComboboxProps<T extends string = string> = SharedProps<T> & (SingleProps<T> | MultipleProps<T>);
+/**
+ * A select with search, for long option lists. `multiple` allows several values, shown
+ * as chips. The value type is inferred from `options`.
+ */
+export declare function Combobox<T extends string>(inProps: ComboboxProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/components/combobox/combobox.js

@@ -0,0 +1,141 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CheckIcon, ChevronsUpDownIcon, SearchIcon } from "../../internal/icons.js";
+import { useFieldControl } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { comboboxStyles } from "./combobox.styles.js";
+import { Popover } from "radix-ui";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+//#region src/components/combobox/combobox.tsx
+function toArray(value) {
+	if (value === void 0) return void 0;
+	if (value === null) return [];
+	return Array.isArray(value) ? [...value] : [value];
+}
+/**
+* A select with search, for long option lists. `multiple` allows several values, shown
+* as chips. The value type is inferred from `options`.
+*/
+function Combobox(inProps) {
+	const [props, slots] = useComponentConfig("Combobox", useFieldControl(inProps));
+	const { options, multiple = false, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results", maxChips = 3, size, disabled, required, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const onValueChange = props.onValueChange;
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useControllableState({
+		value: toArray(props.value),
+		defaultValue: toArray(props.defaultValue) ?? [],
+		onChange: (next) => onValueChange?.(multiple ? next : next[0] ?? null)
+	});
+	const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+	const s = comboboxStyles({
+		size,
+		multiple
+	});
+	const choose = (value) => {
+		if (multiple) {
+			setSelected(selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]);
+			return;
+		}
+		setSelected(selected[0] === value ? [] : [value]);
+		setOpen(false);
+	};
+	const labels = selected.map((v) => byValue.get(v)?.label ?? v);
+	let display;
+	if (labels.length === 0) display = /* @__PURE__ */ jsx("span", {
+		className: s.placeholder({ class: slots.placeholder }),
+		children: placeholder
+	});
+	else if (multiple) {
+		const shown = labels.slice(0, maxChips);
+		display = /* @__PURE__ */ jsxs(Fragment$1, { children: [shown.map((label, i) => /* @__PURE__ */ jsx("span", {
+			className: s.chip({ class: slots.chip }),
+			children: label
+		}, selected[i])), labels.length > shown.length && /* @__PURE__ */ jsxs("span", {
+			className: s.chip({ class: slots.chip }),
+			children: ["+", labels.length - shown.length]
+		})] });
+	} else display = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: labels[0]
+	});
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": required,
+					disabled,
+					"data-slot": "combobox-trigger",
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.value({ class: slots.value }),
+						children: display
+					}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: s.icon({ class: slots.icon }) })]
+				})
+			}),
+			name && selected.map((value) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value
+			}, value)),
+			/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+				align: "start",
+				sideOffset: 4,
+				"data-slot": "combobox-content",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsxs(Command, {
+					loop: true,
+					label: ariaLabel ?? "Options",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: s.search({ class: slots.search }),
+						children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command.Input, {
+							placeholder: searchPlaceholder,
+							className: s.input({ class: slots.input })
+						})]
+					}), /* @__PURE__ */ jsxs(Command.List, {
+						className: s.list({ class: slots.list }),
+						children: [/* @__PURE__ */ jsx(Command.Empty, {
+							className: s.empty({ class: slots.empty }),
+							children: emptyText
+						}), options.map((option) => {
+							const checked = selected.includes(option.value);
+							return /* @__PURE__ */ jsxs(Command.Item, {
+								value: option.value,
+								keywords: [option.label, ...option.keywords ?? []],
+								disabled: option.disabled,
+								onSelect: () => choose(option.value),
+								"data-checked": checked || void 0,
+								"aria-checked": checked,
+								className: s.item({ class: slots.item }),
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: s.itemText({ class: slots.itemText }),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate",
+										children: option.label
+									}), option.description && /* @__PURE__ */ jsx("span", {
+										className: s.itemDescription({ class: slots.itemDescription }),
+										children: option.description
+									})]
+								}), checked && /* @__PURE__ */ jsx(CheckIcon, { className: s.check({ class: slots.check }) })]
+							}, option.value);
+						})]
+					})]
+				})
+			}) })
+		]
+	});
+}
+//#endregion
+export { Combobox };

package/dist/components/combobox/combobox.styles.d.ts

@@ -0,0 +1,110 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/combobox/combobox.styles.d.ts
+export declare const comboboxStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+  multiple: {
+    true: {
+      trigger: string;
+      value: string;
+    };
+  };
+}, {
+  trigger: string[];
+  value: string;
+  placeholder: string;
+  chip: string;
+  icon: string;
+  content: string[];
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  item: string[];
+  itemText: string;
+  itemDescription: string;
+  check: string;
+}, undefined, {
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+  multiple: {
+    true: {
+      trigger: string;
+      value: string;
+    };
+  };
+}, {
+  trigger: string[];
+  value: string;
+  placeholder: string;
+  chip: string;
+  icon: string;
+  content: string[];
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  item: string[];
+  itemText: string;
+  itemDescription: string;
+  check: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+  multiple: {
+    true: {
+      trigger: string;
+      value: string;
+    };
+  };
+}, {
+  trigger: string[];
+  value: string;
+  placeholder: string;
+  chip: string;
+  icon: string;
+  content: string[];
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  item: string[];
+  itemText: string;
+  itemDescription: string;
+  check: string;
+}>>;
+export type ComboboxVariants = VariantProps<typeof comboboxStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Combobox: StylesEntry<typeof comboboxStyles>;
+  }
+}
+//#endregion

package/dist/components/combobox/combobox.styles.js

@@ -0,0 +1,42 @@
+"use client";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/combobox/combobox.styles.ts
+const comboboxStyles = /* @__PURE__ */ tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none",
+			"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		value: "flex min-w-0 flex-1 items-center gap-1 truncate",
+		placeholder: "truncate text-faint-foreground",
+		chip: "inline-flex h-5.5 max-w-40 shrink-0 items-center truncate rounded-pill bg-muted px-2 text-caption text-foreground",
+		icon: "size-4 shrink-0 text-faint-foreground",
+		content: [popover, "origin-(--radix-popover-content-transform-origin) w-(--radix-popover-trigger-width) min-w-56 p-0"],
+		search: "flex items-center gap-2 border-b border-border px-3 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+		input: "h-10 w-full min-w-0 bg-transparent text-small text-foreground outline-none placeholder:text-faint-foreground",
+		list: "max-h-72 overflow-y-auto overscroll-contain p-1",
+		empty: "px-3 py-6 text-center text-small text-muted-foreground",
+		item: ["relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-small text-foreground outline-none", "data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"],
+		itemText: "grid min-w-0 flex-1",
+		itemDescription: "truncate text-caption text-faint-foreground",
+		check: "size-4 shrink-0 text-primary"
+	},
+	variants: {
+		size: {
+			sm: { trigger: "min-h-(--glyph-control-sm) text-small" },
+			md: { trigger: "min-h-(--glyph-control-md) text-small" },
+			lg: { trigger: "min-h-(--glyph-control-lg) text-body" }
+		},
+		multiple: { true: {
+			trigger: "py-1",
+			value: "flex-wrap overflow-visible whitespace-normal"
+		} }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { comboboxStyles };

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+import { Combobox, ComboboxOption, ComboboxProps } from "./combobox.js";
+import { ComboboxVariants, comboboxStyles } from "./combobox.styles.js";
+export { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxVariants, comboboxStyles };

package/dist/components/command-menu/command-menu.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps, Dispatch, ReactNode, SetStateAction } from "react";
+import { Command } from "cmdk";
+//#region src/components/command-menu/command-menu.d.ts
+export interface CommandMenuProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Accessible name of the dialog and list. */
+  label?: string;
+  /** Wrap around from the last item to the first with arrow keys. Default true. */
+  loop?: boolean;
+  /** Replace cmdk's fuzzy ranking. Return 0 to hide an item, higher numbers to rank it first. */
+  filter?: (value: string, search: string, keywords?: string[]) => number;
+  className?: string;
+  children: ReactNode;
+}
+/**
+ * A ⌘K command palette in a modal dialog: search, grouped actions, keyboard navigation.
+ * Pair with `useCommandMenuShortcut(setOpen)` to open it from the keyboard.
+ */
+export declare function CommandMenu(inProps: CommandMenuProps): import("react").JSX.Element;
+/** The palette without a dialog, for inline search panels. */
+declare function Command$1({ className, ...props }: ComponentProps<typeof Command>): import("react").JSX.Element;
+export declare function CommandInput({ className, ...props }: ComponentProps<typeof Command.Input>): import("react").JSX.Element;
+export declare function CommandList({ className, ...props }: ComponentProps<typeof Command.List>): import("react").JSX.Element;
+export declare function CommandEmpty({ className, children, ...props }: ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
+export declare function CommandGroup({ className, ...props }: ComponentProps<typeof Command.Group>): import("react").JSX.Element;
+export interface CommandItemProps extends ComponentProps<typeof Command.Item> {
+  icon?: ReactNode;
+  /** Keyboard hint shown at the end, e.g. `"⌘N"` or `["⌘", "N"]`. Display only. */
+  shortcut?: string | readonly string[];
+  /** Close the surrounding CommandMenu after selecting. Default true. */
+  closeOnSelect?: boolean;
+}
+export declare function CommandItem({ icon, shortcut, closeOnSelect, onSelect, className, children, ...props }: CommandItemProps): import("react").JSX.Element;
+export declare function CommandSeparator({ className, ...props }: ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
+/** Toggles a command menu with ⌘K (macOS) or Ctrl+K. Pass another key to change it. */
+export declare function useCommandMenuShortcut(setOpen: Dispatch<SetStateAction<boolean>>, key?: string): void;
+//#endregion
+export { Command$1 as Command };

package/dist/components/command-menu/command-menu.js

@@ -0,0 +1,148 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { SearchIcon } from "../../internal/icons.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { Kbd } from "../kbd/kbd.js";
+import { commandMenuStyles } from "./command-menu.styles.js";
+import { Dialog } from "radix-ui";
+import { createContext, useContext, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+//#region src/components/command-menu/command-menu.tsx
+const s = commandMenuStyles();
+const CommandMenuContext = createContext(null);
+function useSlots() {
+	return useComponentConfig("CommandMenu", {})[1];
+}
+/**
+* A ⌘K command palette in a modal dialog: search, grouped actions, keyboard navigation.
+* Pair with `useCommandMenuShortcut(setOpen)` to open it from the keyboard.
+*/
+function CommandMenu(inProps) {
+	const [props, slots] = useComponentConfig("CommandMenu", inProps);
+	const { open: openProp, defaultOpen = false, onOpenChange, label = "Command menu", loop = true, filter, className, children } = props;
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			"data-slot": "command-menu",
+			"aria-describedby": void 0,
+			className: s.content({ class: [slots.content, className] }),
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "sr-only",
+				children: label
+			}), /* @__PURE__ */ jsx(CommandMenuContext.Provider, {
+				value: { close: () => setOpen(false) },
+				children: /* @__PURE__ */ jsx(Command$1, {
+					label,
+					loop,
+					...filter && { filter },
+					children
+				})
+			})]
+		})] })
+	});
+}
+/** The palette without a dialog, for inline search panels. */
+function Command$1({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: s.root({ class: [slots.root, className] }),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsxs("div", {
+		className: s.search({ class: slots.search }),
+		children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command.Input, {
+			"data-slot": "command-input",
+			className: s.input({ class: [slots.input, className] }),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Command.List, {
+		"data-slot": "command-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function CommandEmpty({ className, children = "No results", ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: s.empty({ class: [slots.empty, className] }),
+		...props,
+		children
+	});
+}
+function CommandGroup({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Command.Group, {
+		"data-slot": "command-group",
+		className: s.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function CommandItem({ icon, shortcut, closeOnSelect = true, onSelect, className, children, ...props }) {
+	const slots = useSlots();
+	const menu = useContext(CommandMenuContext);
+	const keys = shortcut === void 0 ? [] : typeof shortcut === "string" ? [shortcut] : shortcut;
+	return /* @__PURE__ */ jsxs(Command.Item, {
+		"data-slot": "command-item",
+		onSelect: (value) => {
+			onSelect?.(value);
+			if (closeOnSelect) menu?.close();
+		},
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.itemIcon({ class: slots.itemIcon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: s.itemLabel({ class: slots.itemLabel }),
+				children
+			}),
+			keys.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: s.shortcut({ class: slots.shortcut }),
+				"aria-hidden": "true",
+				children: keys.map((key) => /* @__PURE__ */ jsx(Kbd, { children: key }, key))
+			})
+		]
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+/** Toggles a command menu with ⌘K (macOS) or Ctrl+K. Pass another key to change it. */
+function useCommandMenuShortcut(setOpen, key = "k") {
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				setOpen((open) => !open);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [setOpen, key]);
+}
+//#endregion
+export { Command$1 as Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, useCommandMenuShortcut };