@giddaa-housing/ui 0.1.0

package/dist/carousel.js

@@ -0,0 +1,396 @@
+// src/components/ui/carousel.tsx
+import { cva } from "class-variance-authority";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/carousel.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
+var carouselVariants = cva(
+  "relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
+  {
+    variants: {
+      imageSize: {
+        sm: "w-[320px] max-w-full aspect-[320/220]",
+        md: "w-[520px] max-w-full aspect-[520/340]",
+        lg: "w-[800px] max-w-full aspect-[800/500]",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      imageSize: "md"
+    }
+  }
+);
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  size,
+  imageSize,
+  className,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React.useState([]);
+  const onSelect = React.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+    setSelectedIndex(api2.selectedScrollSnap());
+  }, []);
+  const onReInit = React.useCallback(
+    (api2) => {
+      if (!api2) return;
+      setScrollSnaps(api2.scrollSnapList());
+      onSelect(api2);
+    },
+    [onSelect]
+  );
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const scrollTo = React.useCallback(
+    (index) => {
+      api?.scrollTo(index);
+    },
+    [api]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onReInit(api);
+    api.on("reInit", onReInit);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("reInit", onReInit);
+      api?.off("select", onSelect);
+    };
+  }, [api, onReInit, onSelect]);
+  return /* @__PURE__ */ jsx2(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        orientation,
+        size: resolvedSize,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps
+      },
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn(carouselVariants({ imageSize }), className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: carouselRef,
+      className: "h-full overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cn(
+            "flex h-full",
+            orientation === "horizontal" ? "" : "flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        role: "group",
+        "aria-roledescription": "slide",
+        "data-slot": "carousel-item",
+        className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+        ...props
+      }
+    )
+  );
+}
+var arrowVariants = cva(
+  cn(
+    "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
+    glassChrome,
+    "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "size-8 [&_svg]:size-4",
+        md: "size-10 [&_svg]:size-[18px]",
+        lg: "size-12 [&_svg]:size-5"
+      },
+      side: {
+        prev: "",
+        next: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", side: "prev", className: "left-3" },
+      { size: "sm", side: "next", className: "right-3" },
+      { size: "md", side: "prev", className: "left-4" },
+      { size: "md", side: "next", className: "right-4" },
+      { size: "lg", side: "prev", className: "left-5" },
+      { size: "lg", side: "next", className: "right-5" }
+    ],
+    defaultVariants: {
+      size: "md",
+      side: "prev"
+    }
+  }
+);
+function CarouselPrevious({
+  className,
+  ...props
+}) {
+  const { size, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "carousel-previous",
+      className: cn(arrowVariants({ size, side: "prev" }), className),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(ChevronLeftIcon, { className: "cn-rtl-flip" }),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({ className, ...props }) {
+  const { size, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "carousel-next",
+      className: cn(arrowVariants({ size, side: "next" }), className),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "cn-rtl-flip" }),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+var MANY_THRESHOLD = 5;
+var MANY_WINDOW = 5;
+function getIndicatorWindow(count, selected) {
+  if (count < MANY_THRESHOLD) {
+    const dots2 = Array.from({ length: count }, (_, index) => ({
+      index,
+      faded: false
+    }));
+    return { dots: dots2, start: 0, visible: count };
+  }
+  const half = Math.floor(MANY_WINDOW / 2);
+  const start = Math.max(0, Math.min(selected - half, count - MANY_WINDOW));
+  const end = start + MANY_WINDOW - 1;
+  const overflowLeft = start > 0;
+  const overflowRight = end < count - 1;
+  const dots = Array.from({ length: count }, (_, index) => ({
+    index,
+    faded: overflowLeft && index === start || overflowRight && index === end
+  }));
+  return { dots, start, visible: MANY_WINDOW };
+}
+var INDICATOR_SIZES = {
+  sm: { dot: 5, gap: 4, padX: 8, padY: 4 },
+  md: { dot: 7, gap: 5, padX: 10, padY: 5 },
+  lg: { dot: 9, gap: 6, padX: 12, padY: 6 }
+};
+var INDICATOR_OFFSET = {
+  sm: "bottom-3",
+  md: "bottom-[18px]",
+  lg: "bottom-6"
+};
+function CarouselIndicator({
+  className,
+  count: countProp,
+  selected: selectedProp,
+  size: sizeProp,
+  onSelect,
+  ...props
+}) {
+  const ctx = React.useContext(CarouselContext);
+  const inheritedSize = useComponentSize(sizeProp);
+  const size = sizeProp ?? ctx?.size ?? inheritedSize;
+  const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
+  const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
+  const handleSelect = onSelect ?? ctx?.scrollTo;
+  if (count <= 1) return null;
+  const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
+  const { dots, start, visible } = getIndicatorWindow(count, selected);
+  const step = dot + gap;
+  const viewportWidth = visible * step - gap;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "carousel-indicator",
+      className: cn(
+        "absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full",
+        INDICATOR_OFFSET[size],
+        glassChrome,
+        className
+      ),
+      style: { padding: `${padY}px ${padX}px` },
+      role: "tablist",
+      "aria-label": "Slide indicators",
+      ...props,
+      children: /* @__PURE__ */ jsx2("div", { className: "overflow-hidden", style: { width: viewportWidth }, children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "flex items-center transition-transform duration-300 ease-out",
+          style: { gap, transform: `translateX(${-start * step}px)` },
+          children: dots.map(({ index, faded }) => {
+            const isActive = index === selected;
+            return /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": isActive,
+                "aria-label": `Go to slide ${index + 1}`,
+                onClick: () => handleSelect?.(index),
+                className: cn(
+                  "shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out",
+                  handleSelect ? "cursor-pointer" : "cursor-default"
+                ),
+                style: {
+                  width: dot,
+                  height: dot,
+                  opacity: faded ? 0.3 : isActive ? 1 : 0.55,
+                  transform: faded ? "scale(0.6)" : "scale(1)"
+                }
+              },
+              index
+            );
+          })
+        }
+      ) })
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselIndicator,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel
+};
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/carousel.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport useEmblaCarousel, {\n\ttype UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\n/**\n * Shared glassmorphic treatment for every overlay surface in the carousel\n * (navigation arrows + indicator). Dark glass at 35% over a 16px backdrop\n * blur with a near-invisible 18% light border that lifts the chrome off the\n * imagery. Always dark, in both themes — see `--color-surface-glass-overlay-button`.\n */\nconst glassChrome =\n\t\"border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]\";\n\nconst carouselVariants = cva(\n\t\"relative overflow-hidden rounded-2xl bg-surface-brand-subtle\",\n\t{\n\t\tvariants: {\n\t\t\timageSize: {\n\t\t\t\tsm: \"w-[320px] max-w-full aspect-[320/220]\",\n\t\t\t\tmd: \"w-[520px] max-w-full aspect-[520/340]\",\n\t\t\t\tlg: \"w-[800px] max-w-full aspect-[800/500]\",\n\t\t\t\tfull: \"w-full\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\timageSize: \"md\",\n\t\t},\n\t},\n);\n\ntype CarouselContextProps = {\n\tcarouselRef: ReturnType<typeof useEmblaCarousel>[0];\n\tapi: CarouselApi;\n\torientation: \"horizontal\" | \"vertical\";\n\tsize: ComponentSize;\n\tscrollPrev: () => void;\n\tscrollNext: () => void;\n\tscrollTo: (index: number) => void;\n\tcanScrollPrev: boolean;\n\tcanScrollNext: boolean;\n\tselectedIndex: number;\n\tscrollSnaps: number[];\n};\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n\tconst context = React.useContext(CarouselContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useCarousel must be used within a <Carousel />\");\n\t}\n\n\treturn context;\n}\n\ntype CarouselProps = {\n\topts?: CarouselOptions;\n\tplugins?: CarouselPlugin;\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** Scales the chrome (arrows + indicator) without touching the image. */\n\tsize?: ComponentSize;\n\tsetApi?: (api: CarouselApi) => void;\n};\n\nfunction Carousel({\n\torientation = \"horizontal\",\n\topts,\n\tsetApi,\n\tplugins,\n\tsize,\n\timageSize,\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> &\n\tCarouselProps &\n\tVariantProps<typeof carouselVariants>) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst [carouselRef, api] = useEmblaCarousel(\n\t\t{\n\t\t\t...opts,\n\t\t\taxis: orientation === \"horizontal\" ? \"x\" : \"y\",\n\t\t},\n\t\tplugins,\n\t);\n\tconst [canScrollPrev, setCanScrollPrev] = React.useState(false);\n\tconst [canScrollNext, setCanScrollNext] = React.useState(false);\n\tconst [selectedIndex, setSelectedIndex] = React.useState(0);\n\tconst [scrollSnaps, setScrollSnaps] = React.useState<number[]>([]);\n\n\tconst onSelect = React.useCallback((api: CarouselApi) => {\n\t\tif (!api) return;\n\t\tsetCanScrollPrev(api.canScrollPrev());\n\t\tsetCanScrollNext(api.canScrollNext());\n\t\tsetSelectedIndex(api.selectedScrollSnap());\n\t}, []);\n\n\tconst onReInit = React.useCallback(\n\t\t(api: CarouselApi) => {\n\t\t\tif (!api) return;\n\t\t\tsetScrollSnaps(api.scrollSnapList());\n\t\t\tonSelect(api);\n\t\t},\n\t\t[onSelect],\n\t);\n\n\tconst scrollPrev = React.useCallback(() => {\n\t\tapi?.scrollPrev();\n\t}, [api]);\n\n\tconst scrollNext = React.useCallback(() => {\n\t\tapi?.scrollNext();\n\t}, [api]);\n\n\tconst scrollTo = React.useCallback(\n\t\t(index: number) => {\n\t\t\tapi?.scrollTo(index);\n\t\t},\n\t\t[api],\n\t);\n\n\tconst handleKeyDown = React.useCallback(\n\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\tif (event.key === \"ArrowLeft\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollPrev();\n\t\t\t} else if (event.key === \"ArrowRight\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollNext();\n\t\t\t}\n\t\t},\n\t\t[scrollPrev, scrollNext],\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (!api || !setApi) return;\n\t\tsetApi(api);\n\t}, [api, setApi]);\n\n\tReact.useEffect(() => {\n\t\tif (!api) return;\n\t\tonReInit(api);\n\t\tapi.on(\"reInit\", onReInit);\n\t\tapi.on(\"select\", onSelect);\n\n\t\treturn () => {\n\t\t\tapi?.off(\"reInit\", onReInit);\n\t\t\tapi?.off(\"select\", onSelect);\n\t\t};\n\t}, [api, onReInit, onSelect]);\n\n\treturn (\n\t\t<CarouselContext.Provider\n\t\t\tvalue={{\n\t\t\t\tcarouselRef,\n\t\t\t\tapi,\n\t\t\t\torientation,\n\t\t\t\tsize: resolvedSize,\n\t\t\t\tscrollPrev,\n\t\t\t\tscrollNext,\n\t\t\t\tscrollTo,\n\t\t\t\tcanScrollPrev,\n\t\t\t\tcanScrollNext,\n\t\t\t\tselectedIndex,\n\t\t\t\tscrollSnaps,\n\t\t\t}}\n\t\t>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: the W3C carousel pattern is a region with aria-roledescription, not a generic landmark element. */}\n\t\t\t<div\n\t\t\t\tonKeyDownCapture={handleKeyDown}\n\t\t\t\tclassName={cn(carouselVariants({ imageSize }), className)}\n\t\t\t\trole=\"region\"\n\t\t\t\taria-roledescription=\"carousel\"\n\t\t\t\tdata-slot=\"carousel\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</CarouselContext.Provider>\n\t);\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n\tconst { carouselRef, orientation } = useCarousel();\n\n\treturn (\n\t\t<div\n\t\t\tref={carouselRef}\n\t\t\tclassName=\"h-full overflow-hidden\"\n\t\t\tdata-slot=\"carousel-content\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-full\",\n\t\t\t\t\torientation === \"horizontal\" ? \"\" : \"flex-col\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t// biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role=\"group\" with aria-roledescription per the W3C pattern, not a fieldset.\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-roledescription=\"slide\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cn(\"min-w-0 shrink-0 grow-0 basis-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst arrowVariants = cva(\n\tcn(\n\t\t\"absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none\",\n\t\tglassChrome,\n\t\t\"hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-8 [&_svg]:size-4\",\n\t\t\t\tmd: \"size-10 [&_svg]:size-[18px]\",\n\t\t\t\tlg: \"size-12 [&_svg]:size-5\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\tprev: \"\",\n\t\t\t\tnext: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{ size: \"sm\", side: \"prev\", className: \"left-3\" },\n\t\t\t{ size: \"sm\", side: \"next\", className: \"right-3\" },\n\t\t\t{ size: \"md\", side: \"prev\", className: \"left-4\" },\n\t\t\t{ size: \"md\", side: \"next\", className: \"right-4\" },\n\t\t\t{ size: \"lg\", side: \"prev\", className: \"left-5\" },\n\t\t\t{ size: \"lg\", side: \"next\", className: \"right-5\" },\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tside: \"prev\",\n\t\t},\n\t},\n);\n\nfunction CarouselPrevious({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"button\">) {\n\tconst { size, scrollPrev, canScrollPrev } = useCarousel();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tdata-slot=\"carousel-previous\"\n\t\t\tclassName={cn(arrowVariants({ size, side: \"prev\" }), className)}\n\t\t\tdisabled={!canScrollPrev}\n\t\t\tonClick={scrollPrev}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronLeftIcon className=\"cn-rtl-flip\" />\n\t\t\t<span className=\"sr-only\">Previous slide</span>\n\t\t</button>\n\t);\n}\n\nfunction CarouselNext({ className, ...props }: React.ComponentProps<\"button\">) {\n\tconst { size, scrollNext, canScrollNext } = useCarousel();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tdata-slot=\"carousel-next\"\n\t\t\tclassName={cn(arrowVariants({ size, side: \"next\" }), className)}\n\t\t\tdisabled={!canScrollNext}\n\t\t\tonClick={scrollNext}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronRightIcon className=\"cn-rtl-flip\" />\n\t\t\t<span className=\"sr-only\">Next slide</span>\n\t\t</button>\n\t);\n}\n\n/**\n * Past this many items the indicator switches from \"show every dot\" to the\n * Airbnb-style windowed mode: at most `MANY_WINDOW` dots, the active one kept\n * near the centre, and dots at a clipped edge faded down to imply more beyond.\n */\nconst MANY_THRESHOLD = 5;\nconst MANY_WINDOW = 5;\n\ntype IndicatorDot = {\n\t/** Index into the full list of slides. */\n\tindex: number;\n\t/** True for the outermost dot on a side that has hidden slides beyond it. */\n\tfaded: boolean;\n};\n\n/**\n * Returns the dots to render plus the window start, so the determinate and\n * windowed (\"many\") cases share one render path. The dot strip is always the\n * full list; `start` drives the translate that slides it under the viewport.\n */\nfunction getIndicatorWindow(count: number, selected: number) {\n\tif (count < MANY_THRESHOLD) {\n\t\tconst dots: IndicatorDot[] = Array.from({ length: count }, (_, index) => ({\n\t\t\tindex,\n\t\t\tfaded: false,\n\t\t}));\n\t\treturn { dots, start: 0, visible: count };\n\t}\n\n\tconst half = Math.floor(MANY_WINDOW / 2);\n\tconst start = Math.max(0, Math.min(selected - half, count - MANY_WINDOW));\n\tconst end = start + MANY_WINDOW - 1;\n\tconst overflowLeft = start > 0;\n\tconst overflowRight = end < count - 1;\n\n\tconst dots: IndicatorDot[] = Array.from({ length: count }, (_, index) => ({\n\t\tindex,\n\t\tfaded:\n\t\t\t(overflowLeft && index === start) || (overflowRight && index === end),\n\t}));\n\n\treturn { dots, start, visible: MANY_WINDOW };\n}\n\n/** Dot diameter, gap, and pill padding per size — in px to keep them crisp. */\nconst INDICATOR_SIZES: Record<\n\tComponentSize,\n\t{ dot: number; gap: number; padX: number; padY: number }\n> = {\n\tsm: { dot: 5, gap: 4, padX: 8, padY: 4 },\n\tmd: { dot: 7, gap: 5, padX: 10, padY: 5 },\n\tlg: { dot: 9, gap: 6, padX: 12, padY: 6 },\n};\n\n/** Distance of the indicator from the bottom edge, per size (12/18/24px). */\nconst INDICATOR_OFFSET: Record<ComponentSize, string> = {\n\tsm: \"bottom-3\",\n\tmd: \"bottom-[18px]\",\n\tlg: \"bottom-6\",\n};\n\ntype CarouselIndicatorProps = Omit<\n\tReact.ComponentProps<\"div\">,\n\t\"children\" | \"onSelect\"\n> & {\n\t/** Override the live count (e.g. for static design previews). */\n\tcount?: number;\n\t/** Override the live selected index. */\n\tselected?: number;\n\t/** Override the inherited carousel size. */\n\tsize?: ComponentSize;\n\t/** Jump to a slide when a dot is activated. Defaults to the carousel API. */\n\tonSelect?: (index: number) => void;\n};\n\nfunction CarouselIndicator({\n\tclassName,\n\tcount: countProp,\n\tselected: selectedProp,\n\tsize: sizeProp,\n\tonSelect,\n\t...props\n}: CarouselIndicatorProps) {\n\t// Read context loosely so the indicator can also stand alone (previews,\n\t// docs) by passing `count`/`selected` directly.\n\tconst ctx = React.useContext(CarouselContext);\n\tconst inheritedSize = useComponentSize(sizeProp);\n\n\tconst size = sizeProp ?? ctx?.size ?? inheritedSize;\n\tconst count = countProp ?? ctx?.scrollSnaps.length ?? 0;\n\tconst selected = selectedProp ?? ctx?.selectedIndex ?? 0;\n\tconst handleSelect = onSelect ?? ctx?.scrollTo;\n\n\tif (count <= 1) return null;\n\n\tconst { dot, gap, padX, padY } = INDICATOR_SIZES[size];\n\tconst { dots, start, visible } = getIndicatorWindow(count, selected);\n\tconst step = dot + gap;\n\t// Viewport width clips the strip to exactly `visible` dots; the strip then\n\t// translates by `start` steps so the windowed dots line up under it.\n\tconst viewportWidth = visible * step - gap;\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full\",\n\t\t\t\tINDICATOR_OFFSET[size],\n\t\t\t\tglassChrome,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ padding: `${padY}px ${padX}px` }}\n\t\t\trole=\"tablist\"\n\t\t\taria-label=\"Slide indicators\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"overflow-hidden\" style={{ width: viewportWidth }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex items-center transition-transform duration-300 ease-out\"\n\t\t\t\t\tstyle={{ gap, transform: `translateX(${-start * step}px)` }}\n\t\t\t\t>\n\t\t\t\t\t{dots.map(({ index, faded }) => {\n\t\t\t\t\t\tconst isActive = index === selected;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={isActive}\n\t\t\t\t\t\t\t\taria-label={`Go to slide ${index + 1}`}\n\t\t\t\t\t\t\t\tonClick={() => handleSelect?.(index)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out\",\n\t\t\t\t\t\t\t\t\thandleSelect ? \"cursor-pointer\" : \"cursor-default\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: dot,\n\t\t\t\t\t\t\t\t\theight: dot,\n\t\t\t\t\t\t\t\t\topacity: faded ? 0.3 : isActive ? 1 : 0.55,\n\t\t\t\t\t\t\t\t\ttransform: faded ? \"scale(0.6)\" : \"scale(1)\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport {\n\ttype CarouselApi,\n\tCarousel,\n\tCarouselContent,\n\tCarouselItem,\n\tCarouselPrevious,\n\tCarouselNext,\n\tCarouselIndicator,\n\tuseCarousel,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["jsx","api","dots"]}

package/dist/chart.d.ts

@@ -0,0 +1,122 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { TooltipValueType } from 'recharts';
+import { ComponentSize } from './size-context.js';
+
+/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */
+type ChartValueType = "number" | "percentage" | "currency";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartCard({ className, size, children, ...props }: React.ComponentProps<"section"> & {
+    size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ChartTitle({ className, size, ...props }: React.ComponentProps<"h3"> & {
+    size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartDescription({ className, size, ...props }: React.ComponentProps<"p"> & {
+    size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+/**
+ * Hover tooltip for a chart data point. It surfaces a single precise value with
+ * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed
+ * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,
+ * 1px border-subtle) so users can read exact figures without leaving the chart.
+ *
+ * Anatomy: series dot · metric label · hero value · period caption.
+ */
+declare const chartTooltipVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    hideIndicator?: boolean;
+    nameKey?: string;
+    valueType?: ChartValueType;
+} & VariantProps<typeof chartTooltipVariants> & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+/** Marker shape that ties a legend item to its series. */
+type ChartLegendMarker = "dot" | "square" | "line";
+/**
+ * A shared legend for all chart types. Each item pairs a series marker with a
+ * label and can be toggled to hide or show its series — the inactive state mutes
+ * the marker and strikes through the label. Items compose into horizontal rows
+ * or vertical columns, in two sizes, with dot, square, or line markers.
+ *
+ * Toggling: pass `onToggle` to make items interactive. Inactive items are read
+ * from each payload entry's `inactive` flag (recharts sets this when wired) or
+ * the controlled `inactiveKeys` set.
+ */
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+    marker?: ChartLegendMarker;
+    size?: "sm" | "md";
+    orientation?: "horizontal" | "vertical";
+    inactiveKeys?: Iterable<string>;
+    onToggle?: (key: string) => void;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+/** The size-scaled layout numbers a cartesian chart needs to build axis props. */
+type CartesianAxisLayout = {
+    tickMargin: number;
+    tickFontSize: number;
+    yAxisWidth: number;
+};
+/**
+ * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
+ * or axis lines, a size-scaled tick font, and a reserved value-axis width) that
+ * every bar and line chart would otherwise repeat per axis. Spread the result
+ * onto the recharts axis, then add the chart-specific props (`dataKey`,
+ * `domain`, `ticks`, a `width`/`type` override, …):
+ *
+ *   const chart = useBarChartLayout();
+ *   <XAxis dataKey="month" {...chart.xAxis} />
+ *   <YAxis domain={[0, 120]} {...chart.yAxis} />
+ */
+declare function cartesianAxisProps(layout: CartesianAxisLayout): {
+    readonly xAxis: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly tickMargin: number;
+        readonly tick: {
+            fontSize: number;
+        };
+    };
+    readonly yAxis: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly width: number;
+        readonly tick: {
+            fontSize: number;
+        };
+    };
+};
+
+export { type CartesianAxisLayout, ChartCard, type ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, type ChartValueType, cartesianAxisProps };