@craftzbay/ui 0.10.0 → 0.11.0

package/dist-lib/components/ui/Carousel.js

@@ -1,143 +1,174 @@
 "use client";
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as b, useState as x, useCallback as k, useEffect as N, createContext as R, useContext as E } from "react";
-import L from "embla-carousel-react";
-import { ChevronRight as j, ChevronLeft as B } from "../../icons/index.js";
-import { cn as f } from "../../lib/utils.js";
-import { useStrings as d } from "../../hooks/use-strings.js";
-import { formatString as q } from "../../lib/strings.js";
-import { IconButton as h } from "./IconButton.js";
-const g = R(null);
-function C() {
-  const r = E(g);
-  if (!r) throw new Error("Carousel components must be used inside <Carousel>");
-  return r;
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as m, useState as x, useCallback as O, useEffect as P, createContext as T, useContext as U, version as _ } from "react";
+import q from "embla-carousel-react";
+import { ChevronRight as F, ChevronLeft as G } from "../../icons/index.js";
+import { cn as C } from "../../lib/utils.js";
+import { useStrings as b } from "../../hooks/use-strings.js";
+import { formatString as H } from "../../lib/strings.js";
+import { IconButton as g } from "./IconButton.js";
+const J = {
+  inert: Number(_.split(".")[0]) >= 19 ? !0 : ""
+}, p = T(null);
+function h() {
+  const f = U(p);
+  if (!f) throw new Error("Carousel components must be used inside <Carousel>");
+  return f;
 }
