@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/breadcrumb.js

@@ -1,41 +1,46 @@
-import { cn } from "../lib/utils.js";
-import { Slot } from "radix-ui";
-import "react";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Root as Slot } from "../primitives/vendor/radix/react-slot/slot.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import MoreHorizontal from "@burtson-labs/icons/react/more-horizontal";
 //#region src/components/breadcrumb.tsx
-function Breadcrumb(props) {
+var Breadcrumb = React.forwardRef(function Breadcrumb(props, ref) {
 	return /* @__PURE__ */ jsx("nav", {
+		ref,
 		"aria-label": "Breadcrumb",
 		"data-slot": "breadcrumb",
 		...props
 	});
-}
-function BreadcrumbList({ className, ...props }) {
+});
+var BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("ol", {
+		ref,
 		"data-slot": "breadcrumb-list",
 		className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground", className),
 		...props
 	});
-}
-function BreadcrumbItem({ className, ...props }) {
+});
+var BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("li", {
+		ref,
 		"data-slot": "breadcrumb-item",
 		className: cn("inline-flex items-center gap-1.5", className),
 		...props
 	});
-}
-function BreadcrumbLink({ asChild, className, ...props }) {
-	const Comp = asChild ? Slot.Root : "a";
-	return /* @__PURE__ */ jsx(Comp, {
+});
+var BreadcrumbLink = React.forwardRef(function BreadcrumbLink({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		ref,
 		"data-slot": "breadcrumb-link",
-		className: cn("transition-colors hover:text-foreground", className),
+		className: cn("rounded-xs transition-colors hover:text-foreground", focusRingClasses, className),
 		...props
 	});
-}
-function BreadcrumbPage({ className, ...props }) {
+});
+var BreadcrumbPage = React.forwardRef(function BreadcrumbPage({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "breadcrumb-page",
 		role: "link",
 		"aria-disabled": "true",
@@ -43,9 +48,10 @@ function BreadcrumbPage({ className, ...props }) {
 		className: cn("font-medium text-foreground", className),
 		...props
 	});
-}
-function BreadcrumbSeparator({ children, className, ...props }) {
+});
+var BreadcrumbSeparator = React.forwardRef(function BreadcrumbSeparator({ children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("li", {
+		ref,
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		"aria-hidden": "true",
@@ -53,9 +59,10 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
 	});
-}
-function BreadcrumbEllipsis({ className, ...props }) {
+});
+var BreadcrumbEllipsis = React.forwardRef(function BreadcrumbEllipsis({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		ref,
 		"data-slot": "breadcrumb-ellipsis",
 		role: "presentation",
 		"aria-hidden": "true",
@@ -66,7 +73,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
 			children: "More"
 		})]
 	});
-}
+});
 //#endregion
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
 

