banhaten 0.3.0 → 0.5.0

package/registry/components/item.tsx

@@ -1,189 +1,189 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const itemVariants = cva(
-  [
-    "group/item flex min-w-0 items-center gap-[var(--bh-item-gap)] rounded-[var(--bh-item-radius)]",
-    "px-[var(--bh-item-padding-x)] py-[var(--bh-item-padding-y)] text-start text-[var(--bh-content-default)]",
-    "outline-none transition-[background-color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)]",
-    "aria-disabled:pointer-events-none aria-disabled:text-[var(--bh-content-disabled)]",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "min-h-[var(--bh-item-min-height-sm)]",
-        md: "min-h-[var(--bh-item-min-height-md)]",
-        lg: "min-h-[var(--bh-item-min-height-lg)]",
-      },
-      variant: {
-        default:
-          "bg-[var(--bh-bg-default)] hover:bg-[var(--bh-interactive-ghost-hover)]",
-        muted:
-          "bg-[var(--bh-bg-neutral-subtle)] hover:bg-[var(--bh-bg-neutral-soft)]",
-        outline:
-          "bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)] hover:bg-[var(--bh-bg-raised-hover)]",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "default",
-    },
-  }
-)
-
-type ItemProps = React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & {
-    asChild?: boolean
-    disabled?: boolean
-  }
-
-const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
-  {
-    asChild = false,
-    children,
-    className,
-    disabled = false,
-    size,
-    variant,
-    ...props
-  },
-  ref
-) {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      aria-disabled={disabled || undefined}
-      data-size={size ?? "md"}
-      data-slot="item"
-      data-variant={variant ?? "default"}
-      ref={ref}
-      className={cn(itemVariants({ className, size, variant }))}
-      {...props}
-    >
-      {children}
-    </Comp>
-  )
-})
-
-type ItemGroupProps = React.ComponentProps<"div">
-
-const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(
-  function ItemGroup({ className, role = "list", ...props }, ref) {
-    return (
-      <div
-        data-slot="item-group"
-        ref={ref}
-        role={role}
-        className={cn("grid min-w-0 gap-[var(--bh-item-group-gap)]", className)}
-        {...props}
-      />
-    )
-  }
-)
-
-type ItemMediaProps = React.ComponentProps<"div"> & {
-  variant?: "avatar" | "icon" | "image"
-}
-
-const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
-  function ItemMedia({ className, variant = "icon", ...props }, ref) {
-    return (
-      <div
-        aria-hidden={props["aria-label"] ? undefined : true}
-        data-slot="item-media"
-        data-variant={variant}
-        ref={ref}
-        className={cn(
-          "flex size-[var(--bh-item-media-size)] shrink-0 items-center justify-center overflow-hidden",
-          "[&_svg]:size-[var(--bh-item-icon-size)] [&_img]:size-full [&_img]:object-cover",
-          variant === "icon" &&
-            "rounded-[var(--bh-item-media-radius)] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
-          variant === "avatar" &&
-            "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-default)] text-[var(--bh-content-on-color)]",
-          variant === "image" && "rounded-[var(--bh-item-media-radius)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn("grid min-w-0 flex-1 gap-[var(--bh-item-content-gap)]", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-title"
-      dir="auto"
-      className={cn(
-        "min-w-0 break-words 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)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-description"
-      dir="auto"
-      className={cn(
-        "min-w-0 break-words 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)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn(
-        "flex shrink-0 items-center gap-[var(--bh-item-actions-gap)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemSeparator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      aria-hidden="true"
-      data-slot="item-separator"
-      className={cn("h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-  itemVariants,
-}
-export type { ItemGroupProps, ItemMediaProps, ItemProps }
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const itemVariants = cva(
+  [
+    "group/item flex min-w-0 items-center gap-[var(--bh-item-gap)] rounded-[var(--bh-item-radius)]",
+    "px-[var(--bh-item-padding-x)] py-[var(--bh-item-padding-y)] text-start text-[var(--bh-content-default)]",
+    "outline-none transition-[background-color,box-shadow] focus-visible:shadow-[var(--elevation-button-focus)]",
+    "aria-disabled:pointer-events-none aria-disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-[var(--bh-item-min-height-sm)]",
+        md: "min-h-[var(--bh-item-min-height-md)]",
+        lg: "min-h-[var(--bh-item-min-height-lg)]",
+      },
+      variant: {
+        default:
+          "bg-[var(--bh-bg-default)] hover:bg-[var(--bh-interactive-ghost-hover)]",
+        muted:
+          "bg-[var(--bh-bg-neutral-subtle)] hover:bg-[var(--bh-bg-neutral-soft)]",
+        outline:
+          "bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)] hover:bg-[var(--bh-bg-raised-hover)]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+type ItemProps = React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & {
+    asChild?: boolean
+    disabled?: boolean
+  }
+
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
+  {
+    asChild = false,
+    children,
+    className,
+    disabled = false,
+    size,
+    variant,
+    ...props
+  },
+  ref
+) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      aria-disabled={disabled || undefined}
+      data-size={size ?? "md"}
+      data-slot="item"
+      data-variant={variant ?? "default"}
+      ref={ref}
+      className={cn(itemVariants({ className, size, variant }))}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+})
+
+type ItemGroupProps = React.ComponentProps<"div">
+
+const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(
+  function ItemGroup({ className, role = "list", ...props }, ref) {
+    return (
+      <div
+        data-slot="item-group"
+        ref={ref}
+        role={role}
+        className={cn("grid min-w-0 gap-[var(--bh-item-group-gap)]", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+type ItemMediaProps = React.ComponentProps<"div"> & {
+  variant?: "avatar" | "icon" | "image"
+}
+
+const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(
+  function ItemMedia({ className, variant = "icon", ...props }, ref) {
+    return (
+      <div
+        aria-hidden={props["aria-label"] ? undefined : true}
+        data-slot="item-media"
+        data-variant={variant}
+        ref={ref}
+        className={cn(
+          "flex size-[var(--bh-item-media-size)] shrink-0 items-center justify-center overflow-hidden",
+          "[&_svg]:size-[var(--bh-item-icon-size)] [&_svg]:m-[calc((var(--bh-item-icon-slot-size)-var(--bh-item-icon-size))/2)] [&_img]:size-full [&_img]:object-cover",
+          variant === "icon" &&
+            "rounded-[var(--bh-item-media-radius)] bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]",
+          variant === "avatar" &&
+            "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-default)] text-[var(--bh-content-on-color)]",
+          variant === "image" && "rounded-[var(--bh-item-media-radius)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("grid min-w-0 flex-1 gap-[var(--bh-item-content-gap)]", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      dir="auto"
+      className={cn(
+        "min-w-0 break-words 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)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-description"
+      dir="auto"
+      className={cn(
+        "min-w-0 break-words 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)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn(
+        "flex shrink-0 items-center gap-[var(--bh-item-actions-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="item-separator"
+      className={cn("h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+  itemVariants,
+}
+export type { ItemGroupProps, ItemMediaProps, ItemProps }