@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/stat-card/stat-card.js

@@ -0,0 +1,82 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Badge } from "../badge/badge.js";
+import { Card } from "../card/card.js";
+import { statCardStyles } from "./stat-card.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stat-card/stat-card.tsx
+const ArrowUp = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M8 7h9v9" })
+});
+const ArrowDown = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M7 7l10 10M17 8v9H8" })
+});
+function deltaTone(trend, invert) {
+	if (trend === "neutral") return "neutral";
+	return trend === "up" !== invert ? "success" : "danger";
+}
+/** A key metric with its label, change versus the last period, and an optional chart. */
+function StatCard(inProps) {
+	const [props, slots] = useComponentConfig("StatCard", inProps);
+	const { label, value, delta, trend = "neutral", invertTrend = false, icon, description, chart, className, ...cardProps } = props;
+	const s = statCardStyles();
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "stat-card",
+		className: s.root({ class: [slots.root, className] }),
+		...cardProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.label({ class: slots.label }),
+					children: label
+				}), icon && /* @__PURE__ */ jsx("span", {
+					className: s.icon({ class: slots.icon }),
+					"aria-hidden": "true",
+					children: icon
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.valueRow({ class: slots.valueRow }),
+				children: [/* @__PURE__ */ jsx("p", {
+					"data-slot": "stat-card-value",
+					className: s.value({ class: slots.value }),
+					children: value
+				}), delta !== void 0 && /* @__PURE__ */ jsxs(Badge, {
+					"data-trend": trend,
+					tone: deltaTone(trend, invertTrend),
+					className: s.delta({ class: slots.delta }),
+					children: [
+						trend === "up" && /* @__PURE__ */ jsx(ArrowUp, {}),
+						trend === "down" && /* @__PURE__ */ jsx(ArrowDown, {}),
+						delta
+					]
+				})]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: s.description({ class: slots.description }),
+				children: description
+			}),
+			chart && /* @__PURE__ */ jsx("div", {
+				className: s.chart({ class: slots.chart }),
+				children: chart
+			})
+		]
+	});
+}
+//#endregion
+export { StatCard };

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

@@ -0,0 +1,83 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/stat-card/stat-card.styles.d.ts
+export declare const statCardStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      root?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      value?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      label?: import("tailwind-variants").ClassValue;
+      valueRow?: import("tailwind-variants").ClassValue;
+      delta?: import("tailwind-variants").ClassValue;
+      chart?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      root?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      value?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      label?: import("tailwind-variants").ClassValue;
+      valueRow?: import("tailwind-variants").ClassValue;
+      delta?: import("tailwind-variants").ClassValue;
+      chart?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  header: string;
+  label: string;
+  icon: string;
+  valueRow: string;
+  value: string;
+  delta: string;
+  description: string;
+  chart: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      root?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      value?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      label?: import("tailwind-variants").ClassValue;
+      valueRow?: import("tailwind-variants").ClassValue;
+      delta?: import("tailwind-variants").ClassValue;
+      chart?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  header: string;
+  label: string;
+  icon: string;
+  valueRow: string;
+  value: string;
+  delta: string;
+  description: string;
+  chart: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  header: string;
+  label: string;
+  icon: string;
+  valueRow: string;
+  value: string;
+  delta: string;
+  description: string;
+  chart: string;
+}>>;
+export type StatCardVariants = VariantProps<typeof statCardStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    StatCard: StylesEntry<typeof statCardStyles>;
+  }
+}
+//#endregion

package/dist/components/stat-card/stat-card.styles.js

@@ -0,0 +1,16 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/stat-card/stat-card.styles.ts
+const statCardStyles = /* @__PURE__ */ tv({ slots: {
+	root: "gap-2",
+	header: "flex items-center justify-between gap-2",
+	label: "text-small text-muted-foreground",
+	icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&>svg]:size-4",
+	valueRow: "flex flex-wrap items-baseline gap-x-2 gap-y-1",
+	value: "font-display text-h2 tabular-nums text-foreground",
+	delta: "gap-1 [&>svg]:size-3",
+	description: "text-small text-faint-foreground",
+	chart: "mt-1 min-w-0 text-primary"
+} });
+//#endregion
+export { statCardStyles };

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