package/dist/components/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport MoreHorizontal from '@burtson-labs/icons/react/more-horizontal';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Breadcrumb(props: React.ComponentProps<'nav'>) {\n  return <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : 'a';\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn('transition-colors hover:text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('font-medium text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('flex size-9 items-center justify-center', className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,OAAoC;CACtD,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SACiD;CACpD,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;CAC1F,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER;AAEA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EALN,UAAA,CAOE,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA,GACpC,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}
+{"version":3,"file":"breadcrumb.js","names":["Slot.Root"],"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport MoreHorizontal from '@burtson-labs/icons/react/more-horizontal';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst Breadcrumb = React.forwardRef<HTMLElement, React.ComponentProps<'nav'>>(\n  function Breadcrumb(props, ref) {\n    return <nav ref={ref} aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n  },\n);\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentProps<'ol'>>(\n  function BreadcrumbList({ className, ...props }, ref) {\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"breadcrumb-list\"\n        className={cn(\n          'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(\n  function BreadcrumbItem({ className, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        data-slot=\"breadcrumb-item\"\n        className={cn('inline-flex items-center gap-1.5', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & { asChild?: boolean }\n>(function BreadcrumbLink({ asChild, className, ...props }, ref) {\n  const Comp = asChild ? Slot.Root : 'a';\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        'rounded-xs transition-colors hover:text-foreground',\n        focusRingClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function BreadcrumbPage({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"breadcrumb-page\"\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(\n  function BreadcrumbSeparator({ children, className, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        data-slot=\"breadcrumb-separator\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('[&>svg]:size-3.5', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight />}\n      </li>\n    );\n  },\n);\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function BreadcrumbEllipsis({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"breadcrumb-ellipsis\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex size-9 items-center justify-center', className)}\n        {...props}\n      >\n        <MoreHorizontal className=\"size-4\" />\n        <span className=\"sr-only\">More</span>\n      </span>\n    );\n  },\n);\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,OAAO,KAAK;CAC9B,OAAO,oBAAC,OAAD;EAAU;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACnF,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,iBAAiB,MAAM,WAG3B,SAAS,eAAe,EAAE,SAAS,WAAW,GAAG,SAAS,KAAK;CAE/D,OACE,oBAFW,UAAUA,OAAY,KAEjC;EACO;EACL,aAAU;EACV,WAAW,GACT,sDACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,iBAAiB,MAAM,WAC3B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,sBAAsB,MAAM,WAChC,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CACnE,OACE,oBAAC,MAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER,CACF;AAEA,IAAM,qBAAqB,MAAM,WAC/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,qBAAC,QAAD;EACO;EACL,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;EANN,UAAA,CAQE,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA,GACpC,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV,CACF"}

package/dist/components/button.d.ts

@@ -1,12 +1,19 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "brand" | "link" | "default" | "soft" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "destructive" | "brand" | "link" | "default" | "outline" | "soft" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | "xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     loading?: boolean;
 }
+/**
+ * The action primitive. On touch screens every button is at least 44px
+ * (`pointer-coarse:min-h-8` opts a button in a dense header out); link-styled
+ * buttons stay inline. `data-variant` and `data-size` are set for CSS that
+ * needs them. A trigger's `asChild` replaces `data-slot` with its own
+ * (`dialog-trigger`), which is why the sizing lives in the classes.
+ */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/components/button.js

@@ -1,10 +1,11 @@
-import { cn } from "../lib/utils.js";
-import { Slot } from "radix-ui";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
+import { Root as Slot } from "../primitives/vendor/radix/react-slot/slot.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/button.tsx
-var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] outline-none transition-[background-color,border-color,color,box-shadow,transform] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 active:translate-y-px disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var buttonVariants = cva(`inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] transition-[background-color,border-color,color,box-shadow,transform,filter] select-none ${focusRingClasses} pointer-coarse:min-h-11 pointer-coarse:min-w-11 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, {
 	variants: {
 		variant: {
 			default: "border border-primary bg-primary text-primary-foreground shadow-xs hover:brightness-90",
@@ -14,7 +15,7 @@ var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2
 			outline: "border border-border-strong bg-surface text-foreground shadow-xs hover:border-brand/35 hover:bg-accent/60 hover:text-accent-foreground",
 			ghost: "border border-transparent text-foreground hover:bg-muted",
 			destructive: "border border-destructive bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
-			link: "h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0"
+			link: "h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0 pointer-coarse:min-h-0 pointer-coarse:min-w-0"
 		},
 		size: {
 			xs: "h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5",
@@ -31,12 +32,20 @@ var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2
 		size: "default"
 	}
 });
+/**
+* The action primitive. On touch screens every button is at least 44px
+* (`pointer-coarse:min-h-8` opts a button in a dense header out); link-styled
+* buttons stay inline. `data-variant` and `data-size` are set for CSS that
+* needs them. A trigger's `asChild` replaces `data-slot` with its own
+* (`dialog-trigger`), which is why the sizing lives in the classes.
+*/
 var Button = React.forwardRef(function Button({ className, variant, size, asChild = false, loading = false, disabled, children, type, onClickCapture, onKeyDownCapture, ...props }, ref) {
-	const Comp = asChild ? Slot.Root : "button";
-	return /* @__PURE__ */ jsx(Comp, {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		ref,
 		type: asChild ? void 0 : type ?? "button",
 		"data-slot": "button",
+		"data-variant": variant ?? "default",
+		"data-size": size ?? "default",
 		"data-loading": loading ? "" : void 0,
 		"aria-busy": loading || void 0,
 		disabled: !asChild ? disabled || loading : void 0,

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["_Fragment"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] outline-none transition-[background-color,border-color,color,box-shadow,transform] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 active:translate-y-px disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-primary bg-primary text-primary-foreground shadow-xs hover:brightness-90',\n        brand:\n          'border border-primary bg-primary text-primary-foreground shadow-xs hover:brightness-90',\n        soft: 'border border-brand/15 bg-brand-soft text-brand-soft-foreground hover:bg-brand/15',\n        secondary:\n          'border border-border bg-secondary text-secondary-foreground shadow-xs hover:border-border-strong hover:bg-muted',\n        outline:\n          'border border-border-strong bg-surface text-foreground shadow-xs hover:border-brand/35 hover:bg-accent/60 hover:text-accent-foreground',\n        ghost: 'border border-transparent text-foreground hover:bg-muted',\n        destructive:\n          'border border-destructive bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',\n        link: 'h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0',\n      },\n      size: {\n        xs: 'h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5',\n        sm: 'h-8 px-3 text-[13px]',\n        default: 'h-9 px-3.5',\n        lg: 'h-10 rounded-lg px-4 text-[15px]',\n        icon: 'size-9 px-0',\n        'icon-sm': 'size-8 px-0',\n        'icon-lg': 'size-10 rounded-lg px-0',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    loading = false,\n    disabled,\n    children,\n    type,\n    onClickCapture,\n    onKeyDownCapture,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      type={asChild ? undefined : (type ?? 'button')}\n      data-slot=\"button\"\n      data-loading={loading ? '' : undefined}\n      aria-busy={loading || undefined}\n      disabled={!asChild ? disabled || loading : undefined}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n      aria-disabled={asChild && (disabled || loading) ? true : props['aria-disabled']}\n      tabIndex={asChild && (disabled || loading) ? -1 : props.tabIndex}\n      onClickCapture={(event) => {\n        if (disabled || loading) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        onClickCapture?.(event);\n      }}\n      onKeyDownCapture={(event) => {\n        if ((disabled || loading) && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        onKeyDownCapture?.(event);\n      }}\n    >\n      {asChild ? (\n        // Slot needs exactly one child to merge onto, so no spinner here.\n        children\n      ) : (\n        <>\n          {loading ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"size-3.5 animate-spin rounded-full border-2 border-current border-r-transparent opacity-70\"\n            />\n          ) : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,IACrB,2gBACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,OACE;GACF,MAAM;GACN,WACE;GACF,SACE;GACF,OAAO;GACP,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACzD,CACF;AAQA,IAAM,SAAS,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,SACA,MACA,UAAU,OACV,UAAU,OACV,UACA,UACA,MACA,gBACA,kBACA,GAAG,SAEL,KACA;CACA,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACO;EACL,MAAM,UAAU,KAAA,IAAa,QAAQ;EACrC,aAAU;EACV,gBAAc,UAAU,KAAK,KAAA;EAC7B,aAAW,WAAW,KAAA;EACtB,UAAU,CAAC,UAAU,YAAY,UAAU,KAAA;EAC3C,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,GAAI;EACJ,iBAAe,YAAY,YAAY,WAAW,OAAO,MAAM;EAC/D,UAAU,YAAY,YAAY,WAAW,KAAK,MAAM;EACxD,iBAAiB,UAAU;GACzB,IAAI,YAAY,SAAS;IACvB,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GACA,iBAAiB,KAAK;EACxB;EACA,mBAAmB,UAAU;GAC3B,KAAK,YAAY,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IACzE,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GACA,mBAAmB,KAAK;EAC1B;EAEC,UAAA,UAEC,WAEA,qBAAAA,UAAA,EAAA,UAAA,CACG,UACC,oBAAC,QAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,IACC,MACH,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}
+{"version":3,"file":"button.js","names":["Slot.Root","_Fragment"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as Slot from '../primitives/vendor/radix/react-slot';\n\nconst buttonVariants = cva(\n  `inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] transition-[background-color,border-color,color,box-shadow,transform,filter] select-none ${focusRingClasses} pointer-coarse:min-h-11 pointer-coarse:min-w-11 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-primary bg-primary text-primary-foreground shadow-xs hover:brightness-90',\n        brand:\n          'border border-primary bg-primary text-primary-foreground shadow-xs hover:brightness-90',\n        soft: 'border border-brand/15 bg-brand-soft text-brand-soft-foreground hover:bg-brand/15',\n        secondary:\n          'border border-border bg-secondary text-secondary-foreground shadow-xs hover:border-border-strong hover:bg-muted',\n        outline:\n          'border border-border-strong bg-surface text-foreground shadow-xs hover:border-brand/35 hover:bg-accent/60 hover:text-accent-foreground',\n        ghost: 'border border-transparent text-foreground hover:bg-muted',\n        destructive:\n          'border border-destructive bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',\n        link: 'h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0 pointer-coarse:min-h-0 pointer-coarse:min-w-0',\n      },\n      size: {\n        xs: 'h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5',\n        sm: 'h-8 px-3 text-[13px]',\n        default: 'h-9 px-3.5',\n        lg: 'h-10 rounded-lg px-4 text-[15px]',\n        icon: 'size-9 px-0',\n        'icon-sm': 'size-8 px-0',\n        'icon-lg': 'size-10 rounded-lg px-0',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n}\n\n/**\n * The action primitive. On touch screens every button is at least 44px\n * (`pointer-coarse:min-h-8` opts a button in a dense header out); link-styled\n * buttons stay inline. `data-variant` and `data-size` are set for CSS that\n * needs them. A trigger's `asChild` replaces `data-slot` with its own\n * (`dialog-trigger`), which is why the sizing lives in the classes.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    loading = false,\n    disabled,\n    children,\n    type,\n    onClickCapture,\n    onKeyDownCapture,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      type={asChild ? undefined : (type ?? 'button')}\n      data-slot=\"button\"\n      data-variant={variant ?? 'default'}\n      data-size={size ?? 'default'}\n      data-loading={loading ? '' : undefined}\n      aria-busy={loading || undefined}\n      disabled={!asChild ? disabled || loading : undefined}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n      aria-disabled={asChild && (disabled || loading) ? true : props['aria-disabled']}\n      tabIndex={asChild && (disabled || loading) ? -1 : props.tabIndex}\n      onClickCapture={(event) => {\n        if (disabled || loading) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        onClickCapture?.(event);\n      }}\n      onKeyDownCapture={(event) => {\n        if ((disabled || loading) && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        onKeyDownCapture?.(event);\n      }}\n    >\n      {asChild ? (\n        // Slot needs exactly one child to merge onto, so no spinner here.\n        children\n      ) : (\n        <>\n          {loading ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"size-3.5 animate-spin rounded-full border-2 border-current border-r-transparent opacity-70\"\n            />\n          ) : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n});\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;AAMA,IAAM,iBAAiB,IACrB,yNAAyN,iBAAiB,4MAC1O;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,OACE;GACF,MAAM;GACN,WACE;GACF,SACE;GACF,OAAO;GACP,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACzD,CACF;;;;;;;;AAeA,IAAM,SAAS,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,SACA,MACA,UAAU,OACV,UAAU,OACV,UACA,UACA,MACA,gBACA,kBACA,GAAG,SAEL,KACA;CAGA,OACE,oBAHW,UAAUA,OAAY,UAGjC;EACO;EACL,MAAM,UAAU,KAAA,IAAa,QAAQ;EACrC,aAAU;EACV,gBAAc,WAAW;EACzB,aAAW,QAAQ;EACnB,gBAAc,UAAU,KAAK,KAAA;EAC7B,aAAW,WAAW,KAAA;EACtB,UAAU,CAAC,UAAU,YAAY,UAAU,KAAA;EAC3C,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,GAAI;EACJ,iBAAe,YAAY,YAAY,WAAW,OAAO,MAAM;EAC/D,UAAU,YAAY,YAAY,WAAW,KAAK,MAAM;EACxD,iBAAiB,UAAU;GACzB,IAAI,YAAY,SAAS;IACvB,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GACA,iBAAiB,KAAK;EACxB;EACA,mBAAmB,UAAU;GAC3B,KAAK,YAAY,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IACzE,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GACA,mBAAmB,KAAK;EAC1B;EAEC,UAAA,UAEC,WAEA,qBAAAC,UAAA,EAAA,UAAA,CACG,UACC,oBAAC,QAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,IACC,MACH,QACD,EAAA,CAAA;CAEA,CAAA;AAEV,CAAC"}

