@evinvest/uikit 0.19.0 → 0.20.0

package/dist/components/carousel.js

@@ -0,0 +1,262 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import {
+  CAROUSEL_CONTENT_TRACK,
+  CAROUSEL_CONTENT_TRACK_HORIZONTAL,
+  CAROUSEL_CONTENT_TRACK_VERTICAL,
+  CAROUSEL_CONTENT_VIEWPORT,
+  CAROUSEL_EDGE_FADE_NEXT,
+  CAROUSEL_EDGE_FADE_PREV,
+  CAROUSEL_ITEM,
+  CAROUSEL_ITEM_HORIZONTAL,
+  CAROUSEL_ITEM_VERTICAL,
+  CAROUSEL_NAV,
+  CAROUSEL_NEXT_HORIZONTAL,
+  CAROUSEL_NEXT_VERTICAL,
+  CAROUSEL_PREVIOUS_HORIZONTAL,
+  CAROUSEL_PREVIOUS_VERTICAL
+} from "../generated/carousel.js";
+const 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",
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const [index, setIndex] = useControllableState({
+    value: indexProp,
+    defaultValue: defaultIndex,
+    onChange: onIndexChange
+  });
+  const [count, setCount] = React.useState(0);
+  const canScrollPrev = index > 0;
+  const canScrollNext = index < count - 1;
+  const scrollPrev = React.useCallback(() => {
+    if (index > 0) setIndex(index - 1);
+  }, [index, setIndex]);
+  const scrollNext = React.useCallback(() => {
+    if (index < count - 1) setIndex(index + 1);
+  }, [index, count, setIndex]);
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        orientation,
+        index,
+        count,
+        setCount,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          tabIndex: 0,
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({
+  className,
+  children,
+  ...props
+}) {
+  const { orientation, index, setCount } = useCarousel();
+  const childCount = React.Children.count(children);
+  React.useEffect(() => {
+    setCount(childCount);
+  }, [childCount, setCount]);
+  const transform = orientation === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d(0, -${index * 100}%, 0)`;
+  return /* @__PURE__ */ jsx("div", { className: CAROUSEL_CONTENT_VIEWPORT, "data-slot": "carousel-content", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        CAROUSEL_CONTENT_TRACK,
+        orientation === "horizontal" ? CAROUSEL_CONTENT_TRACK_HORIZONTAL : CAROUSEL_CONTENT_TRACK_VERTICAL,
+        className
+      ),
+      style: { transform },
+      ...props,
+      children
+    }
+  ) });
+}
+function CarouselItem({
+  className,
+  ...props
+}) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn(
+        CAROUSEL_ITEM,
+        orientation === "horizontal" ? CAROUSEL_ITEM_HORIZONTAL : CAROUSEL_ITEM_VERTICAL,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CarouselEdgeFade({
+  className
+}) {
+  const { canScrollPrev, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          CAROUSEL_EDGE_FADE_PREV,
+          canScrollPrev ? "opacity-100" : "opacity-0",
+          className
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          CAROUSEL_EDGE_FADE_NEXT,
+          canScrollNext ? "opacity-100" : "opacity-0",
+          className
+        )
+      }
+    )
+  ] });
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "md",
+  icon = true,
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-previous",
+      variant,
+      size,
+      icon,
+      className: cn(
+        CAROUSEL_NAV,
+        orientation === "horizontal" ? CAROUSEL_PREVIOUS_HORIZONTAL : CAROUSEL_PREVIOUS_VERTICAL,
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "md",
+  icon = true,
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-next",
+      variant,
+      size,
+      icon,
+      className: cn(
+        CAROUSEL_NAV,
+        orientation === "horizontal" ? CAROUSEL_NEXT_HORIZONTAL : CAROUSEL_NEXT_VERTICAL,
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselEdgeFade,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n  CAROUSEL_CONTENT_TRACK,\n  CAROUSEL_CONTENT_TRACK_HORIZONTAL,\n  CAROUSEL_CONTENT_TRACK_VERTICAL,\n  CAROUSEL_CONTENT_VIEWPORT,\n  CAROUSEL_EDGE_FADE_NEXT,\n  CAROUSEL_EDGE_FADE_PREV,\n  CAROUSEL_ITEM,\n  CAROUSEL_ITEM_HORIZONTAL,\n  CAROUSEL_ITEM_VERTICAL,\n  CAROUSEL_NAV,\n  CAROUSEL_NEXT_HORIZONTAL,\n  CAROUSEL_NEXT_VERTICAL,\n  CAROUSEL_PREVIOUS_HORIZONTAL,\n  CAROUSEL_PREVIOUS_VERTICAL,\n} from \"../generated/carousel\";\n\ntype CarouselOrientation = \"horizontal\" | \"vertical\";\n\ntype CarouselContextProps = {\n  orientation: CarouselOrientation;\n  index: number;\n  count: number;\n  setCount: (count: number) => void;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n};\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n  return context;\n}\n\nexport interface CarouselProps extends React.ComponentProps<\"div\"> {\n  orientation?: CarouselOrientation;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n}\n\nexport function Carousel({\n  orientation = \"horizontal\",\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  className,\n  children,\n  onKeyDown,\n  ...props\n}: CarouselProps) {\n  const [index, setIndex] = useControllableState<number>({\n    value: indexProp,\n    defaultValue: defaultIndex,\n    onChange: onIndexChange,\n  });\n  const [count, setCount] = React.useState(0);\n\n  const canScrollPrev = index > 0;\n  const canScrollNext = index < count - 1;\n\n  const scrollPrev = React.useCallback(() => {\n    if (index > 0) setIndex(index - 1);\n  }, [index, setIndex]);\n\n  const scrollNext = React.useCallback(() => {\n    if (index < count - 1) setIndex(index + 1);\n  }, [index, count, setIndex]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      scrollPrev();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      scrollNext();\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        orientation,\n        index,\n        count,\n        setCount,\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        tabIndex={0}\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\nexport function CarouselContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { orientation, index, setCount } = useCarousel();\n  const childCount = React.Children.count(children);\n\n  React.useEffect(() => {\n    setCount(childCount);\n  }, [childCount, setCount]);\n\n  // drag/momentum: omitted vs embla — see README Limitations\n  const transform =\n    orientation === \"horizontal\"\n      ? `translate3d(-${index * 100}%, 0, 0)`\n      : `translate3d(0, -${index * 100}%, 0)`;\n\n  return (\n    <div className={CAROUSEL_CONTENT_VIEWPORT} data-slot=\"carousel-content\">\n      <div\n        className={cn(\n          CAROUSEL_CONTENT_TRACK,\n          orientation === \"horizontal\"\n            ? CAROUSEL_CONTENT_TRACK_HORIZONTAL\n            : CAROUSEL_CONTENT_TRACK_VERTICAL,\n          className,\n        )}\n        style={{ transform }}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselItem({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        CAROUSEL_ITEM,\n        orientation === \"horizontal\" ? CAROUSEL_ITEM_HORIZONTAL : CAROUSEL_ITEM_VERTICAL,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Netflix-style edge scrims that dissolve the current slide into the surface\n * colour, signalling adjacent slides without revealing them. Each side shows\n * only when there is somewhere to scroll. Drop inside a <Carousel>.\n */\nexport function CarouselEdgeFade({\n  className,\n}: {\n  className?: string;\n}) {\n  const { canScrollPrev, canScrollNext } = useCarousel();\n\n  return (\n    <>\n      <div\n        aria-hidden\n        className={cn(\n          CAROUSEL_EDGE_FADE_PREV,\n          canScrollPrev ? \"opacity-100\" : \"opacity-0\",\n          className,\n        )}\n      />\n      <div\n        aria-hidden\n        className={cn(\n          CAROUSEL_EDGE_FADE_NEXT,\n          canScrollNext ? \"opacity-100\" : \"opacity-0\",\n          className,\n        )}\n      />\n    </>\n  );\n}\n\nexport function CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"md\",\n  icon = true,\n  ...props\n}: ButtonProps) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      icon={icon}\n      className={cn(\n        CAROUSEL_NAV,\n        orientation === \"horizontal\"\n          ? CAROUSEL_PREVIOUS_HORIZONTAL\n          : CAROUSEL_PREVIOUS_VERTICAL,\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\nexport function CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"md\",\n  icon = true,\n  ...props\n}: ButtonProps) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      icon={icon}\n      className={cn(\n        CAROUSEL_NAV,\n        orientation === \"horizontal\"\n          ? CAROUSEL_NEXT_HORIZONTAL\n          : CAROUSEL_NEXT_VERTICAL,\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chart.js

@@ -0,0 +1,151 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { CHART_CONTAINER, CHART_LEGEND, CHART_TOOLTIP } from "../generated/chart.js";
+const ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(CHART_CONTAINER, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        children
+      ]
+    }
+  ) });
+}
+const ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([, c]) => c.color);
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `[data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => `  --color-${key}: ${itemConfig.color};`).join("\n")}
+}`
+      }
+    }
+  );
+};
+const ChartTooltip = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+function ChartTooltipContent({
+  className,
+  items = [],
+  label,
+  hideLabel = false,
+  hideIndicator = false,
+  labelClassName
+}) {
+  useChart();
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn(CHART_TOOLTIP, className),
+      children: [
+        !hideLabel && label ? /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: label }) : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-ink-soft flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 items-center"
+            ),
+            children: [
+              !hideIndicator && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "shrink-0 rounded-[2px] h-2.5 w-2.5",
+                  style: {
+                    backgroundColor: item.color,
+                    borderColor: item.color
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 justify-between leading-none items-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-ink-soft", children: item.label }),
+                item.value !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-ink font-mono font-medium tabular-nums", children: item.value })
+              ] })
+            ]
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+const ChartLegend = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  items
+}) {
+  const { config } = useChart();
+  const rows = items ?? Object.entries(config).map(([key, c]) => ({
+    label: c.label ?? key,
+    ...c.color ? { color: c.color } : {}
+  }));
+  if (!rows.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chart-legend",
+      className: cn(CHART_LEGEND, className),
+      children: rows.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "[&>svg]:text-ink-soft flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+          ),
+          children: [
+            !hideIcon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-2 w-2 shrink-0 rounded-[2px]",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            item.label
+          ]
+        },
+        index
+      ))
+    }
+  );
+}
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["\"use client\";\n\n// Dep-light chart primitives: the shadcn/recharts wrapper minus recharts.\n//\n// Upstream shadcn `chart` is theming + presentational tooltip/legend wrappers\n// around recharts, which does the actual plotting. We keep the wrappers and\n// drop recharts: `ChartContainer` is a themed SVG host that emits per-key\n// `--color-<key>` custom properties from its `config`, and consumers draw their\n// own <svg>/series inside it. `ChartTooltipContent` and `ChartLegendContent`\n// are purely presentational and take explicit `items` instead of a recharts\n// payload. `ChartTooltip`/`ChartLegend` are passthrough wrappers. `dark:*`\n// selectors are dropped; the recharts-specific `[&_.recharts-*]` selectors are\n// dropped from the container base.\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CHART_CONTAINER, CHART_LEGEND, CHART_TOOLTIP } from \"../generated/chart\";\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    color?: string;\n  };\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(CHART_CONTAINER, className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        {children}\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, c]) => c.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `[data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => `  --color-${key}: ${itemConfig.color};`)\n  .join(\"\\n\")}\n}`,\n      }}\n    />\n  );\n};\n\n// One rendered tooltip/legend row. Replaces the recharts payload.\nexport type ChartItem = {\n  label?: React.ReactNode;\n  value?: React.ReactNode;\n  color?: string;\n};\n\nconst ChartTooltip = ({ children }: { children?: React.ReactNode }) => (\n  <>{children}</>\n);\n\nfunction ChartTooltipContent({\n  className,\n  items = [],\n  label,\n  hideLabel = false,\n  hideIndicator = false,\n  labelClassName,\n}: React.ComponentProps<\"div\"> & {\n  items?: ChartItem[];\n  label?: React.ReactNode;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  labelClassName?: string;\n}) {\n  useChart();\n\n  if (!items.length) {\n    return null;\n  }\n\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(CHART_TOOLTIP, className)}\n    >\n      {!hideLabel && label ? (\n        <div className={cn(\"font-medium\", labelClassName)}>{label}</div>\n      ) : null}\n      <div className=\"grid gap-1.5\">\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"[&>svg]:text-ink-soft flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 items-center\",\n            )}\n          >\n            {!hideIndicator && (\n              <div\n                className=\"shrink-0 rounded-[2px] h-2.5 w-2.5\"\n                style={\n                  {\n                    backgroundColor: item.color,\n                    borderColor: item.color,\n                  } as React.CSSProperties\n                }\n              />\n            )}\n            <div className=\"flex flex-1 justify-between leading-none items-center\">\n              <span className=\"text-ink-soft\">{item.label}</span>\n              {item.value !== undefined && (\n                <span className=\"text-ink font-mono font-medium tabular-nums\">\n                  {item.value}\n                </span>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = ({ children }: { children?: React.ReactNode }) => (\n  <>{children}</>\n);\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  items,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean;\n  items?: ChartItem[];\n}) {\n  const { config } = useChart();\n\n  const rows: ChartItem[] =\n    items ??\n    Object.entries(config).map(([key, c]) => ({\n      label: c.label ?? key,\n      ...(c.color ? { color: c.color } : {}),\n    }));\n\n  if (!rows.length) {\n    return null;\n  }\n\n  return (\n    <div\n      data-slot=\"chart-legend\"\n      className={cn(CHART_LEGEND, className)}\n    >\n      {rows.map((item, index) => (\n        <div\n          key={index}\n          className={cn(\n            \"[&>svg]:text-ink-soft flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n          )}\n        >\n          {!hideIcon && (\n            <div\n              className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n              style={{ backgroundColor: item.color }}\n            />\n          )}\n          {item.label}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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","names":[]}

package/dist/components/checkbox.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { CHECKBOX_BASE, CHECKBOX_INDICATOR } from "../generated/checkbox.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useFieldControlId } from "./field-context.js";
+function Checkbox({
+  className,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  onClick,
+  disabled,
+  id,
+  ...props
+}) {
+  const [on, setOn] = useControllableState({
+    ...checked !== void 0 ? { value: checked } : {},
+    defaultValue: defaultChecked,
+    ...onCheckedChange ? { onChange: onCheckedChange } : {}
+  });
+  const state = on ? "checked" : "unchecked";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "data-slot": "checkbox",
+      "data-state": state,
+      "aria-checked": on,
+      disabled,
+      id: useFieldControlId(id),
+      className: cn(CHECKBOX_BASE, className),
+      onClick: (e) => {
+        onClick?.(e);
+        setOn(!on);
+      },
+      ...props,
+      children: on && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "checkbox-indicator",
+          className: CHECKBOX_INDICATOR,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "size-3.5",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CHECKBOX_BASE, CHECKBOX_INDICATOR } from \"../generated/checkbox\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentProps<\"button\">, \"onChange\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport function Checkbox({\n  className,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  onClick,\n  disabled,\n  id,\n  ...props\n}: CheckboxProps) {\n  const [on, setOn] = useControllableState<boolean>({\n    ...(checked !== undefined ? { value: checked } : {}),\n    defaultValue: defaultChecked,\n    ...(onCheckedChange ? { onChange: onCheckedChange } : {}),\n  });\n  const state = on ? \"checked\" : \"unchecked\";\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      data-slot=\"checkbox\"\n      data-state={state}\n      aria-checked={on}\n      disabled={disabled}\n      id={useFieldControlId(id)}\n      className={cn(CHECKBOX_BASE, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOn(!on);\n      }}\n      {...props}\n    >\n      {on && (\n        <span\n          data-slot=\"checkbox-indicator\"\n          className={CHECKBOX_INDICATOR}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-3.5\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";AA+DY;AA7DZ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe,0BAA0B;AAClD,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAS3B,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,IAAI,KAAK,IAAI,qBAA8B;AAAA,IAChD,GAAI,YAAY,SAAY,EAAE,OAAO,QAAQ,IAAI,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,GAAI,kBAAkB,EAAE,UAAU,gBAAgB,IAAI,CAAC;AAAA,EACzD,CAAC;AACD,QAAM,QAAQ,KAAK,YAAY;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd;AAAA,MACA,IAAI,kBAAkB,EAAE;AAAA,MACxB,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,cAAM,CAAC,EAAE;AAAA,MACX;AAAA,MACC,GAAG;AAAA,MAEH,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,UAEX;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,cACf,WAAU;AAAA,cACV,eAAY;AAAA,cAEZ,8BAAC,UAAK,GAAE,mBAAkB;AAAA;AAAA,UAC5B;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/collapsible.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+const CollapsibleContext = React.createContext(
+  null
+);
+function useCollapsible() {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) throw new Error("Collapsible parts must be used within <Collapsible>");
+  return ctx;
+}
+function Collapsible({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open: isOpen, setOpen }, children: /* @__PURE__ */ jsx("div", { "data-slot": "collapsible", "data-state": isOpen ? "open" : "closed", ...props, children }) });
+}
+function CollapsibleTrigger({
+  onClick,
+  ...props
+}) {
+  const { open, setOpen } = useCollapsible();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "collapsible-trigger",
+      "data-state": open ? "open" : "closed",
+      "aria-expanded": open,
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(!open);
+      },
+      ...props
+    }
+  );
+}
+function CollapsibleContent({
+  children,
+  ...props
+}) {
+  const { open } = useCollapsible();
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "collapsible-content", "data-state": "open", ...props, children });
+}
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\n\ninterface CollapsibleContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n}\n\nconst CollapsibleContext = React.createContext<CollapsibleContextValue | null>(\n  null,\n);\n\nfunction useCollapsible(): CollapsibleContextValue {\n  const ctx = React.useContext(CollapsibleContext);\n  if (!ctx) throw new Error(\"Collapsible parts must be used within <Collapsible>\");\n  return ctx;\n}\n\nexport interface CollapsibleProps extends React.ComponentProps<\"div\"> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function Collapsible({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}: CollapsibleProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  return (\n    <CollapsibleContext.Provider value={{ open: isOpen, setOpen }}>\n      <div data-slot=\"collapsible\" data-state={isOpen ? \"open\" : \"closed\"} {...props}>\n        {children}\n      </div>\n    </CollapsibleContext.Provider>\n  );\n}\n\nexport function CollapsibleTrigger({\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { open, setOpen } = useCollapsible();\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"collapsible-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      aria-expanded={open}\n      onClick={(e) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { open } = useCollapsible();\n  if (!open) return null;\n  return (\n    <div data-slot=\"collapsible-content\" data-state=\"open\" {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAwCM;AAtCN,YAAY,WAAW;AACvB,SAAS,4BAA4B;AAOrC,MAAM,qBAAqB,MAAM;AAAA,EAC/B;AACF;AAEA,SAAS,iBAA0C;AACjD,QAAM,MAAM,MAAM,WAAW,kBAAkB;AAC/C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qDAAqD;AAC/E,SAAO;AACT;AAQO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,QAAQ,QAAQ,GAC1D,8BAAC,SAAI,aAAU,eAAc,cAAY,SAAS,SAAS,UAAW,GAAG,OACtE,UACH,GACF;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,EAAE,MAAM,QAAQ,IAAI,eAAe;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,iBAAe;AAAA,MACf,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,MAAI,CAAC,KAAM,QAAO;AAClB,SACE,oBAAC,SAAI,aAAU,uBAAsB,cAAW,QAAQ,GAAG,OACxD,UACH;AAEJ;","names":[]}