banhaten 0.1.2 → 0.2.0

package/registry/components/field.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { Label, type LabelProps } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+type FieldOrientation = "vertical" | "horizontal" | "responsive"
+
+type FieldContextValue = {
+  controlId: string
+  descriptionId: string
+  disabled?: boolean
+  errorId: string
+  invalid?: boolean
+}
+
+type FieldProps = React.ComponentProps<"div"> & {
+  controlId?: string
+  disabled?: boolean
+  invalid?: boolean
+  orientation?: FieldOrientation
+}
+
+type FieldControlProps = React.ComponentProps<typeof Slot> & {
+  "aria-describedby"?: string
+}
+
+type FieldLabelProps = LabelProps
+type FieldDescriptionProps = React.ComponentProps<"p">
+type FieldErrorProps = React.ComponentProps<"p">
+type FieldGroupProps = React.ComponentProps<"div">
+type FieldSetProps = React.ComponentProps<"fieldset">
+type FieldLegendProps = React.ComponentProps<"legend">
+type FieldContentProps = React.ComponentProps<"div">
+
+const FieldContext = React.createContext<FieldContextValue | null>(null)
+
+function Field({
+  children,
+  className,
+  controlId,
+  disabled = false,
+  invalid = false,
+  orientation = "vertical",
+  ...props
+}: FieldProps) {
+  const generatedId = React.useId()
+  const resolvedControlId = controlId ?? `${generatedId}-control`
+  const context = React.useMemo<FieldContextValue>(
+    () => ({
+      controlId: resolvedControlId,
+      descriptionId: `${generatedId}-description`,
+      disabled,
+      errorId: `${generatedId}-error`,
+      invalid,
+    }),
+    [disabled, generatedId, invalid, resolvedControlId]
+  )
+
+  return (
+    <FieldContext.Provider value={context}>
+      <div
+        data-disabled={disabled ? "true" : undefined}
+        data-invalid={invalid ? "true" : undefined}
+        data-orientation={orientation}
+        data-slot="field"
+        className={cn(
+          "grid min-w-0 gap-[var(--bh-space-xs-4)] text-start",
+          orientation === "horizontal" &&
+            "items-start gap-x-[var(--bh-space-3xl-16)] sm:grid-cols-[minmax(0,var(--bh-space-17xl-288))_minmax(0,1fr)]",
+          orientation === "responsive" &&
+            "gap-y-[var(--bh-space-md-8)] sm:grid-cols-[minmax(0,var(--bh-space-17xl-288))_minmax(0,1fr)] sm:items-start sm:gap-x-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </FieldContext.Provider>
+  )
+}
+
+function FieldControl({ className, ...props }: FieldControlProps) {
+  const context = useFieldContext("FieldControl")
+  const describedBy =
+    props["aria-describedby"] ??
+    [context.descriptionId, context.invalid ? context.errorId : undefined]
+      .filter(Boolean)
+      .join(" ")
+
+  return (
+    <Slot
+      aria-describedby={describedBy || undefined}
+      aria-disabled={context.disabled || undefined}
+      aria-invalid={context.invalid || undefined}
+      data-slot="field-control"
+      id={props.id ?? context.controlId}
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({ htmlFor, ...props }: FieldLabelProps) {
+  const context = useFieldContext("FieldLabel")
+
+  return (
+    <Label
+      data-slot="field-label"
+      htmlFor={htmlFor ?? context.controlId}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, id, ...props }: FieldDescriptionProps) {
+  const context = useFieldContext("FieldDescription")
+
+  return (
+    <p
+      data-slot="field-description"
+      dir="auto"
+      id={id ?? context.descriptionId}
+      className={cn(
+        "m-0 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)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldError({ className, id, role = "alert", ...props }: FieldErrorProps) {
+  const context = useFieldContext("FieldError")
+
+  return (
+    <p
+      data-slot="field-error"
+      dir="auto"
+      id={id ?? context.errorId}
+      role={role}
+      className={cn(
+        "m-0 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)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: FieldGroupProps) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn("grid min-w-0 gap-[var(--bh-space-3xl-16)]", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldSet({ className, ...props }: FieldSetProps) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "m-0 grid min-w-0 gap-[var(--bh-space-3xl-16)] border-0 p-0 [min-inline-size:0]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({ className, ...props }: FieldLegendProps) {
+  return (
+    <legend
+      data-slot="field-legend"
+      dir="auto"
+      className={cn(
+        "m-0 p-0 text-[length:var(--bh-text-body-md-semibold-font-size)] font-[var(--bh-text-body-md-semibold-font-weight)] leading-[var(--bh-text-body-md-semibold-line-height)] tracking-[var(--bh-text-body-md-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: FieldContentProps) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("grid min-w-0 gap-[var(--bh-space-xs-4)]", className)}
+      {...props}
+    />
+  )
+}
+
+function useFieldContext(component: string) {
+  const context = React.useContext(FieldContext)
+  if (!context) {
+    throw new Error(`${component} must be used within Field`)
+  }
+  return context
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+}
+export type {
+  FieldContentProps,
+  FieldControlProps,
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldGroupProps,
+  FieldLabelProps,
+  FieldLegendProps,
+  FieldOrientation,
+  FieldProps,
+  FieldSetProps,
+}

package/registry/components/hover-card.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>
+type HoverCardTriggerProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Trigger
+>
+type HoverCardContentProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Content
+>
+
+const HoverCard = HoverCardPrimitive.Root
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardPortal = HoverCardPrimitive.Portal
+
+// Radix sideOffset is numeric; this mirrors --bh-space-md-8.
+const HOVER_CARD_SIDE_OFFSET_PX = 8
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  HoverCardContentProps
+>(function HoverCardContent(
+  { align = "center", className, sideOffset = HOVER_CARD_SIDE_OFFSET_PX, ...props },
+  ref
+) {
+  return (
+    <HoverCardPortal>
+      <HoverCardPrimitive.Content
+        align={align}
+        data-slot="hover-card-content"
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-[var(--bh-z-popover)] w-[var(--bh-space-18xl-320)] rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-start text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] outline-none",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPortal>
+  )
+})
+
+export { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger }
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps }

package/registry/components/input-content.ts

@@ -22,6 +22,7 @@ type InputTag = {
 
 const inputCopy = {
   shortcut: "\u2318K",
+  shortcutKeys: ["Mod", "K"] as const,
 } as const
 
 function getInputPlaceholder({

package/registry/components/input-group.tsx

@@ -0,0 +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,
+}

package/registry/components/input-otp.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 import {
   inputControl,
   inputRoot,
@@ -71,6 +72,7 @@ const inputOtpSlotGroup = cva(
 const inputOtpSlot = cva("shrink-0", {
   variants: {
     size: {
+      comfortable: "w-[var(--bh-input-otp-slot-comfortable-width)]",
       md: "w-[var(--bh-input-otp-slot-md-width)]",
       lg: "w-[var(--bh-input-otp-slot-lg-width)]",
     },
@@ -154,6 +156,11 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
       normalizeValue(defaultValue, slotCount)
     )
     const slotRefs = React.useRef<Array<HTMLInputElement | null>>([])
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const resolvedDirection = useResolvedDirection(
+      dir === "ltr" || dir === "rtl" ? dir : undefined,
+      rootRef
+    )
     const currentValue = normalizeValue(
       isControlled ? value : internalValue,
       slotCount
@@ -235,8 +242,10 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
       onKeyDown?.(event)
       if (event.defaultPrevented) return
 
-      const previousKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft"
-      const nextKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight"
+      const previousKey =
+        resolvedDirection === "rtl" ? "ArrowRight" : "ArrowLeft"
+      const nextKey =
+        resolvedDirection === "rtl" ? "ArrowLeft" : "ArrowRight"
 
       if (event.key === previousKey) {
         event.preventDefault()
@@ -302,7 +311,8 @@ const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
         data-slot="input-otp-root"
         data-state={visualState}
         data-variant={variant}
-        dir={dir}
+        dir={dir === "auto" ? "auto" : resolvedDirection}
+        ref={rootRef}
         role="group"
         className={cn(
           inputRoot(),