@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/table.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Outer card wrapper.\n *\n * Tokens: bg-surface-overlay (container fill), border-line (container border).\n * Pass `containerClassName` to override scroll, sizing, or rounding for\n * individual call-sites (e.g. the data-table's max-height + rounded-[20px]).\n */\nfunction Table({\n\tclassName,\n\tcontainerClassName,\n\t...props\n}: React.ComponentProps<\"table\"> & { containerClassName?: string }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay\",\n\t\t\t\tcontainerClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(\"min-w-full caption-bottom\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\n/**\n * Header band (thead).\n *\n * Token: bg-surface-raised (header fill).\n * Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.\n */\nfunction TableHeader({\n\tclassName,\n\tsticky = false,\n\t...props\n}: React.ComponentProps<\"thead\"> & { sticky?: boolean }) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-surface-raised\",\n\t\t\t\tsticky && \"sticky top-0 z-2 shadow-(--elevation-e2-shadow)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer band (tfoot).\n *\n * Shares the same raised surface as the header.\n */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Table row (tr).\n *\n * Token: border-line-subtle (row divider). The last body row has no border\n * via the [&_tr:last-child]:border-0 rule on TableBody.\n */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group border-b border-line-subtle transition-colors\",\n\t\t\t\t\"hover:bg-surface has-aria-expanded:bg-surface\",\n\t\t\t\t\"data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Header cell (th).\n *\n * Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly\n * cover scrolling content), text-fg-secondary, text-gdt-capitalized + uppercase\n * for the tiny-caps column label style described in the design system.\n */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"h-11 px-5 py-3.5 text-left align-middle bg-surface-raised\",\n\t\t\t\t\"text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary\",\n\t\t\t\t\"whitespace-nowrap has-[[role=checkbox]]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Standard body cell (td).\n *\n * Token: text-fg-primary (body cell text), text-gdt-sm.\n * Pass `pinned` when the column is sticky. Pinned cells get an opaque\n * bg-canvas cover so scrolling content doesn't bleed through, and they\n * mirror the parent row's hover/selected states via group variants.\n * Non-pinned cells are left transparent so the parent row's surface shows through.\n */\nfunction TableCell({\n\tclassName,\n\tpinned = false,\n\t...props\n}: React.ComponentProps<\"td\"> & { pinned?: boolean }) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-5 py-3.5 align-middle text-gdt-sm text-fg-primary\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\tpinned &&\n\t\t\t\t\t\"bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell title, for use within a TableCell\n */\nfunction TableCellTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-title\"\n\t\t\tclassName={cn(\"text-gdt-sm font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.\n */\nfunction TableCellCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-caption\"\n\t\t\tclassName={cn(\"text-gdt-xs text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Caption — rendered below the table, uses secondary text token.\n */\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"mt-4 text-gdt-sm text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCellTitle,\n\tTableCellCaption,\n\tTableCaption,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/table.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"./lib/cn\";\n\n/**\n * Outer card wrapper.\n *\n * Tokens: bg-surface-overlay (container fill), border-line (container border).\n * Pass `containerClassName` to override scroll, sizing, or rounding for\n * individual call-sites (e.g. the data-table's max-height + rounded-[20px]).\n */\nfunction Table({\n\tclassName,\n\tcontainerClassName,\n\t...props\n}: React.ComponentProps<\"table\"> & { containerClassName?: string }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay\",\n\t\t\t\tcontainerClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(\"min-w-full caption-bottom\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\n/**\n * Header band (thead).\n *\n * Token: bg-surface-raised (header fill).\n * Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.\n */\nfunction TableHeader({\n\tclassName,\n\tsticky = false,\n\t...props\n}: React.ComponentProps<\"thead\"> & { sticky?: boolean }) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-surface-raised\",\n\t\t\t\tsticky && \"sticky top-0 z-2 shadow-(--elevation-e2-shadow)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer band (tfoot).\n *\n * Shares the same raised surface as the header.\n */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Table row (tr).\n *\n * Token: border-line-subtle (row divider). The last body row has no border\n * via the [&_tr:last-child]:border-0 rule on TableBody.\n */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group border-b border-line-subtle transition-colors\",\n\t\t\t\t\"hover:bg-surface has-aria-expanded:bg-surface\",\n\t\t\t\t\"data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Header cell (th).\n *\n * Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly\n * cover scrolling content), text-fg-secondary, text-gdt-capitalized + uppercase\n * for the tiny-caps column label style described in the design system.\n */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"h-11 px-5 py-3.5 text-left align-middle bg-surface-raised\",\n\t\t\t\t\"text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary\",\n\t\t\t\t\"whitespace-nowrap has-[[role=checkbox]]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Standard body cell (td).\n *\n * Token: text-fg-primary (body cell text), text-gdt-sm.\n * Pass `pinned` when the column is sticky. Pinned cells get an opaque\n * bg-canvas cover so scrolling content doesn't bleed through, and they\n * mirror the parent row's hover/selected states via group variants.\n * Non-pinned cells are left transparent so the parent row's surface shows through.\n */\nfunction TableCell({\n\tclassName,\n\tpinned = false,\n\t...props\n}: React.ComponentProps<\"td\"> & { pinned?: boolean }) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-5 py-3.5 align-middle text-gdt-sm text-fg-primary\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\tpinned &&\n\t\t\t\t\t\"bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell title, for use within a TableCell\n */\nfunction TableCellTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-title\"\n\t\t\tclassName={cn(\"text-gdt-sm font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.\n */\nfunction TableCellCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-caption\"\n\t\t\tclassName={cn(\"text-gdt-xs text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Caption — rendered below the table, uses secondary text token.\n */\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"mt-4 text-gdt-sm text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCellTitle,\n\tTableCellCaption,\n\tTableCaption,\n};\n"],"mappings":";;;;;;AA0BG;AAbH,SAAS,MAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoE;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,aAAU;AAAA,UACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,UACnD,GAAG;AAAA;AAAA,MACL;AAAA;AAAA,EACD;AAEF;AAQA,SAAS,YAAY;AAAA,EACpB;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GAAyD;AACxD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC1E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA;AAAA,EACL;AAEF;AAOA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAQA,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAA+B;AACtE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AASA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAA+B;AACvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAWA,SAAS,UAAU;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GAAsD;AACrD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA,UACC;AAAA,QACD;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAKA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACL;AAEF;AAKA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA,GAAG;AACJ,GAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACL;AAEF;AAKA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}

