banhaten 0.1.0

package/registry/components/input.tsx

@@ -0,0 +1,866 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import {
+  getInputDefaultValue,
+  getInputHelperText,
+  getInputPlaceholder,
+  getInputTags,
+  inputCopy,
+  type InputKind,
+  type InputTag,
+  type InputVisualState,
+} from "./input-content"
+
+type InputSize = "md" | "lg"
+type InputVariant = "default" | "soft"
+
+type InputNativeProps = Omit<
+  React.ComponentProps<"input">,
+  "className" | "dir" | "size"
+>
+
+type InputModeRenderProps = {
+  buttonLabel?: React.ReactNode
+  inlineLeadingAddon?: React.ReactNode
+  inlineTagsClassName?: string
+  inlineTrailingAddon?: React.ReactNode
+  leadingAddon?: React.ReactNode
+  quantityLabel?: React.ReactNode
+  shortcut?: React.ReactNode
+  tags?: InputTag[]
+  trailingAddon?: React.ReactNode
+}
+
+type InputKindSpecificProps = InputModeRenderProps &
+  (
+    | { kind?: "default" }
+    | { kind: "shortcut" }
+    | { kind: "add-on" }
+    | { kind: "inline-add-on" }
+    | { kind: "tags" | "inline-tags" }
+    | {
+        kind:
+          | "leading-dropdown"
+          | "trailing-dropdown"
+          | "leading-button"
+          | "trailing-button"
+      }
+    | { kind: "quantity" | "quantity-2" }
+  )
+
+type InputDynamicKindProps = { kind?: InputKind } & InputModeRenderProps
+
+type InputCommonProps = InputNativeProps & {
+  className?: string
+  controlClassName?: string
+  helperClassName?: string
+  labelClassName?: string
+  surfaceClassName?: string
+  errorMessage?: React.ReactNode
+  hasHelperText?: boolean
+  hasInformationIcon?: boolean
+  hasLabel?: boolean
+  isOptional?: boolean
+  isRequired?: boolean
+  label?: React.ReactNode
+  leadingIcon?: React.ReactNode
+  message?: React.ReactNode
+  optionalText?: React.ReactNode
+  size?: InputSize
+  state?: InputVisualState
+  trailingIcon?: React.ReactNode
+  valueText?: string
+  variant?: InputVariant
+  dir?: "ltr" | "rtl" | "auto"
+}
+
+type InputProps = InputCommonProps & (InputKindSpecificProps | InputDynamicKindProps)
+
+const inputRoot = cva("grid w-[var(--bh-input-width)] max-w-full")
+
+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)]",
+  ],
+  {
+    variants: {
+      size: {
+        md: "h-[var(--bh-input-md-height)]",
+        lg: "h-[var(--bh-input-lg-height)]",
+      },
+      variant: {
+        default: "bg-[var(--bh-interactive-input-default)]",
+        soft: "bg-[var(--bh-interactive-input-soft)]",
+      },
+      state: {
+        default:
+          "shadow-[var(--shadow-input)]",
+        filled:
+          "shadow-[var(--shadow-input)]",
+        error:
+          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input)] focus-within:shadow-[var(--shadow-input)]",
+        disabled:
+          "bg-[var(--bh-interactive-input-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "soft",
+        state: "disabled",
+        class: "bg-[var(--bh-interactive-input-soft-disabled)]",
+      },
+    ],
+    defaultVariants: {
+      size: "lg",
+      state: "default",
+      variant: "default",
+    },
+  }
+)
+
+const inputContent = cva(
+  "flex min-w-0 flex-1 items-center gap-[var(--bh-input-content-gap)]",
+  {
+    variants: {
+      size: {
+        md: "px-[var(--bh-input-md-padding-x)]",
+        lg: "px-[var(--bh-input-lg-padding-x)]",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+    },
+  }
+)
+
+const inputControl = cva(
+  [
+    "min-w-0 flex-1 border-0 bg-transparent p-0 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)] disabled:placeholder:text-[var(--bh-content-disabled)]",
+  ]
+)
+
+const inputTag = cva(
+  [
+    "inline-flex h-[var(--bh-input-tag-height)] shrink-0 items-center rounded-[var(--bh-control-md)] border border-solid",
+    "border-[var(--bh-border-default)] bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-tag-padding-x)]",
+    "text-[length:var(--bh-text-body-xs-medium-font-size)]",
+    "font-[var(--bh-text-body-xs-medium-font-weight)]",
+    "leading-[var(--bh-text-body-xs-medium-line-height)]",
+    "tracking-[var(--bh-text-body-xs-medium-letter-spacing)]",
+    "text-[var(--bh-content-default)]",
+  ],
+  {
+    variants: {
+      disabled: {
+        true:
+          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }
+)
+
+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)]",
+    "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-subtle)]",
+    "disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      side: {
+        leading: "border-e border-[var(--bh-border-input)]",
+        trailing: "border-s border-[var(--bh-border-input)]",
+      },
+      interactive: {
+        true:
+          "outline-none transition-[background-color,color] hover:bg-[var(--bh-interactive-secondary-hover)] focus-visible:bg-[var(--bh-interactive-secondary-hover)]",
+        false: "",
+      },
+      disabled: {
+        true:
+          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      interactive: false,
+      side: "leading",
+      disabled: false,
+    },
+  }
+)
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      controlClassName,
+      helperClassName,
+      inlineTagsClassName,
+      labelClassName,
+      surfaceClassName,
+      buttonLabel,
+      defaultValue,
+      dir,
+      disabled,
+      errorMessage,
+      hasHelperText,
+      hasInformationIcon = true,
+      hasLabel,
+      id,
+      inlineLeadingAddon,
+      inlineTrailingAddon,
+      isOptional = false,
+      isRequired = false,
+      kind = "default",
+      label,
+      leadingAddon,
+      leadingIcon,
+      message,
+      optionalText,
+      placeholder,
+      quantityLabel,
+      readOnly,
+      required,
+      shortcut = inputCopy.shortcut,
+      size = "lg",
+      state = "default",
+      tags,
+      trailingAddon,
+      trailingIcon,
+      value,
+      valueText,
+      variant = "default",
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const helperId = `${inputId}-helper`
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
+    const resolvedDir = dir
+    const visualState = disabled ? "disabled" : state
+    const isDisabled = visualState === "disabled"
+    const isInvalid = visualState === "error" && !isDisabled
+    const isTagInput = kind === "tags" || kind === "inline-tags"
+    const selectedLabel = label
+    const selectedOptionalText = optionalText
+    const inferredPlaceholder = getInputPlaceholder({
+      placeholder,
+    })
+    const inferredDefaultValue = getInputDefaultValue({
+      defaultValue,
+      isTagInput,
+      state: visualState,
+      value,
+      valueText,
+    })
+    const helperText = getInputHelperText({
+      errorMessage,
+      isInvalid,
+      message,
+    })
+    const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
+    const shouldRenderHelperText =
+      hasHelperText ?? hasRenderableContent(helperText)
+    const selectedTags = getInputTags({ kind, tags })
+
+    function focusInput() {
+      if (!isDisabled) inputRef.current?.focus()
+    }
+
+    function setInputRef(node: HTMLInputElement | null) {
+      inputRef.current = node
+
+      if (typeof ref === "function") {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    return (
+      <div
+        data-kind={kind}
+        data-size={size}
+        data-slot="input-root"
+        data-state={visualState}
+        data-variant={variant}
+        dir={resolvedDir}
+        className={cn(inputRoot(), className)}
+      >
+        {shouldRenderLabel ? (
+          <InputLabel
+            className={labelClassName}
+            htmlFor={inputId}
+            isOptional={isOptional}
+            isRequired={isRequired || Boolean(required)}
+            label={selectedLabel}
+            optionalText={selectedOptionalText}
+          />
+        ) : null}
+
+        <div
+          data-slot="input-body"
+          className={cn(
+            "grid",
+            shouldRenderLabel && "mt-[var(--bh-input-label-gap)]",
+            selectedTags.inline.length > 0
+              ? "gap-[var(--bh-input-inline-tags-gap)]"
+              : "gap-[var(--bh-input-helper-gap)]"
+          )}
+        >
+          <div
+            aria-disabled={isDisabled || undefined}
+            data-slot="input-surface"
+            data-state={visualState}
+            className={cn(
+              inputSurface({
+                size,
+                state: visualState,
+                variant,
+              }),
+              surfaceClassName
+            )}
+            onClick={focusInput}
+          >
+            {renderLeadingSegment({
+              buttonLabel,
+              disabled: isDisabled,
+              kind,
+              leadingAddon,
+              quantityLabel,
+              trailingAddon,
+            })}
+
+            <span data-slot="input-content" className={cn(inputContent({ size }))}>
+              {shouldRenderLeadingIcon(kind) ? (
+                <InputLeadingIcon disabled={isDisabled} icon={leadingIcon} />
+              ) : null}
+
+              {kind === "inline-add-on" &&
+              hasRenderableContent(inlineLeadingAddon) ? (
+                <InputInlineAddon disabled={isDisabled}>
+                  {inlineLeadingAddon}
+                </InputInlineAddon>
+              ) : null}
+
+              {selectedTags.inside.length > 0 ? (
+                <InputTagList disabled={isDisabled} tags={selectedTags.inside} />
+              ) : null}
+
+              <input
+                aria-describedby={shouldRenderHelperText ? helperId : undefined}
+                aria-invalid={isInvalid || undefined}
+                data-slot="input-control"
+                data-state={visualState}
+                defaultValue={inferredDefaultValue}
+                disabled={isDisabled}
+                id={inputId}
+                placeholder={inferredPlaceholder}
+                readOnly={readOnly}
+                ref={setInputRef}
+                required={required}
+                value={value}
+                className={cn(inputControl(), controlClassName)}
+                {...props}
+              />
+
+              {kind === "inline-add-on" &&
+              hasRenderableContent(inlineTrailingAddon) ? (
+                <InputInlineAddon disabled={isDisabled}>
+                  {inlineTrailingAddon}
+                </InputInlineAddon>
+              ) : null}
+
+              {shouldRenderInfoIcon(kind, hasInformationIcon) ? (
+                <InputInfoIcon
+                  disabled={isDisabled}
+                  invalid={isInvalid}
+                  icon={trailingIcon}
+                />
+              ) : null}
+
+              {kind === "shortcut" ? (
+                <InputShortcut disabled={isDisabled}>{shortcut}</InputShortcut>
+              ) : null}
+            </span>
+
+            {renderTrailingSegment({
+              buttonLabel,
+              disabled: isDisabled,
+              kind,
+              leadingAddon,
+              quantityLabel,
+              trailingAddon,
+            })}
+          </div>
+
+          {selectedTags.inline.length > 0 ? (
+            <InputTagList
+              className={inlineTagsClassName}
+              disabled={isDisabled}
+              inline
+              tags={selectedTags.inline}
+            />
+          ) : null}
+
+          {shouldRenderHelperText ? (
+            <InputHelperText
+              className={helperClassName}
+              id={helperId}
+              invalid={isInvalid}
+            >
+              {helperText}
+            </InputHelperText>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
+function InputLabel({
+  className,
+  htmlFor,
+  isOptional,
+  isRequired,
+  label,
+  optionalText,
+}: {
+  className?: string
+  htmlFor: string
+  isOptional: boolean
+  isRequired: boolean
+  label: React.ReactNode
+  optionalText: React.ReactNode
+}) {
+  return (
+    <label
+      data-slot="input-label"
+      htmlFor={htmlFor}
+      className={cn(
+        "flex w-full items-center gap-[var(--bh-input-inline-gap)] text-start",
+        className
+      )}
+    >
+      <span
+        data-slot="input-label-text"
+        dir="auto"
+        className="min-w-0 shrink-0 whitespace-nowrap 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-default)]"
+      >
+        {label}
+      </span>
+      {isRequired ? (
+        <span
+          aria-hidden="true"
+          data-slot="input-label-required"
+          className="shrink-0 whitespace-nowrap 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)] text-[var(--bh-content-danger-default)]"
+        >
+          *
+        </span>
+      ) : null}
+      {isOptional && hasRenderableContent(optionalText) ? (
+        <span
+          data-slot="input-label-optional"
+          dir="auto"
+          className="min-w-0 shrink-0 whitespace-nowrap 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)] text-[var(--bh-content-subtle)]"
+        >
+          {optionalText}
+        </span>
+      ) : null}
+    </label>
+  )
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function InputHelperText({
+  children,
+  className,
+  id,
+  invalid,
+}: {
+  children: React.ReactNode
+  className?: string
+  id: string
+  invalid: boolean
+}) {
+  return (
+    <p
+      data-slot="input-helper-text"
+      id={id}
+      className={cn(
+        "m-0 w-full text-start 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)]",
+        invalid ? "text-[var(--bh-content-danger-default)]" : "text-[var(--bh-content-subtle)]",
+        className
+      )}
+    >
+      <span data-slot="input-helper-label" dir="auto" className="min-w-0">
+        {children}
+      </span>
+    </p>
+  )
+}
+
+function InputLeadingIcon({
+  disabled,
+  icon,
+}: {
+  disabled: boolean
+  icon?: React.ReactNode
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="input-leading-icon"
+      className={cn(
+        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        disabled && "text-[var(--bh-content-disabled)]"
+      )}
+    >
+      {icon || <span className="text-[length:var(--bh-input-leading-symbol-font-size)] leading-none">@</span>}
+    </span>
+  )
+}
+
+function InputInfoIcon({
+  disabled,
+  icon,
+  invalid,
+}: {
+  disabled: boolean
+  icon?: React.ReactNode
+  invalid: boolean
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="input-info-icon"
+      className={cn(
+        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        invalid && "text-[var(--bh-content-danger-default)]",
+        disabled && "text-[var(--bh-content-disabled)]"
+      )}
+    >
+      {icon || (
+        <svg
+          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>
+      )}
+    </span>
+  )
+}
+
+function InputInlineAddon({
+  children,
+  disabled,
+}: {
+  children: React.ReactNode
+  disabled: boolean
+}) {
+  return (
+    <span
+      data-slot="input-inline-addon"
+      dir="auto"
+      className={cn(
+        "shrink-0 whitespace-nowrap text-[var(--bh-content-subtle)]",
+        disabled && "text-[var(--bh-content-disabled)]"
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function InputShortcut({
+  children,
+  disabled,
+}: {
+  children: React.ReactNode
+  disabled: boolean
+}) {
+  return (
+    <span
+      data-slot="input-shortcut"
+      className={cn(
+        "inline-flex h-[var(--bh-input-shortcut-height)] shrink-0 items-center rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-default)] bg-[var(--bh-interactive-secondary-default)] px-[var(--bh-input-shortcut-padding-x)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)] leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)] text-[var(--bh-content-subtle)]",
+        disabled &&
+          "border-[var(--bh-border-disabled)] bg-[var(--bh-interactive-secondary-disabled)] text-[var(--bh-content-disabled)]"
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function InputTagList({
+  className,
+  disabled,
+  inline = false,
+  tags,
+}: {
+  className?: string
+  disabled: boolean
+  inline?: boolean
+  tags: InputTag[]
+}) {
+  return (
+    <span
+      data-inline={inline ? "true" : undefined}
+      data-slot={inline ? "input-inline-tags" : "input-tags"}
+      className={cn(
+        "flex min-w-0 items-center gap-[var(--bh-input-inline-gap)]",
+        inline && "flex-wrap",
+        className
+      )}
+    >
+      {tags.map((tag, index) => (
+        <span
+          key={tag.id || index}
+          data-slot="input-tag"
+          className={cn(inputTag({ disabled }))}
+        >
+          <span data-slot="input-tag-label" dir="auto" className="min-w-0 truncate">
+            {tag.label}
+          </span>
+        </span>
+      ))}
+    </span>
+  )
+}
+
+function InputSegment({
+  children,
+  disabled,
+  interactive = false,
+  side,
+}: {
+  children: React.ReactNode
+  disabled: boolean
+  interactive?: boolean
+  side: "leading" | "trailing"
+}) {
+  const Comp = interactive ? "button" : "span"
+
+  return (
+    <Comp
+      data-slot="input-segment"
+      disabled={interactive ? disabled : undefined}
+      type={interactive ? "button" : undefined}
+      className={cn(inputSegment({ disabled, interactive, side }))}
+      onClick={(event) => {
+        if (interactive) event.stopPropagation()
+      }}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+type InputSegmentRenderContext = {
+  buttonLabel?: React.ReactNode
+  disabled: boolean
+  kind: InputKind
+  leadingAddon?: React.ReactNode
+  quantityLabel?: React.ReactNode
+  trailingAddon?: React.ReactNode
+}
+
+type InputSegmentRenderer = (
+  context: InputSegmentRenderContext
+) => React.ReactNode
+
+const leadingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
+  "add-on": ({ disabled, leadingAddon }) =>
+    hasRenderableContent(leadingAddon) ? (
+      <InputSegment disabled={disabled} side="leading">
+        {leadingAddon}
+      </InputSegment>
+    ) : null,
+  "leading-button": ({ buttonLabel, disabled }) =>
+    hasRenderableContent(buttonLabel) ? (
+      <InputSegment disabled={disabled} interactive side="leading">
+        {buttonLabel}
+      </InputSegment>
+    ) : null,
+  "leading-dropdown": ({ buttonLabel, disabled }) => (
+    <InputSegment disabled={disabled} interactive side="leading">
+      {buttonLabel}
+      <ChevronIcon />
+    </InputSegment>
+  ),
+  "quantity-2": ({ disabled, quantityLabel }) => (
+    <InputSegment disabled={disabled} interactive side="leading">
+      <MinusIcon />
+      {hasRenderableContent(quantityLabel) ? (
+        <span className="sr-only">{quantityLabel}</span>
+      ) : null}
+    </InputSegment>
+  ),
+}
+
+const trailingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
+  "add-on": ({ disabled, trailingAddon }) =>
+    hasRenderableContent(trailingAddon) ? (
+      <InputSegment disabled={disabled} side="trailing">
+        {trailingAddon}
+      </InputSegment>
+    ) : null,
+  "trailing-button": ({ buttonLabel, disabled }) =>
+    hasRenderableContent(buttonLabel) ? (
+      <InputSegment disabled={disabled} interactive side="trailing">
+        {buttonLabel}
+      </InputSegment>
+    ) : null,
+  "trailing-dropdown": ({ buttonLabel, disabled }) => (
+    <InputSegment disabled={disabled} interactive side="trailing">
+      {buttonLabel}
+      <ChevronIcon />
+    </InputSegment>
+  ),
+  quantity: ({ disabled }) => (
+    <InputSegment disabled={disabled} interactive side="trailing">
+      <MinusIcon />
+      <PlusIcon />
+    </InputSegment>
+  ),
+  "quantity-2": ({ disabled }) => (
+    <InputSegment disabled={disabled} interactive side="trailing">
+      <MinusIcon />
+      <PlusIcon />
+    </InputSegment>
+  ),
+}
+
+function renderLeadingSegment(context: InputSegmentRenderContext) {
+  return leadingSegmentRenderers[context.kind]?.(context) ?? null
+}
+
+function renderTrailingSegment(context: InputSegmentRenderContext) {
+  return trailingSegmentRenderers[context.kind]?.(context) ?? null
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      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>
+  )
+}
+
+function MinusIcon() {
+  return (
+    <svg
+      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>
+  )
+}
+
+function PlusIcon() {
+  return (
+    <svg
+      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>
+  )
+}
+
+function shouldRenderLeadingIcon(kind: InputKind) {
+  return [
+    "default",
+    "shortcut",
+    "tags",
+    "inline-tags",
+    "trailing-dropdown",
+    "leading-dropdown",
+    "trailing-button",
+    "leading-button",
+  ].includes(kind)
+}
+
+function shouldRenderInfoIcon(kind: InputKind, hasInformationIcon: boolean) {
+  if (!hasInformationIcon) return false
+
+  return ![
+    "shortcut",
+    "trailing-dropdown",
+    "trailing-button",
+    "quantity",
+    "quantity-2",
+  ].includes(kind)
+}
+
+export { Input, inputContent, inputControl, inputRoot, inputSurface }
+export type {
+  InputKind,
+  InputProps,
+  InputSize,
+  InputTag,
+  InputVariant,
+  InputVisualState,
+}