banhaten 0.2.0 → 0.3.0

package/registry/components/social-button.tsx

@@ -116,7 +116,7 @@ const arabicSocialButtonMessages: SocialButtonMessages = {
 }
 
 const socialButtonVariants = cva(
-  "group/social-button relative inline-flex items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] rtl:[--bh-social-button-width:var(--bh-social-button-width-rtl)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -184,7 +184,12 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
       ? String(visibleLabel)
       : defaultLabel
   const Comp = asChild ? Slot : "button"
-  const cssVars = getSocialButtonVars(config, selectedVariant, isIcon)
+  const cssVars = getSocialButtonVars(
+    config,
+    selectedVariant,
+    isIcon,
+    resolvedDirection
+  )
   const content = (
     <>
       <SocialButtonIcon platform={platform} />
@@ -192,7 +197,8 @@ const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(func
         <span
           data-slot="social-button-label"
           dir="auto"
-          className="min-w-0 pe-[var(--bh-social-button-label-padding-inline-end)]"
+          title={typeof visibleLabel === "string" ? visibleLabel : undefined}
+          className="min-w-0 overflow-hidden text-ellipsis pe-[var(--bh-social-button-label-padding-inline-end)]"
         >
           {visibleLabel}
         </span>
@@ -238,7 +244,8 @@ function isSimpleLabel(
 function getSocialButtonVars(
   config: SocialPlatformConfig,
   variant: SocialButtonVariant,
-  isIcon: boolean
+  isIcon: boolean,
+  direction: "ltr" | "rtl"
 ) {
   const isSolid = variant === "solid"
   const border = isSolid
@@ -262,7 +269,7 @@ function getSocialButtonVars(
     "--bh-social-button-icon": isSolid ? config.solidIcon : config.outlineIcon,
     "--bh-social-button-width": isIcon
       ? "var(--bh-social-button-height)"
-      : config.width.ltr,
+      : config.width[direction],
     "--bh-social-button-width-rtl": isIcon
       ? "var(--bh-social-button-height)"
       : config.width.rtl,

package/registry/components/table-elements.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableRootProps = React.ComponentPropsWithoutRef<"table">
+type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
+type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
+type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
+type TableHeadProps = React.ComponentPropsWithoutRef<"th">
+type TableCellProps = React.ComponentPropsWithoutRef<"td">
+type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
+
+const DataTableSurface = React.forwardRef<
+  HTMLDivElement,
+  DataTableSurfaceProps
+>(function DataTableSurface({ className, role = "table", ...props }, ref) {
+  return (
+    <div
+      data-slot="data-table-surface"
+      ref={ref}
+      role={role}
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+})
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
+  function TableRoot({ className, ...props }, ref) {
+    return (
+      <table
+        data-slot="table-root"
+        ref={ref}
+        className={cn("w-full border-collapse text-start", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  TableSectionProps
+>(function TableHeader({ className, ...props }, ref) {
+  return (
+    <thead
+      data-slot="table-header"
+      ref={ref}
+      className={cn("text-start", className)}
+      {...props}
+    />
+  )
+})
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ className, ...props }, ref) {
+    return (
+      <tbody
+        data-slot="table-body"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableRowElement = React.forwardRef<
+  HTMLTableRowElement,
+  TableRowElementProps
+>(function TableRowElement({ className, ...props }, ref) {
+  return (
+    <tr
+      data-slot="table-row"
+      ref={ref}
+      className={className}
+      {...props}
+    />
+  )
+})
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  function TableHead({ className, scope = "col", ...props }, ref) {
+    return (
+      <th
+        data-slot="table-head"
+        ref={ref}
+        className={cn("text-start", className)}
+        scope={scope}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    return (
+      <td
+        data-slot="table-cell"
+        ref={ref}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  DataTableSurface,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRowElement,
+}
+export type {
+  DataTableSurfaceProps,
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRootProps,
+  TableRowElementProps,
+  TableSectionProps,
+}

package/registry/components/tabs.tsx

@@ -154,7 +154,6 @@ function Tabs({
     defaultValue ??
     normalizedItems[defaultActiveIndex]?.value ??
     normalizedItems[0]?.value
-  const hasPanels = normalizedItems.some((item) => item.content !== undefined)
 
   function handleValueChange(nextValue: string) {
     onValueChange?.(nextValue)
@@ -194,15 +193,11 @@ function Tabs({
           </TabsTrigger>
         ))}
       </TabsList>
-      {hasPanels
-        ? normalizedItems.map((item) =>
-            item.content === undefined ? null : (
-              <TabsContent key={`${item.value}-panel`} value={item.value}>
-                {item.content}
-              </TabsContent>
-            )
-          )
-        : null}
+      {normalizedItems.map((item) => (
+        <TabsContent key={`${item.value}-panel`} value={item.value}>
+          {item.content ?? null}
+        </TabsContent>
+      ))}
       {children}
     </TabsRoot>
   )

package/registry/components/tag.tsx

@@ -348,7 +348,7 @@ function TagAvatar({
     <span
       data-slot="tag-avatar"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-default)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-color)]",
+        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-bold)] text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] text-[var(--bh-content-on-neutral)]",
         className
       )}
       {...props}

package/registry/components/toggle.tsx

@@ -78,7 +78,7 @@ const Toggle = React.forwardRef<
     >
       <SwitchPrimitive.Thumb
         data-slot="toggle-thumb"
-        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-component-default)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
+        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-md)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
       >
         {showIcon ? (
           <span
@@ -190,7 +190,7 @@ const ToggleField = React.forwardRef<HTMLDivElement, ToggleFieldProps>(
             data-slot="toggle-field-description"
             dir="auto"
             id={descriptionId}
-            className="w-full min-w-0 break-words 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)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/toggle-field:text-[var(--bh-content-disabled)]"
+            className="w-full min-w-0 break-words 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)] text-[var(--bh-content-subtle)]"
           >
             {description}
           </span>

package/registry/components/toolbar.tsx

@@ -39,7 +39,7 @@ const toolbarVariants = cva(
 )
 
 const toolbarSectionVariants = cva(
-  "flex min-w-0 items-center gap-[var(--bh-space-xl-12)]",
+  "flex max-w-full min-w-0 items-center gap-[var(--bh-space-xl-12)]",
   {
     variants: {
       align: {
@@ -49,8 +49,8 @@ const toolbarSectionVariants = cva(
         between: "justify-between",
       },
       grow: {
-        true: "flex-1",
-        false: "shrink-0",
+        true: "flex-[1_1_var(--bh-space-19xl-384)]",
+        false: "flex-[0_1_auto]",
       },
       stack: {
         true: "flex-col items-stretch",
@@ -58,14 +58,14 @@ const toolbarSectionVariants = cva(
       },
       wrap: {
         true: "flex-wrap",
-        false: "",
+        false: "overflow-x-auto",
       },
     },
     defaultVariants: {
       align: "start",
       grow: false,
       stack: false,
-      wrap: false,
+      wrap: true,
     },
   }
 )

package/registry/components/tooltip.tsx

@@ -38,7 +38,7 @@ const tooltipContentVariants = cva(
         dark:
           "[--bh-tooltip-bg:var(--bh-bg-always-dark)] [--bh-tooltip-border:transparent] [--bh-tooltip-close-fg:var(--bh-content-on-color)] [--bh-tooltip-fg:var(--bh-content-on-color)] [--bh-tooltip-shadow:none] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-soft)] [--bh-tooltip-shortcut-border:var(--bh-border-inverse-subtle)]",
         default:
-          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--shadow-component-default)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
+          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--shadow-lg)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
       },
       size: {
         sm:

package/registry/examples/avatar-demo.tsx

@@ -8,6 +8,7 @@ import {
   AvatarImage,
   AvatarStatus,
 } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
 import { PlusIcon } from "lucide-react"
 
 const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
@@ -84,13 +85,15 @@ export function AvatarDemo() {
           ))}
           <AvatarGroupCount size="md">+10</AvatarGroupCount>
         </AvatarGroup>
-        <Avatar
+        <Button
           aria-label="Add member"
-          className="border border-dashed border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] text-[var(--bh-content-subtle)]"
-          size="md"
+          className="size-[var(--bh-avatar-size-md)] rounded-[var(--bh-radius-full)] border-dashed"
+          size="icon-sm"
+          type="button"
+          variant="outline"
         >
           <PlusIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" />
-        </Avatar>
+        </Button>
       </div>
 
       <div className="flex items-center gap-[var(--bh-space-xl-12)]">

package/registry/examples/expanded/activity-heatmap-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  ActivityHeatmap,
+  type ActivityHeatmapItem,
+  type ActivityHeatmapLevel,
+} from "@/components/ui/expanded/ActivityHeatmap"
+
+const activityItems: ActivityHeatmapItem[] = Array.from(
+  { length: 39 * 7 },
+  (_, index) => {
+    const column = Math.floor(index / 7)
+    const row = index % 7
+    const level = ((column * 11 + row * 7 + column * row * 3) % 5) as ActivityHeatmapLevel
+
+    return {
+      id: `activity-${index}`,
+      label: `Activity level ${level} of 4`,
+      level,
+    }
+  }
+)
+
+export function ActivityHeatmapDemo() {
+  return (
+    <ActivityHeatmap
+      ariaLabel="Weekly activity over the last 39 weeks"
+      items={activityItems}
+    />
+  )
+}

package/registry/examples/expanded/breadcrumbs-demo.tsx

@@ -30,16 +30,16 @@ const rtlBreadcrumbItems: BreadcrumbItem[] = [
 export function BreadcrumbsDemo() {
   return (
     <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <Breadcrumbs aria-label="Breadcrumb" items={breadcrumbItems} overflowLabel="More" />
+      <Breadcrumbs aria-label="Default breadcrumb" items={breadcrumbItems} overflowLabel="More" />
       <Breadcrumbs
-        aria-label="Breadcrumb"
+        aria-label="Raised breadcrumb"
         items={breadcrumbItems}
         overflowLabel="More"
         separator="chevron"
         style="raised"
       />
       <Breadcrumbs
-        aria-label="Breadcrumb"
+        aria-label="Collapsed breadcrumb"
         items={longBreadcrumbItems}
         maxItems={4}
         overflowLabel="More"

package/registry/examples/pagination-demo.tsx

@@ -6,14 +6,14 @@ import {
 export function PaginationDemo() {
   return (
     <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Pagination />
-      <Pagination variant="ghost" />
+      <Pagination aria-label="Soft numeric pagination" />
+      <Pagination aria-label="Ghost numeric pagination" variant="ghost" />
 
-      <Pagination type="simple" />
-      <Pagination type="summary" />
+      <Pagination aria-label="Simple pagination" type="simple" />
+      <Pagination aria-label="Summary pagination" type="summary" />
 
       <div dir="rtl">
-        <Pagination dir="rtl" messages={arabicPaginationMessages} />
+        <Pagination aria-label="ترقيم الصفحات العربية" dir="rtl" messages={arabicPaginationMessages} />
       </div>
     </div>
   )

package/registry/examples/sidebar-demo.tsx

@@ -47,8 +47,10 @@ export function SidebarDemo() {
           <SidebarMenuButton icon={<SettingsIcon />}>Admin</SidebarMenuButton>
         </SidebarFooter>
       </Sidebar>
-      <SidebarInset className="grid place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
-        App content
+      <SidebarInset asChild>
+        <div className="grid min-w-0 flex-1 place-items-center bg-[var(--bh-bg-subtle)] p-[var(--bh-space-4xl-20)] text-sm text-[var(--bh-content-subtle)]">
+          App content
+        </div>
       </SidebarInset>
     </SidebarProvider>
   )