@squadbase/vantage 0.0.1 → 0.1.0

package/dist/components/index.js

@@ -0,0 +1,1983 @@
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Button, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from '../chunk-WQZYXXQW.js';
+import { cn } from '../chunk-A2UUGASH.js';
+import { forwardRef, useRef, useState, useEffect, useCallback, Fragment, createContext, useMemo, useId, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Check, Copy, Download, Search, ArrowUp, ArrowDown, ArrowUpDown, Columns3, CalendarIcon, ChevronDownIcon, Minus, ChevronRight, XIcon, LoaderIcon, CheckIcon, ChevronDown, X } from 'lucide-react';
+import * as echarts from 'echarts';
+import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { format, endOfDay, startOfDay, subDays, startOfMonth, subMonths, endOfMonth } from 'date-fns';
+import { ja } from 'date-fns/locale';
+
+// @squadbase/vantage — generated build. Do not edit.
+var PageShell = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell", className: cn("flex flex-col", className), ...props })
+);
+PageShell.displayName = "PageShell";
+var PageShellHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-header",
+      className: cn(
+        "grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-6 border-b px-6 py-12",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PageShellHeader.displayName = "PageShellHeader";
+var PageShellHeading = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell-heading", className: cn("min-w-0", className), ...props })
+);
+PageShellHeading.displayName = "PageShellHeading";
+var PageShellTitle = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h1",
+    {
+      ref,
+      "data-slot": "page-shell-title",
+      className: cn("text-2xl font-bold tracking-tight text-foreground", className),
+      ...props
+    }
+  )
+);
+PageShellTitle.displayName = "PageShellTitle";
+var PageShellDescription = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "page-shell-description",
+      className: cn("mt-1 text-sm text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+PageShellDescription.displayName = "PageShellDescription";
+var PageShellHeaderEnd = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-header-end",
+      className: cn("flex shrink-0 flex-col items-end gap-2", className),
+      ...props
+    }
+  )
+);
+PageShellHeaderEnd.displayName = "PageShellHeaderEnd";
+var PageShellMeta = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-meta",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+PageShellMeta.displayName = "PageShellMeta";
+var PageShellActions = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  )
+);
+PageShellActions.displayName = "PageShellActions";
+var PageShellSummary = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-summary",
+      className: cn(
+        "col-span-full grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PageShellSummary.displayName = "PageShellSummary";
+var pageShellSummaryCardVariants = cva(
+  "relative flex items-start gap-3 rounded-lg border bg-background px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      accent: {
+        default: "text-card-foreground",
+        accent: "border-[var(--chart-1)]/30 bg-linear-to-r from-[var(--chart-1)]/5 to-[var(--chart-1)]/5 [&>svg]:text-[var(--chart-1)]",
+        amber: "border-amber-300 bg-amber-50 [&>svg]:text-amber-600 dark:border-amber-800 dark:bg-amber-950/50 dark:[&>svg]:text-amber-400",
+        blue: "border-blue-300 bg-blue-50 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950/50 dark:[&>svg]:text-blue-400",
+        emerald: "border-emerald-300 bg-emerald-50 [&>svg]:text-emerald-600 dark:border-emerald-800 dark:bg-emerald-950/50 dark:[&>svg]:text-emerald-400",
+        red: "border-red-300 bg-red-50 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950/50 dark:[&>svg]:text-red-400",
+        violet: "border-violet-300 bg-violet-50 [&>svg]:text-violet-600 dark:border-violet-800 dark:bg-violet-950/50 dark:[&>svg]:text-violet-400",
+        orange: "border-orange-300 bg-orange-50 [&>svg]:text-orange-600 dark:border-orange-800 dark:bg-orange-950/50 dark:[&>svg]:text-orange-400",
+        cyan: "border-cyan-300 bg-cyan-50 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950/50 dark:[&>svg]:text-cyan-400",
+        slate: "border-slate-300 bg-slate-50 [&>svg]:text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:[&>svg]:text-slate-400",
+        green: "border-green-300 bg-green-50 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950/50 dark:[&>svg]:text-green-400",
+        teal: "border-teal-300 bg-teal-50 [&>svg]:text-teal-600 dark:border-teal-800 dark:bg-teal-950/50 dark:[&>svg]:text-teal-400",
+        sky: "border-sky-300 bg-sky-50 [&>svg]:text-sky-600 dark:border-sky-800 dark:bg-sky-950/50 dark:[&>svg]:text-sky-400",
+        indigo: "border-indigo-300 bg-indigo-50 [&>svg]:text-indigo-600 dark:border-indigo-800 dark:bg-indigo-950/50 dark:[&>svg]:text-indigo-400",
+        purple: "border-purple-300 bg-purple-50 [&>svg]:text-purple-600 dark:border-purple-800 dark:bg-purple-950/50 dark:[&>svg]:text-purple-400",
+        pink: "border-pink-300 bg-pink-50 [&>svg]:text-pink-600 dark:border-pink-800 dark:bg-pink-950/50 dark:[&>svg]:text-pink-400",
+        rose: "border-rose-300 bg-rose-50 [&>svg]:text-rose-600 dark:border-rose-800 dark:bg-rose-950/50 dark:[&>svg]:text-rose-400",
+        yellow: "border-yellow-300 bg-yellow-50 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950/50 dark:[&>svg]:text-yellow-400",
+        lime: "border-lime-300 bg-lime-50 [&>svg]:text-lime-600 dark:border-lime-800 dark:bg-lime-950/50 dark:[&>svg]:text-lime-400",
+        gray: "border-gray-300 bg-gray-50 [&>svg]:text-gray-600 dark:border-gray-800 dark:bg-gray-950/50 dark:[&>svg]:text-gray-400",
+        zinc: "border-zinc-300 bg-zinc-50 [&>svg]:text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/50 dark:[&>svg]:text-zinc-400",
+        neutral: "border-neutral-300 bg-neutral-50 [&>svg]:text-neutral-600 dark:border-neutral-800 dark:bg-neutral-950/50 dark:[&>svg]:text-neutral-400",
+        stone: "border-stone-300 bg-stone-50 [&>svg]:text-stone-600 dark:border-stone-800 dark:bg-stone-950/50 dark:[&>svg]:text-stone-400",
+        fuchsia: "border-fuchsia-300 bg-fuchsia-50 [&>svg]:text-fuchsia-600 dark:border-fuchsia-800 dark:bg-fuchsia-950/50 dark:[&>svg]:text-fuchsia-400"
+      }
+    },
+    defaultVariants: {
+      accent: "default"
+    }
+  }
+);
+var PageShellSummaryCard = forwardRef(
+  ({ className, accent, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-summary-card",
+      className: cn(pageShellSummaryCardVariants({ accent }), className),
+      ...props
+    }
+  )
+);
+PageShellSummaryCard.displayName = "PageShellSummaryCard";
+var PageShellContent = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-content",
+      className: cn("flex-1 p-6", className),
+      ...props
+    }
+  )
+);
+PageShellContent.displayName = "PageShellContent";
+function flattenItems(item) {
+  if (item.children && item.children.length > 0) {
+    return item.children.flatMap(flattenItems);
+  }
+  return [item];
+}
+function NavSelect({
+  groups,
+  onNavigate
+}) {
+  const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems));
+  const currentValue = allItems.find((item) => item.isActive)?.href ?? "";
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      items: Object.fromEntries(allItems.map((item) => [item.href, item.label])),
+      value: currentValue,
+      onValueChange: (href) => {
+        if (href !== null) onNavigate(href);
+      },
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "\u30DA\u30FC\u30B8\u3092\u9078\u629E" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(SelectGroup, { children: [
+          group.label && /* @__PURE__ */ jsx(SelectLabel, { children: group.label }),
+          group.items.flatMap(flattenItems).map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.href, disabled: item.disabled, children: item.label }, item.href))
+        ] }, group.label ?? index)) })
+      ]
+    }
+  );
+}
+function NavItemWithChildren({
+  item,
+  linkComponent: LinkComponent = "a"
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      defaultOpen: item.isActive,
+      className: "group/collapsible",
+      render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            render: /* @__PURE__ */ jsx(
+              SidebarMenuButton,
+              {
+                tooltip: item.label,
+                "aria-disabled": item.disabled,
+                className: cn(item.disabled && "pointer-events-none")
+              }
+            ),
+            children: [
+              item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })
+            ]
+          }
+        ),
+        item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.children.map((child) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs(
+          SidebarMenuSubButton,
+          {
+            isActive: child.isActive,
+            render: /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: child.href,
+                "aria-disabled": child.disabled,
+                tabIndex: child.disabled ? -1 : void 0,
+                className: cn(child.disabled && "pointer-events-none opacity-50")
+              }
+            ),
+            children: [
+              child.icon && /* @__PURE__ */ jsx(child.icon, {}),
+              /* @__PURE__ */ jsx("span", { children: child.label })
+            ]
+          }
+        ) }, child.href)) }) })
+      ]
+    }
+  );
+}
+function NavItemLink({
+  item,
+  linkComponent: LinkComponent = "a"
+}) {
+  return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+    /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        tooltip: item.label,
+        isActive: item.isActive,
+        render: /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: item.href,
+            "aria-disabled": item.disabled,
+            tabIndex: item.disabled ? -1 : void 0,
+            className: cn(item.disabled && "pointer-events-none")
+          }
+        ),
+        children: [
+          item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    ),
+    item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge })
+  ] });
+}
+var defaultNavigate = (href) => {
+  window.location.assign(href);
+};
+var AppShell = forwardRef((props, ref) => {
+  const {
+    variant = "sidebar",
+    groups,
+    actions,
+    header,
+    children,
+    className,
+    linkComponent,
+    onNavigate = defaultNavigate
+  } = props;
+  if (variant === "header") {
+    return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "app-shell", className: cn("flex h-full flex-col", className), children: [
+      header !== void 0 ? header : /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 border-b px-4", children: [
+        groups.length > 0 && /* @__PURE__ */ jsx(NavSelect, { groups, onNavigate }),
+        actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
+    ] });
+  }
+  const { defaultOpen = true } = props;
+  return /* @__PURE__ */ jsxs(SidebarProvider, { defaultOpen, children: [
+    /* @__PURE__ */ jsxs(Sidebar, { "data-slot": "app-sidebar", collapsible: "offcanvas", children: [
+      /* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+        group.label && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }),
+        /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map(
+          (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
+            NavItemWithChildren,
+            {
+              item,
+              linkComponent
+            },
+            item.href
+          ) : /* @__PURE__ */ jsx(NavItemLink, { item, linkComponent }, item.href)
+        ) })
+      ] }, group.label ?? index)) }),
+      actions && /* @__PURE__ */ jsx(SidebarFooter, { children: actions }),
+      /* @__PURE__ */ jsx(SidebarRail, {})
+    ] }),
+    /* @__PURE__ */ jsxs(SidebarInset, { ref, "data-slot": "app-shell", className, children: [
+      header !== void 0 ? header : /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b px-4", children: [
+        /* @__PURE__ */ jsx(SidebarTrigger, {}),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" })
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
+    ] })
+  ] });
+});
+AppShell.displayName = "AppShell";
+var headingStyles = {
+  h1: "text-3xl font-bold tracking-tight",
+  h2: "text-2xl font-semibold tracking-tight",
+  h3: "text-xl font-semibold",
+  h4: "text-lg font-semibold"
+};
+var SectionHeader = forwardRef(
+  ({ title, description, actions, className, as: Comp = "h2" }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "section-header",
+      className: cn("flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Comp, { className: headingStyles[Comp], children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+      ]
+    }
+  )
+);
+SectionHeader.displayName = "SectionHeader";
+var DashboardCard = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dashboard-card",
+      className: cn(
+        "group rounded-lg border bg-card px-1 py-1 text-card-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DashboardCard.displayName = "DashboardCard";
+var DashboardCardHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dashboard-card-header",
+      className: cn("flex flex-row items-start justify-between gap-4 px-3 py-3", className),
+      ...props
+    }
+  )
+);
+DashboardCardHeader.displayName = "DashboardCardHeader";
+var DashboardCardTitle = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      "data-slot": "dashboard-card-title",
+      className: cn("text-sm leading-none font-semibold tracking-tight", className),
+      ...props
+    }
+  )
+);
+DashboardCardTitle.displayName = "DashboardCardTitle";
+var DashboardCardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    "data-slot": "dashboard-card-description",
+    className: cn("text-xs text-muted-foreground", className),
+    ...props
+  }
+));
+DashboardCardDescription.displayName = "DashboardCardDescription";
+var DashboardCardAction = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dashboard-card-action",
+      className: cn("ml-auto shrink-0", className),
+      ...props
+    }
+  )
+);
+DashboardCardAction.displayName = "DashboardCardAction";
+var DashboardCardContent = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "dashboard-card-content", className: cn("p-3", className), ...props })
+);
+DashboardCardContent.displayName = "DashboardCardContent";
+var DashboardCardFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dashboard-card-footer",
+      className: cn("flex items-center px-3 py-1.5", className),
+      ...props
+    }
+  )
+);
+DashboardCardFooter.displayName = "DashboardCardFooter";
+function DashboardCardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dashboard-card-skeleton",
+      className: cn("rounded-lg border bg-card p-6 shadow-sm", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 pb-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-md" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-4 w-3/4" })
+      ]
+    }
+  );
+}
+function DashboardCardPreset({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  className,
+  ...props
+}) {
+  const hasHeader = title || description || actions;
+  return /* @__PURE__ */ jsxs(DashboardCard, { className, ...props, children: [
+    hasHeader && /* @__PURE__ */ jsxs(DashboardCardHeader, { className: headerClassName, children: [
+      (title || description) && /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(DashboardCardDescription, { children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx(DashboardCardAction, { children: actions })
+    ] }),
+    children && /* @__PURE__ */ jsx(DashboardCardContent, { className: contentClassName, children }),
+    footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: footerClassName, children: footer })
+  ] });
+}
+var EChart = forwardRef(function EChart2({
+  option,
+  height,
+  loading = false,
+  theme,
+  onEvents,
+  ariaLabel,
+  className,
+  actions = false,
+  fileName = "chart.png"
+}, ref) {
+  const containerRef = useRef(null);
+  const [instance, setInstance] = useState(null);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const inst = echarts.init(container, theme, { renderer: "canvas" });
+    setInstance(inst);
+    const observer = new ResizeObserver(() => inst.resize());
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      inst.dispose();
+    };
+  }, [theme]);
+  useEffect(() => {
+    if (!instance) return;
+    instance.setOption(option, { notMerge: true, lazyUpdate: true });
+  }, [instance, option]);
+  useEffect(() => {
+    if (!instance) return;
+    if (loading) instance.showLoading();
+    else instance.hideLoading();
+  }, [instance, loading]);
+  useEffect(() => {
+    if (!instance || !onEvents) return;
+    const entries = Object.entries(onEvents);
+    for (const [event, handler] of entries) {
+      instance.on(event, handler);
+    }
+    return () => {
+      if (instance.isDisposed()) return;
+      for (const [event, handler] of entries) {
+        instance.off(event, handler);
+      }
+    };
+  }, [instance, onEvents]);
+  const getPngDataUrl = useCallback(() => {
+    if (!instance) return null;
+    const pageBg = getComputedStyle(document.documentElement).backgroundColor;
+    return instance.getDataURL({
+      type: "png",
+      pixelRatio: 2,
+      backgroundColor: pageBg && pageBg !== "rgba(0, 0, 0, 0)" ? pageBg : "#ffffff"
+    });
+  }, [instance]);
+  const handleCopy = useCallback(async () => {
+    const dataUrl = getPngDataUrl();
+    if (!dataUrl) return;
+    try {
+      const blob = await (await fetch(dataUrl)).blob();
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [getPngDataUrl]);
+  const handleDownload = useCallback(() => {
+    const dataUrl = getPngDataUrl();
+    if (!dataUrl) return;
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = fileName;
+    link.click();
+  }, [getPngDataUrl, fileName]);
+  const styleHeight = height == null ? void 0 : typeof height === "number" ? `${height}px` : height;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "echart",
+      className: cn("group relative w-full", height == null && "h-[400px]", className),
+      style: styleHeight != null ? { height: styleHeight } : void 0,
+      role: "img",
+      "aria-label": ariaLabel ?? "\u30C1\u30E3\u30FC\u30C8",
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, "data-slot": "echart-canvas", className: "h-full w-full" }),
+        actions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "echart-actions",
+            className: "absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100",
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleCopy,
+                  "aria-label": copied ? "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F" : "PNG \u3092\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC",
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleDownload,
+                  "aria-label": "PNG \u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9",
+                  children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+EChart.displayName = "EChart";
+var DEFAULT_COLORS = [
+  "bg-chart-1",
+  "bg-chart-2",
+  "bg-chart-3",
+  "bg-chart-4",
+  "bg-chart-5"
+];
+var funnelStepsVariants = cva("flex w-full", {
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    direction: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    }
+  },
+  compoundVariants: [
+    { direction: "vertical", size: "sm", className: "gap-1" },
+    { direction: "vertical", size: "md", className: "gap-1.5" },
+    { direction: "vertical", size: "lg", className: "gap-2" },
+    { direction: "horizontal", size: "sm", className: "gap-2" },
+    { direction: "horizontal", size: "md", className: "gap-3" },
+    { direction: "horizontal", size: "lg", className: "gap-4" }
+  ],
+  defaultVariants: {
+    size: "md",
+    direction: "vertical"
+  }
+});
+var funnelBarVariants = cva("rounded-sm transition-[width] ease-out", {
+  variants: {
+    size: {
+      sm: "h-6",
+      md: "h-8",
+      lg: "h-10"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var funnelBarContainerHorizontalVariants = cva(
+  "relative flex w-full items-end overflow-hidden rounded-sm bg-muted",
+  {
+    variants: {
+      size: {
+        sm: "h-20",
+        md: "h-28",
+        lg: "h-36"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var funnelLabelVariants = cva("flex w-full items-center justify-between text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var funnelConversionVariants = cva("flex items-center text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-[10px]",
+      md: "text-xs",
+      lg: "text-xs"
+    },
+    direction: {
+      vertical: "justify-end",
+      horizontal: "shrink-0 justify-center self-center"
+    }
+  },
+  compoundVariants: [
+    { direction: "vertical", size: "sm", className: "py-0" },
+    { direction: "vertical", size: "md", className: "py-0.5" },
+    { direction: "vertical", size: "lg", className: "py-0.5" }
+  ],
+  defaultVariants: {
+    size: "md",
+    direction: "vertical"
+  }
+});
+function defaultFormatValue(value) {
+  return value.toLocaleString();
+}
+function computeConversionRate(current, previous) {
+  if (previous === 0) return "--";
+  return `${(current / previous * 100).toFixed(1)}%`;
+}
+var FunnelSteps = forwardRef(function FunnelSteps2({
+  data,
+  showConversion = false,
+  formatValue = defaultFormatValue,
+  animate = false,
+  size = "md",
+  direction = "vertical",
+  className,
+  ...props
+}, ref) {
+  const [mounted, setMounted] = useState(false);
+  const isHorizontal = direction === "horizontal";
+  useEffect(() => {
+    if (animate) setMounted(true);
+  }, [animate]);
+  const maxValue = data.length > 0 ? data[0].value : 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "funnel-steps",
+      role: "list",
+      "aria-label": "\u30D5\u30A1\u30CD\u30EB",
+      className: cn(funnelStepsVariants({ size, direction }), className),
+      ...props,
+      children: data.map((step, index) => {
+        const percentage = maxValue > 0 ? step.value / maxValue * 100 : 0;
+        const barSize = step.value > 0 && percentage < 2 ? 2 : percentage;
+        const color = step.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+        const isClickable = !!step.onClick;
+        const barInteractionProps = isClickable ? {
+          role: "button",
+          tabIndex: 0,
+          onClick: step.onClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              step.onClick?.();
+            }
+          }
+        } : {};
+        const barInteractionClasses = isClickable ? "cursor-pointer hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none" : void 0;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          isHorizontal ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              className: "flex min-w-0 flex-1 flex-col items-center gap-1",
+              "aria-label": `${step.label}: ${formatValue(step.value)}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "funnel-value",
+                    className: cn(
+                      "text-muted-foreground tabular-nums",
+                      size === "sm" ? "text-xs" : "text-sm"
+                    ),
+                    children: formatValue(step.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: funnelBarContainerHorizontalVariants({ size }), children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...barInteractionProps,
+                    className: cn(
+                      "w-full rounded-sm transition-[height] ease-out",
+                      color,
+                      barInteractionClasses
+                    ),
+                    style: {
+                      height: animate ? mounted ? `${barSize}%` : "0%" : `${barSize}%`,
+                      transitionDuration: "0.5s",
+                      transitionDelay: animate ? `${index * 0.08}s` : void 0
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-full truncate text-center text-muted-foreground",
+                      size === "sm" ? "text-[10px]" : "text-xs"
+                    ),
+                    children: step.label
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-label": `${step.label}: ${formatValue(step.value)}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: funnelLabelVariants({ size }), children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: step.label }),
+              /* @__PURE__ */ jsx("span", { "data-slot": "funnel-value", className: "tabular-nums", children: formatValue(step.value) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden rounded-sm bg-muted", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...barInteractionProps,
+                className: cn(funnelBarVariants({ size }), color, barInteractionClasses),
+                style: {
+                  width: animate ? mounted ? `${barSize}%` : "0%" : `${barSize}%`,
+                  transitionDuration: "0.5s",
+                  transitionDelay: animate ? `${index * 0.08}s` : void 0
+                }
+              }
+            ) })
+          ] }),
+          showConversion && index < data.length - 1 && /* @__PURE__ */ jsx("div", { className: funnelConversionVariants({ size, direction }), "aria-hidden": "true", children: /* @__PURE__ */ jsxs("span", { children: [
+            "\u2192 ",
+            computeConversionRate(data[index + 1].value, step.value)
+          ] }) })
+        ] }, index);
+      })
+    }
+  );
+});
+FunnelSteps.displayName = "FunnelSteps";
+function useControlledState(controlledValue, defaultValue, onChange) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = useCallback(
+    (updaterOrValue) => {
+      onChange?.(updaterOrValue);
+      if (!isControlled) {
+        setInternalValue(updaterOrValue);
+      }
+    },
+    [onChange, isControlled]
+  );
+  return [value, setValue];
+}
+var DataTableContext = createContext(null);
+function useDataTable() {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) throw new Error("useDataTable must be used inside <DataTable>");
+  return ctx;
+}
+function DataTable({
+  columns,
+  data,
+  enableSorting = true,
+  sorting: sortingProp,
+  onSortingChange,
+  enableFiltering = false,
+  columnFilters: columnFiltersProp,
+  onColumnFiltersChange,
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  enablePagination = false,
+  pagination: paginationProp,
+  onPaginationChange,
+  pageCount,
+  enableRowSelection = false,
+  rowSelection: rowSelectionProp,
+  onRowSelectionChange,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  meta,
+  className,
+  children
+}) {
+  const [sorting, setSorting] = useControlledState(sortingProp, [], onSortingChange);
+  const [columnFilters, setColumnFilters] = useControlledState(
+    columnFiltersProp,
+    [],
+    onColumnFiltersChange
+  );
+  const [globalFilter, setGlobalFilter] = useControlledState(
+    globalFilterProp,
+    "",
+    onGlobalFilterChange
+  );
+  const [rowSelection, setRowSelection] = useControlledState(
+    rowSelectionProp,
+    {},
+    onRowSelectionChange
+  );
+  const [columnVisibility, setColumnVisibility] = useControlledState(
+    columnVisibilityProp,
+    {},
+    onColumnVisibilityChange
+  );
+  const [pagination, setPagination] = useControlledState(
+    paginationProp,
+    { pageIndex: 0, pageSize: 10 },
+    onPaginationChange
+  );
+  const allColumns = useMemo(() => {
+    if (!enableRowSelection) return columns;
+    const selectionColumn = {
+      id: "_select",
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: table2.getIsAllPageRowsSelected(),
+          indeterminate: table2.getIsSomePageRowsSelected(),
+          onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(checked),
+          "aria-label": "\u5168\u3066\u9078\u629E"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onCheckedChange: (checked) => row.toggleSelected(checked),
+          "aria-label": "\u884C\u3092\u9078\u629E"
+        }
+      ),
+      enableSorting: false,
+      enableHiding: false
+    };
+    return [selectionColumn, ...columns];
+  }, [columns, enableRowSelection]);
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      rowSelection,
+      columnVisibility,
+      ...enablePagination ? { pagination } : {}
+    },
+    enableSorting,
+    enableRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    ...enablePagination ? { onPaginationChange: setPagination } : {},
+    ...pageCount !== void 0 ? { pageCount, manualPagination: true } : {},
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    ...enablePagination ? { getPaginationRowModel: getPaginationRowModel() } : {},
+    meta
+  });
+  const selectedRows = useMemo(
+    () => table.getFilteredSelectedRowModel().rows.map((row) => row.original),
+    // `table` is a stable reference, so the selection state is the real input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowSelection, data]
+  );
+  const hasSelection = selectedRows.length > 0;
+  const contextValue = useMemo(
+    () => ({
+      table,
+      selectedRows,
+      hasSelection,
+      globalFilter,
+      setGlobalFilter,
+      enableFiltering,
+      enablePagination,
+      enableRowSelection,
+      visibleColumnCount: allColumns.length
+    }),
+    // `useReactTable` returns the same object every render, so each piece of
+    // table state has to be tracked explicitly to re-render the consumers.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      table,
+      selectedRows,
+      hasSelection,
+      globalFilter,
+      setGlobalFilter,
+      enableFiltering,
+      enablePagination,
+      enableRowSelection,
+      allColumns.length,
+      sorting,
+      columnFilters,
+      columnVisibility,
+      pagination,
+      rowSelection
+    ]
+  );
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-slot": "data-table", className: cn("space-y-4", className), children }) });
+}
+DataTable.displayName = "DataTable";
+var DataTableToolbar = forwardRef(
+  ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
+    const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } = useDataTable();
+    const showSearchEffective = showSearch ?? enableFiltering;
+    const hasContent = showSearchEffective || toolbar != null || hasSelection && bulkActions != null;
+    if (!hasContent) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "data-table-toolbar",
+        className: cn("flex flex-wrap items-center gap-2", className),
+        ...props,
+        children: [
+          showSearchEffective && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(Search, { className: "absolute top-2.5 left-2.5 size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: globalFilter,
+                onChange: (e) => setGlobalFilter(e.target.value),
+                className: "max-w-sm pl-8"
+              }
+            )
+          ] }),
+          toolbar,
+          hasSelection && bulkActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: bulkActions(selectedRows) })
+        ]
+      }
+    );
+  }
+);
+DataTableToolbar.displayName = "DataTableToolbar";
+var DataTableContent = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { table, visibleColumnCount } = useDataTable();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "data-table-content",
+        className: cn("overflow-x-auto", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-1 rounded hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+              onClick: header.column.getToggleSortingHandler(),
+              "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none",
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4 text-muted-foreground" })
+              ]
+            }
+          ) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : void 0, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              colSpan: visibleColumnCount,
+              className: "h-24 text-center text-muted-foreground",
+              children: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093"
+            }
+          ) }) })
+        ] })
+      }
+    );
+  }
+);
+DataTableContent.displayName = "DataTableContent";
+var DataTablePagination = forwardRef(
+  ({ pageSizeOptions = [10, 20, 50], className, ...props }, ref) => {
+    const { table } = useDataTable();
+    const totalRows = table.getFilteredRowModel().rows.length;
+    const currentPageSize = table.getState().pagination.pageSize;
+    const currentPageIndex = table.getState().pagination.pageIndex;
+    const rangeStart = currentPageIndex * currentPageSize + 1;
+    const rangeEnd = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "data-table-pagination",
+        className: cn("flex flex-wrap items-center justify-between gap-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              totalRows,
+              "\u4EF6\u4E2D ",
+              rangeStart,
+              " - ",
+              rangeEnd,
+              " \u3092\u8868\u793A"
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                items: Object.fromEntries(pageSizeOptions.map((size) => [String(size), `${size}\u4EF6`])),
+                value: String(currentPageSize),
+                onValueChange: (value) => table.setPageSize(Number(value)),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-[80px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs(SelectItem, { value: String(size), children: [
+                    size,
+                    "\u4EF6"
+                  ] }, size)) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => table.firstPage(),
+                disabled: !table.getCanPreviousPage(),
+                children: "\u6700\u521D"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => table.previousPage(),
+                disabled: !table.getCanPreviousPage(),
+                children: "\u524D\u3078"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => table.nextPage(),
+                disabled: !table.getCanNextPage(),
+                children: "\u6B21\u3078"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => table.lastPage(),
+                disabled: !table.getCanNextPage(),
+                children: "\u6700\u5F8C"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DataTablePagination.displayName = "DataTablePagination";
+var DataTableColumnVisibility = forwardRef(({ columnLabels, className }, ref) => {
+  const { table } = useDataTable();
+  const hideableColumns = table.getAllColumns().filter((column) => column.getCanHide());
+  if (hideableColumns.length === 0) return null;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        ref,
+        render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn(className) }),
+        "data-slot": "data-table-column-visibility",
+        children: /* @__PURE__ */ jsx(Columns3, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", children: hideableColumns.map((column) => {
+      const label = columnLabels?.[column.id] ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+      return /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (checked) => column.toggleVisibility(checked),
+          children: label
+        },
+        column.id
+      );
+    }) })
+  ] });
+});
+DataTableColumnVisibility.displayName = "DataTableColumnVisibility";
+function DataTablePreset({
+  enableColumnVisibility = false,
+  columnLabels,
+  toolbar,
+  bulkActions,
+  ...tableProps
+}) {
+  const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    toolbar,
+    enableColumnVisibility && /* @__PURE__ */ jsx(DataTableColumnVisibility, { columnLabels })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs(DataTable, { ...tableProps, children: [
+    /* @__PURE__ */ jsx(
+      DataTableToolbar,
+      {
+        showSearch: tableProps.enableFiltering,
+        toolbar: toolbarSlot,
+        bulkActions
+      }
+    ),
+    /* @__PURE__ */ jsx(DataTableContent, {}),
+    tableProps.enablePagination && /* @__PURE__ */ jsx(DataTablePagination, {})
+  ] });
+}
+DataTablePreset.displayName = "DataTablePreset";
+var FilterBarContext = createContext(null);
+function useFilterBar() {
+  const ctx = useContext(FilterBarContext);
+  if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>");
+  return ctx;
+}
+var FilterBar = forwardRef(
+  ({ value, onChange, onClear, className, children, ...props }, ref) => /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { value, onChange, onClear }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "search",
+      "aria-label": "\u30D5\u30A3\u30EB\u30BF\u30FC",
+      "data-slot": "filter-bar",
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ...props,
+      children
+    }
+  ) })
+);
+FilterBar.displayName = "FilterBar";
+function FilterBarSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  className
+}) {
+  const { value, onChange } = useFilterBar();
+  const handleChange = (selected) => onChange({ ...value, [filterKey]: selected ?? void 0 });
+  const items = useMemo(
+    () => Object.fromEntries(options.map((option) => [option.value, option.label])),
+    [options]
+  );
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      items,
+      value: value[filterKey] ?? "",
+      onValueChange: handleChange,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": label, "data-slot": "filter-bar-select", className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? label }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+      ]
+    }
+  );
+}
+FilterBarSelect.displayName = "FilterBarSelect";
+function FilterBarMultiSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  className
+}) {
+  const { value, onChange } = useFilterBar();
+  const selected = value[filterKey] ?? [];
+  const handleToggle = (option) => {
+    const next = selected.includes(option) ? selected.filter((v) => v !== option) : [...selected, option];
+    onChange({ ...value, [filterKey]: next.length > 0 ? next : void 0 });
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn("h-8 gap-1", className) }),
+        "aria-label": `${placeholder ?? label}${selected.length > 0 ? ` (${selected.length}\u4EF6\u9078\u629E\u4E2D)` : ""}`,
+        "data-slot": "filter-bar-multi-select",
+        children: [
+          placeholder ?? label,
+          selected.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1 px-1.5 py-0 text-xs", children: selected.length }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-56 p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", role: "group", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected.includes(option.value),
+              disabled: option.disabled,
+              onCheckedChange: () => handleToggle(option.value)
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    )) }) })
+  ] });
+}
+FilterBarMultiSelect.displayName = "FilterBarMultiSelect";
+function FilterBarActiveChips({ filters, className }) {
+  const { value, onChange } = useFilterBar();
+  const getActiveChips = () => {
+    const chips = [];
+    const pushRaw = (key, v) => {
+      if (typeof v === "string") {
+        chips.push({ key, filterLabel: key, optionLabel: v, isMulti: false });
+      } else {
+        for (const val of v) {
+          chips.push({ key, filterLabel: key, optionLabel: val, optionValue: val, isMulti: true });
+        }
+      }
+    };
+    for (const [key, v] of Object.entries(value)) {
+      if (v === void 0 || v === "") continue;
+      const filter = filters?.find((f) => f.key === key);
+      if (!filter) {
+        pushRaw(key, v);
+        continue;
+      }
+      if (filter.type === "select" && typeof v === "string") {
+        const option = filter.options?.find((o) => o.value === v);
+        chips.push({
+          key,
+          filterLabel: filter.label,
+          optionLabel: option?.label ?? v,
+          isMulti: false
+        });
+      } else if (filter.type === "multi-select" && Array.isArray(v)) {
+        for (const val of v) {
+          const option = filter.options?.find((o) => o.value === val);
+          chips.push({
+            key,
+            filterLabel: filter.label,
+            optionLabel: option?.label ?? val,
+            optionValue: val,
+            isMulti: true
+          });
+        }
+      }
+    }
+    return chips;
+  };
+  const handleRemoveFilter = (key, optionValue) => {
+    if (optionValue !== void 0) {
+      const current = value[key] ?? [];
+      const next = current.filter((v) => v !== optionValue);
+      onChange({ ...value, [key]: next.length > 0 ? next : void 0 });
+    } else {
+      onChange({ ...value, [key]: void 0 });
+    }
+  };
+  const activeChips = getActiveChips();
+  if (activeChips.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment$1, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: "secondary",
+      className: cn("gap-1 pr-1", className),
+      "data-slot": "filter-bar-chip",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          chip.filterLabel,
+          ":"
+        ] }),
+        chip.optionLabel,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20",
+            onClick: () => handleRemoveFilter(chip.key, chip.optionValue),
+            "aria-label": `${chip.filterLabel}: ${chip.optionLabel} \u3092\u524A\u9664`,
+            children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+          }
+        )
+      ]
+    },
+    `${chip.key}-${chip.optionValue ?? "single"}`
+  )) });
+}
+FilterBarActiveChips.displayName = "FilterBarActiveChips";
+function FilterBarClearButton({ label = "\u30AF\u30EA\u30A2", className }) {
+  const { value, onClear } = useFilterBar();
+  const hasActiveFilters = Object.values(value).some(
+    (v) => Array.isArray(v) ? v.length > 0 : v !== void 0 && v !== ""
+  );
+  if (!hasActiveFilters || !onClear) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: cn("h-7 px-2 text-xs", className),
+      onClick: onClear,
+      "aria-label": "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+      "data-slot": "filter-bar-clear-button",
+      children: label
+    }
+  );
+}
+FilterBarClearButton.displayName = "FilterBarClearButton";
+function FilterBarPreset({
+  filters,
+  value,
+  onChange,
+  onClear,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(FilterBar, { value, onChange, onClear, className, children: [
+    filters.map((filter) => {
+      if (filter.type === "select") {
+        return /* @__PURE__ */ jsx(
+          FilterBarSelect,
+          {
+            filterKey: filter.key,
+            label: filter.label,
+            placeholder: filter.placeholder,
+            options: filter.options ?? []
+          },
+          filter.key
+        );
+      }
+      if (filter.type === "multi-select") {
+        return /* @__PURE__ */ jsx(
+          FilterBarMultiSelect,
+          {
+            filterKey: filter.key,
+            label: filter.label,
+            placeholder: filter.placeholder,
+            options: filter.options ?? []
+          },
+          filter.key
+        );
+      }
+      return null;
+    }),
+    /* @__PURE__ */ jsx(FilterBarActiveChips, { filters }),
+    onClear && /* @__PURE__ */ jsx(FilterBarClearButton, {})
+  ] });
+}
+FilterBarPreset.displayName = "FilterBarPreset";
+var defaultPresets = [
+  {
+    label: "Today",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfDay(today), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Yesterday",
+    getValue: () => {
+      const yesterday = subDays(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfDay(yesterday), to: endOfDay(yesterday) };
+    }
+  },
+  {
+    label: "Last 7 days",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfDay(subDays(today, 6)), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Last 14 days",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfDay(subDays(today, 13)), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Last 30 days",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfDay(subDays(today, 29)), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Last 90 days",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfDay(subDays(today, 89)), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "This month",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      return { from: startOfMonth(today), to: endOfDay(today) };
+    }
+  },
+  {
+    label: "Last month",
+    getValue: () => {
+      const lastMonth = subMonths(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
+    }
+  }
+];
+var DateRangePicker = forwardRef(
+  function DateRangePicker2({
+    value,
+    onChange,
+    presets = defaultPresets,
+    showPresets = true,
+    maxDate,
+    minDate,
+    placeholder = "Select date range",
+    disabled = false,
+    className,
+    align = "start"
+  }, ref) {
+    const [open, setOpen] = useState(false);
+    const isMobile = useIsMobile();
+    const handleCalendarSelect = useCallback(
+      (range) => {
+        onChange?.({ from: range?.from, to: range?.to });
+      },
+      [onChange]
+    );
+    const handlePresetClick = useCallback(
+      (preset) => {
+        onChange?.(preset.getValue());
+        setOpen(false);
+      },
+      [onChange]
+    );
+    const formatDateRange = () => {
+      if (!value?.from) return placeholder;
+      if (!value.to) return format(value.from, "yyyy/MM/dd", { locale: ja });
+      return `${format(value.from, "yyyy/MM/dd", { locale: ja })} - ${format(value.to, "yyyy/MM/dd", { locale: ja })}`;
+    };
+    const calendarSelected = value?.from ? { from: value.from, to: value.to ?? void 0 } : void 0;
+    return /* @__PURE__ */ jsx("div", { ref, "data-slot": "date-range-picker", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs(
+        PopoverTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled,
+              className: cn(
+                "w-auto justify-start text-left font-normal",
+                !value?.from && "text-muted-foreground",
+                className
+              )
+            }
+          ),
+          "aria-label": formatDateRange(),
+          "aria-expanded": open,
+          children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: formatDateRange() })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          align,
+          className: cn("w-auto p-0", isMobile ? "flex flex-col" : "flex"),
+          children: [
+            showPresets && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 p-3", isMobile ? "border-b" : "border-r"), children: presets.map((preset) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "justify-start text-xs",
+                onClick: () => handlePresetClick(preset),
+                children: preset.label
+              },
+              preset.label
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                numberOfMonths: isMobile ? 1 : 2,
+                selected: calendarSelected,
+                onSelect: handleCalendarSelect,
+                disabled: (date) => {
+                  if (maxDate && date > maxDate) return true;
+                  if (minDate && date < minDate) return true;
+                  return false;
+                }
+              }
+            ) })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+var iconSizes = {
+  sm: "size-3.5",
+  default: "size-4",
+  lg: "size-5"
+};
+var SegmentedControl = forwardRef(
+  function SegmentedControl2({ options, value, onChange, size = "default", fullWidth = false, ariaLabel, className }, ref) {
+    return /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        ref,
+        "data-slot": "segmented-control",
+        value: [value],
+        onValueChange: (next) => {
+          const picked = next.find((item) => item !== value) ?? next[0];
+          if (typeof picked === "string") onChange(picked);
+        },
+        variant: "outline",
+        size,
+        spacing: 0,
+        "aria-label": ariaLabel,
+        className: cn(fullWidth && "w-full", className),
+        children: options.map((option) => {
+          const Icon = option.icon;
+          return /* @__PURE__ */ jsxs(
+            ToggleGroupItem,
+            {
+              value: option.value,
+              disabled: option.disabled,
+              "aria-label": option.label,
+              className: cn(fullWidth && "flex-1"),
+              children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: iconSizes[size], "aria-hidden": "true" }),
+                option.label
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+
+// src/components/types.ts
+function isGroupedOptions(options) {
+  return options.length > 0 && "options" in options[0];
+}
+function flattenOptions(options) {
+  if (isGroupedOptions(options)) {
+    return options.flatMap((group) => group.options);
+  }
+  return options;
+}
+function OptionCommandList({
+  options,
+  isSelected,
+  onSelect,
+  onSearch,
+  isLoading,
+  searchPlaceholder,
+  emptyText
+}) {
+  const renderOptions = (items) => items.map((option) => /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      value: option.value,
+      keywords: [option.label],
+      disabled: option.disabled,
+      onSelect,
+      children: [
+        option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate", children: [
+          option.label,
+          option.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: option.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            className: cn("size-4 shrink-0", isSelected(option.value) ? "opacity-100" : "opacity-0")
+          }
+        )
+      ]
+    },
+    option.value
+  ));
+  return /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearch, children: [
+    /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearch }),
+    /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+      isGroupedOptions(options) ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: renderOptions(group.options) }, group.label)) : renderOptions(options)
+    ] }) })
+  ] });
+}
+function RemoveButton({ label, onRemove, iconClassName }) {
+  const handle = (e) => {
+    e.stopPropagation();
+    onRemove();
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": label,
+      className: "rounded-sm opacity-50 hover:opacity-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+      onClick: handle,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handle(e);
+      },
+      children: /* @__PURE__ */ jsx(XIcon, { className: cn("size-3.5", iconClassName) })
+    }
+  );
+}
+var SearchableSelect = forwardRef(
+  function SearchableSelect2({
+    options,
+    value,
+    onChange,
+    onSearch,
+    placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+    searchPlaceholder = "\u691C\u7D22...",
+    emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+    isLoading = false,
+    disabled = false,
+    clearable = true,
+    className
+  }, ref) {
+    const [open, setOpen] = useState(false);
+    const allOptions = useMemo(() => flattenOptions(options), [options]);
+    const selectedOption = useMemo(
+      () => allOptions.find((opt) => opt.value === value),
+      [allOptions, value]
+    );
+    function handleSelect(selectedValue) {
+      onChange?.(selectedValue === value ? void 0 : selectedValue);
+      setOpen(false);
+    }
+    return /* @__PURE__ */ jsx("div", { ref, "data-slot": "searchable-select", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs(
+        PopoverTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled,
+              className: cn(
+                "w-full justify-between font-normal",
+                !selectedOption && "text-muted-foreground",
+                className
+              )
+            }
+          ),
+          role: "combobox",
+          "aria-expanded": open,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+            /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+              clearable && value && /* @__PURE__ */ jsx(RemoveButton, { label: "\u30AF\u30EA\u30A2", onRemove: () => onChange?.(void 0) }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-(--anchor-width) p-0", align: "start", children: /* @__PURE__ */ jsx(
+        OptionCommandList,
+        {
+          options,
+          isSelected: (v) => value === v,
+          onSelect: handleSelect,
+          onSearch,
+          isLoading,
+          searchPlaceholder,
+          emptyText
+        }
+      ) })
+    ] }) });
+  }
+);
+SearchableSelect.displayName = "SearchableSelect";
+var MultiSelect = forwardRef(function MultiSelect2({
+  options,
+  value,
+  onChange,
+  onSearch,
+  maxCount = 3,
+  placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+  searchPlaceholder = "\u691C\u7D22...",
+  emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+  isLoading = false,
+  disabled = false,
+  className
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const listId = useId();
+  const allOptions = useMemo(() => flattenOptions(options), [options]);
+  const selectedOptions = useMemo(
+    () => allOptions.filter((opt) => value.includes(opt.value)),
+    [allOptions, value]
+  );
+  function handleSelect(selectedValue) {
+    if (value.includes(selectedValue)) {
+      onChange?.(value.filter((v) => v !== selectedValue));
+    } else {
+      onChange?.([...value, selectedValue]);
+    }
+  }
+  const visibleBadges = selectedOptions.slice(0, maxCount);
+  const overflowCount = selectedOptions.length - maxCount;
+  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "multi-select", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        disabled,
+        className: cn(
+          "inline-flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            visibleBadges.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 pr-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: option.label }),
+              /* @__PURE__ */ jsx(
+                RemoveButton,
+                {
+                  label: `${option.label}\u3092\u524A\u9664`,
+                  onRemove: () => onChange?.(value.filter((v) => v !== option.value)),
+                  iconClassName: "size-3"
+                }
+              )
+            ] }, option.value)),
+            overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0", children: [
+              "+",
+              overflowCount,
+              "\u4EF6"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { id: listId, className: "w-(--anchor-width) p-0", align: "start", children: /* @__PURE__ */ jsx(
+      OptionCommandList,
+      {
+        options,
+        isSelected: (v) => value.includes(v),
+        onSelect: handleSelect,
+        onSearch,
+        isLoading,
+        searchPlaceholder,
+        emptyText
+      }
+    ) })
+  ] }) });
+});
+MultiSelect.displayName = "MultiSelect";
+var metricValueVariants = cva("font-medium tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-base",
+      md: "text-2xl",
+      lg: "text-3xl",
+      xl: "text-4xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var MetricValue = forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "metric-value",
+      className: cn("my-4", metricValueVariants({ size }), className),
+      ...props
+    }
+  )
+);
+MetricValue.displayName = "MetricValue";
+var MetricUnit = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "metric-unit",
+      className: cn("text-sm font-normal text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+MetricUnit.displayName = "MetricUnit";
+var trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
+  variants: {
+    sentiment: {
+      positive: "text-chart-1",
+      negative: "text-primary",
+      neutral: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    sentiment: "neutral"
+  }
+});
+var TrendIndicator = forwardRef(
+  ({ value, direction, positiveIsGood = true, className }, ref) => {
+    const isGood = direction === "neutral" ? null : direction === "up" === positiveIsGood;
+    const sentiment = isGood === null ? "neutral" : isGood ? "positive" : "negative";
+    const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus;
+    const ariaLabel = direction === "neutral" ? `\u5909\u5316\u306A\u3057 ${value}%` : direction === "up" ? `${value}% \u5897\u52A0` : `${value}% \u6E1B\u5C11`;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "trend-indicator",
+        className: cn(trendIndicatorVariants({ sentiment }), className),
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-3.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            value,
+            "%"
+          ] })
+        ]
+      }
+    );
+  }
+);
+TrendIndicator.displayName = "TrendIndicator";
+var defaultColorMap = {
+  active: "green",
+  inactive: "gray",
+  warning: "yellow",
+  error: "red",
+  pending: "blue"
+};
+var colorStyles = {
+  green: {
+    dot: "bg-green-500",
+    bg: "bg-green-50 dark:bg-green-950",
+    text: "text-green-700 dark:text-green-300"
+  },
+  gray: {
+    dot: "bg-gray-500",
+    bg: "bg-gray-50 dark:bg-gray-950",
+    text: "text-gray-700 dark:text-gray-300"
+  },
+  yellow: {
+    dot: "bg-yellow-500",
+    bg: "bg-yellow-50 dark:bg-yellow-950",
+    text: "text-yellow-700 dark:text-yellow-300"
+  },
+  red: {
+    dot: "bg-red-500",
+    bg: "bg-red-50 dark:bg-red-950",
+    text: "text-red-700 dark:text-red-300"
+  },
+  blue: {
+    dot: "bg-blue-500",
+    bg: "bg-blue-50 dark:bg-blue-950",
+    text: "text-blue-700 dark:text-blue-300"
+  }
+};
+var fallbackStyle = colorStyles.gray;
+var StatusBadge = forwardRef(function StatusBadge2({ status, label, colorMap, className }, ref) {
+  const mergedColorMap = { ...defaultColorMap, ...colorMap };
+  const color = mergedColorMap[status] ?? "gray";
+  const style = colorStyles[color] ?? fallbackStyle;
+  const displayLabel = label ?? status;
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      ref,
+      "data-slot": "status-badge",
+      variant: "outline",
+      className: cn("gap-1.5 border-transparent", style.bg, style.text, className),
+      "aria-label": displayLabel,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("inline-block size-2 rounded-full", style.dot), "aria-hidden": "true" }),
+        displayLabel
+      ]
+    }
+  );
+});
+StatusBadge.displayName = "StatusBadge";
+
+export { AppShell, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, SearchableSelect, SectionHeader, SegmentedControl, StatusBadge, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map