@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/primitives/checkbox-group.mjs

@@ -1,17 +1,12 @@
+import { Checkbox, Direction } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { createContextScope } from "@radix-ui/react-context";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { createCheckboxScope } from "@radix-ui/react-checkbox";
-import { useDirection } from "@radix-ui/react-direction";
-import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
-import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Context, RovingFocus, useControllableState } from "radix-ui/internal";
 //#region src/primitives/checkbox-group.tsx
 const CHECKBOX_GROUP_NAME = "CheckboxGroup";
-const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [createRovingFocusGroupScope, createCheckboxScope]);
-const useRovingFocusGroupScope = createRovingFocusGroupScope();
-const useCheckboxScope = createCheckboxScope();
+const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(CHECKBOX_GROUP_NAME, [RovingFocus.createRovingFocusGroupScope, Checkbox.createCheckboxScope]);
+const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
+const useCheckboxScope = Checkbox.createCheckboxScope();
 const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createCheckboxGroupContext(CHECKBOX_GROUP_NAME);
 /**
 * CheckboxGroup component that manages a group of checkboxes with roving focus
@@ -20,13 +15,13 @@ const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createCheckboxGr
 */
 function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = false, loop = true, name, onValueChange, orientation, required = false, value: valueProperty, ...props }) {
 	/**
-	* Scope for the RovingFocusGroup component
+	* Context.Scope for the RovingFocusGroup component
 	*/
 	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 	/**
 	* Direction for layout and navigation
 	*/
-	const direction = useDirection(dir);
+	const direction = Direction.useDirection(dir);
 	/**
 	* State for managing selected checkbox values
 	*/
@@ -51,7 +46,7 @@ function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled = fal
 				return currentValue.filter((inputValue) => inputValue !== itemValue);
 			});
 		}, [setValue, required]),
