@bolerish/ui 0.0.0-stage → 0.11.0

package/dist/button-group.js

@@ -0,0 +1,330 @@
+"use client";
+
+// src/button-group.tsx
+import { c as _c } from "react/compiler-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Children, Fragment, cloneElement, isValidElement } from "react";
+import { Separator } from "./separator.js";
+
+// src/styles/merge-styles.ts
+function mergeStyles(base, className, style) {
+  if (className === void 0 && style === void 0) return base;
+  return {
+    ...base,
+    className: [base.className, className].filter(Boolean).join(" ") || void 0,
+    style: base.style || style ? {
+      ...base.style,
+      ...style
+    } : void 0
+  };
+}
+
+// src/button-group.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = {
+  root: {
+    kGNEyG: "x1qjc9v5",
+    k1xSpc: "x3nfvp2",
+    kOIVth: "xxhr3t",
+    kzqmXN: "xeq5yr9",
+    $$css: true
+  },
+  item: {
+    k7Eaqz: "xeuugli",
+    kVAEAm: "x1n2onr6",
+    k9RWNo: "x135w3n3",
+    $$css: true
+  },
+  text: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "xcc0o6n",
+    kVAM5u: "x1kqtvf4",
+    ksu8eU: "x1y0btm7",
+    kMzoRj: "x1al7nqq",
+    kMwMTN: "xj9e3ow",
+    k1xSpc: "x3nfvp2",
+    kGuDYH: "x1lskvfa",
+    k63SB2: "xoop9yj",
+    kjj79g: "xl56j7k",
+    kAzted: "x116rqyj",
+    kg3NbH: "x5044ve",
+    $$css: true
+  },
+  separator: {
+    kSGwAc: "xkh2ocl",
+    kZKoxP: "xt7dq6l",
+    kUOVxO: "xz95peq",
+    kAzted: "x65nank",
+    $$css: true
+  }
+};
+var orientationStyles = {
+  horizontal: {
+    kXwgrk: "x1q0g3np",
+    $$css: true
+  },
+  vertical: {
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  }
+};
+var itemOrientationStyles = {
+  horizontal: {
+    keTefX: "x1hb08if",
+    $$css: true
+  },
+  vertical: {
+    keoZOQ: "x1y332i5",
+    $$css: true
+  }
+};
+var firstItemStyles = {
+  horizontal: {
+    keTefX: "x1lziwak",
+    $$css: true
+  },
+  vertical: {
+    keoZOQ: "xdj266r",
+    $$css: true
+  }
+};
+var onlyItemStyles = {
+  horizontal: {
+    kaIpWk: "x1p5vitp",
+    $$css: true
+  },
+  vertical: {
+    kaIpWk: "x1p5vitp",
+    $$css: true
+  }
+};
+var firstItemRadiusStyles = {
+  horizontal: {
+    kqGeR4: "x10ipona",
+    kYm2EN: "xjppbhk",
+    kIxVMA: "xzn2g6r",
+    ksF3WI: "x1a2w583",
+    $$css: true
+  },
+  vertical: {
+    kqGeR4: "xfrllxf",
+    kYm2EN: "xjppbhk",
+    kIxVMA: "xzn2g6r",
+    ksF3WI: "xz5i4qs",
+    $$css: true
+  }
+};
+var middleItemStyles = {
+  horizontal: {
+    kaIpWk: "x2u8bby",
+    $$css: true
+  },
+  vertical: {
+    kaIpWk: "x2u8bby",
+    $$css: true
+  }
+};
+var lastItemStyles = {
+  horizontal: {
+    kqGeR4: "xfrllxf",
+    kYm2EN: "x1ca2soh",
+    kIxVMA: "x1ia1hqs",
+    ksF3WI: "xz5i4qs",
+    $$css: true
+  },
+  vertical: {
+    kqGeR4: "x10ipona",
+    kYm2EN: "x1ca2soh",
+    kIxVMA: "x1ia1hqs",
+    ksF3WI: "x1a2w583",
+    $$css: true
+  }
+};
+function isGroupItem(child) {
+  return isValidElement(child) && typeof child.type !== "string" && child.type !== Fragment && child.type !== ButtonGroupSeparator;
+}
+function getItemPositionStyle(orientation, isFirst, isLast) {
+  if (isFirst && isLast) return onlyItemStyles[orientation];
+  if (isFirst) return firstItemRadiusStyles[orientation];
+  if (isLast) return lastItemStyles[orientation];
+  return middleItemStyles[orientation];
+}
+function ButtonGroup(t0) {
+  const $ = _c(22);
+  let children;
+  let className;
+  let props2;
+  let role;
+  let style;
+  let t1;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      children,
+      orientation: t1,
+      role,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props2;
+    $[4] = role;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = xstyle;
+  } else {
+    children = $[1];
+    className = $[2];
+    props2 = $[3];
+    role = $[4];
+    style = $[5];
+    t1 = $[6];
+    xstyle = $[7];
+  }
+  const orientation = t1 === void 0 ? "horizontal" : t1;
+  let content;
+  if ($[8] !== children || $[9] !== orientation) {
+    const childItems = Children.toArray(children);
+    const groupItems = childItems.filter(isGroupItem);
+    let position = -1;
+    content = [];
+    for (const child of childItems) {
+      if (!isGroupItem(child)) {
+        content.push(child);
+        continue;
+      }
+      position = position + 1;
+      const isFirst = position === 0;
+      const isLast = position === groupItems.length - 1;
+      content.push(cloneElement(child, {
+        xstyle: [styles.item, itemOrientationStyles[orientation], isFirst && firstItemStyles[orientation], getItemPositionStyle(orientation, isFirst, isLast), child.props.xstyle]
+      }));
+    }
+    $[8] = children;
+    $[9] = orientation;
+    $[10] = content;
+  } else {
+    content = $[10];
+  }
+  const t2 = role ?? "group";
+  let t3;
+  if ($[11] !== className || $[12] !== orientation || $[13] !== style || $[14] !== xstyle) {
+    t3 = mergeStyles(stylex.props(styles.root, orientationStyles[orientation], xstyle), className, style);
+    $[11] = className;
+    $[12] = orientation;
+    $[13] = style;
+    $[14] = xstyle;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== content || $[17] !== orientation || $[18] !== props2 || $[19] !== t2 || $[20] !== t3) {
+    t4 = /* @__PURE__ */ jsx("div", { ...props2, "data-orientation": orientation, role: t2, ...t3, children: content });
+    $[16] = content;
+    $[17] = orientation;
+    $[18] = props2;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  return t4;
+}
+function ButtonGroupText(t0) {
+  const $ = _c(12);
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+    $[4] = xstyle;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+    xstyle = $[4];
+  }
+  let t1;
+  if ($[5] !== className || $[6] !== style || $[7] !== xstyle) {
+    t1 = mergeStyles(stylex.props(styles.text, xstyle), className, style);
+    $[5] = className;
+    $[6] = style;
+    $[7] = xstyle;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  let t2;
+  if ($[9] !== props2 || $[10] !== t1) {
+    t2 = /* @__PURE__ */ jsx("span", { ...props2, ...t1 });
+    $[9] = props2;
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
+}
+function ButtonGroupSeparator(t0) {
+  const $ = _c(10);
+  let props2;
+  let t1;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      orientation: t1,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = props2;
+    $[2] = t1;
+    $[3] = xstyle;
+  } else {
+    props2 = $[1];
+    t1 = $[2];
+    xstyle = $[3];
+  }
+  const orientation = t1 === void 0 ? "vertical" : t1;
+  let t2;
+  if ($[4] !== xstyle) {
+    t2 = [styles.separator, xstyle];
+    $[4] = xstyle;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== orientation || $[7] !== props2 || $[8] !== t2) {
+    t3 = /* @__PURE__ */ jsx(Separator, { ...props2, orientation, xstyle: t2 });
+    $[6] = orientation;
+    $[7] = props2;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText
+};
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/button-group.tsx", "../src/styles/merge-styles.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport { c as _c } from \"react/compiler-runtime\";\nimport { colorVars, radiusVars, sizeVars, spacingVars, typo } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { Children, Fragment, cloneElement, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport { Separator } from \"./separator\";\nimport { mergeStyles } from \"./styles/merge-styles\";\nimport type { StyledProps } from \"./styles/merge-styles\";\nconst styles = {\n  root: {\n    kGNEyG: \"x1qjc9v5\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"xxhr3t\",\n    kzqmXN: \"xeq5yr9\",\n    $$css: true\n  },\n  item: {\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    k9RWNo: \"x135w3n3\",\n    $$css: true\n  },\n  text: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xcc0o6n\",\n    kVAM5u: \"x1kqtvf4\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"x1al7nqq\",\n    kMwMTN: \"xj9e3ow\",\n    k1xSpc: \"x3nfvp2\",\n    kGuDYH: \"x1lskvfa\",\n    k63SB2: \"xoop9yj\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"x116rqyj\",\n    kg3NbH: \"x5044ve\",\n    $$css: true\n  },\n  separator: {\n    kSGwAc: \"xkh2ocl\",\n    kZKoxP: \"xt7dq6l\",\n    kUOVxO: \"xz95peq\",\n    kAzted: \"x65nank\",\n    $$css: true\n  }\n};\nconst orientationStyles = {\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\nconst itemOrientationStyles = {\n  horizontal: {\n    keTefX: \"x1hb08if\",\n    $$css: true\n  },\n  vertical: {\n    keoZOQ: \"x1y332i5\",\n    $$css: true\n  }\n};\nconst firstItemStyles = {\n  horizontal: {\n    keTefX: \"x1lziwak\",\n    $$css: true\n  },\n  vertical: {\n    keoZOQ: \"xdj266r\",\n    $$css: true\n  }\n};\nconst onlyItemStyles = {\n  horizontal: {\n    kaIpWk: \"x1p5vitp\",\n    $$css: true\n  },\n  vertical: {\n    kaIpWk: \"x1p5vitp\",\n    $$css: true\n  }\n};\nconst firstItemRadiusStyles = {\n  horizontal: {\n    kqGeR4: \"x10ipona\",\n    kYm2EN: \"xjppbhk\",\n    kIxVMA: \"xzn2g6r\",\n    ksF3WI: \"x1a2w583\",\n    $$css: true\n  },\n  vertical: {\n    kqGeR4: \"xfrllxf\",\n    kYm2EN: \"xjppbhk\",\n    kIxVMA: \"xzn2g6r\",\n    ksF3WI: \"xz5i4qs\",\n    $$css: true\n  }\n};\nconst middleItemStyles = {\n  horizontal: {\n    kaIpWk: \"x2u8bby\",\n    $$css: true\n  },\n  vertical: {\n    kaIpWk: \"x2u8bby\",\n    $$css: true\n  }\n};\nconst lastItemStyles = {\n  horizontal: {\n    kqGeR4: \"xfrllxf\",\n    kYm2EN: \"x1ca2soh\",\n    kIxVMA: \"x1ia1hqs\",\n    ksF3WI: \"xz5i4qs\",\n    $$css: true\n  },\n  vertical: {\n    kqGeR4: \"x10ipona\",\n    kYm2EN: \"x1ca2soh\",\n    kIxVMA: \"x1ia1hqs\",\n    ksF3WI: \"x1a2w583\",\n    $$css: true\n  }\n};\ntype StyleProps = {\n  xstyle?: stylex.StyleXStyles;\n};\ntype GroupItem = ReactElement<StyleProps>;\nfunction isGroupItem(child: ReactNode): child is GroupItem {\n  return isValidElement(child) && typeof child.type !== \"string\" && child.type !== Fragment && child.type !== ButtonGroupSeparator;\n}\nfunction getItemPositionStyle(orientation: \"horizontal\" | \"vertical\", isFirst: boolean, isLast: boolean) {\n  if (isFirst && isLast) return onlyItemStyles[orientation];\n  if (isFirst) return firstItemRadiusStyles[orientation];\n  if (isLast) return lastItemStyles[orientation];\n  return middleItemStyles[orientation];\n}\n\n/** Direct children must be Bolerish buttons or components that forward xstyle. Fragments and native elements are not styled as group items. */\nexport type ButtonGroupProps = StyledProps<ComponentProps<\"div\">> & StyleProps & {\n  orientation?: \"horizontal\" | \"vertical\";\n};\nexport function ButtonGroup(t0) {\n  const $ = _c(22);\n  let children;\n  let className;\n  let props;\n  let role;\n  let style;\n  let t1;\n  let xstyle;\n  if ($[0] !== t0) {\n    ({\n      className,\n      style,\n      children,\n      orientation: t1,\n      role,\n      xstyle,\n      ...props\n    } = t0);\n    $[0] = t0;\n    $[1] = children;\n    $[2] = className;\n    $[3] = props;\n    $[4] = role;\n    $[5] = style;\n    $[6] = t1;\n    $[7] = xstyle;\n  } else {\n    children = $[1];\n    className = $[2];\n    props = $[3];\n    role = $[4];\n    style = $[5];\n    t1 = $[6];\n    xstyle = $[7];\n  }\n  const orientation = t1 === undefined ? \"horizontal\" : t1;\n  let content;\n  if ($[8] !== children || $[9] !== orientation) {\n    const childItems = Children.toArray(children);\n    const groupItems = childItems.filter(isGroupItem);\n    let position = -1;\n    content = [];\n    for (const child of childItems) {\n      if (!isGroupItem(child)) {\n        content.push(child);\n        continue;\n      }\n      position = position + 1;\n      const isFirst = position === 0;\n      const isLast = position === groupItems.length - 1;\n      content.push(cloneElement(child, {\n        xstyle: [styles.item, itemOrientationStyles[orientation], isFirst && firstItemStyles[orientation], getItemPositionStyle(orientation, isFirst, isLast), child.props.xstyle]\n      }));\n    }\n    $[8] = children;\n    $[9] = orientation;\n    $[10] = content;\n  } else {\n    content = $[10];\n  }\n  const t2 = role ?? \"group\";\n  let t3;\n  if ($[11] !== className || $[12] !== orientation || $[13] !== style || $[14] !== xstyle) {\n    t3 = mergeStyles(stylex.props(styles.root, orientationStyles[orientation], xstyle), className, style);\n    $[11] = className;\n    $[12] = orientation;\n    $[13] = style;\n    $[14] = xstyle;\n    $[15] = t3;\n  } else {\n    t3 = $[15];\n  }\n  let t4;\n  if ($[16] !== content || $[17] !== orientation || $[18] !== props || $[19] !== t2 || $[20] !== t3) {\n    t4 = <div {...props} data-orientation={orientation} role={t2} {...t3}>{content}</div>;\n    $[16] = content;\n    $[17] = orientation;\n    $[18] = props;\n    $[19] = t2;\n    $[20] = t3;\n    $[21] = t4;\n  } else {\n    t4 = $[21];\n  }\n  return t4;\n}\nexport function ButtonGroupText(t0) {\n  const $ = _c(12);\n  let className;\n  let props;\n  let style;\n  let xstyle;\n  if ($[0] !== t0) {\n    ({\n      className,\n      style,\n      xstyle,\n      ...props\n    } = t0);\n    $[0] = t0;\n    $[1] = className;\n    $[2] = props;\n    $[3] = style;\n    $[4] = xstyle;\n  } else {\n    className = $[1];\n    props = $[2];\n    style = $[3];\n    xstyle = $[4];\n  }\n  let t1;\n  if ($[5] !== className || $[6] !== style || $[7] !== xstyle) {\n    t1 = mergeStyles(stylex.props(styles.text, xstyle), className, style);\n    $[5] = className;\n    $[6] = style;\n    $[7] = xstyle;\n    $[8] = t1;\n  } else {\n    t1 = $[8];\n  }\n  let t2;\n  if ($[9] !== props || $[10] !== t1) {\n    t2 = <span {...props} {...t1} />;\n    $[9] = props;\n    $[10] = t1;\n    $[11] = t2;\n  } else {\n    t2 = $[11];\n  }\n  return t2;\n}\nexport function ButtonGroupSeparator(t0) {\n  const $ = _c(10);\n  let props;\n  let t1;\n  let xstyle;\n  if ($[0] !== t0) {\n    ({\n      orientation: t1,\n      xstyle,\n      ...props\n    } = t0);\n    $[0] = t0;\n    $[1] = props;\n    $[2] = t1;\n    $[3] = xstyle;\n  } else {\n    props = $[1];\n    t1 = $[2];\n    xstyle = $[3];\n  }\n  const orientation = t1 === undefined ? \"vertical\" : t1;\n  let t2;\n  if ($[4] !== xstyle) {\n    t2 = [styles.separator, xstyle];\n    $[4] = xstyle;\n    $[5] = t2;\n  } else {\n    t2 = $[5];\n  }\n  let t3;\n  if ($[6] !== orientation || $[7] !== props || $[8] !== t2) {\n    t3 = <Separator {...props} orientation={orientation} xstyle={t2} />;\n    $[6] = orientation;\n    $[7] = props;\n    $[8] = t2;\n    $[9] = t3;\n  } else {\n    t3 = $[9];\n  }\n  return t3;\n}", "import type * as stylex from \"@stylexjs/stylex\";\nimport type { CSSProperties } from \"react\";\nexport type StyledProps<Props> = Props extends unknown ? Omit<Props, \"className\" | \"style\"> & {\n  className?: string;\n  style?: CSSProperties;\n} : never;\nexport function mergeStyles(base: ReturnType<typeof stylex.props>, className?: string, style?: CSSProperties): {\n  className?: string;\n  style?: CSSProperties;\n} {\n  if (className === undefined && style === undefined) return base;\n  return {\n    ...base,\n    className: [base.className, className].filter(Boolean).join(\" \") || undefined,\n    style: base.style || style ? {\n      ...base.style,\n      ...style\n    } : undefined\n  };\n}"],
+  "mappings": "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",
+  "names": ["props"]
+}

