@qijenchen/design-system 0.1.0-beta.10

package/dist/components/Carousel/carousel.js

@@ -0,0 +1,276 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronRight, ChevronLeft } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) throw new Error("useCarousel 必須在 <Carousel> 內使用");
+  return ctx;
+}
+const Carousel = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    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((a) => {
+      if (!a) return;
+      setCanScrollPrev(a.canScrollPrev());
+      setCanScrollNext(a.canScrollNext());
+      setSelectedIndex(a.selectedScrollSnap());
+    }, []);
+    const scrollPrev = React.useCallback(() => api == null ? void 0 : api.scrollPrev(), [api]);
+    const scrollNext = React.useCallback(() => api == null ? void 0 : api.scrollNext(), [api]);
+    const scrollTo = React.useCallback((i) => api == null ? void 0 : api.scrollTo(i), [api]);
+    React.useEffect(() => {
+      if (!api || !setApi) return;
+      setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+      if (!api) return;
+      setScrollSnaps(api.scrollSnapList());
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api == null ? void 0 : api.off("select", onSelect);
+        api == null ? void 0 : api.off("reInit", onSelect);
+      };
+    }, [api, onSelect]);
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        scrollPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollNext();
+      }
+    };
+    const contextValue = React.useMemo(
+      () => ({
+        carouselRef,
+        api,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps
+      }),
+      [
+        carouselRef,
+        api,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps
+      ]
+    );
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        onKeyDownCapture: handleKeyDown,
+        className: cn("group/carousel relative", className),
+        role: "region",
+        "aria-roledescription": "carousel",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex",
+        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+const arrowWrapperClass = cn(
+  "absolute z-10",
+  "transition-opacity duration-200",
+  "opacity-0 group-hover/carousel:opacity-100",
+  "focus-within:opacity-100",
+  "[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none"
+);
+const CarouselPrevious = React.forwardRef(
+  ({
+    className,
+    "aria-label": ariaLabel = "上一張"
+    /* i18n-allow: DS default; consumer override via aria-label prop */
+  }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          arrowWrapperClass,
+          orientation === "horizontal" ? "left-3 top-1/2 -translate-y-1/2" : "top-3 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: "tertiary",
+            size: "md",
+            iconOnly: true,
+            startIcon: ChevronLeft,
+            "aria-label": ariaLabel,
+            disabled: !canScrollPrev,
+            onClick: scrollPrev,
+            className: "rounded-full"
+          }
+        )
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef(
+  ({
+    className,
+    "aria-label": ariaLabel = "下一張"
+    /* i18n-allow: DS default; consumer override via aria-label prop */
+  }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          arrowWrapperClass,
+          orientation === "horizontal" ? "right-3 top-1/2 -translate-y-1/2" : "bottom-3 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: "tertiary",
+            size: "md",
+            iconOnly: true,
+            startIcon: ChevronRight,
+            "aria-label": ariaLabel,
+            disabled: !canScrollNext,
+            onClick: scrollNext,
+            className: "rounded-full"
+          }
+        )
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+const CarouselDots = React.forwardRef(({ className, ...props }, ref) => {
+  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
+  if (scrollSnaps.length <= 1) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute bottom-3 left-1/2 -translate-x-1/2 z-10",
+        "flex items-center gap-1.5",
+        className
+      ),
+      role: "tablist",
+      "aria-label": "carousel pagination",
+      ...props,
+      children: scrollSnaps.map((_, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": i === selectedIndex,
+          "aria-label": `跳至第 ${i + 1} 張`,
+          onClick: () => scrollTo(i),
+          className: cn(
+            "h-1.5 rounded-full transition-all",
+            // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義
+            // 跟其他「於飽和色底上的淺色前景」一致
+            "bg-on-emphasis/60 hover:bg-on-emphasis/80",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            i === selectedIndex ? "w-6 bg-on-emphasis" : "w-1.5"
+          )
+        },
+        i
+      ))
+    }
+  );
+});
+CarouselDots.displayName = "CarouselDots";
+const carouselMeta = {
+  component: "Carousel",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: [],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  carouselMeta
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/Carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":["../../../src/components/Carousel/carousel.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * Carousel — 圖片 / 內容水平(或垂直)輪播\n *\n * 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。\n *\n * ── 世界級對照 ──\n * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /\n * Swiper(獨立 lib,功能更多但不在 DS 範疇)\n *\n * ── 視覺慣例(user 指示) ──\n * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;\n * 指示器(dots)在底部中央,clickable。\n *\n * ── API(shadcn parity) ──\n * <Carousel opts plugins orientation>\n *   <CarouselContent>\n *     <CarouselItem>...</CarouselItem>\n *     <CarouselItem>...</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />  ← 左箭頭\n *   <CarouselNext />       ← 右箭頭\n *   <CarouselDots />       ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)\n * </Carousel>\n */\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\ninterface CarouselContextProps extends CarouselProps {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (i: number) => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  selectedIndex: number\n  scrollSnaps: number[]\n  orientation: 'horizontal' | 'vertical'\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const ctx = React.useContext(CarouselContext)\n  if (!ctx) throw new Error('useCarousel 必須在 <Carousel> 內使用')\n  return ctx\n}\n\n// ── Root ────────────────────────────────────────────────────────────────────\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = 'horizontal',\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },\n      plugins,\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n    const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n    const onSelect = React.useCallback((a: CarouselApi) => {\n      if (!a) return\n      setCanScrollPrev(a.canScrollPrev())\n      setCanScrollNext(a.canScrollNext())\n      setSelectedIndex(a.selectedScrollSnap())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])\n    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])\n    const scrollTo = React.useCallback((i: number) => api?.scrollTo(i), [api])\n\n    React.useEffect(() => {\n      if (!api || !setApi) return\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) return\n      setScrollSnaps(api.scrollSnapList())\n      onSelect(api)\n      api.on('reInit', onSelect)\n      api.on('select', onSelect)\n      return () => {\n        api?.off('select', onSelect)\n        api?.off('reInit', onSelect) // D3 fix: previously leaked — stale closure on remount\n      }\n    }, [api, onSelect])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'ArrowLeft') { e.preventDefault(); scrollPrev() }\n      else if (e.key === 'ArrowRight') { e.preventDefault(); scrollNext() }\n    }\n\n    const contextValue = React.useMemo(\n      () => ({\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      }),\n      [\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      ]\n    )\n\n    return (\n      <CarouselContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn('group/carousel relative', className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  },\n)\nCarousel.displayName = 'Carousel'\n\n// ── Content / Item ──────────────────────────────────────────────────────────\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ 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})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\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\n// ── Arrow buttons(hover 才顯示)────────────────────────────────────────────\n// 使用 DS Button (secondary + iconOnly size md);hover-only 顯示由 wrapper 的\n// opacity transition 控制(Button 本身不負責)。此 wrapper 存在僅為絕對定位 +\n// hover/focus 可見性,不再覆寫 Button 的視覺 token。\n\ntype ArrowProps = {\n  className?: string\n  /** ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 */\n  'aria-label'?: string\n}\n\nconst arrowWrapperClass = cn(\n  'absolute z-10',\n  'transition-opacity duration-200',\n  'opacity-0 group-hover/carousel:opacity-100',\n  'focus-within:opacity-100',\n  '[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none',\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '上一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'left-3 top-1/2 -translate-y-1/2'\n            : 'top-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronLeft}\n          aria-label={ariaLabel}\n          disabled={!canScrollPrev}\n          onClick={scrollPrev}\n          // documented exception:視覺取向的 media carousel 箭頭用 rounded-full 圓形,\n          // 優於 DS default rounded-md。對齊 Instagram / Airbnb / Notion / Apple Photos\n          // 世界級慣例 — media carousel 箭頭圓形減少視覺方塊感壓迫內容。spec「箭頭視覺規格」有明示。\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '下一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'right-3 top-1/2 -translate-y-1/2'\n            : 'bottom-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronRight}\n          aria-label={ariaLabel}\n          disabled={!canScrollNext}\n          onClick={scrollNext}\n          // documented exception:同 Previous,媒體導向 carousel 箭頭圓形\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselNext.displayName = 'CarouselNext'\n\n// ── Dots indicator(底部中央)───────────────────────────────────────────────\n\nconst CarouselDots = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n  if (scrollSnaps.length <= 1) return null\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',\n        'flex items-center gap-1.5',\n        className,\n      )}\n      role=\"tablist\"\n      aria-label=\"carousel pagination\"\n      {...props}\n    >\n      {scrollSnaps.map((_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === selectedIndex}\n          aria-label={`跳至第 ${i + 1} 張`}\n          onClick={() => scrollTo(i)}\n          className={cn(\n            'h-1.5 rounded-full transition-all',\n            // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義\n            // 跟其他「於飽和色底上的淺色前景」一致\n            'bg-on-emphasis/60 hover:bg-on-emphasis/80',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            i === selectedIndex ? 'w-6 bg-on-emphasis' : 'w-1.5',\n          )}\n        />\n      ))}\n    </div>\n  )\n})\nCarouselDots.displayName = 'CarouselDots'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const carouselMeta = {\n  component: 'Carousel',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  CarouselDots,\n  type CarouselApi,\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+/**
+ * Chart — shadcn-style wrapper over Recharts + 本 DS token
+ *
+ * 結構對齊 shadcn chart(ChartContainer / ChartTooltipContent / ChartLegendContent),
+ * 但所有視覺(tooltip / legend / grid / axis)改用本 DS token。
+ *
+ * ── Color mapping ──
+ * ChartConfig.{key}.color 接受 2 種形式:
+ *   1. CSS var 字串('var(--chart-1)' 等)
+ *   2. 任何合法 CSS color
+ * 預設建議使用 --chart-1..5(本 DS 提供的 5 色類別 token)
+ *
+ * ── 視覺 token ──
+ * Tooltip: bg-surface-raised / border-border / shadow-[elevation-200] / rounded-md
+ * Legend text: text-fg-secondary / text-caption
+ * Grid: stroke-divider
+ * Axis tick: text-fg-muted / text-caption
+ */
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<'light' | 'dark', string>;
+    });
+};
+interface ChartContainerProps extends React.ComponentProps<'div'> {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function ChartStyle({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+type RechartsTooltipPayloadItem = {
+    value?: string | number;
+    name?: string | number;
+    dataKey?: string | number;
+    color?: string;
+    payload?: unknown;
+    [key: string]: unknown;
+};
+interface ChartTooltipContentProps extends Omit<React.ComponentProps<'div'>, 'color'> {
+    active?: boolean;
+    payload?: RechartsTooltipPayloadItem[];
+    label?: unknown;
+    labelFormatter?: (value: unknown, payload: RechartsTooltipPayloadItem[]) => React.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: unknown, item: RechartsTooltipPayloadItem, index: number, payload: unknown) => React.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+}
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<ChartTooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type RechartsLegendPayloadItem = {
+    value?: unknown;
+    dataKey?: string | number;
+    color?: string;
+    payload?: unknown;
+    [key: string]: unknown;
+};
+interface ChartLegendContentProps extends React.ComponentProps<'div'> {
+    payload?: RechartsLegendPayloadItem[];
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    hideIcon?: boolean;
+    nameKey?: string;
+}
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<ChartLegendContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const chartMeta: {
+    readonly component: "Chart";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface-raised", "bg-transparent"];
+        readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
+//# sourceMappingURL=chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/chart.tsx"],"names":[],"mappings":"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"}

package/dist/components/Chart/chart.js

@@ -0,0 +1,233 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../../lib/utils.js";
+const ChartContext = React.createContext(null);
+function useChart() {
+  const ctx = React.useContext(ChartContext);
+  if (!ctx) throw new Error("useChart 必須在 <ChartContainer> 內使用");
+  return ctx;
+}
+const ChartContainer = React.forwardRef(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    const ctxValue = React.useMemo(() => ({ config }), [config]);
+    return /* @__PURE__ */ jsx(ChartContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-chart": chartId,
+        className: cn(
+          // 整體視覺套用本 DS typography + token
+          // 預設 aspect-video(16:9)— Recharts ResponsiveContainer 需 parent 有高度。
+          // Consumer 若需其他比例,包 <AspectRatio ratio={n}> 覆寫(AspectRatio 的 padding-bottom 高度會蓋過此 class)。
+          "flex aspect-video justify-center text-caption",
+          // recharts 內部預設樣式覆寫:grid / axis / tooltip shadow 等
+          "[&_.recharts-cartesian-grid_line]:stroke-divider",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-fg-muted",
+          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider",
+          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider",
+          "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-layer]:outline-none",
+          "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-sector]:outline-none",
+          "[&_.recharts-surface]:outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+          /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+        ]
+      }
+    ) });
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+const THEMES = { light: "", dark: "[data-theme=dark] " };
+function ChartStyle({ id, config }) {
+  const entries = Object.entries(config).filter(([, v]) => "color" in v || "theme" in v);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(([theme, prefix]) => {
+          const vars = entries.map(([key, item]) => {
+            var _a;
+            const color = "theme" in item ? (_a = item.theme) == null ? void 0 : _a[theme] : item.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).filter(Boolean).join("\n");
+          return `${prefix}[data-chart=${id}] {
+${vars}
+}`;
+        }).join("\n")
+      }
+    }
+  );
+}
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+      var _a;
+      if (hideLabel || !(payload == null ? void 0 : payload.length)) return null;
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfig(config, item, key);
+      const value = !labelKey && typeof label === "string" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
+      if (labelFormatter) return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      if (!value) return null;
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    if (!active || !(payload == null ? void 0 : payload.length)) return null;
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-caption shadow-[var(--elevation-200)]",
+          className
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+            var _a;
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfig(config, item, key);
+            const indicatorColor = color || ((_a = item.payload) == null ? void 0 : _a.fill) || item.color;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-fg-muted",
+                  indicator === "dot" && "items-center"
+                ),
+                children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }),
+                      style: {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                          nestLabel ? tooltipLabel : null,
+                          /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
+                        ] }),
+                        item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              item.dataKey || index
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";
+const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegendContent = React.forwardRef(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!(payload == null ? void 0 : payload.length)) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        ),
+        children: payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfig(config, item, key);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1.5 text-fg-secondary [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-fg-muted",
+              children: [
+                (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", { className: "h-2 w-2 shrink-0 rounded-xs", style: { backgroundColor: item.color } }),
+                itemConfig == null ? void 0 : itemConfig.label
+              ]
+            },
+            String(item.value)
+          );
+        })
+      }
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegendContent";
+function getPayloadConfig(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) return void 0;
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const chartMeta = {
+  component: "Chart",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-surface-raised", "bg-transparent"],
+    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground"],
+    ring: []
+  }
+};
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  chartMeta
+};
+//# sourceMappingURL=chart.js.map