banhaten 0.1.0 → 0.1.2

package/registry/components/input.tsx

@@ -1,5 +1,12 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
+import {
+  AtSignIcon,
+  ChevronDownIcon,
+  InfoIcon,
+  MinusIcon as LucideMinusIcon,
+  PlusIcon as LucidePlusIcon,
+} from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -85,7 +92,13 @@ const inputSurface = cva(
     "group/input-surface relative flex w-full overflow-hidden rounded-[var(--bh-input-radius)]",
     "transition-[background-color,box-shadow]",
     "[--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)]",
-    "focus-within:shadow-[var(--shadow-input-focus-ring)]",
+    "[--shadow-input-surface:var(--shadow-component-default)]",
+    "[--shadow-input-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input))]",
+    "[--shadow-input-focus-surface:0px_0px_0px_var(--bh-focus-ring-width)_color-mix(in_srgb,var(--bh-border-focus)_30%,transparent)]",
+    "[--shadow-input-focus-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-focus)]",
+    "[--shadow-input-disabled-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+    "after:pointer-events-none after:absolute after:inset-0 after:z-[var(--bh-z-raised)] after:rounded-[inherit] after:[box-shadow:var(--shadow-input-overlay)] after:content-['']",
+    "focus-within:shadow-[var(--shadow-input-focus-surface)] focus-within:after:[box-shadow:var(--shadow-input-focus-overlay)]",
   ],
   {
     variants: {
@@ -99,13 +112,13 @@ const inputSurface = cva(
       },
       state: {
         default:
-          "shadow-[var(--shadow-input)]",
+          "shadow-[var(--shadow-input-surface)]",
         filled:
-          "shadow-[var(--shadow-input)]",
+          "shadow-[var(--shadow-input-surface)]",
         error:
-          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input)] focus-within:shadow-[var(--shadow-input)]",
+          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input-surface)] focus-within:shadow-[var(--shadow-input-surface)] focus-within:after:[box-shadow:var(--shadow-input-overlay)]",
         disabled:
-          "bg-[var(--bh-interactive-input-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+          "[--bh-input-border:var(--bh-border-disabled)] bg-[var(--bh-interactive-input-disabled)] shadow-none after:[box-shadow:var(--shadow-input-disabled-overlay)]",
       },
     },
     compoundVariants: [
@@ -178,7 +191,7 @@ const inputTag = cva(
 const inputSegment = cva(
   [
     "inline-flex h-full shrink-0 items-center justify-center gap-[var(--bh-input-segment-gap)]",
-    "bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-segment-padding-x)]",
+    "bg-transparent px-[var(--bh-input-segment-padding-x)]",
     "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)]",
@@ -199,7 +212,7 @@ const inputSegment = cva(
       },
       disabled: {
         true:
-          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]",
+          "border-[var(--bh-border-disabled)] text-[var(--bh-content-disabled)]",
         false: "",
       },
     },
@@ -211,6 +224,27 @@ const inputSegment = cva(
   }
 )
 
+const inputStepperButton = cva(
+  [
+    "inline-flex h-full w-[var(--bh-input-stepper-width,var(--bh-input-lg-height))] shrink-0 items-center justify-center",
+    "bg-transparent text-[var(--bh-content-subtle)]",
+    "outline-none transition-[background-color,color]",
+    "hover:bg-[var(--bh-interactive-secondary-hover)] focus-visible:bg-[var(--bh-interactive-secondary-hover)]",
+    "disabled:border-[var(--bh-border-disabled)] disabled:bg-transparent disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      side: {
+        leading: "border-e border-[var(--bh-border-input)]",
+        trailing: "border-s border-[var(--bh-border-input)]",
+      },
+    },
+    defaultVariants: {
+      side: "trailing",
+    },
+  }
+)
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
@@ -352,6 +386,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
+              size,
               trailingAddon,
             })}
 
@@ -414,6 +449,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
+              size,
               trailingAddon,
             })}
           </div>
@@ -552,7 +588,14 @@ function InputLeadingIcon({
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >
-      {icon || <span className="text-[length:var(--bh-input-leading-symbol-font-size)] leading-none">@</span>}
+      {icon || (
+        <AtSignIcon
+          aria-hidden="true"
+          className="size-[var(--bh-input-icon-size)]"
+          focusable="false"
+          strokeWidth={2.25}
+        />
+      )}
     </span>
   )
 }
@@ -577,17 +620,12 @@ function InputInfoIcon({
       )}
     >
       {icon || (
-        <svg
+        <InfoIcon
+          aria-hidden="true"
           className="size-[var(--bh-input-info-icon-size)]"
-          fill="none"
           focusable="false"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667ZM8 6.33333C8.55227 6.33333 9 5.88562 9 5.33333C9 4.78105 8.55227 4.33333 8 4.33333C7.44773 4.33333 7 4.78105 7 5.33333C7 5.88562 7.44773 6.33333 8 6.33333ZM9.33333 10H8.66667V7H6.66667V8.33333H7.33333V10H6.66667V11.3333H9.33333V10Z"
-            fill="currentColor"
-          />
-        </svg>
+          strokeWidth={2.25}
+        />
       )}
     </span>
   )
