banhaten 0.1.2 → 0.2.0

package/registry/components/select.tsx

@@ -16,7 +16,8 @@ import {
   type SelectStatusTone,
 } from "./select-content"
 
-type SelectSize = "lg" | "md"
+type ControlDensity = "compact" | "default" | "comfortable"
+type SelectSize = "lg" | "md" | "comfortable"
 type SelectVisualState = "default" | "filled" | "error" | "disabled"
 type SelectVariant = "default" | "soft"
 type SelectSelectionType = "default" | "checkbox"
@@ -31,9 +32,7 @@ const selectTrigger = cva(
     "select-none px-[var(--bh-select-trigger-padding-x)] text-start outline-none",
     "transition-[background-color,box-shadow]",
     "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
-    "[--bh-select-focus-ring-color:color-mix(in_srgb,var(--bh-border-focus)_30%,transparent)] [--shadow-select-focus-border:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border))]",
-    "after:pointer-events-none after:absolute after:inset-[calc(var(--bh-focus-ring-width)*-1)] after:rounded-[calc(var(--bh-select-trigger-radius)+var(--bh-focus-ring-width))] after:border-[length:var(--bh-focus-ring-width)] after:border-solid after:border-transparent after:content-['']",
-    "focus-visible:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-visible:[box-shadow:var(--shadow-select-focus-border)] focus-visible:after:border-[var(--bh-select-focus-ring-color)]",
+    "focus-visible:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-visible:shadow-[var(--shadow-select-focus-ring)]",
     "aria-invalid:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)]",
     "disabled:pointer-events-none disabled:bg-[var(--bh-select-trigger-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -41,6 +40,7 @@ const selectTrigger = cva(
   {
     variants: {
       size: {
+        comfortable: "py-[var(--bh-select-trigger-padding-y-comfortable)]",
         lg: "py-[var(--bh-select-trigger-padding-y-lg)]",
         md: "py-[var(--bh-select-trigger-padding-y-md)]",
       },
@@ -54,7 +54,7 @@ const selectTrigger = cva(
         default: "",
         filled: "",
         error:
-          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] [--bh-select-focus-ring-color:color-mix(in_srgb,var(--bh-border-focus-danger)_30%,transparent)] shadow-[var(--shadow-select-trigger)] focus-visible:[box-shadow:var(--shadow-select-focus-border)]",
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-visible:shadow-[var(--shadow-select-danger-focus-ring)]",
         disabled:
           "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
       },
@@ -122,6 +122,7 @@ const SelectRadixItemContext = React.createContext(false)
 type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   children?: React.ReactNode
   defaultSelectValue?: string
+  density?: ControlDensity
   dir?: "ltr" | "rtl" | "auto"
   errorMessage?: React.ReactNode
   expandIcon?: React.ReactNode | false
@@ -135,7 +136,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
   isOptional?: boolean
   isRequired?: boolean
   label?: React.ReactNode
-  leadingIcon?: React.ReactNode
+  leadingIcon?: React.ReactNode | false
   onOpenChange?: (open: boolean) => void
   onTriggerClick?: React.MouseEventHandler<HTMLButtonElement>
   onValueChange?: (value: string) => void
@@ -160,7 +161,7 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
     | "value"
     | "variant"
   >
-  trailingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode | false
   value?: React.ReactNode
   variant?: SelectVariant
 }
@@ -169,6 +170,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   children,
   className,
   defaultSelectValue,
+  density,
   dir,
   errorMessage,
   expandIcon,
@@ -176,8 +178,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   hasHelperText,
   hasInformationIcon = false,
   hasLabel,
-  hasLeadingIcon = true,
-  hasTrailingIcon = true,
+  hasLeadingIcon,
+  hasTrailingIcon,
   helperText,
   isOptional = false,
   isRequired = false,
@@ -190,7 +192,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   optionalText,
   placeholder,
   selectValue,
-  size = "lg",
+  size,
   state = "default",
   triggerClassName,
   triggerId,
@@ -201,6 +203,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   ...props
 }, ref) {
   const generatedId = React.useId()
+  const resolvedSize = resolveSelectSize(density, size)
   const resolvedDir = dir
   const triggerVisualState = triggerProps?.disabled ? "disabled" : state
   const isError = triggerVisualState === "error"
@@ -212,6 +215,12 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
   const shouldRenderHelperText =
     hasHelperText ?? hasRenderableContent(selectedHelper)
+  const shouldShowLeadingIcon =
+    leadingIcon !== false &&
+    (hasLeadingIcon ?? hasRenderableContent(leadingIcon))
+  const shouldShowTrailingIcon =
+    trailingIcon !== false &&
+    (hasTrailingIcon ?? hasRenderableContent(trailingIcon))
   const shouldRenderMenu = React.Children.count(children) > 0
   const selectId = triggerId || generatedId
   const helperId = `${selectId}-helper`
@@ -228,6 +237,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
       {...rootOpenProps}
     >
       <SelectRoot
+        data-density={density}
+        data-size={resolvedSize}
         data-state={triggerVisualState}
         data-variant={variant}
         dir={resolvedDir}
@@ -256,12 +267,20 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
               aria-invalid={isError || undefined}
               expandIcon={expandIcon}
               id={selectId}
-              leadingIcon={hasLeadingIcon ? leadingIcon : false}
+              leadingIcon={
+                shouldShowLeadingIcon
+                  ? (leadingIcon ?? <SelectIcon name="user" />)
+                  : false
+              }
               onClick={onTriggerClick}
               placeholder={selectedPlaceholder}
-              size={size}
+              size={resolvedSize}
               state={triggerVisualState}
-              trailingIcon={hasTrailingIcon ? trailingIcon : false}
+              trailingIcon={
+                shouldShowTrailingIcon
+                  ? (trailingIcon ?? <SelectIcon name="info" />)
+                  : false
+              }
               value={selectedValue}
               variant={variant}
               className={triggerClassName}
@@ -466,6 +485,7 @@ type SelectTriggerProps = Omit<
   "children" | "value"
 > &
   VariantProps<typeof selectTrigger> & {
+    density?: ControlDensity
     expandIcon?: React.ReactNode | false
     leadingIcon?: React.ReactNode | false
     placeholder?: React.ReactNode
@@ -477,11 +497,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
   (
     {
       className,
+      density,
       disabled,
       expandIcon,
       leadingIcon,
       placeholder,
-      size = "lg",
+      size,
       state,
       trailingIcon,
       type = "button",
@@ -491,13 +512,15 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
     },
     ref
   ) => {
+    const resolvedSize = resolveSelectSize(density, size)
     const hasValue = value !== undefined && value !== null && value !== ""
     const visualState = disabled ? "disabled" : state ?? (hasValue ? "filled" : "default")
     const isDisabled = visualState === "disabled"
 
     return (
       <button
-        data-size={size}
+        data-density={density}
+        data-size={resolvedSize}
         data-slot="select-trigger"
         data-state={visualState}
         data-variant={variant}
@@ -505,7 +528,7 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
         ref={ref}
         type={type}
         className={cn(
-          selectTrigger({ size, state: visualState, variant }),
+          selectTrigger({ size: resolvedSize, state: visualState, variant }),
           className
         )}
         {...props}
@@ -514,12 +537,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           data-slot="select-trigger-main"
           className="flex min-w-0 flex-1 items-center gap-[var(--bh-select-content-gap)]"
         >
-          {leadingIcon !== false ? (
+          {hasRenderableContent(leadingIcon) ? (
             <span
               data-slot="select-leading-icon"
               className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
             >
-              {leadingIcon ?? <SelectIcon name="user" />}
+              {leadingIcon}
             </span>
           ) : null}
 
@@ -543,12 +566,12 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
           </span>
         </span>
 
-        {trailingIcon !== false ? (
+        {hasRenderableContent(trailingIcon) ? (
           <span
             data-slot="select-trailing-icon"
             className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
           >
-            {trailingIcon ?? <SelectIcon name="info" />}
+            {trailingIcon}
           </span>
         ) : null}
 
@@ -801,6 +824,16 @@ function getFocusableSelectItems(root: HTMLElement) {
   ).filter((item) => !item.hasAttribute("disabled"))
 }
 
+function resolveSelectSize(
+  density: ControlDensity | undefined,
+  size: SelectSize | null | undefined
+): SelectSize {
+  if (density === "compact") return "md"
+  if (density === "default") return "lg"
+  if (density === "comfortable") return "comfortable"
+  return size ?? "lg"
+}
+
 type SelectCheckboxIndicatorProps = {
   checked?: boolean
   className?: string
@@ -862,6 +895,7 @@ export {
   selectTrigger,
 }
 export type {
+  ControlDensity,
   SelectItemType,
   SelectMenuItemProps,
   SelectProps,

package/registry/components/sheet.tsx

@@ -0,0 +1,305 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type SheetSide = "start" | "end" | "top" | "bottom"
+type SheetSize = "sm" | "default" | "lg"
+
+const sheetContentVariants = cva(
+  [
+    "fixed z-[var(--bh-z-overlay)] flex flex-col overflow-hidden bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)]",
+    "shadow-[var(--shadow-component-default)] outline-none",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  ],
+  {
+    variants: {
+      side: {
+        bottom:
+          "inset-x-0 bottom-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-t-[var(--bh-radius-2xl-12)] border-t border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+        end:
+          "inset-y-0 end-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-s border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-left rtl:data-[state=closed]:slide-out-to-left",
+        start:
+          "inset-y-0 start-0 h-full max-w-[calc(100vw-var(--bh-space-4xl-20))] border-e border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-right rtl:data-[state=closed]:slide-out-to-right",
+        top:
+          "inset-x-0 top-0 max-h-[calc(100vh-var(--bh-space-8xl-48))] rounded-b-[var(--bh-radius-2xl-12)] border-b border-[var(--bh-border-subtle)] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+      },
+      size: {
+        default: "",
+        lg: "",
+        sm: "",
+      },
+    },
+    compoundVariants: [
+      {
+        side: ["start", "end"],
+        size: "sm",
+        className:
+          "w-[min(var(--bh-space-19xl-384),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "default",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-9xl-64)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["start", "end"],
+        size: "lg",
+        className:
+          "w-[min(calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)),calc(100vw-var(--bh-space-4xl-20)))]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "sm",
+        className: "min-h-[var(--bh-space-12xl-128)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "default",
+        className: "min-h-[var(--bh-space-16xl-256)]",
+      },
+      {
+        side: ["top", "bottom"],
+        size: "lg",
+        className: "min-h-[var(--bh-space-17xl-288)]",
+      },
+    ],
+    defaultVariants: {
+      side: "end",
+      size: "default",
+    },
+  }
+)
+
+type SheetRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
+type SheetTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
+type SheetCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
+type SheetPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
+type SheetOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>
+type SheetContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof sheetContentVariants> & {
+    overlayClassName?: string
+    showCloseButton?: boolean
+  }
+type SheetHeaderProps = React.ComponentProps<"header">
+type SheetFooterProps = React.ComponentProps<"footer">
+type SheetBodyProps = React.ComponentProps<"div">
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+>
+type SheetCloseButtonProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+
+const Sheet = DialogPrimitive.Root
+const SheetTrigger = DialogPrimitive.Trigger
+const SheetClose = DialogPrimitive.Close
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  SheetOverlayProps
+>(function SheetOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="sheet-overlay"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(function SheetContent(
+  {
+    children,
+    className,
+    overlayClassName,
+    showCloseButton = true,
+    side = "end",
+    size = "default",
+    ...props
+  },
+  ref
+) {
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-side={side}
+        data-size={size}
+        data-slot="sheet-content"
+        ref={ref}
+        className={cn(sheetContentVariants({ side, size, className }))}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? <SheetCloseButton /> : null}
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
+})
+
+const SheetHeader = React.forwardRef<HTMLElement, SheetHeaderProps>(
+  function SheetHeader({ className, ...props }, ref) {
+    return (
+      <header
+        data-slot="sheet-header"
+        ref={ref}
+        className={cn(
+          "grid gap-[var(--bh-space-xs-4)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-lg-10)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(
+  function SheetBody({ className, ...props }, ref) {
+    return (
+      <div
+        data-slot="sheet-body"
+        ref={ref}
+        className={cn(
+          "min-h-0 flex-1 overflow-auto px-[var(--bh-space-4xl-20)] py-[var(--bh-space-lg-10)] text-start",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetFooter = React.forwardRef<HTMLElement, SheetFooterProps>(
+  function SheetFooter({ className, ...props }, ref) {
+    return (
+      <footer
+        data-slot="sheet-footer"
+        ref={ref}
+        className={cn(
+          "flex shrink-0 flex-wrap items-center justify-end gap-[var(--bh-space-md-8)] border-t border-[var(--bh-border-subtle)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  SheetTitleProps
+>(function SheetTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  SheetDescriptionProps
+>(function SheetDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "m-0 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}
+    />
+  )
+})
+
+const SheetCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  SheetCloseButtonProps
+>(function SheetCloseButton(
+  { children, className, label = "Close sheet", type = "button", ...props },
+  ref
+) {
+  return (
+    <SheetClose asChild>
+      <button
+        aria-label={label}
+        data-slot="sheet-close"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <XIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)]"
+            strokeWidth="var(--bh-icon-stroke-200)"
+          />
+        )}
+      </button>
+    </SheetClose>
+  )
+})
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetCloseButton,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetContentVariants,
+}
+export type {
+  SheetBodyProps,
+  SheetCloseButtonProps,
+  SheetCloseProps,
+  SheetContentProps,
+  SheetDescriptionProps,
+  SheetFooterProps,
+  SheetHeaderProps,
+  SheetOverlayProps,
+  SheetPortalProps,
+  SheetRootProps,
+  SheetSide,
+  SheetSize,
+  SheetTitleProps,
+  SheetTriggerProps,
+}