@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/toast/toast.js

@@ -0,0 +1,75 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { jsx } from "react/jsx-runtime";
+import { Toaster as Toaster$1, toast } from "sonner";
+//#region src/components/toast/toast.tsx
+const toastStyles = /* @__PURE__ */ tv({ slots: {
+	toast: ["group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg", themedBorder],
+	content: "flex min-w-0 flex-1 flex-col gap-0.5",
+	title: "font-medium text-foreground",
+	description: "text-muted-foreground",
+	icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+	actionButton: [
+		"inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-primary px-2.5 text-caption font-medium text-primary-foreground hover:bg-primary/88",
+		transition,
+		focusRing
+	],
+	cancelButton: [
+		"inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-muted px-2.5 text-caption font-medium text-muted-foreground hover:text-foreground",
+		transition,
+		focusRing
+	],
+	closeButton: [
+		"absolute -top-2 -left-2 flex size-5 cursor-pointer items-center justify-center rounded-pill border-border bg-raised text-muted-foreground shadow-xs hover:text-foreground [&>svg]:size-3",
+		themedBorder,
+		focusRing
+	],
+	success: "[&_[data-icon]]:text-success",
+	error: "[&_[data-icon]]:text-danger",
+	warning: "[&_[data-icon]]:text-warning",
+	info: "[&_[data-icon]]:text-info",
+	loading: "[&_[data-icon]]:text-muted-foreground"
+} });
+/**
+* Renders toasts sent with `toast()`. Mount once near the root. Styled entirely by the
+* theme's tokens, so it follows the theme and color mode automatically.
+*
+* ```tsx
+* toast.success('Saved')
+* toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Couldn’t save' })
+* ```
+*/
+function Toaster(inProps) {
+	const [props, slots] = useComponentConfig("Toast", inProps);
+	const { toastOptions, position = "bottom-right", ...rest } = props;
+	const s = toastStyles();
+	const classNames = toastOptions?.classNames ?? {};
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		position,
+		gap: 10,
+		...rest,
+		toastOptions: {
+			...toastOptions,
+			unstyled: true,
+			classNames: {
+				toast: s.toast({ class: [slots.toast, classNames.toast] }),
+				content: s.content({ class: [slots.content, classNames.content] }),
+				title: s.title({ class: [slots.title, classNames.title] }),
+				description: s.description({ class: [slots.description, classNames.description] }),
+				icon: s.icon({ class: [slots.icon, classNames.icon] }),
+				actionButton: s.actionButton({ class: [slots.actionButton, classNames.actionButton] }),
+				cancelButton: s.cancelButton({ class: [slots.cancelButton, classNames.cancelButton] }),
+				closeButton: s.closeButton({ class: [slots.closeButton, classNames.closeButton] }),
+				success: s.success({ class: [slots.success, classNames.success] }),
+				error: s.error({ class: [slots.error, classNames.error] }),
+				warning: s.warning({ class: [slots.warning, classNames.warning] }),
+				info: s.info({ class: [slots.info, classNames.info] }),
+				loading: s.loading({ class: [slots.loading, classNames.loading] })
+			}
+		}
+	});
+}
+//#endregion
+export { Toaster, toast, toastStyles };

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

