@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

package/src/ui/radio-group/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export type {
+  RadioGroupAppearance,
+  RadioGroupControlVariantProps,
+  RadioGroupIndicatorVariantProps,
+  RadioGroupItemProps,
+  RadioGroupItemVariantProps,
+  RadioGroupProps,
+  RadioGroupRootVariantProps,
+  RadioGroupSize,
+} from "./types";
+export {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";

package/src/ui/radio-group/radio-group-context.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import type { RadioGroupAppearance, RadioGroupSize } from "./types";
+
+export type RadioGroupContextValue = {
+  value: string | undefined;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  appearance?: RadioGroupAppearance;
+  size?: RadioGroupSize;
+  onValueChange: (value: string) => void;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextValue | null>(
+  null,
+);
+
+export function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}

package/src/ui/radio-group/radio-group.test.tsx

@@ -0,0 +1,61 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+describe("RadioGroup", () => {
+  it("should expose displayName", () => {
+    expect(RadioGroup.displayName).toBe("RadioGroup");
+    expect(RadioGroupItem.displayName).toBe("RadioGroupItem");
+  });
+
+  it("should stamp data-slot", () => {
+    render(
+      <RadioGroup defaultValue="a" aria-label="Plans">
+        <RadioGroupItem value="a">A</RadioGroupItem>
+      </RadioGroup>,
+    );
+    expect(document.querySelector('[data-slot="radio-group"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="radio-group-item"]')).toBeTruthy();
+  });
+
+  it("should select one value at a time", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup defaultValue="starter" onValueChange={onValueChange}>
+        <RadioGroupItem value="starter">Starter</RadioGroupItem>
+        <RadioGroupItem value="pro">Pro</RadioGroupItem>
+      </RadioGroup>,
+    );
+
+    await user.click(screen.getByRole("radio", { name: "Pro" }));
+
+    expect(onValueChange).toHaveBeenLastCalledWith("pro");
+    expect(screen.getByRole("radio", { name: "Starter" })).not.toBeChecked();
+    expect(screen.getByRole("radio", { name: "Pro" })).toBeChecked();
+  });
+
+  it("should support controlled value", () => {
+    render(
+      <RadioGroup value="pro">
+        <RadioGroupItem value="starter">Starter</RadioGroupItem>
+        <RadioGroupItem value="pro">Pro</RadioGroupItem>
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole("radio", { name: "Pro" })).toBeChecked();
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <RadioGroup ref={ref} defaultValue="a">
+        <RadioGroupItem value="a">A</RadioGroupItem>
+      </RadioGroup>,
+    );
+    expect(ref.current?.getAttribute("data-slot")).toBe("radio-group");
+  });
+});

