@etus/ui 0.1.0

package/src/components/forms/NativeSelect/NativeSelect.tsx

@@ -0,0 +1,75 @@
+import type {
+  NativeSelectOptGroupProps,
+  NativeSelectOptionProps,
+  NativeSelectProps,
+} from "./NativeSelect.types"
+
+import { ChevronDownIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  nativeSelectIconVariants,
+  nativeSelectLeftIconVariants,
+  nativeSelectVariants,
+  nativeSelectWithLeftIconPadding,
+  nativeSelectWrapperVariants,
+} from "./NativeSelect.variants"
+
+function NativeSelect({
+  className,
+  size = "md",
+  variant,
+  leftIcon,
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(nativeSelectWrapperVariants())}
+      data-slot="native-select-wrapper"
+    >
+      {leftIcon && (
+        <span
+          aria-hidden="true"
+          className={cn(nativeSelectLeftIconVariants({ size }))}
+          data-slot="native-select-left-icon"
+        >
+          {leftIcon}
+        </span>
+      )}
+      <select
+        className={cn(
+          nativeSelectVariants({ size, variant }),
+          leftIcon && nativeSelectWithLeftIconPadding[size],
+          className
+        )}
+        data-slot="native-select"
+        {...props}
+      />
+      <ChevronDownIcon
+        aria-hidden="true"
+        className={cn(nativeSelectIconVariants({ size }))}
+        data-slot="native-select-icon"
+      />
+    </div>
+  )
+}
+
+function NativeSelectOption({ ...props }: NativeSelectOptionProps) {
+  return <option data-slot="native-select-option" {...props} />
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: NativeSelectOptGroupProps) {
+  return (
+    <optgroup
+      className={cn(className)}
+      data-slot="native-select-optgroup"
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

package/src/components/forms/NativeSelect/NativeSelect.types.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react"
+
+export type NativeSelectSize = "lg" | "md" | "sm" | "xl" | "xs"
+export type NativeSelectVariant = "default" | "filled" | "flushed" | "unstyled"
+
+export interface NativeSelectProps extends Omit<ComponentProps<"select">, "size"> {
+  /**
+   * Icon to display on the left side of the select
+   */
+  leftIcon?: ReactNode
+  size?: NativeSelectSize
+  variant?: NativeSelectVariant
+}
+
+export interface NativeSelectOptionProps extends ComponentProps<"option"> {}
+
+export interface NativeSelectOptGroupProps extends ComponentProps<"optgroup"> {}

package/src/components/forms/NativeSelect/NativeSelect.variants.ts

@@ -0,0 +1,106 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * NativeSelect variant styles using CVA
+ */
+export const nativeSelectVariants = cva(
+  // Base styles
+  [
+    "w-full min-w-0 appearance-none rounded-md border bg-transparent transition-[color,box-shadow] outline-none",
+    "placeholder:text-muted-foreground",
+    "selection:bg-primary selection:text-primary-foreground",
+    "dark:bg-input/30 dark:hover:bg-input/50",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-7 px-2 py-0.5 pr-7 text-xs",
+        sm: "h-8 px-2.5 py-1 pr-8 text-sm",
+        md: "h-9 px-3 py-1 pr-9 text-base md:text-sm",
+        lg: "h-10 px-3.5 py-1.5 pr-10 text-base",
+        xl: "h-12 px-4 py-2 pr-11 text-lg",
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0 pr-7",
+        unstyled: "border-0 bg-transparent p-0 pr-6 shadow-none focus-visible:ring-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Wrapper styles for the NativeSelect container
+ */
+export const nativeSelectWrapperVariants = cva(
+  "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+)
+
+/**
+ * Icon styles based on size
+ */
+export const nativeSelectIconVariants = cva(
+  "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none",
+  {
+    variants: {
+      size: {
+        xs: "right-2 size-3",
+        sm: "right-2.5 size-3.5",
+        md: "right-3 size-4",
+        lg: "right-3.5 size-4",
+        xl: "right-4 size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * Left icon styles based on size
+ */
+export const nativeSelectLeftIconVariants = cva(
+  "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-70 select-none",
+  {
+    variants: {
+      size: {
+        xs: "left-2 size-3",
+        sm: "left-2.5 size-3.5",
+        md: "left-3 size-4",
+        lg: "left-3.5 size-4",
+        xl: "left-4 size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * Additional padding-left when leftIcon is present
+ */
+export const nativeSelectWithLeftIconPadding: Record<NativeSelectSize, string> = {
+  xs: "pl-7",
+  sm: "pl-8",
+  md: "pl-9",
+  lg: "pl-10",
+  xl: "pl-11",
+}
+
+type NativeSelectSize = "lg" | "md" | "sm" | "xl" | "xs"
+
+export type NativeSelectVariantProps = VariantProps<typeof nativeSelectVariants>