package/dist/components/card.d.ts

@@ -1,17 +1,17 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const cardVariants: (props?: ({
-    variant?: "default" | "raised" | "subtle" | "interactive" | "terminal" | null | undefined;
+    variant?: "terminal" | "default" | "raised" | "subtle" | "interactive" | null | undefined;
     density?: "default" | "compact" | "roomy" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
 }
-declare function Card({ className, variant, density, ...props }: CardProps): React.JSX.Element;
-declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardEyebrow({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardEyebrow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants, };

package/dist/components/card.js

@@ -1,21 +1,22 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/card.tsx
-var cardVariants = cva("group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform] duration-150", {
+var cardVariants = cva("group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform]", {
 	variants: {
 		variant: {
 			default: "border-border bg-card shadow-xs",
 			raised: "border-border bg-surface-raised shadow-md",
 			subtle: "border-border/70 bg-surface-muted shadow-none",
 			interactive: "border-border bg-card shadow-xs hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-md",
-			terminal: "border-border-strong bg-code text-code-foreground shadow-md"
+			terminal: "border-border-strong bg-code text-code-foreground shadow-md [--foreground:var(--code-foreground)] [--muted-foreground:color-mix(in_srgb,var(--code-foreground)_72%,var(--code))] [--muted:color-mix(in_srgb,var(--code-foreground)_10%,var(--code))] [--border:color-mix(in_srgb,var(--code-foreground)_16%,var(--code))]"
 		},
 		density: {
-			compact: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-footer]]:p-4",
-			default: "[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-footer]]:p-5",
-			roomy: "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-footer]]:p-6"
+			compact: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-content]]:pb-4 [&_[data-slot=card-footer]]:p-4",
+			default: "[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-content]]:pb-5 [&_[data-slot=card-footer]]:p-5",
+			roomy: "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-content]]:pb-6 [&_[data-slot=card-footer]]:p-6"
 		}
 	},
 	defaultVariants: {
@@ -23,65 +24,74 @@ var cardVariants = cva("group/card relative flex flex-col overflow-hidden rounde
 		density: "default"
 	}
 });
-function Card({ className, variant, density, ...props }) {
+var Card = React.forwardRef(function Card({ className, variant, density, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card",
+		"data-variant": variant ?? "default",
 		className: cn(cardVariants({
 			variant,
 			density
 		}), className),
 		...props
 	});
-}
-function CardHeader({ className, ...props }) {
+});
+var CardHeader = React.forwardRef(function CardHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-header",
-		className: cn("grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1 border-b border-transparent pb-3", className),
+		className: cn("grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1", className),
 		...props
 	});
-}
-function CardEyebrow({ className, ...props }) {
+});
+var CardEyebrow = React.forwardRef(function CardEyebrow({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-eyebrow",
 		className: cn("col-span-full mb-0.5 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase", className),
 		...props
 	});
-}
-function CardTitle({ className, ...props }) {
+});
+var CardTitle = React.forwardRef(function CardTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-title",
 		className: cn("min-w-0 text-sm font-semibold tracking-[-0.015em]", className),
 		...props
 	});