@@ -0,0 +1,3 @@
+import { ToggleVariants, toggleStyles } from "./toggle.styles.js";
+import { Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleProps } from "./toggle.js";
+export { Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleVariants, toggleStyles };

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,20 @@
+import { ToggleVariants } from "./toggle.styles.js";
+import { Toggle, ToggleGroup } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/toggle/toggle.d.ts
+export interface ToggleProps extends ComponentProps<typeof Toggle.Root>, ToggleVariants {}
+/**
+ * A two-state button, e.g. Bold in a toolbar. Use Switch for settings that take effect
+ * immediately, and Checkbox inside forms.
+ */
+declare function Toggle$1(inProps: ToggleProps): import("react").JSX.Element;
+export type ToggleGroupProps = ComponentProps<typeof ToggleGroup.Root> & ToggleVariants;
+/**
+ * A set of toggles. `type="single"` behaves like a radio group (text alignment),
+ * `type="multiple"` like checkboxes (bold, italic, underline). Arrow keys move between items.
+ */
+declare function ToggleGroup$1(inProps: ToggleGroupProps): import("react").JSX.Element;
+export interface ToggleGroupItemProps extends ComponentProps<typeof ToggleGroup.Item>, ToggleVariants {}
+export declare function ToggleGroupItem({ variant, size, className, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+//#endregion
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup };

package/dist/components/toggle/toggle.js

@@ -0,0 +1,58 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { toggleStyles } from "./toggle.styles.js";
+import { Toggle, ToggleGroup } from "radix-ui";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/toggle/toggle.tsx
+/**
+* A two-state button, e.g. Bold in a toolbar. Use Switch for settings that take effect
+* immediately, and Checkbox inside forms.
+*/
+function Toggle$1(inProps) {
+	const [props, slots] = useComponentConfig("Toggle", inProps);
+	const { variant, size, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Toggle.Root, {
+		"data-slot": "toggle",
+		className: toggleStyles({
+			variant,
+			size
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+const ToggleGroupContext = createContext({});
+/**
+* A set of toggles. `type="single"` behaves like a radio group (text alignment),
+* `type="multiple"` like checkboxes (bold, italic, underline). Arrow keys move between items.
+*/
+function ToggleGroup$1(inProps) {
+	const [props, slots] = useComponentConfig("Toggle", inProps);
+	const { variant, size, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup.Root, {
+			"data-slot": "toggle-group",
+			className: toggleStyles().group({ class: [slots.group, className] }),
+			...rest
+		})
+	});
+}
+function ToggleGroupItem({ variant, size, className, ...props }) {
+	const group = useContext(ToggleGroupContext);
+	const [, slots] = useComponentConfig("Toggle", {});
+	const s = toggleStyles({
+		variant: variant ?? group.variant,
+		size: size ?? group.size
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		"data-slot": "toggle-group-item",
+		className: s.base({ class: [slots.base, className] }),
+		...props
+	});
+}
+//#endregion
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,80 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/toggle/toggle.styles.d.ts
+export declare const toggleStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: {
+      base: string;
+    };
+    outline: {
+      base: string[];
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  group: string;
+}, undefined, {
+  variant: {
+    default: {
+      base: string;
+    };
+    outline: {
+      base: string[];
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  group: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: {
+      base: string;
+    };
+    outline: {
+      base: string[];
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  group: string;
+}>>;
+export type ToggleVariants = VariantProps<typeof toggleStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Toggle: StylesEntry<typeof toggleStyles>;
+  }
+}
+//#endregion

package/dist/components/toggle/toggle.styles.js

@@ -0,0 +1,34 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/toggle/toggle.styles.ts
+const toggleStyles = /* @__PURE__ */ tv({
+	slots: {
+		base: [
+			"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:bg-muted hover:text-foreground",
+			"data-[state=on]:bg-muted data-[state=on]:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"
+		],
+		group: "inline-flex items-center gap-1"
+	},
+	variants: {
+		variant: {
+			default: { base: "bg-transparent" },
+			outline: { base: ["border-border bg-transparent shadow-xs hover:border-border-strong", themedBorder] }
+		},
+		size: {
+			sm: { base: "h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-2 text-caption" },
+			md: { base: "h-(--glyph-control-md) min-w-(--glyph-control-md) px-2.5 text-small" },
+			lg: { base: "h-(--glyph-control-lg) min-w-(--glyph-control-lg) px-3 text-small" }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { toggleStyles };

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProps, tooltipStyles } from "./tooltip.js";
+export { Tooltip, type TooltipProps, tooltipStyles };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,39 @@
+import { Tooltip } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/tooltip/tooltip.d.ts
+export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  content: string[];
+}>>;
+export interface TooltipProps extends Omit<ComponentProps<typeof Tooltip.Content>, 'content'> {
+  content: ReactNode;
+  children: ReactNode;
+  /** Skip the tooltip entirely, e.g. when the label is already visible. */
+  disabled?: boolean;
+  delayDuration?: number;
+}
+/** A short hint on hover or focus. The child must be focusable (a button or link). */
+declare function Tooltip$1(inProps: TooltipProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,29 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { popoverMotion } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { Tooltip } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tooltip/tooltip.tsx
+const tooltipStyles = /* @__PURE__ */ tv({ slots: { content: ["z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md", popoverMotion] } });
+/** A short hint on hover or focus. The child must be focusable (a button or link). */
+function Tooltip$1(inProps) {
+	const [props, slots] = useComponentConfig("Tooltip", inProps);
+	const { content, children, disabled, delayDuration, className, sideOffset = 6, ...rest } = props;
+	if (disabled) return children;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		...delayDuration !== void 0 && { delayDuration },
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
+			"data-slot": "tooltip",
+			sideOffset,
+			className: tooltipStyles().content({ class: [slots.content, className] }),
+			...rest,
+			children: content
+		}) })]
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip, tooltipStyles };

package/dist/components/tree-view/index.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewVariants, treeViewStyles } from "./tree-view.styles.js";
+import { TreeNode, TreeView, TreeViewProps } from "./tree-view.js";
+export { type TreeNode, TreeView, type TreeViewProps, type TreeViewVariants, treeViewStyles };

package/dist/components/tree-view/tree-view.d.ts

@@ -0,0 +1,31 @@
+import { TreeViewVariants } from "./tree-view.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/tree-view/tree-view.d.ts
+export interface TreeNode {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  children?: readonly TreeNode[];
+  disabled?: boolean;
+  /** Text used for type-to-find when `label` is not a string. */
+  textValue?: string;
+}
+export interface TreeViewProps extends Omit<ComponentProps<'div'>, 'onSelect' | 'children' | 'defaultValue'>, TreeViewVariants {
+  nodes: readonly TreeNode[];
+  /** Ids of expanded nodes (controlled). */
+  expanded?: readonly string[];
+  defaultExpanded?: readonly string[];
+  onExpandedChange?: (expanded: string[]) => void;
+  /** Id of the selected node (controlled). `null` for none. */
+  selected?: string | null;
+  defaultSelected?: string | null;
+  onSelect?: (id: string, node: TreeNode) => void;
+  /** Required: describes the tree, e.g. "Project files". */
+  'aria-label': string;
+}
+/**
+ * An accessible tree for file browsers and nested navigation. Arrow keys move and
+ * expand/collapse, Home/End jump, typing a letter finds the next match, Enter or Space selects.
+ */
+export declare function TreeView(inProps: TreeViewProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,192 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { treeViewStyles } from "./tree-view.styles.js";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tree-view/tree-view.tsx
+function flattenVisible(nodes, expanded) {
+	const out = [];
+	const walk = (list, level, parentId) => {
+		for (const node of list) {
+			out.push({
+				node,
+				level,
+				parentId
+			});
+			if (node.children?.length && expanded.has(node.id)) walk(node.children, level + 1, node.id);
+		}
+	};
+	walk(nodes, 1, null);
+	return out;
+}
+function textOf(node) {
+	return (node.textValue ?? (typeof node.label === "string" ? node.label : "")).toLowerCase();
+}
+const NO_IDS = [];
+/**
+* An accessible tree for file browsers and nested navigation. Arrow keys move and
+* expand/collapse, Home/End jump, typing a letter finds the next match, Enter or Space selects.
+*/
+function TreeView(inProps) {
+	const [props, slots] = useComponentConfig("TreeView", inProps);
+	const { nodes, expanded: expandedProp, defaultExpanded = NO_IDS, onExpandedChange, selected: selectedProp, defaultSelected = null, onSelect, size, className, ...rest } = props;
+	const [expandedList, setExpandedList] = useControllableState({
+		value: expandedProp,
+		defaultValue: defaultExpanded,
+		onChange: onExpandedChange
+	});
+	const [selected, setSelected] = useControllableState({
+		value: selectedProp,
+		defaultValue: defaultSelected
+	});
+	const expanded = useMemo(() => new Set(expandedList), [expandedList]);
+	const visible = useMemo(() => flattenVisible(nodes, expanded), [nodes, expanded]);
+	const [focusedId, setFocusedId] = useState(null);
+	const refs = useRef(/* @__PURE__ */ new Map());
+	const baseId = useId();
+	const tabbableId = focusedId && visible.some((v) => v.node.id === focusedId) && focusedId || selected && visible.some((v) => v.node.id === selected) && selected || visible[0]?.node.id;
+	const focus = useCallback((id) => {
+		if (!id) return;
+		setFocusedId(id);
+		refs.current.get(id)?.focus();
+	}, []);
+	const toggle = useCallback((id, open) => {
+		const isOpen = expanded.has(id);
+		const next = open ?? !isOpen;
+		if (next === isOpen) return;
+		setExpandedList(next ? [...expandedList, id] : expandedList.filter((x) => x !== id));
+	}, [
+		expanded,
+		expandedList,
+		setExpandedList
+	]);
+	const select = useCallback((node) => {
+		if (node.disabled) return;
+		setSelected(node.id);
+		onSelect?.(node.id, node);
+	}, [onSelect, setSelected]);
+	const onKeyDown = (event) => {
+		const index = visible.findIndex((v) => v.node.id === tabbableId);
+		const current = visible[index];
+		if (!current) return;
+		const { node } = current;
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = expanded.has(node.id);
+		let handled = true;
+		switch (event.key) {
+			case "ArrowDown":
+				focus(visible[index + 1]?.node.id);
+				break;
+			case "ArrowUp":
+				focus(visible[index - 1]?.node.id);
+				break;
+			case "ArrowRight":
+				if (hasChildren && !isOpen) toggle(node.id, true);
+				else if (hasChildren) focus(node.children?.[0]?.id);
+				break;
+			case "ArrowLeft":
+				if (hasChildren && isOpen) toggle(node.id, false);
+				else if (current.parentId) focus(current.parentId);
+				break;
+			case "Home":
+				focus(visible[0]?.node.id);
+				break;
+			case "End":
+				focus(visible.at(-1)?.node.id);
+				break;
+			case "Enter":
+			case " ":
+				select(node);
+				break;
+			default:
+				handled = false;
+				if (event.key.length === 1 && /\S/.test(event.key) && !event.metaKey && !event.ctrlKey) {
+					const char = event.key.toLowerCase();
+					const match = [...visible.slice(index + 1), ...visible.slice(0, index + 1)].find((v) => textOf(v.node).startsWith(char));
+					if (match) {
+						focus(match.node.id);
+						handled = true;
+					}
+				}
+		}
+		if (handled) event.preventDefault();
+	};
+	const s = treeViewStyles({ size });
+	/** Clicks bubble from nested items; only handle the item whose own row was clicked. */
+	const onItemClick = (event, node, hasChildren) => {
+		if (event.target.closest("[data-slot=tree-row]")?.parentElement !== event.currentTarget) return;
+		focus(node.id);
+		if (hasChildren) toggle(node.id);
+		select(node);
+	};
+	const renderNodes = (list, level) => list.map((node, i) => {
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = hasChildren && expanded.has(node.id);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (el) => {
+				if (el) refs.current.set(node.id, el);
+				else refs.current.delete(node.id);
+			},
+			role: "treeitem",
+			"data-slot": "tree-item",
+			"aria-labelledby": `${baseId}-${node.id}`,
+			"aria-level": level,
+			"aria-setsize": list.length,
+			"aria-posinset": i + 1,
+			"aria-expanded": hasChildren ? isOpen : void 0,
+			"aria-selected": selected === node.id,
+			"aria-disabled": node.disabled || void 0,
+			tabIndex: node.id === tabbableId ? 0 : -1,
+			onFocus: (event) => {
+				if (event.target === event.currentTarget) setFocusedId(node.id);
+			},
+			onClick: (event) => onItemClick(event, node, hasChildren),
+			className: s.item({ class: slots.item }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "tree-row",
+				"data-state": isOpen ? "open" : "closed",
+				className: s.row({ class: slots.row }),
+				style: { paddingInlineStart: `calc(${level - 1} * 1rem + 0.25rem)` },
+				children: [
+					hasChildren ? /* @__PURE__ */ jsx("svg", {
+						"data-slot": "tree-chevron",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: s.chevron({ class: slots.chevron }),
+						children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+					}) : /* @__PURE__ */ jsx("span", { className: s.spacer({ class: slots.spacer }) }),
+					node.icon && /* @__PURE__ */ jsx("span", {
+						className: s.icon({ class: slots.icon }),
+						"aria-hidden": "true",
+						children: node.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: `${baseId}-${node.id}`,
+						className: s.label({ class: slots.label }),
+						children: node.label
+					})
+				]
+			}), isOpen && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				className: s.group({ class: slots.group }),
+				children: renderNodes(node.children ?? [], level + 1)
+			})]
+		}, node.id);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		"data-slot": "tree-view",
+		onKeyDown,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: renderNodes(nodes, 1)
+	});
+}
+//#endregion
+export { TreeView };

