@theroutingcompany/components 0.0.152-alpha.2 → 0.0.153-alpha.0

package/dist/trc-components.es.js

@@ -15456,7 +15456,8 @@ const Ed = {
     color: ${f.color_deprecated_fill_inverse_hover};
   }
 
-  &[data-state~='pressed'] {
+  &[data-state~='pressed'],
+  &[data-active='true'] {
     background: ${f.color_deprecated_fill_primary_pressed};
   }
 
@@ -15534,25 +15535,29 @@ const Ed = {
       autoFocus: c,
       children: d,
       style: p = {},
-      ...h
-    } = e, v = Xr(), g = u ?? v, { buttonProps: b, isPressed: y } = Qn(
+      as: h,
+      active: v,
+      ...g
+    } = e, b = Xr(), y = u ?? b, { buttonProps: D, isPressed: E } = Qn(
       {
         onPress: s ?? l,
-        isDisabled: g,
+        isDisabled: y,
         autoFocus: c
       },
       r
-    ), { isFocusVisible: D, focusProps: E } = ga({ autoFocus: c }), x = Xb({ isFocusVisible: D, isPressed: y }), P = xR[i], w = R1[a], S = Ed[o], k = Re(E, h, b, {
-      "data-state": x
+    ), { isFocusVisible: x, focusProps: P } = ga({ autoFocus: c }), w = Xb({ isFocusVisible: x, isPressed: E }), S = xR[i], k = R1[a], R = Ed[o], T = Re(P, g, D, {
+      "data-state": w,
+      "data-active": v ? "true" : "false"
     });
     return /* @__PURE__ */ m(
-      P,
+      S,
       {
         ref: r,
-        ...k,
+        ...T,
+        as: h,
         style: {
-          "--icon-button-size": S,
-          "--icon-button-border-radius": w,
+          "--icon-button-size": R,
+          "--icon-button-border-radius": k,
           ...p
         },
         children: /* @__PURE__ */ m(dl, { label: n, children: d })
@@ -18616,7 +18621,7 @@ const II = mt`
   line-height: ${f.line_height_deprecated_133};
   font-family: ${f.font_family_pingo};
   max-width: ${f.sizing_1000};
-  z-index: 30;
+  z-index: 2100;
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 
@@ -30328,25 +30333,35 @@ const f0 = H.createContext({
   position: relative;
   width: inherit;
 `, ci = Me((e, t) => {
-  const [r, n] = re(!1), [o, i] = re(null), a = yn(t);
+  const [r, n] = re(!1), [o, i] = re(null), a = yn(t), u = e.isOpen !== void 0, l = u ? e.isOpen ?? !1 : r, s = ne(
+    (c) => {
+      var d;
+      if (u) {
+        const p = typeof c == "function" ? c(e.isOpen ?? !1) : c;
+        (d = e.onOpenChange) == null || d.call(e, p);
+      } else
+        n(c);
+    },
+    [u, e]
+  );
   return ue(() => {
-    const u = document.getElementById(d0);
-    function l(s) {
-      const c = s.target;
-      a.current && !a.current.contains(c) && !(u != null && u.contains(c)) && n(!1);
+    const c = document.getElementById(d0);
+    function d(p) {
+      const h = p.target;
+      a.current && !a.current.contains(h) && !(c != null && c.contains(h)) && s(!1);
     }
-    return document.addEventListener("mousedown", l), () => {
-      document.removeEventListener("mousedown", l);
+    return document.addEventListener("mousedown", d), () => {
+      document.removeEventListener("mousedown", d);
     };
-  }, [a]), /* @__PURE__ */ m(
+  }, [a, s]), /* @__PURE__ */ m(
     f0.Provider,
     {
       value: {
         menuRef: a,
         triggerRef: o,
         setTriggerRef: i,
-        open: r,
-        setOpen: n,
+        open: l,
+        setOpen: s,
         direction: e.direction ?? "Down"
         /* Down */
       },