-const D = b(function({ opts: n, orientation: t = "horizontal", setApi: o, className: l, children: c, ...u }, m) {
-  const v = d(), [P, e] = L({
-    ...n,
-    axis: t === "horizontal" ? "x" : "y"
-  }), [z, I] = x(!1), [y, S] = x(!1), [p, w] = x(0), i = k((s) => {
-    s && (I(s.canScrollPrev()), S(s.canScrollNext()));
-  }, []);
-  return N(() => {
+const K = m(function({
+  opts: l,
+  orientation: o = "horizontal",
+  setApi: t,
+  className: s,
+  children: n,
+  onKeyDown: a,
+  "aria-label": d,
+  "aria-labelledby": i,
+  ...v
+}, w) {
+  const N = b(), [I, e] = q({
+    ...l,
+    axis: o === "horizontal" ? "x" : "y"
+  }), [y, z] = x(!1), [S, R] = x(!1), [k, V] = x(0), [E, L] = x([]), u = O((r) => {
+    r && (z(r.canScrollPrev()), R(r.canScrollNext()), L(r.slidesInView()));
+  }, []), j = (r) => {
+    if (a == null || a(r), r.defaultPrevented) return;
+    const B = o === "horizontal" ? "ArrowLeft" : "ArrowUp", D = o === "horizontal" ? "ArrowRight" : "ArrowDown";
+    r.key === B ? (r.preventDefault(), e == null || e.scrollPrev()) : r.key === D && (r.preventDefault(), e == null || e.scrollNext());
+  };
+  return P(() => {
     if (e)
-      return o == null || o(e), i(e), e.on("reInit", i).on("select", i), () => {
-        e.off("reInit", i).off("select", i);
+      return t == null || t(e), u(e), e.on("reInit", u).on("select", u).on("slidesInView", u), () => {
+        e.off("reInit", u).off("select", u).off("slidesInView", u);
       };
-  }, [e, i, o]), N(() => {
+  }, [e, u, t]), P(() => {
     if (!e) return;
-    const s = () => w(e.slideNodes().length);
-    return s(), e.on("reInit", s), () => {
-      e.off("reInit", s);
+    const r = () => V(e.slideNodes().length);
+    return r(), e.on("reInit", r), () => {
+      e.off("reInit", r);
     };
-  }, [e]), /* @__PURE__ */ a(
-    g.Provider,
+  }, [e]), /* @__PURE__ */ c(
+    p.Provider,
     {
       value: {
-        carouselRef: P,
+        carouselRef: I,
         api: e,
-        canPrev: z,
-        canNext: y,
+        canPrev: y,
+        canNext: S,
         scrollPrev: () => e == null ? void 0 : e.scrollPrev(),
         scrollNext: () => e == null ? void 0 : e.scrollNext(),
-        orientation: t,
-        slideCount: p
+        orientation: o,
+        slideCount: k,
+        inView: E
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ c(
         "div",
         {
-          ref: m,
-          className: f("relative", l),
+          ref: w,
+          className: C("relative isolate", s),
           role: "region",
           "aria-roledescription": "carousel",
-          "aria-label": u["aria-label"] ?? (u["aria-labelledby"] ? void 0 : v.carousel.label),
-          ...u,
-          children: c
+          "aria-label": d ?? (i ? void 0 : N.carousel.label),
+          "aria-labelledby": i,
+          onKeyDown: j,
+          ...v,
+          children: n
         }
       )
     }
   );
 });
-D.displayName = "Carousel";
-const F = b(
-  function({ className: n, ...t }, o) {
-    const { carouselRef: l, orientation: c } = C();
-    return /* @__PURE__ */ a("div", { ref: l, className: "overflow-hidden", children: /* @__PURE__ */ a(
+K.displayName = "Carousel";
+const M = m(
+  function({ className: l, ...o }, t) {
+    const { carouselRef: s, orientation: n } = h();
+    return /* @__PURE__ */ c("div", { ref: s, className: "overflow-hidden", children: /* @__PURE__ */ c(
       "div",
       {
-        ref: o,
-        className: f(
+        ref: t,
+        className: C(
           "flex",
-          c === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          n
+          n === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          l
         ),
-        ...t
+        ...o
       }
     ) });
   }
 );
-F.displayName = "CarouselContent";
-const G = b(function({ className: n, index: t, ...o }, l) {
-  const c = d(), { orientation: u, slideCount: m } = C(), v = t !== void 0 && m > 0 ? q(c.carousel.slide, { index: t + 1, count: m }) : void 0;
-  return /* @__PURE__ */ a(
+M.displayName = "CarouselContent";
+const Q = m(function({ className: l, index: o, "aria-label": t, ...s }, n) {
+  const a = b(), { orientation: d, slideCount: i, inView: v } = h(), w = o !== void 0 && i > 0 ? H(a.carousel.slide, { index: o + 1, count: i }) : void 0, N = o !== void 0 && v.length > 0 && !v.includes(o);
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: l,
+      ref: n,
       role: "group",
       "aria-roledescription": "slide",
-      "aria-label": o["aria-label"] ?? v,
-      className: f(
+      "aria-label": t ?? w,
+      "aria-hidden": N || void 0,
+      ...N ? J : void 0,
+      className: C(
         "min-w-0 shrink-0 grow-0 basis-full",
-        u === "horizontal" ? "pl-4" : "pt-4",
-        n
+        d === "horizontal" ? "pl-4" : "pt-4",
+        l
       ),
-      ...o
+      ...s
     }
   );
 });
-G.displayName = "CarouselItem";
-function V({ className: r }) {
-  const { canPrev: n, scrollPrev: t, orientation: o } = C(), l = d();
-  return /* @__PURE__ */ a(
-    h,
-    {
-      "aria-label": l.carousel.previous,
-      variant: "outline",
-      disabled: !n,
-      onClick: t,
-      icon: /* @__PURE__ */ a(B, {}),
-      className: f(
-        "absolute z-10",
-        o === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        r
-      )
-    }
-  );
-}
-function W({ className: r }) {
-  const { canNext: n, scrollNext: t, orientation: o } = C(), l = d();
-  return /* @__PURE__ */ a(
-    h,
-    {
-      "aria-label": l.carousel.next,
-      variant: "outline",
-      disabled: !n,
-      onClick: t,
-      icon: /* @__PURE__ */ a(j, {}),
-      className: f(
-        "absolute z-10",
-        o === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        r
-      )
-    }
-  );
-}
+Q.displayName = "CarouselItem";
+const W = m(
+  function({ className: l, "aria-label": o, ...t }, s) {
+    const { canPrev: n, scrollPrev: a, orientation: d } = h(), i = b();
+    return /* @__PURE__ */ c(
+      g,
+      {
+        ref: s,
+        "aria-label": o ?? i.carousel.previous,
+        variant: "outline",
+        disabled: !n,
+        onClick: a,
+        icon: /* @__PURE__ */ c(G, {}),
+        className: C(
+          "absolute z-10",
+          d === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          l
+        ),
+        ...t
+      }
+    );
+  }
+);
+W.displayName = "CarouselPrevious";
+const X = m(
+  function({ className: l, "aria-label": o, ...t }, s) {
+    const { canNext: n, scrollNext: a, orientation: d } = h(), i = b();
+    return /* @__PURE__ */ c(
+      g,
+      {
+        ref: s,
+        "aria-label": o ?? i.carousel.next,
+        variant: "outline",
+        disabled: !n,
+        onClick: a,
+        icon: /* @__PURE__ */ c(F, {}),
+        className: C(
+          "absolute z-10",
+          d === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          l
+        ),
+        ...t
+      }
+    );
+  }
+);
+X.displayName = "CarouselNext";
 export {
-  D as Carousel,
-  F as CarouselContent,
-  G as CarouselItem,
-  W as CarouselNext,
-  V as CarouselPrevious
+  K as Carousel,
+  M as CarouselContent,
+  Q as CarouselItem,
+  X as CarouselNext,
+  W as CarouselPrevious
 };
 //# sourceMappingURL=Carousel.js.map

package/dist-lib/components/ui/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/components/ui/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { ChevronLeft, ChevronRight } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { IconButton } from './IconButton';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype CarouselOptions = Parameters<typeof useEmblaCarousel>[0];\n\ninterface CarouselContextValue {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: CarouselApi;\n  canPrev: boolean;\n  canNext: boolean;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  orientation: 'horizontal' | 'vertical';\n  slideCount: number;\n}\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside <Carousel>');\n  return ctx;\n}\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  opts?: CarouselOptions;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n}\n\n/**\n * Embla-backed carousel. Compose with `<CarouselContent>`, `<CarouselItem>`,\n * `<CarouselPrevious>`, and `<CarouselNext>`.\n */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(\n  { opts, orientation = 'horizontal', setApi, className, children, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const [carouselRef, api] = useEmblaCarousel({\n    ...opts,\n    axis: orientation === 'horizontal' ? 'x' : 'y',\n  });\n  const [canPrev, setCanPrev] = useState(false);\n  const [canNext, setCanNext] = useState(false);\n  const [slideCount, setSlideCount] = useState(0);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanPrev(api.canScrollPrev());\n    setCanNext(api.canScrollNext());\n  }, []);\n\n  useEffect(() => {\n    if (!api) return;\n    setApi?.(api);\n    onSelect(api);\n    api.on('reInit', onSelect).on('select', onSelect);\n    return () => {\n      api.off('reInit', onSelect).off('select', onSelect);\n    };\n  }, [api, onSelect, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    const count = () => setSlideCount(api.slideNodes().length);\n    count();\n    api.on('reInit', count);\n    return () => {\n      api.off('reInit', count);\n    };\n  }, [api]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api,\n        canPrev,\n        canNext,\n        scrollPrev: () => api?.scrollPrev(),\n        scrollNext: () => api?.scrollNext(),\n        orientation,\n        slideCount,\n      }}\n    >\n      <div\n        ref={ref}\n        className={cn('relative', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={props['aria-label'] ?? (props['aria-labelledby'] ? undefined : strings.carousel.label)}\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n});\nCarousel.displayName = 'Carousel';\n\nexport const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CarouselContent({ className, ...props }, ref) {\n    const { carouselRef, orientation } = useCarousel();\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\n            'flex',\n            orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n            className,\n          )}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nCarouselContent.displayName = 'CarouselContent';\n\nexport interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** 0-based position, used for the default \"{i+1} of {n}\" label. */\n  index?: number;\n}\n\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(function CarouselItem(\n  { className, index, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const { orientation, slideCount } = useCarousel();\n  const defaultLabel =\n    index !== undefined && slideCount > 0\n      ? formatString(strings.carousel.slide, { index: index + 1, count: slideCount })\n      : undefined;\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      aria-label={props['aria-label'] ?? defaultLabel}\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = 'CarouselItem';\n\nexport function CarouselPrevious({ className }: { className?: string }) {\n  const { canPrev, scrollPrev, orientation } = useCarousel();\n  const strings = useStrings();\n  return (\n    <IconButton\n      aria-label={strings.carousel.previous}\n      variant=\"outline\"\n      disabled={!canPrev}\n      onClick={scrollPrev}\n      icon={<ChevronLeft />}\n      className={cn(\n        'absolute z-10',\n        orientation === 'horizontal'\n          ? 'top-1/2 -left-12 -translate-y-1/2'\n          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n    />\n  );\n}\n\nexport function CarouselNext({ className }: { className?: string }) {\n  const { canNext, scrollNext, orientation } = useCarousel();\n  const strings = useStrings();\n  return (\n    <IconButton\n      aria-label={strings.carousel.next}\n      variant=\"outline\"\n      disabled={!canNext}\n      onClick={scrollNext}\n      icon={<ChevronRight />}\n      className={cn(\n        'absolute z-10',\n        orientation === 'horizontal'\n          ? 'top-1/2 -right-12 -translate-y-1/2'\n          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n    />\n  );\n}\n"],"names":["CarouselContext","createContext","useCarousel","ctx","useContext","Carousel","forwardRef","opts","orientation","setApi","className","children","props","ref","strings","useStrings","carouselRef","api","useEmblaCarousel","canPrev","setCanPrev","useState","canNext","setCanNext","slideCount","setSlideCount","onSelect","useCallback","useEffect","count","jsx","cn","CarouselContent","CarouselItem","index","defaultLabel","formatString","CarouselPrevious","scrollPrev","IconButton","ChevronLeft","CarouselNext","scrollNext","ChevronRight"],"mappings":";;;;;;;;;AAgCA,MAAMA,IAAkBC,EAA2C,IAAI;AAEvE,SAASC,IAAc;AACrB,QAAMC,IAAMC,EAAWJ,CAAe;AACtC,MAAI,CAACG,EAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAOA;AACT;AAYO,MAAME,IAAWC,EAA0C,SAChE,EAAE,MAAAC,GAAM,aAAAC,IAAc,cAAc,QAAAC,GAAQ,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACpEC,GACA;AACA,QAAMC,IAAUC,EAAA,GACV,CAACC,GAAaC,CAAG,IAAIC,EAAiB;AAAA,IAC1C,GAAGX;AAAA,IACH,MAAMC,MAAgB,eAAe,MAAM;AAAA,EAAA,CAC5C,GACK,CAACW,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GACtC,CAACG,GAAYC,CAAa,IAAIJ,EAAS,CAAC,GAExCK,IAAWC,EAAY,CAACV,MAAqB;AACjD,IAAKA,MACLG,EAAWH,EAAI,eAAe,GAC9BM,EAAWN,EAAI,eAAe;AAAA,EAChC,GAAG,CAAA,CAAE;AAEL,SAAAW,EAAU,MAAM;AACd,QAAKX;AACL,aAAAR,KAAA,QAAAA,EAASQ,IACTS,EAAST,CAAG,GACZA,EAAI,GAAG,UAAUS,CAAQ,EAAE,GAAG,UAAUA,CAAQ,GACzC,MAAM;AACX,QAAAT,EAAI,IAAI,UAAUS,CAAQ,EAAE,IAAI,UAAUA,CAAQ;AAAA,MACpD;AAAA,EACF,GAAG,CAACT,GAAKS,GAAUjB,CAAM,CAAC,GAE1BmB,EAAU,MAAM;AACd,QAAI,CAACX,EAAK;AACV,UAAMY,IAAQ,MAAMJ,EAAcR,EAAI,WAAA,EAAa,MAAM;AACzD,WAAAY,EAAA,GACAZ,EAAI,GAAG,UAAUY,CAAK,GACf,MAAM;AACX,MAAAZ,EAAI,IAAI,UAAUY,CAAK;AAAA,IACzB;AAAA,EACF,GAAG,CAACZ,CAAG,CAAC,GAGN,gBAAAa;AAAA,IAAC9B,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO;AAAA,QACL,aAAAgB;AAAA,QACA,KAAAC;AAAA,QACA,SAAAE;AAAA,QACA,SAAAG;AAAA,QACA,YAAY,MAAML,KAAA,gBAAAA,EAAK;AAAA,QACvB,YAAY,MAAMA,KAAA,gBAAAA,EAAK;AAAA,QACvB,aAAAT;AAAA,QACA,YAAAgB;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,WAAWkB,EAAG,YAAYrB,CAAS;AAAA,UACnC,MAAK;AAAA,UACL,wBAAqB;AAAA,UACrB,cAAYE,EAAM,YAAY,MAAMA,EAAM,iBAAiB,IAAI,SAAYE,EAAQ,SAAS;AAAA,UAC3F,GAAGF;AAAA,UAEH,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACDN,EAAS,cAAc;AAEhB,MAAM2B,IAAkB1B;AAAA,EAC7B,SAAyB,EAAE,WAAAI,GAAW,GAAGE,EAAA,GAASC,GAAK;AACrD,UAAM,EAAE,aAAAG,GAAa,aAAAR,EAAA,IAAgBN,EAAA;AACrC,WACE,gBAAA4B,EAAC,OAAA,EAAI,KAAKd,GAAa,WAAU,mBAC/B,UAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAjB;AAAA,QACA,WAAWkB;AAAA,UACT;AAAA,UACAvB,MAAgB,eAAe,UAAU;AAAA,UACzCE;AAAA,QAAA;AAAA,QAED,GAAGE;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAEJ;AACF;AACAoB,EAAgB,cAAc;AAOvB,MAAMC,IAAe3B,EAA8C,SACxE,EAAE,WAAAI,GAAW,OAAAwB,GAAO,GAAGtB,EAAA,GACvBC,GACA;AACA,QAAMC,IAAUC,EAAA,GACV,EAAE,aAAAP,GAAa,YAAAgB,EAAA,IAAetB,EAAA,GAC9BiC,IACJD,MAAU,UAAaV,IAAa,IAChCY,EAAatB,EAAQ,SAAS,OAAO,EAAE,OAAOoB,IAAQ,GAAG,OAAOV,EAAA,CAAY,IAC5E;AACN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,MAAK;AAAA,MACL,wBAAqB;AAAA,MACrB,cAAYD,EAAM,YAAY,KAAKuB;AAAA,MACnC,WAAWJ;AAAA,QACT;AAAA,QACAvB,MAAgB,eAAe,SAAS;AAAA,QACxCE;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDqB,EAAa,cAAc;AAEpB,SAASI,EAAiB,EAAE,WAAA3B,KAAqC;AACtE,QAAM,EAAE,SAAAS,GAAS,YAAAmB,GAAY,aAAA9B,EAAA,IAAgBN,EAAA,GACvCY,IAAUC,EAAA;AAChB,SACE,gBAAAe;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,cAAYzB,EAAQ,SAAS;AAAA,MAC7B,SAAQ;AAAA,MACR,UAAU,CAACK;AAAA,MACX,SAASmB;AAAA,MACT,wBAAOE,GAAA,EAAY;AAAA,MACnB,WAAWT;AAAA,QACT;AAAA,QACAvB,MAAgB,eACZ,sCACA;AAAA,QACJE;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEO,SAAS+B,EAAa,EAAE,WAAA/B,KAAqC;AAClE,QAAM,EAAE,SAAAY,GAAS,YAAAoB,GAAY,aAAAlC,EAAA,IAAgBN,EAAA,GACvCY,IAAUC,EAAA;AAChB,SACE,gBAAAe;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,cAAYzB,EAAQ,SAAS;AAAA,MAC7B,SAAQ;AAAA,MACR,UAAU,CAACQ;AAAA,MACX,SAASoB;AAAA,MACT,wBAAOC,GAAA,EAAa;AAAA,MACpB,WAAWZ;AAAA,QACT;AAAA,QACAvB,MAAgB,eACZ,uCACA;AAAA,QACJE;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/ui/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n  type HTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n} from 'react';\nimport { version as reactVersion } from 'react';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { ChevronLeft, ChevronRight } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { IconButton } from './IconButton';\n\n// `inert` is a boolean attribute. React 19 renders `inert={true}` as `inert=\"\"`;\n// React 18 has no knowledge of it and only forwards a string, so pass `''`\n// there (it would drop `true` with a warning). Typed loosely for both.\nconst INERT_PROPS = {\n  inert: Number(reactVersion.split('.')[0]) >= 19 ? true : '',\n} as Record<string, unknown>;\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype CarouselOptions = Parameters<typeof useEmblaCarousel>[0];\n\ninterface CarouselContextValue {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: CarouselApi;\n  canPrev: boolean;\n  canNext: boolean;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  orientation: 'horizontal' | 'vertical';\n  slideCount: number;\n  /** Indices of slides currently in view (others are inert). */\n  inView: number[];\n}\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside <Carousel>');\n  return ctx;\n}\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  opts?: CarouselOptions;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n}\n\n/**\n * Embla-backed carousel. Compose with `<CarouselContent>`, `<CarouselItem>`,\n * `<CarouselPrevious>`, and `<CarouselNext>`.\n */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(\n  {\n    opts,\n    orientation = 'horizontal',\n    setApi,\n    className,\n    children,\n    onKeyDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const [carouselRef, api] = useEmblaCarousel({\n    ...opts,\n    axis: orientation === 'horizontal' ? 'x' : 'y',\n  });\n  const [canPrev, setCanPrev] = useState(false);\n  const [canNext, setCanNext] = useState(false);\n  const [slideCount, setSlideCount] = useState(0);\n  const [inView, setInView] = useState<number[]>([]);\n\n  const onSelect = useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanPrev(api.canScrollPrev());\n    setCanNext(api.canScrollNext());\n    setInView(api.slidesInView());\n  }, []);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n    if (event.key === prevKey) {\n      event.preventDefault();\n      api?.scrollPrev();\n    } else if (event.key === nextKey) {\n      event.preventDefault();\n      api?.scrollNext();\n    }\n  };\n\n  useEffect(() => {\n    if (!api) return;\n    setApi?.(api);\n    onSelect(api);\n    api.on('reInit', onSelect).on('select', onSelect).on('slidesInView', onSelect);\n    return () => {\n      api.off('reInit', onSelect).off('select', onSelect).off('slidesInView', onSelect);\n    };\n  }, [api, onSelect, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    const count = () => setSlideCount(api.slideNodes().length);\n    count();\n    api.on('reInit', count);\n    return () => {\n      api.off('reInit', count);\n    };\n  }, [api]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api,\n        canPrev,\n        canNext,\n        scrollPrev: () => api?.scrollPrev(),\n        scrollNext: () => api?.scrollNext(),\n        orientation,\n        slideCount,\n        inView,\n      }}\n    >\n      {/* Arrow keys act only while focus is inside the region (it is not itself\n          focusable); the buttons remain the primary control. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        ref={ref}\n        className={cn('relative isolate', className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={ariaLabel ?? (ariaLabelledby ? undefined : strings.carousel.label)}\n        aria-labelledby={ariaLabelledby}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n});\nCarousel.displayName = 'Carousel';\n\nexport const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CarouselContent({ className, ...props }, ref) {\n    const { carouselRef, orientation } = useCarousel();\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\n            'flex',\n            orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n            className,\n          )}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nCarouselContent.displayName = 'CarouselContent';\n\nexport interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** 0-based position, used for the default \"{i+1} of {n}\" label. */\n  index?: number;\n}\n\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(function CarouselItem(\n  { className, index, 'aria-label': ariaLabel, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const { orientation, slideCount, inView } = useCarousel();\n  const defaultLabel =\n    index !== undefined && slideCount > 0\n      ? formatString(strings.carousel.slide, { index: index + 1, count: slideCount })\n      : undefined;\n  // Off-screen slides are inert: not in the tab order, not read by AT. Only\n  // possible when `index` is provided (unknown index → always live).\n  const offscreen = index !== undefined && inView.length > 0 && !inView.includes(index);\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      aria-label={ariaLabel ?? defaultLabel}\n      aria-hidden={offscreen || undefined}\n      {...(offscreen ? INERT_PROPS : undefined)}\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCarouselItem.displayName = 'CarouselItem';\n\ntype CarouselButtonProps = Omit<\n  ComponentPropsWithoutRef<typeof IconButton>,\n  'icon' | 'aria-label'\n> & { 'aria-label'?: string };\n\nexport const CarouselPrevious = forwardRef<HTMLButtonElement, CarouselButtonProps>(\n  function CarouselPrevious({ className, 'aria-label': ariaLabel, ...props }, ref) {\n    const { canPrev, scrollPrev, orientation } = useCarousel();\n    const strings = useStrings();\n    return (\n      <IconButton\n        ref={ref}\n        aria-label={ariaLabel ?? strings.carousel.previous}\n        variant=\"outline\"\n        disabled={!canPrev}\n        onClick={scrollPrev}\n        icon={<ChevronLeft />}\n        className={cn(\n          'absolute z-10',\n          orientation === 'horizontal'\n            ? 'top-1/2 -left-12 -translate-y-1/2'\n            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCarouselPrevious.displayName = 'CarouselPrevious';\n\nexport const CarouselNext = forwardRef<HTMLButtonElement, CarouselButtonProps>(\n  function CarouselNext({ className, 'aria-label': ariaLabel, ...props }, ref) {\n    const { canNext, scrollNext, orientation } = useCarousel();\n    const strings = useStrings();\n    return (\n      <IconButton\n        ref={ref}\n        aria-label={ariaLabel ?? strings.carousel.next}\n        variant=\"outline\"\n        disabled={!canNext}\n        onClick={scrollNext}\n        icon={<ChevronRight />}\n        className={cn(\n          'absolute z-10',\n          orientation === 'horizontal'\n            ? 'top-1/2 -right-12 -translate-y-1/2'\n            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCarouselNext.displayName = 'CarouselNext';\n"],"names":["INERT_PROPS","reactVersion","CarouselContext","createContext","useCarousel","ctx","useContext","Carousel","forwardRef","opts","orientation","setApi","className","children","onKeyDown","ariaLabel","ariaLabelledby","props","ref","strings","useStrings","carouselRef","api","useEmblaCarousel","canPrev","setCanPrev","useState","canNext","setCanNext","slideCount","setSlideCount","inView","setInView","onSelect","useCallback","handleKeyDown","event","prevKey","nextKey","useEffect","count","jsx","cn","CarouselContent","CarouselItem","index","defaultLabel","formatString","offscreen","CarouselPrevious","scrollPrev","IconButton","ChevronLeft","CarouselNext","scrollNext","ChevronRight"],"mappings":"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"}

package/dist-lib/components/ui/Chart.d.ts

@@ -2,27 +2,46 @@ import { ReactNode } from 'react';
 /**
  * Tiny, dependency-free chart primitives for inline dashboards — sparklines,
  * KPI cards, at-a-glance trends. For heavy interactive visualisations reach for
- * a charting library. These render as responsive SVG (the line/area stretch to
- * the container width; strokes stay crisp via non-scaling-stroke).
+ * a charting library. The SVG is drawn in real pixels: a ResizeObserver
+ * measures the container width, so points and bars are never distorted.
+ *
+ * Keyboard: one tab stop per series; ←/→ (Home/End) move between points and
+ * the active point is announced via a polite live region.
  */
 export interface ChartPoint {
     x: string | number;
-    y: number;
+    /** `null` breaks the line (a gap) and is skipped in bars/tables. */
+    y: number | null;
 }
 export interface ChartSeries {
-    /** Name used in the accessible summary and tooltips. */
+    /** Name used in the accessible summary, table header and tooltips. */
     name?: string;
     data: ChartPoint[];
 }
+export type ChartState = 'loading' | 'empty' | 'error';
+/** Text builders for the accessible summary + point labels (i18n). */
+export interface ChartLabels {
+    /** `<desc>` sentence per series. */
+    summary: (s: {
+        name: string;
+        count: number;
+        min: number;
+        max: number;
+        lastX: string | number | undefined;
+        lastY: number | undefined;
+    }) => string;
+    /** Label of one data point (tooltip, live region). */
+    point: (name: string | undefined, x: string | number, y: number) => string;
+    /** Accessible name of a series' tab stop. */
+    series: (name: string, count: number) => string;
+}
+export declare const defaultChartLabels: ChartLabels;
 export interface ChartProps {
     /** Primary series. Ignored when `series` is provided. */
     data?: ChartPoint[];
     /** Multiple series drawn on the same scale. */
     series?: ChartSeries[];
-    /**
-     * Per-series colours. Defaults to the categorical token list below.
-     * TODO(globals.css): add `--chart-1..6` tokens and switch the defaults.
-     */
+    /** Per-series colours. Defaults to `--chart-1..6` (categorical; never the accent). */
     colors?: string[];
     /** Drawing height in px. */
     height?: number;
@@ -38,11 +57,31 @@ export interface ChartProps {
     grid?: boolean;
     /** Y-axis tick labels + first/last x labels. Default true. */
     showAxis?: boolean;
+    /**
+     * Render a visually-hidden `<table>` of the data after the SVG so screen
+     * readers and copy/paste get the numbers. Default true.
+     */
+    tableFallback?: boolean;
+    /** Show a small "View as table" toggle that reveals the fallback table. */
+    showTableToggle?: boolean;
+    /** Replace the drawing with a loading skeleton / empty / error message. */
+    state?: ChartState;
+    /** Override the generated accessible text (English defaults). */
+    labels?: Partial<ChartLabels>;
     className?: string;
 }
 export declare const DEFAULT_CHART_COLORS: string[];
 /** 1234 → "1.2K", 3_400_000 → "3.4M". */
 export declare function abbreviateNumber(n: number): string;
-export declare function LineChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * "Nice" axis: expands [min, max] to multiples of a 1/2/2.5/5 step so ticks
+ * read as round numbers (never `754.5`).
+ */
+export declare function niceTicks(min: number, max: number, maxTicks?: number): {
+    min: number;
+    max: number;
+    ticks: number[];
+};
+export declare function LineChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, tableFallback, showTableToggle, state, labels: labelsProp, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;
 export declare function AreaChart(props: ChartProps): import("react/jsx-runtime").JSX.Element;
-export declare function BarChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart({ data, series, colors, height, width, caption, 'aria-label': ariaLabel, title, grid, showAxis, tableFallback, showTableToggle, state, labels: labelsProp, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;