banhaten 0.3.0 → 0.5.0

package/registry/components/input-group.tsx

@@ -1,130 +1,130 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { Button, type ButtonProps } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-const inputGroupVariants = cva(
-  [
-    "group/input-group relative flex w-[var(--bh-input-width)] max-w-full items-stretch overflow-hidden rounded-[var(--bh-input-radius)]",
-    "[--bh-input-border:var(--bh-border-input)] [--shadow-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "bg-[var(--bh-interactive-input-default)] shadow-[var(--shadow-input)] transition-[background-color,box-shadow]",
-    "focus-within:shadow-[var(--shadow-input-focus-ring)] data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
-  ],
-  {
-    variants: {
-      size: {
-        md: "min-h-[var(--bh-input-md-height)]",
-        lg: "min-h-[var(--bh-input-lg-height)]",
-      },
-      state: {
-        default: "",
-        error:
-          "[--bh-input-border:var(--bh-border-danger-strong)] focus-within:shadow-[var(--shadow-input)]",
-      },
-      variant: {
-        default: "",
-        soft: "bg-[var(--bh-interactive-input-soft)] shadow-none",
-      },
-    },
-    defaultVariants: {
-      size: "lg",
-      state: "default",
-      variant: "default",
-    },
-  }
-)
-
-type InputGroupProps = React.ComponentProps<"div"> &
-  VariantProps<typeof inputGroupVariants> & {
-    disabled?: boolean
-  }
-type InputGroupInputProps = React.ComponentProps<"input">
-type InputGroupAddonProps = React.ComponentProps<"span"> & {
-  asChild?: boolean
-}
-type InputGroupButtonProps = ButtonProps
-
-function InputGroup({
-  className,
-  disabled = false,
-  size,
-  state,
-  variant,
-  ...props
-}: InputGroupProps) {
-  return (
-    <div
-      data-disabled={disabled ? "true" : undefined}
-      data-slot="input-group"
-      className={cn(inputGroupVariants({ size, state, variant, className }))}
-      {...props}
-    />
-  )
-}
-
-const InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(
-  function InputGroupInput({ className, ...props }, ref) {
-    return (
-      <input
-        data-slot="input-group-input"
-        ref={ref}
-        className={cn(
-          "min-w-0 flex-1 border-0 bg-transparent px-[var(--bh-input-lg-padding-x)] py-[var(--bh-space-sm-6)] 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 placeholder:text-[var(--bh-content-muted)] disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const InputGroupAddon = React.forwardRef<HTMLSpanElement, InputGroupAddonProps>(
-  function InputGroupAddon({ asChild = false, className, ...props }, ref) {
-    const Comp = asChild ? Slot : "span"
-
-    return (
-      <Comp
-        data-slot="input-group-addon"
-        ref={ref}
-        className={cn(
-          "inline-flex shrink-0 items-center gap-[var(--bh-space-xs-4)] border-e border-[var(--bh-border-input)] px-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-subtle)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(
-  function InputGroupButton({ className, size = "sm", variant = "ghost", ...props }, ref) {
-    return (
-      <Button
-        data-slot="input-group-button"
-        ref={ref}
-        size={size}
-        variant={variant}
-        className={cn("m-[var(--bh-space-xs-4)] shrink-0", className)}
-        {...props}
-      />
-    )
-  }
-)
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  inputGroupVariants,
-}
-export type {
-  InputGroupAddonProps,
-  InputGroupButtonProps,
-  InputGroupInputProps,
-  InputGroupProps,
-}
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+const inputGroupVariants = cva(
+  [
+    "group/input-group relative flex w-[var(--bh-input-width)] max-w-full items-stretch overflow-hidden rounded-[var(--bh-input-radius)]",
+    "[--bh-input-border:var(--bh-border-input)] [--elevation-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--elevation-component-default)]",
+    "bg-[var(--bh-interactive-input-default)] shadow-[var(--elevation-input)] transition-[background-color,box-shadow]",
+    "focus-within:shadow-[var(--elevation-input-focus-ring)] data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+  ],
+  {
+    variants: {
+      size: {
+        md: "min-h-[var(--bh-input-md-height)]",
+        lg: "min-h-[var(--bh-input-lg-height)]",
+      },
+      state: {
+        default: "",
+        error:
+          "[--bh-input-border:var(--bh-border-danger-strong)] focus-within:shadow-[var(--elevation-input)]",
+      },
+      variant: {
+        default: "",
+        soft: "bg-[var(--bh-interactive-input-soft)] shadow-none",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      state: "default",
+      variant: "default",
+    },
+  }
+)
+
+type InputGroupProps = React.ComponentProps<"div"> &
+  VariantProps<typeof inputGroupVariants> & {
+    disabled?: boolean
+  }
+type InputGroupInputProps = React.ComponentProps<"input">
+type InputGroupAddonProps = React.ComponentProps<"span"> & {
+  asChild?: boolean
+}
+type InputGroupButtonProps = ButtonProps
+
+function InputGroup({
+  className,
+  disabled = false,
+  size,
+  state,
+  variant,
+  ...props
+}: InputGroupProps) {
+  return (
+    <div
+      data-disabled={disabled ? "true" : undefined}
+      data-slot="input-group"
+      className={cn(inputGroupVariants({ size, state, variant, className }))}
+      {...props}
+    />
+  )
+}
+
+const InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(
+  function InputGroupInput({ className, ...props }, ref) {
+    return (
+      <input
+        data-slot="input-group-input"
+        ref={ref}
+        className={cn(
+          "min-w-0 flex-1 border-0 bg-transparent px-[var(--bh-input-lg-padding-x)] py-[var(--bh-space-sm-6)] 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 placeholder:text-[var(--bh-content-muted)] disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const InputGroupAddon = React.forwardRef<HTMLSpanElement, InputGroupAddonProps>(
+  function InputGroupAddon({ asChild = false, className, ...props }, ref) {
+    const Comp = asChild ? Slot : "span"
+
+    return (
+      <Comp
+        data-slot="input-group-addon"
+        ref={ref}
+        className={cn(
+          "inline-flex shrink-0 items-center gap-[var(--bh-space-xs-4)] border-e border-[var(--bh-border-input)] px-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-subtle)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(
+  function InputGroupButton({ className, size = "sm", variant = "ghost", ...props }, ref) {
+    return (
+      <Button
+        data-slot="input-group-button"
+        ref={ref}
+        size={size}
+        variant={variant}
+        className={cn("m-[var(--bh-space-xs-4)] shrink-0", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  inputGroupVariants,
+}
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+}