banhaten 0.1.2 → 0.1.3

package/registry/components/social-button.tsx

@@ -3,12 +3,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import {
   AppleIcon,
-  ChromeIcon,
-  FacebookIcon,
-  LinkedinIcon,
   MessageCircleIcon,
-  TwitterIcon,
-  type LucideIcon,
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -23,6 +18,11 @@ type SocialPlatform =
 
 type SocialButtonVariant = "solid" | "outline"
 type SocialButtonSize = "default" | "icon"
+type SocialButtonIconComponent = React.ComponentType<
+  React.SVGProps<SVGSVGElement> & {
+    strokeWidth?: number
+  }
+>
 
 type SocialPlatformConfig = {
   label: string
@@ -276,12 +276,76 @@ function SocialButtonIcon({
   )
 }
 
-const socialButtonIcons: Record<SocialPlatform, LucideIcon> = {
+function FacebookBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M13.5 21v-7h2.35l.45-3h-2.8V9.06c0-.82.4-1.62 1.68-1.62h1.27V4.89S15.3 4.7 14.2 4.7c-2.3 0-3.8 1.39-3.8 3.9V11H7.84v3h2.56v7h3.1Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function GoogleBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 4.75a7.25 7.25 0 1 0 5.13 12.37 6.85 6.85 0 0 0 1.87-4.72H12v2.6h4.09a3.96 3.96 0 1 1-1.08-4.1l1.84-1.84A7.2 7.2 0 0 0 12 4.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function LinkedinBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M6.7 8.9H3.9V20h2.8V8.9ZM5.3 4A1.65 1.65 0 1 0 5.3 7.3 1.65 1.65 0 0 0 5.3 4Zm14.8 9.85c0-3.05-1.63-4.47-3.8-4.47a3.28 3.28 0 0 0-2.98 1.64h-.04V8.9h-2.69V20h2.8v-5.5c0-1.45.28-2.85 2.07-2.85 1.76 0 1.78 1.65 1.78 2.94V20h2.86v-6.15Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function TwitterBrandIcon({
+  strokeWidth: _strokeWidth,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  strokeWidth?: number
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="m15.3 10.9 5.1-5.9h-1.2l-4.43 5.14L11.23 5H7.15l5.35 7.79L7.15 19h1.2l4.68-5.43L16.77 19h4.08l-5.55-8.1Zm-1.66 1.92-.54-.78-4.31-6.15h1.86l3.49 4.98.54.78 4.52 6.46h-1.86l-3.7-5.29Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+const socialButtonIcons: Record<SocialPlatform, SocialButtonIconComponent> = {
   apple: AppleIcon,
-  facebook: FacebookIcon,
-  google: ChromeIcon,
-  linkedin: LinkedinIcon,
-  twitter: TwitterIcon,
+  facebook: FacebookBrandIcon,
+  google: GoogleBrandIcon,
+  linkedin: LinkedinBrandIcon,
+  twitter: TwitterBrandIcon,
   whatsapp: MessageCircleIcon,
 }
 

package/registry/components/{expanded/tabs.css → tabs.css}

@@ -25,11 +25,11 @@
   --tabs-shadow-selected: var(--shadow-button-soft);
 
   box-sizing: border-box;
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
   overflow-y: visible;
   color: var(--tabs-content-subtle);
   font-family: var(--bh-font-family);
@@ -39,100 +39,109 @@
   line-height: var(--bh-text-body-md-regular-line-height);
   letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
 }
-
-.ds-tabs *,
-.ds-tabs *::before,
-.ds-tabs *::after {
-  box-sizing: border-box;
-}
-
-.ds-tabs--full {
-  width: 100%;
-}
-
-.ds-tabs--segment,
-.ds-tabs--rounded {
-  align-items: center;
-  gap: var(--tabs-space-xxs);
-  padding: var(--tabs-space-xxs);
-  background: var(--tabs-bg-neutral-subtle);
-}
-
-.ds-tabs--segment {
-  border-radius: var(--tabs-radius-full);
-}
-
-.ds-tabs--rounded {
-  border-radius: var(--tabs-radius-lg);
-}
-
+
+.ds-tabs *,
+.ds-tabs *::before,
+.ds-tabs *::after {
+  box-sizing: border-box;
+}
+
+.ds-tabs--full {
+  width: 100%;
+}
+
+.ds-tabs--segment,
+.ds-tabs--rounded {
+  align-items: center;
+  gap: var(--tabs-space-xxs);
+  padding: var(--tabs-space-xxs);
+  background: var(--tabs-bg-neutral-subtle);
+}
+
+.ds-tabs--segment {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded {
+  border-radius: var(--tabs-radius-lg);
+}
+
 .ds-tabs--underline {
   align-items: center;
   gap: var(--tabs-space-3xl);
   border-bottom: var(--bh-space-xxxs-1) solid var(--tabs-border-default);
 }
-
-.ds-tabs__tab {
-  appearance: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  color: var(--tabs-content-subtle);
-  background: transparent;
-  font: inherit;
-  text-align: start;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
+
+.ds-tabs__tab {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: var(--tabs-content-subtle);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ds-tabs__tab:disabled,
+.ds-tabs__tab[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--bh-opacity-disabled);
+}
+
 .ds-tabs__tab:focus-visible {
   outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
   outline-offset: var(--tabs-space-xxs);
 }
-
-.ds-tabs__content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--tabs-space-xs);
-  min-width: 0;
-}
-
-.ds-tabs__label {
-  display: block;
-  flex: 0 0 auto;
-  padding-inline: var(--tabs-label-padding-x);
-  color: currentColor;
-  font: inherit;
-  white-space: nowrap;
-  word-break: break-word;
-}
-
-.ds-tabs__tab[aria-selected="true"] {
+
+.ds-tabs__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tabs-space-xs);
+  min-width: 0;
+}
+
+.ds-tabs__label {
+  display: block;
+  flex: 0 0 auto;
+  padding-inline: var(--tabs-label-padding-x);
+  color: currentColor;
+  font: inherit;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.ds-tabs__tab[aria-selected="true"],
+.ds-tabs__tab[data-state="active"] {
   color: var(--tabs-content-default);
   font-weight: var(--bh-font-weight-medium);
 }
-
-.ds-tabs--segment .ds-tabs__tab,
-.ds-tabs--rounded .ds-tabs__tab {
-  gap: var(--tabs-space-xs);
-}
-
-.ds-tabs--segment .ds-tabs__tab {
-  border-radius: var(--tabs-radius-full);
-}
-
-.ds-tabs--rounded .ds-tabs__tab {
-  border-radius: var(--tabs-radius-md);
-}
-
+
+.ds-tabs--segment .ds-tabs__tab,
+.ds-tabs--rounded .ds-tabs__tab {
+  gap: var(--tabs-space-xs);
+}
+
+.ds-tabs--segment .ds-tabs__tab {
+  border-radius: var(--tabs-radius-full);
+}
+
+.ds-tabs--rounded .ds-tabs__tab {
+  border-radius: var(--tabs-radius-md);
+}
+
 .ds-tabs--segment .ds-tabs__tab[aria-selected="true"],
-.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"] {
+.ds-tabs--segment .ds-tabs__tab[data-state="active"],
+.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--rounded .ds-tabs__tab[data-state="active"] {
   background: var(--tabs-bg-default);
   box-shadow: var(--tabs-shadow-selected);
 }
@@ -154,20 +163,21 @@
   min-height: var(--tabs-height-segment-xs);
   padding: var(--tabs-space-xs) var(--tabs-space-lg);
 }
-
-.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
-.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
-  flex: 1 0 0;
-}
-
+
+.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
 .ds-tabs--underline .ds-tabs__tab {
   border-bottom: var(--tabs-space-xxs) solid transparent;
 }
-
-.ds-tabs--underline .ds-tabs__tab[aria-selected="true"] {
-  border-bottom-color: var(--tabs-content-brand);
-}
-
+
+.ds-tabs--underline .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--underline .ds-tabs__tab[data-state="active"] {
+  border-bottom-color: var(--tabs-content-brand);
+}
+
 .ds-tabs--underline.ds-tabs--md .ds-tabs__tab {
   min-height: var(--tabs-height-underline-md);
   padding-block: var(--tabs-space-md);
@@ -182,16 +192,27 @@
 .ds-tabs--underline.ds-tabs--xs .ds-tabs__content {
   height: var(--tabs-height-underline-content);
 }
-
-.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
-  flex: 1 0 0;
-}
-
-.ds-tabs--rtl .ds-tabs__tab {
-  text-align: right;
-}
-
+
+.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
+  flex: 1 0 0;
+}
+
+.ds-tabs--rtl .ds-tabs__tab {
+  text-align: start;
+}
+
 .ds-tabs--rtl {
   --tabs-label-padding-x: var(--tabs-space-xxs);
   font-family: var(--bh-font-family);
 }