-}
-function CardDescription({ className, ...props }) {
+});
+var CardDescription = React.forwardRef(function CardDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-description",
 		className: cn("col-start-1 text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
-function CardAction({ className, ...props }) {
+});
+var CardAction = React.forwardRef(function CardAction({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-action",
 		className: cn("col-start-2 row-span-2 row-start-1 self-start", className),
 		...props
 	});
-}
-function CardContent({ className, ...props }) {
+});
+var CardContent = React.forwardRef(function CardContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-content",
 		className: cn("pb-5", className),
 		...props
 	});
-}
-function CardFooter({ className, ...props }) {
+});
+var CardFooter = React.forwardRef(function CardFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "card-footer",
 		className: cn("mt-auto flex items-center gap-2 border-t pt-4", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants };
 

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst cardVariants = cva(\n  'group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform] duration-150',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card shadow-xs',\n        raised: 'border-border bg-surface-raised shadow-md',\n        subtle: 'border-border/70 bg-surface-muted shadow-none',\n        interactive:\n          'border-border bg-card shadow-xs hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-md',\n        terminal: 'border-border-strong bg-code text-code-foreground shadow-md',\n      },\n      density: {\n        compact:\n          '[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-footer]]:p-4',\n        default:\n          '[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-footer]]:p-5',\n        roomy:\n          '[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-footer]]:p-6',\n      },\n    },\n    defaultVariants: { variant: 'default', density: 'default' },\n  },\n);\n\nexport interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {}\n\nfunction Card({ className, variant, density, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(cardVariants({ variant, density }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1 border-b border-transparent pb-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardEyebrow({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-eyebrow\"\n      className={cn(\n        'col-span-full mb-0.5 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('min-w-0 text-sm font-semibold tracking-[-0.015em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('col-start-1 text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('pb-5', className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('mt-auto flex items-center gap-2 border-t pt-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardEyebrow,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  cardVariants,\n};\n"],"mappings":";;;;;AAKA,IAAM,eAAe,IACnB,yKACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,aACE;GACF,UAAU;EACZ;EACA,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;EACJ;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,SAAS;CAAU;AAC5D,CACF;AAIA,SAAS,KAAK,EAAE,WAAW,SAAS,SAAS,GAAG,SAAoB;CAClE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,aAAa;GAAE;GAAS;EAAQ,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst cardVariants = cva(\n  'group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform]',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card shadow-xs',\n        raised: 'border-border bg-surface-raised shadow-md',\n        subtle: 'border-border/70 bg-surface-muted shadow-none',\n        interactive:\n          'border-border bg-card shadow-xs hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-md',\n        // A dark panel in either theme. It re-points the text and rule tokens\n        // at the code palette, so muted text, ghost buttons and dividers inside\n        // it stay legible instead of using the page's colours.\n        terminal:\n          'border-border-strong bg-code text-code-foreground shadow-md [--foreground:var(--code-foreground)] [--muted-foreground:color-mix(in_srgb,var(--code-foreground)_72%,var(--code))] [--muted:color-mix(in_srgb,var(--code-foreground)_10%,var(--code))] [--border:color-mix(in_srgb,var(--code-foreground)_16%,var(--code))]',\n      },\n      density: {\n        compact:\n          '[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-content]]:pb-4 [&_[data-slot=card-footer]]:p-4',\n        default:\n          '[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-content]]:pb-5 [&_[data-slot=card-footer]]:p-5',\n        roomy:\n          '[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-content]]:pb-6 [&_[data-slot=card-footer]]:p-6',\n      },\n    },\n    defaultVariants: { variant: 'default', density: 'default' },\n  },\n);\n\nexport interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, variant, density, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      data-variant={variant ?? 'default'}\n      className={cn(cardVariants({ variant, density }), className)}\n      {...props}\n    />\n  );\n});\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-header\"\n        className={cn('grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst CardEyebrow = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardEyebrow({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-eyebrow\"\n        className={cn(\n          'col-span-full mb-0.5 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst CardTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(function CardTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card-title\"\n      className={cn('min-w-0 text-sm font-semibold tracking-[-0.015em]', className)}\n      {...props}\n    />\n  );\n});\n\nconst CardDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-description\"\n        className={cn('col-start-1 text-sm leading-5 text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst CardAction = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardAction({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-action\"\n        className={cn('col-start-2 row-span-2 row-start-1 self-start', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardContent({ className, ...props }, ref) {\n    return <div ref={ref} data-slot=\"card-content\" className={cn('pb-5', className)} {...props} />;\n  },\n);\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-footer\"\n        className={cn('mt-auto flex items-center gap-2 border-t pt-4', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardEyebrow,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  cardVariants,\n};\n"],"mappings":";;;;;;AAKA,IAAM,eAAe,IACnB,4JACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,aACE;GAIF,UACE;EACJ;EACA,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;EACJ;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,SAAS;CAAU;AAC5D,CACF;AAIA,IAAM,OAAO,MAAM,WAAsC,SAAS,KAChE,EAAE,WAAW,SAAS,SAAS,GAAG,SAClC,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,aAAa;GAAE;GAAS;EAAQ,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,YAAY,MAAM,WAAwD,SAAS,UACvF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,kBAAkB,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,cAAc,MAAM,WACxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACjD,OAAO,oBAAC,OAAD;EAAU;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F,CACF;AAEA,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/chat-history.d.ts

@@ -60,5 +60,5 @@ export interface ChatHistoryProps extends Omit<React.ComponentProps<'div'>, 'onS
  * rows, Home and End jump, Enter opens; each row has a menu for rename, pin
  * and delete. The app owns the data; this only reports what the person did.
  */
-declare function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete, onPinChange, query: controlledQuery, onQueryChange, searchable, loading, error, onRetry, empty, now, renderItems, label, className, ...props }: ChatHistoryProps): React.JSX.Element;
+declare const ChatHistory: React.ForwardRefExoticComponent<Omit<ChatHistoryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ChatHistory };

