banhaten 0.3.0 → 0.5.0

package/registry/components/native-select.tsx

@@ -1,205 +1,205 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { ChevronDownIcon, InfoIcon } from "lucide-react"
-
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
-
-type NativeSelectSize = "md" | "lg"
-type NativeSelectState = "default" | "filled" | "error" | "disabled"
-type NativeSelectVariant = "default" | "soft"
-
-type NativeSelectOption = {
-  disabled?: boolean
-  label: React.ReactNode
-  value: string
-}
-
-type NativeSelectProps = Omit<
-  React.ComponentProps<"select">,
-  "children" | "className" | "dir" | "size"
-> &
-  VariantProps<typeof nativeSelectControlVariants> & {
-    children?: React.ReactNode
-    className?: string
-    errorMessage?: React.ReactNode
-    hasHelperText?: boolean
-    helperText?: React.ReactNode
-    isOptional?: boolean
-    isRequired?: boolean
-    label?: React.ReactNode
-    options?: NativeSelectOption[]
-    optionalText?: React.ReactNode
-    rootClassName?: string
-    selectClassName?: string
-    state?: NativeSelectState
-    triggerId?: string
-    dir?: "ltr" | "rtl" | "auto"
-  }
-
-const nativeSelectRootVariants = cva(
-  "grid w-[var(--bh-select-width)] max-w-full gap-[var(--bh-select-field-gap)]"
-)
-
-const nativeSelectControlVariants = cva(
-  [
-    "relative grid w-full rounded-[var(--bh-select-trigger-radius)]",
-    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
-    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)] transition-[background-color,box-shadow]",
-    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--shadow-select-focus-ring)]",
-  ],
-  {
-    variants: {
-      size: {
-        lg: "min-h-[var(--bh-input-lg-height)]",
-        md: "min-h-[var(--bh-input-md-height)]",
-      },
-      state: {
-        default: "",
-        filled: "",
-        error:
-          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-within:shadow-[var(--shadow-select-danger-focus-ring)]",
-        disabled:
-          "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
-      },
-      variant: {
-        default: "",
-        soft: "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
-      },
-    },
-    defaultVariants: {
-      size: "lg",
-      state: "default",
-      variant: "default",
-    },
-  }
-)
-
-const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
-  function NativeSelect(
-    {
-      children,
-      className,
-      disabled,
-      errorMessage,
-      hasHelperText,
-      helperText,
-      isOptional = false,
-      isRequired = false,
-      label,
-      options,
-      optionalText,
-      rootClassName,
-      selectClassName,
-      size = "lg",
-      state = "default",
-      triggerId,
-      variant = "default",
-      dir,
-      ...props
-    },
-    ref
-  ) {
-    const generatedId = React.useId()
-    const selectId = triggerId ?? generatedId
-    const helperId = `${selectId}-helper`
-    const visualState = disabled ? "disabled" : state
-    const helper = visualState === "error" ? errorMessage : helperText
-    const shouldRenderHelper = hasHelperText ?? Boolean(helper)
-
-    return (
-      <div
-        data-slot="native-select-root"
-        dir={dir}
-        className={cn(nativeSelectRootVariants({ className: rootClassName }))}
-      >
-        {label ? (
-          <Label
-            htmlFor={selectId}
-            optionalText={optionalText}
-            required={isRequired}
-            data-optional={isOptional ? "true" : undefined}
-          >
-            {label}
-          </Label>
-        ) : null}
-        <div
-          data-slot="native-select-control"
-          className={cn(
-            nativeSelectControlVariants({
-              size,
-              state: visualState,
-              variant,
-              className,
-            })
-          )}
-        >
-          <select
-            aria-describedby={shouldRenderHelper ? helperId : undefined}
-            aria-invalid={visualState === "error" || undefined}
-            data-slot="native-select"
-            disabled={disabled}
-            id={selectId}
-            ref={ref}
-            className={cn(
-              "min-h-[inherit] w-full appearance-none border-0 bg-transparent py-[var(--bh-space-sm-6)] ps-[var(--bh-select-trigger-padding-x)] pe-[var(--bh-space-8xl-48)] text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
-              selectClassName
-            )}
-            {...props}
-          >
-            {options?.map((option) => (
-              <option
-                disabled={option.disabled}
-                key={option.value}
-                value={option.value}
-              >
-                {option.label}
-              </option>
-            ))}
-            {children}
-          </select>
-          <ChevronDownIcon
-            aria-hidden="true"
-            className="pointer-events-none absolute end-[var(--bh-select-trigger-padding-x)] top-1/2 size-[var(--bh-space-3xl-16)] -translate-y-1/2 text-[var(--bh-select-trigger-icon-color)]"
-            strokeWidth="var(--bh-icon-stroke-200)"
-          />
-        </div>
-        {shouldRenderHelper ? (
-          <p
-            data-slot="native-select-helper"
-            dir="auto"
-            id={helperId}
-            className={cn(
-              "m-0 inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
-              visualState === "error"
-                ? "text-[var(--bh-content-danger-default)]"
-                : "text-[var(--bh-content-subtle)]"
-            )}
-          >
-            <InfoIcon
-              aria-hidden="true"
-              className="size-[var(--bh-space-3xl-16)] shrink-0"
-              strokeWidth="var(--bh-icon-stroke-200)"
-            />
-            {helper}
-          </p>
-        ) : null}
-      </div>
-    )
-  }
-)
-
-export {
-  NativeSelect,
-  nativeSelectControlVariants,
-  nativeSelectRootVariants,
-}
-export type {
-  NativeSelectOption,
-  NativeSelectProps,
-  NativeSelectSize,
-  NativeSelectState,
-  NativeSelectVariant,
-}
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronDownIcon, InfoIcon } from "lucide-react"
+
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+type NativeSelectSize = "md" | "lg"
+type NativeSelectState = "default" | "filled" | "error" | "disabled"
+type NativeSelectVariant = "default" | "soft"
+
+type NativeSelectOption = {
+  disabled?: boolean
+  label: React.ReactNode
+  value: string
+}
+
+type NativeSelectProps = Omit<
+  React.ComponentProps<"select">,
+  "children" | "className" | "dir" | "size"
+> &
+  VariantProps<typeof nativeSelectControlVariants> & {
+    children?: React.ReactNode
+    className?: string
+    errorMessage?: React.ReactNode
+    hasHelperText?: boolean
+    helperText?: React.ReactNode
+    isOptional?: boolean
+    isRequired?: boolean
+    label?: React.ReactNode
+    options?: NativeSelectOption[]
+    optionalText?: React.ReactNode
+    rootClassName?: string
+    selectClassName?: string
+    state?: NativeSelectState
+    triggerId?: string
+    dir?: "ltr" | "rtl" | "auto"
+  }
+
+const nativeSelectRootVariants = cva(
+  "grid w-[var(--bh-select-width)] max-w-full gap-[var(--bh-select-field-gap)]"
+)
+
+const nativeSelectControlVariants = cva(
+  [
+    "relative grid w-full rounded-[var(--bh-select-trigger-radius)]",
+    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--elevation-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--elevation-component-default)]",
+    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--elevation-select-trigger)] transition-[background-color,box-shadow]",
+    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--elevation-select-focus-ring)]",
+  ],
+  {
+    variants: {
+      size: {
+        lg: "min-h-[var(--bh-input-lg-height)]",
+        md: "min-h-[var(--bh-input-md-height)]",
+      },
+      state: {
+        default: "",
+        filled: "",
+        error:
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--elevation-select-trigger)] focus-within:shadow-[var(--elevation-select-danger-focus-ring)]",
+        disabled:
+          "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
+      },
+      variant: {
+        default: "",
+        soft: "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      state: "default",
+      variant: "default",
+    },
+  }
+)
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  function NativeSelect(
+    {
+      children,
+      className,
+      disabled,
+      errorMessage,
+      hasHelperText,
+      helperText,
+      isOptional = false,
+      isRequired = false,
+      label,
+      options,
+      optionalText,
+      rootClassName,
+      selectClassName,
+      size = "lg",
+      state = "default",
+      triggerId,
+      variant = "default",
+      dir,
+      ...props
+    },
+    ref
+  ) {
+    const generatedId = React.useId()
+    const selectId = triggerId ?? generatedId
+    const helperId = `${selectId}-helper`
+    const visualState = disabled ? "disabled" : state
+    const helper = visualState === "error" ? errorMessage : helperText
+    const shouldRenderHelper = hasHelperText ?? Boolean(helper)
+
+    return (
+      <div
+        data-slot="native-select-root"
+        dir={dir}
+        className={cn(nativeSelectRootVariants({ className: rootClassName }))}
+      >
+        {label ? (
+          <Label
+            htmlFor={selectId}
+            optionalText={optionalText}
+            required={isRequired}
+            data-optional={isOptional ? "true" : undefined}
+          >
+            {label}
+          </Label>
+        ) : null}
+        <div
+          data-slot="native-select-control"
+          className={cn(
+            nativeSelectControlVariants({
+              size,
+              state: visualState,
+              variant,
+              className,
+            })
+          )}
+        >
+          <select
+            aria-describedby={shouldRenderHelper ? helperId : undefined}
+            aria-invalid={visualState === "error" || undefined}
+            data-slot="native-select"
+            disabled={disabled}
+            id={selectId}
+            ref={ref}
+            className={cn(
+              "min-h-[inherit] w-full appearance-none border-0 bg-transparent py-[var(--bh-space-sm-6)] ps-[var(--bh-select-trigger-padding-x)] pe-[var(--bh-space-8xl-48)] text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+              selectClassName
+            )}
+            {...props}
+          >
+            {options?.map((option) => (
+              <option
+                disabled={option.disabled}
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </option>
+            ))}
+            {children}
+          </select>
+          <ChevronDownIcon
+            aria-hidden="true"
+            className="pointer-events-none absolute end-[var(--bh-select-trigger-padding-x)] top-1/2 size-[var(--bh-space-3xl-16)] -translate-y-1/2 text-[var(--bh-select-trigger-icon-color)]"
+            strokeWidth="var(--bh-icon-stroke-200)"
+          />
+        </div>
+        {shouldRenderHelper ? (
+          <p
+            data-slot="native-select-helper"
+            dir="auto"
+            id={helperId}
+            className={cn(
+              "m-0 inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+              visualState === "error"
+                ? "text-[var(--bh-content-danger-default)]"
+                : "text-[var(--bh-content-subtle)]"
+            )}
+          >
+            <InfoIcon
+              aria-hidden="true"
+              className="size-[var(--bh-space-3xl-16)] shrink-0"
+              strokeWidth="var(--bh-icon-stroke-200)"
+            />
+            {helper}
+          </p>
+        ) : null}
+      </div>
+    )
+  }
+)
+
+export {
+  NativeSelect,
+  nativeSelectControlVariants,
+  nativeSelectRootVariants,
+}
+export type {
+  NativeSelectOption,
+  NativeSelectProps,
+  NativeSelectSize,
+  NativeSelectState,
+  NativeSelectVariant,
+}