@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/prose/prose.d.ts

@@ -0,0 +1,90 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { ComponentProps } from "react";
+//#region src/components/prose/prose.d.ts
+/**
+ * Element styles for long-form content. Every value comes from theme tokens, so articles
+ * pick up the theme's display font, type scale, colors and radius.
+ */
+export declare const proseStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}, undefined, {
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Prose: StylesEntry<typeof proseStyles>;
+  }
+}
+export interface ProseProps extends ComponentProps<'div'>, VariantProps<typeof proseStyles> {
+  /** Render the child element (e.g. `<article>`) instead of a `<div>`. */
+  asChild?: boolean;
+}
+/**
+ * Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+ * tokens. Wrap rendered Markdown or CMS content in it.
+ */
+export declare function Prose(inProps: ProseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/prose/prose.js

@@ -0,0 +1,67 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/prose/prose.tsx
+/**
+* Element styles for long-form content. Every value comes from theme tokens, so articles
+* pick up the theme's display font, type scale, colors and radius.
+*/
+const proseStyles = /* @__PURE__ */ tv({
+	slots: { base: [
+		"text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+		"[&_h1]:mt-[1.4em] [&_h1]:mb-[0.5em] [&_h1]:font-display [&_h1]:text-h1 [&_h1]:text-balance",
+		"[&_h2]:mt-[1.6em] [&_h2]:mb-[0.5em] [&_h2]:font-display [&_h2]:text-h2 [&_h2]:text-balance",
+		"[&_h3]:mt-[1.5em] [&_h3]:mb-[0.4em] [&_h3]:font-display [&_h3]:text-h3 [&_h3]:text-balance",
+		"[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4",
+		"[&_p]:my-[1em] [&_p]:text-pretty",
+		"[&_strong]:font-semibold [&_strong]:text-foreground",
+		"[&_a]:font-medium [&_a]:text-primary-text [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary",
+		"[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]",
+		"[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground",
+		"[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground",
+		"[&_:not(pre)>code]:rounded-xs [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3em] [&_:not(pre)>code]:py-[0.15em] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[0.875em]",
+		"[&_pre]:my-[1.5em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-subtle [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-small [&_pre]:leading-relaxed",
+		"[&_hr]:my-[2em] [&_hr]:border-border",
+		"[&_img]:my-[1.5em] [&_img]:max-w-full [&_img]:rounded-lg",
+		"[&_figure]:my-[1.75em] [&_figure_img]:my-0 [&_figcaption]:mt-2 [&_figcaption]:text-small [&_figcaption]:text-faint-foreground",
+		"[&_table]:my-[1.5em] [&_table]:w-full [&_table]:border-collapse [&_table]:text-small [&_table]:tabular-nums",
+		"[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium",
+		"[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top"
+	] },
+	variants: {
+		size: {
+			sm: { base: "text-small [&_blockquote]:text-body" },
+			md: { base: "text-body [&_blockquote]:text-lead" },
+			lg: { base: "text-lead [&_blockquote]:text-h4" }
+		},
+		fullWidth: {
+			true: { base: "max-w-none" },
+			false: { base: "max-w-prose" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		fullWidth: false
+	}
+});
+/**
+* Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+* tokens. Wrap rendered Markdown or CMS content in it.
+*/
+function Prose(inProps) {
+	const [props, slots] = useComponentConfig("Prose", inProps);
+	const { size, fullWidth, asChild, className, ...rest } = props;
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "prose",
+		className: proseStyles({
+			size,
+			fullWidth
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Prose, proseStyles };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroupVariants, radioGroupStyles } from "./radio-group.styles.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./radio-group.js";
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupVariants, radioGroupStyles };

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,26 @@
+import { RadioGroupVariants } from "./radio-group.styles.js";
+import { RadioGroup } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/radio-group/radio-group.d.ts
+type RootProps = Omit<ComponentProps<typeof RadioGroup.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'orientation'>;
+export interface RadioGroupProps<T extends string> extends RootProps, RadioGroupVariants {
+  value?: T;
+  defaultValue?: T;
+  /** Receives your value type, not `string`. */
+  onValueChange?: (value: T) => void;
+}
+/**
+ * Pick exactly one option from a short visible list. `variant="card"` turns each option
+ * into a bordered card with a title and description.
+ */
+declare function RadioGroup$1<T extends string>(inProps: RadioGroupProps<T>): import("react").JSX.Element;
+export interface RadioGroupItemProps extends Omit<ComponentProps<typeof RadioGroup.Item>, 'children'> {
+  /** Visible label. For card items this is the card title. */
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Extra content inside a card item, below the description. */
+  children?: ReactNode;
+}
+export declare function RadioGroupItem({ label, description, children, className, id, ...props }: RadioGroupItemProps): import("react").JSX.Element;
+//#endregion
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,102 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { radioGroupStyles } from "./radio-group.styles.js";
+import { RadioGroup } from "radix-ui";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/radio-group/radio-group.tsx
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+	return useContext(RadioGroupContext) ?? {
+		s: radioGroupStyles(),
+		slots: {},
+		variant: "default"
+	};
+}
+/**
+* Pick exactly one option from a short visible list. `variant="card"` turns each option
+* into a bordered card with a title and description.
+*/
+function RadioGroup$1(inProps) {
+	const [props, slots] = useComponentConfig("RadioGroup", useFieldControl(inProps));
+	const { variant = "default", orientation = "vertical", onValueChange, className, ...rest } = props;
+	const s = radioGroupStyles({
+		variant,
+		orientation
+	});
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			s,
+			slots,
+			variant
+		},
+		children: /* @__PURE__ */ jsx(RadioGroup.Root, {
+			"data-slot": "radio-group",
+			"data-variant": variant,
+			orientation,
+			...onValueChange && { onValueChange: (value) => onValueChange(value) },
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function RadioGroupItem({ label, description, children, className, id, ...props }) {
+	const { s, slots, variant } = useRadioGroupContext();
+	const generated = useId();
+	const itemId = id ?? generated;
+	const descriptionId = description ? `${itemId}-description` : void 0;
+	if (variant === "card") return /* @__PURE__ */ jsxs(RadioGroup.Item, {
+		id: itemId,
+		"data-slot": "radio-group-card",
+		"aria-describedby": descriptionId,
+		className: s.card({ class: [slots.card, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.cardControl({ class: slots.cardControl }),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: s.indicator({ class: slots.indicator }) })
+		}), /* @__PURE__ */ jsxs("span", {
+			className: s.text({ class: slots.text }),
+			children: [
+				label && /* @__PURE__ */ jsx("span", {
+					className: s.label({ class: slots.label }),
+					children: label
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: s.description({ class: slots.description }),
+					children: description
+				}),
+				children
+			]
+		})]
+	});
+	const control = /* @__PURE__ */ jsx(RadioGroup.Item, {
+		id: itemId,
+		"data-slot": "radio-group-item",
+		"aria-describedby": descriptionId,
+		className: s.control({ class: [slots.control, !label && className] }),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: s.indicator({ class: slots.indicator }) })
+	});
+	if (!label) return control;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "radio-group-option",
+		className: s.option({ class: [slots.option, className] }),
+		children: [control, /* @__PURE__ */ jsxs("span", {
+			className: s.text({ class: slots.text }),
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: itemId,
+				className: s.label({ class: slots.label }),
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: s.description({ class: slots.description }),
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/components/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,80 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/radio-group/radio-group.styles.d.ts
+export declare const radioGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+  };
+  variant: {
+    default: {};
+    card: {};
+  };
+}, {
+  root: string;
+  option: string;
+  control: string[];
+  indicator: string;
+  text: string;
+  label: string;
+  description: string;
+  card: string[];
+  cardControl: string[];
+}, undefined, {
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+  };
+  variant: {
+    default: {};
+    card: {};
+  };
+}, {
+  root: string;
+  option: string;
+  control: string[];
+  indicator: string;
+  text: string;
+  label: string;
+  description: string;
+  card: string[];
+  cardControl: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+  };
+  variant: {
+    default: {};
+    card: {};
+  };
+}, {
+  root: string;
+  option: string;
+  control: string[];
+  indicator: string;
+  text: string;
+  label: string;
+  description: string;
+  card: string[];
+  cardControl: string[];
+}>>;
+export type RadioGroupVariants = VariantProps<typeof radioGroupStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    RadioGroup: StylesEntry<typeof radioGroupStyles>;
+  }
+}
+//#endregion