@@ -0,0 +1,3 @@
+import { StepStatus, Stepper, StepperProps, StepperStep } from "./stepper.js";
+import { StepperVariants, stepperStyles } from "./stepper.styles.js";
+export { type StepStatus, Stepper, type StepperProps, type StepperStep, type StepperVariants, stepperStyles };

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/stepper/stepper.d.ts
+export type StepStatus = 'complete' | 'current' | 'upcoming' | 'error';
+export interface StepperStep {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Override the status derived from `current`, e.g. `'error'` for a failed step. */
+  status?: StepStatus;
+}
+export interface StepperProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  steps: readonly StepperStep[];
+  /** Index of the current step. Earlier steps are complete, later ones upcoming. */
+  current: number;
+  orientation?: 'horizontal' | 'vertical';
+  /** Makes completed steps clickable, e.g. to go back in a wizard. */
+  onStepClick?: (index: number) => void;
+}
+/** Progress through a multi-step flow such as onboarding or checkout. */
+export declare function Stepper(inProps: StepperProps): import("react").JSX.Element;
+//#endregion

package/dist/components/stepper/stepper.js

@@ -0,0 +1,100 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { stepperStyles } from "./stepper.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stepper/stepper.tsx
+const statusText = {
+	complete: "completed",
+	current: "current step",
+	upcoming: "not started",
+	error: "needs attention"
+};
+const icon = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2.5,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const AlertIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 7v6M12 17h.01" })
+});
+function statusOf(step, index, current) {
+	if (step.status) return step.status;
+	if (index < current) return "complete";
+	return index === current ? "current" : "upcoming";
+}
+/** Progress through a multi-step flow such as onboarding or checkout. */
+function Stepper(inProps) {
+	const [props, slots] = useComponentConfig("Stepper", inProps);
+	const { steps, current, orientation = "horizontal", onStepClick, className, "aria-label": ariaLabel = "Progress", ...rest } = props;
+	const root = stepperStyles({ orientation });
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "stepper",
+		"data-orientation": orientation,
+		"aria-label": ariaLabel,
+		className: root.root({ class: [slots.root, className] }),
+		...rest,
+		children: steps.map((step, index) => {
+			const status = statusOf(step, index, current);
+			const clickable = Boolean(onStepClick) && status === "complete";
+			const s = stepperStyles({
+				orientation,
+				status,
+				clickable
+			});
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "stepper-indicator",
+				className: s.indicator({ class: slots.indicator }),
+				children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "error" ? /* @__PURE__ */ jsx(AlertIcon, {}) : index + 1
+			}), /* @__PURE__ */ jsxs("span", {
+				className: s.text({ class: slots.text }),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "stepper-title",
+						className: s.title({ class: slots.title }),
+						children: step.title
+					}),
+					step.description && /* @__PURE__ */ jsx("span", {
+						className: s.description({ class: slots.description }),
+						children: step.description
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [", ", statusText[status]]
+					})
+				]
+			})] });
+			return /* @__PURE__ */ jsxs("li", {
+				"data-slot": "stepper-step",
+				"data-status": status,
+				"aria-current": status === "current" ? "step" : void 0,
+				className: s.step({ class: slots.step }),
+				children: [index < steps.length - 1 && /* @__PURE__ */ jsx("span", {
+					"data-slot": "stepper-connector",
+					"aria-hidden": "true",
+					className: s.connector({ class: slots.connector })
+				}), clickable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onStepClick?.(index),
+					className: s.trigger({ class: slots.trigger }),
+					children: content
+				}) : /* @__PURE__ */ jsx("span", {
+					className: s.trigger({ class: slots.trigger }),
+					children: content
+				})]
+			}, index);
+		})
+	});
+}
+//#endregion
+export { Stepper };

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

@@ -0,0 +1,170 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/stepper/stepper.styles.d.ts
+export declare const stepperStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+    vertical: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+  };
+  status: {
+    complete: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    current: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    upcoming: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    error: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+  };
+  clickable: {
+    true: {
+      trigger: string;
+    };
+  };
+}, {
+  root: string;
+  step: string;
+  trigger: string[];
+  indicator: string[];
+  connector: string;
+  text: string;
+  title: string;
+  description: string;
+}, undefined, {
+  orientation: {
+    horizontal: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+    vertical: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+  };
+  status: {
+    complete: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    current: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    upcoming: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    error: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+  };
+  clickable: {
+    true: {
+      trigger: string;
+    };
+  };
+}, {
+  root: string;
+  step: string;
+  trigger: string[];
+  indicator: string[];
+  connector: string;
+  text: string;
+  title: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+    vertical: {
+      root: string;
+      step: string;
+      trigger: string;
+      connector: string;
+      text: string;
+    };
+  };
+  status: {
+    complete: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    current: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    upcoming: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+    error: {
+      indicator: string;
+      connector: string;
+      title: string;
+    };
+  };
+  clickable: {
+    true: {
+      trigger: string;
+    };
+  };
+}, {
+  root: string;
+  step: string;
+  trigger: string[];
+  indicator: string[];
+  connector: string;
+  text: string;
+  title: string;
+  description: string;
+}>>;
+export type StepperVariants = VariantProps<typeof stepperStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Stepper: StylesEntry<typeof stepperStyles>;
+  }
+}
+//#endregion

