@kanso-labs/kanso-ui 0.7.1 → 0.8.1

package/dist/assets/stylex.css

@@ -155,6 +155,10 @@
     padding-inline: var(--x6borv4);
   }
 
+  .ximhkdq {
+    padding-inline: var(--xbmbo34);
+  }
+
   .x6e1k4i {
     padding-inline: var(--xi3mssk);
   }
@@ -249,6 +253,10 @@
     background-color: var(--x1xvl3py);
   }
 
+  .x1mjdul6 {
+    background-color: var(--x3cqee7);
+  }
+
   .x1l12bh {
     background-color: var(--x7dbk6n);
   }
@@ -317,6 +325,10 @@
     box-shadow: var(--xt04dnm);
   }
 
+  .x9f619 {
+    box-sizing: border-box;
+  }
+
   .x1hyvwdk {
     clip-path: inset(50%);
   }
@@ -845,6 +857,10 @@
     position: relative;
   }
 
+  .x2b8uid {
+    text-align: center;
+  }
+
   .x1yc453h {
     text-align: start;
   }
@@ -883,6 +899,10 @@
     transition-duration: .105s;
   }
 
+  .xx6bhzk {
+    transition-duration: .15s;
+  }
+
   .xbg8nd6 {
     transition-duration: .375s;
   }
@@ -907,6 +927,10 @@
     transition-property: background-color, color;
   }
 
+  .x15406qy {
+    transition-property: background-color;
+  }
+
   .xkdsq27 {
     transition-property: box-shadow;
   }
@@ -1169,6 +1193,10 @@
     min-height: 56px;
   }
 
+  .x1chvrdh {
+    min-height: var(--x-minBlockSize);
+  }
+
   .xeuugli {
     min-width: 0;
   }
@@ -1301,6 +1329,11 @@
   inherits: false
 }
 