package/dist/tabs.js

@@ -1,153 +1,13 @@
-// src/components/ui/tabs.tsx
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { cva } from "class-variance-authority";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/tabs.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function resolveTabsListVariant(variant) {
-  return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
-}
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Root,
-    {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: cn(
-        "group/tabs flex gap-3 data-[orientation=horizontal]:flex-col",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var tabsListVariants = cva(
-  "group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle",
-  {
-    variants: {
-      variant: {
-        underline: "rounded-none bg-transparent p-0",
-        secondary: "rounded-4xl bg-transparent p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "underline"
-    }
-  }
-);
-function TabsList({
-  className,
-  variant = "underline",
-  children,
-  ...props
-}) {
-  const resolvedVariant = resolveTabsListVariant(variant);
-  return /* @__PURE__ */ jsxs(
-    TabsPrimitive.List,
-    {
-      "data-slot": "tabs-list",
-      "data-variant": resolvedVariant,
-      className: cn(tabsListVariants({ variant: resolvedVariant }), className),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          TabsPrimitive.Indicator,
-          {
-            className: cn(
-              "pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out",
-              "group-data-[variant=secondary]/tabs-list:hidden",
-              "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none",
-              "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0",
-              "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0"
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function TabsTrigger({
-  className,
-  nativeButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Tab,
-    {
-      "data-slot": "tabs-trigger",
-      nativeButton,
-      className: cn(
-        "group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm",
-        "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TabsCount({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "tabs-count",
-      className: cn(
-        "inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]",
-        "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
-        "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Panel,
-    {
-      "data-slot": "tabs-content",
-      className: cn("flex-1 text-sm outline-none", className),
-      ...props
-    }
-  );
-}
+"use client";
+import {
+  Tabs,
+  TabsContent,
+  TabsCount,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants
+} from "./chunk-EFSOSSIC.js";
+import "./chunk-Y4TTYVNE.js";
 export {
   Tabs,
   TabsContent,

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/tabs.tsx","../src/lib/cn.ts"],"sourcesContent":["\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\ntype TabsListVariant = \"default\" | \"line\" | \"secondary\" | \"underline\";\n\nfunction resolveTabsListVariant(variant: TabsListVariant) {\n\treturn variant === \"default\"\n\t\t? \"secondary\"\n\t\t: variant === \"line\"\n\t\t\t? \"underline\"\n\t\t\t: variant;\n}\n\nfunction Tabs({\n\tclassName,\n\torientation = \"horizontal\",\n\t...props\n}: TabsPrimitive.Root.Props) {\n\treturn (\n\t\t<TabsPrimitive.Root\n\t\t\tdata-slot=\"tabs\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs flex gap-3 data-[orientation=horizontal]:flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst tabsListVariants = cva(\n\t\"group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tunderline: \"rounded-none bg-transparent p-0\",\n\t\t\t\tsecondary: \"rounded-4xl bg-transparent p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"underline\",\n\t\t},\n\t},\n);\n\nfunction TabsList({\n\tclassName,\n\tvariant = \"underline\",\n\tchildren,\n\t...props\n}: TabsPrimitive.List.Props & {\n\tvariant?: TabsListVariant;\n}) {\n\tconst resolvedVariant = resolveTabsListVariant(variant);\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tdata-variant={resolvedVariant}\n\t\t\tclassName={cn(tabsListVariants({ variant: resolvedVariant }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TabsPrimitive.Indicator\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out\",\n\t\t\t\t\t\"group-data-[variant=secondary]/tabs-list:hidden\",\n\t\t\t\t\t\"group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none\",\n\t\t\t\t\t\"group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0\",\n\t\t\t\t\t\"group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</TabsPrimitive.List>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tnativeButton = true,\n\t...props\n}: TabsPrimitive.Tab.Props) {\n\treturn (\n\t\t<TabsPrimitive.Tab\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tnativeButton={nativeButton}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsCount({ className, ...props }: ComponentPropsWithoutRef<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tabs-count\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n\treturn (\n\t\t<TabsPrimitive.Panel\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(\"flex-1 text-sm outline-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTabs,\n\tTabsList,\n\tTabsTrigger,\n\tTabsCount,\n\tTabsContent,\n\ttabsListVariants,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAEA,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAAW;;;ACHpB,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADPE,cAsCA,YAtCA;AAdF,SAAS,uBAAuB,SAA0B;AACzD,SAAO,YAAY,YAChB,cACA,YAAY,SACX,cACA;AACL;AAEA,SAAS,KAAK;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACJ,GAA6B;AAC5B,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,mBAAmB;AAAA,EACxB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,IACV;AAAA,EACD;AACD;AAEA,SAAS,SAAS;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACJ,GAEG;AACF,QAAM,kBAAkB,uBAAuB,OAAO;AAEtD,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,iBAAiB,EAAE,SAAS,gBAAgB,CAAC,GAAG,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC,cAAc;AAAA,UAAd;AAAA,YACA,WAAW;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,YAAY;AAAA,EACpB;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACJ,GAA4B;AAC3B,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAqC;AAC7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAA8B;AACxE,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tag.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactNode, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ComponentSize } from './size-context.js';
 
@@ -9,17 +9,18 @@ declare const tagVariants: (props?: ({
     clickable?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TagProps {
+interface TagProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type"> {
     label: string;
     leadingIcon?: ReactNode;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    onClick?: () => void;
+    closeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type">;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     size?: ComponentSize;
+    shape?: "full" | "box";
     border?: boolean;
     clickable?: boolean;
     disabled?: boolean;
-    className?: string;
 }
-declare function Tag({ label, leadingIcon, onClose, onClick, size, border, clickable, disabled, className, }: TagProps): React.JSX.Element;
+declare function Tag({ label, leadingIcon, onClose, closeButtonProps, onClick, size, shape, border, clickable, disabled, className, ...props }: TagProps): React.JSX.Element;
 
-export { Tag, tagVariants };
+export { Tag, type TagProps, tagVariants };

package/dist/tag.js

@@ -1,52 +1,17 @@
-// src/components/ui/tag.tsx
+"use client";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/tag.tsx
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/tag.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var tagVariants = cva(
-  "group/tag inline-flex w-fit shrink-0 items-center font-bold leading-none whitespace-nowrap rounded-4xl border bg-surface-raised text-fg-secondary transition-[background-color,border-color] select-none",
+  "group/tag inline-flex w-full shrink-0 items-center border bg-surface-raised font-bold leading-none text-fg-primary whitespace-nowrap transition-[background-color,border-color,color,box-shadow] select-none data-[shape=full]:rounded-4xl data-[shape=box]:data-[size=sm]:rounded-md data-[shape=box]:data-[size=md]:rounded-lg data-[shape=box]:data-[size=lg]:rounded-xl data-[has-close=true]:data-[size=sm]:pr-5 data-[has-close=true]:data-[size=md]:pr-7 data-[has-close=true]:data-[size=lg]:pr-8",
   {
     variants: {
       size: {
@@ -59,11 +24,11 @@ var tagVariants = cva(
         false: "border-transparent"
       },
       clickable: {
-        true: "cursor-pointer hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+        true: "cursor-pointer hover:border-line-strong hover:bg-action-tertiary-hover active:border-line-strong active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
         false: "cursor-default"
       },
       disabled: {
-        true: "opacity-50 pointer-events-none",
+        true: "border-line-subtle bg-surface text-fg-caption-placeholder",
         false: ""
       }
     },
@@ -76,13 +41,13 @@ var tagVariants = cva(
   }
 );
 var tagCloseVariants = cva(
-  "inline-flex shrink-0 items-center justify-center rounded-full text-fg-secondary transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none",
+  "absolute top-1/2 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-full text-current transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none disabled:text-fg-caption-placeholder",
   {
     variants: {
       size: {
-        sm: "size-4 [&>svg]:size-2.5",
-        md: "size-5 [&>svg]:size-3",
-        lg: "size-5 [&>svg]:size-3.5"
+        sm: "right-1 size-4 [&>svg]:size-2.5",
+        md: "right-1.5 size-5 [&>svg]:size-3",
+        lg: "right-2 size-5 [&>svg]:size-3.5"
       }
     },
     defaultVariants: {
@@ -94,64 +59,103 @@ function Tag({
   label,
   leadingIcon,
   onClose,
+  closeButtonProps,
   onClick,
   size,
+  shape = "full",
   border = false,
   clickable = false,
   disabled = false,
-  className
+  className,
+  ...props
 }) {
   const resolvedSize = useComponentSize(size);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onClick?.();
-    }
-  };
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: clickable tags set button semantics, focus, and keyboard activation while still allowing a nested close action.
-    /* @__PURE__ */ jsxs(
-      "div",
+  const isInteractive = clickable && !disabled;
+  const {
+    "aria-label": closeAriaLabel = `Remove ${label}`,
+    className: closeClassName,
+    onKeyDown: onCloseKeyDown,
+    ...resolvedCloseButtonProps
+  } = closeButtonProps ?? {};
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "tag", className: "relative inline-flex w-fit shrink-0", children: [
+    clickable ? /* @__PURE__ */ jsx(
+      "button",
       {
-        role: clickable ? "button" : void 0,
-        tabIndex: clickable && !disabled ? 0 : void 0,
-        "aria-disabled": disabled ? true : void 0,
-        "data-slot": "tag",
+        type: "button",
+        "data-slot": "tag-surface",
+        "data-shape": shape,
+        "data-size": resolvedSize,
+        "data-has-close": Boolean(onClose),
+        disabled,
         className: cn(
-          tagVariants({ size: resolvedSize, border, clickable, disabled }),
+          tagVariants({
+            size: resolvedSize,
+            border,
+            clickable: isInteractive,
+            disabled
+          }),
           className
         ),
-        onClick: clickable ? onClick : void 0,
-        onKeyDown: clickable ? handleKeyDown : void 0,
-        children: [
-          leadingIcon && /* @__PURE__ */ jsx2(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "tag-leading-icon",
-              className: "inline-flex shrink-0 items-center [&>svg]:size-[1em]",
-              children: leadingIcon
-            }
-          ),
-          /* @__PURE__ */ jsx2("span", { children: label }),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              "aria-label": `Remove ${label}`,
-              disabled,
-              className: cn(tagCloseVariants({ size: resolvedSize })),
-              onClick: (e) => {
-                e.stopPropagation();
-                onClose?.(e);
-              },
-              children: /* @__PURE__ */ jsx2(X, { "aria-hidden": "true" })
-            }
-          )
-        ]
+        onClick,
+        ...props,
+        children: /* @__PURE__ */ jsx(TagContent, { label, leadingIcon })
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "tag-surface",
+        "data-shape": shape,
+        "data-size": resolvedSize,
+        "data-has-close": Boolean(onClose),
+        className: cn(
+          tagVariants({
+            size: resolvedSize,
+            border,
+            clickable: false,
+            disabled
+          }),
+          className
+        ),
+        children: /* @__PURE__ */ jsx(TagContent, { label, leadingIcon })
+      }
+    ),
+    onClose && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": closeAriaLabel,
+        disabled,
+        className: cn(
+          tagCloseVariants({ size: resolvedSize }),
+          closeClassName
+        ),
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose(e);
+        },
+        onKeyDown: onCloseKeyDown,
+        ...resolvedCloseButtonProps,
+        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
       }
     )
-  );
+  ] });
+}
+function TagContent({
+  label,
+  leadingIcon
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingIcon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "tag-leading-icon",
+        className: "inline-flex shrink-0 items-center [&>svg]:size-[1em]",
+        children: leadingIcon
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
 }
 export {
   Tag,

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/tag.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport type { KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\nconst tagVariants = cva(\n\t\"group/tag inline-flex w-fit shrink-0 items-center font-bold leading-none whitespace-nowrap rounded-4xl border bg-surface-raised text-fg-secondary transition-[background-color,border-color] select-none\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1 py-0.5 pl-2 pr-1 text-gdt-xs\",\n\t\t\t\tmd: \"gap-1.5 py-1 pl-2.5 pr-1.5 text-gdt-sm\",\n\t\t\t\tlg: \"gap-2 py-1.5 pl-3 pr-2 text-gdt-md\",\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\ttrue: \"border-line\",\n\t\t\t\tfalse: \"border-transparent\",\n\t\t\t},\n\t\t\tclickable: {\n\t\t\t\ttrue: \"cursor-pointer hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\tfalse: \"cursor-default\",\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: \"opacity-50 pointer-events-none\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tborder: false,\n\t\t\tclickable: false,\n\t\t\tdisabled: false,\n\t\t},\n\t},\n);\n\nconst tagCloseVariants = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-full text-fg-secondary transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-4 [&>svg]:size-2.5\",\n\t\t\t\tmd: \"size-5 [&>svg]:size-3\",\n\t\t\t\tlg: \"size-5 [&>svg]:size-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ninterface TagProps {\n\tlabel: string;\n\tleadingIcon?: ReactNode;\n\tonClose?: (e: MouseEvent<HTMLButtonElement>) => void;\n\tonClick?: () => void;\n\tsize?: ComponentSize;\n\tborder?: boolean;\n\tclickable?: boolean;\n\tdisabled?: boolean;\n\tclassName?: string;\n}\n\nfunction Tag({\n\tlabel,\n\tleadingIcon,\n\tonClose,\n\tonClick,\n\tsize,\n\tborder = false,\n\tclickable = false,\n\tdisabled = false,\n\tclassName,\n}: TagProps) {\n\tconst resolvedSize = useComponentSize(size);\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\te.preventDefault();\n\t\t\tonClick?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// biome-ignore lint/a11y/noStaticElementInteractions: clickable tags set button semantics, focus, and keyboard activation while still allowing a nested close action.\n\t\t<div\n\t\t\trole={clickable ? \"button\" : undefined}\n\t\t\ttabIndex={clickable && !disabled ? 0 : undefined}\n\t\t\taria-disabled={disabled ? true : undefined}\n\t\t\tdata-slot=\"tag\"\n\t\t\tclassName={cn(\n\t\t\t\ttagVariants({ size: resolvedSize, border, clickable, disabled }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={clickable ? onClick : undefined}\n\t\t\tonKeyDown={clickable ? handleKeyDown : undefined}\n\t\t>\n\t\t\t{leadingIcon && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"tag-leading-icon\"\n\t\t\t\t\tclassName=\"inline-flex shrink-0 items-center [&>svg]:size-[1em]\"\n\t\t\t\t>\n\t\t\t\t\t{leadingIcon}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<span>{label}</span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label={`Remove ${label}`}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(tagCloseVariants({ size: resolvedSize }))}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonClose?.(e);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<X aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport { Tag, tagVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/tag.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\nconst tagVariants = cva(\n\t\"group/tag inline-flex w-full shrink-0 items-center border bg-surface-raised font-bold leading-none text-fg-primary whitespace-nowrap transition-[background-color,border-color,color,box-shadow] select-none data-[shape=full]:rounded-4xl data-[shape=box]:data-[size=sm]:rounded-md data-[shape=box]:data-[size=md]:rounded-lg data-[shape=box]:data-[size=lg]:rounded-xl data-[has-close=true]:data-[size=sm]:pr-5 data-[has-close=true]:data-[size=md]:pr-7 data-[has-close=true]:data-[size=lg]:pr-8\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1 py-0.5 pl-2 pr-1 text-gdt-xs\",\n\t\t\t\tmd: \"gap-1.5 py-1 pl-2.5 pr-1.5 text-gdt-sm\",\n\t\t\t\tlg: \"gap-2 py-1.5 pl-3 pr-2 text-gdt-md\",\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\ttrue: \"border-line\",\n\t\t\t\tfalse: \"border-transparent\",\n\t\t\t},\n\t\t\tclickable: {\n\t\t\t\ttrue: \"cursor-pointer hover:border-line-strong hover:bg-action-tertiary-hover active:border-line-strong active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\tfalse: \"cursor-default\",\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: \"border-line-subtle bg-surface text-fg-caption-placeholder\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tborder: false,\n\t\t\tclickable: false,\n\t\t\tdisabled: false,\n\t\t},\n\t},\n);\n\nconst tagCloseVariants = cva(\n\t\"absolute top-1/2 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-full text-current transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none disabled:text-fg-caption-placeholder\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"right-1 size-4 [&>svg]:size-2.5\",\n\t\t\t\tmd: \"right-1.5 size-5 [&>svg]:size-3\",\n\t\t\t\tlg: \"right-2 size-5 [&>svg]:size-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ninterface TagProps\n\textends Omit<\n\t\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\t\"children\" | \"disabled\" | \"onClick\" | \"type\"\n\t> {\n\tlabel: string;\n\tleadingIcon?: ReactNode;\n\tonClose?: (e: MouseEvent<HTMLButtonElement>) => void;\n\tcloseButtonProps?: Omit<\n\t\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\t\"children\" | \"disabled\" | \"onClick\" | \"type\"\n\t>;\n\tonClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n\tsize?: ComponentSize;\n\tshape?: \"full\" | \"box\";\n\tborder?: boolean;\n\tclickable?: boolean;\n\tdisabled?: boolean;\n}\n\nfunction Tag({\n\tlabel,\n\tleadingIcon,\n\tonClose,\n\tcloseButtonProps,\n\tonClick,\n\tsize,\n\tshape = \"full\",\n\tborder = false,\n\tclickable = false,\n\tdisabled = false,\n\tclassName,\n\t...props\n}: TagProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst isInteractive = clickable && !disabled;\n\n\tconst {\n\t\t\"aria-label\": closeAriaLabel = `Remove ${label}`,\n\t\tclassName: closeClassName,\n\t\tonKeyDown: onCloseKeyDown,\n\t\t...resolvedCloseButtonProps\n\t} = closeButtonProps ?? {};\n\n\treturn (\n\t\t<div data-slot=\"tag\" className=\"relative inline-flex w-fit shrink-0\">\n\t\t\t{clickable ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"tag-surface\"\n\t\t\t\t\tdata-shape={shape}\n\t\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t\tdata-has-close={Boolean(onClose)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\ttagVariants({\n\t\t\t\t\t\t\tsize: resolvedSize,\n\t\t\t\t\t\t\tborder,\n\t\t\t\t\t\t\tclickable: isInteractive,\n\t\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<TagContent label={label} leadingIcon={leadingIcon} />\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span\n\t\t\t\t\tdata-slot=\"tag-surface\"\n\t\t\t\t\tdata-shape={shape}\n\t\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t\tdata-has-close={Boolean(onClose)}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\ttagVariants({\n\t\t\t\t\t\t\tsize: resolvedSize,\n\t\t\t\t\t\t\tborder,\n\t\t\t\t\t\t\tclickable: false,\n\t\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<TagContent label={label} leadingIcon={leadingIcon} />\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{onClose && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={closeAriaLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\ttagCloseVariants({ size: resolvedSize }),\n\t\t\t\t\t\tcloseClassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tonClose(e);\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onCloseKeyDown}\n\t\t\t\t\t{...resolvedCloseButtonProps}\n\t\t\t\t>\n\t\t\t\t\t<X aria-hidden=\"true\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction TagContent({\n\tlabel,\n\tleadingIcon,\n}: Pick<TagProps, \"label\" | \"leadingIcon\">) {\n\treturn (\n\t\t<>\n\t\t\t{leadingIcon && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"tag-leading-icon\"\n\t\t\t\t\tclassName=\"inline-flex shrink-0 items-center [&>svg]:size-[1em]\"\n\t\t\t\t>\n\t\t\t\t\t{leadingIcon}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<span>{label}</span>\n\t\t</>\n\t);\n}\n\nexport { Tag, tagVariants, type TagProps };\n"],"mappings":"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","names":[]}

package/dist/testimonial-block.d.ts

@@ -0,0 +1,34 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const testimonialBlockVariants: (props?: ({
+    tone?: "brand" | "neutral" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TestimonialBlockProps = useRender.ComponentProps<"article"> & VariantProps<typeof testimonialBlockVariants>;
+declare function TestimonialBlock({ className, orientation, render, size, tone, ...props }: TestimonialBlockProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockMedia({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockPlayButton({ "aria-label": ariaLabel, children, className, render, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type TestimonialBlockRatingProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+    rating: number;
+    source?: React.ReactNode;
+    totalReviews?: number;
+    reviewLabel?: string;
+    showScore?: boolean;
+};
+declare function TestimonialBlockRating({ className, rating, render, reviewLabel, showScore, source, totalReviews, ...props }: TestimonialBlockRatingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockQuote({ className, render, ...props }: useRender.ComponentProps<"blockquote">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type TestimonialBlockReviewerProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+    name: string;
+    photo?: string;
+    reviewerRole?: React.ReactNode;
+};
+declare function TestimonialBlockReviewer({ className, name, photo, render, reviewerRole, ...props }: TestimonialBlockReviewerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TestimonialBlockAction({ "aria-label": ariaLabel, children, className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+export { TestimonialBlock, TestimonialBlockAction, TestimonialBlockContent, TestimonialBlockFooter, TestimonialBlockMedia, TestimonialBlockPlayButton, type TestimonialBlockProps, TestimonialBlockQuote, TestimonialBlockRating, TestimonialBlockReviewer, type TestimonialBlockReviewerProps, testimonialBlockVariants };