package/src/ui/radio-group/radio-group.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import {
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "./radio-group-context";
+import type { RadioGroupItemProps, RadioGroupProps } from "./types";
+import {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";
+
+export function RadioGroup(props: RadioGroupProps) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? undefined,
+        size: size ?? undefined,
+        onValueChange: setValue,
+      }}
+    >
+      <div
+        ref={ref}
+        role="radiogroup"
+        data-slot="radio-group"
+        data-orientation={orientation ?? "vertical"}
+        className={cn(radioGroupRootVariants({ orientation }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroup.displayName = "RadioGroup";
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+
+  return (
+    <label
+      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="radio"
+        data-slot="radio-group-item"
+        className="peer sr-only"
+        name={context?.name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}
+        onChange={(event) => {
+          if (event.currentTarget.checked) {
+            context?.onValueChange(value);
+          }
+        }}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          radioGroupControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="radio-group-control"
+      >
+        <span
+          className={cn(
+            radioGroupIndicatorVariants({ size }),
+            indicatorClassName,
+          )}
+          data-slot="radio-group-indicator"
+        />
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="radio-group-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+RadioGroupItem.displayName = "RadioGroupItem";

package/src/ui/radio-group/types.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";
+
+export type RadioGroupRootVariantProps = VariantProps<
+  typeof radioGroupRootVariants
+>;
+export type RadioGroupItemVariantProps = VariantProps<
+  typeof radioGroupItemVariants
+>;
+export type RadioGroupControlVariantProps = VariantProps<
+  typeof radioGroupControlVariants
+>;
+export type RadioGroupIndicatorVariantProps = VariantProps<
+  typeof radioGroupIndicatorVariants
+>;
+
+export type RadioGroupAppearance = NonNullable<
+  RadioGroupControlVariantProps["appearance"]
+>;
+export type RadioGroupSize = NonNullable<RadioGroupItemVariantProps["size"]>;
+
+export type RadioGroupProps = RadioGroupRootVariantProps &
+  Pick<RadioGroupControlVariantProps, "appearance"> &
+  RadioGroupItemVariantProps &
+  Omit<
+    ComponentPropsWithRef<"div">,
+    "defaultValue" | "dir" | "onChange" | "role"
+  > & {
+    value?: string;
+    defaultValue?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    onValueChange?: (value: string) => void;
+  };
+
+export type RadioGroupItemProps = RadioGroupItemVariantProps &
+  RadioGroupControlVariantProps &
+  Omit<
+    ComponentPropsWithRef<"input">,
+    | "type"
+    | "size"
+    | "name"
+    | "checked"
+    | "defaultChecked"
+    | "onChange"
+    | "children"
+  > & {
+    value: string;
+    label?: ReactNode;
+    children?: ReactNode;
+    rootClassName?: string;
+    controlClassName?: string;
+    indicatorClassName?: string;
+  };

package/src/ui/radio-group/variants.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiRadioGroupAppearances,
+  zuiRadioGroupControlBase,
+  zuiRadioGroupIndicatorBase,
+  zuiRadioGroupItemBase,
+  zuiRadioGroupOrientations,
+  zuiRadioGroupRootBase,
+  zuiRadioGroupSizes,
+} from "../../design-system/radio-group";
+
+export const radioGroupRootVariants = cva(zuiRadioGroupRootBase, {
+  variants: {
+    orientation: zuiRadioGroupOrientations,
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export const radioGroupItemVariants = cva(zuiRadioGroupItemBase, {
+  variants: {
+    size: {
+      sm: zuiRadioGroupSizes.sm.item,
+      md: zuiRadioGroupSizes.md.item,
+      lg: zuiRadioGroupSizes.lg.item,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const radioGroupControlVariants = cva(zuiRadioGroupControlBase, {
+  variants: {
+    appearance: zuiRadioGroupAppearances,
+    size: {
+      sm: zuiRadioGroupSizes.sm.control,
+      md: zuiRadioGroupSizes.md.control,
+      lg: zuiRadioGroupSizes.lg.control,
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const radioGroupIndicatorVariants = cva(zuiRadioGroupIndicatorBase, {
+  variants: {
+    size: {
+      sm: zuiRadioGroupSizes.sm.indicator,
+      md: zuiRadioGroupSizes.md.indicator,
+      lg: zuiRadioGroupSizes.lg.indicator,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/ui/select/variants.ts

@@ -1,172 +1,47 @@
 import { cva } from "class-variance-authority";
 
-export const selectTriggerVariants = cva(
-  "flex items-center cursor-pointer justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-gray-300 dark:border-gray-300 bg-white dark:bg-black text-gray-950 dark:text-white",
-        outline: "border-2 border-gray-500 text-gray-950 dark:text-gray-100",
-        ghost: "border-transparent text-gray-950 dark:text-gray-100",
-        sky: "border-sky-800 dark:border-sky-600 text-sky-950 dark:text-sky-600",
-        rose: "border-rose-800 dark:border-rose-600 text-rose-950 dark:text-rose-600",
-        purple:
-          "border-purple-800 dark:border-purple-600 text-purple-950 dark:text-purple-600",
-        pink: "border-pink-800 dark:border-pink-600 text-pink-950 dark:text-pink-600",
-        orange:
-          "border-orange-800 dark:border-orange-600 text-orange-950 dark:text-orange-600",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 text-yellow-950 dark:text-yellow-600",
-        teal: "border-teal-800 dark:border-teal-600 text-teal-950 dark:text-teal-600",
-        indigo: "border-indigo-500 text-indigo-950",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 text-emerald-950 dark:text-emerald-600",
-        glass:
-          "border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-gray-950 dark:text-white backdrop-blur-md",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
-        "gradient-green":
-          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl text-white",
-        "gradient-red":
-          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl text-white",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl text-white",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl text-white",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl text-white",
-      },
-      size: {
-        sm: "px-2 py-1 text-sm",
-        md: "px-3 py-2",
-        lg: "px-4 py-3 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
+import {
+  zuiSelectContentAppearances,
+  zuiSelectContentBase,
+  zuiSelectDisabled,
+  zuiSelectItemAppearances,
+  zuiSelectItemBase,
+  zuiSelectSizes,
+  zuiSelectSpacing,
+  zuiSelectTriggerBase,
+  zuiSelectTriggerVariants,
+} from "../../design-system/select";
+
+export const selectTriggerVariants = cva(zuiSelectTriggerBase, {
+  variants: {
+    variant: zuiSelectTriggerVariants,
+    size: zuiSelectSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
   },
-);
+});
 
-export const selectItemVariants = cva(
-  "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-inset",
-  {
-    variants: {
-      appearance: {
-        default:
-          "bg-white dark:bg-black text-gray-900 dark:text-gray-200 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
-        glass:
-          "bg-black/10 dark:bg-white/10 text-gray-700 dark:text-gray-900 data-[selected=true]:bg-black/10 dark:data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
-        outline:
-          "border-2 border-gray-500 text-gray-900 dark:text-gray-100 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-900",
-        ghost:
-          "border-transparent text-gray-900 dark:text-gray-100 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-100",
-        sky: "border-sky-900 dark:border-sky-600 text-sky-900 dark:text-sky-200 data-[selected=true]:border-sky-900 dark:data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-900 dark:data-[selected=true]:text-sky-900",
-        rose: "border-rose-900 dark:border-rose-600 text-rose-900 dark:text-rose-200 data-[selected=true]:border-rose-900 dark:data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-900 dark:data-[selected=true]:text-rose-900",
-        purple:
-          "border-purple-900 dark:border-purple-600 text-purple-900 dark:text-purple-200 data-[selected=true]:border-purple-900 dark:data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-900 dark:data-[selected=true]:text-purple-900",
-        pink: "border-pink-900 dark:border-pink-600 text-pink-900 dark:text-pink-200 data-[selected=true]:border-pink-900 dark:data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-900 dark:data-[selected=true]:text-pink-900",
-        orange:
-          "border-orange-900 dark:border-orange-600 text-orange-900 dark:text-orange-200 data-[selected=true]:border-orange-900 dark:data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-900 dark:data-[selected=true]:text-orange-900",
-        yellow:
-          "border-yellow-900 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200 data-[selected=true]:border-yellow-900 dark:data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-900 dark:data-[selected=true]:text-yellow-900",
-        teal: "border-teal-900 dark:border-teal-600 text-teal-900 dark:text-teal-200 data-[selected=true]:border-teal-900 dark:data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-900 dark:data-[selected=true]:text-teal-900",
-        indigo:
-          "border-indigo-900 dark:border-indigo-600 text-indigo-900 dark:text-indigo-200 data-[selected=true]:border-indigo-900 dark:data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-900 dark:data-[selected=true]:text-indigo-900",
-        emerald:
-          "border-emerald-900 dark:border-emerald-600 text-emerald-900 dark:text-emerald-200 data-[selected=true]:border-emerald-900 dark:data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-900 dark:data-[selected=true]:text-emerald-900",
-        "gradient-blue":
-          "bg-transparent backdrop-blur-xl text-blue-50 dark:text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-50 dark:data-[selected=true]:from-blue-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-blue-900",
-        "gradient-green":
-          "bg-transparent backdrop-blur-xl text-green-50 dark:text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-50 dark:data-[selected=true]:from-green-50 data-[selected=true]:to-lime-50 dark:data-[selected=true]:to-lime-50 data-[selected=true]:text-green-900",
-        "gradient-red":
-          "bg-transparent backdrop-blur-xl text-red-50 dark:text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-50 dark:data-[selected=true]:from-red-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-red-900",
-        "gradient-yellow":
-          "bg-transparent backdrop-blur-xl text-yellow-50 dark:text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-50 dark:data-[selected=true]:from-yellow-50 data-[selected=true]:to-orange-50 dark:data-[selected=true]:to-orange-50 data-[selected=true]:text-yellow-900",
-        "gradient-purple":
-          "bg-transparent backdrop-blur-xl text-purple-50 dark:text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-50 dark:data-[selected=true]:from-purple-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-purple-900",
-        "gradient-teal":
-          "bg-transparent backdrop-blur-xl text-teal-50 dark:text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-50 dark:data-[selected=true]:from-teal-50 data-[selected=true]:to-cyan-50 dark:data-[selected=true]:to-cyan-50 data-[selected=true]:text-teal-900",
-        "gradient-indigo":
-          "bg-transparent backdrop-blur-xl text-indigo-50 dark:text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-50 dark:data-[selected=true]:from-indigo-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-indigo-900",
-        "gradient-pink":
-          "bg-transparent backdrop-blur-xl text-pink-50 dark:text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-50 dark:data-[selected=true]:from-pink-50 data-[selected=true]:to-rose-50 dark:data-[selected=true]:to-rose-50 data-[selected=true]:text-pink-900",
-        "gradient-orange":
-          "bg-transparent backdrop-blur-xl text-orange-50 dark:text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-50 dark:data-[selected=true]:from-orange-50 data-[selected=true]:to-red-50 dark:data-[selected=true]:to-red-50 data-[selected=true]:text-orange-900",
-      },
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-    },
+export const selectItemVariants = cva(zuiSelectItemBase, {
+  variants: {
+    appearance: zuiSelectItemAppearances,
+    disabled: zuiSelectDisabled,
   },
-);
+  defaultVariants: {
+    appearance: "default",
+  },
+});
 
-export const selectContentVariants = cva(
-  "absolute z-10 mt-2 w-full rounded-md border bg-white dark:bg-black shadow-md",
-  {
-    variants: {
-      appearance: {
-        default: "bg-white dark:bg-black shadow-md",
-        glass: "bg-black/10 dark:bg-white/10 backdrop-blur-md",
-        outline: "border-2 border-gray-500",
-        ghost: "border-transparent",
-        sky: "border-sky-900 dark:border-sky-600",
-        rose: "border-rose-900 dark:border-rose-600",
-        purple: "border-purple-900 dark:border-purple-600",
-        pink: "border-pink-900 dark:border-pink-600",
-        orange: "border-orange-900 dark:border-orange-600",
-        yellow: "border-yellow-900 dark:border-yellow-600",
-        teal: "border-teal-900 dark:border-teal-600",
-        indigo: "border-indigo-900 dark:border-indigo-600",
-        emerald: "border-emerald-900 dark:border-emerald-600",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
-        "gradient-green":
-          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl",
-        "gradient-red":
-          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl",
-      },
-      size: {
-        sm: "px-2 py-1 text-sm",
-        md: "px-3 py-2",
-        lg: "px-4 py-3 text-lg",
-      },
-      spacing: {
-        none: "space-y-0",
-        default: "space-y-1",
-        sm: "space-y-2",
-        md: "space-y-3",
-        lg: "space-y-4",
-        xl: "space-y-5",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      spacing: "default",
-    },
+export const selectContentVariants = cva(zuiSelectContentBase, {
+  variants: {
+    appearance: zuiSelectContentAppearances,
+    size: zuiSelectSizes,
+    spacing: zuiSelectSpacing,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default",
   },
-);
+});