@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/sheet/sheet.js

@@ -0,0 +1,83 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CloseIcon } from "../dialog/close-icon.js";
+import { sheetStyles } from "./sheet.styles.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sheet/sheet.tsx
+function useParts() {
+	const [, slots] = useComponentConfig("Sheet", {});
+	return {
+		s: sheetStyles(),
+		slots
+	};
+}
+/** A panel that slides in from an edge: filters, details, settings, mobile navigation. */
+const Sheet = Dialog.Root;
+const SheetTrigger = Dialog.Trigger;
+const SheetClose = Dialog.Close;
+function SheetContent(inProps) {
+	const [props, slots] = useComponentConfig("Sheet", inProps);
+	const { side, size, showClose = true, overlayClassName, className, children, ...rest } = props;
+	const s = sheetStyles({
+		side,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "sheet-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		"data-slot": "sheet-content",
+		"data-side": side ?? "right",
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showClose && /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "sheet-close",
+			"aria-label": "Close",
+			className: s.close({ class: slots.close }),
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function SheetBody({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

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

@@ -0,0 +1,101 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/sheet/sheet.styles.d.ts
+export declare const sheetStyles: import("tailwind-variants").TVReturnType<{
+  side: {
+    right: {
+      content: string;
+    };
+    left: {
+      content: string;
+    };
+    top: {
+      content: string;
+    };
+    bottom: {
+      content: string;
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+    xl: {};
+  };
+}, {
+  overlay: string;
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, undefined, {
+  side: {
+    right: {
+      content: string;
+    };
+    left: {
+      content: string;
+    };
+    top: {
+      content: string;
+    };
+    bottom: {
+      content: string;
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+    xl: {};
+  };
+}, {
+  overlay: string;
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  side: {
+    right: {
+      content: string;
+    };
+    left: {
+      content: string;
+    };
+    top: {
+      content: string;
+    };
+    bottom: {
+      content: string;
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+    xl: {};
+  };
+}, {
+  overlay: string;
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}>>;
+export type SheetVariants = VariantProps<typeof sheetStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Sheet: StylesEntry<typeof sheetStyles>;
+  }
+}
+//#endregion

package/dist/components/sheet/sheet.styles.js

@@ -0,0 +1,62 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/sheet/sheet.styles.ts
+const sheetStyles = /* @__PURE__ */ tv({
+	slots: {
+		overlay: "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+		content: ["fixed z-50 flex flex-col gap-5 border-border bg-surface p-6 text-foreground shadow-lg outline-none"],
+		close: [
+			"absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4",
+			transition,
+			focusRing
+		],
+		header: "flex flex-col gap-1.5 pr-8",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "-mx-6 min-h-0 flex-1 overflow-y-auto px-6 text-small",
+		footer: "mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+	},
+	variants: {
+		side: {
+			right: { content: "inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-right data-[state=closed]:animate-sheet-out-right" },
+			left: { content: "inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-left data-[state=closed]:animate-sheet-out-left" },
+			top: { content: "inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-top data-[state=closed]:animate-sheet-out-top" },
+			bottom: { content: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-bottom data-[state=closed]:animate-sheet-out-bottom" }
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {},
+			xl: {}
+		}
+	},
+	compoundVariants: [
+		{
+			side: ["left", "right"],
+			size: "sm",
+			class: { content: "sm:max-w-sm" }
+		},
+		{
+			side: ["left", "right"],
+			size: "md",
+			class: { content: "sm:max-w-md" }
+		},
+		{
+			side: ["left", "right"],
+			size: "lg",
+			class: { content: "sm:max-w-xl" }
+		},
+		{
+			side: ["left", "right"],
+			size: "xl",
+			class: { content: "sm:max-w-3xl" }
+		}
+	],
+	defaultVariants: {
+		side: "right",
+		size: "md"
+	}
+});
+//#endregion
+export { sheetStyles };

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

@@ -0,0 +1,2 @@
+import { Skeleton, skeletonStyles } from "./skeleton.js";
+export { Skeleton, skeletonStyles };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/components/skeleton/skeleton.d.ts
+export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+}>>;
+/** Placeholder block shown while content loads. Size it with classes: `h-4 w-32`. */
+export declare function Skeleton(inProps: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,18 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+const skeletonStyles = /* @__PURE__ */ tv({ slots: { base: "animate-pulse rounded-sm bg-muted" } });
+/** Placeholder block shown while content loads. Size it with classes: `h-4 w-32`. */
+function Skeleton(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Skeleton", inProps);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		className: skeletonStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Skeleton, skeletonStyles };

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

@@ -0,0 +1,3 @@
+import { Slider, SliderMark, SliderProps, SliderValue } from "./slider.js";
+import { SliderVariants, sliderStyles } from "./slider.styles.js";
+export { Slider, type SliderMark, type SliderProps, type SliderValue, type SliderVariants, sliderStyles };

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+//#region src/components/slider/slider.d.ts
+export type SliderValue = number | readonly [number, number];
+export interface SliderMark {
+  value: number;
+  label?: ReactNode;
+}
+export interface SliderProps<V extends SliderValue> {
+  /** A number for one thumb, a `[min, max]` tuple for a range. */
+  value?: V;
+  defaultValue?: V;
+  onValueChange?: (value: V) => void;
+  /** Fires once when the user releases the thumb. Use it for expensive updates. */
+  onValueCommit?: (value: V) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Minimum distance between range thumbs, in steps. */
+  minStepsBetweenThumbs?: number;
+  /** Labels shown under the track at given values. */
+  marks?: readonly (number | SliderMark)[];
+  /** Show the current value above each thumb. Pass a function to format it. */
+  showValue?: boolean | ((value: number) => ReactNode);
+  disabled?: boolean;
+  name?: string;
+  id?: string;
+  className?: string;
+  /** Accessible name. Inside a `Field`, the field's label is used when this is not set. */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  /** Accessible names for range thumbs. Default: "Minimum", "Maximum". */
+  thumbLabels?: readonly [string, string];
+}
+/** Choose a number, or a range with two thumbs, by dragging or with arrow keys. */
+export declare function Slider<V extends SliderValue = number>(inProps: SliderProps<V>): import("react").JSX.Element;
+//#endregion

package/dist/components/slider/slider.js

@@ -0,0 +1,68 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { FieldContext, useFieldControl } from "../field/field-context.js";
+import { sliderStyles } from "./slider.styles.js";
+import { Slider } from "radix-ui";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider/slider.tsx
+const toArray = (value) => value === void 0 ? void 0 : typeof value === "number" ? [value] : [...value];
+/** Choose a number, or a range with two thumbs, by dragging or with arrow keys. */
+function Slider$1(inProps) {
+	const [props, slots] = useComponentConfig("Slider", useFieldControl(inProps));
+	const { value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs, marks, showValue = false, disabled, name, id, className, thumbLabels = ["Minimum", "Maximum"], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const field = useContext(FieldContext);
+	const labelledBy = ariaLabelledBy ?? (ariaLabel ? void 0 : field?.labelId);
+	const isRange = Array.isArray(value ?? defaultValue);
+	const fromArray = (next) => isRange ? [next[0], next[1]] : next[0];
+	const current = toArray(value) ?? toArray(defaultValue) ?? [min];
+	const s = sliderStyles({ showValue: Boolean(showValue) });
+	const format = typeof showValue === "function" ? showValue : (n) => n;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "slider",
+		className: s.wrapper({ class: [slots.wrapper, className] }),
+		children: [/* @__PURE__ */ jsxs(Slider.Root, {
+			className: s.root({ class: slots.root }),
+			min,
+			max,
+			step,
+			disabled,
+			name,
+			...minStepsBetweenThumbs !== void 0 && { minStepsBetweenThumbs },
+			...value !== void 0 && { value: toArray(value) },
+			...defaultValue !== void 0 && { defaultValue: toArray(defaultValue) },
+			...onValueChange && { onValueChange: (next) => onValueChange(fromArray(next)) },
+			...onValueCommit && { onValueCommit: (next) => onValueCommit(fromArray(next)) },
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				className: s.track({ class: slots.track }),
+				children: /* @__PURE__ */ jsx(Slider.Range, { className: s.range({ class: slots.range }) })
+			}), current.map((thumbValue, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+				id: index === 0 ? id : void 0,
+				"aria-label": isRange ? thumbLabels[index] : ariaLabel,
+				"aria-labelledby": isRange ? void 0 : labelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid,
+				className: s.thumb({ class: slots.thumb }),
+				children: showValue && /* @__PURE__ */ jsx("span", {
+					className: s.value({ class: slots.value }),
+					"aria-hidden": "true",
+					children: format(thumbValue)
+				})
+			}, index))]
+		}), marks && marks.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: s.marks({ class: slots.marks }),
+			"aria-hidden": "true",
+			children: marks.map((mark) => {
+				const m = typeof mark === "number" ? { value: mark } : mark;
+				const percent = (m.value - min) / (max - min || 1) * 100;
+				return /* @__PURE__ */ jsx("span", {
+					className: s.mark({ class: slots.mark }),
+					style: { left: `${percent}%` },
+					children: m.label ?? m.value
+				}, m.value);
+			})
+		})]
+	});
+}
+//#endregion
+export { Slider$1 as Slider };

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

@@ -0,0 +1,56 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/slider/slider.styles.d.ts
+export declare const sliderStyles: import("tailwind-variants").TVReturnType<{
+  showValue: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  wrapper: string;
+  root: string;
+  track: string;
+  range: string;
+  thumb: string[];
+  value: string;
+  marks: string;
+  mark: string;
+}, undefined, {
+  showValue: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  wrapper: string;
+  root: string;
+  track: string;
+  range: string;
+  thumb: string[];
+  value: string;
+  marks: string;
+  mark: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  showValue: {
+    true: {
+      wrapper: string;
+    };
+  };
+}, {
+  wrapper: string;
+  root: string;
+  track: string;
+  range: string;
+  thumb: string[];
+  value: string;
+  marks: string;
+  mark: string;
+}>>;
+export type SliderVariants = VariantProps<typeof sliderStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Slider: StylesEntry<typeof sliderStyles>;
+  }
+}
+//#endregion

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,23 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/slider/slider.styles.ts
+const sliderStyles = /* @__PURE__ */ tv({
+	slots: {
+		wrapper: "grid w-full gap-1.5",
+		root: "relative flex h-5 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		track: "relative h-1.5 w-full grow overflow-hidden rounded-pill bg-muted",
+		range: "absolute h-full bg-primary",
+		thumb: [
+			"relative block size-4 cursor-grab rounded-pill border-2 border-primary bg-background shadow-sm outline-none active:cursor-grabbing",
+			"transition-[box-shadow] duration-(--glyph-duration-fast) ease-standard",
+			"hover:ring-4 hover:ring-ring/15 focus-visible:ring-4 focus-visible:ring-ring/30",
+			"data-disabled:cursor-not-allowed"
+		],
+		value: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-xs bg-secondary px-1.5 py-0.5 font-mono text-caption text-secondary-foreground tabular-nums",
+		marks: "relative h-4 w-full",
+		mark: "absolute top-0 -translate-x-1/2 text-caption text-faint-foreground tabular-nums"
+	},
+	variants: { showValue: { true: { wrapper: "pt-7" } } }
+});
+//#endregion
+export { sliderStyles };

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

@@ -0,0 +1,3 @@
+import { SpinnerVariants, spinnerStyles } from "./spinner.styles.js";
+import { Spinner, SpinnerProps } from "./spinner.js";
+export { Spinner, type SpinnerProps, type SpinnerVariants, spinnerStyles };

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,9 @@
+import { SpinnerVariants } from "./spinner.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/spinner/spinner.d.ts
+export interface SpinnerProps extends Omit<ComponentProps<'svg'>, 'children'>, SpinnerVariants {
+  /** Accessible label. Omit when the spinner sits inside an element that already says it's busy. */
+  label?: string;
+}
+export declare function Spinner(inProps: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spinner/spinner.js

@@ -0,0 +1,36 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { spinnerStyles } from "./spinner.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+function Spinner(inProps) {
+	const [props, slots] = useComponentConfig("Spinner", inProps);
+	const { size, label, className, ...rest } = props;
+	const s = spinnerStyles({ size });
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "spinner",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		role: label ? "status" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		className: s.base({ class: [slots.base, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: s.track({ class: slots.track }),
+			cx: "12",
+			cy: "12",
+			r: "9",
+			stroke: "currentColor",
+			strokeWidth: "3"
+		}), /* @__PURE__ */ jsx("path", {
+			className: s.arc({ class: slots.arc }),
+			d: "M21 12a9 9 0 0 0-9-9",
+			stroke: "currentColor",
+			strokeWidth: "3",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+export { Spinner };

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

@@ -0,0 +1,53 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/spinner/spinner.styles.d.ts
+export declare const spinnerStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  track: string;
+  arc: string;
+}, undefined, {
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  track: string;
+  arc: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  track: string;
+  arc: string;
+}>>;
+export type SpinnerVariants = VariantProps<typeof spinnerStyles>;
+//#endregion

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,18 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/spinner/spinner.styles.ts
+const spinnerStyles = /* @__PURE__ */ tv({
+	slots: {
+		base: "inline-block shrink-0 animate-spin",
+		track: "opacity-20",
+		arc: ""
+	},
+	variants: { size: {
+		sm: { base: "size-3.5" },
+		md: { base: "size-4" },
+		lg: { base: "size-6" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { spinnerStyles };

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

@@ -0,0 +1,2 @@
+import { Stack, StackProps, stackStyles } from "./stack.js";
+export { Stack, type StackProps, stackStyles };