@rafal.lemieszewski/tide-ui 0.87.6 → 0.87.8

package/dist/es/components/product/attributes-list.js

@@ -6,24 +6,24 @@ import { Icon as N } from "../fundamental/icon.js";
 import { ExternalLink as I } from "lucide-react";
 const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    children: t,
-    size: r = "s",
-    showHiddenLabel: a = "More details",
+    className: a,
+    children: r,
+    size: t = "s",
+    showHiddenLabel: o = "More details",
     hideLabel: d = "Less details",
     defaultShowHidden: f = !1,
     labelWidth: p,
     ...u
   }, l) => {
-    const [s, b] = e.useState(f), y = e.useMemo(() => e.Children.toArray(t).some((m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" ? m.props.hidden : !1), [t]), g = e.useMemo(() => e.Children.map(t, (m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" && m.props.hidden && !s ? null : m), [t, s]), c = typeof p == "number" ? `${p}px` : p;
-    return /* @__PURE__ */ n(h.Provider, { value: r, children: /* @__PURE__ */ x(
+    const [s, b] = e.useState(f), y = e.useMemo(() => e.Children.toArray(r).some((m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" ? m.props.hidden : !1), [r]), g = e.useMemo(() => e.Children.map(r, (m) => e.isValidElement(m) && (m.type?.displayName || "") === "AttributesItem" && m.props.hidden && !s ? null : m), [r, s]), c = typeof p == "number" ? `${p}px` : p;
+    return /* @__PURE__ */ n(h.Provider, { value: t, children: /* @__PURE__ */ x(
       "div",
       {
         ref: l,
         className: i(
           "grid",
-          r === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
-          o
+          t === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
+          a
         ),
         style: {
           gridTemplateColumns: `${c || "auto"} 1fr`,
@@ -39,13 +39,13 @@ const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
               onClick: () => b(!s),
               "aria-expanded": s,
               className: i(
-                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
-                r === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
-                r === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
+                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
+                t === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
+                t === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
               children: [
-                s ? d : a,
+                s ? d : o,
                 /* @__PURE__ */ n(
                   N,
                   {
@@ -69,18 +69,18 @@ const h = e.createContext("s"), P = /* @__PURE__ */ e.forwardRef(
 P.displayName = "AttributesList";
 const H = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, ...t }, r) => /* @__PURE__ */ n(
+    ({ className: a, ...r }, t) => /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: t,
         role: "separator",
         "aria-hidden": "true",
         className: i(
           "h-px bg-[var(--color-border-primary-subtle)] my-[var(--space-s)]",
-          o
+          a
         ),
         style: { gridColumn: "1 / -1" },
-        ...t
+        ...r
       }
     )
   )
@@ -88,15 +88,15 @@ const H = /* @__PURE__ */ e.memo(
 H.displayName = "AttributesSeparator";
 const M = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    label: t,
-    children: r,
-    showHiddenLabel: a = "More details",
+    className: a,
+    label: r,
+    children: t,
+    showHiddenLabel: o = "More details",
     hideLabel: d = "Less details",
     defaultShowHidden: f = !1,
     ...p
   }, u) => {
-    const l = e.useContext(h), [s, b] = e.useState(f), y = e.useMemo(() => ((m) => e.Children.toArray(m).some((v) => !!(e.isValidElement(v) && (v.type?.displayName || "") === "AttributesItem" && v.props.hidden)))(r), [r]), g = e.useMemo(() => e.Children.map(r, (c) => e.isValidElement(c) && (c.type?.displayName || "") === "AttributesItem" && c.props.hidden && !s ? null : c), [r, s]);
+    const l = e.useContext(h), [s, b] = e.useState(f), y = e.useMemo(() => ((m) => e.Children.toArray(m).some((v) => !!(e.isValidElement(v) && (v.type?.displayName || "") === "AttributesItem" && v.props.hidden)))(t), [t]), g = e.useMemo(() => e.Children.map(t, (c) => e.isValidElement(c) && (c.type?.displayName || "") === "AttributesItem" && c.props.hidden && !s ? null : c), [t, s]);
     return /* @__PURE__ */ x(
       "div",
       {
@@ -104,7 +104,7 @@ const M = /* @__PURE__ */ e.forwardRef(
         className: i(
           "grid",
           l === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
-          o
+          a
         ),
         style: {
           gridColumn: "1 / -1",
@@ -113,7 +113,7 @@ const M = /* @__PURE__ */ e.forwardRef(
         },
         ...p,
         children: [
-          t && /* @__PURE__ */ n(
+          r && /* @__PURE__ */ n(
             "h3",
             {
               className: i(
@@ -122,7 +122,7 @@ const M = /* @__PURE__ */ e.forwardRef(
                 l === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
-              children: t
+              children: r
             }
           ),
           g,
@@ -132,13 +132,13 @@ const M = /* @__PURE__ */ e.forwardRef(
               onClick: () => b(!s),
               "aria-expanded": s,
               className: i(
-                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
+                "flex items-center text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] cursor-pointer mt-[var(--space-s)] bg-transparent border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
                 l === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
                 l === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
               ),
               style: { gridColumn: "1 / -1" },
               children: [
-                s ? d : a,
+                s ? d : o,
                 /* @__PURE__ */ n(
                   N,
                   {
@@ -162,23 +162,23 @@ const M = /* @__PURE__ */ e.forwardRef(
 M.displayName = "AttributesGroup";
 const S = /* @__PURE__ */ e.forwardRef(
   ({
-    className: o,
-    children: t,
-    collapsible: r = !1,
-    defaultOpen: a,
+    className: a,
+    children: r,
+    collapsible: t = !1,
+    defaultOpen: o,
     open: d,
     onOpenChange: f,
     hidden: p,
     style: u,
     ...l
-  }, s) => r ? /* @__PURE__ */ n(
+  }, s) => t ? /* @__PURE__ */ n(
     A,
     {
       ref: s,
-      defaultOpen: a,
+      defaultOpen: o,
       open: d,
       onOpenChange: f,
-      className: i("w-full group grid", o),
+      className: i("w-full group grid", a),
       style: {
         gridColumn: "1 / -1",
         gridTemplateColumns: "subgrid",
@@ -187,26 +187,26 @@ const S = /* @__PURE__ */ e.forwardRef(
       },
       "data-hidden": p,
       ...l,
-      children: t
+      children: r
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
       ref: s,
-      className: i(o),
+      className: i(a),
       style: { display: "contents", ...u },
       "data-hidden": p,
       ...l,
-      children: t
+      children: r
     }
   )
 );
 S.displayName = "AttributesItem";
 const V = /* @__PURE__ */ e.forwardRef(
-  ({ className: o, children: t, asCollapsibleTrigger: r, externalLink: a, style: d, ...f }, p) => {
+  ({ className: a, children: r, asCollapsibleTrigger: t, externalLink: o, style: d, ...f }, p) => {
     const u = e.useContext(h), l = e.useMemo(() => {
-      if (!a) return t;
-      const b = e.Children.toArray(t);
+      if (!o) return r;
+      const b = e.Children.toArray(r);
       if (b.length >= 2) {
         const y = b[0], g = b[1], c = b.slice(2);
         return [
@@ -216,17 +216,17 @@ const V = /* @__PURE__ */ e.forwardRef(
             /* @__PURE__ */ x(
               "a",
               {
-                href: a.href,
+                href: o.href,
                 className: i(
-                  "text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] inline-flex items-center no-underline shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
+                  "text-[var(--color-text-brand-bold)] hover:text-[var(--color-text-brand-bold-hovered)] inline-flex items-center no-underline shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-[var(--border-radius-s)]",
                   u === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
                   u === "s" ? "[&]:text-body-sm" : "[&]:text-body-xsm"
                 ),
                 target: "_blank",
                 rel: "noopener noreferrer",
-                "aria-label": `${a.label} (opens in new tab)`,
+                "aria-label": `${o.label} (opens in new tab)`,
                 children: [
-                  a.label,
+                  o.label,
                   /* @__PURE__ */ n(N, { name: I, size: "s", "aria-hidden": "true" })
                 ]
               }
@@ -235,15 +235,15 @@ const V = /* @__PURE__ */ e.forwardRef(
           ...c
         ];
       }
-      return t;
-    }, [t, a, u]), s = /* @__PURE__ */ n(
+      return r;
+    }, [r, o, u]), s = /* @__PURE__ */ n(
       "div",
       {
-        ref: r ? void 0 : p,
+        ref: t ? void 0 : p,
         className: i(
           "grid items-center",
-          r && "cursor-pointer hover:bg-[var(--color-surface-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 transition-colors rounded-s px-[var(--space-s)] py-[var(--space-xs)] -mx-[var(--space-s)]",
-          o
+          t && "cursor-pointer hover:bg-[var(--color-surface-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 transition-colors rounded-[var(--border-radius-s)] px-[var(--space-s)] py-[var(--space-xs)] -mx-[var(--space-s)]",
+          a
         ),
         style: {
           gridColumn: "1 / -1",
@@ -255,25 +255,25 @@ const V = /* @__PURE__ */ e.forwardRef(
         children: l
       }
     );
-    return r ? /* @__PURE__ */ n(w, { asChild: !0, hideIcon: !0, children: s }) : s;
+    return t ? /* @__PURE__ */ n(w, { asChild: !0, hideIcon: !0, children: s }) : s;
   }
 );
 V.displayName = "AttributesRow";
 const k = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, children: t, ...r }, a) => {
+    ({ className: a, children: r, ...t }, o) => {
       const d = e.useContext(h);
       return /* @__PURE__ */ n(
         "div",
         {
-          ref: a,
+          ref: o,
           className: i(
             "text-[var(--color-text-secondary)] [[data-hidden='true']_&]:text-[var(--color-text-tertiary)] shrink-0",
             d === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm",
-            o
+            a
           ),
-          ...r,
-          children: t
+          ...t,
+          children: r
         }
       );
     }
@@ -282,49 +282,49 @@ const k = /* @__PURE__ */ e.memo(
 k.displayName = "AttributesLabel";
 const z = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, children: t, ...r }, a) => {
+    ({ className: a, children: r, ...t }, o) => {
       const d = e.useContext(h);
       return /* @__PURE__ */ n(
         "div",
         {
-          ref: a,
+          ref: o,
           className: i(
             "text-[var(--color-text-primary)] [[data-hidden='true']_&]:text-[var(--color-text-tertiary)] flex items-center",
             d === "s" ? "gap-[var(--space-s)]" : "gap-[var(--space-xs)]",
             d === "s" ? "[&]:text-body-sm" : "[&]:text-body-xsm",
-            o
+            a
           ),
-          ...r,
-          children: t
+          ...t,
+          children: r
         }
       );
     }
   )
 );
 z.displayName = "AttributesValue";
-const G = /* @__PURE__ */ e.forwardRef(({ className: o, children: t, style: r, ...a }, d) => /* @__PURE__ */ n(
+const G = /* @__PURE__ */ e.forwardRef(({ className: a, children: r, style: t, ...o }, d) => /* @__PURE__ */ n(
   R,
   {
     ref: d,
     className: i(
       "pt-[var(--space-s)] pb-[var(--space-s)]",
-      o
+      a
     ),
-    style: { gridColumn: "1 / -1", ...r },
-    ...a,
-    children: t
+    style: { gridColumn: "1 / -1", ...t },
+    ...o,
+    children: r
   }
 ));
 G.displayName = "AttributesContent";
 const E = /* @__PURE__ */ e.memo(
   /* @__PURE__ */ e.forwardRef(
-    ({ className: o, ...t }, r) => /* @__PURE__ */ n(
+    ({ className: a, ...r }, t) => /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: t,
         "aria-hidden": "true",
-        className: i("shrink-0 -ml-[4px]", o),
-        ...t,
+        className: i("shrink-0 -ml-[4px]", a),
+        ...r,
         children: /* @__PURE__ */ n(
           N,
           {