-		children: /* @__PURE__ */ jsx(RovingFocusGroup.Root, {
+		children: /* @__PURE__ */ jsx(RovingFocus.Root, {
 			asChild: true,
 			...rovingFocusGroupScope,
 			dir: direction,
@@ -82,23 +77,23 @@ function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
 	*/
 	const isDisabled = context.disabled || disabled;
 	/**
-	* Scope for the RovingFocusGroup component
+	* Context.Scope for the RovingFocusGroup component
 	*/
 	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 	/**
-	* Scope for the Checkbox component
+	* Context.Scope for the Checkbox component
 	*/
 	const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 	/**
 	* Whether this checkbox is currently checked
 	*/
 	const checked = context.value?.includes(props.value);
-	return /* @__PURE__ */ jsx(RovingFocusGroup.Item, {
+	return /* @__PURE__ */ jsx(RovingFocus.Item, {
 		asChild: true,
 		...rovingFocusGroupScope,
 		active: checked,
 		focusable: !isDisabled,
-		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
 			"aria-label": props.value,
 			checked,
 			disabled: isDisabled,
@@ -120,10 +115,10 @@ function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }) {
 */
 function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }) {
 	/**
-	* Scope for the Checkbox component
+	* Context.Scope for the Checkbox component
 	*/
 	const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
-	return /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
 		...checkboxScope,
 		...props
 	});

package/dist/primitives/input-number.d.mts

@@ -1,7 +1,6 @@
 import { Field as InputField, Input } from "./input.mjs";
 import { ComponentProps, JSX } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
-import { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 
 //#region src/primitives/input-number.d.ts
 /**
@@ -11,9 +10,9 @@ type ScopedProps<P> = P & {
   /**
    * Optional scope for the InputNumber component context
    */
-  __scopeInputNumber?: Scope;
+  __scopeInputNumber?: Context.Scope;
 };
-declare const createInputNumberScope: _$_radix_ui_react_context0.CreateScope;
+declare const createInputNumberScope: Context.CreateScope;
 /**
  * Props for the main InputNumber component.
  *

package/dist/primitives/input-number.mjs

@@ -1,15 +1,13 @@
 import { Field as InputField, Input, createInputScope } from "./input.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { createContextScope } from "@radix-ui/react-context";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { Context, composeEventHandlers, useControllableState } from "radix-ui/internal";
 //#region src/primitives/input-number.tsx
 /**
 * The name of the InputNumber component constant.
 */
 const NUMBER_INPUT_NAME = "InputNumber";
-const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [createInputScope]);
+const [createInputNumberContext, createInputNumberScope] = Context.createContextScope(NUMBER_INPUT_NAME, [createInputScope]);
 const useInputScope = createInputScope();
 const [InputNumberContextProvider, useInputNumberContext] = createInputNumberContext(NUMBER_INPUT_NAME);
 /**
@@ -21,7 +19,7 @@ function InputNumber(numberInputProps) {
 		style: "decimal"
 	}, id, locale, max, min, onChange, step = 1, value: valueProperty, ...props } = numberInputProps;
 	/**
-	* Scope for the input component
+	* Context.Scope for the input component
 	*/
 	const inputScope = useInputScope(__scopeInputNumber);
 	/**

package/dist/primitives/input.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps, JSX, PropsWithChildren, ReactNode } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
-import { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 
 //#region src/primitives/input.d.ts
 /**
@@ -8,11 +7,11 @@ import { Scope } from "@radix-ui/react-context";
  */
 type ScopedProps<P> = P & {
   /**
-   * Scope for the Input component context
+   * Context.Scope for the Input component context
    */
-  __scopeInput?: Scope;
+  __scopeInput?: Context.Scope;
 };
-declare const createInputScope: _$_radix_ui_react_context0.CreateScope;
+declare const createInputScope: Context.CreateScope;
 /**
  * Props for styling and appearance of the Input component
  */

package/dist/primitives/input.mjs

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { createContextScope } from "@radix-ui/react-context";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Context, useComposedRefs } from "radix-ui/internal";
 //#region src/primitives/input.tsx
 const INPUT_NAME = "Input";
-const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+const [createInputContext, createInputScope] = Context.createContextScope(INPUT_NAME);
 const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
 /**
 * @since 0.3.16-canary.0

package/dist/primitives/progress-circle.d.mts

@@ -1,10 +1,9 @@
 import { ComponentProps, ReactNode } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
-import { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 
 //#region src/primitives/progress-circle.d.ts
 type ScopedProps<P> = P & {
-  __scopeProgressCircle?: Scope;
+  __scopeProgressCircle?: Context.Scope;
 };
 /**
  * Defines color thresholds based on progress values
@@ -23,7 +22,7 @@ interface Threshold {
    */
   value: number;
 }
-declare const createProgressCircleScope: _$_radix_ui_react_context0.CreateScope;
+declare const createProgressCircleScope: Context.CreateScope;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/primitives/progress-circle.mjs

@@ -1,10 +1,9 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
-import { createContextScope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 //#region src/primitives/progress-circle.tsx
 const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
-const [createProgressCircleContext, createProgressCircleScope] = createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
+const [createProgressCircleContext, createProgressCircleScope] = Context.createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
 const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
 /**
 * Provides context for the ProgressCircle component

package/dist/variants/alert.d.mts

@@ -0,0 +1,18 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/alert.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const alertVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    destructive: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertVariants = VariantProps<typeof alertVariants>;
+//#endregion
+export { type AlertVariants, alertVariants };

package/dist/variants/alert.mjs

@@ -0,0 +1,15 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/alert.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const alertVariants = tv({
+	base: "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+	} }
+});
+//#endregion
+export { alertVariants };

package/dist/variants/badge.d.mts

@@ -0,0 +1,22 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/badge.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const badgeVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    destructive: string;
+    ghost: string;
+    link: string;
+    outline: string;
+    secondary: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+//#endregion
+export { type BadgeVariants, badgeVariants };

package/dist/variants/badge.mjs

@@ -0,0 +1,19 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/badge.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const badgeVariants = tv({
+	base: "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80"
+	} }
+});
+//#endregion
+export { badgeVariants };

package/dist/variants/button-group.d.mts

@@ -0,0 +1,18 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/button-group.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const buttonGroupVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  orientation: {
+    horizontal: string;
+    vertical: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
+//#endregion
+export { type ButtonGroupVariants, buttonGroupVariants };

package/dist/variants/button-group.mjs

@@ -0,0 +1,15 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/button-group.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const buttonGroupVariants = tv({
+	base: "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!"
+	} }
+});
+//#endregion
+export { buttonGroupVariants };

package/dist/variants/button.d.mts

@@ -0,0 +1,32 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/button.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const buttonVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  size: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+    icon: string;
+    "icon-xs": string;
+    "icon-sm": string;
+    "icon-lg": string;
+  };
+  variant: {
+    default: string;
+    destructive: string;
+    ghost: string;
+    link: string;
+    outline: string;
+    secondary: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+//#endregion
+export { type ButtonVariants, buttonVariants };

package/dist/variants/button.mjs

@@ -0,0 +1,34 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/button.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const buttonVariants = tv({
+	base: "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-9",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+			"icon-lg": "size-10"
+		},
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline",
+			outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground"
+		}
+	}
+});
+//#endregion
+export { buttonVariants };

package/dist/variants/empty.d.mts

@@ -0,0 +1,18 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/empty.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const emptyMediaVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    icon: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
+//#endregion
+export { type EmptyMediaVariants, emptyMediaVariants };

package/dist/variants/empty.mjs

@@ -0,0 +1,15 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/empty.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const emptyMediaVariants = tv({
+	base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+	} }
+});
+//#endregion
+export { emptyMediaVariants };

package/dist/variants/field.d.mts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/field.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const fieldVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  orientation: {
+    horizontal: string;
+    responsive: string;
+    vertical: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldVariants = VariantProps<typeof fieldVariants>;
+//#endregion
+export { type FieldVariants, fieldVariants };

package/dist/variants/field.mjs

@@ -0,0 +1,16 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/field.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const fieldVariants = tv({
+	base: "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+	defaultVariants: { orientation: "vertical" },
+	variants: { orientation: {
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto"
+	} }
+});
+//#endregion
+export { fieldVariants };

package/dist/variants/input-group.d.mts

@@ -0,0 +1,43 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/input-group.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantResolver<Record<never, never>, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  align: {
+    "block-end": string;
+    "block-start": string;
+    "inline-end": string;
+    "inline-start": string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupButtonVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  size: {
+    "icon-xs": string;
+    "icon-sm": string;
+    sm: string;
+    xs: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupVariants = VariantProps<typeof inputGroupVariants>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+//#endregion
+export { type InputGroupAddonVariants, type InputGroupButtonVariants, type InputGroupVariants, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/variants/input-group.mjs

@@ -0,0 +1,34 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/input-group.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const inputGroupVariants = tv({ base: "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5" });
+/**
+* @since 0.3.16-canary.0
+*/
+const inputGroupAddonVariants = tv({
+	base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-disabled/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-3px)] [&>svg:not([class*='size-'])]:size-4",
+	defaultVariants: { align: "inline-start" },
+	variants: { align: {
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+		"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]"
+	} }
+});
+/**
+* @since 0.3.16-canary.0
+*/
+const inputGroupButtonVariants = tv({
+	base: "flex items-center gap-2 text-sm shadow-none",
+	defaultVariants: { size: "xs" },
+	variants: { size: {
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+		sm: "",
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5"
+	} }
+});
+//#endregion
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/variants/input-number.d.mts

