@bolerish/ui 0.13.0 → 0.16.0

package/dist/liquid.js

@@ -0,0 +1,229 @@
+"use client";
+
+// src/liquid.tsx
+import * as stylex from "@stylexjs/stylex";
+import { useEffect, useId, useRef, useState } from "react";
+
+// src/styles/liquid-map.ts
+function createLiquidMap(width, height, radius) {
+  if (![width, height, radius].every(Number.isFinite) || width <= 0 || height <= 0 || radius < 0)
+    throw new RangeError(
+      "Liquid geometry must be finite with positive dimensions and a non-negative radius."
+    );
+  const ratio = Math.min(1, 256 / Math.max(width, height));
+  const mapWidth = Math.max(1, Math.round(width * ratio));
+  const mapHeight = Math.max(1, Math.round(height * ratio));
+  const data = new Uint8ClampedArray(mapWidth * mapHeight * 4);
+  const corner = Math.min(radius, width / 2, height / 2);
+  const band = Math.min(16, width / 4, height / 4);
+  const distance = (x, y) => {
+    const dx = Math.abs(x - width / 2) - (width / 2 - corner);
+    const dy = Math.abs(y - height / 2) - (height / 2 - corner);
+    return Math.hypot(Math.max(dx, 0), Math.max(dy, 0)) + Math.min(Math.max(dx, dy), 0) - corner;
+  };
+  for (let y = 0; y < mapHeight; y++) {
+    for (let x = 0; x < mapWidth; x++) {
+      const px = (x + 0.5) * width / mapWidth;
+      const py = (y + 0.5) * height / mapHeight;
+      const d = distance(px, py);
+      const amount = d <= 0 ? Math.max(0, 1 + d / band) ** 2 : 0;
+      const nx = distance(px + 0.5, py) - distance(px - 0.5, py);
+      const ny = distance(px, py + 0.5) - distance(px, py - 0.5);
+      const length = Math.hypot(nx, ny) || 1;
+      const index = (y * mapWidth + x) * 4;
+      data[index] = Math.round(128 - nx / length * amount * 120);
+      data[index + 1] = Math.round(128 - ny / length * amount * 120);
+      data[index + 2] = 128;
+      data[index + 3] = 255;
+    }
+  }
+  return { width: mapWidth, height: mapHeight, data };
+}
+
+// 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/styles/surface.ts
+var styles = {
+  edge: {
+    kVAM5u: "x1kqtvf4",
+    kFGkbq: "x1w1tqly",
+    $$css: true
+  },
+  material: {
+    "--bolerish-material-shadow": "xvd6nka",
+    kGVxlE: "x16ifxj2 xpqbwuo",
+    kWkggS: "x1s4uome x1u5mdis",
+    k6WDB: "x1t853zo x1o5bnqd",
+    kKwaWg: "x18o3ruo xxit9r9",
+    kTahiY: "x1cg02ou",
+    kEcs6k: "x11rvarm",
+    kWrjR8: "x1ile18z",
+    kfloDl: "x1m3y3zz",
+    kO6drA: "x9yvj25",
+    kkTUmj: "x14hm74v",
+    k11ilZ: "xhobzj1",
+    ktzNWN: "xwaqzdf",
+    $$css: true
+  },
+  panel: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "x8fe23t",
+    "--bolerish-material-filter": "x1n6mwez",
+    $$css: true
+  },
+  control: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  subtle: {
+    "--bolerish-material-color": "x1819ggx",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  outline: {
+    "--bolerish-material-color": "x3m3fbl",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  raised: {
+    "--bolerish-material-shadow": "x1l9gcvt",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x1nqk09",
+    "--bolerish-material-filter": "x1gkvbmm",
+    $$css: true
+  },
+  translucent: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xoh9gux",
+    "--bolerish-material-filter": "xhu24am",
+    $$css: true
+  },
+  floating: {
+    "--bolerish-material-shadow": "xu02b4h",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x14p89z6",
+    "--bolerish-material-filter": "xunhrho",
+    $$css: true
+  }
+};
+var surfaceStyles = {
+  edge: styles.edge,
+  panel: [styles.material, styles.panel],
+  control: [styles.material, styles.control],
+  subtle: [styles.material, styles.subtle],
+  outline: [styles.material, styles.outline],
+  raised: [styles.material, styles.raised],
+  translucent: [styles.material, styles.translucent],
+  floating: [styles.material, styles.floating]
+};
+
+// src/liquid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles2 = {
+  root: {
+    kaIpWk: "x9up7g5",
+    kMwMTN: "x1t28c4i",
+    kMv6JI: "x1b1to7n",
+    kHBbk8: "xc8icb0",
+    k7Eaqz: "xeuugli",
+    kVAEAm: "x1n2onr6",
+    $$css: true
+  },
+  tint: {
+    "--bolerish-material-opacity": "xf4qlvf",
+    "--bolerish-material-filter": "x9f78pr",
+    "--bolerish-surface-reflection": "xepbi11",
+    kaIpWk: "x1pjcqnp",
+    kpwlN0: "x10a8y8t",
+    kfzvcC: "x47corl",
+    kVAEAm: "x10l6tqk",
+    $$css: true
+  }
+};
+function Liquid({
+  background,
+  children,
+  className,
+  style,
+  xstyle,
+  ...props2
+}) {
+  const backgroundRef = useRef(null);
+  const id = useId().replace(/:/g, "");
+  const [map, setMap] = useState();
+  useEffect(() => {
+    const element = backgroundRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    let revision = 0;
+    let frame = 0;
+    const observer = new ResizeObserver(([entry]) => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const {
+          width,
+          height
+        } = entry.contentRect;
+        if (!width || !height || width > 1024 || height > 1024) {
+          setMap(void 0);
+          return;
+        }
+        try {
+          const value = getComputedStyle(element).borderTopLeftRadius;
+          const radius = (parseFloat(value) || 0) * (value.endsWith("%") ? Math.min(width, height) / 100 : 1);
+          const pixels = createLiquidMap(width, height, radius);
+          const canvas = document.createElement("canvas");
+          canvas.width = pixels.width;
+          canvas.height = pixels.height;
+          const context = canvas.getContext("2d");
+          if (!context) {
+            setMap(void 0);
+            return;
+          }
+          context.putImageData(new ImageData(pixels.data, pixels.width, pixels.height), 0, 0);
+          setMap({
+            url: canvas.toDataURL(),
+            revision: ++revision
+          });
+        } catch {
+          setMap(void 0);
+        }
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+  const filterId = `${id}-liquid-${map?.revision ?? 0}`;
+  return /* @__PURE__ */ jsxs("div", { ...props2, ...mergeStyles(stylex.props(styles2.root, xstyle), className, style), children: [
+    /* @__PURE__ */ jsx("div", { className: "x1pjcqnp x1ctqcxj x10a8y8t xb3r6kr x47corl x10l6tqk x1izksy x1c7sf14", ref: backgroundRef, "aria-hidden": "true", inert: true, style: map ? {
+      filter: `url(#${filterId})`
+    } : void 0, children: background }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...stylex.props(surfaceStyles.panel, styles2.tint) }),
+    /* @__PURE__ */ jsx("div", { className: "x1n2onr6", children }),
+    /* @__PURE__ */ jsx("svg", { className: "x10l6tqk x47corl", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", { children: map ? /* @__PURE__ */ jsxs("filter", { id: filterId, x: "0", y: "0", width: "100%", height: "100%", colorInterpolationFilters: "sRGB", children: [
+      /* @__PURE__ */ jsx("feImage", { href: map.url, width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }),
+      /* @__PURE__ */ jsx("feDisplacementMap", { in: "SourceGraphic", in2: "map", scale: "12", xChannelSelector: "R", yChannelSelector: "G" })
+    ] }) : null }) })
+  ] });
+}
+export {
+  Liquid
+};
+//# sourceMappingURL=liquid.js.map

