@elmeragroup/fuse 0.1.0-canary.1

package/components/span/span-variants.d.ts

@@ -0,0 +1,144 @@
+//#region src/components/span/span-variants.d.ts
+export declare const spanVariants: import("tailwind-variants").TVReturnType<{}, undefined, undefined, {
+  variant: {
+    success: "text-success";
+  };
+  size: {
+    xs: "text-xs *:text-xs **:text-xs";
+    sm: "text-sm *:text-sm **:text-sm";
+    default: "text-base *:text-base **:text-base";
+    lg: "text-lg *:text-lg **:text-lg";
+    xl: "text-xl *:text-xl **:text-xl";
+    "2xl": "text-2xl *:text-2xl **:text-2xl";
+  };
+  leading: {
+    none: "leading-none";
+    tight: "leading-tight";
+    snug: "leading-snug";
+    relaxed: "leading-relaxed";
+    loose: "leading-loose";
+  };
+  truncate: {
+    true: "truncate";
+  };
+  align: {
+    justify: "text-justify";
+  };
+  weight: {
+    normal: "font-normal";
+    medium: "font-medium";
+    bold: "font-medium";
+  };
+} & {
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, import("tailwind-variants").TVReturnType<{
+  variant: {
+    success: "text-success";
+  };
+  size: {
+    xs: "text-xs *:text-xs **:text-xs";
+    sm: "text-sm *:text-sm **:text-sm";
+    default: "text-base *:text-base **:text-base";
+    lg: "text-lg *:text-lg **:text-lg";
+    xl: "text-xl *:text-xl **:text-xl";
+    "2xl": "text-2xl *:text-2xl **:text-2xl";
+  };
+  leading: {
+    none: "leading-none";
+    tight: "leading-tight";
+    snug: "leading-snug";
+    relaxed: "leading-relaxed";
+    loose: "leading-loose";
+  };
+  truncate: {
+    true: "truncate";
+  };
+  align: {
+    justify: "text-justify";
+  };
+  weight: {
+    normal: "font-normal";
+    medium: "font-medium";
+    bold: "font-medium";
+  };
+}, undefined, "font-sans", {
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, undefined, {
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined>>>>;
+//#endregion
+//# sourceMappingURL=span-variants.d.ts.map

package/components/span/span-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-variants.d.ts","names":[],"sources":["../../../src/components/span/span-variants.ts"],"mappings":";qBAYa,0CAAY"}

package/components/span/span-variants.js

@@ -0,0 +1,20 @@
+import { textVariants } from "../text/text-variants.js";
+import { tv } from "tailwind-variants";
+//#region src/components/span/span-variants.ts
+/**
+* PUBLIC recipe. Extends `textVariants` and only overrides the
+* `leading` default to `snug` for inline use. Type-scale, not a density
+* control-box rung.
+*
+* Internal composition imports `textVariants` from the Text recipe module —
+* not a grab-bag styles barrel. Consumers use `@elmeragroup/fuse/span`.
+*/
+const spanVariants = tv({
+	extend: textVariants,
+	variants: {},
+	defaultVariants: { leading: "snug" }
+});
+//#endregion
+export { spanVariants };
+
+//# sourceMappingURL=span-variants.js.map

package/components/span/span-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"span-variants.js","names":[],"sources":["../../../src/components/span/span-variants.ts"],"sourcesContent":["/**\n * PUBLIC recipe. Extends `textVariants` and only overrides the\n * `leading` default to `snug` for inline use. Type-scale, not a density\n * control-box rung.\n *\n * Internal composition imports `textVariants` from the Text recipe module —\n * not a grab-bag styles barrel. Consumers use `@elmeragroup/fuse/span`.\n */\nimport { tv } from \"tailwind-variants\";\n\nimport { textVariants } from \"../text/text-variants\";\n\nexport const spanVariants = tv({\n  extend: textVariants,\n  // Keep an empty variants object so API extraction preserves the inherited text axes.\n  variants: {},\n  defaultVariants: {\n    leading: \"snug\",\n  },\n});\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,eAAe,GAAG;CAC7B,QAAQ;CAER,UAAU,CAAC;CACX,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}

package/components/span/span.d.ts

@@ -0,0 +1,23 @@
+import { spanVariants } from "./span-variants.js";
+import { ComponentPropsWithoutRef, ReactElement } from "react";
+import { VariantProps } from "tailwind-variants";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/span/span.d.ts
+export type SpanProps = Omit<ComponentPropsWithoutRef<"span">, "slot"> & VariantProps<typeof spanVariants> & {
+  /**
+   * Replaces the host element via base-ui `useRender`. The host stays a
+   * `span` when omitted — the forced-span identity is kept.
+   */
+  render?: useRender.RenderProp;
+};
+/**
+ * Forced inline `span` typography primitive. Same recipe surface as Text, with
+ * `leading` defaulting to `snug`. Polymorphism is `render` via base-ui
+ * `useRender`, never `as`.
+ */
+export declare function Span({ className, variant, size, leading, truncate, weight, align, render, ...props }: SpanProps): ReactElement;
+export declare namespace Span {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=span.d.ts.map

package/components/span/span.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"span.d.ts","names":[],"sources":["../../../src/components/span/span.tsx"],"mappings":";;;;;YAWY,YAAY,KAAK,4CAC3B,oBAAoB;;;;;EAKlB,SAAS,UAAU;;;;;;;wBAQP,OACd,WACA,SACA,MACA,SACA,UACA,QACA,OACA,WACG,SACF,YAAY;yBAVC;MAAA"}

package/components/span/span.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { spanVariants } from "./span-variants.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/span/span.tsx
+/**
+* Forced inline `span` typography primitive. Same recipe surface as Text, with
+* `leading` defaulting to `snug`. Polymorphism is `render` via base-ui
+* `useRender`, never `as`.
+*/
+function Span({ className, variant, size, leading, truncate, weight, align, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: {
+			"data-slot": "span",
+			...mergeProps({ className: cn(spanVariants({
+				variant,
+				size,
+				leading,
+				truncate,
+				weight,
+				align
+			}), className) }, props)
+		},
+		render
+	});
+}
+Span.displayName = "Span";
+//#endregion
+export { Span };
+
+//# sourceMappingURL=span.js.map

package/components/span/span.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"span.js","names":[],"sources":["../../../src/components/span/span.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, ReactElement } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { spanVariants } from \"./span-variants\";\n\nexport type SpanProps = Omit<ComponentPropsWithoutRef<\"span\">, \"slot\"> &\n  VariantProps<typeof spanVariants> & {\n    /**\n     * Replaces the host element via base-ui `useRender`. The host stays a\n     * `span` when omitted — the forced-span identity is kept.\n     */\n    render?: useRender.RenderProp;\n  };\n\n/**\n * Forced inline `span` typography primitive. Same recipe surface as Text, with\n * `leading` defaulting to `snug`. Polymorphism is `render` via base-ui\n * `useRender`, never `as`.\n */\nexport function Span({\n  className,\n  variant,\n  size,\n  leading,\n  truncate,\n  weight,\n  align,\n  render,\n  ...props\n}: SpanProps): ReactElement {\n  return useRender({\n    defaultTagName: \"span\",\n    props: {\n      \"data-slot\": \"span\",\n      ...mergeProps<\"span\">(\n        {\n          className: cn(spanVariants({ variant, size, leading, truncate, weight, align }), className),\n        },\n        props\n      ),\n    },\n    render,\n  });\n}\n\nSpan.displayName = \"Span\";\n"],"mappings":";;;;;;;;;;;AAyBA,SAAgB,KAAK,EACnB,WACA,SACA,MACA,SACA,UACA,QACA,OACA,QACA,GAAG,SACuB;CAC1B,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,aAAa;GACb,GAAG,WACD,EACE,WAAW,GAAG,aAAa;IAAE;IAAS;IAAM;IAAS;IAAU;IAAQ;GAAM,CAAC,GAAG,SAAS,EAC5F,GACA,KACF;EACF;EACA;CACF,CAAC;AACH;AAEA,KAAK,cAAc"}

package/components/switch/switch.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactElement } from "react";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch/switch.d.ts
+export type SwitchProps = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
+  /** Extra classes, merged via `cn` after the base classes. */
+  className?: string;
+  /**
+   * Optical track size, emitted as `data-size`. Pixel-fixed at both density
+   * stamps — not a control-box density rung.
+   */
+  size?: "sm" | "default";
+};
+/**
+ * Unlabeled two-state switch. Client — base-ui Switch owns
+ * checked state. Labeled usage composes
+ * `Field.Root` + `Field.Label`.
+ */
+export declare function Switch({ className, size, ...props }: SwitchProps): ReactElement;
+export declare namespace Switch {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=switch.d.ts.map

package/components/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","names":[],"sources":["../../../src/components/switch/switch.tsx"],"mappings":";;;YAWY,cAAc,KAAK,sBAAsB,SAAgB;;EAEnE;;;;;EAKA;;;;;;;wBAQc,SAAS,WAAW,SAAqB,SAAS,cAAc;yBAAhE;MAAA"}

package/components/switch/switch.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { dataStateFaceClass } from "../../styles/state-face.js";
+import { selfFocusRingClass } from "../../styles/utils.js";
+import { definedProps } from "../../internal/defined-props.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch/switch.tsx
+/**
+* Unlabeled two-state switch. Client — base-ui Switch owns
+* checked state. Labeled usage composes
+* `Field.Root` + `Field.Label`.
+*/
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch shadow-xs relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-3 after:content-[''] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-checked:bg-primary data-unchecked:bg-input", selfFocusRingClass, dataStateFaceClass, className),
+		...definedProps(props),
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+		})
+	});
+}
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.js.map

