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

package/src/primitives/progress-circle.tsx

@@ -1,9 +1,5 @@
-"use client";
-
-import type { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 import type { ComponentProps, ReactNode } from "react";
-
-import { createContextScope } from "@radix-ui/react-context";
 import { useId, useMemo } from "react";
 
 /* -----------------------------------------------------------------------------
@@ -12,7 +8,7 @@ import { useId, useMemo } from "react";
 
 const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
 
-type ScopedProps<P> = P & { __scopeProgressCircle?: Scope };
+type ScopedProps<P> = P & { __scopeProgressCircle?: Context.Scope };
 
 /**
  * Defines color thresholds based on progress values
@@ -109,9 +105,8 @@ interface ProgressCircleContextValue {
   valueText: string;
 }
 
-const [createProgressCircleContext, createProgressCircleScope] = createContextScope(
-  PROGRESS_CIRCLE_PROVIDER_NAME,
-);
+const [createProgressCircleContext, createProgressCircleScope] =
+  Context.createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
 
 const [ProgressCircleContextProvider, useProgressCircleContext] =
   createProgressCircleContext<ProgressCircleContextValue>(PROGRESS_CIRCLE_PROVIDER_NAME);
@@ -237,19 +232,13 @@ function ProgressCircleProvider({
   const isIndeterminate = value === null || value === undefined;
   const clampedValue = isIndeterminate ? undefined : clamp(validMin, validMax, value);
   const range = validMax - validMin;
-  const percentage =
-    clampedValue !== undefined && range > 0 ? ((clampedValue - validMin) / range) * 100 : 0;
+  const percentage = clampedValue !== undefined && range > 0 ? ((clampedValue - validMin) / range) * 100 : 0;
   const valueText =
-    clampedValue !== undefined && formatValue
-      ? formatValue(clampedValue)
-      : `${Math.round(percentage).toString()}%`;
+    clampedValue !== undefined && formatValue ? formatValue(clampedValue) : `${Math.round(percentage).toString()}%`;
 
   // Sort thresholds by value
   const sortedThresholds = useMemo(
-    () =>
-      thresholds && thresholds.length > 0
-        ? [...thresholds].toSorted((a, b) => a.value - b.value)
-        : [],
+    () => (thresholds && thresholds.length > 0 ? [...thresholds].toSorted((a, b) => a.value - b.value) : []),
     [thresholds],
   );
 
@@ -314,10 +303,7 @@ type ProgressCircleProps = ComponentProps<"div">;
  *
  * @since 0.3.16-canary.0
  */
-function ProgressCircle({
-  __scopeProgressCircle,
-  ...props
-}: ScopedProps<ProgressCircleProps>): ReactNode {
+function ProgressCircle({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleProps>): ReactNode {
   return <div {...props} />;
 }
 
@@ -339,10 +325,7 @@ type ProgressCircleSVGProps = ComponentProps<"svg">;
  *
  * @since 0.3.16-canary.0
  */
-function ProgressCircleSVG({
-  __scopeProgressCircle,
-  ...props
-}: ScopedProps<ProgressCircleSVGProps>): ReactNode {
+function ProgressCircleSVG({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleSVGProps>): ReactNode {
   const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(
     PROGRESS_CIRCLE_SVG_NAME,
     __scopeProgressCircle,
@@ -383,10 +366,7 @@ type ProgressCircleTrackProps = ComponentProps<"circle">;
  *
  * @since 0.3.16-canary.0
  */
-function ProgressCircleTrack({
-  __scopeProgressCircle,
-  ...props
-}: ScopedProps<ProgressCircleTrackProps>): ReactNode {
+function ProgressCircleTrack({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleTrackProps>): ReactNode {
   const { center, radius, strokeWidth, threshold } = useProgressCircleContext(
     PROGRESS_CIRCLE_TRACK_NAME,
     __scopeProgressCircle,
@@ -427,15 +407,8 @@ function ProgressCircleIndicator({
   __scopeProgressCircle,
   ...props
 }: ScopedProps<ProgressCircleIndicatorProps>): ReactNode {
-  const {
-    center,
-    circumference,
-    radius,
-    rotationTransform,
-    strokeDashoffset,
-    strokeWidth,
-    threshold,
-  } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
+  const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } =
+    useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
 
   return (
     <circle
@@ -479,10 +452,7 @@ function ProgressCircleValue({
   children,
   ...props
 }: ScopedProps<ProgressCircleValueProps>): ReactNode {
-  const { clampedValue, valueText } = useProgressCircleContext(
-    PROGRESS_CIRCLE_VALUE_NAME,
-    __scopeProgressCircle,
-  );
+  const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
 
   if (typeof children === "function") {
     return children({ value: clampedValue, valueText });

package/src/variants/alert.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,24 +9,14 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const alertVariants = tv({
-  base: [
-    "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 px-4 py-3",
-    "rounded-xl border",
-    "bg-card text-sm",
-    "has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3",
-    "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  ],
+  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: "text-card-foreground",
-      destructive: [
-        "text-destructive",
-        "*:data-[slot=alert-description]:text-destructive/90",
-        "[&>svg]:text-current",
-      ],
+      default: "bg-card text-card-foreground",
+      destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
     },
   },
 });

package/src/variants/badge.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,45 +9,19 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const badgeVariants = tv({
-  base: [
-    "inline-flex w-fit shrink-0 items-center justify-center gap-2 px-1.5 py-0.5",
-    "rounded-md border outline-hidden",
-    "text-xs font-medium whitespace-nowrap",
-    "transition",
-    "focus-visible:ring-3 focus-visible:ring-ring/50",
-    "[&>svg]:size-3 [&>svg]:shrink-0",
-  ],
+  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: [
-        "border-transparent",
-        "bg-primary text-primary-foreground",
-        "focus-visible:ring-primary/20",
-        "dark:focus-visible:ring-primary/40",
-        "[a&]:hover:bg-primary/80",
-      ],
-      destructive: [
-        "border-transparent",
-        "bg-destructive text-white",
-        "focus-visible:ring-destructive/20",
-        "dark:bg-destructive/60",
-        "dark:focus-visible:ring-destructive/40",
-        "[a&]:hover:bg-destructive/90",
-      ],
-      outline: [
-        "border-input",
-        "bg-background",
-        "focus-visible:border-ring",
-        "[a&]:hover:border-ring/60 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      ],
-      secondary: [
-        "border-transparent",
-        "bg-secondary text-secondary-foreground",
-        "[a&]:hover:bg-secondary/80",
-      ],
+      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",
     },
   },
 });

package/src/variants/button-group.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,28 +9,16 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const buttonGroupVariants = tv({
-  base: [
-    "flex w-fit items-stretch",
-    "has-[>[data-slot=button-group]]:gap-2",
-    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
-    "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg",
-    "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
-    "[&>input]:flex-1",
-  ],
+  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",
-      ],
-      vertical: [
-        "flex-col",
-        "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0",
-        "[&>*:not(:last-child)]:rounded-b-none",
-      ],
+      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!",
     },
   },
 });

package/src/variants/button.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,72 +9,36 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const buttonVariants = tv({
-  base: [
-    "inline-flex shrink-0 items-center justify-center gap-2",
-    "rounded-lg outline-hidden",
-    "text-sm font-medium whitespace-nowrap",
-    "transition duration-150 ease-snappy select-none",
-    "motion-reduce:transition-none motion-reduce:duration-0",
-    "active:not-disabled:translate-y-px",
-    "focus-visible:ring-3",
-    "disabled:opacity-50",
-    "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  ],
+  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: "md",
+    size: "default",
     variant: "default",
   },
   variants: {
     size: {
-      "icon-sm": "size-8", // 32px
+      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", // 36px
+      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", // 24px
+      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", // 32px
+      lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", // 40px
+
       icon: "size-9", // 36px
+      "icon-xs":
+        "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", // 24px
+      "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", // 32px
       "icon-lg": "size-10", // 40px
-
-      sm: ["h-8 px-3", "has-[>svg]:px-2.5"], // 32px
-      md: ["h-9 px-4", "has-[>svg]:px-3"], // 36px
-      lg: ["h-10 px-6", "has-[>svg]:px-4"], // 40px
     },
     variant: {
-      default: [
-        "bg-primary text-primary-foreground",
-        "hover:not-disabled:bg-primary/80",
-        "focus-visible:ring-primary/20",
-        "dark:focus-visible:ring-primary/40",
-      ],
-      destructive: [
-        "bg-destructive text-white",
-        "hover:not-disabled:bg-destructive/90",
-        "focus-visible:ring-destructive/20",
-        "dark:bg-destructive/60",
-        "dark:focus-visible:ring-destructive/40",
-      ],
-      ghost: [
-        "hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-        "focus-visible:ring-ring/50",
-        "dark:hover:not-disabled:bg-secondary/50",
-      ],
-      link: [
-        "text-primary underline-offset-4",
-        "hover:not-disabled:underline",
-        "focus-visible:ring-ring/50",
-      ],
-      outline: [
-        "border border-input shadow-xs",
-        "hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-        "focus-visible:border-ring focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive",
-        "focus-within:aria-invalid:ring-destructive/20",
-        "hover:not-disabled:aria-invalid:border-destructive/60",
-        "dark:bg-input/30",
-        "dark:hover:not-disabled:bg-input/50",
-        "dark:aria-invalid:border-destructive/70",
-        "dark:focus-within:aria-invalid:ring-destructive/40",
-      ],
-      secondary: [
-        "bg-secondary text-secondary-foreground",
-        "hover:not-disabled:bg-secondary/80",
-        "focus-visible:ring-ring/50",
-      ],
+      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",
     },
   },
 });

package/src/variants/empty.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,22 +9,14 @@ import { tv } from "#/lib/utils";
  * @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",
-  ],
+  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-xl",
-        "bg-muted text-foreground",
-        "[&_svg:not([class*='size-'])]:size-6",
-      ],
+      icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
     },
   },
 });

package/src/variants/field.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,29 +9,17 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const fieldVariants = tv({
-  base: ["group/field flex w-full gap-3", "data-[invalid=true]:text-destructive"],
+  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",
-        "@md/field-group:flex-row @md/field-group:items-center",
-        "@md/field-group:has-[>[data-slot=field-content]]:items-start",
-        "[&>*]:w-full",
-        "@md/field-group:[&>*]:w-auto",
-        "[&>.sr-only]:w-auto",
-        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-        "@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      ],
-      vertical: ["flex-col", "[&>*]:w-full", "[&>.sr-only]:w-auto"],
+      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",
     },
   },
 });

package/src/variants/input-group.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,23 +9,7 @@ import { tv } from "#/lib/utils";
  * @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-lg border border-input shadow-xs outline-none",
-    "transition-[color,box-shadow]",
-    "motion-reduce:transition-none",
-    "dark:bg-input/30",
-    "has-[>textarea]:h-auto",
-    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
-    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
-    "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-destructive/20",
-    "dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-    "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
-    "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
-    "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2",
-    "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2",
-  ],
+  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",
 });
 
 /* -----------------------------------------------------------------------------
@@ -37,41 +20,17 @@ const inputGroupVariants = tv({
  * @since 0.3.16-canary.0
  */
 const inputGroupAddonVariants = tv({
-  base: [
-    "flex h-auto items-center justify-center gap-2 py-1.5",
-    "text-sm font-medium text-muted-foreground",
-    "cursor-text select-none",
-    "group-data-disabled/input-group:opacity-50",
-    "[&>kbd]:rounded-[calc(var(--radius)-5px)]",
-    "[&>svg:not([class*='size-'])]:size-4",
-  ],
+  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-3 pb-3",
-        "group-has-[>input]/input-group:pb-2.5",
-        "[.border-t]:pt-3",
-      ],
-      "block-start": [
-        "order-first w-full justify-start px-3 pt-3",
-        "group-has-[>input]/input-group:pt-2.5",
-        "[.border-b]:pb-3",
-      ],
-      "inline-end": [
-        "order-last",
-        "pr-3",
-        "has-[>button]:mr-[-0.45rem]",
-        "has-[>kbd]:mr-[-0.35rem]",
-      ],
-      "inline-start": [
-        "order-first",
-        "pl-3",
-        "has-[>button]:ml-[-0.45rem]",
-        "has-[>kbd]:ml-[-0.35rem]",
-      ],
+      "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]",
     },
   },
 });