package/dist/components/chat-history.js

@@ -1,7 +1,8 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
-import "./input.js";
+import { fieldFocusClasses } from "./input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import AlertCircle from "@burtson-labs/icons/react/alert-circle";
@@ -61,7 +62,7 @@ function matchesConversation(item, query) {
 * rows, Home and End jump, Enter opens; each row has a menu for rename, pin
 * and delete. The app owns the data; this only reports what the person did.
 */
-function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete, onPinChange, query: controlledQuery, onQueryChange, searchable = true, loading = false, error, onRetry, empty, now, renderItems, label = "Chat history", className, ...props }) {
+var ChatHistory = React.forwardRef(function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete, onPinChange, query: controlledQuery, onQueryChange, searchable = true, loading = false, error, onRetry, empty, now, renderItems, label = "Chat history", className, ...props }, ref) {
 	const [ownQuery, setOwnQuery] = React.useState("");
 	const query = controlledQuery ?? ownQuery;
 	const setQuery = (q) => {
@@ -101,6 +102,7 @@ function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete,
 		onKeyDown: onRowKeyDown
 	}, item.id);
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "chat-history",
 		"aria-label": label,
 		role: "navigation",
@@ -131,7 +133,7 @@ function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete,
 						value: query,
 						onChange: (e) => setQuery(e.target.value),
 						placeholder: "Search chats",