package/dist/liquid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/liquid.tsx", "../src/styles/liquid-map.ts", "../src/styles/merge-styles.ts", "../src/styles/surface.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport { colorVars, radiusVars, typo } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { useEffect, useId, useRef, useState, type ComponentProps, type ReactNode } from \"react\";\nimport { createLiquidMap } from \"./styles/liquid-map\";\nimport { mergeStyles, type StyledProps } from \"./styles/merge-styles\";\nimport { surfaceStyles } from \"./styles/surface\";\nconst styles = {\n  root: {\n    kaIpWk: \"x9up7g5\",\n    kMwMTN: \"x1t28c4i\",\n    kMv6JI: \"x1b1to7n\",\n    kHBbk8: \"xc8icb0\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  tint: {\n    \"--bolerish-material-opacity\": \"xf4qlvf\",\n    \"--bolerish-material-filter\": \"x9f78pr\",\n    \"--bolerish-surface-reflection\": \"xepbi11\",\n    kaIpWk: \"x1pjcqnp\",\n    kpwlN0: \"x10a8y8t\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  }\n};\nexport type LiquidProps = StyledProps<ComponentProps<\"div\">> & {\n  /** A decorative background owned by this liquid, not a snapshot of the page. */\n  background: ReactNode;\n  xstyle?: stylex.StyleXStyles;\n};\n\n/** Refracts an explicit decorative background while foreground controls remain sharp. */\nexport function Liquid({\n  background,\n  children,\n  className,\n  style,\n  xstyle,\n  ...props\n}: LiquidProps) {\n  const backgroundRef = useRef<HTMLDivElement>(null);\n  const id = useId().replace(/:/g, \"\");\n  const [map, setMap] = useState<{\n    url: string;\n    revision: number;\n  }>();\n  useEffect(() => {\n    const element = backgroundRef.current;\n    if (!element || typeof ResizeObserver === \"undefined\") return;\n    let revision = 0;\n    let frame = 0;\n    const observer = new ResizeObserver(([entry]) => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        const {\n          width,\n          height\n        } = entry.contentRect;\n        // shortcut: large SVG sources vary across WebKit versions; use the plain material above 1024px.\n        if (!width || !height || width > 1024 || height > 1024) {\n          setMap(undefined);\n          return;\n        }\n        try {\n          const value = getComputedStyle(element).borderTopLeftRadius;\n          const radius = (parseFloat(value) || 0) * (value.endsWith(\"%\") ? Math.min(width, height) / 100 : 1);\n          const pixels = createLiquidMap(width, height, radius);\n          const canvas = document.createElement(\"canvas\");\n          canvas.width = pixels.width;\n          canvas.height = pixels.height;\n          const context = canvas.getContext(\"2d\");\n          if (!context) {\n            setMap(undefined);\n            return;\n          }\n          context.putImageData(new ImageData(pixels.data, pixels.width, pixels.height), 0, 0);\n          // WebKit caches filter output by ID; resized lenses need a fresh ID.\n          setMap({\n            url: canvas.toDataURL(),\n            revision: ++revision\n          });\n        } catch {\n          setMap(undefined);\n        }\n      });\n    });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n      cancelAnimationFrame(frame);\n    };\n  }, []);\n  const filterId = `${id}-liquid-${map?.revision ?? 0}`;\n  return <div {...props} {...mergeStyles(stylex.props(styles.root, xstyle), className, style)}>\n      <div className=\"x1pjcqnp x1ctqcxj x10a8y8t xb3r6kr x47corl x10l6tqk x1izksy x1c7sf14\" ref={backgroundRef} aria-hidden=\"true\" inert style={map ? {\n      filter: `url(#${filterId})`\n    } : undefined}>\n        {background}\n      </div>\n      <div aria-hidden=\"true\" {...stylex.props(surfaceStyles.panel, styles.tint)} />\n      <div className=\"x1n2onr6\">{children}</div>\n      <svg className=\"x10l6tqk x47corl\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n        <defs>\n          {map ? <filter id={filterId} x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" colorInterpolationFilters=\"sRGB\">\n              <feImage href={map.url} width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" result=\"map\" />\n              <feDisplacementMap in=\"SourceGraphic\" in2=\"map\" scale=\"12\" xChannelSelector=\"R\" yChannelSelector=\"G\" />\n            </filter> : null}\n        </defs>\n      </svg>\n    </div>;\n}", "export function createLiquidMap(width: number, height: number, radius: number) {\n  if (![width, height, radius].every(Number.isFinite) || width <= 0 || height <= 0 || radius < 0)\n    throw new RangeError(\n      \"Liquid geometry must be finite with positive dimensions and a non-negative radius.\",\n    );\n  const ratio = Math.min(1, 256 / Math.max(width, height));\n  const mapWidth = Math.max(1, Math.round(width * ratio));\n  const mapHeight = Math.max(1, Math.round(height * ratio));\n  const data = new Uint8ClampedArray(mapWidth * mapHeight * 4);\n  const corner = Math.min(radius, width / 2, height / 2);\n  const band = Math.min(16, width / 4, height / 4);\n  const distance = (x: number, y: number) => {\n    const dx = Math.abs(x - width / 2) - (width / 2 - corner);\n    const dy = Math.abs(y - height / 2) - (height / 2 - corner);\n    return Math.hypot(Math.max(dx, 0), Math.max(dy, 0)) + Math.min(Math.max(dx, dy), 0) - corner;\n  };\n  for (let y = 0; y < mapHeight; y++) {\n    for (let x = 0; x < mapWidth; x++) {\n      const px = ((x + 0.5) * width) / mapWidth;\n      const py = ((y + 0.5) * height) / mapHeight;\n      const d = distance(px, py);\n      const amount = d <= 0 ? Math.max(0, 1 + d / band) ** 2 : 0;\n      const nx = distance(px + 0.5, py) - distance(px - 0.5, py);\n      const ny = distance(px, py + 0.5) - distance(px, py - 0.5);\n      const length = Math.hypot(nx, ny) || 1;\n      const index = (y * mapWidth + x) * 4;\n      data[index] = Math.round(128 - (nx / length) * amount * 120);\n      data[index + 1] = Math.round(128 - (ny / length) * amount * 120);\n      data[index + 2] = 128;\n      data[index + 3] = 255;\n    }\n  }\n  return { width: mapWidth, height: mapHeight, data };\n}\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}", "import { colorVars, shadowVars } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nconst styles = {\n  edge: {\n    kVAM5u: \"x1kqtvf4\",\n    kFGkbq: \"x1w1tqly\",\n    $$css: true\n  },\n  material: {\n    \"--bolerish-material-shadow\": \"xvd6nka\",\n    kGVxlE: \"x16ifxj2 xpqbwuo\",\n    kWkggS: \"x1s4uome x1u5mdis\",\n    k6WDB: \"x1t853zo x1o5bnqd\",\n    kKwaWg: \"x18o3ruo xxit9r9\",\n    kTahiY: \"x1cg02ou\",\n    kEcs6k: \"x11rvarm\",\n    kWrjR8: \"x1ile18z\",\n    kfloDl: \"x1m3y3zz\",\n    kO6drA: \"x9yvj25\",\n    kkTUmj: \"x14hm74v\",\n    k11ilZ: \"xhobzj1\",\n    ktzNWN: \"xwaqzdf\",\n    $$css: true\n  },\n  panel: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"x8fe23t\",\n    \"--bolerish-material-filter\": \"x1n6mwez\",\n    $$css: true\n  },\n  control: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  subtle: {\n    \"--bolerish-material-color\": \"x1819ggx\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  outline: {\n    \"--bolerish-material-color\": \"x3m3fbl\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  raised: {\n    \"--bolerish-material-shadow\": \"x1l9gcvt\",\n    \"--bolerish-material-color\": \"x1y5ilfp\",\n    \"--bolerish-material-opacity\": \"x1nqk09\",\n    \"--bolerish-material-filter\": \"x1gkvbmm\",\n    $$css: true\n  },\n  translucent: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"xoh9gux\",\n    \"--bolerish-material-filter\": \"xhu24am\",\n    $$css: true\n  },\n  floating: {\n    \"--bolerish-material-shadow\": \"xu02b4h\",\n    \"--bolerish-material-color\": \"x1y5ilfp\",\n    \"--bolerish-material-opacity\": \"x14p89z6\",\n    \"--bolerish-material-filter\": \"xunhrho\",\n    $$css: true\n  }\n};\nexport const surfaceStyles = {\n  edge: styles.edge,\n  panel: [styles.material, styles.panel],\n  control: [styles.material, styles.control],\n  subtle: [styles.material, styles.subtle],\n  outline: [styles.material, styles.outline],\n  raised: [styles.material, styles.raised],\n  translucent: [styles.material, styles.translucent],\n  floating: [styles.material, styles.floating]\n};"],
+  "mappings": "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",
+  "names": ["styles", "props"]
+}

