banhaten 0.1.2 → 0.1.3

package/registry/components/context-menu.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Trigger
+>
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Content
+>
+type ContextMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Item
+> & {
+  inset?: boolean
+}
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+>
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioItem
+>
+type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Label
+> & {
+  inset?: boolean
+}
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Separator
+>
+type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean
+}
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubContent
+>
+type ContextMenuShortcutProps = React.ComponentProps<"span">
+
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const menuContentClassName =
+  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
+
+const menuItemClassName =
+  "relative flex min-h-[var(--bh-menu-item-min-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] 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 data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPortal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        ref={ref}
+        className={cn(menuContentClassName, className)}
+        {...props}
+      />
+    </ContextMenuPortal>
+  )
+})
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-item"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ContextMenuCheckboxItemProps
+>(function ContextMenuCheckboxItem({ children, className, checked, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      data-slot="context-menu-checkbox-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+})
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ContextMenuRadioItemProps
+>(function ContextMenuRadioItem({ children, className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+})
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  ContextMenuLabelProps
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-label"
+      ref={ref}
+      className={cn(
+        "px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] 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)] text-[var(--bh-content-muted)]",
+        inset && "ps-[var(--bh-space-8xl-48)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ContextMenuSeparatorProps
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      ref={ref}
+      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ContextMenuSubTriggerProps
+>(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-sub-trigger"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+})
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ContextMenuSubContentProps
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      ref={ref}
+      className={cn(menuContentClassName, className)}
+      {...props}
+    />
+  )
+})
+
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+}
+export type {
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubContentProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuTriggerProps,
+}

package/registry/components/date-picker.tsx

@@ -220,7 +220,7 @@ const monthButton = cva(
   [
     "flex size-[var(--bh-date-nav-button-size)] shrink-0 items-center justify-center rounded-[var(--bh-control-default)]",
     "bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,box-shadow,color]",
-    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-0",
+    "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-[var(--bh-opacity-0)]",
     "[&_svg]:size-[var(--bh-date-nav-icon-size)]",
   ]
 )

package/registry/components/expanded/PageHeader.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { HomeIcon as LucideHomeIcon } from "lucide-react";
-import { Tabs, type TabsProps } from "./Tabs";
+import { Tabs, type TabsProps } from "../tabs";
 import "./pageHeader.css";
 
 export type PageHeaderBreadcrumb = {

package/registry/components/expanded/breadcrumbs.css

@@ -1,140 +1,140 @@
-.ds-breadcrumbs {
-  --breadcrumbs-color: var(--bh-content-subtle);
-  --breadcrumbs-current: var(--bh-content-default);
-  --breadcrumbs-border: var(--bh-border-subtle);
-  --breadcrumbs-surface: var(--bh-bg-raised);
-  --breadcrumbs-radius: var(--bh-radius-lg-8);
-
-  box-sizing: border-box;
-  display: block;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  color: var(--breadcrumbs-color);
-  font-family: var(--bh-font-family);
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  letter-spacing: 0;
-  line-height: var(--bh-text-body-md-line-height);
-}
-
-.ds-breadcrumbs *,
-.ds-breadcrumbs *::before,
-.ds-breadcrumbs *::after {
-  box-sizing: border-box;
-}
-
-.ds-breadcrumbs ol {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-  max-width: 100%;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.ds-breadcrumbs--raised ol {
-  gap: var(--bh-space-md-8);
-  padding: var(--bh-space-xl-12);
-  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
-  border-radius: var(--breadcrumbs-radius);
-  background: var(--breadcrumbs-surface);
-}
-
-.ds-breadcrumbs li,
-.ds-breadcrumbs a,
-.ds-breadcrumbs li > span {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-breadcrumbs a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.ds-breadcrumbs a:hover {
-  color: var(--breadcrumbs-current);
-}
-
-.ds-breadcrumbs a:focus-visible {
-  border-radius: var(--bh-radius-sm-4);
+.ds-breadcrumbs {
+  --breadcrumbs-color: var(--bh-content-subtle);
+  --breadcrumbs-current: var(--bh-content-default);
+  --breadcrumbs-border: var(--bh-border-subtle);
+  --breadcrumbs-surface: var(--bh-bg-raised);
+  --breadcrumbs-radius: var(--bh-radius-lg-8);
+
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  color: var(--breadcrumbs-color);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  letter-spacing: 0;
+  line-height: var(--bh-text-body-md-line-height);
+}
+
+.ds-breadcrumbs *,
+.ds-breadcrumbs *::before,
+.ds-breadcrumbs *::after {
+  box-sizing: border-box;
+}
+
+.ds-breadcrumbs ol {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-breadcrumbs--raised ol {
+  gap: var(--bh-space-md-8);
+  padding: var(--bh-space-xl-12);
+  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
+  border-radius: var(--breadcrumbs-radius);
+  background: var(--breadcrumbs-surface);
+}
+
+.ds-breadcrumbs li,
+.ds-breadcrumbs a,
+.ds-breadcrumbs li > span {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-breadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-breadcrumbs a:hover {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs a:focus-visible {
+  border-radius: var(--bh-radius-sm-4);
   outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-breadcrumbs .is-current {
-  color: var(--breadcrumbs-current);
-}
-
-.ds-breadcrumbs__icon {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-  flex: 0 0 auto;
-  display: inline-grid;
-  place-items: center;
-  color: currentColor;
-}
-
-.ds-breadcrumbs__icon:empty {
-  display: none;
-}
-
-.ds-breadcrumbs__icon svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-  display: block;
-}
-
-.ds-breadcrumbs__label {
-  max-width: 20ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-breadcrumbs__label--hidden {
-  position: absolute;
-  width: var(--bh-space-xxxs-1);
-  height: var(--bh-space-xxxs-1);
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-.ds-breadcrumbs__separator {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--breadcrumbs-color);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-}
-
-.ds-breadcrumbs__separator svg {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  display: block;
-}
-
-.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
-  transform: scaleX(-1);
-}
-
-.ds-breadcrumbs--icon-only a,
-.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
-  width: var(--bh-space-6xl-32);
-  height: var(--bh-space-6xl-32);
-  justify-content: center;
-  border-radius: var(--breadcrumbs-radius);
-}
-
-.ds-breadcrumbs--icon-only a:hover {
-  background: var(--bh-interactive-ghost-hover);
-}
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-breadcrumbs .is-current {
+  color: var(--breadcrumbs-current);
+}
+
+.ds-breadcrumbs__icon {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  color: currentColor;
+}
+
+.ds-breadcrumbs__icon:empty {
+  display: none;
+}
+
+.ds-breadcrumbs__icon svg {
+  width: var(--bh-space-4xl-20);
+  height: var(--bh-space-4xl-20);
+  display: block;
+}
+
+.ds-breadcrumbs__label {
+  max-width: 20ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__label--hidden {
+  position: absolute;
+  width: var(--bh-space-xxxs-1);
+  height: var(--bh-space-xxxs-1);
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.ds-breadcrumbs__separator {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--breadcrumbs-color);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-breadcrumbs__separator svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: block;
+}
+
+.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
+  transform: scaleX(-1);
+}
+
+.ds-breadcrumbs--icon-only a,
+.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  justify-content: center;
+  border-radius: var(--breadcrumbs-radius);
+}
+
+.ds-breadcrumbs--icon-only a:hover {
+  background: var(--bh-interactive-ghost-hover);
+}