@@ -699,12 +737,46 @@ function InputSegment({
   )
 }
 
+function InputStepperButton({
+  children,
+  disabled,
+  label,
+  side,
+  size,
+}: {
+  children: React.ReactNode
+  disabled: boolean
+  label: string
+  side: "leading" | "trailing"
+  size: InputSize
+}) {
+  return (
+    <button
+      aria-label={label}
+      data-side={side}
+      data-slot="input-stepper-button"
+      disabled={disabled}
+      type="button"
+      className={cn(
+        inputStepperButton({ side }),
+        size === "md" && "w-[var(--bh-input-md-height)]"
+      )}
+      onClick={(event) => {
+        event.stopPropagation()
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
 type InputSegmentRenderContext = {
   buttonLabel?: React.ReactNode
   disabled: boolean
   kind: InputKind
   leadingAddon?: React.ReactNode
   quantityLabel?: React.ReactNode
+  size: InputSize
   trailingAddon?: React.ReactNode
 }
 
@@ -731,13 +803,25 @@ const leadingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>>
       <ChevronIcon />
     </InputSegment>
   ),
-  "quantity-2": ({ disabled, quantityLabel }) => (
-    <InputSegment disabled={disabled} interactive side="leading">
+  quantity: ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Decrease", quantityLabel)}
+      side="leading"
+      size={size}
+    >
       <MinusIcon />
-      {hasRenderableContent(quantityLabel) ? (
-        <span className="sr-only">{quantityLabel}</span>
-      ) : null}
-    </InputSegment>
+    </InputStepperButton>
+  ),
+  "quantity-2": ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Decrease", quantityLabel)}
+      side="leading"
+      size={size}
+    >
+      <MinusIcon />
+    </InputStepperButton>
   ),
 }
 
@@ -760,17 +844,25 @@ const trailingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>>
       <ChevronIcon />
     </InputSegment>
   ),
-  quantity: ({ disabled }) => (
-    <InputSegment disabled={disabled} interactive side="trailing">
-      <MinusIcon />
+  quantity: ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Increase", quantityLabel)}
+      side="trailing"
+      size={size}
+    >
       <PlusIcon />
-    </InputSegment>
+    </InputStepperButton>
   ),
-  "quantity-2": ({ disabled }) => (
-    <InputSegment disabled={disabled} interactive side="trailing">
-      <MinusIcon />
+  "quantity-2": ({ disabled, quantityLabel, size }) => (
+    <InputStepperButton
+      disabled={disabled}
+      label={formatStepperLabel("Increase", quantityLabel)}
+      side="trailing"
+      size={size}
+    >
       <PlusIcon />
-    </InputSegment>
+    </InputStepperButton>
   ),
 }
 
@@ -782,51 +874,42 @@ function renderTrailingSegment(context: InputSegmentRenderContext) {
   return trailingSegmentRenderers[context.kind]?.(context) ?? null
 }
 
+function formatStepperLabel(action: "Decrease" | "Increase", quantityLabel?: React.ReactNode) {
+  return typeof quantityLabel === "string" && quantityLabel.trim()
+    ? `${action} ${quantityLabel}`
+    : action
+}
+
 function ChevronIcon() {
   return (
-    <svg
+    <ChevronDownIcon
       aria-hidden="true"
       className="size-[var(--bh-input-chevron-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M8 10.6667L4 6.66667L4.93333 5.73333L8 8.8L11.0667 5.73333L12 6.66667L8 10.6667Z"
-        fill="currentColor"
-      />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
 function MinusIcon() {
   return (
-    <svg
+    <LucideMinusIcon
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path d="M3.33333 7.33333H12.6667V8.66667H3.33333V7.33333Z" fill="currentColor" />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
 function PlusIcon() {
   return (
-    <svg
+    <LucidePlusIcon
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
-      fill="none"
       focusable="false"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M7.33333 7.33333V3.33333H8.66667V7.33333H12.6667V8.66667H8.66667V12.6667H7.33333V8.66667H3.33333V7.33333H7.33333Z"
-        fill="currentColor"
-      />
-    </svg>
+      strokeWidth={2.25}
+    />
   )
 }
 
@@ -836,10 +919,6 @@ function shouldRenderLeadingIcon(kind: InputKind) {
     "shortcut",
     "tags",
     "inline-tags",
-    "trailing-dropdown",
-    "leading-dropdown",
-    "trailing-button",
-    "leading-button",
   ].includes(kind)
 }
 
@@ -848,6 +927,8 @@ function shouldRenderInfoIcon(kind: InputKind, hasInformationIcon: boolean) {
 
   return ![
     "shortcut",
+    "leading-dropdown",
+    "leading-button",
     "trailing-dropdown",
     "trailing-button",
     "quantity",