hasting-swatchcart-module 0.0.2 → 0.0.3

package/dist/src/shared/constants/selectedMaterials.js

@@ -0,0 +1,4 @@
+const o = 5;
+export {
+  o as MAX_SLOTS
+};

package/dist/src/shared/types/activeTab.js

@@ -0,0 +1,7 @@
+const t = {
+  SWATCH: "swatch",
+  CART: "cart"
+};
+export {
+  t as EActiveTab
+};

package/dist/src/shared/ui/Checkbox/Checkbox.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Checkbox as t, CheckboxIndicator as a } from "../../../../node_modules/@radix-ui/react-checkbox/dist/index.js";
+import { cn as o } from "../../utils/cn.js";
+import c from "../../../../node_modules/lucide-react/dist/esm/icons/check.js";
+function l({
+  className: r,
+  ...i
+}) {
+  return /* @__PURE__ */ e(
+    t,
+    {
+      "data-slot": "checkbox",
+      className: o(
+        "bg-white peer border-input dark:bg-input/30 data-[state=checked]:bg-black data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-black data-[state=checked]:border-black focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        r
+      ),
+      ...i,
+      children: /* @__PURE__ */ e(
+        a,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ e(c, { className: "size-5" })
+        }
+      )
+    }
+  );
+}
+export {
+  l as Checkbox
+};

package/dist/src/shared/ui/CustomButton/CustomButton.js

@@ -0,0 +1,16 @@
+import { jsx as s } from "react/jsx-runtime";
+const c = ({
+  children: t,
+  disabled: o,
+  ...e
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    className: `w-full bg-[var(--main-accent-color)] text-white py-3 rounded-full font-bold transition-colors duration-300 ${o ? "bg-gray-400 text-gray-200 cursor-not-allowed opacity-70" : "cursor-pointer hover:opacity-90"}`,
+    ...e,
+    children: t
+  }
+);
+export {
+  c as CustomButton
+};

package/dist/src/shared/ui/CustomSidebar/CustomSidebar.js