package/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\n\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { dataStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\nexport type SwitchProps = Omit<ComponentProps<typeof SwitchPrimitive.Root>, \"className\"> & {\n  /** Extra classes, merged via `cn` after the base classes. */\n  className?: string;\n  /**\n   * Optical track size, emitted as `data-size`. Pixel-fixed at both density\n   * stamps — not a control-box density rung.\n   */\n  size?: \"sm\" | \"default\";\n};\n\n/**\n * Unlabeled two-state switch. Client — base-ui Switch owns\n * checked state. Labeled usage composes\n * `Field.Root` + `Field.Label`.\n */\nexport function Switch({ className, size = \"default\", ...props }: SwitchProps): ReactElement {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        // The root is a <span>, so the state face keys off Base UI's `data-disabled` and\n        // `data-invalid` attributes, plus a consumer's `aria-invalid`.\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- native outline off; ring comes from the shared adapter\n        \"peer group/switch shadow-xs relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-3 after:content-[''] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-checked:bg-primary data-unchecked:bg-input\",\n        selfFocusRingClass,\n        dataStateFaceClass,\n        className\n      )}\n      {...definedProps(props)}>\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAgB,OAAO,EAAE,WAAW,OAAO,WAAW,GAAG,SAAoC;CAC3F,OACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAIT,gXACA,oBACA,oBACA,SACF;EACA,GAAI,aAAa,KAAK;EACtB,UAAA,oBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B;AAEA,OAAO,cAAc"}

