@glyphui/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,61 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/modal/modal.styles.d.ts
+/** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
+export declare const modalStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string;
+  header: string;
+  body: string;
+  footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string;
+  header: string;
+  body: string;
+  footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  content: string;
+  header: string;
+  body: string;
+  footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Modal: StylesEntry<typeof modalStyles>;
+  }
+}
+//#endregion

package/dist/components/modal/modal.styles.js

@@ -0,0 +1,14 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/modal/modal.styles.ts
+/** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
+const modalStyles = /* @__PURE__ */ tv({ slots: {
+	content: "",
+	header: "",
+	body: "grid gap-4",
+	footer: "",
+	/** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+	form: "contents"
+} });
+//#endregion
+export { modalStyles };

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1,3 @@
+import { NavigationMenu, NavigationMenuCard, NavigationMenuCardProps, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuViewport } from "./navigation-menu.js";
+import { navigationMenuStyles } from "./navigation-menu.styles.js";
+export { NavigationMenu, NavigationMenuCard, type NavigationMenuCardProps, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuProps, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuStyles };

package/dist/components/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,37 @@
+import { NavigationMenu } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/navigation-menu/navigation-menu.d.ts
+export interface NavigationMenuProps extends ComponentProps<typeof NavigationMenu.Root> {
+  /** Render the shared animated panel below the menu. Default true. */
+  viewport?: boolean;
+}
+/**
+ * Site navigation with dropdown panels (mega menus) for marketing headers.
+ * Keyboard: Tab between items, arrows inside panels, Escape to close.
+ */
+declare function NavigationMenu$1(inProps: NavigationMenuProps): import("react").JSX.Element;
+export declare function NavigationMenuList({ className, ...props }: ComponentProps<typeof NavigationMenu.List>): import("react").JSX.Element;
+export declare function NavigationMenuItem({ className, ...props }: ComponentProps<typeof NavigationMenu.Item>): import("react").JSX.Element;
+export declare function NavigationMenuTrigger({ className, children, ...props }: ComponentProps<typeof NavigationMenu.Trigger>): import("react").JSX.Element;
+export declare function NavigationMenuContent({ className, ...props }: ComponentProps<typeof NavigationMenu.Content>): import("react").JSX.Element;
+export declare function NavigationMenuViewport({ className, ...props }: ComponentProps<typeof NavigationMenu.Viewport>): import("react").JSX.Element;
+export interface NavigationMenuLinkProps extends Omit<ComponentProps<typeof NavigationMenu.Link>, 'href'> {
+  /** Rendered through the provider's `linkComponent`, so it uses your router. */
+  href?: string;
+}
+/**
+ * A top-level link (no panel). Marked active automatically from the provider's `router`;
+ * set `active` to override.
+ */
+export declare function NavigationMenuLink({ href, active: activeProp, className, children, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+export interface NavigationMenuCardProps {
+  href: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+}
+/** A link tile for mega-menu panels: icon, title and one line of description. */
+export declare function NavigationMenuCard({ href, title, description, icon, className }: NavigationMenuCardProps): import("react").JSX.Element;
+//#endregion
+export { NavigationMenu$1 as NavigationMenu };

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,138 @@
+"use client";
+import { useIsActive, useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { navigationMenuStyles } from "./navigation-menu.styles.js";
+import { NavigationMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation-menu/navigation-menu.tsx
+const s = navigationMenuStyles();
+function useSlots() {
+	return useComponentConfig("NavigationMenu", {})[1];
+}
+const ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	className,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+/**
+* Site navigation with dropdown panels (mega menus) for marketing headers.
+* Keyboard: Tab between items, arrows inside panels, Escape to close.
+*/
+function NavigationMenu$1(inProps) {
+	const [props, slots] = useComponentConfig("NavigationMenu", inProps);
+	const { viewport = true, className, children, ...rest } = props;
+	return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
+		"data-slot": "navigation-menu",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(NavigationMenu.List, {
+		"data-slot": "navigation-menu-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+		"data-slot": "navigation-menu-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		className: s.trigger({ class: [slots.trigger, className] }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.chevron({ class: slots.chevron }) })]
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+		"data-slot": "navigation-menu-content",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		className: s.viewportWrapper({ class: slots.viewportWrapper }),
+		children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
+			"data-slot": "navigation-menu-viewport",
+			className: s.viewport({ class: [slots.viewport, className] }),
+			...props
+		})
+	});
+}
+/**
+* A top-level link (no panel). Marked active automatically from the provider's `router`;
+* set `active` to override.
+*/
+function NavigationMenuLink({ href, active: activeProp, className, children, ...props }) {
+	const slots = useSlots();
+	const Link = useLinkComponent();
+	const active = useIsActive(href, { explicit: activeProp });
+	const cls = s.link({ class: [slots.link, className] });
+	if (href === void 0) return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		"data-slot": "navigation-menu-link",
+		className: cls,
+		active,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		"data-slot": "navigation-menu-link",
+		asChild: true,
+		active,
+		...props,
+		children: /* @__PURE__ */ jsx(Link, {
+			href,
+			className: cls,
+			children
+		})
+	});
+}
+/** A link tile for mega-menu panels: icon, title and one line of description. */
+function NavigationMenuCard({ href, title, description, icon, className }) {
+	const slots = useSlots();
+	const Link = useLinkComponent();
+	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		"data-slot": "navigation-menu-card",
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Link, {
+			href,
+			className: s.card({ class: [slots.card, className] }),
+			children: [icon && /* @__PURE__ */ jsx("span", {
+				className: s.cardIcon({ class: slots.cardIcon }),
+				"aria-hidden": "true",
+				children: icon
+			}), /* @__PURE__ */ jsxs("span", {
+				className: s.cardText({ class: slots.cardText }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: s.cardTitle({ class: slots.cardTitle }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: s.cardDescription({ class: slots.cardDescription }),
+					children: description
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { NavigationMenu$1 as NavigationMenu, NavigationMenuCard, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };

package/dist/components/navigation-menu/navigation-menu.styles.d.ts

@@ -0,0 +1,111 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/navigation-menu/navigation-menu.styles.d.ts
+export declare const navigationMenuStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      card?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      viewportWrapper?: import("tailwind-variants").ClassValue;
+      cardIcon?: import("tailwind-variants").ClassValue;
+      cardText?: import("tailwind-variants").ClassValue;
+      cardTitle?: import("tailwind-variants").ClassValue;
+      cardDescription?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      card?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      viewportWrapper?: import("tailwind-variants").ClassValue;
+      cardIcon?: import("tailwind-variants").ClassValue;
+      cardText?: import("tailwind-variants").ClassValue;
+      cardTitle?: import("tailwind-variants").ClassValue;
+      cardDescription?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  list: string;
+  item: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  viewportWrapper: string;
+  viewport: string[];
+  link: string[];
+  card: string[];
+  cardIcon: string;
+  cardText: string;
+  cardTitle: string;
+  cardDescription: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      card?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      viewportWrapper?: import("tailwind-variants").ClassValue;
+      cardIcon?: import("tailwind-variants").ClassValue;
+      cardText?: import("tailwind-variants").ClassValue;
+      cardTitle?: import("tailwind-variants").ClassValue;
+      cardDescription?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  list: string;
+  item: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  viewportWrapper: string;
+  viewport: string[];
+  link: string[];
+  card: string[];
+  cardIcon: string;
+  cardText: string;
+  cardTitle: string;
+  cardDescription: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  list: string;
+  item: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  viewportWrapper: string;
+  viewport: string[];
+  link: string[];
+  card: string[];
+  cardIcon: string;
+  cardText: string;
+  cardTitle: string;
+  cardDescription: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    NavigationMenu: StylesEntry<typeof navigationMenuStyles>;
+  }
+}
+//#endregion

package/dist/components/navigation-menu/navigation-menu.styles.js

@@ -0,0 +1,39 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/navigation-menu/navigation-menu.styles.ts
+const topLevel = [
+	"group inline-flex h-9 cursor-pointer select-none items-center justify-center gap-1 rounded-md px-3 text-small font-medium text-muted-foreground",
+	transition,
+	focusRing,
+	"hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
+	"data-active:text-foreground"
+];
+const navigationMenuStyles = /* @__PURE__ */ tv({ slots: {
+	root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
+	list: "group flex flex-1 list-none items-center justify-center gap-1",
+	item: "relative",
+	trigger: topLevel,
+	chevron: "size-3 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180",
+	content: "top-0 left-0 w-full p-2 animate-fade-in md:absolute md:w-auto",
+	viewportWrapper: "absolute top-full left-0 flex justify-center",
+	viewport: [
+		"relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-lg border-border bg-raised text-foreground shadow-lg animate-pop-in data-[state=closed]:animate-pop-out",
+		"md:w-(--radix-navigation-menu-viewport-width)",
+		"transition-[width,height] duration-(--glyph-duration-base) ease-standard",
+		themedBorder
+	],
+	link: topLevel,
+	card: [
+		"flex select-none gap-3 rounded-md p-3 text-foreground no-underline outline-none",
+		transition,
+		focusRing,
+		"hover:bg-muted focus-visible:bg-muted"
+	],
+	cardIcon: "flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&_svg]:size-4",
+	cardText: "grid min-w-0 gap-0.5",
+	cardTitle: "text-small font-medium text-foreground",
+	cardDescription: "text-small text-muted-foreground"
+} });
+//#endregion
+export { navigationMenuStyles };

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,3 @@
+import { NumberInputVariants, numberInputStyles } from "./number-input.styles.js";
+import { NumberInput, NumberInputProps } from "./number-input.js";
+export { NumberInput, type NumberInputProps, type NumberInputVariants, numberInputStyles };

package/dist/components/number-input/number-input.d.ts

@@ -0,0 +1,30 @@
+import { NumberInputVariants } from "./number-input.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/number-input/number-input.d.ts
+export interface NumberInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'min' | 'max' | 'step' | 'prefix'>, NumberInputVariants {
+  /** `null` means empty. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  /** Amount added or removed by the steppers and arrow keys. Shift multiplies by 10. Default 1. */
+  step?: number;
+  /** Display formatting when the field isn't focused, e.g. `{ style: 'currency', currency: 'USD' }`. */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Locale for formatting. Defaults to the browser's. */
+  locale?: string;
+  prefix?: ReactNode;
+  /** Content after the number, before the steppers, e.g. a unit. */
+  suffix?: ReactNode;
+  /** Hide the − / + buttons. */
+  hideSteppers?: boolean;
+  /** Classes for the `<input>` element. `className` styles the outer frame. */
+  inputClassName?: string;
+}
+/**
+ * A number field with − / + steppers, arrow-key stepping, min/max clamping on blur, and
+ * locale formatting when not focused. The value is a `number`, never a string.
+ */
+export declare function NumberInput(inProps: NumberInputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/number-input/number-input.js

@@ -0,0 +1,151 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { numberInputStyles } from "./number-input.styles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/number-input/number-input.tsx
+function clamp(value, min, max) {
+	return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, value));
+}
+/** Parses user text leniently: keeps digits, one leading minus and the decimal point. */
+function parse(text) {
+	const cleaned = text.replace(/[^\d.-]/g, "").replace(/(?!^)-/g, "");
+	if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
+	const n = Number(cleaned);
+	return Number.isFinite(n) ? n : null;
+}
+/** Round away float noise from repeated steps (0.1 + 0.2). */
+function roundToStep(value, step) {
+	const decimals = (String(step).split(".")[1] ?? "").length;
+	return Number(value.toFixed(Math.min(decimals + 2, 10)));
+}
+/**
+* A number field with − / + steppers, arrow-key stepping, min/max clamping on blur, and
+* locale formatting when not focused. The value is a `number`, never a string.
+*/
+function NumberInput(inProps) {
+	const [props, slots] = useComponentConfig("NumberInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = null, onValueChange, min, max, step = 1, formatOptions, locale, prefix, suffix, hideSteppers = false, size, className, inputClassName, disabled, readOnly, onBlur, onFocus, onKeyDown, ...rest } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState(null);
+	const s = numberInputStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	const display = draft ?? (value === null || value === void 0 ? "" : formatOptions ? new Intl.NumberFormat(locale, formatOptions).format(value) : String(value));
+	const commit = (next) => {
+		setValue(next === null ? null : roundToStep(clamp(next, min, max), step));
+	};
+	const stepBy = (direction, multiplier = 1) => {
+		const base = draft !== null ? parse(draft) : value;
+		commit((base ?? min ?? 0) + direction * step * multiplier);
+		setDraft(null);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || readOnly) return;
+		const multiplier = event.shiftKey ? 10 : 1;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			stepBy(1, multiplier);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			stepBy(-1, multiplier);
+		} else if (event.key === "Home" && min !== void 0) {
+			event.preventDefault();
+			commit(min);
+			setDraft(null);
+		} else if (event.key === "End" && max !== void 0) {
+			event.preventDefault();
+			commit(max);
+			setDraft(null);
+		} else if (event.key === "Enter" && draft !== null) {
+			commit(parse(draft));
+			setDraft(null);
+		}
+	};
+	const atMin = value !== null && value !== void 0 && min !== void 0 && value <= min;
+	const atMax = value !== null && value !== void 0 && max !== void 0 && value >= max;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-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", {
+				type: "text",
+				inputMode: "decimal",
+				role: "spinbutton",
+				"aria-valuenow": value ?? void 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				autoComplete: "off",
+				disabled,
+				readOnly,
+				value: display,
+				className: s.input({ class: [slots.input, inputClassName] }),
+				onFocus: (event) => {
+					setDraft(value === null || value === void 0 ? "" : String(value));
+					onFocus?.(event);
+				},
+				onChange: (event) => setDraft(event.target.value),
+				onBlur: (event) => {
+					if (draft !== null) commit(parse(draft));
+					setDraft(null);
+					onBlur?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: suffix
+			}),
+			!hideSteppers && /* @__PURE__ */ jsxs("span", {
+				className: s.steppers({ class: slots.steppers }),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Decrease",
+					disabled: disabled || readOnly || atMin,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(-1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Increase",
+					disabled: disabled || readOnly || atMax,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { NumberInput };

package/dist/components/number-input/number-input.styles.d.ts

@@ -0,0 +1,68 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/number-input/number-input.styles.d.ts
+export declare const numberInputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+      stepper: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+  steppers: string;
+  stepper: string[];
+}>>;
+export type NumberInputVariants = VariantProps<typeof numberInputStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    NumberInput: StylesEntry<typeof numberInputStyles>;
+  }
+}
+//#endregion