@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

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

@@ -0,0 +1,351 @@
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import * as e from "react";
+import { cn as i } from "../../lib/utils.js";
+import { Collapsible as A, CollapsibleTrigger as w, CollapsibleContent as R } from "../fundamental/collapsible.js";
+import { Icon as N } from "../fundamental/icon.js";
+const h = e.createContext("s"), I = /* @__PURE__ */ e.forwardRef(
+  ({
+    className: a,
+    children: t,
+    size: r = "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(
+      "div",
+      {
+        ref: l,
+        className: i(
+          "grid",
+          r === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
+          a
+        ),
+        style: {
+          gridTemplateColumns: `${c || "auto"} 1fr`,
+          columnGap: "var(--space-m)",
+          ...u.style || {}
+        },
+        ...u,
+        children: [
+          g,
+          y && /* @__PURE__ */ x(
+            "button",
+            {
+              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"
+              ),
+              style: { gridColumn: "1 / -1" },
+              children: [
+                s ? d : o,
+                /* @__PURE__ */ n(
+                  N,
+                  {
+                    name: "chevron-down",
+                    size: "s",
+                    "aria-hidden": "true",
+                    className: i(
+                      "transition-transform",
+                      s && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+I.displayName = "AttributesList";
+const P = /* @__PURE__ */ e.memo(
+  /* @__PURE__ */ e.forwardRef(
+    ({ className: a, ...t }, r) => /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        role: "separator",
+        "aria-hidden": "true",
+        className: i(
+          "h-px bg-[var(--color-border-primary-subtle)] my-[var(--space-s)]",
+          a
+        ),
+        style: { gridColumn: "1 / -1" },
+        ...t
+      }
+    )
+  )
+);
+P.displayName = "AttributesSeparator";
+const H = /* @__PURE__ */ e.forwardRef(
+  ({
+    className: a,
+    label: t,
+    children: r,
+    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]);
+    return /* @__PURE__ */ x(
+      "div",
+      {
+        ref: u,
+        className: i(
+          "grid",
+          l === "s" ? "gap-y-[12px]" : "gap-y-[8px]",
+          a
+        ),
+        style: {
+          gridColumn: "1 / -1",
+          gridTemplateColumns: "subgrid",
+          columnGap: "var(--space-m)"
+        },
+        ...p,
+        children: [
+          t && /* @__PURE__ */ n(
+            "h3",
+            {
+              className: i(
+                "text-[var(--color-text-tertiary)]",
+                l === "s" ? "mb-[6px]" : "mb-[4px]",
+                l === "s" ? "[&]:text-body-medium-sm" : "[&]:text-body-medium-xsm"
+              ),
+              style: { gridColumn: "1 / -1" },
+              children: t
+            }
+          ),
+          g,
+          y && /* @__PURE__ */ x(
+            "button",
+            {
+              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",
+                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 : o,
+                /* @__PURE__ */ n(
+                  N,
+                  {
+                    name: "chevron-down",
+                    size: "s",
+                    "aria-hidden": "true",
+                    className: i(
+                      "transition-transform",
+                      s && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "AttributesGroup";
+const M = /* @__PURE__ */ e.forwardRef(
+  ({
+    className: a,
+    children: t,
+    collapsible: r = !1,
+    defaultOpen: o,
+    open: d,
+    onOpenChange: f,
+    hidden: p,
+    style: u,
+    ...l
+  }, s) => r ? /* @__PURE__ */ n(
+    A,
+    {
+      ref: s,
+      defaultOpen: o,
+      open: d,
+      onOpenChange: f,
+      className: i("w-full group grid", a),
+      style: {
+        gridColumn: "1 / -1",
+        gridTemplateColumns: "subgrid",
+        columnGap: "var(--space-m)",
+        ...u
+      },
+      "data-hidden": p,
+      ...l,
+      children: t
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      ref: s,
+      className: i(a),
+      style: { display: "contents", ...u },
+      "data-hidden": p,
+      ...l,
+      children: t
+    }
+  )
+);
+M.displayName = "AttributesItem";
+const S = /* @__PURE__ */ e.forwardRef(
+  ({ className: a, children: t, asCollapsibleTrigger: r, externalLink: o, style: d, ...f }, p) => {
+    const u = e.useContext(h), l = e.useMemo(() => {
+      if (!o) return t;
+      const b = e.Children.toArray(t);
+      if (b.length >= 2) {
+        const y = b[0], g = b[1], c = b.slice(2);
+        return [
+          y,
+          /* @__PURE__ */ x("div", { className: "flex items-center justify-between gap-[var(--space-m)]", style: { gridColumn: "2" }, children: [
+            g,
+            /* @__PURE__ */ x(
+              "a",
+              {
+                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",
+                  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": `${o.label} (opens in new tab)`,
+                children: [
+                  o.label,
+                  /* @__PURE__ */ n(N, { name: "external-link", size: "s", "aria-hidden": "true" })
+                ]
+              }
+            )
+          ] }, "value-with-link"),
+          ...c
+        ];
+      }
+      return t;
+    }, [t, o, u]), s = /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r ? 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)]",
+          a
+        ),
+        style: {
+          gridColumn: "1 / -1",
+          gridTemplateColumns: "subgrid",
+          columnGap: "var(--space-m)",
+          ...d
+        },
+        ...f,
+        children: l
+      }
+    );
+    return r ? /* @__PURE__ */ n(w, { asChild: !0, hideIcon: !0, children: s }) : s;
+  }
+);
+S.displayName = "AttributesRow";
+const V = /* @__PURE__ */ e.memo(
+  /* @__PURE__ */ e.forwardRef(
+    ({ className: a, children: t, ...r }, o) => {
+      const d = e.useContext(h);
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          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",
+            a
+          ),
+          ...r,
+          children: t
+        }
+      );
+    }
+  )
+);
+V.displayName = "AttributesLabel";
+const k = /* @__PURE__ */ e.memo(
+  /* @__PURE__ */ e.forwardRef(
+    ({ className: a, children: t, ...r }, o) => {
+      const d = e.useContext(h);
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          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",
+            a
+          ),
+          ...r,
+          children: t
+        }
+      );
+    }
+  )
+);
+k.displayName = "AttributesValue";
+const z = /* @__PURE__ */ e.forwardRef(({ className: a, children: t, style: r, ...o }, d) => /* @__PURE__ */ n(
+  R,
+  {
+    ref: d,
+    className: i(
+      "pt-[var(--space-s)] pb-[var(--space-s)]",
+      a
+    ),
+    style: { gridColumn: "1 / -1", ...r },
+    ...o,
+    children: t
+  }
+));
+z.displayName = "AttributesContent";
+const G = /* @__PURE__ */ e.memo(
+  /* @__PURE__ */ e.forwardRef(
+    ({ className: a, ...t }, r) => /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        "aria-hidden": "true",
+        className: i("shrink-0 -ml-[4px]", a),
+        ...t,
+        children: /* @__PURE__ */ n(
+          N,
+          {
+            name: "chevron-down",
+            size: "s",
+            color: "tertiary",
+            className: "transition-transform [.group[data-state=open]_&]:rotate-180"
+          }
+        )
+      }
+    )
+  )
+);
+G.displayName = "AttributesChevron";
+export {
+  G as AttributesChevron,
+  z as AttributesContent,
+  H as AttributesGroup,
+  M as AttributesItem,
+  V as AttributesLabel,
+  I as AttributesList,
+  S as AttributesRow,
+  P as AttributesSeparator,
+  k as AttributesValue
+};