package/dist/button.d.ts

@@ -0,0 +1,17 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import type { ComponentProps, ReactNode } from "react";
+import type { ControlLayoutStyles } from "./styles/control-layout";
+import type { StyledProps } from "./styles/merge-styles";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
+type ButtonSize = "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+export type ButtonProps = StyledProps<ComponentProps<typeof ButtonPrimitive>> & {
+    align?: "start" | "center" | "end" | "space-between";
+    children: ReactNode;
+    size?: ButtonSize;
+    /** Use an icon size for icon-only buttons, and add an accessible name. */
+    shape?: "default" | "square" | "circle";
+    variant?: ButtonVariant;
+    xstyle?: ControlLayoutStyles;
+};
+export declare function Button({ className, style, align, children, disabled, size, shape, variant, xstyle, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/button.js

@@ -0,0 +1,313 @@
+"use client";
+
+// src/button.tsx
+import { c as _c } from "react/compiler-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import * as stylex from "@stylexjs/stylex";
+
+// src/styles/merge-styles.ts
+function mergeStyles(base, className, style) {
+  if (className === void 0 && style === void 0) return base;
+  return {
+    ...base,
+    className: [base.className, className].filter(Boolean).join(" ") || void 0,
+    style: base.style || style ? {
+      ...base.style,
+      ...style
+    } : void 0
+  };
+}
+
+// src/button.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = {
+  root: {
+    kGNEyG: "x6s0dn4",
+    kysU6D: "xjyslct",
+    ksu8eU: "x1y0btm7",
+    kMzoRj: "x1al7nqq",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x3nfvp2",
+    kGuDYH: "x1lskvfa",
+    k63SB2: "xoop9yj",
+    kOIVth: "x136xbx3",
+    kHBbk8: "xc8icb0",
+    kLWn49: "x15rnifv",
+    kI3sdo: "x1a2a7pz",
+    kVQacm: "xb3r6kr",
+    kVAEAm: "x1n2onr6",
+    kIyJzY: "xznvecg",
+    k1ekBW: "x1qsmvhx",
+    kAMwcw: "xrkjf8i",
+    kfSwDN: "x87ps6o",
+    khDVqt: "xuxw1ft",
+    kZs9gx: "x768paa",
+    kiEn40: "x1m0b1kh",
+    k7shQP: "x9v5kkp",
+    kPJHz1: "x1k4h2j2",
+    kYPGJ8: "x1s07b3s",
+    ks3ayO: "x17ctvpv",
+    k5JduY: "x1s928wv",
+    kv0HGH: "xarstr8",
+    kloYau: "x2q1x1w",
+    kwXMNM: "x1j6awrg",
+    kPNhGg: "x1byudbu",
+    kRicXK: "x1ywzrc5",
+    kA8PQs: "xe2lpi4",
+    kDVEDD: "xi4xitw",
+    $$css: true
+  },
+  primaryInteraction: {
+    kWkggS: "x1k98rc1 xgmwful x1bbutf3",
+    ks3ayO: "x17ctvpv",
+    $$css: true
+  },
+  solidInteraction: {
+    ks3ayO: "x17ctvpv x1pcu9v8 xy53125",
+    $$css: true
+  },
+  surfaceInteraction: {
+    ks3ayO: "x17ctvpv x1l7l6la x1b6uf5z",
+    $$css: true
+  },
+  iconContent: {
+    kOIVth: "xxhr3t",
+    kgeoSG: "x12vebyb",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "xx34gk8",
+    kVAM5u: "x1kqtvf4",
+    kMwMTN: "xdmzwdx",
+    ks3ayO: "x17ctvpv",
+    $$css: true
+  },
+  disabledGhost: {
+    kWkggS: "x1ail9j1",
+    kVAM5u: "x1p2lc83",
+    $$css: true
+  }
+};
+var alignStyles = {
+  start: {
+    kjj79g: "x1nhvcw1",
+    $$css: true
+  },
+  center: {
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
+  end: {
+    kjj79g: "x13a6bvl",
+    $$css: true
+  },
+  "space-between": {
+    kjj79g: "x1qughib",
+    $$css: true
+  }
+};
+var sizeStyles = {
+  sm: {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x1dvwle6",
+    kg3NbH: "x5044ve",
+    $$css: true
+  },
+  md: {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x1f00wt4",
+    kg3NbH: "x9eqyeb",
+    $$css: true
+  },
+  lg: {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x4rnblq",
+    kg3NbH: "x1tswxol",
+    $$css: true
+  },
+  "icon-xs": {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x1nb8khz",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "xcasm8m",
+    $$css: true
+  },
+  "icon-sm": {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x1dvwle6",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "x1g37zm5",
+    $$css: true
+  },
+  "icon-md": {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x1f00wt4",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "x18pndxb",
+    $$css: true
+  },
+  "icon-lg": {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x4rnblq",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "x16zkcgh",
+    $$css: true
+  },
+  "icon-xl": {
+    kaIpWk: "x1p5vitp",
+    kZKoxP: "x15h3g2r",
+    kg3NbH: "xnjsko4",
+    kzqmXN: "x1wis873",
+    $$css: true
+  }
+};
+var variantStyles = {
+  primary: {
+    kWkggS: "x1k98rc1",
+    kVAM5u: "x1lpgi1j",
+    kMwMTN: "x8p6z4r",
+    $$css: true
+  },
+  secondary: {
+    kWkggS: "xcc0o6n",
+    kVAM5u: "xmt3ebw",
+    kMwMTN: "x1t28c4i",
+    $$css: true
+  },
+  outline: {
+    kWkggS: "x1ail9j1",
+    kVAM5u: "xmt3ebw",
+    kMwMTN: "x1t28c4i",
+    $$css: true
+  },
+  ghost: {
+    kWkggS: "x1ail9j1",
+    kVAM5u: "x1p2lc83",
+    kMwMTN: "x1t28c4i",
+    $$css: true
+  },
+  destructive: {
+    kWkggS: "xezvvoc",
+    kVAM5u: "x18a8tw4",
+    kMwMTN: "xppjnsa",
+    $$css: true
+  }
+};
+var shapeStyles = {
+  default: {
+    $$css: true
+  },
+  square: {
+    kg3NbH: "xnjsko4",
+    $$css: true
+  },
+  circle: {
+    kaIpWk: "xwhwt5f",
+    kg3NbH: "xnjsko4",
+    $$css: true
+  }
+};
+var squareStyles = {
+  sm: {
+    kzqmXN: "x1g37zm5",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x18pndxb",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "x16zkcgh",
+    $$css: true
+  }
+};
+function Button(t0) {
+  const $ = _c(28);
+  let children;
+  let className;
+  let disabled;
+  let props2;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      align: t1,
+      children,
+      disabled,
+      size: t2,
+      shape: t3,
+      variant: t4,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = props2;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = xstyle;
+  } else {
+    children = $[1];
+    className = $[2];
+    disabled = $[3];
+    props2 = $[4];
+    style = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    xstyle = $[10];
+  }
+  const align = t1 === void 0 ? "center" : t1;
+  const size = t2 === void 0 ? "md" : t2;
+  const shape = t3 === void 0 ? "default" : t3;
+  const variant = t4 === void 0 ? "primary" : t4;
+  const isStandardSize = size === "sm" || size === "md" || size === "lg";
+  const shapeWidth = isStandardSize && shape !== "default" && squareStyles[size];
+  const hasSolidBackground = variant === "primary" || variant === "destructive";
+  let t5;
+  if ($[11] !== align || $[12] !== className || $[13] !== disabled || $[14] !== hasSolidBackground || $[15] !== isStandardSize || $[16] !== shape || $[17] !== shapeWidth || $[18] !== size || $[19] !== style || $[20] !== variant || $[21] !== xstyle) {
+    t5 = mergeStyles(stylex.props(styles.root, alignStyles[align], variantStyles[variant], sizeStyles[size], !isStandardSize && styles.iconContent, shapeStyles[shape], shapeWidth, hasSolidBackground ? styles.solidInteraction : styles.surfaceInteraction, variant === "primary" && styles.primaryInteraction, disabled && styles.disabled, disabled && variant === "ghost" && styles.disabledGhost, xstyle), className, style);
+    $[11] = align;
+    $[12] = className;
+    $[13] = disabled;
+    $[14] = hasSolidBackground;
+    $[15] = isStandardSize;
+    $[16] = shape;
+    $[17] = shapeWidth;
+    $[18] = size;
+    $[19] = style;
+    $[20] = variant;
+    $[21] = xstyle;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  let t6;
+  if ($[23] !== children || $[24] !== disabled || $[25] !== props2 || $[26] !== t5) {
+    t6 = /* @__PURE__ */ jsx(ButtonPrimitive, { ...props2, disabled, ...t5, children });
+    $[23] = children;
+    $[24] = disabled;
+    $[25] = props2;
+    $[26] = t5;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  return t6;
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map