@@ -0,0 +1,45 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/input-number.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputNumberVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    split: {
+      field: string;
+    };
+    stepper: {};
+  };
+}, {
+  /**
+   * Split layout: trailing increment button (always on the inline end).
+   */
+  incrementButton: string;
+  /**
+   * Split layout: leading decrement button (always on the inline start).
+   */
+  decrementButton: string;
+  /**
+   * Editable numeric input.
+   */
+  field: string;
+  /**
+   * Outer container.
+   */
+  root: string;
+  /**
+   * Stepper layout: stacked chevron column on the trailing edge.
+   */
+  stepper: string;
+  /**
+   * Stepper layout: individual chevron button (shared by increment/decrement).
+   */
+  stepperButton: string;
+}>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputNumberVariants = VariantProps<typeof inputNumberVariants>;
+//#endregion
+export { type InputNumberVariants, inputNumberVariants };

package/dist/variants/input-number.mjs

@@ -0,0 +1,40 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/input-number.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const inputNumberVariants = tv({
+	defaultVariants: { variant: "stepper" },
+	slots: {
+		/**
+		* Split layout: trailing increment button (always on the inline end).
+		*/
+		incrementButton: "order-last h-full w-9 shrink-0 rounded-none rounded-r-[calc(var(--radius-md)-1px)] border-l border-l-input text-muted-foreground group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:border-l-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		/**
+		* Split layout: leading decrement button (always on the inline start).
+		*/
+		decrementButton: "order-first h-full w-9 shrink-0 rounded-none rounded-l-[calc(var(--radius-md)-1px)] border-r border-r-input text-muted-foreground group-focus-within/input-number:border-r-ring group-has-aria-invalid/input-number:border-r-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		/**
+		* Editable numeric input.
+		*/
+		field: "h-full min-w-0 flex-1 bg-transparent px-2.5 py-1 outline-hidden selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed",
+		/**
+		* Outer container.
+		*/
+		root: "group/input-number relative flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-transparent text-base transition-[color,box-shadow] not-has-disabled:shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 motion-reduce:transition-none md:text-sm dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		/**
+		* Stepper layout: stacked chevron column on the trailing edge.
+		*/
+		stepper: "order-last grid h-full w-8 shrink-0 divide-y divide-input border-l border-l-input transition-colors group-focus-within/input-number:divide-ring group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:divide-destructive group-has-aria-invalid/input-number:border-l-destructive motion-reduce:transition-none *:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0 group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/40",
+		/**
+		* Stepper layout: individual chevron button (shared by increment/decrement).
+		*/
+		stepperButton: "h-auto min-w-0 rounded-none px-0 text-muted-foreground"
+	},
+	variants: { variant: {
+		split: { field: "text-center tabular-nums" },
+		stepper: {}
+	} }
+});
+//#endregion
+export { inputNumberVariants };