banhaten 0.1.2 → 0.1.3

package/registry/components/native-select.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronDownIcon, InfoIcon } from "lucide-react"
+
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+type NativeSelectSize = "md" | "lg"
+type NativeSelectState = "default" | "filled" | "error" | "disabled"
+type NativeSelectVariant = "default" | "soft"
+
+type NativeSelectOption = {
+  disabled?: boolean
+  label: React.ReactNode
+  value: string
+}
+
+type NativeSelectProps = Omit<
+  React.ComponentProps<"select">,
+  "children" | "className" | "dir" | "size"
+> &
+  VariantProps<typeof nativeSelectControlVariants> & {
+    children?: React.ReactNode
+    className?: string
+    errorMessage?: React.ReactNode
+    hasHelperText?: boolean
+    helperText?: React.ReactNode
+    isOptional?: boolean
+    isRequired?: boolean
+    label?: React.ReactNode
+    options?: NativeSelectOption[]
+    optionalText?: React.ReactNode
+    rootClassName?: string
+    selectClassName?: string
+    state?: NativeSelectState
+    triggerId?: string
+    dir?: "ltr" | "rtl" | "auto"
+  }
+
+const nativeSelectRootVariants = cva(
+  "grid w-[var(--bh-select-width)] max-w-full gap-[var(--bh-select-field-gap)]"
+)
+
+const nativeSelectControlVariants = cva(
+  [
+    "relative grid w-full rounded-[var(--bh-select-trigger-radius)]",
+    "[--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)]",
+    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)] transition-[background-color,box-shadow]",
+    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--shadow-select-focus-ring)]",
+  ],
+  {
+    variants: {
+      size: {
+        lg: "min-h-[var(--bh-input-lg-height)]",
+        md: "min-h-[var(--bh-input-md-height)]",
+      },
+      state: {
+        default: "",
+        filled: "",
+        error:
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-within: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)]",
+      },
+      variant: {
+        default: "",
+        soft: "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      state: "default",
+      variant: "default",
+    },
+  }
+)
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  function NativeSelect(
+    {
+      children,
+      className,
+      disabled,
+      errorMessage,
+      hasHelperText,
+      helperText,
+      isOptional = false,
+      isRequired = false,
+      label,
+      options,
+      optionalText,
+      rootClassName,
+      selectClassName,
+      size = "lg",
+      state = "default",
+      triggerId,
+      variant = "default",
+      dir,
+      ...props
+    },
+    ref
+  ) {
+    const generatedId = React.useId()
+    const selectId = triggerId ?? generatedId
+    const helperId = `${selectId}-helper`
+    const visualState = disabled ? "disabled" : state
+    const helper = visualState === "error" ? errorMessage : helperText
+    const shouldRenderHelper = hasHelperText ?? Boolean(helper)
+
+    return (
+      <div
+        data-slot="native-select-root"
+        dir={dir}
+        className={cn(nativeSelectRootVariants({ className: rootClassName }))}
+      >
+        {label ? (
+          <Label
+            htmlFor={selectId}
+            optionalText={optionalText}
+            required={isRequired}
+            data-optional={isOptional ? "true" : undefined}
+          >
+            {label}
+          </Label>
+        ) : null}
+        <div
+          data-slot="native-select-control"
+          className={cn(
+            nativeSelectControlVariants({
+              size,
+              state: visualState,
+              variant,
+              className,
+            })
+          )}
+        >
+          <select
+            aria-describedby={shouldRenderHelper ? helperId : undefined}
+            aria-invalid={visualState === "error" || undefined}
+            data-slot="native-select"
+            disabled={disabled}
+            id={selectId}
+            ref={ref}
+            className={cn(
+              "min-h-[inherit] w-full appearance-none border-0 bg-transparent py-[var(--bh-space-sm-6)] ps-[var(--bh-select-trigger-padding-x)] pe-[var(--bh-space-8xl-48)] 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 disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+              selectClassName
+            )}
+            {...props}
+          >
+            {options?.map((option) => (
+              <option
+                disabled={option.disabled}
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </option>
+            ))}
+            {children}
+          </select>
+          <ChevronDownIcon
+            aria-hidden="true"
+            className="pointer-events-none absolute end-[var(--bh-select-trigger-padding-x)] top-1/2 size-[var(--bh-space-3xl-16)] -translate-y-1/2 text-[var(--bh-select-trigger-icon-color)]"
+            strokeWidth={2}
+          />
+        </div>
+        {shouldRenderHelper ? (
+          <p
+            data-slot="native-select-helper"
+            dir="auto"
+            id={helperId}
+            className={cn(
+              "m-0 inline-flex items-center gap-[var(--bh-space-xs-4)] 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)]",
+              visualState === "error"
+                ? "text-[var(--bh-content-danger-default)]"
+                : "text-[var(--bh-content-subtle)]"
+            )}
+          >
+            <InfoIcon
+              aria-hidden="true"
+              className="size-[var(--bh-space-3xl-16)] shrink-0"
+              strokeWidth={2}
+            />
+            {helper}
+          </p>
+        ) : null}
+      </div>
+    )
+  }
+)
+
+export {
+  NativeSelect,
+  nativeSelectControlVariants,
+  nativeSelectRootVariants,
+}
+export type {
+  NativeSelectOption,
+  NativeSelectProps,
+  NativeSelectSize,
+  NativeSelectState,
+  NativeSelectVariant,
+}

