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

package/src/primitives/input-number.tsx

@@ -1,4 +1,6 @@
-import type { Scope } from "@radix-ui/react-context";
+import { composeEventHandlers } from "radix-ui/internal";
+import { Context } from "radix-ui/internal";
+import { useControllableState } from "radix-ui/internal";
 import type {
   ComponentProps,
   FocusEventHandler,
@@ -9,10 +11,6 @@ import type {
   PointerEventHandler,
   RefObject,
 } from "react";
-
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { createContextScope } from "@radix-ui/react-context";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import * as InputPrimitive from "#/primitives/input";
@@ -34,10 +32,10 @@ type ScopedProps<P> = P & {
   /**
    * Optional scope for the InputNumber component context
    */
-  __scopeInputNumber?: Scope;
+  __scopeInputNumber?: Context.Scope;
 };
 
-const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [
+const [createInputNumberContext, createInputNumberScope] = Context.createContextScope(NUMBER_INPUT_NAME, [
   createInputScope,
 ]);
 const useInputScope = createInputScope();
@@ -232,7 +230,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
   } = numberInputProps;
 
   /**
-   * Scope for the input component
+   * Context.Scope for the input component
    */
   const inputScope = useInputScope(__scopeInputNumber);
 
@@ -253,10 +251,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
   /**
    * Separators used for number formatting based on locale
    */
-  const { decimalSeparator, thousandSeparator } = useMemo(
-    () => getNumberFormatSeparators(locale),
-    [locale],
-  );
+  const { decimalSeparator, thousandSeparator } = useMemo(() => getNumberFormatSeparators(locale), [locale]);
 
   /**
    * Formats a number value into a string representation
@@ -295,11 +290,7 @@ function InputNumber(numberInputProps: ScopedProps<InputNumberProps>): JSX.Eleme
         return Number.NaN;
       }
 
-      const normalizedValue = normalizeInputValue(
-        cleanedValue,
-        thousandSeparator,
-        decimalSeparator,
-      );
+      const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
       let parsedValue = Number.parseFloat(normalizedValue);
 
       if (formatOptions.style === "percent") {
@@ -403,16 +394,7 @@ const NUMBER_INPUT_FIELD_NAME = "InputNumberField";
  */
 type InputNumberFieldProps = Omit<
   ComponentProps<typeof InputPrimitive.Field>,
-  | "defaultValue"
-  | "disabled"
-  | "id"
-  | "max"
-  | "min"
-  | "onChange"
-  | "prefix"
-  | "readOnly"
-  | "step"
-  | "value"
+  "defaultValue" | "disabled" | "id" | "max" | "min" | "onChange" | "prefix" | "readOnly" | "step" | "value"
 >;
 
 /**
@@ -595,10 +577,7 @@ function InputNumberField({
    */
   const combinedKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(
     (event) => {
-      composeEventHandlers(
-        onKeyDown,
-        chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter),
-      )(event);
+      composeEventHandlers(onKeyDown, chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter))(event);
     },
     [onKeyDown, handleKeyDown, handleKeyDownEnter, handleKeyDownPrevent],
   );
