@kanso-labs/kanso-ui 0.2.0

package/dist/cjs/components/avatar/index.cjs

@@ -0,0 +1,89 @@
+const require_stylex = require("../../node_modules/@stylexjs/stylex/lib/es/stylex.cjs");
+let _base_ui_react_avatar = require("@base-ui/react/avatar");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/avatar/index.tsx
+const styles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kaIpWk: "x3y1ksm",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kMv6JI: "xkknnkr",
+		k63SB2: "x1bf3uqz",
+		kjj79g: "xl56j7k",
+		kVQacm: "xb3r6kr",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	image: {
+		kZKoxP: "x5yr21d",
+		kzqmXN: "xh8yej3",
+		kVIFPx: "xl1xv1r",
+		$$css: true
+	},
+	lg: {
+		kZKoxP: "xnnlda6",
+		kGuDYH: "x1848etk",
+		kzqmXN: "x15yg21f",
+		$$css: true
+	},
+	md: {
+		kZKoxP: "x1vqgdyp",
+		kGuDYH: "x14zspaw",
+		kzqmXN: "x100vrsf",
+		$$css: true
+	},
+	negative: {
+		kWkggS: "xkz0cvf",
+		kMwMTN: "xylzu7l",
+		$$css: true
+	},
+	positive: {
+		kWkggS: "xa3zu90",
+		kMwMTN: "x1di7zbg",
+		$$css: true
+	},
+	primary: {
+		kWkggS: "xp89om9",
+		kMwMTN: "xscdzaa",
+		$$css: true
+	},
+	secondary: {
+		kWkggS: "x15dekr4",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	sm: {
+		kZKoxP: "xc9qbxq",
+		kGuDYH: "xkucv67",
+		kzqmXN: "x14qfxbe",
+		$$css: true
+	},
+	tertiary: {
+		kWkggS: "xs6yvni",
+		kMwMTN: "x3cbcwg",
+		$$css: true
+	}
+};
+function Avatar({ name, size = "md", src, tone = "primary", ...props$1 }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_avatar.Avatar.Root, {
+		"aria-label": name,
+		role: "img",
+		...props$1,
+		...require_stylex.props(styles.base, styles[size], styles[tone]),
+		children: [src === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {
+			alt: "",
+			src,
+			className: "x5yr21d xh8yej3 xl1xv1r"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, { children: initialsFrom(name) })]
+	});
+}
+function initialsFrom(name) {
+	const words = name.split(/\s+/u).filter(Boolean);
+	if (words.length === 0) return "";
+	return `${Array.from(words[0] ?? "")[0] ?? ""}${words.length > 1 ? Array.from(words.at(-1) ?? "")[0] ?? "" : ""}`.toLocaleUpperCase();
+}
+//#endregion
+exports.default = Avatar;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/avatar/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  return (\n    // role/aria-label rather than letting the initials be read: \"AL\" is not\n    // what anyone means to announce. Marking the root as an image also makes\n    // its contents presentational, so the photo and the initials can't be\n    // announced a second time underneath the name.\n    //\n    // The lint rule below wants a real <img> tag instead of the role, which\n    // cannot work here: an <img> is void, and this element's whole job is to\n    // hold the initials shown when there is no photo, or none has loaded yet.\n    <BaseUIAvatar.Root aria-label={name}\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n    role=\"img\" {...props} {...stylex.props(styles.base, styles[size], styles[tone])}>\n      {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" />}\n      <BaseUIAvatar.Fallback>{initialsFrom(name)}</BaseUIAvatar.Fallback>\n    </BaseUIAvatar.Root>\n  );\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":";;;;AAeA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAwBA,SAAS,OAAO,EACd,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACW;CACd,OASE,iBAAA,GAAA,kBAAA,KAAA,CAAC,sBAAA,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAA,eAAA,MAAiB,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK;EAF9E,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAAyB,CAAA,GACpG,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,OAAa,UAAd,EAAA,UAAwB,aAAa,IAAI,EAAyB,CAAA,CACjD;;AAEvB;AAMA,SAAS,aAAa,MAAc;CAClC,MAAM,QAAQ,KAAK,MAAM,MAAM,CAAC,CAAC,OAAO,OAAO;CAC/C,IAAI,MAAM,WAAW,GACnB,OAAO;CAIT,OAAO,GAFO,MAAM,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,MAAM,KAClC,MAAM,SAAS,IAAI,MAAM,KAAK,MAAM,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,KAAK,KACjD,kBAAkB;AAC7C"}

package/dist/cjs/components/avatar/index.d.cts

@@ -0,0 +1,29 @@
+import { AvatarRootProps } from "@base-ui/react/avatar";
+//#region src/components/avatar/index.d.ts
+type AvatarProps = Omit<AvatarRootProps, 'children'> & {
+  /**
+   * The person this represents. Supplies both the initials and the accessible
+   * name, so a screen reader announces who it is rather than reading two
+   * letters aloud.
+   */
+  name: string;
+  /**
+   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.
+   * @default 'md'
+   */
+  size?: 'lg' | 'md' | 'sm';
+  /**
+   * A photo to show in place of the initials. The initials stay until it has
+   * loaded, and come back if it fails.
+   */
+  src?: string;
+  /**
+   * Which container/on-container colour pair to tint with.
+   * @default 'primary'
+   */
+  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
+};
+declare function Avatar({ name, size, src, tone, ...props }: AvatarProps): import("react").JSX.Element;
+//#endregion
+export { type AvatarProps, Avatar as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/badge/index.cjs

@@ -0,0 +1,93 @@
+const require_stylex = require("../../node_modules/@stylexjs/stylex/lib/es/stylex.cjs");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+//#region src/components/badge/index.tsx
+const styles = { base: {
+	kGNEyG: "x6s0dn4",
+	kaIpWk: "x1xdvaa9",
+	ksu8eU: "x1y0btm7",
+	kMzoRj: "xmkeg23",
+	k1xSpc: "x3nfvp2",
+	kmuXW: "x2lah0s",
+	kMv6JI: "xs1w0rn",
+	kGuDYH: "x1n35her",
+	kcqcaj: "xss6m8b",
+	k63SB2: "x1su64ma",
+	kOIVth: "xzoy561",
+	kb6lSQ: "xdlnduh",
+	kLWn49: "xaomhve",
+	k8WAf4: "xpg5a72",
+	kg3NbH: "xn60lsn",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+const filledTones = {
+	negative: {
+		kWkggS: "xkz0cvf",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "xylzu7l",
+		$$css: true
+	},
+	neutral: {
+		kWkggS: "x1rrhr5q",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
+	positive: {
+		kWkggS: "xa3zu90",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1di7zbg",
+		$$css: true
+	},
+	primary: {
+		kWkggS: "xp89om9",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "xscdzaa",
+		$$css: true
+	}
+};
+const outlinedTones = {
+	negative: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "x1xdi1zw",
+		kMwMTN: "x12gp0t",
+		$$css: true
+	},
+	neutral: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "x133yhug",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
+	positive: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "xm76mbg",
+		kMwMTN: "x4no3js",
+		$$css: true
+	},
+	primary: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "x1uajy3w",
+		kMwMTN: "x1mxwv8y",
+		$$css: true
+	}
+};
+/**
+* A short, read-only label attached to something else. It renders a `<span>`
+* and takes no interaction — for a label that can be selected, reach for Chip.
+*/
+function Badge({ render, tone = "neutral", variant = "filled", ...props$1 }) {
+	const toned = variant === "filled" ? filledTones[tone] : outlinedTones[tone];
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "span",
+		props: {
+			...props$1,
+			...require_stylex.props(styles.base, toned)
+		},
+		render
+	});
+}
+//#endregion
+exports.default = Badge;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/badge/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// A badge states something about what it sits beside — a count, a status, a\n// version — and is never itself the thing you press. That is the whole line\n// between this and Chip: a chip is a two-state button announcing itself\n// through `aria-pressed`, so reaching for one to render a read-only label\n// puts a control in the accessibility tree that nothing can operate.\n//\n// Both variants carry a 1px border and `filled` makes it transparent rather\n// than dropping it, so a badge is the same size either way. Emphasising one\n// badge in a row otherwise nudges its neighbours by a pixel each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a badge is mostly numeric — counts, versions, ports — and a\n// stack of them down a list wobbles on proportional digits. Text that happens\n// to carry no digits is unaffected.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k8WAf4: \"xpg5a72\",\n    kg3NbH: \"xn60lsn\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for\n// the notable-but-not-good-or-bad case. `error` is deliberately absent:\n// negative already covers it, and offering both would leave the choice\n// between them to taste.\nconst filledTones = {\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1rrhr5q\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\n\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// here for an on-colour to be legible against — the page is the background —\n// so the container roles would read as washed out.\nconst outlinedTones = {\n  negative: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1xdi1zw\",\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xm76mbg\",\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x1uajy3w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype BadgeProps = useRender.ComponentProps<'span'> & {\n  /**\n   * Which colour role the badge carries. `neutral` states without ranking;\n   * the other three read as good, bad, or worth noticing.\n   * @default 'neutral'\n   */\n  tone?: BadgeTone;\n  /**\n   * How much weight the badge pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the page, for a badge that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  variant?: BadgeVariant;\n};\ntype BadgeTone = 'negative' | 'neutral' | 'positive' | 'primary';\ntype BadgeVariant = 'filled' | 'outlined';\n\n/**\n * A short, read-only label attached to something else. It renders a `<span>`\n * and takes no interaction — for a label that can be selected, reach for Chip.\n */\nfunction Badge({\n  render,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: BadgeProps) {\n  const toned = variant === 'filled' ? filledTones[tone] : outlinedTones[tone];\n\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. useRender would otherwise join the two class strings, and which won\n  // would come down to stylesheet order rather than anything visible at the\n  // call site.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...stylex.props(styles.base, toned)\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;AAmBA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAQA,MAAM,cAAc;CAClB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,gBAAgB;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;AAuBA,SAAS,MAAM,EACb,QACA,OAAO,WACP,UAAU,UACV,GAAG,WACU;CACb,MAAM,QAAQ,YAAY,WAAW,YAAY,QAAQ,cAAc;CAOvE,QAAA,GAAO,0BAAA,UAAA,CAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAA,eAAA,MAAgB,OAAO,MAAM,KAAK;EACpC;EACA;CACF,CAAC;AACH"}

package/dist/cjs/components/badge/index.d.cts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/badge/index.d.ts
+type BadgeProps = useRender.ComponentProps<'span'> & {
+  /**
+   * Which colour role the badge carries. `neutral` states without ranking;
+   * the other three read as good, bad, or worth noticing.
+   * @default 'neutral'
+   */
+  tone?: BadgeTone;
+  /**
+   * How much weight the badge pulls. `filled` sits on a container of its own;
+   * `outlined` is a rule on the page, for a badge that should not compete
+   * with the thing it labels.
+   * @default 'filled'
+   */
+  variant?: BadgeVariant;
+};
+type BadgeTone = 'negative' | 'neutral' | 'positive' | 'primary';
+type BadgeVariant = 'filled' | 'outlined';
+/**
+ * A short, read-only label attached to something else. It renders a `<span>`
+ * and takes no interaction — for a label that can be selected, reach for Chip.
+ */
+declare function Badge({ render, tone, variant, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type BadgeProps, Badge as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/button/index.cjs

@@ -0,0 +1,101 @@
+const require_stylex = require("../../node_modules/@stylexjs/stylex/lib/es/stylex.cjs");
+const require_useRipple = require("../../hooks/useRipple.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_button = require("@base-ui/react/button");
+//#region src/components/button/index.tsx
+const styles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "xm7dzmu x1n0xrd1 x16z974x x197hsbc xnety89",
+		kGVxlE: "xfj5659 xv7jn9b x1gnnqk1",
+		kMwMTN: "xhfb3ry xwjo7ld",
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	lg: {
+		kZKoxP: "xnnlda6",
+		kGuDYH: "x1848etk",
+		kLWn49: "xh7dzej",
+		kg3NbH: "x6e1k4i",
+		$$css: true
+	},
+	md: {
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x117izkb x598nmq x1pi8zt8 xjbqb8w",
+		kVAM5u: "xd8uu4e x1fwvt7v",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kMwMTN: "xhfb3ry x1mxwv8y",
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	text: {
+		kWkggS: "x117izkb x598nmq x1pi8zt8 xjbqb8w",
+		kMwMTN: "xhfb3ry x1mxwv8y",
+		kg3NbH: "x790zyz",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1c3n7wt x1n0xrd1 x1uyy5zb xwypj8i xp89om9",
+		kGVxlE: "xfj5659 xv7jn9b x1gnnqk1",
+		kMwMTN: "xhfb3ry xscdzaa",
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	xl: {
+		kZKoxP: "xwzfr38",
+		kGuDYH: "xete2z3",
+		kLWn49: "x2divse",
+		kg3NbH: "x1sdxjpb",
+		$$css: true
+	},
+	xs: {
+		kZKoxP: "x10w6t97",
+		kGuDYH: "xkucv67",
+		kLWn49: "xvzb9hk",
+		kg3NbH: "x790zyz",
+		$$css: true
+	}
+};
+function Button({ children, disabled = false, disableRipple = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "filled", ...props$1 }) {
+	const ripple = require_useRipple.useRipple(!disableRipple, {
+		onClick,
+		onContextMenu,
+		onPointerCancel,
+		onPointerDown,
+		onPointerLeave,
+		onPointerUp
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_button.Button, {
+		disabled,
+		...ripple.handlers,
+		...props$1,
+		...require_stylex.props(styles.base, styles[variant], styles[size]),
+		children: [children, ripple.surface]
+	});
+}
+//#endregion
+exports.default = Button;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/button/index.tsx"],"sourcesContent":["import type { ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';\nimport { Button as BaseUIButton } from '@base-ui/react/button';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' (filled) or the brand color itself\n// (outlined/text, over a transparent container) at the interaction state's\n// opacity, rather than swapping in a separate hover/pressed color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// :hover and :active still match a disabled native <button>, and stylex's\n// fixed pseudo-class ordering places both after :disabled, so without the\n// :not(:disabled) guard a hovered/pressed disabled button would render with\n// the interaction color instead of the disabled one.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kkrTdU: \"x1s07b3s x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xm7dzmu x1n0xrd1 x16z974x x197hsbc xnety89\",\n    kGVxlE: \"xfj5659 xv7jn9b x1gnnqk1\",\n    kMwMTN: \"xhfb3ry xwjo7ld\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kLWn49: \"xh7dzej\",\n    kg3NbH: \"x6e1k4i\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x117izkb x598nmq x1pi8zt8 xjbqb8w\",\n    kVAM5u: \"xd8uu4e x1fwvt7v\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"xhfb3ry x1mxwv8y\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x117izkb x598nmq x1pi8zt8 xjbqb8w\",\n    kMwMTN: \"xhfb3ry x1mxwv8y\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1c3n7wt x1n0xrd1 x1uyy5zb xwypj8i xp89om9\",\n    kGVxlE: \"xfj5659 xv7jn9b x1gnnqk1\",\n    kMwMTN: \"xhfb3ry xscdzaa\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xwzfr38\",\n    kGuDYH: \"xete2z3\",\n    kLWn49: \"x2divse\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kGuDYH: \"xkucv67\",\n    kLWn49: \"xvzb9hk\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  }\n};\ntype ButtonProps = BaseUIButtonProps & {\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 80px. Sizes other\n   * than `md` also set their own inline padding.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'xl' | 'xs';\n  /** @default 'filled' */\n  variant?: 'filled' | 'outlined' | 'text' | 'tonal';\n};\nfunction Button({\n  children,\n  disabled = false,\n  disableRipple = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'md',\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style/render, etc.) is spread separately: `className`\n  // and `style` there may be functions of render state, a Base UI extension\n  // ripple's own handler-only merge doesn't need to know about.\n  const ripple = useRipple<HTMLButtonElement>(!disableRipple, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <BaseUIButton disabled={disabled} {...ripple.handlers} {...props} {...stylex.props(styles.base, styles[variant], styles[size])}>\n      {children}\n      {ripple.surface}\n    </BaseUIButton>;\n}\nexport type { ButtonProps };\nexport default Button;"],"mappings":";;;;;AA4BA,MAAM,SAAS;CACb,MAAM;EACJ,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;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,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,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAiBA,SAAS,OAAO,EACd,UACA,WAAW,OACX,gBAAgB,OAChB,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,UACV,GAAG,WACW;CAId,MAAM,SAAS,kBAAA,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,iBAAA,GAAA,kBAAA,KAAA,CAAC,sBAAA,QAAD;EAAwB;EAAU,GAAI,OAAO;EAAU,GAAI;EAAO,GAAA,eAAA,MAAiB,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK;EAA7H,UAAA,CACF,UACA,OAAO,OACI;;AAClB"}

package/dist/cjs/components/button/index.d.cts

@@ -0,0 +1,22 @@
+import { ButtonProps } from "@base-ui/react/button";
+//#region src/components/button/index.d.ts
+type ButtonProps$1 = ButtonProps & {
+  /**
+   * Disables the press ripple. The hover/pressed background state layer is
+   * unaffected.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 80px. Sizes other
+   * than `md` also set their own inline padding.
+   * @default 'md'
+   */
+  size?: 'lg' | 'md' | 'xl' | 'xs';
+  /** @default 'filled' */
+  variant?: 'filled' | 'outlined' | 'text' | 'tonal';
+};
+declare function Button({ children, disabled, disableRipple, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, variant, ...props }: ButtonProps$1): import("react").JSX.Element;
+//#endregion
+export { type ButtonProps$1 as ButtonProps, Button as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/card/index.cjs

@@ -0,0 +1,84 @@
+const require_stylex = require("../../node_modules/@stylexjs/stylex/lib/es/stylex.cjs");
+const require_useRipple = require("../../hooks/useRipple.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/card/index.tsx
+const styles = {
+	base: {
+		kaIpWk: "xhpdng0",
+		kMzoRj: "xc342km",
+		k1xSpc: "x1lliihq",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
+	elevated: {
+		kWkggS: "x1vnz5z6",
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "x1rrhr5q",
+		$$css: true
+	},
+	interactive: {
+		kkrTdU: "x1ypdohk",
+		kVVagm: "xln7xf2",
+		kzqmXN: "xh8yej3",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		k9WMMc: "x1yc453h",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x14s9m32",
+		kVAM5u: "x133yhug",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		$$css: true
+	},
+	paddingDefault: {
+		kmVPX3: "xgc26li",
+		$$css: true
+	},
+	paddingNone: {
+		kmVPX3: "x1717udv",
+		$$css: true
+	}
+};
+const interactionStyles = {
+	elevated: {
+		kWkggS: "xu5m21g x5r8g2b x1vnz5z6",
+		kGVxlE: "x1g60mc1 x1fzngjt x19efjv6",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "x1w49kxs xovjh5a x1rrhr5q",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x1jqfdmz x1dmgsxd x14s9m32",
+		$$css: true
+	}
+};
+function Card({ children, interactive = false, padding = "default", variant = "elevated", ...props$1 }) {
+	const ripple = require_useRipple.useRipple(interactive);
+	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
+	if (!interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props$1,
+		...require_stylex.props(styles.base, styles[variant], padded),
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		...ripple.handlers,
+		...props$1,
+		...require_stylex.props(styles.base, styles[variant], padded, styles.interactive, interactionStyles[variant]),
+		children: [children, ripple.surface]
+	});
+}
+//#endregion
+exports.default = Card;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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,kBAAA,UAA6B,WAAW;CACvD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,IAAI,CAAC,aACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EAAO,GAAA,eAAA,MAAiB,OAAO,MAAM,OAAO,UAAU,MAAM;EACvE;CACE,CAAA;CAET,OAAO,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAA,eAAA,MAAiB,OAAO,MAAM,OAAO,UAAU,QAAQ,OAAO,aAAa,kBAAkB,QAAQ;EAA3J,UAAA,CACF,UACA,OAAO,OACF;;AACZ"}

package/dist/cjs/components/card/index.d.cts

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#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.
+   * @default false
+   */
+  interactive?: boolean;
+  /**
+   * `none` removes the card's own padding, for a card whose children run to
+   * its edges — a list of rows separated by rules.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none';
+  /**
+   * How the card separates itself from the page: `elevated` casts a shadow,
+   * `filled` sits on a darker surface, `outlined` draws a border.
+   * @default 'elevated'
+   */
+  variant?: CardVariant;
+} & HTMLAttributes<HTMLElement>;
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+declare function Card({ children, interactive, padding, variant, ...props }: CardProps): import("react").JSX.Element;
+//#endregion
+export { type CardProps, Card as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/chip/index.cjs

@@ -0,0 +1,53 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_compiler_runtime = require("react/compiler-runtime");
+let _base_ui_react_toggle = require("@base-ui/react/toggle");
+//#region src/components/chip/index.tsx
+/**
+* A chip is a two-state button, so its selected state is Base UI's `pressed`:
+* pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to
+* let it keep its own state. Selection is announced through `aria-pressed`
+* rather than a role of its own.
+*/
+function Chip(t0) {
+	const $ = (0, react_compiler_runtime.c)(6);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toggle.Toggle, {
+			...props,
+			className: classNameForState,
+			style: styleForState,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function classNameForState(state) {
+	return propsFor(state).className;
+}
+function propsFor(state) {
+	return {
+		0: { 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" },
+		1: { 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" }
+	}[!!state.pressed << 0];
+}
+function styleForState(state) {
+	return propsFor(state).style;
+}
+//#endregion
+exports.default = Chip;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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,KAAA,GAAA,uBAAA,EAAA,CAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,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/cjs/components/chip/index.d.cts

@@ -0,0 +1,13 @@
+import { ToggleProps } from "@base-ui/react/toggle";
+//#region src/components/chip/index.d.ts
+type ChipProps<Value extends string = string> = ToggleProps<Value>;
+/**
+ * A chip is a two-state button, so its selected state is Base UI's `pressed`:
+ * pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to
+ * let it keep its own state. Selection is announced through `aria-pressed`
+ * rather than a role of its own.
+ */
+declare function Chip<Value extends string = string>({ children, ...props }: ChipProps<Value>): import("react").JSX.Element;
+//#endregion
+export { type ChipProps, Chip as default };
+//# sourceMappingURL=index.d.cts.map