astralis-ui 0.1.0

package/dist/components/disclosure/accordion/components/accordion-root.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as h } from "react/jsx-runtime";
+import { useId as q, useState as v, useCallback as f, useMemo as E } from "react";
+import { AccordionContext as H } from "../accordion.context.js";
+import { accordionRootVariants as M } from "../accordion.styles.js";
+import { astralisMerge as N } from "../../../../utils/astralis-merge.js";
+import { accentClass as T } from "../../../../const/color-schemes.js";
+function Q({
+  children: V,
+  type: s = "single",
+  variant: l = "enclosed",
+  size: i = "md",
+  colorScheme: b = "gray",
+  value: a,
+  defaultValue: C,
+  collapsible: u = !1,
+  disabled: d = !1,
+  keepMounted: g = !1,
+  indicator: m,
+  indicatorPosition: y = "end",
+  hideIndicator: A = !1,
+  headingLevel: p = 3,
+  onValueChange: x,
+  className: I = ""
+}) {
+  const w = q(), [K, O] = v(C), e = a ?? K, k = f(
+    (r) => s === "multiple" ? Array.isArray(e) && e.includes(r) : e === r,
+    [s, e]
+  ), D = f(
+    (r) => {
+      let o;
+      if (s === "multiple") {
+        const t = Array.isArray(e) ? e : [];
+        o = t.includes(r) ? t.filter((n) => n !== r) : [...t, r];
+      } else
+        o = e === r && u ? "" : r;
+      a === void 0 && O(o), x?.(o);
+    },
+    [s, e, u, x, a]
+  ), R = f((r) => {
+    const o = r.target;
+    if (!o.matches('button[data-accordion-trigger="true"]')) return;
+    const t = Array.from(
+      r.currentTarget.querySelectorAll(
+        'button[data-accordion-trigger="true"]:not([disabled])'
+      )
+    ), n = t.indexOf(o);
+    if (n === -1) return;
+    const c = (j) => {
+      r.preventDefault(), t[(j + t.length) % t.length]?.focus();
+    };
+    r.key === "ArrowDown" ? c(n + 1) : r.key === "ArrowUp" ? c(n - 1) : r.key === "Home" ? c(0) : r.key === "End" && c(t.length - 1);
+  }, []), S = E(
+    () => ({
+      isOpen: k,
+      toggle: D,
+      rootId: w,
+      variant: l,
+      size: i,
+      disabled: d,
+      keepMounted: g,
+      indicator: m,
+      indicatorPosition: y,
+      hideIndicator: A,
+      headingLevel: p
+    }),
+    [k, D, w, l, i, d, g, m, y, A, p]
+  );
+  return /* @__PURE__ */ h(H.Provider, { value: S, children: /* @__PURE__ */ h(
+    "div",
+    {
+      onKeyDown: R,
+      className: N(M({ variant: l }), T(b), I),
+      children: V
+    }
+  ) });
+}
+export {
+  Q as AccordionRoot
+};

package/dist/components/disclosure/accordion/components/accordion-trigger.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { useAccordion as I, useAccordionItem as x } from "../accordion.context.js";
+import { accordionIndicatorVariants as v, accordionTriggerVariants as z } from "../accordion.styles.js";
+import { astralisMerge as N } from "../../../../utils/astralis-merge.js";
+import b from "../../../icon/icon.js";
+import { ChevronDownIcon as A } from "../../../icon/internal-icons.js";
+const j = { sm: "xs", md: "sm", lg: "md" };
+function y({
+  children: e,
+  indicator: s,
+  hideIndicator: c,
+  className: d = ""
+}) {
+  const i = I(), { value: l, open: o, disabled: a, triggerId: m, contentId: g } = x(), p = `h${i.headingLevel}`, u = c ?? i.hideIndicator;
+  let r = null;
+  if (!u) {
+    const f = s ?? i.indicator;
+    r = /* @__PURE__ */ t("span", { className: v({ open: o }), "aria-hidden": !0, children: f ?? /* @__PURE__ */ t(b, { size: j[i.size], children: /* @__PURE__ */ t(A, {}) }) });
+  }
+  const n = i.indicatorPosition === "start";
+  return /* @__PURE__ */ t(p, { className: "astralis:m-0", children: /* @__PURE__ */ h(
+    "button",
+    {
+      type: "button",
+      id: m,
+      "data-accordion-trigger": "true",
+      "data-state": o ? "open" : "closed",
+      disabled: a,
+      "aria-expanded": o,
+      "aria-controls": g,
+      onClick: () => {
+        a || i.toggle(l);
+      },
+      className: N(
+        z({ size: i.size, variant: i.variant, open: o }),
+        d
+      ),
+      children: [
+        n && r,
+        /* @__PURE__ */ t("span", { className: "astralis:flex-1 astralis:text-left", children: e }),
+        !n && r
+      ]
+    }
+  ) });
+}
+export {
+  y as AccordionTrigger
+};

package/dist/components/disclosure/accordion/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { AccordionRoot as o } from "./components/accordion-root.js";
+import { AccordionItem as r } from "./components/accordion-item.js";
+import { AccordionTrigger as t } from "./components/accordion-trigger.js";
+import { AccordionContent as c } from "./components/accordion-content.js";
+const d = Object.assign(o, {
+  Item: r,
+  Trigger: t,
+  Content: c
+});
+export {
+  d as Accordion,
+  c as AccordionContent,
+  r as AccordionItem,
+  t as AccordionTrigger
+};

package/dist/components/disclosure/carousel/carousel.context.js

@@ -0,0 +1,18 @@
+"use client";
+import { useContext as t, createContext as o } from "react";
+const n = o(null);
+function s() {
+  const e = t(n);
+  if (!e) throw new Error("Carousel sub-components must be used within <Carousel>");
+  return e;
+}
+const r = o(0);
+function C() {
+  return t(r);
+}
+export {
+  n as CarouselContext,
+  r as CarouselItemContext,
+  s as useCarousel,
+  C as useCarouselItemIndex
+};

package/dist/components/disclosure/carousel/carousel.styles.js

@@ -0,0 +1,77 @@
+"use client";
+import { cva as s } from "class-variance-authority";
+const a = "astralis:outline-none astralis:focus-visible:outline-2 astralis:focus-visible:outline-offset-2 astralis:focus-visible:outline-accent-ring", i = s(
+  `astralis:inline-flex astralis:items-center astralis:justify-center astralis:shrink-0 astralis:rounded-full astralis:cursor-pointer astralis:bg-surface-base astralis:text-label-base astralis:border-normal astralis:border-stroke-subtle astralis:shadow-md astralis:transition-colors astralis:hover:bg-surface-muted astralis:disabled:opacity-moderate astralis:disabled:cursor-not-allowed ${a}`,
+  {
+    variants: {
+      size: {
+        sm: "astralis:size-7",
+        md: "astralis:size-9",
+        lg: "astralis:size-11"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), r = { sm: "xs", md: "sm", lg: "md" }, l = s("astralis:flex astralis:gap-4", {
+  variants: {
+    orientation: {
+      horizontal: "astralis:flex-row astralis:items-center astralis:justify-center astralis:mt-4",
+      vertical: "astralis:flex-col astralis:items-center astralis:justify-between"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+}), e = s(
+  "astralis:flex astralis:items-center astralis:justify-center astralis:gap-2",
+  {
+    variants: {
+      orientation: { horizontal: "astralis:flex-row", vertical: "astralis:flex-col" }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+), o = s(
+  `astralis:rounded-full astralis:cursor-pointer astralis:transition-all astralis:duration-moderate ${a}`,
+  {
+    variants: {
+      size: { sm: "astralis:h-1.5", md: "astralis:h-2", lg: "astralis:h-2.5" },
+      active: {
+        true: "astralis:bg-accent-solid",
+        false: "astralis:bg-surface-emphasized astralis:hover:bg-surface-muted"
+      }
+    },
+    compoundVariants: [
+      { size: "sm", active: !0, class: "astralis:w-5" },
+      { size: "sm", active: !1, class: "astralis:w-1.5" },
+      { size: "md", active: !0, class: "astralis:w-6" },
+      { size: "md", active: !1, class: "astralis:w-2" },
+      { size: "lg", active: !0, class: "astralis:w-8" },
+      { size: "lg", active: !1, class: "astralis:w-2.5" }
+    ],
+    defaultVariants: { size: "md", active: !1 }
+  }
+), n = s(
+  `astralis:shrink-0 astralis:rounded-full astralis:cursor-pointer astralis:transition-colors astralis:duration-moderate ${a}`,
+  {
+    variants: {
+      orientation: {
+        horizontal: "astralis:h-1 astralis:w-8",
+        vertical: "astralis:w-1 astralis:h-8"
+      },
+      active: {
+        true: "astralis:bg-accent-solid",
+        false: "astralis:bg-surface-emphasized astralis:hover:bg-surface-muted"
+      }
+    },
+    defaultVariants: { orientation: "horizontal", active: !1 }
+  }
+), c = s(
+  "astralis:text-sm astralis:font-medium astralis:tabular-nums astralis:text-label-muted"
+);
+export {
+  l as carouselControlGroupVariants,
+  i as carouselControlVariants,
+  o as carouselDotVariants,
+  e as carouselIndicatorsVariants,
+  n as carouselLineVariants,
+  c as carouselProgressVariants,
+  r as controlIconSize
+};

package/dist/components/disclosure/carousel/components/carousel-autoplay-trigger.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useCarousel as s } from "../carousel.context.js";
+import { controlIconSize as n, carouselControlVariants as u } from "../carousel.styles.js";
+import { astralisMerge as m } from "../../../../utils/astralis-merge.js";
+import c from "../../../icon/icon.js";
+import { PauseIcon as p, PlayIcon as f } from "../../../icon/internal-icons.js";
+function I({ className: e = "", children: t }) {
+  const { isPlaying: o, toggleAutoPlay: i, disabled: l, size: a } = s();
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      "aria-label": o ? "Pause autoplay" : "Start autoplay",
+      "aria-pressed": o,
+      disabled: l,
+      onClick: i,
+      className: m(u({ size: a }), e),
+      children: t ? t(o) : /* @__PURE__ */ r(c, { size: n[a], children: o ? /* @__PURE__ */ r(p, {}) : /* @__PURE__ */ r(f, {}) })
+    }
+  );
+}
+export {
+  I as CarouselAutoPlayTrigger
+};

package/dist/components/disclosure/carousel/components/carousel-control.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useCarousel as s } from "../carousel.context.js";
+import { carouselControlGroupVariants as i } from "../carousel.styles.js";
+import { astralisMerge as a } from "../../../../utils/astralis-merge.js";
+function p({ children: o, className: r = "" }) {
+  const { orientation: t } = s();
+  return /* @__PURE__ */ e("div", { className: a(i({ orientation: t }), r), children: o });
+}
+export {
+  p as CarouselControl
+};

package/dist/components/disclosure/carousel/components/carousel-indicator.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { useCarousel as n } from "../carousel.context.js";
+import { carouselDotVariants as c } from "../carousel.styles.js";
+import { astralisMerge as u } from "../../../../utils/astralis-merge.js";
+function b({ index: t, className: e = "" }) {
+  const { index: r, setIndex: a, slideCount: s, size: i } = n(), o = t === r;
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-label": `Go to slide ${t + 1} of ${s}`,
+      "aria-selected": o,
+      onClick: () => a(t),
+      className: u(c({ size: i, active: o }), e)
+    }
+  );
+}
+export {
+  b as CarouselIndicator
+};

package/dist/components/disclosure/carousel/components/carousel-indicators.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { useCarousel as x } from "../carousel.context.js";
+import { carouselProgressVariants as C, carouselLineVariants as M, carouselDotVariants as I, carouselIndicatorsVariants as V } from "../carousel.styles.js";
+import { astralisMerge as d } from "../../../../utils/astralis-merge.js";
+function j({ className: s = "", variant: i = "dot" }) {
+  const { slideCount: m, index: f, setIndex: b, lastIndex: l, slidesToScroll: a, orientation: n, size: g } = x();
+  if (m <= 1) return null;
+  const e = Math.floor(l / a) + 1, c = Math.min(Math.round(f / a), e - 1), h = (u) => b(Math.min(u * a, l));
+  return i === "number" ? /* @__PURE__ */ p("div", { "aria-label": "Slide progress", className: d(C(), s), children: [
+    c + 1,
+    /* @__PURE__ */ o("span", { className: "astralis:mx-1", children: "/" }),
+    e
+  ] }) : /* @__PURE__ */ o("div", { role: "tablist", "aria-label": "Slides", className: d(V({ orientation: n }), s), children: Array.from({ length: e }).map((u, r) => {
+    const t = r === c;
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-label": `Go to slide ${r + 1} of ${e}`,
+        "aria-selected": t,
+        onClick: () => h(r),
+        className: i === "line" ? M({ orientation: n, active: t }) : I({ size: g, active: t })
+      },
+      r
+    );
+  }) });
+}
+export {
+  j as CarouselIndicators
+};

package/dist/components/disclosure/carousel/components/carousel-next.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useCarousel as u } from "../carousel.context.js";
+import { controlIconSize as f, carouselControlVariants as x } from "../carousel.styles.js";
+import { astralisMerge as b } from "../../../../utils/astralis-merge.js";
+import C from "../../../icon/icon.js";
+import { ChevronDownIcon as I, ChevronRightIcon as h } from "../../../icon/internal-icons.js";
+function V({ icon: t, className: i = "" }) {
+  const { index: e, setIndex: n, slidesToScroll: s, lastIndex: l, orientation: a, disabled: c, loop: m, size: r } = u(), d = a === "vertical", p = !m && (c || e >= l);
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next slide",
+      disabled: p,
+      onClick: () => n(e + s),
+      className: b(x({ size: r }), i),
+      children: t ?? /* @__PURE__ */ o(C, { size: f[r], children: d ? /* @__PURE__ */ o(I, {}) : /* @__PURE__ */ o(h, {}) })
+    }
+  );
+}
+export {
+  V as CarouselNext
+};

package/dist/components/disclosure/carousel/components/carousel-prev.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useCarousel as p } from "../carousel.context.js";
+import { controlIconSize as u, carouselControlVariants as f } from "../carousel.styles.js";
+import { astralisMerge as b } from "../../../../utils/astralis-merge.js";
+import C from "../../../icon/icon.js";
+import { ChevronUpIcon as v, ChevronLeftIcon as I } from "../../../icon/internal-icons.js";
+function g({ icon: i, className: t = "" }) {
+  const { index: e, setIndex: s, slidesToScroll: n, orientation: l, disabled: a, loop: c, size: r } = p(), m = l === "vertical", d = !c && (a || e <= 0);
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous slide",
+      disabled: d,
+      onClick: () => s(e - n),
+      className: b(f({ size: r }), t),
+      children: i ?? /* @__PURE__ */ o(C, { size: u[r], children: m ? /* @__PURE__ */ o(v, {}) : /* @__PURE__ */ o(I, {}) })
+    }
+  );
+}
+export {
+  g as CarouselPrev
+};

package/dist/components/disclosure/carousel/components/carousel-progress-text.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { useCarousel as a } from "../carousel.context.js";
+import { carouselProgressVariants as t } from "../carousel.styles.js";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+function p({ className: o = "", format: i }) {
+  const { index: r, slideCount: e } = a();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": `Slide ${r + 1} of ${e}`,
+      className: l(t(), o),
+      children: i ? i(r, e) : `${r + 1} / ${e}`
+    }
+  );
+}
+export {
+  p as CarouselProgressText
+};

package/dist/components/disclosure/carousel/components/carousel-root.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as j } from "react/jsx-runtime";
+import { useState as R, useEffect as N, useRef as H, useCallback as f, useMemo as O } from "react";
+import { usePrefersReducedMotion as T } from "../../../../hooks/use-prefers-reduced-motion.js";
+import { CarouselContext as S } from "../carousel.context.js";
+import { astralisMerge as b } from "../../../../utils/astralis-merge.js";
+import { accentClass as tt } from "../../../../const/color-schemes.js";
+function it({
+  index: l,
+  defaultIndex: q = 0,
+  onIndexChange: M,
+  beforeChange: K,
+  afterChange: w,
+  slidesPerView: z = 1,
+  slidesToScroll: u = 1,
+  slideGap: P = 0,
+  loop: n = !1,
+  autoPlay: x = !1,
+  autoPlayInterval: k = 3e3,
+  pauseOnHover: p = !0,
+  animation: y = "slide",
+  orientation: o = "horizontal",
+  speed: m = 300,
+  easing: E = "ease-out",
+  disabled: i = !1,
+  swipeable: L = !0,
+  draggable: g = !1,
+  size: C = "md",
+  colorScheme: B = "brand",
+  className: F = "",
+  style: I,
+  children: J
+}) {
+  const [Q, U] = R(q), [a, W] = R(0), [v, h] = R(x);
+  N(() => {
+    h(x);
+  }, [x]);
+  const e = l ?? Q, A = H(!1), D = y === "fade" ? 1 : z, s = Math.max(0, Math.ceil(a - D)), c = f(
+    (t) => {
+      if (i) return;
+      const r = n ? t > s ? 0 : t < 0 ? s : t : Math.min(Math.max(0, t), s);
+      r !== e && (K?.(e, r), l === void 0 && U(r), M?.(r), w && setTimeout(() => w(r), m));
+    },
+    [i, n, s, e, l, M, K, w, m]
+  ), V = T();
+  N(() => {
+    if (!v || i || V || a <= 1) return;
+    const t = setTimeout(() => {
+      if (A.current) return;
+      if (!n && e >= s) {
+        h(!1);
+        return;
+      }
+      const r = e >= s ? 0 : e + u;
+      l === void 0 && U(r), M?.(r);
+    }, k);
+    return () => clearTimeout(t);
+  }, [v, i, V, e, a, s, n, u, k]);
+  const d = f(() => h((t) => !t), []), X = f(() => {
+    p && (A.current = !0);
+  }, [p]), Y = f(() => {
+    A.current = !1;
+  }, []), Z = f(
+    (t) => {
+      const r = o === "vertical" ? "ArrowUp" : "ArrowLeft", G = o === "vertical" ? "ArrowDown" : "ArrowRight";
+      t.key === r ? (t.preventDefault(), c(e - u)) : t.key === G && (t.preventDefault(), c(e + u));
+    },
+    [o, c, e, u]
+  ), _ = O(
+    () => ({
+      index: e,
+      setIndex: c,
+      slideCount: a,
+      setSlideCount: W,
+      lastIndex: s,
+      slidesPerView: D,
+      slidesToScroll: u,
+      slideGap: P,
+      orientation: o,
+      animation: y,
+      speed: m,
+      easing: E,
+      size: C,
+      loop: n,
+      disabled: i,
+      swipeable: L,
+      draggable: g,
+      isPlaying: v,
+      toggleAutoPlay: d
+    }),
+    [
+      e,
+      c,
+      a,
+      s,
+      D,
+      u,
+      P,
+      o,
+      y,
+      m,
+      E,
+      C,
+      n,
+      i,
+      L,
+      g,
+      v,
+      d
+    ]
+  ), $ = o === "vertical" ? "astralis:relative astralis:flex astralis:w-full astralis:gap-3 astralis:items-stretch" : "astralis:relative astralis:w-full";
+  return /* @__PURE__ */ j(S.Provider, { value: _, children: /* @__PURE__ */ j(
+    "div",
+    {
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      onKeyDown: Z,
+      onMouseEnter: X,
+      onMouseLeave: Y,
+      className: b($, "astralis:outline-none", tt(B), F),
+      style: I,
+      children: J
+    }
+  ) });
+}
+export {
+  it as CarouselRoot
+};

package/dist/components/disclosure/carousel/components/carousel-slide.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { useCarousel as g, useCarouselItemIndex as h } from "../carousel.context.js";
+function C({ children: r, className: n = "" }) {
+  const { index: a, slideCount: o, slidesPerView: e, slideGap: c, orientation: u, animation: p, speed: m, easing: f } = g(), i = h(), $ = u === "vertical";
+  if (p === "fade") {
+    const t = i === a;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": `Slide ${i + 1} of ${o}`,
+        "aria-hidden": !t,
+        inert: !t,
+        className: n,
+        style: {
+          gridArea: "1 / 1",
+          opacity: t ? 1 : 0,
+          zIndex: t ? 1 : 0,
+          transitionProperty: "opacity",
+          transitionDuration: `${m}ms`,
+          transitionTimingFunction: f
+        },
+        children: r
+      }
+    );
+  }
+  const s = Math.min(a, Math.max(0, o - e)), l = i >= Math.floor(s) && i < s + e, x = {
+    flex: `0 0 ${`calc((100% - ${e - 1} * ${c}px) / ${e})`}`,
+    ...$ ? { minHeight: 0 } : { minWidth: 0 }
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": `Slide ${i + 1} of ${o}`,
+      "aria-hidden": !l,
+      inert: !l,
+      className: n,
+      style: x,
+      children: r
+    }
+  );
+}
+export {
+  C as CarouselSlide
+};