+@property --x-minBlockSize {
+  syntax: "*";
+  inherits: false
+}
+
 @keyframes x18re5ia-B {
   from {
     opacity: 0;

package/dist/components/app-bar/index.d.ts

@@ -0,0 +1,53 @@
+import { useRender } from "@base-ui/react/use-render";
+import { ReactNode } from "react";
+//#region src/components/app-bar/index.d.ts
+type AppBarProps = Omit<useRender.ComponentProps<'header'>, 'children'> & {
+  /**
+   * Which of M3's alignments the text takes. `center` is the configuration
+   * that replaced the old center-aligned variant.
+   * @default 'start'
+   */
+  align?: 'center' | 'start';
+  /** The page's title. Wraps rather than truncating, and grows the bar with it. */
+  headline?: ReactNode;
+  /** Usually a back or menu icon button. Sits before the text. */
+  leading?: ReactNode;
+  /**
+   * Whether the content beneath has been scrolled. M3 separates a bar from
+   * scrolled content with a fill colour rather than a shadow, and this is what
+   * applies it.
+   *
+   * Controlled, with no listener of its own: only the app knows which element
+   * scrolls, and a bar that watched the window would be wrong inside every
+   * pane and dialog that scrolls independently.
+   * @default false
+   */
+  scrolled?: boolean;
+  /**
+   * Height and headline size. `medium` and `large` are M3 Expressive's
+   * flexible bars, which hug their text — the baseline variants they replaced
+   * are no longer recommended and are not offered.
+   * @default 'small'
+   */
+  size?: 'large' | 'medium' | 'small';
+  /** A second line under the headline. Makes `medium` and `large` taller. */
+  subtitle?: ReactNode;
+  /** Actions, at the far end. Usually icon buttons. */
+  trailing?: ReactNode;
+};
+/**
+ * Material 3's app bar: the container at the top of a page carrying its title,
+ * one or two actions, and the way back out.
+ *
+ * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
+ * `medium` and `large` are the flexible bars, which give the headline a larger
+ * type role and grow to fit a subtitle or a headline that wraps.
+ *
+ * It paints its own surface, unlike the layout components, because separating
+ * itself from the content beneath is the job — which is also why `scrolled`
+ * exists.
+ */
+declare function AppBar({ align, headline, leading, render, scrolled, size, subtitle, trailing, ...props }: AppBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type AppBarProps, AppBar as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/app-bar/index.js

@@ -0,0 +1,101 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import Text from "../text/index.js";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-bar/index.tsx
+const HEIGHTS = {
+	large: {
+		plain: "120px",
+		withSubtitle: "152px"
+	},
+	medium: {
+		plain: "112px",
+		withSubtitle: "136px"
+	},
+	small: {
+		plain: "64px",
+		withSubtitle: "64px"
+	}
+};
+const styles = {
+	root: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x14s9m32",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kOIVth: "xzoy561",
+		kg3NbH: "ximhkdq",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x15406qy",
+		$$css: true
+	},
+	scrolled: {
+		kWkggS: "x1mjdul6",
+		$$css: true
+	}
+};
+const HEADLINE_VARIANT = {
+	large: "headlineMedium",
+	medium: "headlineSmall",
+	small: "titleLarge"
+};
+const HEADING_1 = /* @__PURE__ */ jsx("h1", {});
+const PARAGRAPH = /* @__PURE__ */ jsx("p", {});
+const _temp = {
+	kAzted: "x1chvrdh",
+	"$$css": true
+};
+const heightStyles = { root: (minBlockSize) => [_temp, { "--x-minBlockSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(minBlockSize) }] };
+/**
+* Material 3's app bar: the container at the top of a page carrying its title,
+* one or two actions, and the way back out.
+*
+* Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
+* `medium` and `large` are the flexible bars, which give the headline a larger
+* type role and grow to fit a subtitle or a headline that wraps.
+*
+* It paints its own surface, unlike the layout components, because separating
+* itself from the content beneath is the job — which is also why `scrolled`
+* exists.
+*/
+function AppBar({ align = "start", headline, leading, render, scrolled = false, size = "small", subtitle, trailing, ...props$1 }) {
+	const height = subtitle === void 0 || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;
+	return useRender({
+		defaultTagName: "header",
+		props: {
+			...props$1,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				leading === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
+					children: leading
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					...{
+						0: { className: "x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll x18fpw6u" },
+						1: { className: "x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll x18fpw6u x2b8uid" }
+					}[!!(align === "center") << 0],
+					children: [headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+						render: HEADING_1,
+						variant: HEADLINE_VARIANT[size],
+						children: headline
+					}), subtitle === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+						render: PARAGRAPH,
+						tone: "muted",
+						variant: "bodyMedium",
+						children: subtitle
+					})]
+				}),
+				trailing === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
+					children: trailing
+				})
+			] }),
+			...props(styles.root, heightStyles.root(height), scrolled && styles.scrolled)
+		},
+		render
+	});
+}
+//#endregion
+export { AppBar as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/app-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/app-bar/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 { colors, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material 3's app bar, in the three sizes M3 Expressive recommends.\n//\n// The spec offers four variants. `search` is absent because it opens M3's\n// search view when selected, and that is a component in its own right that\n// this library does not have — half of a search bar would be worse than none.\n// The other three are here.\n//\n// `medium` and `large` are M3 Expressive's *flexible* bars. The baseline\n// medium and large ones they replaced are marked \"not recommended\" in the\n// spec, so there is no ambiguity to protect against and the shorter names are\n// the ones worth having at a call site.\n//\n// M3 also merged the old center-aligned variant into small as a configuration\n// rather than a variant, which is why alignment is a prop here and applies to\n// every size.\n//\n// Heights are M3's, and they are minimums rather than fixed. The spec says the\n// flexible bars \"hug the text contents\", and Expressive added multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kg3NbH: \"ximhkdq\",\n    kIyJzY: \"xx6bhzk\",\n    k1ekBW: \"x15406qy\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure. M3's\n// own tokens are `md.comp.app-bar.<size>.title.font`, aliases onto the type\n// scale rather than sizes of their own, so this maps to the scale the same\n// way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in M3's model, so it is the page's <h1>.\n// A bar nested somewhere that already has one can pass its own heading as\n// `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\ntype AppBarProps = Omit<useRender.ComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of M3's alignments the text takes. `center` is the configuration\n   * that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. M3 separates a bar from\n   * scrolled content with a fill colour rather than a shadow, and this is what\n   * applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are M3 Expressive's\n   * flexible bars, which hug their text — the baseline variants they replaced\n   * are no longer recommended and are not offered.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material 3's app bar: the container at the top of a page carrying its title,\n * one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * exists.\n */\nfunction AppBar({\n  align = 'start',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  const height = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll x18fpw6u\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll x18fpw6u x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text render={HEADING_1} variant={HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </>,\n      ...stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":";;;;;AA4BA,MAAM,UAAU;CACd,OAAO;EACL,OAAO;EACP,cAAc;CAChB;CACA,QAAQ;EACN,OAAO;EACP,cAAc;CAChB;CACA,OAAO;EACL,OAAO;EACP,cAAc;CAChB;AACF;AACA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,mBAAmB;CACvB,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAMA,MAAM,YAAY,oBAAC,MAAD,CAAG,CAAA;AACrB,MAAM,YAAY,oBAAC,KAAD,CAAE,CAAA;AAMpB,MAAM,QAAQ;CACZ,QAAQ;CACR,SAAS;AACX;AACA,MAAM,eAAe,EACnB,OAAO,iBAAyB,CAAC,OAAO,EACtC,sBAAqB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,YAAY,EAChH,CAAC,EACH;;;;;;;;;;;;;AAgDA,SAAS,OAAO,EACd,QAAQ,SACR,UACA,SACA,QACA,WAAW,OACX,OAAO,SACP,UACA,UACA,GAAG,WACW;CACd,MAAM,SAAS,aAAa,KAAA,KAAa,aAAa,OAAO,QAAQ,KAAK,CAAC,QAAQ,QAAQ,KAAK,CAAC;CACjG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA;IACL,YAAY,KAAA,IAAY,OAAO,oBAAC,OAAD;KAAK,WAAU;KAAmC,UAAA;IAAa,CAAA;IAC/F,qBAAC,OAAD;KAAK,GAAI;MACT,GAAG,EACD,WAAW,6DACb;MACA,GAAG,EACD,WAAW,qEACb;KACF,EAAE,CAAC,EAAE,UAAU,aAAa;KAP1B,UAAA,CAQG,aAAa,KAAA,IAAY,OAAO,oBAAC,MAAD;MAAM,QAAQ;MAAW,SAAS,iBAAiB;MAC/E,UAAA;KACG,CAAA,GACP,aAAa,KAAA,IAAY,OAAO,oBAAC,MAAD;MAAM,QAAQ;MAAW,MAAK;MAAQ,SAAQ;MAC1E,UAAA;KACG,CAAA,CACL;;IACJ,aAAa,KAAA,IAAY,OAAO,oBAAC,OAAD;KAAK,WAAU;KAAmC,UAAA;IAAc,CAAA;GACnG,EAAA,CAAA;GACF,GAAG,MAAa,OAAO,MAAM,aAAa,KAAK,MAAM,GAAG,YAAY,OAAO,QAAQ;EACrF;EACA;CACF,CAAC;AACH"}

package/dist/components/avatar/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { Avatar } from "@base-ui/react/avatar";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/avatar/index.tsx
 const styles = {
 	base: {

package/dist/components/card/index.js

@@ -1,7 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { Fragment, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsxs } from "react/jsx-runtime";
 //#region src/components/card/index.tsx
 const styles = {
 	base: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["classNameForState","styleForState","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleProps as BaseUIToggleProps, ToggleState as BaseUIToggleState } from '@base-ui/react/toggle';\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each state composites an 'on-color' over its own container at the\n// interaction state's opacity rather than swapping in a separate hover color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes, and it is inlined at each property because\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n\ntype ChipProps<Value extends string = string> = BaseUIToggleProps<Value>;\n\n/**\n * A chip is a two-state button, so its selected state is Base UI's `pressed`:\n * pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip<Value extends string = string>({\n  children,\n  ...props\n}: ChipProps<Value>) {\n  return <BaseUIToggle {...props} className={classNameForState} style={styleForState}>\n      {children}\n    </BaseUIToggle>;\n}\nfunction classNameForState(state: BaseUIToggleState) {\n  return propsFor(state).className;\n}\n\n// StyleX has no way to target [data-pressed] on the element it is styling, so\n// the selected styles cannot be chosen in CSS. Base UI's answer is to let\n// className and style be functions of the component's own state, which is\n// what these two are — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// Declared at module scope so each is one stable reference rather than a\n// fresh closure per render, which is what react-perf's no-new-function-as-prop\n// is after. They close over nothing, so there is nothing to capture.\nfunction propsFor(state: BaseUIToggleState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd\"\n    }\n  }[!!state.pressed << 0];\n}\nfunction styleForState(state: BaseUIToggleState) {\n  return propsFor(state).style;\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;AAyBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA6C,CAAA,CAAA,aAAA,SAAA;EAG1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,OAAA;EACV,KAAA,oBAAC,QAAD;GAAa,GAAK;GAAkBA,WAAA;GAA0BC,OAAA;GAChE;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAEnB,SAAS,kBAAkB,OAA0B;CACnD,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB;AAWA,SAAS,SAAS,OAA0B;CAC1C,OAAO;EACL,GAAG,EACD,WAAW,qRACb;EACA,GAAG,EACD,WAAW,sRACb;CACF,EAAE,CAAC,CAAC,MAAM,WAAW;AACvB;AACA,SAAS,cAAc,OAA0B;CAC/C,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB"}
+{"version":3,"file":"index.js","names":["classNameForState","styleForState","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleProps as BaseUIToggleProps, ToggleState as BaseUIToggleState } from '@base-ui/react/toggle';\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each state composites an 'on-color' over its own container at the\n// interaction state's opacity rather than swapping in a separate hover color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes, and it is inlined at each property because\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n\ntype ChipProps<Value extends string = string> = BaseUIToggleProps<Value>;\n\n/**\n * A chip is a two-state button, so its selected state is Base UI's `pressed`:\n * pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip<Value extends string = string>({\n  children,\n  ...props\n}: ChipProps<Value>) {\n  return <BaseUIToggle {...props} className={classNameForState} style={styleForState}>\n      {children}\n    </BaseUIToggle>;\n}\nfunction classNameForState(state: BaseUIToggleState) {\n  return propsFor(state).className;\n}\n\n// StyleX has no way to target [data-pressed] on the element it is styling, so\n// the selected styles cannot be chosen in CSS. Base UI's answer is to let\n// className and style be functions of the component's own state, which is\n// what these two are — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// Declared at module scope so each is one stable reference rather than a\n// fresh closure per render, which is what react-perf's no-new-function-as-prop\n// is after. They close over nothing, so there is nothing to capture.\nfunction propsFor(state: BaseUIToggleState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd\"\n    }\n  }[!!state.pressed << 0];\n}\nfunction styleForState(state: BaseUIToggleState) {\n  return propsFor(state).style;\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;AAyBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA6C,CAAA,CAAA,UAAA,GAAA,SAAA;EAG1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,OAAA;EACV,KAAA,oBAAC,QAAD;GAAa,GAAK;GAAkBA,WAAA;GAA0BC,OAAA;GAChE;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAEnB,SAAS,kBAAkB,OAA0B;CACnD,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB;AAWA,SAAS,SAAS,OAA0B;CAC1C,OAAO;EACL,GAAG,EACD,WAAW,qRACb;EACA,GAAG,EACD,WAAW,sRACb;CACF,EAAE,CAAC,CAAC,MAAM,WAAW;AACvB;AACA,SAAS,cAAc,OAA0B;CAC/C,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...{\n        className: \"x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;AAsBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQH,KAAA,EAAA,WACU,oCACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...{\n        className: \"x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;AAsBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,CAAA,CAAA,QAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQH,KAAA,EAAA,WACU,oCACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+import AppBar, { AppBarProps } from "./app-bar/index.js";
 import Avatar, { AvatarProps } from "./avatar/index.js";
 import Badge, { BadgeProps } from "./badge/index.js";
 import Button, { ButtonProps } from "./button/index.js";
@@ -19,4 +20,4 @@ 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, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...{\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;AA2BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQL,KAAA,EAAA,WACU,8GACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...{\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;AA2BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,CAAA,CAAA,QAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQL,KAAA,EAAA,WACU,8GACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}

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

@@ -1,5 +1,5 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-detail/index.tsx
 /**
 * Material 3's list-detail layout: a fixed list pane beside a flexible detail

package/dist/components/product-icon/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { Avatar } from "@base-ui/react/avatar";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/product-icon/index.tsx
 const styles = {
 	base: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:\n * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\" />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...stylex.props(styles.content, styles[size])}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\" />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\" />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} className=\"x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\" />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":";;;;;;AAuBA,MAAM,SAAS;CACb,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,mBAAmB,cAAyB,IAAI;;;;;;;;;;;;AA6BtD,SAAS,MAAM,EACb,UACA,OAAO,MACP,GAAG,SACU;CACb,OAAO,oBAAC,OAAa,MAAd;EAAmB,GAAI;EAC1B,UAAA,oBAAC,kBAAD;GAAkB,OAAO;GAAO;EAA2B,CAAA;CAC1C,CAAA;AACvB;AACA,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAAgF,GAAvE;GAAiB,WAAA;EAAmD,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAhF;AAAgF;;;;;;AAQzF,SAAA,WAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,OAAA,EAAA,GAAwB,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAjC;AAAiC;;;;;;AAQ1C,SAAA,aAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAsB,CAAA,CAAA,UAAA,cAAA,WAAA;EAIF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,YAAA,EAAA;EAAA,UAAA,EAAA;CAAA;CAClB,MAAA,OAAa,WAAW,gBAAgB;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAEtC,KAAA,oBAAA,OAAA,UAAA,EAAiC,WAAA,sDAAqD,CAAA;EAAG,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EACtD,KAAA,MAAa,OAAM,SAAU,OAAO,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,WAAA,EAAA,OAAA,IAAA;EAA7E,KAAA,oBAAA,OAAA,OAAA;GAAA,GAAwB;GAAK,GAAM;GAChC;EACH,CAAA;EAAqB,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,aAAA,EAAA,QAAA,IAAA;EAJlB,KAAA,qBAAA,OAAA,QAAA;GAAgC;GAAhC,UAAA,CACH,IACA,EAGF;;EAAsB,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALjB;AAKiB;AAE1B,SAAA,YAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAA4G,GAAnG;GAAiB,WAAA;EAA+E,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA5G;AAA4G;AAErH,SAAA,YAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAAmH,GAA1G;GAAiB,WAAA;EAAsF,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnH;AAAmH;;;;;;AAQ5H,SAAA,WAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,OAAA;GAAA,GAAwB;GAAiB,WAAA;EAA4D,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAxG;AAAwG;;;;;AAOjH,SAAA,aAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,SAAA,EAAA,GAA0B,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnC;AAAmC;AAE5C,MAAM,OAAO;AACb,MAAM,QAAQ;AACd,MAAM,UAAU;AAChB,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,UAAU"}
+{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:\n * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\" />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...stylex.props(styles.content, styles[size])}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\" />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\" />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} className=\"x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\" />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 //#region src/components/supporting-pane/index.tsx
 /**

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

@@ -1 +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"}
+{"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,YAAA,GAAA,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

@@ -1,3 +1,4 @@
+import AppBar, { AppBarProps } from "./components/app-bar/index.js";
 import Avatar, { AvatarProps } from "./components/avatar/index.js";
 import Badge, { BadgeProps } from "./components/badge/index.js";
 import Button, { ButtonProps } from "./components/button/index.js";
@@ -20,4 +21,4 @@ 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, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -1,3 +1,5 @@
+import Text from "./components/text/index.js";
+import AppBar from "./components/app-bar/index.js";
 import Avatar from "./components/avatar/index.js";
 import Badge from "./components/badge/index.js";
 import Button from "./components/button/index.js";
@@ -17,6 +19,5 @@ 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, Feed, IconButton, Keycap, Link, ListDetail, ListItem, ProductIcon, Separator, Sheet, SupportingPane, Tabs, Text, TextField };
+export { AppBar, Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, Feed, IconButton, Keycap, Link, ListDetail, ListItem, ProductIcon, Separator, Sheet, SupportingPane, Tabs, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.7.1",
+  "version": "0.8.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",
@@ -50,7 +50,7 @@
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "lint": "oxlint --type-aware . && eslint . && npm run format:check",
-    "prepare": "husky && playwright install --with-deps",
+    "prepare": "husky && playwright install --with-deps chromium",
     "storybook": "storybook dev -p ${PORT:-6006}",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
@@ -90,7 +90,7 @@
     "husky": "9.1.7",
     "lint-staged": "17.3.0",
     "oxc-transform-react": "0.145.0",
-    "oxfmt": "0.64.0",
+    "oxfmt": "0.65.0",
     "oxlint": "1.79.0",
     "oxlint-tsgolint": "7.0.2001",
     "playwright": "1.62.1",