package/components/table/table-cell-classes.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/table/table-cell-classes.d.ts
+export declare const TABLE_CELL_CLASSES: string;
+//#endregion
+//# sourceMappingURL=table-cell-classes.d.ts.map

package/components/table/table-cell-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell-classes.d.ts","names":[],"sources":["../../../src/components/table/table-cell-classes.ts"],"mappings":";qBAOa"}

package/components/table/table-cell-classes.js

@@ -0,0 +1,12 @@
+import { cn } from "../../styles/cn.js";
+//#region src/components/table/table-cell-classes.ts
+/**
+* Shared `Table.Cell` class string. `VerticalTable.Key` applies the
+* same layout and in-frame padding so a `render` host keeps the proven cell geometry.
+* Package-private — not on the `@elmeragroup/fuse/table` facade.
+*/
+const TABLE_CELL_CLASSES = cn("p-2 align-middle leading-none whitespace-nowrap in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0");
+//#endregion
+export { TABLE_CELL_CLASSES };
+
+//# sourceMappingURL=table-cell-classes.js.map

package/components/table/table-cell-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell-classes.js","names":[],"sources":["../../../src/components/table/table-cell-classes.ts"],"sourcesContent":["/**\n * Shared `Table.Cell` class string. `VerticalTable.Key` applies the\n * same layout and in-frame padding so a `render` host keeps the proven cell geometry.\n * Package-private — not on the `@elmeragroup/fuse/table` facade.\n */\nimport { cn } from \"../../styles/cn\";\n\nexport const TABLE_CELL_CLASSES = cn(\n  \"p-2 align-middle leading-none whitespace-nowrap in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0\"\n);\n"],"mappings":";;;;;;;AAOA,MAAa,qBAAqB,GAChC,2LACF"}

