banhaten 0.1.2 → 0.1.3

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-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.tsx

@@ -94,8 +94,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)]",

package/registry/components/kbd.tsx

@@ -0,0 +1,44 @@
+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)]",
+  ],
+  {
+    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>
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
+  { className, size, ...props },
+  ref
+) {
+  return (
+    <kbd
+      data-slot="kbd"
+      ref={ref}
+      className={cn(kbdVariants({ size, className }))}
+      {...props}
+    />
+  )
+})
+
+export { Kbd, kbdVariants }
+export type { KbdProps }

package/registry/components/label.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  [
+    "inline-flex max-w-full items-center gap-[var(--bh-space-xs-4)] text-start",
+    "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)]",
+    "has-[[aria-disabled=true]]:text-[var(--bh-content-disabled)]",
+    "peer-disabled:cursor-not-allowed peer-disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      tone: {
+        default: "",
+        subtle: "text-[var(--bh-content-subtle)]",
+        danger: "text-[var(--bh-content-danger-default)]",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  }
+)
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> & {
+    optionalText?: React.ReactNode
+    required?: boolean
+  }
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(function Label(
+  { children, className, optionalText, required = false, tone, ...props },
+  ref
+) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      ref={ref}
+      className={cn(labelVariants({ tone, className }))}
+      {...props}
+    >
+      <span data-slot="label-text" dir="auto" className="min-w-0">
+        {children}
+      </span>
+      {required ? (
+        <span
+          aria-hidden="true"
+          data-slot="label-required"
+          className="shrink-0 text-[var(--bh-content-danger-default)]"
+        >
+          *
+        </span>
+      ) : null}
+      {optionalText ? (
+        <span
+          data-slot="label-optional"
+          dir="auto"
+          className="min-w-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)]"
+        >
+          {optionalText}
+        </span>
+      ) : null}
+    </LabelPrimitive.Root>
+  )
+})
+
+export { Label, labelVariants }
+export type { LabelProps }

package/registry/components/menu.tsx

@@ -32,6 +32,8 @@ type MenuResizeObserverConstructor = new (
 
 // Default Radix collisionPadding mirrors --bh-space-md-8.
 const MENU_COLLISION_PADDING_PX = 8
+// Radix sideOffset is numeric; this mirrors --bh-space-xs-4.
+const MENU_SUBCONTENT_SIDE_OFFSET_PX = 4
 const zeroMenuCollisionShift: MenuCollisionShift = { x: 0, y: 0 }
 const useSafeLayoutEffect =
   typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
@@ -327,7 +329,7 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
   children,
   className,
   collisionPadding = MENU_COLLISION_PADDING_PX,
-  sideOffset = 4,
+  sideOffset = MENU_SUBCONTENT_SIDE_OFFSET_PX,
   width,
   asChild = false,
   role = "menu",