@glyphui/ui 0.4.0 → 0.5.0

package/dist/index-Bi7rZ6ba.d.ts

@@ -1,244 +0,0 @@
-import { t as VariantProps } from "./tv-DuMh7UH2.js";
-import { ComponentProps, ReactNode } from "react";
-//#region src/components/button/button.styles.d.ts
-declare const buttonStyles: import("tailwind-variants").TVReturnType<{
-  variant: {
-    primary: {
-      base: string;
-    };
-    secondary: {
-      base: string;
-    };
-    outline: {
-      base: string;
-    };
-    ghost: {
-      base: string;
-    };
-    danger: {
-      base: string;
-    };
-    link: {
-      base: string;
-    };
-  };
-  size: {
-    sm: {
-      base: string;
-      icon: string;
-    };
-    md: {
-      base: string;
-    };
-    lg: {
-      base: string;
-      icon: string;
-    };
-  };
-  iconOnly: {
-    true: {
-      base: string;
-    };
-  };
-  fullWidth: {
-    true: {
-      base: string;
-    };
-  };
-}, {
-  base: string[];
-  icon: string;
-}, undefined, {
-  variant: {
-    primary: {
-      base: string;
-    };
-    secondary: {
-      base: string;
-    };
-    outline: {
-      base: string;
-    };
-    ghost: {
-      base: string;
-    };
-    danger: {
-      base: string;
-    };
-    link: {
-      base: string;
-    };
-  };
-  size: {
-    sm: {
-      base: string;
-      icon: string;
-    };
-    md: {
-      base: string;
-    };
-    lg: {
-      base: string;
-      icon: string;
-    };
-  };
-  iconOnly: {
-    true: {
-      base: string;
-    };
-  };
-  fullWidth: {
-    true: {
-      base: string;
-    };
-  };
-}, {
-  base: string[];
-  icon: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-  variant: {
-    primary: {
-      base: string;
-    };
-    secondary: {
-      base: string;
-    };
-    outline: {
-      base: string;
-    };
-    ghost: {
-      base: string;
-    };
-    danger: {
-      base: string;
-    };
-    link: {
-      base: string;
-    };
-  };
-  size: {
-    sm: {
-      base: string;
-      icon: string;
-    };
-    md: {
-      base: string;
-    };
-    lg: {
-      base: string;
-      icon: string;
-    };
-  };
-  iconOnly: {
-    true: {
-      base: string;
-    };
-  };
-  fullWidth: {
-    true: {
-      base: string;
-    };
-  };
-}, {
-  base: string[];
-  icon: string;
-}>>;
-type ButtonVariants = VariantProps<typeof buttonStyles>;
-//#endregion
-//#region src/components/field/field.styles.d.ts
-declare const fieldStyles: import("tailwind-variants").TVReturnType<{
-  orientation: {
-    vertical: {};
-    horizontal: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  label: string;
-  labelRow: string;
-  labelAction: string;
-  required: string;
-  text: string;
-  description: string;
-  error: string;
-}, undefined, {
-  orientation: {
-    vertical: {};
-    horizontal: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  label: string;
-  labelRow: string;
-  labelAction: string;
-  required: string;
-  text: string;
-  description: string;
-  error: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-  orientation: {
-    vertical: {};
-    horizontal: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  label: string;
-  labelRow: string;
-  labelAction: string;
-  required: string;
-  text: string;
-  description: string;
-  error: string;
-}>>;
-type FieldVariants = VariantProps<typeof fieldStyles>;
-//#endregion
-//#region src/components/button/button.d.ts
-interface ButtonProps extends ComponentProps<'button'>, ButtonVariants {
-  /** Render the child element (e.g. a router link) with button styles instead of a `<button>`. */
-  asChild?: boolean;
-  /** Shows a spinner, disables the button and sets `aria-busy`. */
-  loading?: boolean;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-}
-declare function Button(inProps: ButtonProps): import("react").JSX.Element;
-interface IconButtonProps extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'iconOnly' | 'fullWidth' | 'children'> {
-  icon: ReactNode;
-  /** Required: an icon-only button has no visible text. */
-  'aria-label': string;
-}
-/** A square button holding one icon. Shares Button's variants and theme overrides. */
-declare function IconButton({ icon, variant, ...props }: IconButtonProps): import("react").JSX.Element;
-//#endregion
-//#region src/components/field/field.d.ts
-interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
-  label?: ReactNode;
-  /**
-   * Shown at the end of the label row, outside the label, so it is not part of the
-   * control's accessible name. For example a "Forgot password?" link.
-   */
-  labelAction?: ReactNode;
-  description?: ReactNode;
-  /** Error message. Marks the control invalid and is announced to screen readers. */
-  error?: ReactNode;
-  required?: boolean;
-  disabled?: boolean;
-  /** Id for the control. Generated when omitted. */
-  controlId?: string;
-  children: ReactNode;
-}
-/**
- * Wraps one form control with its label, description and error, and wires the ARIA
- * attributes between them. Controls inside (Input, Select, Checkbox, ...) pick this up.
- *
- * `orientation="horizontal"` puts the control first with text beside it, for checkboxes
- * and switches.
- */
-declare function Field(inProps: FieldProps): import("react").JSX.Element;
-//#endregion
-export { IconButton as a, fieldStyles as c, ButtonProps as i, ButtonVariants as l, FieldProps as n, IconButtonProps as o, Button as r, FieldVariants as s, Field as t, buttonStyles as u };

package/dist/states-IvhjBgna.js

@@ -1,288 +0,0 @@
-"use client";
-import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
-import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-7I-cWvvS.js";
-import { Checkbox } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/checkbox/checkbox.tsx
-const checkboxStyles = tv({ slots: {
-	root: [
-		"peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs",
-		themedBorder,
-		transition,
-		focusRing,
-		"hover:border-border-strong aria-invalid:border-danger",
-		"data-[state=checked]:border-primary data-[state=checked]:bg-primary",
-		"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
-		"disabled:cursor-not-allowed disabled:opacity-50"
-	],
-	indicator: "flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]"
-} });
-function Checkbox$1(inProps) {
-	const [{ className, ...rest }, slots] = useComponentConfig("Checkbox", useFieldControl(inProps));
-	const s = checkboxStyles();
-	return /* @__PURE__ */ jsx(Checkbox.Root, {
-		"data-slot": "checkbox",
-		className: s.root({ class: [slots.root, className] }),
-		...rest,
-		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			className: s.indicator({ class: slots.indicator }),
-			children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
-		})
-	});
-}
-//#endregion
-//#region src/components/input/input.styles.ts
-/** Shared by Input, Textarea and the Select trigger so all fields look alike. */
-const fieldControl = [
-	"w-full rounded-md border-input bg-surface text-foreground shadow-xs",
-	themedBorder,
-	transition,
-	"hover:border-border-strong",
-	"data-invalid:border-danger aria-invalid:border-danger"
-];
-const inputStyles = tv({
-	slots: {
-		root: [
-			...fieldControl,
-			"flex items-center gap-2 px-3",
-			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
-			"data-invalid:focus-within:ring-danger/20",
-			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
-		],
-		input: "h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
-		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4"
-	},
-	variants: { size: {
-		sm: { root: "h-(--glyph-control-sm) text-small" },
-		md: { root: "h-(--glyph-control-md) text-small" },
-		lg: { root: "h-(--glyph-control-lg) text-body" }
-	} },
-	defaultVariants: { size: "md" }
-});
-//#endregion
-//#region src/components/input/input.tsx
-function Input(inProps) {
-	const [props, slots] = useComponentConfig("Input", useFieldControl(inProps));
-	const { size, prefix, suffix, className, inputClassName, ...rest } = props;
-	const s = inputStyles({ size });
-	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "input",
-		"data-invalid": invalid || void 0,
-		className: s.root({ class: [slots.root, className] }),
-		children: [
-			prefix && /* @__PURE__ */ jsx("span", {
-				className: s.adornment({ class: slots.adornment }),
-				children: prefix
-			}),
-			/* @__PURE__ */ jsx("input", {
-				className: s.input({ class: [slots.input, inputClassName] }),
-				...rest
-			}),
-			suffix && /* @__PURE__ */ jsx("span", {
-				className: s.adornment({ class: slots.adornment }),
-				children: suffix
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/skeleton/skeleton.tsx
-const skeletonStyles = 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
-//#region src/components/table/table.tsx
-const tableStyles = tv({ slots: {
-	wrapper: "relative w-full overflow-x-auto",
-	table: "w-full caption-bottom border-collapse text-small tabular-nums",
-	header: "[&_tr]:border-b [&_tr]:border-border",
-	body: "[&_tr:last-child]:border-0",
-	row: "border-b border-border transition-colors duration-(--glyph-duration-fast) hover:bg-muted/50 data-[state=selected]:bg-primary/6",
-	head: "h-10 whitespace-nowrap px-3 first:pl-4 last:pr-4 text-left align-middle text-caption font-medium text-muted-foreground [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
-	cell: "px-3 py-2.5 align-middle first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0",
-	caption: "mt-3 text-small text-faint-foreground"
-} });
-const s = tableStyles();
-function useSlots() {
-	return useComponentConfig("Table", {})[1];
-}
-/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
-function Table({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "table-wrapper",
-		className: s.wrapper({ class: slots.wrapper }),
-		children: /* @__PURE__ */ jsx("table", {
-			"data-slot": "table",
-			className: s.table({ class: [slots.table, className] }),
-			...props
-		})
-	});
-}
-function TableHeader({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("thead", {
-		"data-slot": "table-header",
-		className: s.header({ class: [slots.header, className] }),
-		...props
-	});
-}
-function TableBody({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("tbody", {
-		"data-slot": "table-body",
-		className: s.body({ class: [slots.body, className] }),
-		...props
-	});
-}
-function TableRow({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("tr", {
-		"data-slot": "table-row",
-		className: s.row({ class: [slots.row, className] }),
-		...props
-	});
-}
-function TableHead({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("th", {
-		"data-slot": "table-head",
-		className: s.head({ class: [slots.head, className] }),
-		...props
-	});
-}
-function TableCell({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("td", {
-		"data-slot": "table-cell",
-		className: s.cell({ class: [slots.cell, className] }),
-		...props
-	});
-}
-function TableCaption({ className, ...props }) {
-	const slots = useSlots();
-	return /* @__PURE__ */ jsx("caption", {
-		"data-slot": "table-caption",
-		className: s.caption({ class: [slots.caption, className] }),
-		...props
-	});
-}
-//#endregion
-//#region src/patterns/async/states.tsx
-const stateStyles = tv({
-	slots: {
-		root: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center",
-		icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
-		text: "grid max-w-sm gap-1",
-		title: "text-body font-medium text-foreground",
-		description: "text-small text-muted-foreground",
-		action: "mt-1 flex items-center gap-2"
-	},
-	variants: { tone: {
-		neutral: {},
-		danger: { icon: "border-danger/30 bg-danger/10 text-danger" }
-	} }
-});
-/** Shown when a list or page has no content yet. Say what will appear and how to add it. */
-function EmptyState(inProps) {
-	const [props, slots] = useComponentConfig("EmptyState", inProps);
-	const { icon = /* @__PURE__ */ jsx(InboxIcon, {}), title, description, action, className, ...rest } = props;
-	const s = stateStyles({ tone: "neutral" });
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "empty-state",
-		className: s.root({ class: [slots.root, className] }),
-		...rest,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: s.icon({ class: slots.icon }),
-				"aria-hidden": "true",
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: s.text({ class: slots.text }),
-				children: [/* @__PURE__ */ jsx("p", {
-					className: s.title({ class: slots.title }),
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: s.description({ class: slots.description }),
-					children: description
-				})]
-			}),
-			action && /* @__PURE__ */ jsx("div", {
-				className: s.action({ class: slots.action }),
-				children: action
-			})
-		]
-	});
-}
-function messageOf(error) {
-	if (error instanceof Error) return error.message;
-	if (typeof error === "string") return error;
-}
-/** Shown when loading failed. Explains what went wrong and offers a retry. */
-function ErrorState(inProps) {
-	const [props, slots] = useComponentConfig("EmptyState", inProps);
-	const { icon = /* @__PURE__ */ jsx(AlertIcon, {}), title = "Couldn’t load this", description, error, onRetry, action, className, ...rest } = props;
-	const s = stateStyles({ tone: "danger" });
-	const detail = description ?? messageOf(error);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "error-state",
-		role: "alert",
-		className: s.root({ class: [slots.root, className] }),
-		...rest,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: s.icon({ class: slots.icon }),
-				"aria-hidden": "true",
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: s.text({ class: slots.text }),
-				children: [/* @__PURE__ */ jsx("p", {
-					className: s.title({ class: slots.title }),
-					children: title
-				}), detail && /* @__PURE__ */ jsx("p", {
-					className: s.description({ class: slots.description }),
-					children: detail
-				})]
-			}),
-			(action || onRetry) && /* @__PURE__ */ jsxs("div", {
-				className: s.action({ class: slots.action }),
-				children: [onRetry && /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "sm",
-					onClick: () => onRetry(),
-					children: "Try again"
-				}), action]
-			})
-		]
-	});
-}
-/** A centered spinner with a label, for content that has no natural skeleton. */
-function LoadingState({ label = "Loading…", className, ...props }) {
-	const s = stateStyles();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "loading-state",
-		role: "status",
-		className: s.root({ class: className }),
-		...props,
-		children: [/* @__PURE__ */ jsx(Spinner, {
-			size: "lg",
-			className: "text-faint-foreground"
-		}), /* @__PURE__ */ jsx("p", {
-			className: s.description(),
-			children: label
-		})]
-	});
-}
-//#endregion
-export { inputStyles as _, Table as a, TableCell as c, TableRow as d, tableStyles as f, fieldControl as g, Input as h, stateStyles as i, TableHead as l, skeletonStyles as m, ErrorState as n, TableBody as o, Skeleton as p, LoadingState as r, TableCaption as s, EmptyState as t, TableHeader as u, Checkbox$1 as v, checkboxStyles as y };