package/components/table/table-cell.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactElement } from "react";
+//#region src/components/table/table-cell.d.ts
+/**
+ * Semantic `<td>`. Package-private implementation for `Table.Cell` so
+ * `VerticalTable.Key` can default `render ?? <TableCell />` without importing the
+ * server compound.
+ */
+export declare function TableCell({ className, ...props }: ComponentProps<"td">): ReactElement;
+export declare namespace TableCell {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=table-cell.d.ts.map

package/components/table/table-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.d.ts","names":[],"sources":["../../../src/components/table/table-cell.tsx"],"mappings":";;;;;;;wBAUgB,YAAY,cAAc,SAAS,uBAAuB;yBAA1D;MAAA"}

package/components/table/table-cell.js

@@ -0,0 +1,21 @@
+import { cn } from "../../styles/cn.js";
+import { TABLE_CELL_CLASSES } from "./table-cell-classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table-cell.tsx
+/**
+* Semantic `<td>`. Package-private implementation for `Table.Cell` so
+* `VerticalTable.Key` can default `render ?? <TableCell />` without importing the
+* server compound.
+*/
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn(TABLE_CELL_CLASSES, className),
+		...props
+	});
+}
+TableCell.displayName = "Table.Cell";
+//#endregion
+export { TableCell };
+
+//# sourceMappingURL=table-cell.js.map

package/components/table/table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../src/components/table/table-cell.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement } from \"react\";\n\nimport { cn } from \"../../styles/cn\";\nimport { TABLE_CELL_CLASSES } from \"./table-cell-classes\";\n\n/**\n * Semantic `<td>`. Package-private implementation for `Table.Cell` so\n * `VerticalTable.Key` can default `render ?? <TableCell />` without importing the\n * server compound.\n */\nexport function TableCell({ className, ...props }: ComponentProps<\"td\">): ReactElement {\n  return <td data-slot=\"table-cell\" className={cn(TABLE_CELL_CLASSES, className)} {...props} />;\n}\n\nTableCell.displayName = \"Table.Cell\";\n"],"mappings":";;;;;;;;;AAUA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAA6C;CACrF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9F;AAEA,UAAU,cAAc"}

package/components/table/table.d.ts

@@ -0,0 +1,98 @@
+import { TableCell } from "./table-cell.js";
+import { VerticalTableHeader, VerticalTableHeaderProps } from "./vertical-table-header.js";
+import { VerticalTableKey, VerticalTableKeyProps } from "./vertical-table-key.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/table/table.d.ts
+export type TableRootProps = ComponentProps<"table">;
+export type TableHeaderProps = ComponentProps<"thead">;
+export type TableBodyProps = ComponentProps<"tbody">;
+export type TableFooterProps = ComponentProps<"tfoot">;
+export type TableRowProps = ComponentProps<"tr">;
+export type TableHeadProps = ComponentProps<"th">;
+export type TableCellProps = ComponentProps<"td">;
+export type TableCaptionProps = ComponentProps<"caption">;
+export type VerticalTableItem = {
+  label: ReactNode;
+  value: ReactNode;
+  fontWeight?: "normal" | "bold";
+  isLoading?: boolean;
+  text?: "default" | "truncate";
+};
+export type VerticalTableRootProps = ComponentProps<"div"> & {
+  /**
+   * Facts-sheet look. `"non-bordered-compact"` drops the wrapper border/background
+   * and tightens cell padding via descendant `data-variant` selectors.
+   */
+  variant?: "default" | "non-bordered-compact";
+};
+export type VerticalTableBodyProps = ComponentProps<"div"> & {
+  /**
+   * Key/value rows rendered before `children`. Each item becomes a
+   * `VerticalTable.Row` with `Key` then `Value`.
+   */
+  data?: VerticalTableItem[];
+  /**
+   * Inner `<table>` (`Table.Root`) props. Association attributes such as
+   * `aria-labelledby` belong here — Body's own props, including `aria-*`, stay
+   * on the wrapper only. `className` merges with `table-fixed`.
+   */
+  tableProps?: TableRootProps;
+};
+export type VerticalTableRowProps = ComponentProps<"tr"> & {
+  /**
+   * Weight token consumed by `Key`/`Value` via the row group scope.
+   */
+  fontWeight?: "normal" | "bold";
+  /**
+   * Hides the row with the `hidden` class when true.
+   */
+  isHidden?: boolean;
+};
+export type VerticalTableValueProps = ComponentProps<"td"> & {
+  /**
+   * `"truncate"` clips overflowing text; `"default"` wraps (`whitespace-normal`).
+   */
+  text?: "default" | "truncate";
+  /**
+   * Replaces children with a `Skeleton` (`h-4 w-full max-w-24`).
+   */
+  isLoading?: boolean;
+};
+/**
+ * Semantic `<table>` composite. Server compound — it owns no state,
+ * no handlers, and no browser APIs. `Header` and
+ * `Key` on `VerticalTable` are client `useRender` islands so other outline levels and
+ * row-header hosts stay possible without flipping this module to a client boundary.
+ */
+declare function TableRoot({ className, ...props }: TableRootProps): ReactElement;
+declare function TableHeader({ className, ...props }: TableHeaderProps): ReactElement;
+declare function TableBody({ className, ...props }: TableBodyProps): ReactElement;
+declare function TableFooter({ className, ...props }: TableFooterProps): ReactElement;
+declare function TableRow({ className, ...props }: TableRowProps): ReactElement;
+declare function TableHead({ className, ...props }: TableHeadProps): ReactElement;
+declare function TableCaption({ className, ...props }: TableCaptionProps): ReactElement;
+declare function VerticalTableRoot({ children, className, variant, ...props }: VerticalTableRootProps): ReactElement;
+declare function VerticalTableBody({ children, className, data, tableProps, ...props }: VerticalTableBodyProps): ReactElement;
+declare function VerticalTableRow({ children, className, fontWeight, isHidden, ...props }: VerticalTableRowProps): ReactElement;
+declare function VerticalTableValue({ children, className, text, isLoading, ...props }: VerticalTableValueProps): ReactElement;
+export declare const Table: {
+  Root: typeof TableRoot;
+  Header: typeof TableHeader;
+  Body: typeof TableBody;
+  Footer: typeof TableFooter;
+  Row: typeof TableRow;
+  Head: typeof TableHead;
+  Cell: typeof TableCell;
+  Caption: typeof TableCaption;
+};
+export declare const VerticalTable: {
+  Root: typeof VerticalTableRoot;
+  Header: typeof VerticalTableHeader;
+  Body: typeof VerticalTableBody;
+  Row: typeof VerticalTableRow;
+  Key: typeof VerticalTableKey;
+  Value: typeof VerticalTableValue;
+};
+//#endregion
+export type { VerticalTableHeaderProps, VerticalTableKeyProps };
+//# sourceMappingURL=table.d.ts.map

