banhaten 0.3.0 → 0.5.0

package/registry/components/accordion.tsx

@@ -1,155 +1,155 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const accordionVariants = cva("w-full", {
-  variants: {
-    variant: {
-      default:
-        "[&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0",
-      bordered:
-        "rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0 [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
-      cards:
-        "flex flex-col gap-[var(--bh-space-md-8)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-md-6)] [&>[data-slot=accordion-item]]:border [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]]:bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:shadow-[var(--shadow-accordion-item)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
-      soft: "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xs-4)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-xs-2)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-xl-12)]",
-    },
-    size: {
-      sm: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-xl-12)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-xs-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-xs-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-xs-medium-line-height)]",
-      default: "",
-      lg: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-md-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-md-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-md-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-md-medium-line-height)]",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
-})
-
-function Accordion({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root> &
-  VariantProps<typeof accordionVariants>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      data-size={size ?? "default"}
-      data-variant={variant ?? "default"}
-      className={cn(accordionVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn(
-        "overflow-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  dir,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  const triggerDirection = dir ?? getTextDirection(children)
-
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        dir={triggerDirection}
-        data-slot="accordion-trigger"
-        className={cn(
-          "flex flex-1 items-start justify-between gap-[var(--bh-space-3xl-16)] rounded-[var(--bh-radius-md-6)] py-[var(--bh-space-3xl-16)] text-start 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-content-default)] outline-none transition-[background-color,color,box-shadow] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)] [&[data-state=open]>svg]:rotate-180 [&_svg]:size-[var(--bh-space-3xl-16)]",
-          className
-        )}
-        {...props}
-      >
-        <span dir="auto" className="min-w-0 flex-1 text-start">
-          {children}
-        </span>
-        <ChevronDownIcon
-          aria-hidden="true"
-          data-slot="accordion-chevron"
-          className="pointer-events-none mt-[var(--bh-space-xxs-2)] shrink-0 text-[var(--bh-content-muted)] transition-transform duration-[var(--bh-duration-default)]"
-        />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden 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-subtle)] data-[state=closed]:animate-[accordion-up_var(--bh-duration-accordion)_var(--bh-easing-out)] data-[state=open]:animate-[accordion-down_var(--bh-duration-accordion)_var(--bh-easing-out)]"
-      {...props}
-    >
-      <div dir="auto" className={cn("pt-0 pb-[var(--bh-space-3xl-16)]", className)}>
-        {children}
-      </div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-function getTextDirection(children: React.ReactNode) {
-  const text = getNodeText(children)
-
-  for (const character of text) {
-    if (/[\u0590-\u08ff]/.test(character)) {
-      return "rtl"
-    }
-
-    if (/[A-Za-z]/.test(character)) {
-      return "ltr"
-    }
-  }
-
-  return undefined
-}
-
-function getNodeText(node: React.ReactNode): string {
-  if (typeof node === "string" || typeof node === "number") {
-    return String(node)
-  }
-
-  if (Array.isArray(node)) {
-    return node.map(getNodeText).join("")
-  }
-
-  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
-    return getNodeText(node.props.children)
-  }
-
-  return ""
-}
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  accordionVariants,
-}
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const accordionVariants = cva("w-full", {
+  variants: {
+    variant: {
+      default:
+        "[&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0",
+      bordered:
+        "rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0 [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
+      cards:
+        "flex flex-col gap-[var(--bh-space-md-8)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-md-6)] [&>[data-slot=accordion-item]]:border [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]]:bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:shadow-[var(--elevation-accordion-item)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
+      soft: "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xs-4)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-xs-2)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-xl-12)]",
+    },
+    size: {
+      sm: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-xl-12)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-xs-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-xs-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-xs-medium-line-height)]",
+      default: "",
+      lg: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-md-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-md-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-md-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-md-medium-line-height)]",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
+
+function Accordion({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root> &
+  VariantProps<typeof accordionVariants>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      data-size={size ?? "default"}
+      data-variant={variant ?? "default"}
+      className={cn(accordionVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "overflow-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const triggerDirection = dir ?? getTextDirection(children)
+
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        dir={triggerDirection}
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-[var(--bh-space-3xl-16)] rounded-[var(--bh-radius-md-6)] py-[var(--bh-space-3xl-16)] text-start 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-content-default)] outline-none transition-[background-color,color,box-shadow] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)] [&[data-state=open]>svg]:rotate-180 [&_svg]:size-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      >
+        <span dir="auto" className="min-w-0 flex-1 text-start">
+          {children}
+        </span>
+        <ChevronDownIcon
+          aria-hidden="true"
+          data-slot="accordion-chevron"
+          className="pointer-events-none mt-[var(--bh-space-xxs-2)] shrink-0 text-[var(--bh-content-muted)] transition-transform duration-[var(--bh-duration-default)]"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden 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-subtle)] data-[state=closed]:animate-[accordion-up_var(--bh-duration-accordion)_var(--bh-easing-out)] data-[state=open]:animate-[accordion-down_var(--bh-duration-accordion)_var(--bh-easing-out)]"
+      {...props}
+    >
+      <div dir="auto" className={cn("pt-0 pb-[var(--bh-space-3xl-16)]", className)}>
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+function getTextDirection(children: React.ReactNode) {
+  const text = getNodeText(children)
+
+  for (const character of text) {
+    if (/[\u0590-\u08ff]/.test(character)) {
+      return "rtl"
+    }
+
+    if (/[A-Za-z]/.test(character)) {
+      return "ltr"
+    }
+  }
+
+  return undefined
+}
+
+function getNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("")
+  }
+
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    return getNodeText(node.props.children)
+  }
+
+  return ""
+}
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionVariants,
+}