@glyphui/ui 0.3.0 → 0.5.0

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

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