-						className: cn("h-8 w-full rounded-md border border-input bg-surface pr-2 pl-8 text-base placeholder:text-muted-foreground sm:text-sm", "outline-hidden! focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive")
+						className: cn("h-8 w-full rounded-md border border-input bg-surface pr-2 pl-8 text-base placeholder:text-muted-foreground sm:text-sm pointer-coarse:h-11", fieldFocusClasses)
 					})
 				]
 			})]
@@ -193,7 +195,7 @@ function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete,
 				"aria-label": g.label,
 				className: "mt-2 first:mt-0",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "px-2 pt-2 pb-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase",
+					className: "px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase",
 					children: g.label
 				}), /* @__PURE__ */ jsx("ul", {
 					className: "grid grid-cols-[minmax(0,1fr)] gap-0.5",
@@ -202,7 +204,7 @@ function ChatHistory({ items, activeId, onSelect, onNewChat, onRename, onDelete,
 			}, g.key))
 		})]
 	});
-}
+});
 function HistoryRow({ item, active, renaming, onSelect, onStartRename, onRename, onDelete, onPinChange, onKeyDown }) {
 	const hasMenu = Boolean(onStartRename || onDelete || onPinChange);
 	if (renaming) return /* @__PURE__ */ jsx(RenameRow, {
@@ -217,14 +219,14 @@ function HistoryRow({ item, active, renaming, onSelect, onStartRename, onRename,
 			"aria-current": active ? "page" : void 0,
 			onClick: onSelect,
 			onKeyDown,
-			className: cn("flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 pointer-coarse:h-11", hasMenu && "pr-9", active && "bg-accent font-medium text-accent-foreground hover:bg-accent"),
+			className: cn("flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors hover:bg-muted pointer-coarse:h-11", focusRingClasses, "focus-visible:outline-offset-[-2px]", hasMenu && "pr-9", active && "bg-accent font-medium text-accent-foreground hover:bg-accent"),
 			children: /* @__PURE__ */ jsx("span", {
 				className: "min-w-0 flex-1 truncate",
 				children: item.title || "Untitled chat"
 			})
 		}), hasMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 			"aria-label": `Actions for ${item.title || "chat"}`,
-			className: cn("absolute top-1/2 right-1 grid size-7 -translate-y-1/2 place-items-center rounded-sm text-muted-foreground opacity-0 outline-none transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/20 group-hover/row:opacity-100 data-[state=open]:opacity-100 pointer-coarse:size-9 pointer-coarse:opacity-100 [&_svg]:size-4", active && "opacity-100"),
+			className: cn("absolute top-1/2 right-1 grid size-7 -translate-y-1/2 place-items-center rounded-sm text-muted-foreground opacity-0 transition-opacity hover:bg-background hover:text-foreground focus-visible:opacity-100 group-hover/row:opacity-100 data-[state=open]:opacity-100 pointer-coarse:size-9 pointer-coarse:opacity-100 [&_svg]:size-4", "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "relative pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2 pointer-coarse:before:size-11 pointer-coarse:before:-translate-1/2 pointer-coarse:before:content-['']", "absolute", active && "opacity-100"),
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": true })
 		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			align: "end",
@@ -273,7 +275,7 @@ function RenameRow({ title, onDone }) {
 					onDone(title);
 				}
 			},
-			className: "h-8 w-full rounded-md border border-ring bg-surface px-2 text-base inset-ring-1 inset-ring-ring outline-hidden! sm:text-sm"
+			className: cn("h-8 w-full rounded-md border border-ring bg-surface px-2 text-base inset-ring-1 inset-ring-ring sm:text-sm", noOutlineClasses)
 		})
 	});
 }