@kanso-labs/kanso-ui 0.4.6 → 0.5.1

package/dist/assets/stylex.css

@@ -79,6 +79,10 @@
     border-width: 1px;
   }
 
+  .xj2l1yv {
+    gap: var(--x196ey9q);
+  }
+
   .x14qo01y {
     gap: var(--x1ug6acx);
   }
@@ -159,6 +163,10 @@
     padding-inline: var(--xod9tvo);
   }
 
+  .x1hl2dhg {
+    text-decoration: none;
+  }
+
   .xtecew7:active:not(:disabled) {
     border-radius: var(--x1m0y4ip);
   }
@@ -385,6 +393,10 @@
     display: flex;
   }
 
+  .xrvj5dj {
+    display: grid;
+  }
+
   .x1rg5ohu {
     display: inline-block;
   }
@@ -393,6 +405,10 @@
     display: inline-flex;
   }
 
+  .x1s85apg {
+    display: none;
+  }
+
   .xdt5ytf {
     flex-direction: column;
   }
@@ -617,6 +633,10 @@
     font-weight: var(--xwguucb);
   }
 
+  .x1mkdm3x {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .xtijo5x {
     inset-inline-end: 0;
   }
@@ -1215,7 +1235,37 @@
     .x9t1vth.x9t1vth {
       border-start-start-radius: var(--x1w5u0jm);
     }
+  }
+
+  @media (width >= 840px) {
+    .x9a4l8x.x9a4l8x {
+      display: block;
+    }
 
+    .xkgydl7.xkgydl7 {
+      grid-template-columns: 360px minmax(0, 1fr);
+    }
+  }
+
+  @media (width >= 1600px) {
+    .xxxc7o5.xxxc7o5 {
+      grid-template-columns: 412px minmax(0, 1fr);
+    }
+  }
+
+  @media (width >= 600px) {
+    .x1bg1yrb.x1bg1yrb {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (width >= 840px) {
+    .xj1h9sb.xj1h9sb {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (width < 600px) {
     .x1upgybz.x1upgybz {
       inset-inline-start: 0;
     }

package/dist/components/card/index.d.ts

@@ -1,11 +1,11 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/card/index.d.ts
 type CardProps = {
-  children?: ReactNode;
   /**
-   * Renders a `<button>` that ripples and lifts on hover, for a card that is
-   * itself the thing you press. Leave it off for a card that merely holds
-   * content, including one containing its own buttons.
+   * Makes the card the thing you press: it ripples, lifts on hover, and takes
+   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave
+   * it off for a card that merely holds content, including one containing its
+   * own buttons.
    * @default false
    */
   interactive?: boolean;
@@ -21,9 +21,21 @@ type CardProps = {
    * @default 'elevated'
    */
   variant?: CardVariant;
-} & HTMLAttributes<HTMLElement>;
+} & useRender.ComponentProps<'div'>;
 type CardVariant = 'elevated' | 'filled' | 'outlined';
-declare function Card({ children, interactive, padding, variant, ...props }: CardProps): import("react").JSX.Element;
+/**
+ * A surface holding related content. `render` decides which element that
+ * surface is, so a card that navigates can be a real `<a href>` — announced
+ * as a link and opening in a new tab on a modifier click, which a `<button>`
+ * with an onClick does neither of.
+ *
+ * `interactive` and `render` are separate axes. `interactive` says the card
+ * is pressable and gives it the ripple, the hover lift, and a focus ring;
+ * `render` says what it is. A pressable card with no `render` is a
+ * `<button>`, which is the right default for one that acts rather than
+ * navigates.
+ */
+declare function Card({ children, interactive, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding, render, variant, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { type CardProps, Card as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -1,14 +1,17 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/card/index.tsx
 const styles = {
 	base: {
 		kaIpWk: "xhpdng0",
 		kMzoRj: "xc342km",
+		kMwMTN: "x1heor9g",
 		k1xSpc: "x1lliihq",
 		kVQacm: "xb3r6kr",
 		kVAEAm: "x1n2onr6",
+		kybGjl: "x1hl2dhg",
 		$$css: true
 	},
 	elevated: {
@@ -62,20 +65,38 @@ const interactionStyles = {
 		$$css: true
 	}
 };
-function Card({ children, interactive = false, padding = "default", variant = "elevated", ...props$1 }) {
-	const ripple = useRipple(interactive);
-	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
-	if (!interactive) return /* @__PURE__ */ jsx("div", {
-		...props$1,
-		...props(styles.base, styles[variant], padded),
-		children
+/**
+* A surface holding related content. `render` decides which element that
+* surface is, so a card that navigates can be a real `<a href>` — announced
+* as a link and opening in a new tab on a modifier click, which a `<button>`
+* with an onClick does neither of.
+*
+* `interactive` and `render` are separate axes. `interactive` says the card
+* is pressable and gives it the ripple, the hover lift, and a focus ring;
+* `render` says what it is. A pressable card with no `render` is a
+* `<button>`, which is the right default for one that acts rather than
+* navigates.
+*/
+function Card({ children, interactive = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding = "default", render, variant = "elevated", ...props$1 }) {
+	const ripple = useRipple(interactive, {
+		onClick,
+		onContextMenu,
+		onPointerCancel,
+		onPointerDown,
+		onPointerLeave,
+		onPointerUp
 	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		...ripple.handlers,
-		...props$1,
-		...props(styles.base, styles[variant], padded, styles.interactive, interactionStyles[variant]),
-		children: [children, ripple.surface]
+	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
+	return useRender({
+		defaultTagName: interactive ? "button" : "div",
+		props: {
+			...props$1,
+			...interactive && render === void 0 ? { type: "button" } : void 0,
+			...ripple.handlers,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] }),
+			...props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant])
+		},
+		render
 	});
 }
 //#endregion

package/dist/components/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"xhpdng0\",\n    kMzoRj: \"xc342km\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> and a <button> both accept, because\n// `interactive` decides which one renders. Anything element-specific — a\n// button's `type`, a div's ref type — would be wrong for one of the two, so\n// the shared surface is what the prop type can honestly promise.\ntype CardProps = {\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and lifts on hover, for a card that is\n   * itself the thing you press. Leave it off for a card that merely holds\n   * content, including one containing its own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & HTMLAttributes<HTMLElement>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\nfunction Card({\n  children,\n  interactive = false,\n  padding = 'default',\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  if (!interactive) {\n    return <div {...props} {...stylex.props(styles.base, styles[variant], padded)}>\n        {children}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...stylex.props(styles.base, styles[variant], padded, styles.interactive, interactionStyles[variant])}>\n      {children}\n      {ripple.surface}\n    </button>;\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,oBAAoB;CACxB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA6BA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,UAAU,WACV,UAAU,YACV,GAAG,WACS;CACZ,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM;EACvE;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,OAAO,aAAa,kBAAkB,QAAQ;EAA3J,UAAA,CACF,UACA,OAAO,OACF;;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"xhpdng0\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & useRender.ComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      // Spread last so it wins over a consumer-supplied className rather than\n      // being merged with one, matching Text and Badge. useRender joins the\n      // two class strings otherwise, and which won would come down to\n      // stylesheet order rather than anything visible at the call site.\n      ...stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant])\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,oBAAoB;CACxB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,SACA,eACA,iBACA,eACA,gBACA,aACA,UAAU,WACV,QACA,UAAU,YACV,GAAG,WACS;CAMZ,MAAM,SAAS,UAAU,aAAa;EACpC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB,cAAc,WAAW;EACzC,OAAO;GACL,GAAG;GAKH,GAAI,eAAe,WAAW,KAAA,IAAY,EACxC,MAAM,SACR,IAAI,KAAA;GACJ,GAAG,OAAO;GACV,UAAU,qBAAA,UAAA,EAAA,UAAA,CACL,UACA,OAAO,OACV,EAAA,CAAA;GAKF,GAAG,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,eAAe,OAAO,aAAa,eAAe,kBAAkB,QAAQ;EACpI;EACA;CACF,CAAC;AACH"}

package/dist/components/index.d.ts

@@ -9,10 +9,12 @@ import Currency, { CurrencyProps } from "./currency/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
+import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
+import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/list-detail/index.d.ts

@@ -0,0 +1,41 @@
+import { useRender } from "@base-ui/react/use-render";
+import { ReactNode } from "react";
+//#region src/components/list-detail/index.d.ts
+type ListDetailProps = {
+  /**
+   * The selected item's content. Stands on its own, and takes the flexible
+   * pane.
+   */
+  detail?: ReactNode;
+  /**
+   * The items to choose between. Takes the fixed pane — 360px wide, 412px at
+   * extra-large.
+   */
+  list?: ReactNode;
+  /**
+   * Which pane to show while only one fits, below the expanded breakpoint.
+   * Both are shown from expanded up, where this is ignored.
+   *
+   * Controlled, with no uncontrolled fallback: the layout cannot know that an
+   * item was selected or that the reader went back, so holding that state
+   * here would only ever be wrong.
+   * @default 'list'
+   */
+  showing?: 'detail' | 'list';
+} & Omit<useRender.ComponentProps<'div'>, 'children'>;
+/**
+ * Material 3's list-detail layout: a fixed list pane beside a flexible detail
+ * pane, collapsing to one pane at a time below the expanded breakpoint.
+ *
+ * Layout only — neither pane paints a surface of its own, so what goes inside
+ * them is composed at the call site. `render` swaps the container's element,
+ * for a layout that should be a `<main>` rather than a `<div>`.
+ *
+ * The panes are written to the DOM in the order they are shown, which is what
+ * M3 asks of co-planar panes: focus order has to match the arrangement on
+ * screen.
+ */
+declare function ListDetail({ detail, list, render, showing, ...props }: ListDetailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type ListDetailProps, ListDetail as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/list-detail/index.js

@@ -0,0 +1,42 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/list-detail/index.tsx
+/**
+* Material 3's list-detail layout: a fixed list pane beside a flexible detail
+* pane, collapsing to one pane at a time below the expanded breakpoint.
+*
+* Layout only — neither pane paints a surface of its own, so what goes inside
+* them is composed at the call site. `render` swaps the container's element,
+* for a layout that should be a `<main>` rather than a `<div>`.
+*
+* The panes are written to the DOM in the order they are shown, which is what
+* M3 asks of co-planar panes: focus order has to match the arrangement on
+* screen.
+*/
+function ListDetail({ detail, list, render, showing = "list", ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				...{
+					0: { className: "xeuugli" },
+					1: { className: "xeuugli x1s85apg x9a4l8x" }
+				}[!!(showing === "detail") << 0],
+				children: list
+			}), /* @__PURE__ */ jsx("div", {
+				...{
+					0: { className: "xeuugli" },
+					1: { className: "xeuugli x1s85apg x9a4l8x" }
+				}[!!(showing === "list") << 0],
+				children: detail
+			})] }),
+			className: "xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5"
+		},
+		render
+	});
+}
+//#endregion
+export { ListDetail as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/list-detail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's recommended snap widths for a fixed pane. The list is the\n// fixed one here — M3 points a fixed pane at \"lists with light information\n// density\" — and the detail pane is the flexible one that absorbs whatever is\n// left, which satisfies the spec's rule that every layout carry at least one\n// flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material 3's canonical layouts, and the fixed-and-flexible shape of\n// its two-pane layouts. Unlike SupportingPane, the detail pane here stands on\n// its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// M3 puts the second pane on screen from expanded up. Below that the spec\n// shows one pane at a time, with selecting an item swapping to the detail and\n// back returning to the list — app navigation rather than layout, which is\n// why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<useRender.ComponentProps<'div'>, 'children'>;\n\n/**\n * Material 3's list-detail layout: a fixed list pane beside a flexible detail\n * pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"xeuugli\"\n          },\n          1: {\n            className: \"xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"xeuugli\"\n          },\n          1: {\n            className: \"xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...{\n        className: \"xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;AA6DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,UACb;KACA,GAAG,EACD,WAAW,2BACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,UACb;KACA,GAAG,EACD,WAAW,2BACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GAEA,WAAW;EAEf;EACA;CACF,CAAC;AACH"}

package/dist/components/supporting-pane/index.d.ts

@@ -0,0 +1,29 @@
+import { useRender } from "@base-ui/react/use-render";
+import { ReactNode } from "react";
+//#region src/components/supporting-pane/index.d.ts
+type SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+  /** The primary content. Takes two thirds of the width from expanded up. */
+  main?: ReactNode;
+  /**
+   * Content that only means something beside `main`. Sits below it at compact,
+   * and beside it from medium up.
+   */
+  supporting?: ReactNode;
+};
+/**
+ * Material 3's supporting pane layout: a main pane and a companion that
+ * reflows underneath it when there is no room beside it.
+ *
+ * Layout only — neither pane paints a surface or a border of its own, so what
+ * goes in them is composed at the call site out of Cards, lists, or plain
+ * content. `render` swaps the container's element, for a layout that should
+ * be a `<main>` rather than a `<div>`.
+ *
+ * The panes are written to the DOM in the order they are shown, which is what
+ * M3 asks of co-planar panes: focus order has to match the arrangement on
+ * screen.
+ */
+declare function SupportingPane({ main, render, supporting, ...props }: SupportingPaneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type SupportingPaneProps, SupportingPane as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/supporting-pane/index.js

@@ -0,0 +1,94 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { c } from "react/compiler-runtime";
+//#region src/components/supporting-pane/index.tsx
+/**
+* Material 3's supporting pane layout: a main pane and a companion that
+* reflows underneath it when there is no room beside it.
+*
+* Layout only — neither pane paints a surface or a border of its own, so what
+* goes in them is composed at the call site out of Cards, lists, or plain
+* content. `render` swaps the container's element, for a layout that should
+* be a `<main>` rather than a `<div>`.
+*
+* The panes are written to the DOM in the order they are shown, which is what
+* M3 asks of co-planar panes: focus order has to match the arrangement on
+* screen.
+*/
+function SupportingPane(t0) {
+	const $ = c(19);
+	let main;
+	let props;
+	let render;
+	let supporting;
+	if ($[0] !== t0) {
+		({main, render, supporting, ...props} = t0);
+		$[0] = t0;
+		$[1] = main;
+		$[2] = props;
+		$[3] = render;
+		$[4] = supporting;
+	} else {
+		main = $[1];
+		props = $[2];
+		render = $[3];
+		supporting = $[4];
+	}
+	let t1;
+	if ($[5] !== main) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "xeuugli",
+			children: main
+		});
+		$[5] = main;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== supporting) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "xeuugli",
+			children: supporting
+		});
+		$[7] = supporting;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { className: "xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb" };
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== props || $[14] !== t3) {
+		t5 = {
+			...props,
+			children: t3,
+			...t4
+		};
+		$[13] = props;
+		$[14] = t3;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== render || $[17] !== t5) {
+		t6 = {
+			defaultTagName: "div",
+			props: t5,
+			render
+		};
+		$[16] = render;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return useRender(t6);
+}
+//#endregion
+export { SupportingPane as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/supporting-pane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["main","supporting"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material 3's canonical layouts. The supporting pane holds content\n// that only means anything next to the main pane — reviewer comments, related\n// items, a tool panel — which is what separates it from list-detail, where\n// the second pane stands on its own.\n//\n// M3 gives this layout three shapes across the breakpoints, and all three are\n// reachable in CSS because none of them depends on what the reader selected:\n// stacked at compact, an even split at medium, two thirds to one third from\n// expanded up. Stacking is M3's \"reflow\" strategy, where the supporting pane\n// moves under the main one rather than being dismissed. The spec's other\n// compact option is a bottom sheet, which is a different component's job —\n// reach for Sheet at the call site when the supporting content should be\n// summoned rather than scrolled to.\n//\n\ntype SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {\n  /** The primary content. Takes two thirds of the width from expanded up. */\n  main?: ReactNode;\n  /**\n   * Content that only means something beside `main`. Sits below it at compact,\n   * and beside it from medium up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material 3's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction SupportingPane({\n  main,\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"xeuugli\">{main}</div>\n          <div className=\"xeuugli\">{supporting}</div>\n        </>,\n      ...{\n        className: \"xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb\"\n      }\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAwB,CAAA,CAAA,MAAA,QAAA,eAAA,SAAA;EAKF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,OAAA,EAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;EAAA,aAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAMZ,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAW,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA;EACrC,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAiB,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAFrC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACN,IACA,EAA2C,EAAA,CAAA;EAC1C,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,OAAA,IAAA,2BAAA,GAAA;EACF,KAAA,EAAA,WACU,4CACb;EAAC,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,SAAA,EAAA,QAAA,IAAA;EARI,KAAA;GAAA,GACF;GAAK,UACE;GAGL,GACF;EAGL;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,IAAA;EAXc,KAAA;GAAA,gBACC;GAAK,OACd;GASN;EAEH;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbM,UAAU,EAahB;AAAC"}

package/dist/index.d.ts

@@ -9,11 +9,13 @@ import Currency, { CurrencyProps } from "./components/currency/index.js";
 import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
 import Keycap, { KeycapProps } from "./components/keycap/index.js";
 import Link, { LinkProps } from "./components/link/index.js";
+import ListDetail, { ListDetailProps } from "./components/list-detail/index.js";
 import ListItem, { ListItemProps } from "./components/list-item/index.js";
 import Separator, { SeparatorProps } from "./components/separator/index.js";
 import Sheet, { SheetProps } from "./components/sheet/index.js";
+import SupportingPane, { SupportingPaneProps } from "./components/supporting-pane/index.js";
 import Tabs, { TabsProps } from "./components/tabs/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import "./components/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -9,10 +9,12 @@ import Currency from "./components/currency/index.js";
 import IconButton from "./components/icon-button/index.js";
 import Keycap from "./components/keycap/index.js";
 import Link from "./components/link/index.js";
+import ListDetail from "./components/list-detail/index.js";
 import ListItem from "./components/list-item/index.js";
 import Separator from "./components/separator/index.js";
 import Sheet from "./components/sheet/index.js";
+import SupportingPane from "./components/supporting-pane/index.js";
 import Tabs from "./components/tabs/index.js";
 import Text from "./components/text/index.js";
 import TextField from "./components/text-field/index.js";
-export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, IconButton, Keycap, Link, ListItem, Separator, Sheet, Tabs, Text, TextField };
+export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, IconButton, Keycap, Link, ListDetail, ListItem, Separator, Sheet, SupportingPane, Tabs, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.4.6",
+  "version": "0.5.1",
   "description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -20,14 +20,16 @@
     "access": "public"
   },
   "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "module": "./dist/index.js",
-  "main": "./dist/cjs/index.cjs",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/cjs/index.cjs"
+      "default": "./dist/index.js"
     },
     "./tokens.css": "./dist/tokens.css",
     "./package.json": "./package.json"
@@ -63,7 +65,7 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.2.6",
+    "@kanso-labs/unplugin-style-dictionary": "0.4.0",
     "@rolldown/plugin-babel": "0.2.3",
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-docs": "10.5.10",
@@ -79,7 +81,7 @@
     "@vitest/coverage-v8": "4.1.11",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "10.9.0",
-    "eslint-plugin-oxlint": "1.78.0",
+    "eslint-plugin-oxlint": "1.79.0",
     "eslint-plugin-perfectionist": "5.10.1",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-react-refresh": "0.5.4",
@@ -89,7 +91,7 @@
     "lint-staged": "17.3.0",
     "oxc-transform-react": "0.145.0",
     "oxfmt": "0.64.0",
-    "oxlint": "1.78.0",
+    "oxlint": "1.79.0",
     "oxlint-tsgolint": "7.0.2001",
     "playwright": "1.62.1",
     "react": "19.2.8",