@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/Carousel/Carousel.mjs

@@ -0,0 +1,178 @@
+import { jsxs as _, jsx as c } from "react/jsx-runtime";
+import { forwardRef as et, useRef as j, useState as k, useCallback as f, useEffect as D } from "react";
+import { CarouselCard as nt } from "./CarouselCard.mjs";
+import { ChevronLeft as ot, ChevronRight as st } from "lucide-react";
+import { spacing as b } from "../../tokens/primitives.mjs";
+import e from "./Carousel.module.css.mjs";
+const lt = parseInt(b[6], 10), ct = parseInt(b[4], 10), at = parseInt(b[6], 10), it = parseInt(b[8], 10), dt = et(
+  ({
+    items: o,
+    variant: H = "editorial",
+    aspectRatio: $ = "16/9",
+    peek: w = !0,
+    autoScroll: N = !1,
+    autoScrollInterval: R = 5e3,
+    gap: a = "md",
+    align: x = "edge",
+    alignOffset: A,
+    showNavigation: z = !0,
+    showPagination: F = !1,
+    onSlideChange: y,
+    renderNavigation: M,
+    highlightActive: G = !1,
+    loop: L = !1,
+    className: K,
+    ...q
+  }, J) => {
+    const n = j(null), [Q, U] = k(!1), [V, X] = k(!0), [h, Y] = k(0), P = j(0), i = f(() => a === "sm" ? ct : a === "lg" ? it : at, [a]), d = f((t) => {
+      const r = t.children[0];
+      return r ? r.offsetWidth : 0;
+    }, []), g = f(() => {
+      if (!n.current) return;
+      const { scrollLeft: t, scrollWidth: r, clientWidth: s } = n.current, u = d(n.current), v = i(), p = t >= r - s - 1, C = t <= 1;
+      U(!C), X(!p);
+      let l;
+      if (p)
+        l = o.length - 1;
+      else {
+        const W = Math.round(t / (u + v));
+        l = Math.min(Math.max(0, W), o.length - 1);
+      }
+      l !== P.current && (P.current = l, Y(l), y?.(l));
+    }, [a, o.length, y, i, d]), m = f(
+      (t) => {
+        if (!n.current) return;
+        const { scrollLeft: r, scrollWidth: s, clientWidth: u } = n.current, v = d(n.current), p = i(), C = v + p, l = r <= 1, W = r >= s - u - 1;
+        if (L) {
+          if (t === "right" && W) {
+            n.current.scrollTo({ left: 0, behavior: "smooth" });
+            return;
+          }
+          if (t === "left" && l) {
+            n.current.scrollTo({
+              left: s - u,
+              behavior: "smooth"
+            });
+            return;
+          }
+        }
+        n.current.scrollBy({
+          left: t === "left" ? -C : C,
+          behavior: "smooth"
+        });
+      },
+      [a, L, i, d]
+    ), I = f(
+      (t) => {
+        if (!n.current) return;
+        const r = d(n.current), s = i();
+        n.current.scrollTo({
+          left: t * (r + s),
+          behavior: "smooth"
+        });
+      },
+      [i, d]
+    );
+    D(() => {
+      const t = n.current;
+      if (t)
+        return g(), t.addEventListener("scroll", g), () => {
+          t.removeEventListener("scroll", g);
+        };
+    }, [g]), D(() => {
+      if (!N || o.length <= 1) return;
+      const t = setInterval(() => {
+        const r = (h + 1) % o.length;
+        I(r);
+      }, R);
+      return () => clearInterval(t);
+    }, [
+      N,
+      R,
+      h,
+      o.length,
+      I
+    ]);
+    const E = x === "container" && A !== void 0, B = E ? Math.max(0, A - lt) : 0, Z = a === "sm" ? e.gapSm : a === "lg" ? e.gapLg : e.gapMd, O = x === "container" ? e.trackContainer : e.trackEdge, tt = [
+      e.carousel,
+      w && e.peek,
+      G && e.highlightActive,
+      Z,
+      K
+    ].filter(Boolean).join(" "), rt = [e.track, O].filter(Boolean).join(" "), T = L && o.length > 1, S = {
+      canScrollLeft: T || Q,
+      canScrollRight: T || V,
+      scrollLeft: () => m("left"),
+      scrollRight: () => m("right"),
+      activeIndex: h,
+      totalItems: o.length
+    };
+    return /* @__PURE__ */ _("div", { ref: J, className: tt, ...q, children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          ref: n,
+          className: rt,
+          style: E ? { scrollPaddingInlineStart: A } : void 0,
+          role: "region",
+          "aria-label": "Carousel",
+          children: o.map((t, r) => {
+            const s = r === 0;
+            return /* @__PURE__ */ c(
+              nt,
+              {
+                item: t,
+                aspectRatio: $,
+                variant: H,
+                className: r === h && G ? e.cardHighlighted : void 0,
+                style: (
+                  // First card gets extra margin for container alignment
+                  s && B > 0 ? { marginLeft: B } : void 0
+                )
+              },
+              t.title || r
+            );
+          })
+        }
+      ),
+      z && o.length > 1 && (M ? M(S) : /* @__PURE__ */ _("div", { className: e.navigation, children: [
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: e.navButton,
+            onClick: () => m("left"),
+            disabled: !S.canScrollLeft,
+            "aria-label": "Previous",
+            children: /* @__PURE__ */ c(ot, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: e.navButton,
+            onClick: () => m("right"),
+            disabled: !S.canScrollRight,
+            "aria-label": "Next",
+            children: /* @__PURE__ */ c(st, { size: 24 })
+          }
+        )
+      ] })),
+      F && o.length > 1 && /* @__PURE__ */ c("div", { className: e.pagination, children: o.map((t, r) => /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          className: `${e.dot} ${r === h ? e.dotActive : ""}`,
+          onClick: () => I(r),
+          "aria-label": `Go to slide ${r + 1}`
+        },
+        r
+      )) })
+    ] });
+  }
+);
+dt.displayName = "Carousel";
+export {
+  dt as Carousel
+};

package/dist/components/Carousel/Carousel.module.css

@@ -0,0 +1 @@
+._carousel_1d2gl_9{position:relative;overflow:hidden;width:100%}._track_1d2gl_19{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}._track_1d2gl_19::-webkit-scrollbar{display:none}._trackEdge_1d2gl_33,._trackContainer_1d2gl_42{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}._peek_1d2gl_48 ._trackEdge_1d2gl_33,._peek_1d2gl_48 ._trackContainer_1d2gl_42{padding-right:var(--spacing-16)}._gapSm_1d2gl_54 ._track_1d2gl_19{gap:var(--spacing-4)}._gapMd_1d2gl_58 ._track_1d2gl_19{gap:var(--spacing-6)}._gapLg_1d2gl_62 ._track_1d2gl_19{gap:var(--spacing-8)}._navigation_1d2gl_70{display:flex;gap:var(--spacing-2);justify-content:center;margin-top:var(--spacing-4)}._navButton_1d2gl_77{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}._navButton_1d2gl_77:hover:not(:disabled){background:var(--surface-layer);border-color:var(--border-default)}._navButton_1d2gl_77:disabled{opacity:.4;cursor:not-allowed}._card_1d2gl_107{flex-shrink:0;scroll-snap-align:start;position:relative;border-radius:var(--radius-container);overflow:hidden;width:calc(100% - var(--spacing-12));max-width:600px}._aspect-16-9_1d2gl_118{aspect-ratio:16/9}._aspect-4-3_1d2gl_122{aspect-ratio:4/3}._aspect-1-1_1d2gl_126{aspect-ratio:1/1}._aspect-3-4_1d2gl_130{aspect-ratio:3/4}._imageWrapper_1d2gl_138{position:absolute;inset:0}._imageWrapper_1d2gl_138 img{width:100%;height:100%;object-fit:cover}._overlay_1d2gl_153{position:absolute;inset:0;pointer-events:none}._overlay-gradient_1d2gl_159{background:linear-gradient(to top,var(--overlay-dark-heavy) 0%,var(--overlay-dark-light) 30%,transparent 60%)}._overlay-dark_1d2gl_168{background:var(--overlay-dark)}._content_1d2gl_176{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-2)}._card_1d2gl_107 ._eyebrow_1d2gl_187{font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-on-dark-secondary)}._card_1d2gl_107 ._cardTitle_1d2gl_196{font-family:var(--font-secondary);font-size:var(--font-size-24);font-weight:600;line-height:var(--line-height-tight);color:var(--text-on-dark);margin:0}._card_1d2gl_107 ._cardDescription_1d2gl_205{font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-on-dark-secondary);line-height:var(--line-height-relaxed);margin:0}._card_1d2gl_107 ._action_1d2gl_213{margin-top:var(--spacing-2)}._variant-editorial_1d2gl_221{max-width:700px}._variant-editorial_1d2gl_221 ._cardTitle_1d2gl_196{font-size:clamp(1.25rem,2.5vw,2rem)}._variant-product_1d2gl_233{max-width:320px;background:var(--surface-layer);display:flex;flex-direction:column;aspect-ratio:auto}._variant-product_1d2gl_233 ._imageWrapper_1d2gl_138{position:relative;flex-shrink:0;height:140px;display:flex;align-items:center;justify-content:center}._variant-product_1d2gl_233 ._content_1d2gl_176{position:relative;padding:var(--spacing-4);background:var(--surface-layer);flex:1;display:flex;flex-direction:column;gap:var(--spacing-2)}._variant-product_1d2gl_233 ._eyebrow_1d2gl_187{color:var(--text-tertiary)}._variant-product_1d2gl_233 ._cardTitle_1d2gl_196{color:var(--text-primary);font-size:var(--font-size-18);font-weight:var(--font-weight-semibold)}._variant-product_1d2gl_233 ._cardDescription_1d2gl_205{color:var(--text-secondary);font-size:var(--font-size-14);line-height:var(--line-height-relaxed)}._variant-gallery_1d2gl_280{max-width:500px}._variant-gallery_1d2gl_280 ._content_1d2gl_176{opacity:0;transition:opacity var(--transition-fast)}._variant-gallery_1d2gl_280:hover ._content_1d2gl_176{opacity:1}._pagination_1d2gl_297{display:flex;justify-content:center;gap:var(--spacing-2);margin-top:var(--spacing-4)}._dot_1d2gl_304{width:8px;height:8px;border-radius:50%;background:var(--border-subtle);border:none;cursor:pointer;padding:0;transition:background var(--transition-fast),transform var(--transition-fast)}._dot_1d2gl_304:hover{background:var(--border-default)}._dotActive_1d2gl_321{background:var(--interactive-primary);transform:scale(1.25)}._highlightActive_1d2gl_331 ._track_1d2gl_19{padding-block:var(--spacing-6)}._cardHighlighted_1d2gl_335{transform:scale(1.1);transform-origin:center center;z-index:var(--z-dropdown);transition:transform var(--transition-normal)}._highlightActive_1d2gl_331 ._card_1d2gl_107:not(._cardHighlighted_1d2gl_335){transform:scale(.95);opacity:.7;transition:transform var(--transition-normal),opacity var(--transition-normal)}@media(max-width:1024px){._card_1d2gl_107{width:calc(100% - var(--spacing-8));max-width:500px}._variant-editorial_1d2gl_221{max-width:500px}}@media(max-width:640px){._trackEdge_1d2gl_33,._trackContainer_1d2gl_42{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}._peek_1d2gl_48 ._trackEdge_1d2gl_33,._peek_1d2gl_48 ._trackContainer_1d2gl_42{padding-right:var(--spacing-8)}._card_1d2gl_107{width:calc(100% - var(--spacing-4));max-width:none}._variant-editorial_1d2gl_221,._variant-product_1d2gl_233,._variant-gallery_1d2gl_280{max-width:none}._navButton_1d2gl_77{width:40px;height:40px}._content_1d2gl_176{padding:var(--spacing-4)}._card_1d2gl_107 ._cardTitle_1d2gl_196{font-size:var(--font-size-18)}}

package/dist/components/Carousel/Carousel.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_carousel_1d2gl_9",a="_track_1d2gl_19",_="_trackEdge_1d2gl_33",e="_trackContainer_1d2gl_42",c="_peek_1d2gl_48",g="_gapSm_1d2gl_54",o="_gapMd_1d2gl_58",n="_gapLg_1d2gl_62",r="_navigation_1d2gl_70",d="_navButton_1d2gl_77",i="_card_1d2gl_107",l="_imageWrapper_1d2gl_138",s="_overlay_1d2gl_153",p="_content_1d2gl_176",v="_eyebrow_1d2gl_187",h="_cardTitle_1d2gl_196",k="_cardDescription_1d2gl_205",u="_action_1d2gl_213",y="_pagination_1d2gl_297",m="_dot_1d2gl_304",A="_dotActive_1d2gl_321",b="_highlightActive_1d2gl_331",M="_cardHighlighted_1d2gl_335",S={carousel:t,track:a,trackEdge:_,trackContainer:e,peek:c,gapSm:g,gapMd:o,gapLg:n,navigation:r,navButton:d,card:i,"aspect-16-9":"_aspect-16-9_1d2gl_118","aspect-4-3":"_aspect-4-3_1d2gl_122","aspect-1-1":"_aspect-1-1_1d2gl_126","aspect-3-4":"_aspect-3-4_1d2gl_130",imageWrapper:l,overlay:s,"overlay-gradient":"_overlay-gradient_1d2gl_159","overlay-dark":"_overlay-dark_1d2gl_168",content:p,eyebrow:v,cardTitle:h,cardDescription:k,action:u,"variant-editorial":"_variant-editorial_1d2gl_221","variant-product":"_variant-product_1d2gl_233","variant-gallery":"_variant-gallery_1d2gl_280",pagination:y,dot:m,dotActive:A,highlightActive:b,cardHighlighted:M};exports.action=u;exports.card=i;exports.cardDescription=k;exports.cardHighlighted=M;exports.cardTitle=h;exports.carousel=t;exports.content=p;exports.default=S;exports.dot=m;exports.dotActive=A;exports.eyebrow=v;exports.gapLg=n;exports.gapMd=o;exports.gapSm=g;exports.highlightActive=b;exports.imageWrapper=l;exports.navButton=d;exports.navigation=r;exports.overlay=s;exports.pagination=y;exports.peek=c;exports.track=a;exports.trackContainer=e;exports.trackEdge=_;

package/dist/components/Carousel/Carousel.module.css.mjs

@@ -0,0 +1,60 @@
+const t = "_carousel_1d2gl_9", a = "_track_1d2gl_19", _ = "_trackEdge_1d2gl_33", c = "_trackContainer_1d2gl_42", g = "_peek_1d2gl_48", e = "_gapSm_1d2gl_54", o = "_gapMd_1d2gl_58", d = "_gapLg_1d2gl_62", n = "_navigation_1d2gl_70", r = "_navButton_1d2gl_77", i = "_card_1d2gl_107", l = "_imageWrapper_1d2gl_138", s = "_overlay_1d2gl_153", p = "_content_1d2gl_176", v = "_eyebrow_1d2gl_187", h = "_cardTitle_1d2gl_196", k = "_cardDescription_1d2gl_205", y = "_action_1d2gl_213", u = "_pagination_1d2gl_297", m = "_dot_1d2gl_304", A = "_dotActive_1d2gl_321", b = "_highlightActive_1d2gl_331", w = "_cardHighlighted_1d2gl_335", B = {
+  carousel: t,
+  track: a,
+  trackEdge: _,
+  trackContainer: c,
+  peek: g,
+  gapSm: e,
+  gapMd: o,
+  gapLg: d,
+  navigation: n,
+  navButton: r,
+  card: i,
+  "aspect-16-9": "_aspect-16-9_1d2gl_118",
+  "aspect-4-3": "_aspect-4-3_1d2gl_122",
+  "aspect-1-1": "_aspect-1-1_1d2gl_126",
+  "aspect-3-4": "_aspect-3-4_1d2gl_130",
+  imageWrapper: l,
+  overlay: s,
+  "overlay-gradient": "_overlay-gradient_1d2gl_159",
+  "overlay-dark": "_overlay-dark_1d2gl_168",
+  content: p,
+  eyebrow: v,
+  cardTitle: h,
+  cardDescription: k,
+  action: y,
+  "variant-editorial": "_variant-editorial_1d2gl_221",
+  "variant-product": "_variant-product_1d2gl_233",
+  "variant-gallery": "_variant-gallery_1d2gl_280",
+  pagination: u,
+  dot: m,
+  dotActive: A,
+  highlightActive: b,
+  cardHighlighted: w
+};
+export {
+  y as action,
+  i as card,
+  k as cardDescription,
+  w as cardHighlighted,
+  h as cardTitle,
+  t as carousel,
+  p as content,
+  B as default,
+  m as dot,
+  A as dotActive,
+  v as eyebrow,
+  d as gapLg,
+  o as gapMd,
+  e as gapSm,
+  b as highlightActive,
+  l as imageWrapper,
+  r as navButton,
+  n as navigation,
+  s as overlay,
+  u as pagination,
+  g as peek,
+  a as track,
+  c as trackContainer,
+  _ as trackEdge
+};

package/dist/components/Carousel/Carousel.types.d.ts

@@ -0,0 +1,184 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Carousel visual variant
+ */
+export type CarouselVariant = "editorial" | "product" | "gallery";
+/**
+ * Carousel aspect ratio
+ */
+export type CarouselAspectRatio = "16/9" | "4/3" | "1/1" | "3/4";
+/**
+ * Carousel gap size
+ */
+export type CarouselGap = "sm" | "md" | "lg";
+/**
+ * Overlay style for carousel cards
+ */
+export type CarouselOverlay = "none" | "gradient" | "dark";
+/**
+ * Track alignment relative to container
+ */
+export type CarouselAlign = "container" | "edge";
+/**
+ * Navigation render props
+ */
+export interface CarouselNavigationProps {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    activeIndex: number;
+    totalItems: number;
+}
+/**
+ * Carousel item data structure
+ */
+export interface CarouselItem {
+    /**
+     * Background image element (typically an img)
+     */
+    image: ReactNode;
+    /**
+     * Small category/tag text above title
+     */
+    eyebrow?: string;
+    /**
+     * Main headline for the card
+     */
+    title: string;
+    /**
+     * Short description/subtitle
+     */
+    description?: string;
+    /**
+     * Optional action element (link or button)
+     */
+    action?: ReactNode;
+    /**
+     * Overlay style for text legibility
+     * @default 'gradient'
+     */
+    overlay?: CarouselOverlay;
+}
+/**
+ * Carousel card props (internal component)
+ */
+export interface CarouselCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Carousel item data
+     */
+    item: CarouselItem;
+    /**
+     * Aspect ratio of the card
+     * @default '16/9'
+     */
+    aspectRatio?: CarouselAspectRatio;
+    /**
+     * Visual variant
+     * @default 'editorial'
+     */
+    variant?: CarouselVariant;
+}
+/**
+ * Atomic Carousel component props
+ *
+ * This is the low-level carousel component. For page sections, use CarouselSection.
+ *
+ * @example
+ * ```tsx
+ * // Inside a Card or Modal
+ * <Carousel
+ *   items={[
+ *     { image: <img src="/1.jpg" />, title: "Slide 1" },
+ *     { image: <img src="/2.jpg" />, title: "Slide 2" },
+ *   ]}
+ *   variant="gallery"
+ *   aspectRatio="16/9"
+ * />
+ * ```
+ */
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of carousel items
+     */
+    items: CarouselItem[];
+    /**
+     * Visual variant
+     * - editorial: Magazine-style with large images and text overlays
+     * - product: Product showcase cards
+     * - gallery: Simple image gallery
+     * @default 'editorial'
+     */
+    variant?: CarouselVariant;
+    /**
+     * Aspect ratio for cards
+     * @default '16/9'
+     */
+    aspectRatio?: CarouselAspectRatio;
+    /**
+     * Show cards cut at edge (Apple style peek effect)
+     * @default true
+     */
+    peek?: boolean;
+    /**
+     * Enable auto-scroll
+     * @default false
+     */
+    autoScroll?: boolean;
+    /**
+     * Auto-scroll interval in milliseconds
+     * @default 5000
+     */
+    autoScrollInterval?: number;
+    /**
+     * Gap between cards
+     * @default 'md'
+     */
+    gap?: CarouselGap;
+    /**
+     * Track alignment
+     * - 'container': First card aligns with Container (matches section title)
+     * - 'edge': Cards start from screen edge (Apple style)
+     * @default 'edge'
+     */
+    align?: CarouselAlign;
+    /**
+     * Show navigation arrows
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * Show pagination dots
+     * @default false
+     */
+    showPagination?: boolean;
+    /**
+     * Callback when active slide changes
+     */
+    onSlideChange?: (index: number) => void;
+    /**
+     * Custom navigation renderer
+     */
+    renderNavigation?: (props: CarouselNavigationProps) => ReactNode;
+    /**
+     * Pixel offset for container alignment.
+     * Used by CarouselSection to align first card snap point with title.
+     * When set, scroll-padding-inline-start aligns snap points to this offset.
+     * @internal
+     */
+    alignOffset?: number;
+    /**
+     * Make the active (focused) card 10% larger than the rest.
+     * Creates a "spotlight" effect that follows the scroll position.
+     * @default false
+     */
+    highlightActive?: boolean;
+    /**
+     * Enable infinite loop scrolling.
+     * When reaching the end, navigation continues from the beginning.
+     * @default false
+     */
+    loop?: boolean;
+}
+//# sourceMappingURL=Carousel.types.d.ts.map

package/dist/components/Carousel/Carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAEjE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/dist/components/Carousel/CarouselCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("./Carousel.module.css.cjs"),d=({item:i,aspectRatio:c="16/9",variant:n="editorial",className:o,style:u,...m})=>{const{image:f,eyebrow:l,title:j,description:s,action:r,overlay:t="gradient"}=i,p=[e.default.card,e.default[`variant-${n}`],e.default[`aspect-${c.replace("/","-")}`],o].filter(Boolean).join(" ");return a.jsxs("article",{className:p,style:u,...m,children:[a.jsx("div",{className:e.default.imageWrapper,children:f}),t!=="none"&&a.jsx("div",{className:`${e.default.overlay} ${e.default[`overlay-${t}`]}`}),a.jsxs("div",{className:e.default.content,children:[l&&a.jsx("span",{className:e.default.eyebrow,children:l}),a.jsx("h3",{className:e.default.cardTitle,children:j}),s&&a.jsx("p",{className:e.default.cardDescription,children:s}),r&&a.jsx("div",{className:e.default.action,children:r})]})]})};d.displayName="CarouselCard";exports.CarouselCard=d;

package/dist/components/Carousel/CarouselCard.d.ts

@@ -0,0 +1,7 @@
+import { CarouselCardProps } from './Carousel.types';
+
+export declare const CarouselCard: {
+    ({ item, aspectRatio, variant, className, style, ...rest }: CarouselCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=CarouselCard.d.ts.map

package/dist/components/Carousel/CarouselCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselCard.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,YAAY;gEAOtB,iBAAiB;;CAsCnB,CAAC"}

package/dist/components/Carousel/CarouselCard.mjs

@@ -0,0 +1,38 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import e from "./Carousel.module.css.mjs";
+const y = ({
+  item: o,
+  aspectRatio: n = "16/9",
+  variant: t = "editorial",
+  className: d,
+  style: m,
+  ...p
+}) => {
+  const {
+    image: N,
+    eyebrow: r,
+    title: h,
+    description: s,
+    action: i,
+    overlay: c = "gradient"
+  } = o, v = [
+    e.card,
+    e[`variant-${t}`],
+    e[`aspect-${n.replace("/", "-")}`],
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("article", { className: v, style: m, ...p, children: [
+    /* @__PURE__ */ a("div", { className: e.imageWrapper, children: N }),
+    c !== "none" && /* @__PURE__ */ a("div", { className: `${e.overlay} ${e[`overlay-${c}`]}` }),
+    /* @__PURE__ */ l("div", { className: e.content, children: [
+      r && /* @__PURE__ */ a("span", { className: e.eyebrow, children: r }),
+      /* @__PURE__ */ a("h3", { className: e.cardTitle, children: h }),
+      s && /* @__PURE__ */ a("p", { className: e.cardDescription, children: s }),
+      i && /* @__PURE__ */ a("div", { className: e.action, children: i })
+    ] })
+  ] });
+};
+y.displayName = "CarouselCard";
+export {
+  y as CarouselCard
+};

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Carousel Component - Image/content slider.
+ *
+ * Atomic carousel component for use within cards, modals, or custom layouts.
+ * For full-page carousel sections, use CarouselSection from sections.
+ *
+ * @example
+ * ```tsx
+ * import { Carousel } from '@orion-ds/react';
+ *
+ * <Carousel
+ *   items={[
+ *     { id: '1', image: '/slide1.jpg', title: 'Slide 1' },
+ *     { id: '2', image: '/slide2.jpg', title: 'Slide 2' },
+ *     { id: '3', image: '/slide3.jpg', title: 'Slide 3' },
+ *   ]}
+ *   autoPlay
+ *   showNavigation
+ * />
+ * ```
+ */
+export { Carousel } from './Carousel';
+export { CarouselCard } from './CarouselCard';
+export type { CarouselProps, CarouselItem, CarouselCardProps, CarouselVariant, CarouselAspectRatio, CarouselGap, CarouselOverlay, CarouselAlign, CarouselNavigationProps, } from './Carousel.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,aAAa,EACb,uBAAuB,GACxB,MAAM,kBAAkB,CAAC"}

package/dist/components/Chart/Chart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),p=require("recharts"),R=require("./useResolvedChartColors.cjs"),t=require("./Chart.module.css.cjs"),f=h.createContext({}),j=({config:s,children:o,className:a,style:n,...l})=>{const{resolvedConfig:r,resolvedColorVars:i}=R.useResolvedChartColors(s),d=[t.default.container,a].filter(Boolean).join(" ");return e.jsx(f.Provider,{value:r,children:e.jsx("div",{role:"figure",className:d,style:{...i,...n},...l,children:e.jsx(p.ResponsiveContainer,{width:"100%",height:"100%",children:o})})})};j.displayName="ChartContainer";const v=({active:s,payload:o,label:a,indicator:n="dot",hideLabel:l=!1,hideIndicator:r=!1,labelFormatter:i,formatter:d,className:u})=>{const L=h.useContext(f);if(!s||!o?.length)return null;const b=[t.default.tooltip,u].filter(Boolean).join(" "),g=i?i(String(a)):a,T={dot:t.default.tooltipDot,line:t.default.tooltipLine,dashed:t.default.tooltipDashed}[n];return e.jsxs("div",{className:b,children:[!l&&g&&e.jsx("div",{className:t.default.tooltipLabel,children:g}),e.jsx("div",{className:t.default.tooltipItems,children:o.map(c=>{const C=String(c.dataKey||c.name),m=L[C],q=m?.label||C,I=d?d(c.value,C):String(c.value),x=c.color||m?.color;return e.jsxs("div",{className:t.default.tooltipItem,children:[!r&&e.jsx("span",{className:T,style:{backgroundColor:x,borderColor:x}}),e.jsx("span",{className:t.default.tooltipName,children:q}),e.jsx("span",{className:t.default.tooltipValue,children:I})]},C)})})]})};v.displayName="ChartTooltipContent";const N=({payload:s,className:o})=>{const a=h.useContext(f);if(!s?.length)return null;const n=[t.default.legend,o].filter(Boolean).join(" ");return e.jsx("div",{className:n,children:s.map(l=>{const r=l.dataKey||l.value,i=a[r],d=i?.label||r,u=l.color||i?.color;return e.jsxs("div",{className:t.default.legendItem,children:[e.jsx("span",{className:t.default.legendDot,style:{backgroundColor:u}}),e.jsx("span",{children:d})]},r)})})};N.displayName="ChartLegendContent";const y=({id:s,color:o,startOpacity:a=.4,endOpacity:n=.05})=>e.jsxs("linearGradient",{id:s,x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"5%",stopColor:o,stopOpacity:a}),e.jsx("stop",{offset:"95%",stopColor:o,stopOpacity:n})]});y.displayName="ChartGradient";const S=p.Tooltip,G=p.Legend;exports.ChartContainer=j;exports.ChartGradient=y;exports.ChartLegend=G;exports.ChartLegendContent=N;exports.ChartTooltip=S;exports.ChartTooltipContent=v;

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Tooltip, Legend } from 'recharts';
+import { ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartGradientProps } from './Chart.types';
+
+/**
+ * ChartContainer — wraps Recharts with CSS variable injection from config
+ */
+export declare const ChartContainer: React.FC<ChartContainerProps>;
+/**
+ * ChartTooltipContent — Orion-styled tooltip for Recharts
+ */
+export declare const ChartTooltipContent: React.FC<ChartTooltipContentProps>;
+/**
+ * ChartLegendContent — Orion-styled legend for Recharts
+ */
+export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;
+/**
+ * ChartGradient — SVG linearGradient helper for elegant area chart fills.
+ *
+ * Place inside `<defs>` within a Recharts chart, then reference via `fill="url(#id)"`.
+ *
+ * @example
+ * ```tsx
+ * <AreaChart data={data}>
+ *   <defs>
+ *     <ChartGradient id="fillRevenue" color="var(--chart-1)" />
+ *   </defs>
+ *   <Area dataKey="revenue" fill="url(#fillRevenue)" fillOpacity={1} />
+ * </AreaChart>
+ * ```
+ */
+export declare const ChartGradient: React.FC<ChartGradientProps>;
+export declare const ChartTooltip: typeof Tooltip;
+export declare const ChartLegend: typeof Legend;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/components/Chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAuB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAEV,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,eAAe,CAAC;AAOvB;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4BxD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwDlE,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8BhE,CAAC;AAIF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAUtD,CAAC;AAKF,eAAO,MAAM,YAAY,gBAAU,CAAC;AACpC,eAAO,MAAM,WAAW,eAAS,CAAC"}