package/registry/components/navigation-menu.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type NavigationMenuProps = React.ComponentProps<
+  typeof NavigationMenuPrimitive.Root
+>
+type NavigationMenuListProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.List
+>
+type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Trigger
+>
+type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Content
+>
+type NavigationMenuLinkProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Link
+>
+type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Viewport
+>
+type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Indicator
+>
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  NavigationMenuProps
+>(function NavigationMenu({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      ref={ref}
+      className={cn("relative z-[var(--bh-z-raised)] flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListProps
+>(function NavigationMenuList({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      ref={ref}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-[var(--bh-space-xs-4)]", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerProps
+>(function NavigationMenuTrigger({ children, className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      ref={ref}
+      className={cn(
+        "group inline-flex h-[var(--bh-space-7xl-40)] items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-transparent 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-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="size-[var(--bh-space-3xl-16)] transition-transform group-data-[state=open]:rotate-180"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+})
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentProps
+>(function NavigationMenuContent({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      ref={ref}
+      className={cn(
+        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  NavigationMenuLinkProps
+>(function NavigationMenuLink({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      ref={ref}
+      className={cn(
+        "block rounded-[var(--bh-radius-lg-8)] p-[var(--bh-space-xl-12)] text-start 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-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportProps
+>(function NavigationMenuViewport({ className, ...props }, ref) {
+  return (
+    <div className="absolute start-0 top-full flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        ref={ref}
+        className={cn(
+          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorProps
+>(function NavigationMenuIndicator({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      ref={ref}
+      className={cn("top-full z-[var(--bh-z-popover)] flex h-[var(--bh-space-lg-10)] items-end justify-center overflow-hidden", className)}
+      {...props}
+    >
+      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)]" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+})
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}
+export type {
+  NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+}

package/registry/components/radio-group.tsx

@@ -100,7 +100,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(function Radio({
         ref={ref}
         type="radio"
         className={cn(
-          "peer absolute inset-0 z-[var(--bh-z-raised)] m-0 size-full cursor-pointer appearance-none rounded-[var(--bh-radius-full)] opacity-0 outline-none disabled:cursor-not-allowed",
+          "peer absolute inset-0 z-[var(--bh-z-raised)] m-0 size-full cursor-pointer appearance-none rounded-[var(--bh-radius-full)] opacity-[var(--bh-opacity-0)] outline-none disabled:cursor-not-allowed",
           inputClassName
         )}
         {...props}

package/registry/components/resizable.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import {
+  Group,
+  Panel,
+  Separator,
+  type GroupProps,
+  type Orientation,
+  type PanelProps,
+  type SeparatorProps,
+} from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+  direction?: Orientation
+}
+type ResizablePanelProps = PanelProps
+type ResizableHandleProps = SeparatorProps & {
+  withHandle?: boolean
+}
+
+function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <Group
+      data-panel-group-direction={direction}
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      orientation={direction}
+      {...props}
+    />
+  )
+}
+
+const ResizablePanel = Panel
+
+function ResizableHandle({
+  className,
+  withHandle = false,
+  ...props
+}: ResizableHandleProps) {
+  return (
+    <Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--shadow-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        className
+      )}
+      {...props}
+    >
+      {withHandle ? (
+        <div className="z-[var(--bh-z-raised)] flex h-[var(--bh-space-6xl-32)] w-[var(--bh-space-4xl-20)] items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)]">
+          <GripVerticalIcon className="size-[var(--bh-space-3xl-16)] text-[var(--bh-content-muted)]" />
+        </div>
+      ) : null}
+    </Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
+export type {
+  ResizableHandleProps,
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+}

package/registry/components/scroll-area.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+>
+type ScrollBarProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+>
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(function ScrollArea({ children, className, ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      ref={ref}
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+})
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollBarProps
+>(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-orientation={orientation}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      ref={ref}
+      className={cn(
+        "flex touch-none select-none bg-transparent p-[var(--bh-space-xxs-2)] transition-colors",
+        orientation === "vertical" &&
+          "h-full w-[var(--bh-space-lg-10)] border-s border-s-transparent",
+        orientation === "horizontal" &&
+          "h-[var(--bh-space-lg-10)] flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+})
+
+export { ScrollArea, ScrollBar }
+export type { ScrollAreaProps, ScrollBarProps }

package/registry/components/select.tsx

@@ -31,9 +31,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",
@@ -54,7 +52,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)]",
       },