@@ -712,17 +691,8 @@ function NumberStepperButton({
   ...props
 }: ScopedProps<NumberStepperButtonProps>): JSX.Element {
   // Destructures relevant context values for the button functionality.
-  const {
-    ariaDecrementLabel,
-    ariaIncrementLabel,
-    disabled,
-    id,
-    max,
-    min,
-    onDecrement,
-    onIncrement,
-    value,
-  } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
+  const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value } =
+    useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
 
   const isDisabled = useMemo(() => {
     const atMin = min !== undefined && value !== undefined && value <= min;
@@ -829,10 +799,7 @@ function NumberStepperButton({
 /**
  * @since 0.3.16-canary.0
  */
-type InputNumberIncrementButtonProps = Omit<
-  ComponentProps<typeof NumberStepperButton>,
-  "operation"
->;
+type InputNumberIncrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
 
 /**
  * @since 0.3.16-canary.0
@@ -848,10 +815,7 @@ function InputNumberIncrementButton(props: InputNumberIncrementButtonProps): JSX
 /**
  * @since 0.3.16-canary.0
  */
-type InputNumberDecrementButtonProps = Omit<
-  ComponentProps<typeof NumberStepperButton>,
-  "operation"
->;
+type InputNumberDecrementButtonProps = Omit<ComponentProps<typeof NumberStepperButton>, "operation">;
 
 /**
  * @since 0.3.16-canary.0
@@ -870,9 +834,7 @@ function InputNumberDecrementButton(props: InputNumberDecrementButtonProps): JSX
  * @param callbacks - Array of callback functions that will be executed in order
  * @returns A single function that executes all callbacks
  */
-function chain<T extends Array<unknown>>(
-  ...callbacks: Array<(...args: T) => void>
-): (...args: T) => void {
+function chain<T extends Array<unknown>>(...callbacks: Array<(...args: T) => void>): (...args: T) => void {
   return (...args: T) => {
     for (const callback of callbacks) {
       callback(...args);
@@ -932,11 +894,7 @@ function getNumberFormatSeparators(locale?: string): NumberFormatSeparators {
  * @param decimalSeparator - The decimal separator to convert to standard dot notation
  * @returns Normalized string value ready for numeric conversion
  */
-function normalizeInputValue(
-  value: string,
-  thousandSeparator: string,
-  decimalSeparator: string,
-): string {
+function normalizeInputValue(value: string, thousandSeparator: string, decimalSeparator: string): string {
   return value
     .replaceAll(new RegExp(`\\${thousandSeparator}`, "g"), "")
     .replace(new RegExp(`\\${decimalSeparator}`), ".")
@@ -981,11 +939,7 @@ function isNumberKey(key: string): boolean {
  * @param max - The maximum allowed value (defaults to Infinity)
  * @returns The clamped value
  */
-function clamp(
-  value: number,
-  min = Number.NEGATIVE_INFINITY,
-  max = Number.POSITIVE_INFINITY,
-): number {
+function clamp(value: number, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY): number {
   return Math.min(Math.max(value, min), max);
 }
 

package/src/primitives/input.tsx

@@ -1,15 +1,6 @@
-import type { Scope } from "@radix-ui/react-context";
-import type {
-  ComponentProps,
-  JSX,
-  PointerEventHandler,
-  PropsWithChildren,
-  ReactNode,
-  RefObject,
-} from "react";
-
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { createContextScope } from "@radix-ui/react-context";
+import { useComposedRefs } from "radix-ui/internal";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX, PointerEventHandler, PropsWithChildren, ReactNode, RefObject } from "react";
 import { useRef } from "react";
 
 /* -----------------------------------------------------------------------------
@@ -23,12 +14,12 @@ const INPUT_NAME = "Input";
  */
 type ScopedProps<P> = P & {
   /**
-   * Scope for the Input component context
+   * Context.Scope for the Input component context
    */
-  __scopeInput?: Scope;
+  __scopeInput?: Context.Scope;
 };
 
-const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+const [createInputContext, createInputScope] = Context.createContextScope(INPUT_NAME);
 
 /**
  * Context value for the Input component
@@ -181,12 +172,7 @@ function Input(inputProps: ScopedProps<InputProps>): JSX.Element {
   };
 
   return (
-    <InputContextProvider
-      disabled={disabled}
-      inputRef={inputRef}
-      readOnly={readOnly}
-      scope={__scopeInput}
-    >
+    <InputContextProvider disabled={disabled} inputRef={inputRef} readOnly={readOnly} scope={__scopeInput}>
       <div
         data-disabled={disabled}
         data-readonly={readOnly}
@@ -229,9 +215,7 @@ function InputField({ __scopeInput, ...props }: ScopedProps<InputFieldProps>): J
    */
   const composedInputRef = useComposedRefs(inputRef);
 
-  return (
-    <input ref={composedInputRef} disabled={disabled} readOnly={readOnly} type="text" {...props} />
-  );
+  return <input ref={composedInputRef} disabled={disabled} readOnly={readOnly} type="text" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

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-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-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]:pe-1.5 has-data-[icon=inline-start]:ps-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-e-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-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-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]:pe-2 has-data-[icon=inline-start]:ps-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]:pe-1.5 has-data-[icon=inline-start]:ps-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]:pe-1.5 has-data-[icon=inline-start]:ps-1.5", // 32px
+      lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-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",
     },
   },
 });