package/dist/tv-DLbT66dC.js

@@ -1,70 +0,0 @@
-"use client";
-import { textTokens } from "@glyphui/tokens";
-import { createContext, useContext } from "react";
-import { createTV } from "tailwind-variants";
-//#region src/provider/glyph-context.ts
-const GlyphContext = createContext(null);
-/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
-function useGlyph() {
-	const value = useContext(GlyphContext);
-	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
-	return value;
-}
-/** The router-aware link component configured on `GlyphProvider`. */
-function useLinkComponent() {
-	return useContext(GlyphContext)?.linkComponent ?? "a";
-}
-const neverActive = () => false;
-/**
-* Whether `href` is the current page, using the router passed to `GlyphProvider`.
-* Returns `explicit` when it is set, so an `active` prop always wins.
-*/
-function useIsActive(href, options) {
-	const isActive = useContext(GlyphContext)?.useIsActive ?? neverActive;
-	const { explicit, ...matchOptions } = options ?? {};
-	const matched = isActive(href ?? "", matchOptions);
-	if (explicit !== void 0) return explicit;
-	return href ? matched : false;
-}
-//#endregion
-//#region src/hooks/use-component-config.ts
-/**
-* Applies the theme's per-component settings (`theme.components[name]`):
-* fills unset variant props from `defaultVariants` and returns the extra slot classes.
-* Every styled component calls this first.
-*/
-function useComponentConfig(name, props) {
-	const override = (useContext(GlyphContext)?.theme)?.components[name];
-	if (!override) return [props, {}];
-	let merged = props;
-	const defaults = override.defaultVariants;
-	if (defaults) {
-		merged = { ...props };
-		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
-	}
-	return [merged, override.className ?? {}];
-}
-//#endregion
-//#region src/utils/styles.ts
-/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
-const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
-const themedBorder = "border-(length:--glyph-border-width)";
-const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
-/** Popover surfaces: Select, Tooltip-like menus. */
-const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
-//#endregion
-//#region src/utils/tw-merge-config.ts
-/**
-* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
-* keeps only the last size instead of treating `text-h1` as a color.
-*/
-const twMergeConfig = { extend: { theme: {
-	text: [...textTokens],
-	radius: ["pill"]
-} } };
-//#endregion
-//#region src/utils/tv.ts
-/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
-const tv = createTV({ twMergeConfig });
-//#endregion
-export { themedBorder as a, GlyphContext as c, useIsActive as d, useLinkComponent as f, popover as i, neverActive as l, twMergeConfig as n, transition as o, focusRing as r, useComponentConfig as s, tv as t, useGlyph as u };