+
+.ds-tabs__panel {
+  margin-top: var(--tabs-space-3xl);
+  color: var(--tabs-content-default);
+  outline: none;
+}
+
+.ds-tabs__panel:focus-visible {
+  outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
+  outline-offset: var(--tabs-space-xxs);
+}

package/registry/components/tabs.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+import "./tabs.css"
+
+export type TabsVariant = "underline" | "segment" | "rounded"
+export type TabsSize = "md" | "sm" | "xs"
+
+export type TabsItem = {
+  content?: React.ReactNode
+  disabled?: boolean
+  label: React.ReactNode
+  value?: string
+}
+
+type RadixTabsRootProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Root
+>
+
+type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root>
+type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  fullWidth?: boolean
+  size?: TabsSize
+  variant?: TabsVariant
+}
+type TabsTriggerProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+>
+type TabsContentProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+>
+
+type TabsProps = Omit<
+  RadixTabsRootProps,
+  "defaultValue" | "dir" | "onValueChange" | "value"
+> & {
+  activeIndex?: number
+  ariaLabel?: string
+  className?: string
+  defaultActiveIndex?: number
+  defaultValue?: string
+  dir?: "ltr" | "rtl"
+  fullWidth?: boolean
+  items?: Array<string | TabsItem>
+  onActiveIndexChange?: (index: number) => void
+  onValueChange?: (value: string) => void
+  rootClassName?: string
+  size?: TabsSize
+  value?: string
+  variant?: TabsVariant
+}
+
+const TabsRoot = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(function TabsList(
+  {
+    className,
+    dir,
+    fullWidth = false,
+    size = "md",
+    variant = "underline",
+    ...props
+  },
+  ref
+) {
+  const isRtl = dir === "rtl"
+
+  return (
+    <TabsPrimitive.List
+      data-size={size}
+      data-slot="tabs-list"
+      data-variant={variant}
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "ds-tabs",
+        `ds-tabs--${variant}`,
+        `ds-tabs--${size}`,
+        fullWidth ? "ds-tabs--full" : "ds-tabs--hug",
+        isRtl ? "ds-tabs--rtl" : "ds-tabs--ltr",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(function TabsTrigger({ children, className, dir = "auto", ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      ref={ref}
+      className={cn("ds-tabs__tab", className)}
+      {...props}
+    >
+      <span className="ds-tabs__content">
+        <span className="ds-tabs__label" dir={dir}>
+          {children}
+        </span>
+      </span>
+    </TabsPrimitive.Trigger>
+  )
+})
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      ref={ref}
+      className={cn("ds-tabs__panel", className)}
+      {...props}
+    />
+  )
+})
+
+function Tabs({
+  activeIndex,
+  ariaLabel,
+  children,
+  className = "",
+  defaultActiveIndex = 0,
+  defaultValue,
+  dir = "ltr",
+  fullWidth = false,
+  items = [],
+  onActiveIndexChange,
+  onValueChange,
+  rootClassName,
+  size = "md",
+  value,
+  variant = "underline",
+  ...props
+}: TabsProps) {
+  const normalizedItems = items.map(normalizeTabsItem)
+  const activeValue =
+    value ?? (activeIndex === undefined ? undefined : normalizedItems[activeIndex]?.value)
+  const uncontrolledDefaultValue =
+    defaultValue ??
+    normalizedItems[defaultActiveIndex]?.value ??
+    normalizedItems[0]?.value
+  const hasPanels = normalizedItems.some((item) => item.content !== undefined)
+
+  function handleValueChange(nextValue: string) {
+    onValueChange?.(nextValue)
+
+    const nextIndex = normalizedItems.findIndex((item) => item.value === nextValue)
+    if (nextIndex >= 0) {
+      onActiveIndexChange?.(nextIndex)
+    }
+  }
+
+  return (
+    <TabsRoot
+      data-slot="tabs-root"
+      defaultValue={activeValue === undefined ? uncontrolledDefaultValue : undefined}
+      dir={dir}
+      value={activeValue}
+      onValueChange={handleValueChange}
+      className={rootClassName}
+      {...props}
+    >
+      <TabsList
+        aria-label={ariaLabel}
+        className={className}
+        dir={dir}
+        fullWidth={fullWidth}
+        size={size}
+        variant={variant}
+      >
+        {normalizedItems.map((item) => (
+          <TabsTrigger
+            disabled={item.disabled}
+            key={item.value}
+            value={item.value}
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {hasPanels
+        ? normalizedItems.map((item) =>
+            item.content === undefined ? null : (
+              <TabsContent key={`${item.value}-panel`} value={item.value}>
+                {item.content}
+              </TabsContent>
+            )
+          )
+        : null}
+      {children}
+    </TabsRoot>
+  )
+}
+
+function normalizeTabsItem(item: string | TabsItem, index: number): TabsItem & {
+  value: string
+} {
+  if (typeof item === "string") {
+    return {
+      label: item,
+      value: getTabsItemValue(item, index),
+    }
+  }
+
+  return {
+    ...item,
+    value: item.value ?? getTabsItemValue(item.label, index),
+  }
+}
+
+function getTabsItemValue(label: React.ReactNode, index: number) {
+  if (typeof label !== "string") return `tab-${index}`
+
+  const slug = label
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "")
+
+  return slug || `tab-${index}`
+}
+
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger }
+export type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsRootProps,
+  TabsTriggerProps,
+}

package/registry/components/textarea.tsx

@@ -54,7 +54,7 @@ const textareaSurface = cva(
     "min-h-[var(--bh-textarea-min-height)] p-[var(--bh-textarea-padding)]",
     "transition-[background-color,box-shadow]",
     "[--bh-textarea-border:var(--bh-border-input)] [--shadow-textarea:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-textarea-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "after:pointer-events-none after:absolute after:inset-[var(--bh-textarea-focus-ring-inset)] after:rounded-[var(--bh-textarea-radius)] after:border-[length:var(--bh-textarea-focus-ring-width)] after:border-[var(--bh-border-focus)] after:opacity-0 after:content-['']",
+    "after:pointer-events-none after:absolute after:inset-[var(--bh-textarea-focus-ring-inset)] after:rounded-[var(--bh-textarea-radius)] after:border-[length:var(--bh-textarea-focus-ring-width)] after:border-[var(--bh-border-focus)] after:opacity-[var(--bh-opacity-0)] after:content-['']",
     "focus-within:after:opacity-[var(--bh-opacity-30)]",
   ],
   {