banhaten 0.3.0 → 0.5.0

package/registry/components/field.tsx

@@ -1,283 +1,283 @@
-"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
-  defaultDescriptionId: string
-  defaultErrorId: string
-  descriptionIds: readonly string[]
-  disabled?: boolean
-  errorIds: readonly string[]
-  invalid?: boolean
-  registerDescription: (id: string) => () => void
-  registerError: (id: string) => () => void
-}
-
-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 [descriptionIds, setDescriptionIds] = React.useState<string[]>([])
-  const [errorIds, setErrorIds] = React.useState<string[]>([])
-  const registerDescription = React.useCallback(
-    (id: string) => registerFieldReference(setDescriptionIds, id),
-    []
-  )
-  const registerError = React.useCallback(
-    (id: string) => registerFieldReference(setErrorIds, id),
-    []
-  )
-  const context = React.useMemo<FieldContextValue>(
-    () => ({
-      controlId: resolvedControlId,
-      defaultDescriptionId: `${generatedId}-description`,
-      defaultErrorId: `${generatedId}-error`,
-      descriptionIds,
-      disabled,
-      errorIds,
-      invalid,
-      registerDescription,
-      registerError,
-    }),
-    [
-      descriptionIds,
-      disabled,
-      errorIds,
-      generatedId,
-      invalid,
-      registerDescription,
-      registerError,
-      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.descriptionIds,
-      ...(context.invalid ? context.errorIds : []),
-    ]
-      .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")
-  const resolvedId = id ?? context.defaultDescriptionId
-
-  React.useEffect(
-    () => context.registerDescription(resolvedId),
-    [context.registerDescription, resolvedId]
-  )
-
-  return (
-    <p
-      data-slot="field-description"
-      dir="auto"
-      id={resolvedId}
-      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")
-  const resolvedId = id ?? context.defaultErrorId
-
-  React.useEffect(
-    () => context.registerError(resolvedId),
-    [context.registerError, resolvedId]
-  )
-
-  return (
-    <p
-      data-slot="field-error"
-      dir="auto"
-      id={resolvedId}
-      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 registerFieldReference(
-  setIds: React.Dispatch<React.SetStateAction<string[]>>,
-  id: string
-) {
-  setIds((current) => (current.includes(id) ? current : [...current, id]))
-
-  return () => {
-    setIds((current) => current.filter((candidate) => candidate !== id))
-  }
-}
-
-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,
-}
+"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
+  defaultDescriptionId: string
+  defaultErrorId: string
+  descriptionIds: readonly string[]
+  disabled?: boolean
+  errorIds: readonly string[]
+  invalid?: boolean
+  registerDescription: (id: string) => () => void
+  registerError: (id: string) => () => void
+}
+
+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 [descriptionIds, setDescriptionIds] = React.useState<string[]>([])
+  const [errorIds, setErrorIds] = React.useState<string[]>([])
+  const registerDescription = React.useCallback(
+    (id: string) => registerFieldReference(setDescriptionIds, id),
+    []
+  )
+  const registerError = React.useCallback(
+    (id: string) => registerFieldReference(setErrorIds, id),
+    []
+  )
+  const context = React.useMemo<FieldContextValue>(
+    () => ({
+      controlId: resolvedControlId,
+      defaultDescriptionId: `${generatedId}-description`,
+      defaultErrorId: `${generatedId}-error`,
+      descriptionIds,
+      disabled,
+      errorIds,
+      invalid,
+      registerDescription,
+      registerError,
+    }),
+    [
+      descriptionIds,
+      disabled,
+      errorIds,
+      generatedId,
+      invalid,
+      registerDescription,
+      registerError,
+      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.descriptionIds,
+      ...(context.invalid ? context.errorIds : []),
+    ]
+      .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")
+  const resolvedId = id ?? context.defaultDescriptionId
+
+  React.useEffect(
+    () => context.registerDescription(resolvedId),
+    [context.registerDescription, resolvedId]
+  )
+
+  return (
+    <p
+      data-slot="field-description"
+      dir="auto"
+      id={resolvedId}
+      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")
+  const resolvedId = id ?? context.defaultErrorId
+
+  React.useEffect(
+    () => context.registerError(resolvedId),
+    [context.registerError, resolvedId]
+  )
+
+  return (
+    <p
+      data-slot="field-error"
+      dir="auto"
+      id={resolvedId}
+      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 registerFieldReference(
+  setIds: React.Dispatch<React.SetStateAction<string[]>>,
+  id: string
+) {
+  setIds((current) => (current.includes(id) ? current : [...current, id]))
+
+  return () => {
+    setIds((current) => current.filter((candidate) => candidate !== id))
+  }
+}
+
+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

@@ -1,48 +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 }
+"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(--elevation-popover)] outline-none",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPortal>
+  )
+})
+
+export { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger }
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps }