@craftzbay/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,174 @@
+"use client";
+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 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 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, u, t]), P(() => {
+    if (!e) return;
+    const r = () => V(e.slideNodes().length);
+    return r(), e.on("reInit", r), () => {
+      e.off("reInit", r);
+    };
+  }, [e]), /* @__PURE__ */ c(
+    p.Provider,
+    {
+      value: {
+        carouselRef: I,
+        api: e,
+        canPrev: y,
+        canNext: S,
+        scrollPrev: () => e == null ? void 0 : e.scrollPrev(),
+        scrollNext: () => e == null ? void 0 : e.scrollNext(),
+        orientation: o,
+        slideCount: k,
+        inView: E
+      },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          ref: w,
+          className: C("relative isolate", s),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": d ?? (i ? void 0 : N.carousel.label),
+          "aria-labelledby": i,
+          onKeyDown: j,
+          ...v,
+          children: n
+        }
+      )
+    }
+  );
+});
+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: t,
+        className: C(
+          "flex",
+          n === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          l
+        ),
+        ...o
+      }
+    ) });
+  }
+);
+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: n,
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": t ?? w,
+      "aria-hidden": N || void 0,
+      ...N ? J : void 0,
+      className: C(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        d === "horizontal" ? "pl-4" : "pt-4",
+        l
+      ),
+      ...s
+    }
+  );
+});
+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 {
+  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

@@ -0,0 +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  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,25 +2,86 @@ 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 ChartProps {
+export interface ChartSeries {
+    /** 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 `--chart-1..6` (categorical; never the accent). */
+    colors?: string[];
     /** Drawing height in px. */
     height?: number;
     /** Defaults to fluid 100%. */
     width?: number | string;
-    /** Tooltip / label rendered above the chart. */
+    /** Visible caption rendered above the chart. Doubles as the accessible name. */
     caption?: ReactNode;
+    /** Accessible name when there is no `caption`. */
+    'aria-label'?: string;
+    /** Alias of `aria-label` (SVG `<title>`). */
+    title?: string;
     /** Faint horizontal gridlines. Default true. */
     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 function LineChart({ data, height, width, caption, grid, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_CHART_COLORS: string[];
+/** 1234 → "1.2K", 3_400_000 → "3.4M". */
+export declare function abbreviateNumber(n: number): string;
+/**
+ * "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, height, width, caption, grid, 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;