@glyphui/ui 0.4.0 → 0.5.0

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 };

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

@@ -0,0 +1,109 @@
+import { VariantProps } from "../../utils/tv.js";
+import { ComponentProps } from "react";
+//#region src/components/stack/stack.d.ts
+export declare const stackStyles: import("tailwind-variants").TVReturnType<{
+  direction: {
+    column: "flex-col";
+    row: "flex-row";
+  };
+  gap: {
+    0: "gap-0";
+    1: "gap-1";
+    2: "gap-2";
+    3: "gap-3";
+    4: "gap-4";
+    5: "gap-5";
+    6: "gap-6";
+    8: "gap-8";
+    10: "gap-10";
+    12: "gap-12";
+  };
+  align: {
+    start: "items-start";
+    center: "items-center";
+    end: "items-end";
+    stretch: "items-stretch";
+    baseline: "items-baseline";
+  };
+  justify: {
+    start: "justify-start";
+    center: "justify-center";
+    end: "justify-end";
+    between: "justify-between";
+  };
+  wrap: {
+    true: "flex-wrap";
+  };
+}, undefined, "flex", {
+  direction: {
+    column: "flex-col";
+    row: "flex-row";
+  };
+  gap: {
+    0: "gap-0";
+    1: "gap-1";
+    2: "gap-2";
+    3: "gap-3";
+    4: "gap-4";
+    5: "gap-5";
+    6: "gap-6";
+    8: "gap-8";
+    10: "gap-10";
+    12: "gap-12";
+  };
+  align: {
+    start: "items-start";
+    center: "items-center";
+    end: "items-end";
+    stretch: "items-stretch";
+    baseline: "items-baseline";
+  };
+  justify: {
+    start: "justify-start";
+    center: "justify-center";
+    end: "justify-end";
+    between: "justify-between";
+  };
+  wrap: {
+    true: "flex-wrap";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  direction: {
+    column: "flex-col";
+    row: "flex-row";
+  };
+  gap: {
+    0: "gap-0";
+    1: "gap-1";
+    2: "gap-2";
+    3: "gap-3";
+    4: "gap-4";
+    5: "gap-5";
+    6: "gap-6";
+    8: "gap-8";
+    10: "gap-10";
+    12: "gap-12";
+  };
+  align: {
+    start: "items-start";
+    center: "items-center";
+    end: "items-end";
+    stretch: "items-stretch";
+    baseline: "items-baseline";
+  };
+  justify: {
+    start: "justify-start";
+    center: "justify-center";
+    end: "justify-end";
+    between: "justify-between";
+  };
+  wrap: {
+    true: "flex-wrap";
+  };
+}, undefined>>;
+export interface StackProps extends ComponentProps<'div'>, VariantProps<typeof stackStyles> {
+  asChild?: boolean;
+}
+/** Flex layout with spacing from the scale. `direction="row"` for horizontal. */
+export declare function Stack({ direction, gap, align, justify, wrap, asChild, className, ...props }: StackProps): import("react").JSX.Element;
+//#endregion

package/dist/components/stack/stack.js

@@ -0,0 +1,62 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stack/stack.tsx
+const stackStyles = /* @__PURE__ */ tv({
+	base: "flex",
+	variants: {
+		direction: {
+			column: "flex-col",
+			row: "flex-row"
+		},
+		gap: {
+			0: "gap-0",
+			1: "gap-1",
+			2: "gap-2",
+			3: "gap-3",
+			4: "gap-4",
+			5: "gap-5",
+			6: "gap-6",
+			8: "gap-8",
+			10: "gap-10",
+			12: "gap-12"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch",
+			baseline: "items-baseline"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			between: "justify-between"
+		},
+		wrap: { true: "flex-wrap" }
+	},
+	defaultVariants: {
+		direction: "column",
+		gap: 4
+	}
+});
+/** Flex layout with spacing from the scale. `direction="row"` for horizontal. */
+function Stack({ direction, gap, align, justify, wrap, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "stack",
+		className: stackStyles({
+			direction,
+			gap,
+			align,
+			justify,
+			wrap,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+export { Stack, stackStyles };

package/dist/components/stat-card/index.d.ts

@@ -0,0 +1,3 @@
+import { StatCard, StatCardProps } from "./stat-card.js";
+import { StatCardVariants, statCardStyles } from "./stat-card.styles.js";
+export { StatCard, type StatCardProps, type StatCardVariants, statCardStyles };

package/dist/components/stat-card/stat-card.d.ts

@@ -0,0 +1,22 @@
+import { CardProps } from "../card/card.js";
+import "../card/index.js";
+import { ReactNode } from "react";
+//#region src/components/stat-card/stat-card.d.ts
+type Trend = 'up' | 'down' | 'neutral';
+export interface StatCardProps extends Omit<CardProps, 'children'> {
+  label: ReactNode;
+  value: ReactNode;
+  /** Change versus the previous period, e.g. "+12.4%". */
+  delta?: ReactNode;
+  /** Direction of the change. Colors the delta: up is good unless `invertTrend` is set. */
+  trend?: Trend;
+  /** For metrics where going down is good (churn, latency, cost). */
+  invertTrend?: boolean;
+  icon?: ReactNode;
+  description?: ReactNode;
+  /** A sparkline or small chart under the value. Colored with the primary color by default. */
+  chart?: ReactNode;
+}
+/** A key metric with its label, change versus the last period, and an optional chart. */
+export declare function StatCard(inProps: StatCardProps): import("react").JSX.Element;
+//#endregion