banhaten 0.5.0 → 0.6.0

package/registry/components/spinner.tsx

@@ -1,78 +1,78 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type SpinnerMotion = "dynamic" | "steady"
-
-type SpinnerProps = React.ComponentProps<"svg">
-
-type DynamicSpinnerProps = SpinnerProps
-
-type SpinnerBaseProps = SpinnerProps & {
-  motion: SpinnerMotion
-}
-
-function Spinner(props: SpinnerProps) {
-  return <SpinnerBase {...props} motion="steady" />
-}
-
-function DynamicSpinner(props: DynamicSpinnerProps) {
-  return <SpinnerBase {...props} motion="dynamic" />
-}
-
-function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
-  return (
-    <svg
-      aria-hidden="true"
-      data-motion={motion}
-      data-slot="spinner"
-      viewBox="0 0 24 24"
-      className={cn(
-        "size-[var(--bh-spinner-size)] shrink-0 text-current",
-        className
-      )}
-      {...props}
-    >
-      <circle
-        data-slot="spinner-track"
-        cx="12"
-        cy="12"
-        r="10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="var(--bh-spinner-stroke-width)"
-        opacity="var(--bh-opacity-25)"
-      />
-      <circle
-        data-slot="spinner-arc"
-        cx="12"
-        cy="12"
-        r="10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="var(--bh-spinner-stroke-width)"
-        strokeLinecap="round"
-        pathLength="100"
-        strokeDasharray="30 70"
-        style={{
-          animationDuration:
-            motion === "dynamic"
-              ? "var(--bh-spinner-duration-dynamic)"
-              : "var(--bh-spinner-duration-steady)",
-          animationIterationCount: "infinite",
-          animationName:
-            motion === "dynamic"
-              ? "bh-spinner-dynamic"
-              : "bh-spinner-steady",
-          animationTimingFunction:
-            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
-          transformBox: "fill-box",
-          transformOrigin: "center",
-        }}
-      />
-    </svg>
-  )
-}
-
-export { DynamicSpinner, Spinner }
-export type { DynamicSpinnerProps, SpinnerProps }
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type SpinnerMotion = "dynamic" | "steady"
+
+type SpinnerProps = React.ComponentProps<"svg">
+
+type DynamicSpinnerProps = SpinnerProps
+
+type SpinnerBaseProps = SpinnerProps & {
+  motion: SpinnerMotion
+}
+
+function Spinner(props: SpinnerProps) {
+  return <SpinnerBase {...props} motion="steady" />
+}
+
+function DynamicSpinner(props: DynamicSpinnerProps) {
+  return <SpinnerBase {...props} motion="dynamic" />
+}
+
+function SpinnerBase({ className, motion, ...props }: SpinnerBaseProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      data-motion={motion}
+      data-slot="spinner"
+      viewBox="0 0 24 24"
+      className={cn(
+        "size-[var(--bh-spinner-size)] shrink-0 text-current",
+        className
+      )}
+      {...props}
+    >
+      <circle
+        data-slot="spinner-track"
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="var(--bh-spinner-stroke-width)"
+        opacity="var(--bh-opacity-25)"
+      />
+      <circle
+        data-slot="spinner-arc"
+        cx="12"
+        cy="12"
+        r="10"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="var(--bh-spinner-stroke-width)"
+        strokeLinecap="round"
+        pathLength="100"
+        strokeDasharray="30 70"
+        style={{
+          animationDuration:
+            motion === "dynamic"
+              ? "var(--bh-spinner-duration-dynamic)"
+              : "var(--bh-spinner-duration-steady)",
+          animationIterationCount: "infinite",
+          animationName:
+            motion === "dynamic"
+              ? "bh-spinner-dynamic"
+              : "bh-spinner-steady",
+          animationTimingFunction:
+            motion === "dynamic" ? "var(--bh-spinner-easing)" : "linear",
+          transformBox: "fill-box",
+          transformOrigin: "center",
+        }}
+      />
+    </svg>
+  )
+}
+
+export { DynamicSpinner, Spinner }
+export type { DynamicSpinnerProps, SpinnerProps }

package/registry/components/table-elements.tsx

