banhaten 0.1.3 → 0.2.0

package/registry/components/card.tsx

@@ -121,15 +121,15 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
   moreButtonLabel = "Open card menu",
   onMoreClick,
   orientation = "vertical",
-  primaryActionLabel = "Button",
+  primaryActionLabel,
   primaryActionProps,
-  secondaryActionLabel = "Button",
+  secondaryActionLabel,
   secondaryActionProps,
-  showDescription = true,
-  showFooter = true,
-  showImage = true,
-  showMoreButton = true,
-  showSubtitle = true,
+  showDescription,
+  showFooter,
+  showImage,
+  showMoreButton,
+  showSubtitle,
   subtitle,
   title,
   type = "leading-image",
@@ -142,13 +142,15 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
       ? "leading-image"
       : type ?? "leading-image"
   const fullImage = cardOrientation === "vertical" && cardType === "full-image"
-  const renderedTitle = title ?? "Card Title"
-  const renderedSubtitle = subtitle ?? "Card Subtitle"
-  const renderedDescription =
-    description ??
-    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx."
+  const shouldShowDescription = showDescription ?? description !== undefined
+  const shouldShowFooter =
+    showFooter ??
+    Boolean(footer || actions || primaryActionLabel || secondaryActionLabel)
+  const shouldShowImage = showImage ?? Boolean(imageSrc)
+  const shouldShowMoreButton = showMoreButton ?? Boolean(onMoreClick)
+  const shouldShowSubtitle = showSubtitle ?? subtitle !== undefined
 
-  const media = showImage ? (
+  const media = shouldShowImage ? (
     <CardMedia
       imageAlt={imageAlt}
       imageSrc={imageSrc}
@@ -160,7 +162,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
     <CardBody
       actions={actions}
       breakpoint={cardBreakpoint}
-      description={renderedDescription}
+      description={description}
       footer={footer}
       moreButtonLabel={moreButtonLabel}
       onMoreClick={onMoreClick}
@@ -169,12 +171,12 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
       primaryActionProps={primaryActionProps}
       secondaryActionLabel={secondaryActionLabel}
       secondaryActionProps={secondaryActionProps}
-      showDescription={showDescription}
-      showFooter={showFooter && !fullImage}
-      showMoreButton={showMoreButton}
-      showSubtitle={showSubtitle}
-      subtitle={renderedSubtitle}
-      title={renderedTitle}
+      showDescription={shouldShowDescription}
+      showFooter={shouldShowFooter && !fullImage}
+      showMoreButton={shouldShowMoreButton}
+      showSubtitle={shouldShowSubtitle}
+      subtitle={subtitle}
+      title={title}
     />
   )
 
@@ -206,10 +208,10 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
             breakpoint={cardBreakpoint}
             moreButtonLabel={moreButtonLabel}
             onMoreClick={onMoreClick}
-            showMoreButton={showMoreButton}
-            showSubtitle={showSubtitle}
-            subtitle={renderedSubtitle}
-            title={renderedTitle}
+            showMoreButton={shouldShowMoreButton}
+            showSubtitle={shouldShowSubtitle}
+            subtitle={subtitle}
+            title={title}
           />
         </>
       ) : cardOrientation === "horizontal" &&
