banhaten 0.1.2 → 0.2.0

package/registry/components/input.tsx

@@ -9,6 +9,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { Kbd, KbdShortcut } from "@/components/ui/kbd"
 import {
   getInputDefaultValue,
   getInputHelperText,
@@ -20,7 +21,8 @@ import {
   type InputVisualState,
 } from "./input-content"
 
-type InputSize = "md" | "lg"
+type ControlDensity = "compact" | "default" | "comfortable"
+type InputSize = "md" | "lg" | "comfortable"
 type InputVariant = "default" | "soft"
 
 type InputNativeProps = Omit<
@@ -36,6 +38,7 @@ type InputModeRenderProps = {
   leadingAddon?: React.ReactNode
   quantityLabel?: React.ReactNode
   shortcut?: React.ReactNode
+  shortcutKeys?: readonly string[]
   tags?: InputTag[]
   trailingAddon?: React.ReactNode
 }
@@ -62,22 +65,28 @@ type InputDynamicKindProps = { kind?: InputKind } & InputModeRenderProps
 type InputCommonProps = InputNativeProps & {
   className?: string
   controlClassName?: string
+  density?: ControlDensity
   helperClassName?: string
   labelClassName?: string
   surfaceClassName?: string
   errorMessage?: React.ReactNode
   hasHelperText?: boolean
+  /** @deprecated Use showInfo or an explicit trailingIcon. */
   hasInformationIcon?: boolean
+  /** @deprecated Use showAtSign or an explicit leadingIcon. */
+  hasLeadingIcon?: boolean
   hasLabel?: boolean
   isOptional?: boolean
   isRequired?: boolean
   label?: React.ReactNode
-  leadingIcon?: React.ReactNode
+  leadingIcon?: React.ReactNode | false
   message?: React.ReactNode
   optionalText?: React.ReactNode
+  showAtSign?: boolean
+  showInfo?: boolean
   size?: InputSize
   state?: InputVisualState
-  trailingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode | false
   valueText?: string
   variant?: InputVariant
   dir?: "ltr" | "rtl" | "auto"
@@ -94,8 +103,8 @@ const inputSurface = cva(
     "[--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)]",
     "[--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-focus-surface:var(--shadow-input-focus-ring)]",
+    "[--shadow-input-focus-overlay:none]",
     "[--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)]",
@@ -105,6 +114,7 @@ const inputSurface = cva(
       size: {
         md: "h-[var(--bh-input-md-height)]",
         lg: "h-[var(--bh-input-lg-height)]",
+        comfortable: "h-[var(--bh-input-comfortable-height)]",
       },
       variant: {
         default: "bg-[var(--bh-interactive-input-default)]",
@@ -143,6 +153,7 @@ const inputContent = cva(
       size: {
         md: "px-[var(--bh-input-md-padding-x)]",
         lg: "px-[var(--bh-input-lg-padding-x)]",
+        comfortable: "px-[var(--bh-input-comfortable-padding-x)]",
       },
     },
     defaultVariants: {
@@ -256,11 +267,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       surfaceClassName,
       buttonLabel,
       defaultValue,
+      density,
       dir,
       disabled,
       errorMessage,
       hasHelperText,
-      hasInformationIcon = true,
+      hasInformationIcon,
+      hasLeadingIcon,
       hasLabel,
       id,
       inlineLeadingAddon,
@@ -277,8 +290,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       quantityLabel,
       readOnly,
       required,
-      shortcut = inputCopy.shortcut,
-      size = "lg",
+      shortcut,
+      shortcutKeys = inputCopy.shortcutKeys,
+      showAtSign = false,
+      showInfo = false,
+      size,
       state = "default",
       tags,
       trailingAddon,
@@ -291,6 +307,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     ref
   ) => {
     const generatedId = React.useId()
+    const resolvedSize = resolveInputSize(density, size)
     const inputId = id || generatedId
     const helperId = `${inputId}-helper`
     const inputRef = React.useRef<HTMLInputElement | null>(null)
@@ -320,6 +337,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const shouldRenderHelperText =
       hasHelperText ?? hasRenderableContent(helperText)
     const selectedTags = getInputTags({ kind, tags })
+    const shouldShowLeadingIcon =
+      shouldRenderLeadingIcon(kind) &&
+      leadingIcon !== false &&
+      (hasRenderableContent(leadingIcon) || showAtSign || Boolean(hasLeadingIcon))
+    const shouldShowInformationIcon = shouldRenderInfoIcon(
+      kind,
+      trailingIcon !== false &&
+        (hasRenderableContent(trailingIcon) || showInfo || Boolean(hasInformationIcon))
+    )
 
     function focusInput() {
       if (!isDisabled) inputRef.current?.focus()
@@ -338,7 +364,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div
         data-kind={kind}
-        data-size={size}
+        data-density={density}
+        data-size={resolvedSize}
         data-slot="input-root"
         data-state={visualState}
         data-variant={variant}
@@ -372,7 +399,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             data-state={visualState}
             className={cn(
               inputSurface({
-                size,
+                size: resolvedSize,
                 state: visualState,
                 variant,
               }),
@@ -386,12 +413,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
-              size,
+              size: resolvedSize,
               trailingAddon,
             })}
 
-            <span data-slot="input-content" className={cn(inputContent({ size }))}>
-              {shouldRenderLeadingIcon(kind) ? (
+            <span
+              data-slot="input-content"
+              className={cn(inputContent({ size: resolvedSize }))}
+            >
+              {shouldShowLeadingIcon ? (
                 <InputLeadingIcon disabled={isDisabled} icon={leadingIcon} />
               ) : null}
 
@@ -430,7 +460,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 </InputInlineAddon>
               ) : null}
 
-              {shouldRenderInfoIcon(kind, hasInformationIcon) ? (
+              {shouldShowInformationIcon ? (
                 <InputInfoIcon
                   disabled={isDisabled}
                   invalid={isInvalid}
@@ -439,7 +469,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               ) : null}
 
               {kind === "shortcut" ? (
-                <InputShortcut disabled={isDisabled}>{shortcut}</InputShortcut>
+                hasRenderableContent(shortcut) ? (
+                  <Kbd disabled={isDisabled}>{shortcut}</Kbd>
+                ) : (
+                  <KbdShortcut disabled={isDisabled} keys={shortcutKeys} />
+                )
               ) : null}
             </span>
 
@@ -449,7 +483,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               kind,
               leadingAddon,
               quantityLabel,
-              size,
+              size: resolvedSize,
               trailingAddon,
             })}
           </div>
@@ -588,12 +622,12 @@ function InputLeadingIcon({
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >
-      {icon || (
+      {icon ?? (
         <AtSignIcon
           aria-hidden="true"
           className="size-[var(--bh-input-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       )}
     </span>
@@ -619,12 +653,12 @@ function InputInfoIcon({
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >
-      {icon || (
+      {icon ?? (
         <InfoIcon
           aria-hidden="true"
           className="size-[var(--bh-input-info-icon-size)]"
           focusable="false"
-          strokeWidth={2.25}
+          strokeWidth="var(--bh-icon-stroke-225)"
         />
       )}
     </span>
@@ -652,27 +686,6 @@ function InputInlineAddon({
   )
 }
 
-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,
@@ -759,7 +772,8 @@ function InputStepperButton({
       type="button"
       className={cn(
         inputStepperButton({ side }),
-        size === "md" && "w-[var(--bh-input-md-height)]"
+        size === "md" && "w-[var(--bh-input-md-height)]",
+        size === "comfortable" && "w-[var(--bh-input-comfortable-height)]"
       )}
       onClick={(event) => {
         event.stopPropagation()
@@ -886,7 +900,7 @@ function ChevronIcon() {
       aria-hidden="true"
       className="size-[var(--bh-input-chevron-size)]"
       focusable="false"
-      strokeWidth={2.25}
+      strokeWidth="var(--bh-icon-stroke-225)"
     />
   )
 }
@@ -897,7 +911,7 @@ function MinusIcon() {
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
       focusable="false"
-      strokeWidth={2.25}
+      strokeWidth="var(--bh-icon-stroke-225)"
     />
   )
 }
@@ -908,7 +922,7 @@ function PlusIcon() {
       aria-hidden="true"
       className="size-[var(--bh-input-stepper-icon-size)]"
       focusable="false"
-      strokeWidth={2.25}
+      strokeWidth="var(--bh-icon-stroke-225)"
     />
   )
 }
@@ -936,8 +950,19 @@ function shouldRenderInfoIcon(kind: InputKind, hasInformationIcon: boolean) {
   ].includes(kind)
 }
 
+function resolveInputSize(
+  density: ControlDensity | undefined,
+  size: InputSize | undefined
+): InputSize {
+  if (density === "compact") return "md"
+  if (density === "default") return "lg"
+  if (density === "comfortable") return "comfortable"
+  return size ?? "lg"
+}
+
 export { Input, inputContent, inputControl, inputRoot, inputSurface }
 export type {
+  ControlDensity,
   InputKind,
   InputProps,
   InputSize,

package/registry/components/item.tsx

@@ -0,0 +1,189 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const itemVariants = cva(
+  [
+    "group/item flex min-w-0 items-center gap-[var(--bh-item-gap)] rounded-[var(--bh-item-radius)]",
+    "px-[var(--bh-item-padding-x)] py-[var(--bh-item-padding-y)] text-start text-[var(--bh-content-default)]",
+    "outline-none transition-[background-color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)]",
+    "aria-disabled:pointer-events-none aria-disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-[var(--bh-item-min-height-sm)]",
+        md: "min-h-[var(--bh-item-min-height-md)]",
+        lg: "min-h-[var(--bh-item-min-height-lg)]",
+      },
+      variant: {
+        default:
+          "bg-[var(--bh-bg-default)] hover:bg-[var(--bh-interactive-ghost-hover)]",
+        muted:
+          "bg-[var(--bh-bg-neutral-subtle)] hover:bg-[var(--bh-bg-neutral-soft)]",
+        outline:
+          "bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)] hover:bg-[var(--bh-bg-raised-hover)]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+type ItemProps = React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & {
+    asChild?: boolean
+    disabled?: boolean
+  }
+
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
+  {
+    asChild = false,
+    children,
+    className,
+    disabled = false,
+    size,
+    variant,
+    ...props
+  },
+  ref
+) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      aria-disabled={disabled || undefined}
+      data-size={size ?? "md"}
+      data-slot="item"
+      data-variant={variant ?? "default"}
+      ref={ref}
+      className={cn(itemVariants({ className, size, variant }))}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+})
+
+type ItemGroupProps = React.ComponentProps<"div">
+
+const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(
+  function ItemGroup({ className, role = "list", ...props }, ref) {
+    return (
+      <div
+        data-slot="item-group"
+        ref={ref}
+        role={role}
+        className={cn("grid min-w-0 gap-[var(--bh-item-group-gap)]", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+type ItemMediaProps = React.ComponentProps<"div"> & {
+  variant?: "avatar" | "icon" | "image"
+}
+
+const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
+  function ItemMedia({ className, variant = "icon", ...props }, ref) {
+    return (
+      <div
+        aria-hidden={props["aria-label"] ? undefined : true}
+        data-slot="item-media"
+        data-variant={variant}
+        ref={ref}
+        className={cn(
+          "flex size-[var(--bh-item-media-size)] shrink-0 items-center justify-center overflow-hidden",
+          "[&_svg]:size-[var(--bh-item-icon-size)] [&_img]:size-full [&_img]:object-cover",
+          variant === "icon" &&
+            "rounded-[var(--bh-item-media-radius)] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+          variant === "avatar" &&
+            "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-default)] text-[var(--bh-content-on-color)]",
+          variant === "image" && "rounded-[var(--bh-item-media-radius)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("grid min-w-0 flex-1 gap-[var(--bh-item-content-gap)]", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      dir="auto"
+      className={cn(
+        "min-w-0 break-words text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-description"
+      dir="auto"
+      className={cn(
+        "min-w-0 break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn(
+        "flex shrink-0 items-center gap-[var(--bh-item-actions-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="item-separator"
+      className={cn("h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+  itemVariants,
+}
+export type { ItemGroupProps, ItemMediaProps, ItemProps }

package/registry/components/kbd.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const kbdVariants = cva(
+  [
+    "inline-flex min-w-[var(--bh-space-5xl-24)] items-center justify-center whitespace-nowrap rounded-[var(--bh-radius-md-6)]",
+    "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
+    "font-[var(--bh-font-family)] 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)] shadow-[var(--shadow-button-soft)]",
+    "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)] data-[disabled=true]:shadow-none",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--bh-space-5xl-24)] gap-[var(--bh-space-xxs-2)] px-[var(--bh-space-sm-6)]",
+        md: "h-[var(--bh-space-6xl-32)] gap-[var(--bh-space-xs-4)] px-[var(--bh-space-md-8)]",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+type KbdProps = React.ComponentProps<"kbd"> &
+  VariantProps<typeof kbdVariants> & {
+    disabled?: boolean
+  }
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
+  { className, disabled = false, size, ...props },
+  ref
+) {
+  return (
+    <kbd
+      data-disabled={disabled ? "true" : undefined}
+      data-slot="kbd"
+      ref={ref}
+      className={cn(kbdVariants({ size, className }))}
+      {...props}
+    />
+  )
+})
+
+type ShortcutPlatform = "auto" | "mac" | "windows" | "linux"
+
+type KbdShortcutProps = Omit<React.ComponentProps<"span">, "children"> & {
+  disabled?: boolean
+  keys: readonly string[]
+  platform?: ShortcutPlatform
+  size?: KbdProps["size"]
+}
+
+const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
+  function KbdShortcut(
+    {
+      "aria-label": ariaLabel,
+      className,
+      disabled = false,
+      keys,
+      platform = "auto",
+      size = "sm",
+      ...props
+    },
+    ref
+  ) {
+    const [resolvedPlatform, setResolvedPlatform] = React.useState<
+      Exclude<ShortcutPlatform, "auto">
+    >(platform === "auto" ? "mac" : platform)
+
+    React.useEffect(() => {
+      if (platform !== "auto") {
+        setResolvedPlatform(platform)
+        return
+      }
+
+      setResolvedPlatform(detectShortcutPlatform())
+    }, [platform])
+
+    const resolvedKeys = keys.map((key) =>
+      resolveShortcutKey(key, resolvedPlatform)
+    )
+    const accessibleLabel =
+      ariaLabel ?? resolvedKeys.map(readableShortcutKey).join(" plus ")
+
+    return (
+      <span
+        aria-label={accessibleLabel}
+        className={cn(
+          "inline-flex shrink-0 items-center gap-[var(--bh-space-xs-4)]",
+          className
+        )}
+        data-disabled={disabled ? "true" : undefined}
+        data-platform={resolvedPlatform}
+        data-slot="kbd-shortcut"
+        dir="ltr"
+        ref={ref}
+        role="group"
+        {...props}
+      >
+        {resolvedKeys.map((key, index) => (
+          <Kbd
+            aria-hidden="true"
+            disabled={disabled}
+            key={`${key}-${index}`}
+            size={size}
+          >
+            {key}
+          </Kbd>
+        ))}
+      </span>
+    )
+  }
+)
+
+function detectShortcutPlatform(): Exclude<ShortcutPlatform, "auto"> {
+  if (typeof navigator === "undefined") return "mac"
+  const platform = navigator.platform.toLowerCase()
+  if (
+    platform.includes("mac") ||
+    platform.includes("iphone") ||
+    platform.includes("ipad")
+  ) {
+    return "mac"
+  }
+  if (platform.includes("linux")) return "linux"
+  return "windows"
+}
+
+function resolveShortcutKey(
+  key: string,
+  platform: Exclude<ShortcutPlatform, "auto">
+) {
+  if (key !== "Mod") return key
+  return platform === "mac" ? "⌘" : "Ctrl"
+}
+
+function readableShortcutKey(key: string) {
+  if (key === "⌘") return "Command"
+  if (key === "⌥") return "Option"
+  if (key === "⇧") return "Shift"
+  if (key === "⌃") return "Control"
+  return key
+}
+
+export { Kbd, KbdShortcut, kbdVariants }
+export type { KbdProps, KbdShortcutProps, ShortcutPlatform }