package/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../../src/components/table/table.tsx"],"mappings":";;;;;YASY,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB;YACjB,mBAAmB;YACnB,gBAAgB;YAChB,iBAAiB;YACjB,iBAAiB;YACjB,oBAAoB;YAEpB;EACV,OAAO;EACP,OAAO;EACP;EACA;EACA;;YAGU,yBAAyB;;;;;EAKnC;;YAKU,yBAAyB;;;;;EAKnC,OAAO;;;;;;EAMP,aAAa;;YAGH,wBAAwB;;;;EAIlC;;;;EAIA;;YAKU,0BAA0B;;;;EAIpC;;;;EAIA;;;;;;;;iBASO,YAAY,cAAc,SAAS,iBAAiB;iBAepD,cAAc,cAAc,SAAS,mBAAmB;iBAaxD,YAAY,cAAc,SAAS,iBAAiB;iBAapD,cAAc,cAAc,SAAS,mBAAmB;iBAaxD,WAAW,cAAc,SAAS,gBAAgB;iBAalD,YAAY,cAAc,SAAS,iBAAiB;iBAcpD,eAAe,cAAc,SAAS,oBAAoB;iBAU1D,oBACP,UACA,WACA,YACG,SACF,yBAAyB;iBAYnB,oBACP,UACA,WACA,MACA,eACG,SACF,yBAAyB;iBA+BnB,mBACP,UACA,WACA,YACA,aACG,SACF,wBAAwB;iBAgBlB,qBACP,UACA,WACA,MACA,cACG,SACF,0BAA0B;qBA+BhB;EACX,aAAI;EACJ,eAAM;EACN,aAAI;EACJ,eAAM;EACN,YAAG;EACH,aAAI;EACJ,aAAI;EACJ,gBAAO;;qBAGI;EACX,aAAI;EACJ,eAAM;EACN,aAAI;EACJ,YAAG;EACH,YAAG;EACH,cAAK"}

package/components/table/table.js