@@ -0,0 +1,59 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as u, useLayoutEffect as v, useEffect as l } from "react";
+import { createPortal as y } from "react-dom";
+import { clsx as w } from "../../../../node_modules/clsx/dist/clsx.js";
+import r from "./CustomSidebar.module.scss.js";
+import { cn as b } from "../../utils/cn.js";
+const k = ({
+  children: d,
+  isOpen: e,
+  setIsOpen: a
+}) => {
+  const c = u(null), f = u(null), n = () => a(!1);
+  return v(() => {
+    e && typeof document < "u" && (f.current = document.activeElement);
+  }, [e]), l(() => {
+    e ? c.current?.focus() : f.current?.focus?.();
+  }, [e]), l(() => {
+    if (!e) return;
+    const o = (t) => {
+      t.key === "Escape" && n();
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [e]), l(() => {
+    if (!e) return;
+    const o = document.documentElement, t = document.body, m = o.style.overflow, i = t.style.overflow;
+    return o.style.overflow = "hidden", t.style.overflow = "hidden", () => {
+      o.style.overflow = m, t.style.overflow = i;
+    };
+  }, [e]), e ? y(
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: w(r.overlay),
+        onMouseDown: n,
+        onTouchStart: n,
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: c,
+            tabIndex: -1,
+            className: b(
+              r.panel,
+              r.right,
+              e ? r.enter : r.exit,
+              "bg-[var(--sidebar-bg)]"
+            ),
+            onMouseDown: (o) => o.stopPropagation(),
+            onTouchStart: (o) => o.stopPropagation(),
+            children: d
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  k as default
+};

package/dist/src/shared/ui/CustomSidebar/CustomSidebar.module.scss.js

@@ -0,0 +1,13 @@
+const e = "_overlay_18vc6_1", t = "_panel_18vc6_10", _ = "_enter_18vc6_28", n = "_exit_18vc6_32", c = {
+  overlay: e,
+  panel: t,
+  enter: _,
+  exit: n
+};
+export {
+  c as default,
+  _ as enter,
+  n as exit,
+  e as overlay,
+  t as panel
+};

package/dist/src/shared/ui/Dialog/Dialog.js

@@ -0,0 +1,81 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { Root as f, Portal as g, Content as r, Close as u, Title as d, Overlay as c, Description as m } from "../../../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { cn as s } from "../../utils/cn.js";
+import y from "../../../../node_modules/lucide-react/dist/esm/icons/x.js";
+const k = f, N = g, p = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  c,
+  {
+    ref: t,
+    className: s(
+      "fixed inset-0 z-10000 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      a
+    ),
+    ...e,
+    onClick: (i) => i.stopPropagation()
+  }
+));
+p.displayName = c.displayName;
+const x = l.forwardRef(({ className: a, children: e, ...t }, i) => /* @__PURE__ */ n(N, { container: document.querySelector(".root-app"), children: [
+  /* @__PURE__ */ o(p, {}),
+  /* @__PURE__ */ n(
+    r,
+    {
+      ref: i,
+      className: s(
+        "z-10001 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] w-full max-w-[calc(100%-2rem)] max-h-[80vh] translate-x-[-50%] translate-y-[-50%] duration-200 overflow-y-auto",
+        a
+      ),
+      ...t,
+      children: [
+        e,
+        /* @__PURE__ */ n(u, { className: "absolute right-4 top-4 cursor-pointer rounded-full bg-gray-200 transition-background hover:bg-gray-300 disabled:pointer-events-none duration-200 p-2", children: [
+          /* @__PURE__ */ o(y, { className: "h-8 w-8" }),
+          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+x.displayName = r.displayName;
+const h = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s("flex flex-col space-y-1.5 text-left", a),
+    ...e
+  }
+);
+h.displayName = "DialogHeader";
+const D = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  d,
+  {
+    ref: t,
+    className: s(
+      "text-3xl font-semibold leading-none tracking-tight",
+      a
+    ),
+    ...e
+  }
+));
+D.displayName = d.displayName;
+const b = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  m,
+  {
+    ref: t,
+    className: s("text-muted-foreground", a),
+    ...e
+  }
+));
+b.displayName = m.displayName;
+export {
+  k as Dialog,
+  x as DialogContent,
+  b as DialogDescription,
+  h as DialogHeader,
+  p as DialogOverlay,
+  N as DialogPortal,
+  D as DialogTitle
+};

package/dist/src/shared/ui/Label/Label.js

@@ -0,0 +1,27 @@
+import { jsx as a } from "react/jsx-runtime";
+const s = ({ text: o, isActive: r = !1, onClick: n }) => {
+  const t = () => {
+    n && n();
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: t,
+      onKeyDown: (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
+      },
+      className: `
+        flex justify-center items-center max-w-max px-4 py-2 capitalize rounded-full
+        font-medium text-sm cursor-pointer transition-all duration-[400ms] ease-in-out
+        outline-none focus:ring-2 focus:ring-[var(--main-accent-color)] focus:ring-offset-2
+        ${r ? "bg-[var(--main-accent-color)] text-white hover:brightness-90" : "bg-[var(--label-bg)] hover:brightness-95"}
+      `,
+      children: o
+    }
+  );
+};
+export {
+  s as Label
+};

package/dist/src/shared/ui/Markdown/MDWithAccordion.js

@@ -0,0 +1,36 @@
+import { jsx as i } from "react/jsx-runtime";
+import n from "./MDWithAccordion.module.scss.js";
+import { Markdown as p } from "../../../../node_modules/react-markdown/lib/index.js";
+import l from "../../../../node_modules/rehype-raw/lib/index.js";
+function d(r, { openFirst: o = !1 } = {}) {
+  if (!r) return "";
+  const s = /~H~~([\s\S]*?)~~\s*~M~~([\s\S]*?)~~/g;
+  let t = 0;
+  return r.replace(s, (e, c, a) => {
+    const m = o && t === 0 ? " open" : "";
+    return t += 1, `
+<details class="${n.mdAccordion}"${m}>
+<summary>${String(c).trim()}</summary>
+<div class="p-4">
+${String(a).trim()}
+</div>
+</details>`;
+  });
+}
+function A({
+  children: r,
+  className: o = "",
+  openFirst: s = !1
+}) {
+  const e = d(typeof r == "string" ? r : "", { openFirst: s });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: ["prose", n.prose, o].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ i(p, { rehypePlugins: [l], children: e })
+    }
+  );
+}
+export {
+  A as default
+};

package/dist/src/shared/ui/Markdown/MDWithAccordion.module.scss.js

@@ -0,0 +1,9 @@
+const o = "_prose_1l8lv_1", c = "_mdAccordion_1l8lv_16", s = {
+  prose: o,
+  mdAccordion: c
+};
+export {
+  s as default,
+  c as mdAccordion,
+  o as prose
+};

package/dist/src/shared/ui/MaterialItem/MaterialItem.js

@@ -0,0 +1,36 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { AttributeHelper as m } from "../../../features/swatches/lib/AttributeHelper.js";
+import { ImageGridZoom as n } from "../../../features/swatches/ui/ImageGridZoom/ImageGridZoom.js";
+import { CloseIconSVG as d } from "../../../app/assets/svg/CloseIconSVG.js";
+import { HexGridZoom as a } from "../../../features/swatches/ui/HexGridZoom/HexGridZoom.js";
+const b = "w-16 h-16 bg-[var(--sidebar-b)] border border-solid border-[var(--border)] rounded-sm aspect-square overflow-hidden transition", g = ({
+  val: e,
+  className: o,
+  isShowDeleteIcon: i = !1,
+  handleSelect: t
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    onClick: () => {
+      t && t(e);
+    },
+    className: `relative ${o || b}`,
+    "aria-label": `Selected swatch ${e.name ?? e.assetId}`,
+    title: "Click to remove",
+    children: [
+      m.getImage(e) ? /* @__PURE__ */ r(n, { item: e }) : /* @__PURE__ */ r(a, { item: e }),
+      i ? /* @__PURE__ */ r(
+        "div",
+        {
+          className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex justify-center items-center\r
+          bg-[var(--background-grey)] rounded-2xl border-none pointer-events-none`,
+          children: /* @__PURE__ */ r(d, { className: "w-2 h-2 stroke-[var(--svg-dark)]" })
+        }
+      ) : null
+    ]
+  },
+  e.assetId
+);
+export {
+  g as MaterialItem
+};

package/dist/src/shared/ui/MultiSelect/MultiSelect.js

@@ -0,0 +1,150 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as S, Trigger as j, Content as L } from "../../../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { PopoverTooltip as O } from "../PopoverTooltip/PopoverTooltip.js";
+import { cn as f } from "../../utils/cn.js";
+import { Checkbox as R } from "../Checkbox/Checkbox.js";
+import D from "../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import z from "../../../../node_modules/lucide-react/dist/esm/icons/x.js";
+const P = i.forwardRef(
+  ({
+    options: u,
+    values: a,
+    onValueChange: c,
+    placeholder: d = "Select options...",
+    className: y,
+    dropdownWidth: h,
+    align: N = "start",
+    getTooltipByMaterialAndSection: x,
+    sectionName: w
+  }, C) => {
+    const [l, m] = i.useState(!1), v = i.useRef(null);
+    i.useEffect(() => {
+      if (!l) return;
+      const e = (r) => {
+        const b = r.target, p = v.current;
+        p && (p.contains(b) || b === p) || m(!1);
+      }, n = (r) => {
+        r.key === "Escape" && m(!1);
+      };
+      return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), document.addEventListener("keydown", n), () => {
+        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), document.removeEventListener("keydown", n);
+      };
+    }, [l]);
+    const g = (e, n) => {
+      c(n ? [...a, e] : a.filter((r) => r !== e));
+    }, k = () => {
+      c([]);
+    }, s = a.length, E = s === 0 ? d : s === 1 ? u.find((e) => e.value === a[0])?.label || `${d} selected` : /* @__PURE__ */ o("div", { className: "flex flex-row items-center justify-between w-full", children: [
+      /* @__PURE__ */ t("span", { className: "truncate", children: d }),
+      /* @__PURE__ */ t("span", { className: "text-[0.8rem] text-white bg-[var(--main-accent-color)] px-1.5 py-0.5 ml-2 rounded-full whitespace-nowrap", children: s })
+    ] });
+    return /* @__PURE__ */ o(S, { open: l, onOpenChange: m, children: [
+      /* @__PURE__ */ o(
+        j,
+        {
+          ref: C,
+          className: f(
+            "flex flex-row items-center justify-between rounded-full border px-3 sm:px-5 py-2 bg-white cursor-pointer hover:bg-gray-50 data-[state=open]:border-primary hover:border-primary focus:border-primary",
+            y
+          ),
+          children: [
+            /* @__PURE__ */ t("div", { className: "w-full text-[0.9rem] truncate text-left", children: E }),
+            /* @__PURE__ */ t(
+              D,
+              {
+                className: f(
+                  "ml-2 h-4 w-4 transition-transform",
+                  l && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(
+        L,
+        {
+          ref: v,
+          className: f(
+            "bg-white border rounded-lg shadow-lg z-50 max-h-80 overflow-y-auto overscroll-behavior-y-contain touch-pan-y p-2",
+            h || "w-[var(--radix-popover-trigger-width)]"
+          ),
+          align: N,
+          sideOffset: 4,
+          style: {
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "contain"
+          },
+          onTouchStart: (e) => {
+            e.stopPropagation();
+          },
+          onTouchMove: (e) => {
+            e.stopPropagation();
+          },
+          onWheel: (e) => {
+            e.stopPropagation();
+          },
+          children: [
+            s > 0 && /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 items-center justify-between px-2 py-1 mb-2 border-b", children: /* @__PURE__ */ o(
+              "button",
+              {
+                onClick: k,
+                className: "text-[1.2rem] text-black hover:text-primary transition-color cursor-pointer duration-200 flex flex-row items-center gap-1",
+                children: [
+                  /* @__PURE__ */ t(z, { className: "h-3 w-3" }),
+                  "Clear all"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-1", children: u.map((e) => {
+              const n = a.includes(e.value);
+              return /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "flex flex-row items-start gap-2 px-2 py-1 hover:bg-gray-50 rounded transition-background duration-300 cursor-pointer",
+                  onClick: () => g(e.value, !n),
+                  children: [
+                    /* @__PURE__ */ t(
+                      R,
+                      {
+                        checked: n,
+                        className: "size-6",
+                        onCheckedChange: (r) => g(e.value, r)
+                      }
+                    ),
+                    /* @__PURE__ */ o("div", { className: "flex-1 flex flex-row items-start justify-between", children: [
+                      /* @__PURE__ */ o("div", { className: "flex flex-row items-center gap-2", children: [
+                        /* @__PURE__ */ t("span", { className: "text-[1.2rem]", children: e.label }),
+                        (() => {
+                          if (!x || !w)
+                            return null;
+                          const r = x(
+                            e.value,
+                            w
+                          );
+                          return r && r.Description ? /* @__PURE__ */ t(
+                            O,
+                            {
+                              tooltipData: r?.Description
+                            }
+                          ) : null;
+                        })()
+                      ] }),
+                      e.count !== void 0 && /* @__PURE__ */ t("span", { className: "text-[1rem] text-gray-800 bg-gray-100 px-2 py-0.5 ml-2 rounded-full whitespace-nowrap", children: e.count })
+                    ] })
+                  ]
+                },
+                e.value
+              );
+            }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+P.displayName = "MultiSelect";
+export {
+  P as MultiSelect
+};

package/dist/src/shared/ui/PopoverTooltip/InfoIcon.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+function h(e) {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": !0,
+      className: "size-5",
+      ...e,
+      children: [
+        /* @__PURE__ */ t(
+          "rect",
+          {
+            x: "0.666667",
+            y: "0.666667",
+            width: "10.6667",
+            height: "10.6667",
+            rx: "5.33333",
+            stroke: "#B1B1B1",
+            strokeWidth: "1.33333"
+          }
+        ),
+        /* @__PURE__ */ t("circle", { cx: "6.00065", cy: "3.33268", r: "0.666667", fill: "#B1B1B1" }),
+        /* @__PURE__ */ t("rect", { x: "5.33398", y: "5.33398", width: "1.33333", height: "4", fill: "#B1B1B1" })
+      ]
+    }
+  );
+}
+export {
+  h as default
+};

package/dist/src/shared/ui/PopoverTooltip/PopoverTooltip.js

@@ -0,0 +1,37 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { Popover as m, PopoverTrigger as p, PopoverContent as s } from "../../../../node_modules/@radix-ui/react-popover/dist/index.js";
+import a from "../Markdown/MDWithAccordion.js";
+import d from "./InfoIcon.js";
+import e from "./PopoverTooltip.module.scss.js";
+const v = ({
+  tooltipData: r,
+  openFirst: t = !1,
+  trigger: i
+}) => {
+  if (!r?.trim()) return null;
+  const n = (l) => {
+    l.stopPropagation();
+  };
+  return /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ o(p, { asChild: !0, children: i ?? /* @__PURE__ */ o(
+      "button",
+      {
+        className: e.iconBtn,
+        "aria-label": "Open tooltip",
+        onClick: n,
+        children: /* @__PURE__ */ o(d, { className: e.iconSvg })
+      }
+    ) }),
+    /* @__PURE__ */ o(
+      s,
+      {
+        className: "bg-[#000] text-white text-[1.1rem] leading-[1.45] w-auto max-w-[300px]",
+        side: "top",
+        children: /* @__PURE__ */ o(a, { openFirst: t, children: r })
+      }
+    )
+  ] });
+};
+export {
+  v as PopoverTooltip
+};

package/dist/src/shared/ui/PopoverTooltip/PopoverTooltip.module.scss.js

@@ -0,0 +1,4 @@
+const s = {};
+export {
+  s as default
+};

package/dist/src/shared/ui/Slider/Slider.js

@@ -0,0 +1,117 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useRef as k, useState as d, useCallback as x, useEffect as y } from "react";
+import { Label as L } from "../Label/Label.js";
+const R = ({
+  items: h,
+  activeId: f,
+  onSelect: u,
+  className: g = "",
+  stepRatio: m = 0.8
+}) => {
+  const n = k(null), [s, b] = d(!1), [i, p] = d(!1), o = x(() => {
+    const e = n.current;
+    if (!e) return;
+    const { scrollLeft: t, scrollWidth: l, clientWidth: v } = e, w = l - v;
+    b(t > 0), p(t < w - 1);
+  }, []);
+  y(() => {
+    const e = n.current;
+    if (!e) return;
+    o();
+    const t = new ResizeObserver(() => o());
+    t.observe(e);
+    const l = () => o();
+    return e.addEventListener("scroll", l, { passive: !0 }), () => {
+      t.disconnect(), e.removeEventListener("scroll", l);
+    };
+  }, [o]);
+  const c = (e) => {
+    const t = n.current;
+    if (!t) return;
+    const l = t.clientWidth * m * (e === "left" ? -1 : 1);
+    t.scrollBy({ left: l, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `flex items-center gap-2 w-full ${g}`,
+      role: "region",
+      "aria-label": "Category slider",
+      children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Scroll left",
+            disabled: !s,
+            onClick: () => c("left"),
+            className: `flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center shadow
+          ${s ? "bg-white hover:bg-gray-100" : "bg-gray-200 opacity-60 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ r("svg", { width: "18", height: "18", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M15 18l-6-6 6-6",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: n,
+            className: `\r
+        no-scrollbar flex-1 overflow-hidden scroll-smooth\r
+      `,
+            style: {
+              WebkitOverflowScrolling: "touch",
+              paddingLeft: "0.5rem",
+              paddingRight: "0.5rem"
+            },
+            children: /* @__PURE__ */ a("div", { className: "flex gap-3 sm:gap-4 py-2 min-w-min", children: [
+              h.map((e) => {
+                const t = e.productId, l = f === t;
+                return /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(
+                  L,
+                  {
+                    text: e.name,
+                    isActive: l,
+                    onClick: () => u(e)
+                  }
+                ) }, t);
+              }),
+              /* @__PURE__ */ r("div", { "aria-hidden": !0, className: "shrink-0 w-1 sm:w-4" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Scroll right",
+            disabled: !i,
+            onClick: () => c("right"),
+            className: `flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center shadow
+          ${i ? "bg-black text-white hover:brightness-110" : "bg-gray-200 text-gray-500 opacity-60 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ r("svg", { width: "18", height: "18", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M9 6l6 6-6 6",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as Slider
+};