banhaten 0.3.0 → 0.4.0

package/registry/components/expanded/onboardingStepListItem.css

@@ -13,7 +13,8 @@
   --onboarding-step-width: calc(var(--bh-space-17xl-288) - var(--bh-space-md-8));
   --onboarding-step-height: var(--bh-space-7xl-40);
   --onboarding-step-line-wrap-size: var(--bh-space-5xl-24);
-  --onboarding-step-check-size: var(--bh-space-4xl-20);
+  --onboarding-step-check-size: var(--bh-icon-size-default);
+  --onboarding-step-check-slot-size: var(--bh-icon-slot-size-default);
   --onboarding-step-line-width: var(--bh-space-xxs-2);
   --onboarding-step-line-offset: calc(-1 * var(--bh-space-md-8));
   --onboarding-step-line-segment-height: calc(var(--bh-space-2xl-14) - var(--bh-space-xxxs-1));
@@ -82,14 +83,22 @@
   text-align: right;
 }
 
-.ds-onboarding-step__check {
+.ds-onboarding-step__check-slot {
   position: relative;
   z-index: 1;
-  display: block;
+  display: inline-flex;
   flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--onboarding-step-check-slot-size);
+  height: var(--onboarding-step-check-slot-size);
+  color: var(--onboarding-step-content-success);
+}
+
+.ds-onboarding-step__check {
+  display: block;
   width: var(--onboarding-step-check-size);
   height: var(--onboarding-step-check-size);
-  color: var(--onboarding-step-content-success);
 }
 
 .ds-onboarding-step__line {
@@ -113,7 +122,7 @@
 .ds-onboarding-step__line--active {
   position: relative;
   left: auto;
-  height: var(--onboarding-step-check-size);
+  height: var(--onboarding-step-check-slot-size);
   transform: none;
   background: var(--onboarding-step-border-brand-strong);
 }

package/registry/components/expanded/table.css

@@ -349,6 +349,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--bh-space-md-8);
+  max-width: 100%;
 }
 
 .ds-table-avatar-text > span:last-child {
@@ -509,14 +510,16 @@
 
 .ds-table-icon-button svg,
 .ds-table-icon-label svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
 }
 
 .ds-table-icon-label > span:first-child {
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
+  width: var(--bh-icon-slot-size-default);
+  height: var(--bh-icon-slot-size-default);
 }
 
 .ds-table-icon-label > span:last-child {

package/registry/components/input.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Kbd, KbdShortcut } from "@/components/ui/kbd"
+import { Shortcut } from "@/components/ui/kbd"
 import {
   getInputDefaultValue,
   getInputHelperText,
@@ -419,7 +419,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
             <span
               data-slot="input-content"
-              className={cn(inputContent({ size: resolvedSize }))}
+              className={cn(
+                inputContent({ size: resolvedSize }),
+                kind === "shortcut" &&
+                  resolvedSize === "lg" &&
+                  "px-[var(--bh-input-md-padding-x)]"
+              )}
             >
               {shouldShowLeadingIcon ? (
                 <InputLeadingIcon disabled={isDisabled} icon={leadingIcon} />
@@ -470,9 +475,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
               {kind === "shortcut" ? (
                 hasRenderableContent(shortcut) ? (
-                  <Kbd disabled={isDisabled}>{shortcut}</Kbd>
+                  <Shortcut disabled={isDisabled}>{shortcut}</Shortcut>
                 ) : (
-                  <KbdShortcut disabled={isDisabled} keys={shortcutKeys} />
+                  <Shortcut disabled={isDisabled} keys={shortcutKeys} />
                 )
               ) : null}
             </span>
@@ -618,7 +623,9 @@ function InputLeadingIcon({
       aria-hidden="true"
       data-slot="input-leading-icon"
       className={cn(
-        "flex size-[var(--bh-input-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        "flex size-[var(--bh-input-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]",
+        "[&>img]:size-[var(--bh-input-icon-size)] [&>img]:shrink-0 [&>img]:object-contain",
+        "[&>svg]:size-[var(--bh-input-icon-size)] [&>svg]:shrink-0",
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >

package/registry/components/item.tsx

@@ -99,7 +99,7 @@ const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
         ref={ref}
         className={cn(
           "flex size-[var(--bh-item-media-size)] shrink-0 items-center justify-center overflow-hidden",
-          "[&_svg]:size-[var(--bh-item-icon-size)] [&_img]:size-full [&_img]:object-cover",
+          "[&_svg]:size-[var(--bh-item-icon-size)] [&_svg]:m-[calc((var(--bh-item-icon-slot-size)-var(--bh-item-icon-size))/2)] [&_img]:size-full [&_img]:object-cover",
           variant === "icon" &&
             "rounded-[var(--bh-item-media-radius)] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
           variant === "avatar" &&

package/registry/components/kbd.tsx

@@ -9,7 +9,7 @@ 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)]",
+    "[font-family: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)]",
     "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)] data-[disabled=true]:shadow-none",
   ],
@@ -26,6 +26,14 @@ const kbdVariants = cva(
   }
 )
 
+const shortcutVariants = cva([
+  "inline-flex h-[var(--bh-space-4xl-20)] min-w-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-radius-sm-4)] px-[var(--bh-space-xs-4)]",
+  "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
+  "[font-family:var(--bh-font-family)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)]",
+  "leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)]",
+  "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
+])
+
 type KbdProps = React.ComponentProps<"kbd"> &
   VariantProps<typeof kbdVariants> & {
     disabled?: boolean
@@ -48,6 +56,55 @@ const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
 
 type ShortcutPlatform = "auto" | "mac" | "windows" | "linux"
 
+type ShortcutProps = Omit<React.ComponentProps<"kbd">, "children"> & {
+  children?: React.ReactNode
+  disabled?: boolean
+  keys?: readonly string[]
+  platform?: ShortcutPlatform
+}
+
+const Shortcut = React.forwardRef<HTMLElement, ShortcutProps>(function Shortcut(
+  {
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disabled = false,
+    keys = [],
+    platform = "auto",
+    ...props
+  },
+  ref
+) {
+  const resolvedPlatform = useShortcutPlatform(platform)
+  const resolvedKeys = keys.map((key) =>
+    resolveShortcutKey(key, resolvedPlatform)
+  )
+  const content =
+    children ?? formatShortcutKeys(resolvedKeys, resolvedPlatform)
+  const accessibleLabel =
+    ariaLabel ??
+    (resolvedKeys.length > 0
+      ? resolvedKeys.map(readableShortcutKey).join(" plus ")
+      : typeof children === "string"
+        ? readableShortcutText(children)
+        : undefined)
+
+  return (
+    <kbd
+      aria-label={accessibleLabel}
+      className={cn(shortcutVariants(), className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-platform={resolvedPlatform}
+      data-slot="shortcut"
+      dir="ltr"
+      ref={ref}
+      {...props}
+    >
+      {content}
+    </kbd>
+  )
+})
+
 type KbdShortcutProps = Omit<React.ComponentProps<"span">, "children"> & {
   disabled?: boolean
   keys: readonly string[]
@@ -68,18 +125,7 @@ const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
     },
     ref
   ) {
-    const [resolvedPlatform, setResolvedPlatform] = React.useState<
-      Exclude<ShortcutPlatform, "auto">
-    >(platform === "auto" ? "mac" : platform)
-
-    React.useEffect(() => {
-      if (platform !== "auto") {
-        setResolvedPlatform(platform)
-        return
-      }
-
-      setResolvedPlatform(detectShortcutPlatform())
-    }, [platform])
+    const resolvedPlatform = useShortcutPlatform(platform)
 
     const resolvedKeys = keys.map((key) =>
       resolveShortcutKey(key, resolvedPlatform)
@@ -117,6 +163,25 @@ const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
   }
 )
 
+function useShortcutPlatform(
+  platform: ShortcutPlatform
+): Exclude<ShortcutPlatform, "auto"> {
+  const [resolvedPlatform, setResolvedPlatform] = React.useState<
+    Exclude<ShortcutPlatform, "auto">
+  >(platform === "auto" ? "mac" : platform)
+
+  React.useEffect(() => {
+    if (platform !== "auto") {
+      setResolvedPlatform(platform)
+      return
+    }
+
+    setResolvedPlatform(detectShortcutPlatform())
+  }, [platform])
+
+  return resolvedPlatform
+}
+
 function detectShortcutPlatform(): Exclude<ShortcutPlatform, "auto"> {
   if (typeof navigator === "undefined") return "mac"
   const platform = navigator.platform.toLowerCase()
@@ -147,5 +212,34 @@ function readableShortcutKey(key: string) {
   return key
 }
 
-export { Kbd, KbdShortcut, kbdVariants }
-export type { KbdProps, KbdShortcutProps, ShortcutPlatform }
+function formatShortcutKeys(
+  keys: readonly string[],
+  platform: Exclude<ShortcutPlatform, "auto">
+) {
+  if (platform === "mac" && keys.slice(0, -1).every(isMacShortcutSymbol)) {
+    return keys.join("")
+  }
+
+  return keys.join(" ")
+}
+
+function isMacShortcutSymbol(key: string) {
+  return ["⌘", "⌥", "⇧", "⌃"].includes(key)
+}
+
+function readableShortcutText(value: string) {
+  return value
+    .replaceAll("⌘", "Command ")
+    .replaceAll("⌥", "Option ")
+    .replaceAll("⇧", "Shift ")
+    .replaceAll("⌃", "Control ")
+    .trim()
+}
+
+export { Kbd, KbdShortcut, Shortcut, kbdVariants, shortcutVariants }
+export type {
+  KbdProps,
+  KbdShortcutProps,
+  ShortcutPlatform,
+  ShortcutProps,
+}

package/registry/components/menu.tsx

@@ -90,7 +90,7 @@ const menuItemIconVariants = cva(
     variants: {
       position: {
         leading:
-          "h-[var(--bh-menu-leading-icon-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
+          "h-[var(--bh-menu-leading-icon-slot-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
         trailing:
           "size-[var(--bh-menu-trailing-icon-size)] text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-menu-trailing-icon-size)]",
       },

package/registry/components/modal.tsx

@@ -39,7 +39,7 @@ type ConfirmModalMessages = {
 
 const modalSurfaceBaseClassName = [
   "flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-modal-width)] max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
-  "[--bh-modal-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--shadow-lg)]",
+  "[--bh-modal-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--shadow-2xl)]",
 ]
 
 const modalSizeVariants = {

package/registry/components/pagination.tsx

@@ -111,7 +111,7 @@ const paginationControlVariants = cva(
     "outline-none transition-[background-color,border-color,color,box-shadow]",
     "focus-visible:shadow-[var(--shadow-pagination-focus)]",
     "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
-    "[&_svg]:pointer-events-none [&_svg]:size-[var(--bh-pagination-icon-size)] [&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   ],
   {
@@ -507,13 +507,18 @@ function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
   const Icon = type === "previous" ? ChevronLeftIcon : ChevronRightIcon
 
   return (
-    <Icon
-      aria-hidden="true"
-      data-rtl-flip="true"
+    <span
       data-slot="pagination-icon"
-      focusable="false"
-      strokeWidth="var(--bh-icon-stroke-225)"
-    />
+      className="inline-flex size-[var(--bh-pagination-icon-slot-size)] shrink-0 items-center justify-center"
+    >
+      <Icon
+        aria-hidden="true"
+        className="size-[var(--bh-pagination-icon-size)]"
+        data-rtl-flip="true"
+        focusable="false"
+        strokeWidth="var(--bh-icon-stroke-225)"
+      />
+    </span>
   )
 }
 

package/registry/components/radio-card.tsx

@@ -579,7 +579,7 @@ function RadioCardMedia({
     <span
       data-slot="radio-card-icon"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)]",
+        "flex size-[var(--bh-icon-slot-size-default)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)] [&_svg]:size-[var(--bh-icon-size-default)]",
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >
@@ -592,7 +592,6 @@ function RadioCardUserIcon() {
   return (
     <UserIcon
       aria-hidden="true"
-      className="size-[var(--bh-space-4xl-20)]"
       strokeWidth="var(--bh-icon-stroke-200)"
     />
   )

package/registry/components/select.tsx

@@ -783,7 +783,7 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
         {selectedMedia ? (
           <span
             data-slot="select-menu-item-media"
-            className="flex shrink-0 items-center ps-[var(--bh-select-media-inset)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)] group-data-[disabled=true]/select-menu-item:opacity-[var(--bh-opacity-60)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-slot-size)]"
+            className="flex shrink-0 items-center ps-[var(--bh-select-media-inset)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)] group-data-[disabled=true]/select-menu-item:opacity-[var(--bh-opacity-60)] [&_svg:not([class*='size-'])]:size-[var(--bh-icon-size-default)]"
           >
             {selectedMedia}
           </span>