package/dist/components/radio-group/radio-group.styles.js

@@ -0,0 +1,56 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/radio-group/radio-group.styles.ts
+const control = [
+	"mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-pill border-input bg-surface shadow-xs",
+	themedBorder,
+	transition
+];
+const radioGroupStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "",
+		option: "flex items-start gap-2.5",
+		control: [
+			...control,
+			focusRing,
+			"peer cursor-pointer hover:border-border-strong aria-invalid:border-danger",
+			"data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		indicator: "flex size-full items-center justify-center after:block after:size-2 after:rounded-pill after:bg-primary",
+		text: "grid gap-0.5",
+		label: "cursor-pointer text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+		description: "text-small text-faint-foreground",
+		card: [
+			"group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border-border bg-surface p-4 text-left shadow-xs",
+			themedBorder,
+			transition,
+			focusRing,
+			"hover:border-border-strong",
+			"data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-primary",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		cardControl: [...control, "group-data-[state=checked]:border-primary"]
+	},
+	variants: {
+		orientation: {
+			vertical: { root: "grid gap-3" },
+			horizontal: { root: "flex flex-wrap gap-x-5 gap-y-3" }
+		},
+		variant: {
+			default: {},
+			card: {}
+		}
+	},
+	compoundVariants: [{
+		variant: "card",
+		orientation: "horizontal",
+		class: { root: "grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-3" }
+	}],
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default"
+	}
+});
+//#endregion
+export { radioGroupStyles };

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