@@ -84,27 +43,16 @@ const inputGroupAddonVariants = tv({
  * @since 0.3.16-canary.0
  */
 const inputGroupButtonVariants = tv({
-  base: [
-    "flex items-center gap-2",
-    "shadow-none",
-    "text-sm",
-    "[&>svg:not([class*='size-'])]:size-4",
-  ],
+  base: "flex items-center gap-2 text-sm shadow-none",
   defaultVariants: {
     size: "xs",
   },
   variants: {
     size: {
-      "icon-xs": ["size-6 p-0", "rounded-[calc(var(--radius)-5px)]", "has-[>svg]:p-0"],
-      "icon-sm": ["size-8 p-0", "has-[>svg]:p-0"],
-
-      xs: [
-        "h-6 gap-1 px-2",
-        "rounded-[calc(var(--radius)-5px)]",
-        "has-[>svg]:px-2",
-        "[&>svg]:size-3.5",
-      ],
-      sm: ["h-8 gap-1.5 px-2.5", "rounded-md", "has-[>svg]:px-2.5"],
+      "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",
     },
   },
 });

package/src/variants/input-number.ts

@@ -0,0 +1,65 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: InputNumber
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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: {},
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputNumberVariants = VariantProps<typeof inputNumberVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { inputNumberVariants };
+export type { InputNumberVariants };