package/dist/menubar.d.ts

@@ -8,7 +8,7 @@ import type { StyledProps } from "./styles/merge-styles";
 export declare function Menubar({ className, style, xstyle, ...props }: StyledProps<ComponentProps<typeof MenubarPrimitive>> & {
     xstyle?: stylex.StyleXStyles;
 }): import("react").JSX.Element;
-export declare const MenubarMenu: <Payload>(props: MenuPrimitive.Root.Props<Payload>) => import("react").JSX.Element;
+export declare const MenubarMenu: typeof MenuPrimitive.Root;
 export declare function MenubarTrigger({ className, style, xstyle, ...props }: StyledProps<ComponentProps<typeof MenuPrimitive.Trigger>> & {
     xstyle?: ControlLayoutStyles;
 }): import("react").JSX.Element;

package/dist/menubar.js

@@ -21,35 +21,87 @@ function mergeStyles(base, className, style) {
 }
 
 // src/styles/surface.ts
-var surfaceStyles = {
+var styles = {
   edge: {
     kVAM5u: "x1kqtvf4",
     kFGkbq: "x1w1tqly",
     $$css: true
   },
-  translucent: {
-    kWkggS: "xcc0o6n x6pgpxb",
-    k6WDB: "x1jh03n0",
-    kTahiY: "x1rxs12l",
+  material: {
+    "--bolerish-material-shadow": "xvd6nka",
+    kGVxlE: "x16ifxj2 xpqbwuo",
+    kWkggS: "x1s4uome x1u5mdis",
+    k6WDB: "x1t853zo x1o5bnqd",
+    kKwaWg: "x18o3ruo xxit9r9",
+    kTahiY: "x1cg02ou",
     kEcs6k: "x11rvarm",
+    kWrjR8: "x1ile18z",
+    kfloDl: "x1m3y3zz",
     kO6drA: "x9yvj25",
     kkTUmj: "x14hm74v",
+    k11ilZ: "xhobzj1",
+    ktzNWN: "xwaqzdf",
+    $$css: true
+  },
+  panel: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "x8fe23t",
+    "--bolerish-material-filter": "x1n6mwez",
+    $$css: true
+  },
+  control: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  subtle: {
+    "--bolerish-material-color": "x1819ggx",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  outline: {
+    "--bolerish-material-color": "x3m3fbl",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  raised: {
+    "--bolerish-material-shadow": "x1l9gcvt",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x1nqk09",
+    "--bolerish-material-filter": "x1gkvbmm",
+    $$css: true
+  },
+  translucent: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xoh9gux",
+    "--bolerish-material-filter": "xhu24am",
     $$css: true
   },
   floating: {
-    kWkggS: "xssngo0 x1r7obb8",
-    k6WDB: "x1jh03n0",
-    kTahiY: "x1psyy34",
-    kEcs6k: "x11rvarm",
-    kO6drA: "x9yvj25",
-    kkTUmj: "x14hm74v",
+    "--bolerish-material-shadow": "xu02b4h",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x14p89z6",
+    "--bolerish-material-filter": "xunhrho",
     $$css: true
   }
 };
+var surfaceStyles = {
+  edge: styles.edge,
+  panel: [styles.material, styles.panel],
+  control: [styles.material, styles.control],
+  subtle: [styles.material, styles.subtle],
+  outline: [styles.material, styles.outline],
+  raised: [styles.material, styles.raised],
+  translucent: [styles.material, styles.translucent],
+  floating: [styles.material, styles.floating]
+};
 
 // src/menubar.tsx
 import { jsx } from "react/jsx-runtime";
-var styles = {
+var styles2 = {
   root: {
     kGNEyG: "x6s0dn4",
     kWkggS: "xcc0o6n",
@@ -125,7 +177,7 @@ function Menubar(t0) {
   }
   let t1;
   if ($[5] !== className || $[6] !== style || $[7] !== xstyle) {
-    t1 = mergeStyles(stylex.props(styles.root, surfaceStyles.edge, surfaceStyles.translucent, xstyle), className, style);
+    t1 = mergeStyles(stylex.props(styles2.root, surfaceStyles.edge, surfaceStyles.translucent, xstyle), className, style);
     $[5] = className;
     $[6] = style;
     $[7] = xstyle;
@@ -172,7 +224,7 @@ function MenubarTrigger(t0) {
   let t1;
   if ($[5] !== className || $[6] !== style || $[7] !== xstyle) {
     t1 = function getTriggerStyles2(state) {
-      return mergeStyles(stylex.props(styles.trigger, state.open && styles.triggerOpen, state.disabled && styles.triggerDisabled, xstyle), className, style);
+      return mergeStyles(stylex.props(styles2.trigger, state.open && styles2.triggerOpen, state.disabled && styles2.triggerDisabled, xstyle), className, style);
     };
     $[5] = className;
     $[6] = style;

package/dist/menubar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/menubar.tsx", "../src/styles/merge-styles.ts", "../src/styles/surface.ts"],
-  "sourcesContent": ["\"use client\";\n\nimport { c as _c } from \"react/compiler-runtime\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { colorVars, motionVars, radiusVars, sizeVars, spacingVars, typo } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\nimport { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from \"./dropdown-menu\";\nimport type { ControlLayoutStyles } from \"./styles/control-layout\";\nimport { mergeStyles } from \"./styles/merge-styles\";\nimport type { StyledProps } from \"./styles/merge-styles\";\nimport { surfaceStyles } from \"./styles/surface\";\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xcc0o6n\",\n    kVAM5u: \"x1kqtvf4\",\n    kaIpWk: \"x1p5vitp\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"x1al7nqq\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x7gjopr\",\n    kAzted: \"x116rqyj\",\n    kmVPX3: \"x7fjq2a\",\n    $$css: true\n  },\n  trigger: {\n    kysU6D: \"xjyslct\",\n    kWkggS: \"xjbqb8w\",\n    ksu8eU: \"xng3xce\",\n    kMzoRj: \"xc342km\",\n    kaIpWk: \"x1p5vitp\",\n    kMwMTN: \"x1t28c4i\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x1b1to7n\",\n    kGuDYH: \"x1lskvfa\",\n    k63SB2: \"xoop9yj\",\n    kZKoxP: \"x1dvwle6\",\n    kI3sdo: \"x1a2a7pz\",\n    kg3NbH: \"x5044ve\",\n    kIyJzY: \"xznvecg\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xrkjf8i\",\n    kGzVvX: \"xk9i4fa\",\n    kZs9gx: \"x768paa\",\n    kiEn40: \"x1p3hdyt\",\n    k7shQP: \"x9v5kkp\",\n    kPJHz1: \"x1k4h2j2\",\n    $$css: true\n  },\n  triggerOpen: {\n    kWkggS: \"xlbutab\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"xdmzwdx\",\n    kkrTdU: \"x1h6gzvc\",\n    kGzVvX: \"x1n5bzlp\",\n    $$css: true\n  }\n};\nexport function Menubar(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.root, surfaceStyles.edge, surfaceStyles.translucent, 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 = <MenubarPrimitive {...props} {...t1} />;\n    $[9] = props;\n    $[10] = t1;\n    $[11] = t2;\n  } else {\n    t2 = $[11];\n  }\n  return t2;\n}\nexport const MenubarMenu = MenuPrimitive.Root;\nexport function MenubarTrigger(t0) {\n  const $ = _c(16);\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 = function getTriggerStyles(state) {\n      return mergeStyles(stylex.props(styles.trigger, state.open && styles.triggerOpen, state.disabled && styles.triggerDisabled, xstyle), className, style);\n    };\n    $[5] = className;\n    $[6] = style;\n    $[7] = xstyle;\n    $[8] = t1;\n  } else {\n    t1 = $[8];\n  }\n  const getTriggerStyles = t1;\n  let t2;\n  let t3;\n  if ($[9] !== getTriggerStyles) {\n    t2 = state_0 => getTriggerStyles(state_0).className;\n    t3 = state_1 => getTriggerStyles(state_1).style;\n    $[9] = getTriggerStyles;\n    $[10] = t2;\n    $[11] = t3;\n  } else {\n    t2 = $[10];\n    t3 = $[11];\n  }\n  let t4;\n  if ($[12] !== props || $[13] !== t2 || $[14] !== t3) {\n    t4 = <MenuPrimitive.Trigger {...props} className={t2} style={t3} />;\n    $[12] = props;\n    $[13] = t2;\n    $[14] = t3;\n    $[15] = t4;\n  } else {\n    t4 = $[15];\n  }\n  return t4;\n}\nexport const MenubarContent = DropdownMenuContent;\nexport const MenubarItem = DropdownMenuItem;\nexport const MenubarCheckboxItem = DropdownMenuCheckboxItem;\nexport const MenubarRadioItem = DropdownMenuRadioItem;\nexport const MenubarGroup = DropdownMenuGroup;\nexport const MenubarRadioGroup = DropdownMenuRadioGroup;\nexport const MenubarLabel = DropdownMenuLabel;\nexport const MenubarSeparator = DropdownMenuSeparator;\nexport const MenubarShortcut = DropdownMenuShortcut;\nexport const MenubarSub = DropdownMenuSub;\nexport const MenubarSubTrigger = DropdownMenuSubTrigger;\nexport const MenubarSubContent = DropdownMenuSubContent;", "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}", "import { colorVars } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nexport const surfaceStyles = {\n  edge: {\n    kVAM5u: \"x1kqtvf4\",\n    kFGkbq: \"x1w1tqly\",\n    $$css: true\n  },\n  translucent: {\n    kWkggS: \"xcc0o6n x6pgpxb\",\n    k6WDB: \"x1jh03n0\",\n    kTahiY: \"x1rxs12l\",\n    kEcs6k: \"x11rvarm\",\n    kO6drA: \"x9yvj25\",\n    kkTUmj: \"x14hm74v\",\n    $$css: true\n  },\n  floating: {\n    kWkggS: \"xssngo0 x1r7obb8\",\n    k6WDB: \"x1jh03n0\",\n    kTahiY: \"x1psyy34\",\n    kEcs6k: \"x11rvarm\",\n    kO6drA: \"x9yvj25\",\n    kkTUmj: \"x14hm74v\",\n    $$css: true\n  }\n};"],
-  "mappings": "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",
-  "names": ["props", "getTriggerStyles"]
+  "sourcesContent": ["\"use client\";\n\nimport { c as _c } from \"react/compiler-runtime\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { colorVars, motionVars, radiusVars, sizeVars, spacingVars, typo } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\nimport { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from \"./dropdown-menu\";\nimport type { ControlLayoutStyles } from \"./styles/control-layout\";\nimport { mergeStyles } from \"./styles/merge-styles\";\nimport type { StyledProps } from \"./styles/merge-styles\";\nimport { surfaceStyles } from \"./styles/surface\";\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xcc0o6n\",\n    kVAM5u: \"x1kqtvf4\",\n    kaIpWk: \"x1p5vitp\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"x1al7nqq\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x7gjopr\",\n    kAzted: \"x116rqyj\",\n    kmVPX3: \"x7fjq2a\",\n    $$css: true\n  },\n  trigger: {\n    kysU6D: \"xjyslct\",\n    kWkggS: \"xjbqb8w\",\n    ksu8eU: \"xng3xce\",\n    kMzoRj: \"xc342km\",\n    kaIpWk: \"x1p5vitp\",\n    kMwMTN: \"x1t28c4i\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x1b1to7n\",\n    kGuDYH: \"x1lskvfa\",\n    k63SB2: \"xoop9yj\",\n    kZKoxP: \"x1dvwle6\",\n    kI3sdo: \"x1a2a7pz\",\n    kg3NbH: \"x5044ve\",\n    kIyJzY: \"xznvecg\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xrkjf8i\",\n    kGzVvX: \"xk9i4fa\",\n    kZs9gx: \"x768paa\",\n    kiEn40: \"x1p3hdyt\",\n    k7shQP: \"x9v5kkp\",\n    kPJHz1: \"x1k4h2j2\",\n    $$css: true\n  },\n  triggerOpen: {\n    kWkggS: \"xlbutab\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"xdmzwdx\",\n    kkrTdU: \"x1h6gzvc\",\n    kGzVvX: \"x1n5bzlp\",\n    $$css: true\n  }\n};\nexport function Menubar(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.root, surfaceStyles.edge, surfaceStyles.translucent, 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 = <MenubarPrimitive {...props} {...t1} />;\n    $[9] = props;\n    $[10] = t1;\n    $[11] = t2;\n  } else {\n    t2 = $[11];\n  }\n  return t2;\n}\nexport const MenubarMenu = MenuPrimitive.Root;\nexport function MenubarTrigger(t0) {\n  const $ = _c(16);\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 = function getTriggerStyles(state) {\n      return mergeStyles(stylex.props(styles.trigger, state.open && styles.triggerOpen, state.disabled && styles.triggerDisabled, xstyle), className, style);\n    };\n    $[5] = className;\n    $[6] = style;\n    $[7] = xstyle;\n    $[8] = t1;\n  } else {\n    t1 = $[8];\n  }\n  const getTriggerStyles = t1;\n  let t2;\n  let t3;\n  if ($[9] !== getTriggerStyles) {\n    t2 = state_0 => getTriggerStyles(state_0).className;\n    t3 = state_1 => getTriggerStyles(state_1).style;\n    $[9] = getTriggerStyles;\n    $[10] = t2;\n    $[11] = t3;\n  } else {\n    t2 = $[10];\n    t3 = $[11];\n  }\n  let t4;\n  if ($[12] !== props || $[13] !== t2 || $[14] !== t3) {\n    t4 = <MenuPrimitive.Trigger {...props} className={t2} style={t3} />;\n    $[12] = props;\n    $[13] = t2;\n    $[14] = t3;\n    $[15] = t4;\n  } else {\n    t4 = $[15];\n  }\n  return t4;\n}\nexport const MenubarContent = DropdownMenuContent;\nexport const MenubarItem = DropdownMenuItem;\nexport const MenubarCheckboxItem = DropdownMenuCheckboxItem;\nexport const MenubarRadioItem = DropdownMenuRadioItem;\nexport const MenubarGroup = DropdownMenuGroup;\nexport const MenubarRadioGroup = DropdownMenuRadioGroup;\nexport const MenubarLabel = DropdownMenuLabel;\nexport const MenubarSeparator = DropdownMenuSeparator;\nexport const MenubarShortcut = DropdownMenuShortcut;\nexport const MenubarSub = DropdownMenuSub;\nexport const MenubarSubTrigger = DropdownMenuSubTrigger;\nexport const MenubarSubContent = DropdownMenuSubContent;", "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}", "import { colorVars, shadowVars } from \"@bolerish/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nconst styles = {\n  edge: {\n    kVAM5u: \"x1kqtvf4\",\n    kFGkbq: \"x1w1tqly\",\n    $$css: true\n  },\n  material: {\n    \"--bolerish-material-shadow\": \"xvd6nka\",\n    kGVxlE: \"x16ifxj2 xpqbwuo\",\n    kWkggS: \"x1s4uome x1u5mdis\",\n    k6WDB: \"x1t853zo x1o5bnqd\",\n    kKwaWg: \"x18o3ruo xxit9r9\",\n    kTahiY: \"x1cg02ou\",\n    kEcs6k: \"x11rvarm\",\n    kWrjR8: \"x1ile18z\",\n    kfloDl: \"x1m3y3zz\",\n    kO6drA: \"x9yvj25\",\n    kkTUmj: \"x14hm74v\",\n    k11ilZ: \"xhobzj1\",\n    ktzNWN: \"xwaqzdf\",\n    $$css: true\n  },\n  panel: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"x8fe23t\",\n    \"--bolerish-material-filter\": \"x1n6mwez\",\n    $$css: true\n  },\n  control: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  subtle: {\n    \"--bolerish-material-color\": \"x1819ggx\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  outline: {\n    \"--bolerish-material-color\": \"x3m3fbl\",\n    \"--bolerish-material-opacity\": \"xg4j6g8\",\n    \"--bolerish-material-filter\": \"x1mpfm11\",\n    $$css: true\n  },\n  raised: {\n    \"--bolerish-material-shadow\": \"x1l9gcvt\",\n    \"--bolerish-material-color\": \"x1y5ilfp\",\n    \"--bolerish-material-opacity\": \"x1nqk09\",\n    \"--bolerish-material-filter\": \"x1gkvbmm\",\n    $$css: true\n  },\n  translucent: {\n    \"--bolerish-material-color\": \"x14zkn9l\",\n    \"--bolerish-material-opacity\": \"xoh9gux\",\n    \"--bolerish-material-filter\": \"xhu24am\",\n    $$css: true\n  },\n  floating: {\n    \"--bolerish-material-shadow\": \"xu02b4h\",\n    \"--bolerish-material-color\": \"x1y5ilfp\",\n    \"--bolerish-material-opacity\": \"x14p89z6\",\n    \"--bolerish-material-filter\": \"xunhrho\",\n    $$css: true\n  }\n};\nexport const surfaceStyles = {\n  edge: styles.edge,\n  panel: [styles.material, styles.panel],\n  control: [styles.material, styles.control],\n  subtle: [styles.material, styles.subtle],\n  outline: [styles.material, styles.outline],\n  raised: [styles.material, styles.raised],\n  translucent: [styles.material, styles.translucent],\n  floating: [styles.material, styles.floating]\n};"],
+  "mappings": ";;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAAW,wBAAwB;AAE5C,YAAY,YAAY;AAExB,SAAS,0BAA0B,qBAAqB,mBAAmB,kBAAkB,mBAAmB,wBAAwB,uBAAuB,uBAAuB,sBAAsB,iBAAiB,wBAAwB,8BAA8B;;;ACF5Q,SAAS,YAAY,MAAuC,WAAoB,OAGrF;AACA,MAAI,cAAc,UAAa,UAAU,OAAW,QAAO;AAC3D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,CAAC,KAAK,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,IACpE,OAAO,KAAK,SAAS,QAAQ;AAAA,MAC3B,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,IACL,IAAI;AAAA,EACN;AACF;;;ACjBA,IAAM,SAAS;AAAA,EACb,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,8BAA8B;AAAA,IAC9B,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,8BAA8B;AAAA,IAC9B,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,8BAA8B;AAAA,IAC9B,6BAA6B;AAAA,IAC7B,+BAA+B;AAAA,IAC/B,8BAA8B;AAAA,IAC9B,OAAO;AAAA,EACT;AACF;AACO,IAAM,gBAAgB;AAAA,EAC3B,MAAM,OAAO;AAAA,EACb,OAAO,CAAC,OAAO,UAAU,OAAO,KAAK;AAAA,EACrC,SAAS,CAAC,OAAO,UAAU,OAAO,OAAO;AAAA,EACzC,QAAQ,CAAC,OAAO,UAAU,OAAO,MAAM;AAAA,EACvC,SAAS,CAAC,OAAO,UAAU,OAAO,OAAO;AAAA,EACzC,QAAQ,CAAC,OAAO,UAAU,OAAO,MAAM;AAAA,EACvC,aAAa,CAAC,OAAO,UAAU,OAAO,WAAW;AAAA,EACjD,UAAU,CAAC,OAAO,UAAU,OAAO,QAAQ;AAC7C;;;AFqBS;AAtFT,IAAMA,UAAS;AAAA,EACb,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;AACO,SAAS,QAAQ,IAAI;AAC1B,QAAM,IAAI,GAAG,EAAE;AACf,MAAI;AACJ,MAAIC;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,EAAE,CAAC,MAAM,IAAI;AACf,KAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAGA;AAAA,IACL,IAAI;AACJ,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAIA;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AAAA,EACT,OAAO;AACL,gBAAY,EAAE,CAAC;AACf,IAAAA,SAAQ,EAAE,CAAC;AACX,YAAQ,EAAE,CAAC;AACX,aAAS,EAAE,CAAC;AAAA,EACd;AACA,MAAI;AACJ,MAAI,EAAE,CAAC,MAAM,aAAa,EAAE,CAAC,MAAM,SAAS,EAAE,CAAC,MAAM,QAAQ;AAC3D,SAAK,YAAmB,aAAMD,QAAO,MAAM,cAAc,MAAM,cAAc,aAAa,MAAM,GAAG,WAAW,KAAK;AACnH,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AAAA,EACT,OAAO;AACL,SAAK,EAAE,CAAC;AAAA,EACV;AACA,MAAI;AACJ,MAAI,EAAE,CAAC,MAAMC,UAAS,EAAE,EAAE,MAAM,IAAI;AAClC,SAAK,oBAAC,oBAAkB,GAAGA,QAAQ,GAAG,IAAI;AAC1C,MAAE,CAAC,IAAIA;AACP,MAAE,EAAE,IAAI;AACR,MAAE,EAAE,IAAI;AAAA,EACV,OAAO;AACL,SAAK,EAAE,EAAE;AAAA,EACX;AACA,SAAO;AACT;AACO,IAAM,cAAc,cAAc;AAClC,SAAS,eAAe,IAAI;AACjC,QAAM,IAAI,GAAG,EAAE;AACf,MAAI;AACJ,MAAIA;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,EAAE,CAAC,MAAM,IAAI;AACf,KAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAGA;AAAA,IACL,IAAI;AACJ,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAIA;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AAAA,EACT,OAAO;AACL,gBAAY,EAAE,CAAC;AACf,IAAAA,SAAQ,EAAE,CAAC;AACX,YAAQ,EAAE,CAAC;AACX,aAAS,EAAE,CAAC;AAAA,EACd;AACA,MAAI;AACJ,MAAI,EAAE,CAAC,MAAM,aAAa,EAAE,CAAC,MAAM,SAAS,EAAE,CAAC,MAAM,QAAQ;AAC3D,SAAK,SAASC,kBAAiB,OAAO;AACpC,aAAO,YAAmB,aAAMF,QAAO,SAAS,MAAM,QAAQA,QAAO,aAAa,MAAM,YAAYA,QAAO,iBAAiB,MAAM,GAAG,WAAW,KAAK;AAAA,IACvJ;AACA,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AACP,MAAE,CAAC,IAAI;AAAA,EACT,OAAO;AACL,SAAK,EAAE,CAAC;AAAA,EACV;AACA,QAAM,mBAAmB;AACzB,MAAI;AACJ,MAAI;AACJ,MAAI,EAAE,CAAC,MAAM,kBAAkB;AAC7B,SAAK,aAAW,iBAAiB,OAAO,EAAE;AAC1C,SAAK,aAAW,iBAAiB,OAAO,EAAE;AAC1C,MAAE,CAAC,IAAI;AACP,MAAE,EAAE,IAAI;AACR,MAAE,EAAE,IAAI;AAAA,EACV,OAAO;AACL,SAAK,EAAE,EAAE;AACT,SAAK,EAAE,EAAE;AAAA,EACX;AACA,MAAI;AACJ,MAAI,EAAE,EAAE,MAAMC,UAAS,EAAE,EAAE,MAAM,MAAM,EAAE,EAAE,MAAM,IAAI;AACnD,SAAK,oBAAC,cAAc,SAAd,EAAuB,GAAGA,QAAO,WAAW,IAAI,OAAO,IAAI;AACjE,MAAE,EAAE,IAAIA;AACR,MAAE,EAAE,IAAI;AACR,MAAE,EAAE,IAAI;AACR,MAAE,EAAE,IAAI;AAAA,EACV,OAAO;AACL,SAAK,EAAE,EAAE;AAAA,EACX;AACA,SAAO;AACT;AACO,IAAM,iBAAiB;AACvB,IAAM,cAAc;AACpB,IAAM,sBAAsB;AAC5B,IAAM,mBAAmB;AACzB,IAAM,eAAe;AACrB,IAAM,oBAAoB;AAC1B,IAAM,eAAe;AACrB,IAAM,mBAAmB;AACzB,IAAM,kBAAkB;AACxB,IAAM,aAAa;AACnB,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;",
+  "names": ["styles", "props", "getTriggerStyles"]
 }

package/dist/native-select.js

@@ -18,9 +18,88 @@ function mergeStyles(base, className, style) {
   };
 }
 
+// src/styles/surface.ts
+var styles = {
+  edge: {
+    kVAM5u: "x1kqtvf4",
+    kFGkbq: "x1w1tqly",
+    $$css: true
+  },
+  material: {
+    "--bolerish-material-shadow": "xvd6nka",
+    kGVxlE: "x16ifxj2 xpqbwuo",
+    kWkggS: "x1s4uome x1u5mdis",
+    k6WDB: "x1t853zo x1o5bnqd",
+    kKwaWg: "x18o3ruo xxit9r9",
+    kTahiY: "x1cg02ou",
+    kEcs6k: "x11rvarm",
+    kWrjR8: "x1ile18z",
+    kfloDl: "x1m3y3zz",
+    kO6drA: "x9yvj25",
+    kkTUmj: "x14hm74v",
+    k11ilZ: "xhobzj1",
+    ktzNWN: "xwaqzdf",
+    $$css: true
+  },
+  panel: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "x8fe23t",
+    "--bolerish-material-filter": "x1n6mwez",
+    $$css: true
+  },
+  control: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  subtle: {
+    "--bolerish-material-color": "x1819ggx",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  outline: {
+    "--bolerish-material-color": "x3m3fbl",
+    "--bolerish-material-opacity": "xg4j6g8",
+    "--bolerish-material-filter": "x1mpfm11",
+    $$css: true
+  },
+  raised: {
+    "--bolerish-material-shadow": "x1l9gcvt",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x1nqk09",
+    "--bolerish-material-filter": "x1gkvbmm",
+    $$css: true
+  },
+  translucent: {
+    "--bolerish-material-color": "x14zkn9l",
+    "--bolerish-material-opacity": "xoh9gux",
+    "--bolerish-material-filter": "xhu24am",
+    $$css: true
+  },
+  floating: {
+    "--bolerish-material-shadow": "xu02b4h",
+    "--bolerish-material-color": "x1y5ilfp",
+    "--bolerish-material-opacity": "x14p89z6",
+    "--bolerish-material-filter": "xunhrho",
+    $$css: true
+  }
+};
+var surfaceStyles = {
+  edge: styles.edge,
+  panel: [styles.material, styles.panel],
+  control: [styles.material, styles.control],
+  subtle: [styles.material, styles.subtle],
+  outline: [styles.material, styles.outline],
+  raised: [styles.material, styles.raised],
+  translucent: [styles.material, styles.translucent],
+  floating: [styles.material, styles.floating]
+};
+
 // src/native-select.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var styles = {
+var styles2 = {
   root: {
     k1xSpc: "x3nfvp2",
     kVAEAm: "x1n2onr6",
@@ -69,7 +148,7 @@ var sizeStyles = {
   }
 };
 function NativeSelect(t0) {
-  const $ = _c(21);
+  const $ = _c(22);
   let children;
   let className;
   let props2;
@@ -103,7 +182,7 @@ function NativeSelect(t0) {
   const size = t1 === void 0 ? "md" : t1;
   let t2;
   if ($[7] !== className || $[8] !== style || $[9] !== xstyle) {
-    t2 = mergeStyles(stylex.props(styles.root, xstyle), className, style);
+    t2 = mergeStyles(stylex.props(styles2.root, xstyle), className, style);
     $[7] = className;
     $[8] = style;
     $[9] = xstyle;
@@ -112,41 +191,42 @@ function NativeSelect(t0) {
     t2 = $[10];
   }
   let t3;
-  if ($[11] !== size) {
-    t3 = stylex.props(styles.select, sizeStyles[size]);
-    $[11] = size;
-    $[12] = t3;
+  if ($[11] !== props2.disabled || $[12] !== size) {
+    t3 = stylex.props(styles2.select, !props2.disabled && surfaceStyles.control, sizeStyles[size]);
+    $[11] = props2.disabled;
+    $[12] = size;
+    $[13] = t3;
   } else {
-    t3 = $[12];
+    t3 = $[13];
   }
   let t4;
-  if ($[13] !== children || $[14] !== props2 || $[15] !== t3) {
+  if ($[14] !== children || $[15] !== props2 || $[16] !== t3) {
     t4 = /* @__PURE__ */ jsx("select", { ...props2, ...t3, children });
-    $[13] = children;
-    $[14] = props2;
-    $[15] = t3;
-    $[16] = t4;
+    $[14] = children;
+    $[15] = props2;
+    $[16] = t3;
+    $[17] = t4;
   } else {
-    t4 = $[16];
+    t4 = $[17];
   }
   let t5;
-  if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t5 = /* @__PURE__ */ jsx(CaretDownIcon, { "aria-hidden": "true", className: "xj9e3ow x47corl x10l6tqk xjord3i xwa60dl x1cb1t30" });
-    $[17] = t5;
+    $[18] = t5;
   } else {
-    t5 = $[17];
+    t5 = $[18];
   }
   let t6;
-  if ($[18] !== t2 || $[19] !== t4) {
+  if ($[19] !== t2 || $[20] !== t4) {
     t6 = /* @__PURE__ */ jsxs("span", { ...t2, children: [
       t4,
       t5
     ] });
-    $[18] = t2;
-    $[19] = t4;
-    $[20] = t6;
+    $[19] = t2;
+    $[20] = t4;
+    $[21] = t6;
   } else {
-    t6 = $[20];
+    t6 = $[21];
   }
   return t6;
 }