@@ -1,128 +1,287 @@
-"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,
-}
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils"
+
+type TableElementsSize = "comfortable"
+type TableRootProps = React.ComponentPropsWithoutRef<"table"> & {
+  /** Applies the Table item 1.2 spec. Without a size the elements stay unstyled. */
+  size?: TableElementsSize
+}
+type TableContainerProps = React.ComponentPropsWithoutRef<"div">
+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 TableCellTextProps = React.ComponentPropsWithoutRef<"span"> & {
+  /** Second line under the label, in body-2xs and content/subtle. */
+  caption?: React.ReactNode
+  /** Icon, avatar or logo before the text, 6px from it. */
+  leading?: React.ReactNode
+  tone?: "default" | "subtle"
+  weight?: "regular" | "medium"
+}
+type TableCellLinkProps = React.ComponentPropsWithoutRef<"button"> & {
+  /** Renders the child element, such as an anchor, with the link styling. */
+  asChild?: boolean
+}
+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}
+    />
+  )
+})
+
+/**
+ * Rounded table frame. Its border is drawn over the content, like a Figma
+ * inside stroke, so header fills reach the edge; the table scrolls inside it.
+ */
+const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
+  function TableContainer({ children, className, ...props }, ref) {
+    return (
+      <div
+        data-slot="table-container"
+        ref={ref}
+        className={cn(
+          "relative min-w-0 max-w-full overflow-hidden rounded-[var(--bh-table-container-radius)] bg-[var(--bh-table-container-bg)]",
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-table-container-border)] after:content-['']",
+          className
+        )}
+        {...props}
+      >
+        <div data-slot="table-scroll" className="max-w-full overflow-x-auto">
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
+  function TableRoot({ className, size, ...props }, ref) {
+    return (
+      <table
+        data-size={size}
+        data-slot="table-root"
+        ref={ref}
+        className={cn(
+          "group/table w-full border-collapse text-start",
+          size === "comfortable" &&
+            "min-w-[var(--bh-table-comfortable-min-width)] text-[var(--bh-table-comfortable-cell-content)]",
+          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",
+          "group-data-[size=comfortable]/table:h-[var(--bh-table-comfortable-header-height)] group-data-[size=comfortable]/table:bg-[var(--bh-table-comfortable-header-bg)] group-data-[size=comfortable]/table:px-[var(--bh-table-comfortable-cell-padding-x)] group-data-[size=comfortable]/table:py-[var(--bh-space-none)] group-data-[size=comfortable]/table:align-middle",
+          "group-data-[size=comfortable]/table:text-[length:var(--bh-text-body-sm-medium-font-size)] group-data-[size=comfortable]/table:font-[var(--bh-text-body-sm-medium-font-weight)] group-data-[size=comfortable]/table:leading-[var(--bh-text-body-sm-medium-line-height)] group-data-[size=comfortable]/table:tracking-[var(--bh-text-body-sm-medium-letter-spacing)] group-data-[size=comfortable]/table:text-[var(--bh-table-comfortable-header-content)]",
+          className
+        )}
+        scope={scope}
+        {...props}
+      />
+    )
+  }
+)
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    return (
+      <td
+        data-slot="table-cell"
+        ref={ref}
+        className={cn(
+          "group-data-[size=comfortable]/table:h-[var(--bh-table-comfortable-row-height)] group-data-[size=comfortable]/table:px-[var(--bh-table-comfortable-cell-padding-x)] group-data-[size=comfortable]/table:py-[var(--bh-space-none)] group-data-[size=comfortable]/table:text-start group-data-[size=comfortable]/table:align-middle",
+          "group-data-[size=comfortable]/table:text-[length:var(--bh-text-body-md-regular-font-size)] group-data-[size=comfortable]/table:font-[var(--bh-text-body-md-regular-font-weight)] group-data-[size=comfortable]/table:leading-[var(--bh-text-body-md-regular-line-height)] group-data-[size=comfortable]/table:tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+/**
+ * Table item 1.2 text content: a label with an optional caption under it
+ * (line + subline) and an optional leading icon or avatar. The label keeps
+ * the cell's text size, so a captioned cell is 40px of text in a 56px or
+ * taller row. When the label opens a record, pass a TableCellLink so the
+ * label and caption keep one start edge.
+ */
+const TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(
+  function TableCellText(
+    {
+      caption,
+      children,
+      className,
+      leading,
+      tone = "default",
+      weight = "regular",
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <span
+        data-slot="table-cell-text"
+        data-tone={tone}
+        data-weight={weight}
+        ref={ref}
+        className={cn(
+          "inline-flex min-w-0 max-w-full items-center gap-[var(--bh-table-cell-text-gap)] align-middle",
+          className
+        )}
+        {...props}
+      >
+        {leading && (
+          <span
+            data-slot="table-cell-text-leading"
+            className="inline-flex shrink-0 items-center justify-center"
+          >
+            {leading}
+          </span>
+        )}
+        <span className="grid min-w-0 grid-cols-[minmax(0,1fr)]">
+          {/* Label and caption clip long text with an ellipsis; the clip margin leaves room for a link's focus ring and offset. */}
+          <span
+            data-slot="table-cell-text-label"
+            dir="auto"
+            className={cn(
+              "overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:var(--bh-space-md-8)]",
+              weight === "medium"
+                ? "font-[var(--bh-font-weight-medium)]"
+                : "font-[var(--bh-font-weight-regular)]",
+              tone === "subtle" && "text-[var(--bh-content-subtle)]"
+            )}
+          >
+            {children}
+          </span>
+          {caption && (
+            <span
+              data-slot="table-cell-text-caption"
+              dir="auto"
+              className="overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:var(--bh-space-md-8)] text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-table-caption-content)]"
+            >
+              {caption}
+            </span>
+          )}
+        </span>
+      </span>
+    )
+  }
+)
+
+/**
+ * A cell label that opens a record. It reads as the cell's own text, flush
+ * with the cell padding, and underlines on hover; Table item 1.2 has no
+ * padded control in text cells. Renders a button, or its child with asChild.
+ */
+const TableCellLink = React.forwardRef<HTMLButtonElement, TableCellLinkProps>(
+  function TableCellLink({ asChild = false, className, type, ...props }, ref) {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        data-slot="table-cell-link"
+        ref={ref}
+        type={asChild ? undefined : (type ?? "button")}
+        className={cn(
+          "inline-block max-w-full cursor-pointer truncate rounded-[var(--bh-radius-sm-4)] border-0 bg-transparent p-[var(--bh-space-none)] text-start align-top [color:inherit] [font:inherit] tracking-[inherit] no-underline outline-none hover:underline",
+          "focus-visible:underline focus-visible:outline-solid focus-visible:outline-[length:var(--bh-focus-ring-width)] focus-visible:outline-offset-[var(--bh-space-xxs-2)] focus-visible:outline-[var(--bh-border-focus)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+export {
+  DataTableSurface,
+  TableBody,
+  TableCell,
+  TableCellLink,
+  TableCellText,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRowElement,
+}
+export type {
+  DataTableSurfaceProps,
+  TableBodyProps,
+  TableCellLinkProps,
+  TableCellProps,
+  TableCellTextProps,
+  TableContainerProps,
+  TableElementsSize,
+  TableHeadProps,
+  TableRootProps,
+  TableRowElementProps,
+  TableSectionProps,
+}