banhaten 0.5.0 → 0.6.0

package/registry/components/app-header.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils"
+
+type AppHeaderProps = React.ComponentProps<"header">
+type AppHeaderSectionProps = React.ComponentProps<"div">
+type AppHeaderSearchProps = React.ComponentProps<"form">
+type AppHeaderActionSize = "sm" | "md"
+type AppHeaderActionProps = React.ComponentProps<"button"> & {
+  asChild?: boolean
+  icon?: React.ReactNode
+  size?: AppHeaderActionSize
+}
+
+/** Workspace bar above page content: a location trail at the start and workspace tools at the end. */
+function AppHeader({ className, ...props }: AppHeaderProps) {
+  return (
+    <header
+      data-slot="app-header"
+      className={cn(
+        // The rule is an inset shadow, like a Figma inside stroke, so content centers on the full height.
+        "flex min-h-[var(--bh-app-header-height)] w-full min-w-0 shrink-0 items-center gap-[var(--bh-app-header-gap)] bg-[var(--bh-app-header-bg)] px-[var(--bh-app-header-padding-x)] text-[var(--bh-content-default)] shadow-[inset_0_calc(var(--bh-border-width-default)*-1)_0_0_var(--bh-app-header-border)]",
+        "[--bh-breadcrumbs-current-content:var(--bh-app-header-location-content)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Flexible leading region for Breadcrumbs or a short location label. It keeps a minimum width so search shrinks first. */
+function AppHeaderStart({ className, ...props }: AppHeaderSectionProps) {
+  return (
+    <div
+      data-slot="app-header-start"
+      className={cn(
+        "flex min-w-[min(var(--bh-app-header-start-min-width),100%)] flex-1 items-center gap-[var(--bh-app-header-start-gap)]",
+        "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-app-header-location-content)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Trailing group of search and actions, spaced on the header gap. */
+function AppHeaderEnd({ className, ...props }: AppHeaderSectionProps) {
+  return (
+    <div
+      data-slot="app-header-end"
+      className={cn(
+        "flex min-w-0 items-center gap-[var(--bh-app-header-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Search landmark that sizes a nested Input to the header search width. */
+function AppHeaderSearch({
+  className,
+  role = "search",
+  ...props
+}: AppHeaderSearchProps) {
+  return (
+    <form
+      data-slot="app-header-search"
+      role={role}
+      className={cn(
+        "flex w-[var(--bh-app-header-search-width)] min-w-0 max-w-full shrink items-center [--bh-input-width:100%]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Flush header action. At rest it occupies only its icon or label, as in the
+ * workspace bar design; padding and a matching negative margin extend the
+ * hover surface and pointer target past that footprint without moving it.
+ */
+const AppHeaderAction = React.forwardRef<
+  HTMLButtonElement,
+  AppHeaderActionProps
+>(function AppHeaderAction(
+  {
+    asChild = false,
+    children,
+    className,
+    icon,
+    size = "md",
+    type = "button",
+    ...props
+  },
+  ref
+) {
+  const Comp = asChild ? Slot : "button"
+  const iconOnly = icon != null && children == null
+
+  return (
+    <Comp
+      data-icon-only={iconOnly ? "true" : undefined}
+      data-size={size}
+      data-slot="app-header-action"
+      ref={ref}
+      type={asChild ? undefined : type}
+      className={cn(
+        "m-[calc(var(--bh-app-header-action-hit-inset)*-1)] inline-flex shrink-0 cursor-pointer items-center gap-[var(--bh-space-xs-4)] whitespace-nowrap rounded-[var(--bh-app-header-action-radius)] border-0 bg-transparent p-[var(--bh-app-header-action-hit-inset)] no-underline outline-none transition-[background-color,box-shadow]",
+        "hover:bg-[var(--bh-app-header-action-bg-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
+        "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-[var(--bh-content-disabled)]",
+        "[&_svg]:size-[var(--bh-app-header-icon-size)] [&_svg]:shrink-0 [&>img]:size-[var(--bh-app-header-icon-size)] [&>img]:shrink-0",
+        iconOnly
+          ? "justify-center text-[var(--bh-app-header-action-content)]"
+          : size === "sm"
+            ? "min-w-[calc(var(--bh-app-header-action-sm-min-width)+var(--bh-app-header-action-hit-inset)*2)] justify-end 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-app-header-action-sm-content)]"
+            : "justify-center text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-app-header-action-content)]",
+        className
+      )}
+      {...props}
+    >
+      {asChild ? (
+        children
+      ) : (
+        <>
+          {icon}
+          {children}
+        </>
+      )}
+    </Comp>
+  )
+})
+
+export {
+  AppHeader,
+  AppHeaderAction,
+  AppHeaderEnd,
+  AppHeaderSearch,
+  AppHeaderStart,
+}
+export type {
+  AppHeaderActionProps,
+  AppHeaderActionSize,
+  AppHeaderProps,
+  AppHeaderSearchProps,
+  AppHeaderSectionProps,
+}

package/registry/components/aspect-ratio.tsx

@@ -1,30 +1,30 @@
-"use client"
-
-import * as React from "react"
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-import { cn } from "@/lib/utils"
-
-type AspectRatioProps = React.ComponentPropsWithoutRef<
-  typeof AspectRatioPrimitive.Root
->
-
-const AspectRatio = React.forwardRef<
-  React.ElementRef<typeof AspectRatioPrimitive.Root>,
-  AspectRatioProps
->(function AspectRatio({ className, ...props }, ref) {
-  return (
-    <AspectRatioPrimitive.Root
-      data-slot="aspect-ratio"
-      ref={ref}
-      className={cn(
-        "overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-neutral-subtle)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-export { AspectRatio }
-export type { AspectRatioProps }
+"use client"
+
+import * as React from "react"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+import { cn } from "@/lib/utils"
+
+type AspectRatioProps = React.ComponentPropsWithoutRef<
+  typeof AspectRatioPrimitive.Root
+>
+
+const AspectRatio = React.forwardRef<
+  React.ElementRef<typeof AspectRatioPrimitive.Root>,
+  AspectRatioProps
+>(function AspectRatio({ className, ...props }, ref) {
+  return (
+    <AspectRatioPrimitive.Root
+      data-slot="aspect-ratio"
+      ref={ref}
+      className={cn(
+        "overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { AspectRatio }
+export type { AspectRatioProps }