@@ -0,0 +1,151 @@
+import { cn } from "../../styles/cn.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { TableCell } from "./table-cell.js";
+import { verticalTableCellText } from "./vertical-table-cell-text.js";
+import { VerticalTableHeader } from "./vertical-table-header.js";
+import { VerticalTableKey } from "./vertical-table-key.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+/**
+* Semantic `<table>` composite. Server compound — it owns no state,
+* no handlers, and no browser APIs. `Header` and
+* `Key` on `VerticalTable` are client `useRender` islands so other outline levels and
+* row-header hosts stay possible without flipping this module to a client boundary.
+*/
+function TableRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("text-sm w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0", className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("before:shadow-[0_1px_--theme(--color-black/6%)] in-data-[slot=frame]:shadow-xs/5 relative before:pointer-events-none before:absolute before:inset-px before:rounded-[calc(--theme(--radius-xl)-1px)] not-in-data-[slot=frame]:before:hidden in-data-[slot=frame]:rounded-xl [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("font-medium border-t bg-muted/72 in-data-[slot=frame]:border-none in-data-[slot=frame]:bg-transparent in-data-[slot=frame]:*:[tr]:hover:bg-transparent [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("font-medium h-10 px-2 text-left align-middle leading-none whitespace-nowrap text-muted-foreground has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", className),
+		scope: "col",
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("text-sm mt-4 text-muted-foreground in-data-[slot=frame]:my-4", className),
+		...props
+	});
+}
+function VerticalTableRoot({ children, className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "vertical-table-root",
+		"data-variant": variant,
+		className: cn("space-y-3", className),
+		...props,
+		children
+	});
+}
+function VerticalTableBody({ children, className, data, tableProps, ...props }) {
+	const { className: tableClassName, ...innerTableProps } = tableProps ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "vertical-table",
+		className: cn("overflow-hidden rounded-md border bg-background in-data-[variant=non-bordered-compact]:border-none in-data-[variant=non-bordered-compact]:bg-inherit", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Table.Root, {
+			className: cn("table-fixed", tableClassName),
+			...innerTableProps,
+			children: /* @__PURE__ */ jsxs("tbody", {
+				"data-slot": "vertical-table-body",
+				children: [data && data.length > 0 ? data.map(({ label, value, fontWeight = "normal", isLoading = false, text = "truncate" }, index) => /* @__PURE__ */ jsxs(VerticalTableRow, {
+					fontWeight,
+					children: [/* @__PURE__ */ jsx(VerticalTableKey, {
+						text,
+						children: label
+					}), /* @__PURE__ */ jsx(VerticalTableValue, {
+						text,
+						isLoading,
+						children: value
+					})]
+				}, `vertical-table-row-label-${index}`)) : null, children]
+			})
+		})
+	});
+}
+function VerticalTableRow({ children, className, fontWeight = "normal", isHidden = false, ...props }) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		"data-font-weight": fontWeight,
+		className: cn("group/vertical-table-row-item *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r", "in-data-[variant=non-bordered-compact]:border-none", { hidden: isHidden }, className),
+		...props,
+		children
+	});
+}
+function VerticalTableValue({ children, className, text = "truncate", isLoading = false, ...props }) {
+	return /* @__PURE__ */ jsx(TableCell, {
+		className: cn("text-sm *:text-sm **:text-sm group-data-[font-weight=bold]/vertical-table-row-item:font-medium group-data-[font-weight=normal]/vertical-table-row-item:font-normal py-2", "in-data-[variant=non-bordered-compact]:border-none in-data-[variant=non-bordered-compact]:bg-inherit in-data-[variant=non-bordered-compact]:p-1", verticalTableCellText(text), className),
+		...props,
+		children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-24 in-data-[variant=non-bordered-compact]:h-lh" }) : children
+	});
+}
+TableRoot.displayName = "Table.Root";
+TableHeader.displayName = "Table.Header";
+TableBody.displayName = "Table.Body";
+TableFooter.displayName = "Table.Footer";
+TableRow.displayName = "Table.Row";
+TableHead.displayName = "Table.Head";
+TableCaption.displayName = "Table.Caption";
+VerticalTableRoot.displayName = "VerticalTable.Root";
+VerticalTableBody.displayName = "VerticalTable.Body";
+VerticalTableRow.displayName = "VerticalTable.Row";
+VerticalTableValue.displayName = "VerticalTable.Value";
+const Table = {
+	Root: TableRoot,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	Head: TableHead,
+	Cell: TableCell,
+	Caption: TableCaption
+};
+const VerticalTable = {
+	Root: VerticalTableRoot,
+	Header: VerticalTableHeader,
+	Body: VerticalTableBody,
+	Row: VerticalTableRow,
+	Key: VerticalTableKey,
+	Value: VerticalTableValue
+};
+//#endregion
+export { Table, VerticalTable };
+
+//# sourceMappingURL=table.js.map