package/dist/components/tree-view/tree-view.styles.d.ts

@@ -0,0 +1,59 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/tree-view/tree-view.styles.d.ts
+export declare const treeViewStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}, undefined, {
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}>>;
+export type TreeViewVariants = VariantProps<typeof treeViewStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TreeView: StylesEntry<typeof treeViewStyles>;
+  }
+}
+//#endregion

package/dist/components/tree-view/tree-view.styles.js

@@ -0,0 +1,32 @@
+"use client";
+import { transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/tree-view/tree-view.styles.ts
+const treeViewStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-px text-small",
+		item: [
+			"outline-none",
+			"focus-visible:[&>[data-slot=tree-row]]:ring-2 focus-visible:[&>[data-slot=tree-row]]:ring-ring",
+			"aria-selected:[&>[data-slot=tree-row]]:bg-muted aria-selected:[&>[data-slot=tree-row]]:text-foreground aria-selected:[&>[data-slot=tree-row]]:font-medium",
+			"aria-disabled:[&>[data-slot=tree-row]]:pointer-events-none aria-disabled:[&>[data-slot=tree-row]]:opacity-50"
+		],
+		row: [
+			"group/row flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-sm pr-2 text-muted-foreground",
+			transition,
+			"hover:bg-muted hover:text-foreground"
+		],
+		chevron: "size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-fast) ease-standard group-data-[state=open]/row:rotate-90",
+		spacer: "size-4 shrink-0",
+		icon: "flex size-4 shrink-0 items-center justify-center text-faint-foreground [&>svg]:size-4",
+		label: "min-w-0 flex-1 truncate",
+		group: "grid gap-px"
+	},
+	variants: { size: {
+		sm: { row: "h-7 text-caption" },
+		md: {}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { treeViewStyles };

package/dist/components/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+import { VisuallyHidden } from "./visually-hidden.js";
+export { VisuallyHidden };