package/dist/components/disclosure/carousel/components/carousel-track.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { Children as N, useEffect as R, useRef as V } from "react";
+import { useCarousel as X, CarouselItemContext as Y } from "../carousel.context.js";
+import { astralisMerge as C } from "../../../../utils/astralis-merge.js";
+function L({ children: M, className: i = "" }) {
+  const {
+    index: o,
+    setIndex: S,
+    setSlideCount: c,
+    slideCount: T,
+    slidesPerView: u,
+    slidesToScroll: d,
+    slideGap: n,
+    orientation: b,
+    animation: y,
+    speed: P,
+    easing: D,
+    swipeable: E,
+    draggable: f
+  } = X(), s = b === "vertical", m = N.toArray(M), h = m.length;
+  R(() => c(h), [h, c]);
+  const p = m.map((e, r) => /* @__PURE__ */ a(Y.Provider, { value: r, children: e }, r)), t = V(null), l = (e) => s ? e.clientY : e.clientX, x = (e) => {
+    t.current = e;
+  }, v = (e) => {
+    if (t.current === null) return;
+    const r = t.current - e;
+    t.current = null, Math.abs(r) > 50 && S(o + (r > 0 ? d : -d));
+  }, g = {
+    ...E && {
+      onTouchStart: (e) => x(l(e.touches[0])),
+      onTouchEnd: (e) => v(l(e.changedTouches[0]))
+    },
+    ...f && {
+      onMouseDown: (e) => x(l(e)),
+      onMouseUp: (e) => v(l(e)),
+      onMouseLeave: () => {
+        t.current = null;
+      }
+    }
+  }, w = f ? { cursor: "grab", userSelect: "none" } : {};
+  if (y === "fade")
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-live": "polite",
+        className: C("astralis:relative astralis:grid astralis:overflow-hidden", s ? "astralis:flex-1" : "astralis:w-full", i),
+        style: w,
+        ...g,
+        children: p
+      }
+    );
+  const I = Math.max(0, T - u), $ = `calc(-1 * ${Math.min(o, I)} * (100% + ${n}px) / ${u})`;
+  return /* @__PURE__ */ a("div", { className: C("astralis:overflow-hidden", s ? "astralis:h-full astralis:flex-1" : "astralis:w-full", i), children: /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-live": "polite",
+      className: `astralis:flex ${s ? "astralis:flex-col astralis:h-full" : "astralis:flex-row astralis:w-full"}`,
+      style: {
+        gap: n ? `${n}px` : void 0,
+        transform: s ? `translateY(${$})` : `translateX(${$})`,
+        transitionProperty: "transform",
+        transitionDuration: `${P}ms`,
+        transitionTimingFunction: D,
+        ...w
+      },
+      ...g,
+      children: p
+    }
+  ) });
+}
+export {
+  L as CarouselTrack
+};