@@ -275,9 +277,9 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
   function CardActions({
     children,
     className,
-    primaryLabel = "Button",
+    primaryLabel,
     primaryProps,
-    secondaryLabel = "Button",
+    secondaryLabel,
     secondaryProps,
     ...props
   }, ref) {
@@ -286,23 +288,28 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
         data-slot="card-actions"
         ref={ref}
         className={cn(
-          "grid w-full max-w-[var(--bh-card-actions-max-width)] grid-cols-2 gap-[var(--bh-space-xl-12)]",
+          "grid w-full max-w-[var(--bh-card-actions-max-width)] gap-[var(--bh-space-xl-12)]",
+          primaryLabel && secondaryLabel ? "grid-cols-2" : "grid-cols-1",
           className
         )}
         {...props}
       >
         {children ?? (
           <>
-            <Button {...primaryProps} className={cn("min-w-0", primaryProps?.className)}>
-              {primaryLabel}
-            </Button>
-            <Button
-              variant="soft"
-              {...secondaryProps}
-              className={cn("min-w-0", secondaryProps?.className)}
-            >
-              {secondaryLabel}
-            </Button>
+            {primaryLabel ? (
+              <Button {...primaryProps} className={cn("min-w-0", primaryProps?.className)}>
+                {primaryLabel}
+              </Button>
+            ) : null}
+            {secondaryLabel ? (
+              <Button
+                variant="soft"
+                {...secondaryProps}
+                className={cn("min-w-0", secondaryProps?.className)}
+              >
+                {secondaryLabel}
+              </Button>
+            ) : null}
           </>
         )}
       </div>
@@ -331,21 +338,21 @@ function CardBody({
 }: {
   actions?: React.ReactNode
   breakpoint: CardBreakpoint
-  description: React.ReactNode
+  description?: React.ReactNode
   footer?: React.ReactNode
   moreButtonLabel: string
   onMoreClick?: React.MouseEventHandler<HTMLButtonElement>
   orientation: CardOrientation
-  primaryActionLabel: React.ReactNode
+  primaryActionLabel?: React.ReactNode
   primaryActionProps?: ButtonProps
-  secondaryActionLabel: React.ReactNode
+  secondaryActionLabel?: React.ReactNode
   secondaryActionProps?: ButtonProps
   showDescription: boolean
   showFooter: boolean
   showMoreButton: boolean
   showSubtitle: boolean
-  subtitle: React.ReactNode
-  title: React.ReactNode
+  subtitle?: React.ReactNode
+  title?: React.ReactNode
 }) {
   const horizontal = orientation === "horizontal"
 
@@ -378,7 +385,7 @@ function CardBody({
           title={title}
           subtitleClassName={getSubtitleClassName(breakpoint)}
         />
-        {showDescription ? (
+        {showDescription && description !== undefined ? (
           <p
             data-slot="card-description"
             dir="auto"
@@ -423,8 +430,8 @@ function CardFullImageContent({
   onMoreClick?: React.MouseEventHandler<HTMLButtonElement>
   showMoreButton: boolean
   showSubtitle: boolean
-  subtitle: React.ReactNode
-  title: React.ReactNode
+  subtitle?: React.ReactNode
+  title?: React.ReactNode
 }) {
   return (
     <div
@@ -475,20 +482,22 @@ function CardHeader({
       className="flex min-w-0 items-start gap-[var(--bh-space-3xl-16)]"
     >
       <div className="flex min-w-0 flex-1 flex-col gap-[var(--bh-space-xxs-2)]">
-        <h3
-          data-slot="card-title"
-          dir="auto"
-          className={cn(
-            "min-w-0 break-words text-[length:var(--bh-text-heading-sm-semibold-font-size)]",
-            "font-[var(--bh-text-heading-sm-semibold-font-weight)]",
-            "leading-[var(--bh-text-heading-sm-semibold-line-height)]",
-            "tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)]",
-            onImage ? "text-[var(--bh-content-on-color)]" : "text-[var(--bh-content-default)]"
-          )}
-        >
-          {title}
-        </h3>
-        {showSubtitle ? (
+        {title !== undefined ? (
+          <h3
+            data-slot="card-title"
+            dir="auto"
+            className={cn(
+              "min-w-0 break-words text-[length:var(--bh-text-heading-sm-semibold-font-size)]",
+              "font-[var(--bh-text-heading-sm-semibold-font-weight)]",
+              "leading-[var(--bh-text-heading-sm-semibold-line-height)]",
+              "tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)]",
+              onImage ? "text-[var(--bh-content-on-color)]" : "text-[var(--bh-content-default)]"
+            )}
+          >
+            {title}
+          </h3>
+        ) : null}
+        {showSubtitle && subtitle !== undefined ? (
           <p
             data-slot="card-subtitle"
             dir="auto"

package/registry/components/carousel.tsx

@@ -8,6 +8,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -15,7 +16,23 @@ type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugin = UseCarouselParameters[1]
 type CarouselOrientation = "horizontal" | "vertical"
 
+type CarouselMessages = {
+  nextSlide: string
+  previousSlide: string
+}
+
+const defaultCarouselMessages: CarouselMessages = {
+  nextSlide: "Next slide",
+  previousSlide: "Previous slide",
+}
+
+const arabicCarouselMessages: CarouselMessages = {
+  nextSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
+  previousSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
+}
+
 type CarouselProps = React.ComponentProps<"div"> & {
+  messages?: Partial<CarouselMessages>
   opts?: CarouselOptions
   orientation?: CarouselOrientation
   plugins?: CarouselPlugin
@@ -29,6 +46,8 @@ type CarouselContextValue = {
   api: CarouselApi
   canScrollNext: boolean
   canScrollPrev: boolean
+  direction: Direction
+  messages: CarouselMessages
   orientation: CarouselOrientation
   scrollNext: () => void
   scrollPrev: () => void
@@ -41,6 +60,8 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     {
       children,
       className,
+      dir,
+      messages: messageOverrides,
       opts,
       orientation = "horizontal",
       plugins,
@@ -49,15 +70,33 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     },
     ref
   ) {
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const direction = useResolvedDirection(
+      dir === "ltr" || dir === "rtl" ? dir : undefined,
+      rootRef
+    )
+    const setRootRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        rootRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
+        direction,
       },
       plugins
     )
     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
     const [canScrollNext, setCanScrollNext] = React.useState(false)
+    const messages = React.useMemo(
+      () => ({ ...defaultCarouselMessages, ...messageOverrides }),
+      [messageOverrides]
+    )
 
     const onSelect = React.useCallback((nextApi: CarouselApi) => {
       if (!nextApi) return
@@ -86,6 +125,8 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           api,
           canScrollNext,
           canScrollPrev,
+          direction,
+          messages,
           orientation,
           scrollNext,
           scrollPrev,
@@ -94,7 +135,8 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         <div
           data-orientation={orientation}
           data-slot="carousel"
-          ref={ref}
+          dir={direction}
+          ref={setRootRef}
           role="region"
           className={cn("relative", className)}
           {...props}
@@ -153,11 +195,13 @@ const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
 
 const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
   function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }, ref) {
-    const { canScrollPrev, orientation, scrollPrev } = useCarousel()
+    const { canScrollPrev, messages, orientation, scrollPrev } = useCarousel()
 
     return (
       <Button
-        aria-label="Previous slide"
+        aria-label={
+          props["aria-label"] ?? messages.previousSlide
+        }
         className={cn(
           "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
           orientation === "horizontal"
@@ -181,11 +225,13 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselButtonProps
 
 const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
   function CarouselNext({ className, variant = "outline", size = "icon", ...props }, ref) {
-    const { canScrollNext, orientation, scrollNext } = useCarousel()
+    const { canScrollNext, messages, orientation, scrollNext } = useCarousel()
 
     return (
       <Button
-        aria-label="Next slide"
+        aria-label={
+          props["aria-label"] ?? messages.nextSlide
+        }
         className={cn(
           "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
           orientation === "horizontal"
@@ -216,6 +262,7 @@ function useCarousel() {
 }
 
 export {
+  arabicCarouselMessages,
   Carousel,
   CarouselContent,
   CarouselItem,
@@ -227,6 +274,7 @@ export type {
   CarouselButtonProps,
   CarouselContentProps,
   CarouselItemProps,
+  CarouselMessages,
   CarouselOptions,
   CarouselOrientation,
   CarouselPlugin,

package/registry/components/chart.tsx

@@ -37,6 +37,17 @@ type ChartLegendContentProps = React.ComponentProps<"div"> & {
   payload?: ChartPayloadItem[]
 }
 
+const chartCategoricalTokens = [
+  "--bh-chart-categorical-brand",
+  "--bh-chart-categorical-success",
+  "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger",
+  "--bh-chart-categorical-information",
+  "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua",
+  "--bh-chart-categorical-fuchsia",
+] as const
+
 function ChartContainer({
   children,
   className,
@@ -62,6 +73,26 @@ function ChartContainer({
 const ChartTooltip = RechartsTooltip
 const ChartLegend = RechartsLegend
 
+/**
+ * Recharts clones the element passed as `content` and injects its own internal
+ * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
+ * not valid DOM attributes, so forward only what a presentational element can
+ * legitimately receive.
+ */
+function forwardableDomProps(props: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key]) =>
+        key === "id" ||
+        key === "role" ||
+        key === "style" ||
+        key === "tabIndex" ||
+        key.startsWith("aria-") ||
+        key.startsWith("data-")
+    )
+  )
+}
+
 function ChartTooltipContent({
   active,
   className,
@@ -79,7 +110,7 @@ function ChartTooltipContent({
         "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] 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-default)] shadow-[var(--shadow-popover)]",
         className
       )}
-      {...props}
+      {...forwardableDomProps(props)}
     >
       {!hideLabel && label ? (
         <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
@@ -121,7 +152,7 @@ function ChartLegendContent({
     <div
       data-slot="chart-legend"
       className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
-      {...props}
+      {...forwardableDomProps(props)}
     >
       {payload.map((item, index) => (
         <div
@@ -146,7 +177,9 @@ function getChartStyle(config?: ChartConfig): React.CSSProperties {
   return Object.entries(config).reduce<React.CSSProperties>(
     (style, [key, value], index) => ({
       ...style,
-      [`--color-${key}`]: value.color ?? `var(--bh-chart-${(index % 5) + 1})`,
+      [`--color-${key}`]:
+        value.color ??
+        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
     }),
     {}
   )

package/registry/components/checkbox.tsx

@@ -63,13 +63,13 @@ const Checkbox = React.forwardRef<
           aria-hidden="true"
           className="size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:hidden"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
         <MinusIcon
           aria-hidden="true"
           className="hidden size-[var(--bh-checkbox-icon-size)] group-data-[state=indeterminate]/checkbox:block"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
@@ -231,7 +231,7 @@ function CheckboxCardIndicator({
           aria-hidden="true"
           className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-content-on-color)]"
           focusable="false"
-          strokeWidth={3}
+          strokeWidth="var(--bh-icon-stroke-300)"
         />
       ) : null}
     </span>

package/registry/components/collapsible.tsx

@@ -38,7 +38,7 @@ const CollapsibleTrigger = React.forwardRef<
       <ChevronDownIcon
         aria-hidden="true"
         className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-subtle)] transition-transform group-data-[state=open]/collapsible-trigger:rotate-180"
-        strokeWidth={2}
+        strokeWidth="var(--bh-icon-stroke-200)"
       />
     </CollapsiblePrimitive.Trigger>
   )

package/registry/components/command.tsx

@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
         <SearchIcon
           aria-hidden="true"
           className="size-[var(--bh-space-5xl-24)] shrink-0 text-[var(--bh-content-muted)]"
-          strokeWidth={2}
+          strokeWidth="var(--bh-icon-stroke-200)"
         />
         <CommandPrimitive.Input
           data-slot="command-input"

package/registry/components/context-menu.tsx

@@ -53,7 +53,7 @@ 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)]"
+  "relative flex min-h-[var(--bh-menu-item-default-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>,