@@ -0,0 +1,3 @@
+import { ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelProps } from "./resizable.js";
+import { ResizableVariants, resizableStyles } from "./resizable.styles.js";
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableVariants, resizableStyles };

package/dist/components/resizable/resizable.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+//#region src/components/resizable/resizable.d.ts
+export type ResizablePanelGroupProps = ComponentProps<typeof PanelGroup>;
+/**
+ * Panels separated by draggable, keyboard-accessible dividers, for editors and split views.
+ * Set `direction` to "horizontal" or "vertical"; pass `autoSaveId` to remember sizes.
+ */
+export declare function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+export type ResizablePanelProps = ComponentProps<typeof Panel>;
+export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
+export interface ResizableHandleProps extends ComponentProps<typeof PanelResizeHandle> {
+  /** Show a visible grip on the divider. */
+  withHandle?: boolean;
+}
+export declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): import("react").JSX.Element;
+//#endregion

package/dist/components/resizable/resizable.js

@@ -0,0 +1,81 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { resizableStyles } from "./resizable.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+//#region src/components/resizable/resizable.tsx
+const s = resizableStyles();
+function useSlots() {
+	return useComponentConfig("Resizable", {})[1];
+}
+/**
+* Panels separated by draggable, keyboard-accessible dividers, for editors and split views.
+* Set `direction` to "horizontal" or "vertical"; pass `autoSaveId` to remember sizes.
+*/
+function ResizablePanelGroup({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(PanelGroup, {
+		"data-slot": "resizable-group",
+		className: s.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function ResizablePanel({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		className: s.panel({ class: [slots.panel, className] }),
+		...props
+	});
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(PanelResizeHandle, {
+		"data-slot": "resizable-handle",
+		className: s.handle({ class: [slots.handle, className] }),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", {
+			className: s.grip({ class: slots.grip }),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "6",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "6",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "12",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "12",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "18",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "18",
+						r: "1.5"
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -0,0 +1,53 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/resizable/resizable.styles.d.ts
+export declare const resizableStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      group?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      grip?: import("tailwind-variants").ClassValue;
+      handle?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      group?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      grip?: import("tailwind-variants").ClassValue;
+      handle?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  group: string;
+  panel: string;
+  handle: string[];
+  grip: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      group?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      grip?: import("tailwind-variants").ClassValue;
+      handle?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  group: string;
+  panel: string;
+  handle: string[];
+  grip: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  group: string;
+  panel: string;
+  handle: string[];
+  grip: string;
+}>>;
+export type ResizableVariants = VariantProps<typeof resizableStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Resizable: StylesEntry<typeof resizableStyles>;
+  }
+}
+//#endregion

package/dist/components/resizable/resizable.styles.js

@@ -0,0 +1,19 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/resizable/resizable.styles.ts
+const resizableStyles = /* @__PURE__ */ tv({ slots: {
+	group: "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+	panel: "min-w-0",
+	handle: [
+		"relative flex w-px shrink-0 items-center justify-center bg-border outline-none",
+		"transition-colors duration-(--glyph-duration-fast)",
+		"after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2",
+		"hover:bg-border-strong data-[resize-handle-state=drag]:bg-primary",
+		"focus-visible:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+		"data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+		"data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:inset-y-auto data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:h-2 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2"
+	],
+	grip: "z-10 flex h-5 w-3 items-center justify-center rounded-xs border border-border bg-surface text-faint-foreground shadow-xs in-data-[panel-group-direction=vertical]:h-3 in-data-[panel-group-direction=vertical]:w-5 [&>svg]:size-2.5 in-data-[panel-group-direction=vertical]:[&>svg]:rotate-90"
+} });
+//#endregion
+export { resizableStyles };

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+import { ScrollArea, ScrollAreaProps, scrollAreaStyles } from "./scroll-area.js";
+export { ScrollArea, type ScrollAreaProps, scrollAreaStyles };

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,70 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { ScrollArea } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/scroll-area/scroll-area.d.ts
+export declare const scrollAreaStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+      scrollbar?: import("tailwind-variants").ClassValue;
+      corner?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+      scrollbar?: import("tailwind-variants").ClassValue;
+      corner?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  viewport: string[];
+  scrollbar: string[];
+  thumb: string;
+  corner: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+      scrollbar?: import("tailwind-variants").ClassValue;
+      corner?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  viewport: string[];
+  scrollbar: string[];
+  thumb: string;
+  corner: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  viewport: string[];
+  scrollbar: string[];
+  thumb: string;
+  corner: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    ScrollArea: StylesEntry<typeof scrollAreaStyles>;
+  }
+}
+export interface ScrollAreaProps extends ComponentProps<typeof ScrollArea.Root> {
+  /** Which scrollbars to show. Default vertical. */
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  viewportClassName?: string;
+}
+/**
+ * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
+ * with `className`, e.g. `h-72`.
+ */
+declare function ScrollArea$1(inProps: ScrollAreaProps): import("react").JSX.Element;
+//#endregion
+export { ScrollArea$1 as ScrollArea };