package/dist/components/stepper/stepper.styles.js

@@ -0,0 +1,67 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/stepper/stepper.styles.ts
+const stepperStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex w-full list-none p-0",
+		step: "relative flex min-w-0",
+		trigger: ["flex min-w-0 rounded-md text-left", focusRing],
+		indicator: [
+			"relative z-10 flex size-8 shrink-0 items-center justify-center rounded-pill text-small font-medium tabular-nums [&>svg]:size-4",
+			themedBorder,
+			transition
+		],
+		connector: "absolute transition-colors duration-(--glyph-duration-base)",
+		text: "grid min-w-0 gap-0.5",
+		title: "text-small font-medium",
+		description: "text-caption text-muted-foreground"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "items-start",
+				step: "flex-1 flex-col items-center text-center",
+				trigger: "flex-col items-center gap-2 text-center",
+				connector: "top-4 right-[calc(-50%+1.25rem)] left-[calc(50%+1.25rem)] h-px",
+				text: "px-2"
+			},
+			vertical: {
+				root: "flex-col",
+				step: "gap-3 pb-7 last:pb-0",
+				trigger: "items-start gap-3",
+				connector: "top-9.5 bottom-1.5 left-4 w-px -translate-x-1/2",
+				text: "pt-1.5"
+			}
+		},
+		status: {
+			complete: {
+				indicator: "border-primary bg-primary text-primary-foreground",
+				connector: "bg-primary",
+				title: "text-foreground"
+			},
+			current: {
+				indicator: "border-primary bg-surface text-primary-text ring-4 ring-primary/15",
+				connector: "bg-border",
+				title: "text-foreground"
+			},
+			upcoming: {
+				indicator: "border-border bg-surface text-muted-foreground",
+				connector: "bg-border",
+				title: "text-muted-foreground"
+			},
+			error: {
+				indicator: "border-danger bg-danger text-danger-foreground",
+				connector: "bg-border",
+				title: "text-danger-text"
+			}
+		},
+		clickable: { true: { trigger: "cursor-pointer hover:[&_[data-slot=stepper-title]]:underline underline-offset-4" } }
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		status: "upcoming"
+	}
+});
+//#endregion
+export { stepperStyles };

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

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps, switchStyles } from "./switch.js";
+export { Switch, type SwitchProps, switchStyles };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,51 @@
+import { VariantProps } from "../../utils/tv.js";
+import { Switch } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/switch/switch.d.ts
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}>>;
+export interface SwitchProps extends ComponentProps<typeof Switch.Root>, VariantProps<typeof switchStyles> {}
+declare function Switch$1(inProps: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/switch/switch.js

@@ -0,0 +1,43 @@
+"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 { useFieldControl } from "../field/field-context.js";
+import { Switch } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+const switchStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			"peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px",
+			themedBorder,
+			transition,
+			focusRing,
+			"data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		thumb: "pointer-events-none block rounded-pill bg-white shadow-sm transition-[translate] duration-(--glyph-duration-spring) ease-spring data-[state=unchecked]:translate-x-0"
+	},
+	variants: { size: {
+		sm: {
+			root: "h-4 w-7",
+			thumb: "size-3 data-[state=checked]:translate-x-3"
+		},
+		md: {
+			root: "h-5 w-9",
+			thumb: "size-4 data-[state=checked]:translate-x-4"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+function Switch$1(inProps) {
+	const [{ size, className, ...rest }, slots] = useComponentConfig("Switch", useFieldControl(inProps));
+	const s = switchStyles({ size });
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: s.thumb({ class: slots.thumb }) })
+	});
+}
+//#endregion
+export { Switch$1 as Switch, switchStyles };

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles };