@kanso-labs/kanso-ui 0.2.0

package/dist/cjs/node_modules/@stylexjs/stylex/lib/es/stylex.cjs

@@ -0,0 +1,121 @@
+//#region node_modules/@stylexjs/stylex/lib/es/stylex.mjs
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+	if (hasRequiredStyleq) return styleq;
+	hasRequiredStyleq = 1;
+	Object.defineProperty(styleq, "__esModule", { value: true });
+	styleq.styleq = void 0;
+	var cache = /* @__PURE__ */ new WeakMap();
+	var compiledKey = "$$css";
+	function createStyleq(options) {
+		var disableCache;
+		var disableMix;
+		var transform;
+		if (options != null) {
+			disableCache = options.disableCache === true;
+			disableMix = options.disableMix === true;
+			transform = options.transform;
+		}
+		return function styleq() {
+			var definedProperties = [];
+			var className = "";
+			var inlineStyle = null;
+			var debugString = "";
+			var nextCache = disableCache ? null : cache;
+			var styles = new Array(arguments.length);
+			for (var i = 0; i < arguments.length; i++) styles[i] = arguments[i];
+			while (styles.length > 0) {
+				var possibleStyle = styles.pop();
+				if (possibleStyle == null || possibleStyle === false) continue;
+				if (Array.isArray(possibleStyle)) {
+					for (var _i = 0; _i < possibleStyle.length; _i++) styles.push(possibleStyle[_i]);
+					continue;
+				}
+				var style = transform != null ? transform(possibleStyle) : possibleStyle;
+				if (style.$$css != null) {
+					var classNameChunk = "";
+					if (nextCache != null && nextCache.has(style)) {
+						var cacheEntry = nextCache.get(style);
+						if (cacheEntry != null) {
+							classNameChunk = cacheEntry[0];
+							debugString = cacheEntry[2];
+							definedProperties.push.apply(definedProperties, cacheEntry[1]);
+							nextCache = cacheEntry[3];
+						}
+					} else {
+						var definedPropertiesChunk = [];
+						for (var prop in style) {
+							var value = style[prop];
+							if (prop === compiledKey) {
+								var compiledKeyValue = style[prop];
+								if (compiledKeyValue !== true) debugString = debugString ? compiledKeyValue + "; " + debugString : compiledKeyValue;
+								continue;
+							}
+							if (typeof value === "string" || value === null) {
+								if (!definedProperties.includes(prop)) {
+									definedProperties.push(prop);
+									if (nextCache != null) definedPropertiesChunk.push(prop);
+									if (typeof value === "string") classNameChunk += classNameChunk ? " " + value : value;
+								}
+							} else console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+						}
+						if (nextCache != null) {
+							var weakMap = /* @__PURE__ */ new WeakMap();
+							nextCache.set(style, [
+								classNameChunk,
+								definedPropertiesChunk,
+								debugString,
+								weakMap
+							]);
+							nextCache = weakMap;
+						}
+					}
+					if (classNameChunk) className = className ? classNameChunk + " " + className : classNameChunk;
+				} else if (disableMix) {
+					if (inlineStyle == null) inlineStyle = {};
+					inlineStyle = Object.assign({}, style, inlineStyle);
+				} else {
+					var subStyle = null;
+					for (var _prop in style) {
+						var _value = style[_prop];
+						if (_value !== void 0) {
+							if (!definedProperties.includes(_prop)) {
+								if (_value != null) {
+									if (inlineStyle == null) inlineStyle = {};
+									if (subStyle == null) subStyle = {};
+									subStyle[_prop] = _value;
+								}
+								definedProperties.push(_prop);
+								nextCache = null;
+							}
+						}
+					}
+					if (subStyle != null) inlineStyle = Object.assign(subStyle, inlineStyle);
+				}
+			}
+			return [
+				className,
+				inlineStyle,
+				debugString
+			];
+		};
+	}
+	var styleq$1 = styleq.styleq = createStyleq();
+	styleq$1.factory = createStyleq;
+	return styleq;
+}
+var styleqExports = /*@__PURE__*/ requireStyleq();
+function props(...styles) {
+	const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+	const result = {};
+	if (className != null && className !== "") result.className = className;
+	if (style != null && Object.keys(style).length > 0) result.style = style;
+	if (dataStyleSrc != null && dataStyleSrc !== "") result["data-style-src"] = dataStyleSrc;
+	return result;
+}
+Object.freeze({});
+//#endregion
+exports.props = props;
+
+//# sourceMappingURL=stylex.cjs.map

package/dist/cjs/node_modules/@stylexjs/stylex/lib/es/stylex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylex.cjs","names":[],"sources":["../../../../../../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs"],"sourcesContent":["var styleq = {};\n\nvar hasRequiredStyleq;\n\nfunction requireStyleq () {\n\tif (hasRequiredStyleq) return styleq;\n\thasRequiredStyleq = 1;\n\n\tObject.defineProperty(styleq, \"__esModule\", {\n\t  value: true\n\t});\n\tstyleq.styleq = void 0;\n\tvar cache = new WeakMap();\n\tvar compiledKey = '$$css';\n\tfunction createStyleq(options) {\n\t  var disableCache;\n\t  var disableMix;\n\t  var transform;\n\t  if (options != null) {\n\t    disableCache = options.disableCache === true;\n\t    disableMix = options.disableMix === true;\n\t    transform = options.transform;\n\t  }\n\t  return function styleq() {\n\t    var definedProperties = [];\n\t    var className = '';\n\t    var inlineStyle = null;\n\t    var debugString = '';\n\t    var nextCache = disableCache ? null : cache;\n\t    var styles = new Array(arguments.length);\n\t    for (var i = 0; i < arguments.length; i++) {\n\t      styles[i] = arguments[i];\n\t    }\n\t    while (styles.length > 0) {\n\t      var possibleStyle = styles.pop();\n\t      if (possibleStyle == null || possibleStyle === false) {\n\t        continue;\n\t      }\n\t      if (Array.isArray(possibleStyle)) {\n\t        for (var _i = 0; _i < possibleStyle.length; _i++) {\n\t          styles.push(possibleStyle[_i]);\n\t        }\n\t        continue;\n\t      }\n\t      var style = transform != null ? transform(possibleStyle) : possibleStyle;\n\t      if (style.$$css != null) {\n\t        var classNameChunk = '';\n\t        if (nextCache != null && nextCache.has(style)) {\n\t          var cacheEntry = nextCache.get(style);\n\t          if (cacheEntry != null) {\n\t            classNameChunk = cacheEntry[0];\n\t            debugString = cacheEntry[2];\n\t            definedProperties.push.apply(definedProperties, cacheEntry[1]);\n\t            nextCache = cacheEntry[3];\n\t          }\n\t        } else {\n\t          var definedPropertiesChunk = [];\n\t          for (var prop in style) {\n\t            var value = style[prop];\n\t            if (prop === compiledKey) {\n\t              var compiledKeyValue = style[prop];\n\t              if (compiledKeyValue !== true) {\n\t                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;\n\t              }\n\t              continue;\n\t            }\n\t            if (typeof value === 'string' || value === null) {\n\t              if (!definedProperties.includes(prop)) {\n\t                definedProperties.push(prop);\n\t                if (nextCache != null) {\n\t                  definedPropertiesChunk.push(prop);\n\t                }\n\t                if (typeof value === 'string') {\n\t                  classNameChunk += classNameChunk ? ' ' + value : value;\n\t                }\n\t              }\n\t            } else {\n\t              console.error(\"styleq: \".concat(prop, \" typeof \").concat(String(value), \" is not \\\"string\\\" or \\\"null\\\".\"));\n\t            }\n\t          }\n\t          if (nextCache != null) {\n\t            var weakMap = new WeakMap();\n\t            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);\n\t            nextCache = weakMap;\n\t          }\n\t        }\n\t        if (classNameChunk) {\n\t          className = className ? classNameChunk + ' ' + className : classNameChunk;\n\t        }\n\t      } else {\n\t        if (disableMix) {\n\t          if (inlineStyle == null) {\n\t            inlineStyle = {};\n\t          }\n\t          inlineStyle = Object.assign({}, style, inlineStyle);\n\t        } else {\n\t          var subStyle = null;\n\t          for (var _prop in style) {\n\t            var _value = style[_prop];\n\t            if (_value !== undefined) {\n\t              if (!definedProperties.includes(_prop)) {\n\t                if (_value != null) {\n\t                  if (inlineStyle == null) {\n\t                    inlineStyle = {};\n\t                  }\n\t                  if (subStyle == null) {\n\t                    subStyle = {};\n\t                  }\n\t                  subStyle[_prop] = _value;\n\t                }\n\t                definedProperties.push(_prop);\n\t                nextCache = null;\n\t              }\n\t            }\n\t          }\n\t          if (subStyle != null) {\n\t            inlineStyle = Object.assign(subStyle, inlineStyle);\n\t          }\n\t        }\n\t      }\n\t    }\n\t    var styleProps = [className, inlineStyle, debugString];\n\t    return styleProps;\n\t  };\n\t}\n\tvar styleq$1 = styleq.styleq = createStyleq();\n\tstyleq$1.factory = createStyleq;\n\treturn styleq;\n}\n\nvar styleqExports = /*@__PURE__*/ requireStyleq();\n\nconst errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);\nconst errorForType = key => errorForFn(`types.${key}`);\nconst create = function stylexCreate(_styles) {\n  throw errorForFn('create');\n};\nconst createTheme = (_baseTokens, _overrides) => {\n  throw errorForFn('createTheme');\n};\nconst defineConsts = function stylexDefineConsts(_styles) {\n  throw errorForFn('defineConsts');\n};\nconst defineVars = function stylexDefineVars(_styles) {\n  throw errorForFn('defineVars');\n};\nconst unstable_conditional = function stylexConditional(_value) {\n  throw errorForFn('unstable_conditional');\n};\nconst unstable_defineVarsNested = function stylexDefineVarsNested(_styles) {\n  throw errorForFn('unstable_defineVarsNested');\n};\nconst unstable_defineConstsNested = function stylexDefineConstsNested(_styles) {\n  throw errorForFn('unstable_defineConstsNested');\n};\nconst unstable_createThemeNested = (_baseTokens, _overrides) => {\n  throw errorForFn('unstable_createThemeNested');\n};\nconst defineMarker = () => {\n  throw errorForFn('defineMarker');\n};\nconst firstThatWorks = (..._styles) => {\n  throw errorForFn('firstThatWorks');\n};\nconst keyframes = _keyframes => {\n  throw errorForFn('keyframes');\n};\nconst positionTry = _positionTry => {\n  throw errorForFn('positionTry');\n};\nfunction props(...styles) {\n  const [className, style, dataStyleSrc] = styleqExports.styleq(styles);\n  const result = {};\n  if (className != null && className !== '') {\n    result.className = className;\n  }\n  if (style != null && Object.keys(style).length > 0) {\n    result.style = style;\n  }\n  if (dataStyleSrc != null && dataStyleSrc !== '') {\n    result['data-style-src'] = dataStyleSrc;\n  }\n  return result;\n}\nconst toKebabCase = str => str.replace(/([A-Z])/g, '-$1').toLowerCase();\nfunction attrs(...styles) {\n  const {\n    className,\n    style,\n    'data-style-src': dataStyleSrc\n  } = props.apply(this, styles);\n  const result = {};\n  if (className != null) {\n    result.class = className;\n  }\n  if (style != null) {\n    result.style = Object.entries(style).map(([key, value]) => `${toKebabCase(key)}:${value}`).join(';');\n  }\n  if (dataStyleSrc != null) {\n    result['data-style-src'] = dataStyleSrc;\n  }\n  return result;\n}\nconst viewTransitionClass = _viewTransitionClass => {\n  throw errorForFn('viewTransitionClass');\n};\nconst defaultMarker = () => {\n  throw errorForFn('defaultMarker');\n};\nconst when = {\n  ancestor: _p => {\n    throw errorForFn('when.ancestor');\n  },\n  descendant: _p => {\n    throw errorForFn('when.descendant');\n  },\n  siblingBefore: _p => {\n    throw errorForFn('when.siblingBefore');\n  },\n  siblingAfter: _p => {\n    throw errorForFn('when.siblingAfter');\n  },\n  anySibling: _p => {\n    throw errorForFn('when.anySibling');\n  }\n};\nconst env = Object.freeze({});\nconst types = {\n  angle: _v => {\n    throw errorForType('angle');\n  },\n  color: _v => {\n    throw errorForType('color');\n  },\n  url: _v => {\n    throw errorForType('url');\n  },\n  image: _v => {\n    throw errorForType('image');\n  },\n  integer: _v => {\n    throw errorForType('integer');\n  },\n  lengthPercentage: _v => {\n    throw errorForType('lengthPercentage');\n  },\n  length: _v => {\n    throw errorForType('length');\n  },\n  percentage: _v => {\n    throw errorForType('percentage');\n  },\n  number: _v => {\n    throw errorForType('number');\n  },\n  resolution: _v => {\n    throw errorForType('resolution');\n  },\n  time: _v => {\n    throw errorForType('time');\n  },\n  transformFunction: _v => {\n    throw errorForType('transformFunction');\n  },\n  transformList: _v => {\n    throw errorForType('transformList');\n  }\n};\nconst legacyMerge = /*@__PURE__*/ function () {\n  function _legacyMerge(...styles) {\n    const [className] = styleqExports.styleq(styles);\n    return className;\n  }\n  _legacyMerge.create = create;\n  _legacyMerge.createTheme = createTheme;\n  _legacyMerge.defineConsts = defineConsts;\n  _legacyMerge.defineMarker = defineMarker;\n  _legacyMerge.defineVars = defineVars;\n  _legacyMerge.defaultMarker = defaultMarker;\n  _legacyMerge.firstThatWorks = firstThatWorks;\n  _legacyMerge.keyframes = keyframes;\n  _legacyMerge.positionTry = positionTry;\n  _legacyMerge.props = props;\n  _legacyMerge.attrs = attrs;\n  _legacyMerge.types = types;\n  _legacyMerge.when = when;\n  _legacyMerge.viewTransitionClass = viewTransitionClass;\n  _legacyMerge.env = env;\n  _legacyMerge.unstable_conditional = unstable_conditional;\n  _legacyMerge.unstable_defineVarsNested = unstable_defineVarsNested;\n  _legacyMerge.unstable_defineConstsNested = unstable_defineConstsNested;\n  _legacyMerge.unstable_createThemeNested = unstable_createThemeNested;\n  return _legacyMerge;\n}();\n\nexport { attrs, create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, unstable_conditional, unstable_createThemeNested, unstable_defineConstsNested, unstable_defineVarsNested, viewTransitionClass, when };\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/cjs/styles/ripple.cjs

@@ -0,0 +1,33 @@
+//#region src/styles/ripple.ts
+const styles = {
+	press: {
+		kKwaWg: "xliahv6",
+		kbCHJM: "xu96u03",
+		kSiTet: "xg01cxk",
+		kVAEAm: "x10l6tqk",
+		k87sOh: "x13vifvy",
+		k3nNDw: "x1g0ag68",
+		kIyJzY: "xbg8nd6",
+		k1ekBW: "x19991ni",
+		kAMwcw: "xcj1dhv",
+		$$css: true
+	},
+	pressed: {
+		kSiTet: "xjg27g",
+		kIyJzY: "xjl7l83",
+		$$css: true
+	},
+	surface: {
+		kaIpWk: "x1pjcqnp",
+		k1xSpc: "x1lliihq x1c7sf14",
+		kpwlN0: "x10a8y8t",
+		kVQacm: "xb3r6kr",
+		kfzvcC: "x47corl",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	}
+};
+//#endregion
+exports.rippleStyles = styles;
+
+//# sourceMappingURL=ripple.cjs.map

package/dist/cjs/styles/ripple.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.cjs","names":[],"sources":["../../../src/styles/ripple.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../tokens/design.tokens.stylex';\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// Growth and opacity are two independent mechanisms. Growth (width/height/\n// transform) is driven imperatively via the Web Animations API in\n// useRipple, decoupled from press/release timing so it always plays out\n// over a fixed duration. Opacity is what this file owns — toggled by the\n// `pressed` class — with a fast fade-in and a slower fade-out, so a quick\n// tap still reads as a deliberate, visible ripple rather than a flicker.\n//\n// None of the three timings below is a motion token, and that is deliberate\n// rather than an oversight predating them. The fade pair is the asymmetry\n// the paragraph above describes: 105ms in against 375ms out, hand-tuned as\n// a ratio to each other, and neither lands on the scale (105ms is near\n// durationShort1's 100ms; 375ms sits between durationMedium3 and\n// durationLong1). Snapping either to its nearest token would flatten a\n// tuned asymmetry into two arbitrary values, and adding tokens to fit would\n// make a scale that documents itself as three bands of three describe this\n// component instead. `linear` is likewise not on the easing scale, and\n// belongs off it — a fade to and from a state layer wants no acceleration,\n// which is why every curve in the token set is the wrong answer here.\n//\n// These three are now the only ripple timings off the scale. Everything\n// useRipple drives from JS is a token, read through src/tokens/values\n// because element.animate() and setTimeout both reject the StyleX form.\n//\n// The gradient's soft edge (a currentColor disc fading to transparent over\n// its outer 30-35%, capped at 70px) replaces a hard-edged circle so the\n// ripple blends into the surface rather than looking like a solid dot.\n//\n// `closest-side` + a plain circular box means no `border-radius` is needed\n// on the ripple itself — the gradient's own shape reads as a circle.\nconst styles = {\n  press: {\n    kKwaWg: \"xliahv6\",\n    kbCHJM: \"xu96u03\",\n    kSiTet: \"xg01cxk\",\n    kVAEAm: \"x10l6tqk\",\n    k87sOh: \"x13vifvy\",\n    k3nNDw: \"x1g0ag68\",\n    kIyJzY: \"xbg8nd6\",\n    k1ekBW: \"x19991ni\",\n    kAMwcw: \"xcj1dhv\",\n    $$css: true\n  },\n  pressed: {\n    kSiTet: \"xjg27g\",\n    kIyJzY: \"xjl7l83\",\n    $$css: true\n  },\n  surface: {\n    kaIpWk: \"x1pjcqnp\",\n    k1xSpc: \"x1lliihq x1c7sf14\",\n    kpwlN0: \"x10a8y8t\",\n    kVQacm: \"xb3r6kr\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  }\n};\nexport { styles as rippleStyles };"],"mappings":";AAkCA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/cjs/tokens/values.cjs

@@ -0,0 +1,36 @@
+//#region src/tokens/values.ts
+const motionDurationMs = {
+	long1: 450,
+	long2: 500,
+	long3: 600,
+	medium1: 250,
+	medium2: 300,
+	medium3: 350,
+	short1: 100,
+	short2: 150,
+	short3: 200
+};
+const motionEasing = {
+	emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+	emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)",
+	emphasizedDecelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+	springFast: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+	springSlow: "cubic-bezier(0.16, 1, 0.3, 1)",
+	standard: "cubic-bezier(0.2, 0, 0, 1)"
+};
+const spacingPx = {
+	lg: 16,
+	md: 12,
+	sm: 8,
+	xl: 24,
+	xs: 4,
+	xxl: 32,
+	xxs: 2,
+	xxxl: 40
+};
+//#endregion
+exports.motionDurationMs = motionDurationMs;
+exports.motionEasing = motionEasing;
+exports.spacingPx = spacingPx;
+
+//# sourceMappingURL=values.cjs.map

package/dist/cjs/tokens/values.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.cjs","names":[],"sources":["../../../src/tokens/values.ts"],"sourcesContent":["// AUTO-GENERATED by scripts/build-tokens.mjs from the sibling design.tokens.json.\n// Do not hand-edit — change design.tokens.json and run `npm run tokens:build`.\n//\n// Tokens as plain JS values, for the code that cannot take a CSS one. Reach for\n// the StyleX theme in design.tokens.stylex.ts anywhere a CSS property value\n// will do: those are var(--kui-*, literal) references, so a consumer who\n// redeclares the custom property moves them. The literals below are frozen at\n// build time and cannot honour such an override, which is the whole cost of\n// using them.\n//\n// So a group appears here only once something has to compute with it rather\n// than declare it, which today means two:\n//\n//   motion  — element.animate() throws a TypeError on a var() duration or\n//             easing, and its duration wants a number of milliseconds, so even\n//             '450ms' throws. setTimeout coerces a string to NaN and fires\n//             immediately, silently.\n//   spacing — useRipple does arithmetic with it, growing the ripple past the\n//             host's corners by a fixed inset. A var() would concatenate into\n//             nonsense rather than add.\n//\n// Colours, radii, shadows, typography and the state-layer opacities are all\n// declared rather than computed, so none of them is generated here.\n\nconst motionDurationMs = {\n  long1: 450,\n  long2: 500,\n  long3: 600,\n  medium1: 250,\n  medium2: 300,\n  medium3: 350,\n  short1: 100,\n  short2: 150,\n  short3: 200,\n} as const\n\nconst motionEasing = {\n  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',\n  emphasizedAccelerate: 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n  emphasizedDecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n  springFast: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  springSlow: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n} as const\n\nconst spacingPx = {\n  lg: 16,\n  md: 12,\n  sm: 8,\n  xl: 24,\n  xs: 4,\n  xxl: 32,\n  xxs: 2,\n  xxxl: 40,\n} as const\n\nexport { motionDurationMs, motionEasing, spacingPx }\n"],"mappings":";AAwBA,MAAM,mBAAmB;CACvB,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;AACV;AAEA,MAAM,eAAe;CACnB,YAAY;CACZ,sBAAsB;CACtB,sBAAsB;CACtB,YAAY;CACZ,YAAY;CACZ,UAAU;AACZ;AAEA,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;AACR"}

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

@@ -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$1({ name, size, src, tone, ...props }: AvatarProps): import("react").JSX.Element;
+//#endregion
+export { type AvatarProps, Avatar$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.js

@@ -0,0 +1,89 @@
+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";
+//#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$1({ name, size = "md", src, tone = "primary", ...props$1 }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		"aria-label": name,
+		role: "img",
+		...props$1,
+		...props(styles.base, styles[size], styles[tone]),
+		children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
+			alt: "",
+			src,
+			className: "x5yr21d xh8yej3 xl1xv1r"
+		}), /* @__PURE__ */ jsx(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
+export { Avatar$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,SAAO,EACd,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACW;CACd,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK;EAF9E,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAAyB,CAAA,GACpG,oBAAC,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/components/badge/index.d.ts

@@ -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.ts.map

package/dist/components/badge/index.js

@@ -0,0 +1,93 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "@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 useRender({
+		defaultTagName: "span",
+		props: {
+			...props$1,
+			...props(styles.base, toned)
+		},
+		render
+	});
+}
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,MAAa,OAAO,MAAM,KAAK;EACpC;EACA;CACF,CAAC;AACH"}

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

@@ -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$1({ 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$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -0,0 +1,101 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { jsxs } from "react/jsx-runtime";
+import { Button } from "@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$1({ children, disabled = false, disableRipple = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "filled", ...props$1 }) {
+	const ripple = useRipple(!disableRipple, {
+		onClick,
+		onContextMenu,
+		onPointerCancel,
+		onPointerDown,
+		onPointerLeave,
+		onPointerUp
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		disabled,
+		...ripple.handlers,
+		...props$1,
+		...props(styles.base, styles[variant], styles[size]),
+		children: [children, ripple.surface]
+	});
+}
+//#endregion
+export { Button$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,SAAO,EACd,UACA,WAAW,OACX,gBAAgB,OAChB,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,UACV,GAAG,WACW;CAId,MAAM,SAAS,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,qBAAC,QAAD;EAAwB;EAAU,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK;EAA7H,UAAA,CACF,UACA,OAAO,OACI;;AAClB"}