@polastack/design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,3711 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/create-context.ts
+import * as React from "react";
+function createContext2(displayName) {
+  const Context = React.createContext(void 0);
+  Context.displayName = displayName;
+  function useContext4() {
+    const context = React.useContext(Context);
+    if (context === void 0) {
+      throw new Error(`use${displayName} must be used within a ${displayName}Provider`);
+    }
+    return context;
+  }
+  return [Context.Provider, useContext4];
+}
+
+// src/hooks/use-breakpoint.ts
+import { useState, useEffect } from "react";
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function getBreakpoint(width) {
+  if (width >= BREAKPOINTS["2xl"]) return "2xl";
+  if (width >= BREAKPOINTS.xl) return "xl";
+  if (width >= BREAKPOINTS.lg) return "lg";
+  if (width >= BREAKPOINTS.md) return "md";
+  if (width >= BREAKPOINTS.sm) return "sm";
+  return "base";
+}
+function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState("lg");
+  useEffect(() => {
+    function handleResize() {
+      setBreakpoint(getBreakpoint(window.innerWidth));
+    }
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return {
+    breakpoint,
+    isMobile: breakpoint === "base" || breakpoint === "sm",
+    isTablet: breakpoint === "md",
+    isDesktop: breakpoint === "lg" || breakpoint === "xl" || breakpoint === "2xl"
+  };
+}
+
+// src/hooks/use-display-mode.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function getDisplayMode() {
+  if (typeof window === "undefined") return "browser";
+  if (window.matchMedia("(display-mode: standalone)").matches) return "standalone";
+  if (window.matchMedia("(display-mode: minimal-ui)").matches) return "minimal-ui";
+  if (window.matchMedia("(display-mode: fullscreen)").matches) return "fullscreen";
+  return "browser";
+}
+function useDisplayMode() {
+  const [displayMode, setDisplayMode] = useState2(getDisplayMode);
+  useEffect2(() => {
+    const mediaQuery = window.matchMedia("(display-mode: standalone)");
+    function handleChange() {
+      setDisplayMode(getDisplayMode());
+    }
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return {
+    displayMode,
+    isStandalone: displayMode === "standalone",
+    isPWA: displayMode !== "browser"
+  };
+}
+
+// src/hooks/use-online-status.ts
+import { useState as useState3, useEffect as useEffect3, useCallback } from "react";
+function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState3(
+    () => typeof navigator !== "undefined" ? navigator.onLine : true
+  );
+  const handleOnline = useCallback(() => setIsOnline(true), []);
+  const handleOffline = useCallback(() => setIsOnline(false), []);
+  useEffect3(() => {
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [handleOnline, handleOffline]);
+  return { isOnline, isOffline: !isOnline };
+}
+
+// src/hooks/use-viewport-height.ts
+import { useState as useState4, useEffect as useEffect4 } from "react";
+function useViewportHeight() {
+  const [viewportHeight, setViewportHeight] = useState4(
+    () => typeof window !== "undefined" ? window.innerHeight : 0
+  );
+  useEffect4(() => {
+    function handleResize() {
+      setViewportHeight(window.innerHeight);
+    }
+    const viewport = window.visualViewport;
+    if (viewport) {
+      const handleViewportResize = () => {
+        setViewportHeight(viewport.height);
+      };
+      handleViewportResize();
+      viewport.addEventListener("resize", handleViewportResize);
+      return () => viewport.removeEventListener("resize", handleViewportResize);
+    }
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return viewportHeight;
+}
+
+// src/hooks/use-install-prompt.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback2 } from "react";
+function useInstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState5(null);
+  const [isInstalled, setIsInstalled] = useState5(false);
+  useEffect5(() => {
+    if (window.matchMedia("(display-mode: standalone)").matches) {
+      setIsInstalled(true);
+      return;
+    }
+    function handleBeforeInstallPrompt(e) {
+      e.preventDefault();
+      setDeferredPrompt(e);
+    }
+    function handleAppInstalled() {
+      setIsInstalled(true);
+      setDeferredPrompt(null);
+    }
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+    window.addEventListener("appinstalled", handleAppInstalled);
+    return () => {
+      window.removeEventListener(
+        "beforeinstallprompt",
+        handleBeforeInstallPrompt
+      );
+      window.removeEventListener("appinstalled", handleAppInstalled);
+    };
+  }, []);
+  const promptInstall = useCallback2(async () => {
+    if (!deferredPrompt) return null;
+    await deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === "accepted") {
+      setIsInstalled(true);
+    }
+    setDeferredPrompt(null);
+    return outcome;
+  }, [deferredPrompt]);
+  return {
+    canInstall: !!deferredPrompt && !isInstalled,
+    isInstalled,
+    promptInstall
+  };
+}
+
+// src/hooks/use-theme.ts
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback3, useMemo } from "react";
+var DEFAULT_STORAGE_KEY = "polastack-theme";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme(storageKey) {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  } catch {
+  }
+  return null;
+}
+function applyTheme(resolvedTheme) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (resolvedTheme === "dark") {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+}
+function useTheme(options = {}) {
+  const {
+    storageKey = DEFAULT_STORAGE_KEY,
+    defaultTheme = "system"
+  } = options;
+  const [theme, setThemeState] = useState6(
+    () => getStoredTheme(storageKey) ?? defaultTheme
+  );
+  const [systemTheme, setSystemTheme] = useState6(getSystemTheme);
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+  const setTheme = useCallback3(
+    (newTheme) => {
+      setThemeState(newTheme);
+      try {
+        localStorage.setItem(storageKey, newTheme);
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  useEffect6(() => {
+    applyTheme(resolvedTheme);
+  }, [resolvedTheme]);
+  useEffect6(() => {
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return useMemo(
+    () => ({ theme, setTheme, resolvedTheme }),
+    [theme, setTheme, resolvedTheme]
+  );
+}
+
+// src/components/theme-provider/theme-provider.tsx
+import * as React2 from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = React2.createContext(void 0);
+ThemeContext.displayName = "ThemeContext";
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey
+}) {
+  const themeValue = useTheme({ defaultTheme, storageKey });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeValue, children });
+}
+ThemeProvider.displayName = "ThemeProvider";
+function useTheme2() {
+  const context = React2.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/components/button/button.tsx
+import * as React3 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700",
+        destructive: "bg-error-500 text-white hover:bg-error-600 active:bg-error-700",
+        outline: "border border-[--color-border-input] bg-[--color-surface-raised] text-[--color-on-surface] hover:bg-[--color-surface-sunken] active:bg-[--color-surface-muted]",
+        ghost: "text-[--color-on-surface] hover:bg-[--color-surface-muted] active:bg-neutral-200 dark:active:bg-neutral-700",
+        link: "text-primary-500 underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-6 text-base",
+        icon: "h-9 w-9 touch:min-w-[--touch-target-min]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Button.displayName = "Button";
+
+// src/components/badge/badge.tsx
+import * as React4 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-100 text-primary-700 dark:bg-primary-950 dark:text-primary-300",
+        success: "bg-success-100 text-success-700 dark:bg-success-950 dark:text-success-300",
+        warning: "bg-warning-100 text-warning-700 dark:bg-warning-950 dark:text-warning-300",
+        error: "bg-error-100 text-error-700 dark:bg-error-950 dark:text-error-300",
+        info: "bg-info-100 text-info-700 dark:bg-info-950 dark:text-info-300",
+        outline: "border border-[--color-border-input] text-[--color-on-surface-secondary]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = React4.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx3(
+    "span",
+    {
+      ref,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+Badge.displayName = "Badge";
+
+// src/components/avatar/avatar.tsx
+import * as React5 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var [AvatarContextProvider, useAvatarContext] = createContext2("Avatar");
+var avatarVariants = cva3(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Avatar = React5.forwardRef(
+  ({ className, size, ...props }, ref) => {
+    const [imageLoaded, setImageLoaded] = React5.useState(false);
+    return /* @__PURE__ */ jsx4(AvatarContextProvider, { value: { imageLoaded, setImageLoaded }, children: /* @__PURE__ */ jsx4(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        ...props
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React5.forwardRef(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const { imageLoaded, setImageLoaded } = useAvatarContext();
+    return /* @__PURE__ */ jsx4(
+      "img",
+      {
+        ref,
+        className: cn(
+          "aspect-square h-full w-full object-cover",
+          !imageLoaded && "hidden",
+          className
+        ),
+        onLoad: (e) => {
+          setImageLoaded(true);
+          onLoad?.(e);
+        },
+        onError: (e) => {
+          setImageLoaded(false);
+          onError?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => {
+  const { imageLoaded } = useAvatarContext();
+  if (imageLoaded) return null;
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-[--color-surface-muted] font-medium text-[--color-on-surface-secondary]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+
+// src/components/separator/separator.tsx
+import * as React6 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Separator = React6.forwardRef(
+  ({ className, orientation = "horizontal", decorative = false, ...props }, ref) => /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": decorative ? void 0 : orientation,
+      className: cn(
+        "shrink-0 bg-[--color-border]",
+        orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+
+// src/components/skeleton/skeleton.tsx
+import * as React7 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Skeleton = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn("animate-pulse rounded-md bg-[--color-skeleton]", className),
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/spinner/spinner.tsx
+import * as React8 from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var spinnerVariants = cva4("animate-spin", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Spinner = React8.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "status", "aria-label": "Loading", ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: cn(spinnerVariants({ size }), className),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx7(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Loading..." })
+  ] })
+);
+Spinner.displayName = "Spinner";
+
+// src/components/card/card.tsx
+import * as React9 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border border-[--color-border] bg-[--color-surface-raised] shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  "h3",
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/components/tooltip/tooltip.tsx
+import * as React10 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx9(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-tooltip overflow-hidden rounded-md bg-[--color-tooltip-bg] px-3 py-1.5 text-xs text-[--color-tooltip-text] shadow-md",
+      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "touch:hidden",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/toast/toast.tsx
+import * as React11 from "react";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var ToastProvider = ToastPrimitive.Provider;
+var ToastViewport = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed bottom-0 left-0 right-0 z-toast flex max-h-screen w-full flex-col-reverse gap-2 p-4 pb-[calc(1rem+var(--safe-area-bottom))] sm:left-auto sm:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = "ToastViewport";
+var toastVariants = cva5(
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=open]:slide-in-from-right-full data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full",
+  {
+    variants: {
+      variant: {
+        default: "border-[--color-border] bg-[--color-surface-raised] text-[--color-on-surface]",
+        success: "border-success-200 bg-success-50 text-success-900 dark:border-success-800 dark:bg-success-950 dark:text-success-200",
+        error: "border-error-200 bg-error-50 text-error-900 dark:border-error-800 dark:bg-error-950 dark:text-error-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React11.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Root,
+  {
+    ref,
+    className: cn(toastVariants({ variant }), className),
+    ...props
+  }
+));
+Toast.displayName = "Toast";
+var ToastAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-[--color-border] bg-transparent px-3 text-xs font-medium transition-colors hover:bg-[--color-surface-muted] focus:outline-none focus:ring-2 focus:ring-[--color-ring] focus:ring-offset-2 ring-offset-[--color-ring-offset] disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = "ToastAction";
+var ToastClose = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 text-[--color-on-surface-muted] opacity-0 transition-opacity hover:text-[--color-on-surface] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
+      className
+    ),
+    "toast-close": "",
+    "aria-label": "Close",
+    ...props,
+    children: /* @__PURE__ */ jsxs2(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx10("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx10("path", { d: "m6 6 12 12" })
+        ]
+      }
+    )
+  }
+));
+ToastClose.displayName = "ToastClose";
+var ToastTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold", className),
+    ...props
+  }
+));
+ToastTitle.displayName = "ToastTitle";
+var ToastDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ToastPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = "ToastDescription";
+
+// src/components/toast/use-toast.ts
+import * as React12 from "react";
+var TOAST_LIMIT = 5;
+var TOAST_REMOVE_DELAY = 1e3;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+function addToRemoveQueue(toastId) {
+  if (toastTimeouts.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((t) => addToRemoveQueue(t.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return { ...state, toasts: [] };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+}
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+function toast(props) {
+  const id = genId();
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: { ...props, id, open: true }
+  });
+  return { id, dismiss };
+}
+function useToast() {
+  const [state, setState] = React12.useState(memoryState);
+  React12.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, []);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  };
+}
+
+// src/components/toast/toaster.tsx
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs3(ToastProvider, { children: [
+    toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs3(Toast, { ...props, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+        title && /* @__PURE__ */ jsx11(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx11(ToastDescription, { children: description })
+      ] }),
+      action,
+      /* @__PURE__ */ jsx11(ToastClose, {})
+    ] }, id)),
+    /* @__PURE__ */ jsx11(ToastViewport, {})
+  ] });
+}
+
+// src/components/label/label.tsx
+import * as React13 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var Label = React13.forwardRef(({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "text-sm font-medium text-[--color-on-surface] peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      required && /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "ml-0.5 text-error-500", children: "*" })
+    ]
+  }
+));
+Label.displayName = "Label";
+
+// src/components/input/input.tsx
+import * as React14 from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var inputVariants = cva6(
+  "flex w-full rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-[--color-on-surface] transition-colors duration-fast file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[--color-on-surface-muted] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500 touch:min-h-[--touch-target-min]",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-9 text-sm",
+        lg: "h-10 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Input = React14.forwardRef(
+  ({ className, size, type, ...props }, ref) => /* @__PURE__ */ jsx13(
+    "input",
+    {
+      ref,
+      type,
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+// src/components/textarea/textarea.tsx
+import * as React15 from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var textareaVariants = cva7(
+  "flex w-full resize-y rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 py-2 text-[--color-on-surface] transition-colors duration-fast placeholder:text-[--color-on-surface-muted] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
+  {
+    variants: {
+      size: {
+        sm: "min-h-[60px] text-xs",
+        md: "min-h-[80px] text-sm",
+        lg: "min-h-[100px] text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Textarea = React15.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx14(
+    "textarea",
+    {
+      ref,
+      className: cn(textareaVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
+// src/components/checkbox/checkbox.tsx
+import * as React16 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Checkbox = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[--color-border-input] transition-colors duration-fast",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 data-[state=checked]:text-white",
+      "data-[state=indeterminate]:border-primary-500 data-[state=indeterminate]:bg-primary-500 data-[state=indeterminate]:text-white",
+      "touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx15(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx15(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        children: /* @__PURE__ */ jsx15("path", { d: "M5 12h14" })
+      }
+    ) : /* @__PURE__ */ jsx15(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx15("polyline", { points: "20 6 9 17 4 12" })
+      }
+    ) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+
+// src/components/radio-group/radio-group.tsx
+import * as React17 from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var RadioGroup = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  RadioGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex flex-col gap-2", className),
+    ...props
+  }
+));
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  RadioGroupPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "aspect-square h-4 w-4 rounded-full border border-[--color-border-input] transition-colors duration-fast",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-primary-500",
+      "touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx16(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx16(
+      "svg",
+      {
+        width: "8",
+        height: "8",
+        viewBox: "0 0 8 8",
+        fill: "currentColor",
+        className: "text-primary-500",
+        children: /* @__PURE__ */ jsx16("circle", { cx: "4", cy: "4", r: "4" })
+      }
+    ) })
+  }
+));
+RadioGroupItem.displayName = "RadioGroupItem";
+
+// src/components/switch/switch.tsx
+import * as React18 from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var switchVariants = cva8(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-neutral-300 dark:data-[state=unchecked]:bg-neutral-600 touch:min-h-[--touch-target-min]",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-7",
+        md: "h-5 w-9",
+        lg: "h-6 w-11"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var thumbVariants = cva8(
+  "pointer-events-none block rounded-full bg-white shadow-sm transition-transform duration-fast",
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0",
+        md: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        lg: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Switch = React18.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx17(
+  SwitchPrimitive.Root,
+  {
+    ref,
+    className: cn(switchVariants({ size }), className),
+    ...props,
+    children: /* @__PURE__ */ jsx17(SwitchPrimitive.Thumb, { className: thumbVariants({ size }) })
+  }
+));
+Switch.displayName = "Switch";
+
+// src/components/select/select.tsx
+import * as React19 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-sm text-[--color-on-surface] transition-colors duration-fast",
+      "placeholder:text-[--color-on-surface-muted]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-ring] focus-visible:ring-offset-2 ring-offset-[--color-ring-offset]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
+      "touch:min-h-[--touch-target-min]",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx18(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "shrink-0 opacity-50",
+          children: /* @__PURE__ */ jsx18("path", { d: "m6 9 6 6 6-6" })
+        }
+      ) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx18(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx18(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx18(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-[--color-surface-muted]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx18("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx18(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx18("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx18(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-medium text-[--color-on-surface-muted]", className),
+    ...props
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+// src/components/number-input/number-input.tsx
+import * as React20 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var numberInputVariants = cva9(
+  "flex w-full rounded-md border border-[--color-border-input] bg-[--color-surface-raised] text-[--color-on-surface] transition-colors duration-fast focus-within:ring-2 focus-within:ring-[--color-ring] focus-within:ring-offset-2 ring-offset-[--color-ring-offset] aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-within:ring-error-500",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-9 text-sm",
+        lg: "h-10 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var NumberInput = React20.forwardRef(
+  ({
+    className,
+    size,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    min,
+    max,
+    step = 1,
+    precision,
+    disabled,
+    readOnly,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React20.useState(
+      defaultValue != null ? formatValue(defaultValue, precision) : ""
+    );
+    const isControlled = controlledValue !== void 0;
+    const displayValue = isControlled ? controlledValue != null ? formatValue(controlledValue, precision) : "" : internalValue;
+    function formatValue(val, prec) {
+      return prec != null ? val.toFixed(prec) : String(val);
+    }
+    function clamp(val) {
+      let result = val;
+      if (min != null) result = Math.max(min, result);
+      if (max != null) result = Math.min(max, result);
+      return result;
+    }
+    function updateValue(newValue) {
+      if (newValue != null) {
+        const clamped = clamp(newValue);
+        if (!isControlled) {
+          setInternalValue(formatValue(clamped, precision));
+        }
+        onChange?.(clamped);
+      } else {
+        if (!isControlled) {
+          setInternalValue("");
+        }
+        onChange?.(void 0);
+      }
+    }
+    function handleInputChange(e) {
+      const raw = e.target.value;
+      if (!isControlled) {
+        setInternalValue(raw);
+      }
+      if (raw === "" || raw === "-") {
+        onChange?.(void 0);
+        return;
+      }
+      const num = parseFloat(raw);
+      if (!isNaN(num)) {
+        onChange?.(num);
+      }
+    }
+    function handleBlur() {
+      const num = parseFloat(displayValue);
+      if (!isNaN(num)) {
+        updateValue(num);
+      } else {
+        updateValue(void 0);
+      }
+    }
+    function increment() {
+      const current = parseFloat(displayValue) || 0;
+      updateValue(current + step);
+    }
+    function decrement() {
+      const current = parseFloat(displayValue) || 0;
+      updateValue(current - step);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        increment();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        decrement();
+      }
+    }
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cn(
+          numberInputVariants({ size }),
+          (disabled || readOnly) && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        "aria-invalid": props["aria-invalid"],
+        children: [
+          /* @__PURE__ */ jsx19(
+            "input",
+            {
+              ref,
+              type: "text",
+              inputMode: "numeric",
+              value: displayValue,
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              disabled,
+              readOnly,
+              className: "h-full w-full bg-transparent px-3 outline-none disabled:cursor-not-allowed",
+              ...props
+            }
+          ),
+          !readOnly && !disabled && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col border-l border-[--color-border-input]", children: [
+            /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: increment,
+                disabled: max != null && parseFloat(displayValue) >= max,
+                className: "flex flex-1 items-center justify-center px-1.5 text-[--color-on-surface-muted] hover:bg-[--color-surface-muted] disabled:opacity-30",
+                "aria-label": "Increment",
+                children: /* @__PURE__ */ jsx19(
+                  "svg",
+                  {
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx19("path", { d: "m18 15-6-6-6 6" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: decrement,
+                disabled: min != null && parseFloat(displayValue) <= min,
+                className: "flex flex-1 items-center justify-center border-t border-[--color-border-input] px-1.5 text-[--color-on-surface-muted] hover:bg-[--color-surface-muted] disabled:opacity-30",
+                "aria-label": "Decrement",
+                children: /* @__PURE__ */ jsx19(
+                  "svg",
+                  {
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx19("path", { d: "m6 9 6 6 6-6" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+// src/components/date-picker/date-picker.tsx
+import * as React21 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var DatePicker = React21.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx20(
+    "input",
+    {
+      ref,
+      type: "date",
+      className: cn(
+        inputVariants({ size }),
+        "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DatePicker.displayName = "DatePicker";
+
+// src/components/combobox/combobox.tsx
+import * as React22 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var Combobox = React22.forwardRef(
+  ({
+    options,
+    value,
+    onValueChange,
+    placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+    searchPlaceholder = "\u691C\u7D22...",
+    emptyMessage = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+    disabled,
+    className,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React22.useState(false);
+    const [search, setSearch] = React22.useState("");
+    const selectedOption = options.find((o) => o.value === value);
+    return /* @__PURE__ */ jsxs7(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs7(
+        PopoverPrimitive.Trigger,
+        {
+          ref,
+          role: "combobox",
+          "aria-expanded": open,
+          disabled,
+          className: cn(
+            "flex h-9 w-full items-center justify-between rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 text-sm text-[--color-on-surface] transition-colors duration-fast",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-[invalid=true]:border-error-500 aria-[invalid=true]:focus-visible:ring-error-500",
+            "touch:min-h-[--touch-target-min]",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx21("span", { className: cn(!selectedOption && "text-[--color-on-surface-muted]"), children: selectedOption?.label ?? placeholder }),
+            /* @__PURE__ */ jsxs7(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "shrink-0 opacity-50",
+                children: [
+                  /* @__PURE__ */ jsx21("path", { d: "m7 15 5 5 5-5" }),
+                  /* @__PURE__ */ jsx21("path", { d: "m7 9 5-5 5 5" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx21(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
+        PopoverPrimitive.Content,
+        {
+          className: "z-popover w-[var(--radix-popover-trigger-width)] rounded-md border border-[--color-border] bg-[--color-surface-raised] p-0 shadow-md animate-in fade-in-0 zoom-in-95",
+          sideOffset: 4,
+          align: "start",
+          children: /* @__PURE__ */ jsxs7(Command, { shouldFilter: true, children: [
+            /* @__PURE__ */ jsx21(
+              Command.Input,
+              {
+                value: search,
+                onValueChange: setSearch,
+                placeholder: searchPlaceholder,
+                className: "flex h-9 w-full border-b border-[--color-border] bg-transparent px-3 text-sm outline-none placeholder:text-[--color-on-surface-muted]"
+              }
+            ),
+            /* @__PURE__ */ jsxs7(Command.List, { className: "max-h-60 overflow-auto p-1", children: [
+              /* @__PURE__ */ jsx21(Command.Empty, { className: "px-2 py-6 text-center text-sm text-[--color-on-surface-muted]", children: emptyMessage }),
+              options.map((option) => /* @__PURE__ */ jsxs7(
+                Command.Item,
+                {
+                  value: option.label,
+                  disabled: option.disabled,
+                  onSelect: () => {
+                    onValueChange?.(
+                      option.value === value ? "" : option.value
+                    );
+                    setOpen(false);
+                    setSearch("");
+                  },
+                  className: cn(
+                    "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+                    "data-[selected=true]:bg-[--color-surface-muted]",
+                    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: option.value === value && /* @__PURE__ */ jsx21(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsx21("polyline", { points: "20 6 9 17 4 12" })
+                      }
+                    ) }),
+                    option.label
+                  ]
+                },
+                option.value
+              ))
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+
+// src/components/form-field/form-field.tsx
+import * as React23 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var [FormFieldProvider, useFormField] = createContext2("FormField");
+var FormField = React23.forwardRef(
+  ({ className, error, required, disabled, children, ...props }, ref) => {
+    const id = React23.useId();
+    const descriptionId = `${id}-description`;
+    const messageId = `${id}-message`;
+    return /* @__PURE__ */ jsx22(
+      FormFieldProvider,
+      {
+        value: { id, error, required, disabled, descriptionId, messageId },
+        children: /* @__PURE__ */ jsx22("div", { ref, className: cn("space-y-1.5", className), ...props, children })
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+var FormLabel = React23.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { id, error, required } = useFormField();
+    return /* @__PURE__ */ jsx22(
+      Label,
+      {
+        ref,
+        htmlFor: id,
+        required,
+        className: cn(error && "text-error-600", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+function FormControl({ children }) {
+  const { id, error, disabled, descriptionId, messageId } = useFormField();
+  const describedBy = [
+    !error ? descriptionId : void 0,
+    error ? messageId : void 0
+  ].filter(Boolean).join(" ") || void 0;
+  return React23.cloneElement(children, {
+    id,
+    "aria-invalid": error ? true : void 0,
+    "aria-describedby": describedBy,
+    disabled: children.props.disabled ?? disabled,
+    required: children.props.required
+  });
+}
+FormControl.displayName = "FormControl";
+var FormDescription = React23.forwardRef(({ className, ...props }, ref) => {
+  const { descriptionId } = useFormField();
+  return /* @__PURE__ */ jsx22(
+    "p",
+    {
+      ref,
+      id: descriptionId,
+      className: cn("text-xs text-[--color-on-surface-muted]", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React23.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, messageId } = useFormField();
+  const message = error || children;
+  if (!message) return null;
+  return /* @__PURE__ */ jsx22(
+    "p",
+    {
+      ref,
+      id: messageId,
+      role: "alert",
+      className: cn("text-xs text-error-600", className),
+      ...props,
+      children: message
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+// src/components/dynamic-form-field/dynamic-form-field.tsx
+import * as React24 from "react";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+function getFieldComponent(type) {
+  const map = {
+    text: "Input",
+    email: "Input",
+    url: "Input",
+    tel: "Input",
+    password: "Input",
+    number: "NumberInput",
+    textarea: "Textarea",
+    select: "Select",
+    combobox: "Combobox",
+    checkbox: "Checkbox",
+    radio: "RadioGroup",
+    switch: "Switch",
+    date: "DatePicker",
+    datetime: "Input",
+    time: "Input",
+    file: "Input"
+  };
+  return map[type];
+}
+function isInlineField(type) {
+  return type === "checkbox" || type === "switch";
+}
+var DynamicFormField = React24.forwardRef(
+  ({
+    type,
+    name,
+    label,
+    description,
+    error,
+    required,
+    disabled,
+    placeholder,
+    value,
+    onChange,
+    options = [],
+    min,
+    max,
+    step,
+    rows,
+    className
+  }, ref) => {
+    if (isInlineField(type)) {
+      return /* @__PURE__ */ jsxs8(FormField, { ref, error, disabled, className, children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx23(FormControl, { children: type === "checkbox" ? /* @__PURE__ */ jsx23(
+            Checkbox,
+            {
+              name,
+              checked: value,
+              onCheckedChange: (checked) => onChange?.(checked)
+            }
+          ) : /* @__PURE__ */ jsx23(
+            Switch,
+            {
+              name,
+              checked: value,
+              onCheckedChange: (checked) => onChange?.(checked)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs8(Label, { className: "text-sm font-normal", children: [
+            label,
+            required && /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "ml-0.5 text-error-500", children: "*" })
+          ] })
+        ] }),
+        description && /* @__PURE__ */ jsx23(FormDescription, { children: description }),
+        /* @__PURE__ */ jsx23(FormMessage, {})
+      ] });
+    }
+    function renderControl() {
+      switch (type) {
+        case "textarea":
+          return /* @__PURE__ */ jsx23(
+            Textarea,
+            {
+              name,
+              placeholder,
+              value,
+              onChange: (e) => onChange?.(e.target.value),
+              rows
+            }
+          );
+        case "number":
+          return /* @__PURE__ */ jsx23(
+            NumberInput,
+            {
+              name,
+              placeholder,
+              value,
+              onChange: (v) => onChange?.(v),
+              min,
+              max,
+              step
+            }
+          );
+        case "date":
+          return /* @__PURE__ */ jsx23(
+            DatePicker,
+            {
+              name,
+              value,
+              onChange: (e) => onChange?.(e.target.value),
+              min,
+              max
+            }
+          );
+        case "select":
+          return /* @__PURE__ */ jsxs8(
+            Select,
+            {
+              value,
+              onValueChange: (v) => onChange?.(v),
+              disabled,
+              name,
+              children: [
+                /* @__PURE__ */ jsx23(SelectTrigger, { children: /* @__PURE__ */ jsx23(SelectValue, { placeholder }) }),
+                /* @__PURE__ */ jsx23(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx23(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+              ]
+            }
+          );
+        case "combobox":
+          return /* @__PURE__ */ jsx23(
+            Combobox,
+            {
+              name,
+              options,
+              value,
+              onValueChange: (v) => onChange?.(v),
+              placeholder
+            }
+          );
+        case "radio":
+          return /* @__PURE__ */ jsx23(
+            RadioGroup,
+            {
+              value,
+              onValueChange: (v) => onChange?.(v),
+              children: options.map((opt) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx23(RadioGroupItem, { value: opt.value, id: `${name}-${opt.value}` }),
+                /* @__PURE__ */ jsx23(Label, { htmlFor: `${name}-${opt.value}`, className: "font-normal", children: opt.label })
+              ] }, opt.value))
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsx23(
+            Input,
+            {
+              type: type === "datetime" ? "datetime-local" : type,
+              name,
+              placeholder,
+              value,
+              onChange: (e) => onChange?.(e.target.value)
+            }
+          );
+      }
+    }
+    return /* @__PURE__ */ jsxs8(FormField, { ref, error, required, disabled, className, children: [
+      /* @__PURE__ */ jsx23(FormLabel, { children: label }),
+      /* @__PURE__ */ jsx23(FormControl, { children: renderControl() }),
+      description && /* @__PURE__ */ jsx23(FormDescription, { children: description }),
+      /* @__PURE__ */ jsx23(FormMessage, {})
+    ] });
+  }
+);
+DynamicFormField.displayName = "DynamicFormField";
+
+// src/components/form-layout/form-layout.tsx
+import * as React25 from "react";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var formLayoutVariants = cva10("", {
+  variants: {
+    layout: {
+      vertical: "flex flex-col",
+      horizontal: "grid grid-cols-[auto_1fr] items-start",
+      grid: "grid"
+    },
+    size: {
+      sm: "gap-3",
+      md: "gap-4",
+      lg: "gap-6"
+    }
+  },
+  compoundVariants: [
+    {
+      layout: "horizontal",
+      size: "sm",
+      className: "gap-x-4 gap-y-3"
+    },
+    {
+      layout: "horizontal",
+      size: "md",
+      className: "gap-x-6 gap-y-4"
+    },
+    {
+      layout: "horizontal",
+      size: "lg",
+      className: "gap-x-8 gap-y-6"
+    }
+  ],
+  defaultVariants: {
+    layout: "vertical",
+    size: "md"
+  }
+});
+var FormLayout = React25.forwardRef(
+  ({ className, layout, size, columns = 2, style, ...props }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      className: cn(formLayoutVariants({ layout, size }), className),
+      style: layout === "grid" ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : style,
+      ...props
+    }
+  )
+);
+FormLayout.displayName = "FormLayout";
+var FormSection = React25.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
+  "fieldset",
+  {
+    ref,
+    className: cn("space-y-4 border-0 p-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx24("legend", { className: "text-sm font-semibold text-[--color-on-surface]", children: title }),
+      description && /* @__PURE__ */ jsx24("p", { className: "-mt-2 text-xs text-[--color-on-surface-muted]", children: description }),
+      children
+    ]
+  }
+));
+FormSection.displayName = "FormSection";
+var alignClasses = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center",
+  between: "justify-between"
+};
+var FormActions = React25.forwardRef(
+  ({ className, align = "right", ...props }, ref) => /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-3 pt-4 border-t border-[--color-border]",
+        alignClasses[align],
+        className
+      ),
+      ...props
+    }
+  )
+);
+FormActions.displayName = "FormActions";
+
+// src/components/tabs/tabs.tsx
+import * as React26 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva as cva11 } from "class-variance-authority";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var [TabsVariantProvider, useTabsVariant] = createContext2("TabsVariant");
+var Tabs = TabsPrimitive.Root;
+var tabsListVariants = cva11(
+  "inline-flex items-center justify-center",
+  {
+    variants: {
+      variant: {
+        default: "rounded-lg bg-[--color-surface-muted] p-1",
+        underline: "border-b border-[--color-border] bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var TabsList = React26.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx25(TabsVariantProvider, { value: { variant }, children: /* @__PURE__ */ jsx25(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(tabsListVariants({ variant }), className),
+    ...props
+  }
+) }));
+TabsList.displayName = "TabsList";
+var tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 touch:min-h-[--touch-target-min]";
+var tabsTriggerVariantStyles = {
+  default: "rounded-md data-[state=active]:bg-[--color-surface-raised] data-[state=active]:shadow-sm data-[state=active]:text-[--color-on-surface] text-[--color-on-surface-secondary]",
+  underline: "border-b-2 border-transparent rounded-none data-[state=active]:border-primary-500 data-[state=active]:text-[--color-on-surface] text-[--color-on-surface-secondary]"
+};
+var TabsTrigger = React26.forwardRef(({ className, ...props }, ref) => {
+  const { variant } = useTabsVariant();
+  return /* @__PURE__ */ jsx25(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        tabsTriggerBase,
+        tabsTriggerVariantStyles[variant],
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+
+// src/components/empty-state/empty-state.tsx
+import * as React27 from "react";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var emptyStateVariants = cva12(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      size: {
+        sm: "py-8 gap-2",
+        md: "py-12 gap-3",
+        lg: "py-20 gap-4"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var EmptyState = React27.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx26(
+    "div",
+    {
+      ref,
+      className: cn(emptyStateVariants({ size }), className),
+      ...props
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+var EmptyStateIcon = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  "div",
+  {
+    ref,
+    className: cn("text-[--color-on-surface-muted] [&>svg]:h-10 [&>svg]:w-10", className),
+    ...props
+  }
+));
+EmptyStateIcon.displayName = "EmptyStateIcon";
+var EmptyStateTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  "h3",
+  {
+    ref,
+    className: cn("text-base font-semibold text-[--color-on-surface]", className),
+    ...props
+  }
+));
+EmptyStateTitle.displayName = "EmptyStateTitle";
+var EmptyStateDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-[--color-on-surface-muted] max-w-sm", className),
+    ...props
+  }
+));
+EmptyStateDescription.displayName = "EmptyStateDescription";
+var EmptyStateActions = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-2 mt-2", className),
+    ...props
+  }
+));
+EmptyStateActions.displayName = "EmptyStateActions";
+
+// src/components/table/table.tsx
+import * as React28 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Table = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx27(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-[--color-surface-sunken] font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-[--color-border] transition-colors hover:bg-[--color-surface-sunken] data-[state=selected]:bg-primary-50 dark:data-[state=selected]:bg-primary-950",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-3 text-left align-middle text-xs font-medium text-[--color-on-surface-muted] uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "td",
+  {
+    ref,
+    className: cn(
+      "px-3 py-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-[--color-on-surface-muted]", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/components/data-table/data-table.tsx
+import * as React30 from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  flexRender
+} from "@tanstack/react-table";
+
+// src/components/data-table/data-table-pagination.tsx
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+function DataTablePagination({
+  table,
+  pageSizeOptions = [10, 20, 30, 50],
+  className
+}) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const from = pageIndex * pageSize + 1;
+  const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-3 py-3 text-sm text-[--color-on-surface-secondary]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx28("span", { children: "Rows per page" }),
+          /* @__PURE__ */ jsx28(
+            "select",
+            {
+              value: pageSize,
+              onChange: (e) => table.setPageSize(Number(e.target.value)),
+              className: "h-8 rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-2 text-sm",
+              "aria-label": "Rows per page",
+              children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx28("option", { value: size, children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx28("span", { children: totalRows > 0 ? `${from}-${to} of ${totalRows}` : "0 results" }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx28(
+              "button",
+              {
+                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[--color-border-input] bg-[--color-surface-raised] transition-colors hover:bg-[--color-surface-sunken] disabled:opacity-50 disabled:pointer-events-none",
+                onClick: () => table.previousPage(),
+                disabled: !table.getCanPreviousPage(),
+                "aria-label": "Previous page",
+                children: /* @__PURE__ */ jsx28(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx28("path", { d: "m15 18-6-6 6-6" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx28(
+              "button",
+              {
+                className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[--color-border-input] bg-[--color-surface-raised] transition-colors hover:bg-[--color-surface-sunken] disabled:opacity-50 disabled:pointer-events-none",
+                onClick: () => table.nextPage(),
+                disabled: !table.getCanNextPage(),
+                "aria-label": "Next page",
+                children: /* @__PURE__ */ jsx28(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx28("path", { d: "m9 18 6-6-6-6" })
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+DataTablePagination.displayName = "DataTablePagination";
+
+// src/components/data-table/data-table-toolbar.tsx
+import * as React29 from "react";
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+function DataTableToolbar({
+  table,
+  enableColumnVisibility = false,
+  className,
+  children
+}) {
+  const [showColumnMenu, setShowColumnMenu] = React29.useState(false);
+  const menuRef = React29.useRef(null);
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  React29.useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowColumnMenu(false);
+      }
+    }
+    if (showColumnMenu) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showColumnMenu]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-3 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          selectedCount > 0 && /* @__PURE__ */ jsxs11("span", { className: "text-sm text-[--color-on-surface-secondary]", children: [
+            selectedCount,
+            " selected"
+          ] }),
+          children
+        ] }),
+        enableColumnVisibility && /* @__PURE__ */ jsxs11("div", { className: "relative", ref: menuRef, children: [
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              className: "inline-flex items-center gap-1 rounded-md border border-[--color-border-input] bg-[--color-surface-raised] px-3 py-1.5 text-sm transition-colors hover:bg-[--color-surface-sunken]",
+              onClick: () => setShowColumnMenu(!showColumnMenu),
+              "aria-label": "Toggle columns",
+              "aria-expanded": showColumnMenu,
+              children: [
+                /* @__PURE__ */ jsx29(
+                  "svg",
+                  {
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx29("path", { d: "M12 3v18M3 12h18" })
+                  }
+                ),
+                "Columns"
+              ]
+            }
+          ),
+          showColumnMenu && /* @__PURE__ */ jsx29("div", { className: "absolute right-0 top-full z-popover mt-1 min-w-[10rem] rounded-md border border-[--color-border] bg-[--color-surface-raised] p-2 shadow-md", children: table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ jsxs11(
+            "label",
+            {
+              className: "flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-[--color-surface-sunken] cursor-pointer capitalize",
+              children: [
+                /* @__PURE__ */ jsx29(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: col.getIsVisible(),
+                    onChange: (e) => col.toggleVisibility(e.target.checked),
+                    className: "h-4 w-4"
+                  }
+                ),
+                col.id
+              ]
+            },
+            col.id
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+DataTableToolbar.displayName = "DataTableToolbar";
+
+// src/components/data-table/data-table.tsx
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  enableSorting = false,
+  enableRowSelection = false,
+  enableColumnVisibility = false,
+  enablePagination = false,
+  pageSize = 10,
+  pageSizeOptions,
+  onRowSelectionChange,
+  emptyState,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const [sorting, setSorting] = React30.useState([]);
+  const [rowSelection, setRowSelection] = React30.useState({});
+  const [columnVisibility, setColumnVisibility] = React30.useState({});
+  const allColumns = React30.useMemo(() => {
+    if (!enableRowSelection) return columns;
+    const selectColumn = {
+      id: "select",
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx30(
+        Checkbox,
+        {
+          checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+          onCheckedChange: (value) => table2.toggleAllPageRowsSelected(!!value),
+          "aria-label": "Select all"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx30(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onCheckedChange: (value) => row.toggleSelected(!!value),
+          "aria-label": "Select row"
+        }
+      ),
+      enableSorting: false,
+      enableHiding: false
+    };
+    return [selectColumn, ...columns];
+  }, [columns, enableRowSelection]);
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, columnVisibility },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    ...enableSorting && { getSortedRowModel: getSortedRowModel() },
+    ...enablePagination && {
+      getPaginationRowModel: getPaginationRowModel()
+    },
+    enableRowSelection,
+    initialState: { pagination: { pageSize } }
+  });
+  React30.useEffect(() => {
+    if (onRowSelectionChange) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+      onRowSelectionChange(selectedRows);
+    }
+  }, [rowSelection, table, onRowSelectionChange]);
+  const showToolbar = enableRowSelection || enableColumnVisibility;
+  return /* @__PURE__ */ jsxs12("div", { className: cn("rounded-md border border-[--color-border]", className), children: [
+    showToolbar && /* @__PURE__ */ jsx30(
+      DataTableToolbar,
+      {
+        table,
+        enableColumnVisibility
+      }
+    ),
+    /* @__PURE__ */ jsxs12(Table, { "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsx30(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx30(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx30(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          className: "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[--color-surface-muted] transition-colors duration-fast",
+          onClick: header.column.getToggleSortingHandler(),
+          "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id}`,
+          children: [
+            flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            ),
+            /* @__PURE__ */ jsx30(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: cn(
+                  "shrink-0",
+                  header.column.getIsSorted() ? "opacity-100" : "opacity-30"
+                ),
+                children: /* @__PURE__ */ jsx30("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+              }
+            )
+          ]
+        }
+      ) : flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx30(TableBody, { children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx30(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() ? "selected" : void 0,
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx30(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx30(TableRow, { children: /* @__PURE__ */ jsx30(
+        TableCell,
+        {
+          colSpan: allColumns.length,
+          className: "h-24 text-center",
+          children: emptyState ?? "No results."
+        }
+      ) }) })
+    ] }),
+    enablePagination && /* @__PURE__ */ jsx30(
+      DataTablePagination,
+      {
+        table,
+        pageSizeOptions
+      }
+    )
+  ] });
+}
+DataTable.displayName = "DataTable";
+
+// src/components/data-table/data-table-column-header.tsx
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx31("div", { className: cn(className), children: title });
+  }
+  const sorted = column.getIsSorted();
+  return /* @__PURE__ */ jsxs13(
+    "button",
+    {
+      className: cn(
+        "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[--color-surface-muted] transition-colors duration-fast",
+        className
+      ),
+      onClick: () => column.toggleSorting(sorted === "asc"),
+      "aria-label": `Sort by ${title}`,
+      children: [
+        title,
+        /* @__PURE__ */ jsx31(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: cn(
+              "shrink-0 transition-opacity",
+              sorted ? "opacity-100" : "opacity-30"
+            ),
+            children: sorted === "desc" ? /* @__PURE__ */ jsx31("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) : sorted === "asc" ? /* @__PURE__ */ jsx31("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) : /* @__PURE__ */ jsx31("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+          }
+        ),
+        sorted === "asc" && /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "sorted ascending" }),
+        sorted === "desc" && /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "sorted descending" })
+      ]
+    }
+  );
+}
+DataTableColumnHeader.displayName = "DataTableColumnHeader";
+
+// src/components/filter-bar/filter-bar.tsx
+import * as React31 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+var FilterBar = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-wrap items-center gap-2 rounded-lg border border-[--color-border] bg-[--color-surface-raised] p-3",
+      className
+    ),
+    role: "toolbar",
+    "aria-label": "Filters",
+    ...props
+  }
+));
+FilterBar.displayName = "FilterBar";
+var FilterBarGroup = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-2", className),
+    role: "group",
+    ...props
+  }
+));
+FilterBarGroup.displayName = "FilterBarGroup";
+var filterChipVariants = cva13(
+  "inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm font-medium transition-colors duration-fast",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-50 text-primary-700",
+        outline: "border border-[--color-border-input] text-[--color-on-surface-secondary]"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var FilterChip = React31.forwardRef(
+  ({ className, variant, label, value, onRemove, ...props }, ref) => /* @__PURE__ */ jsxs14(
+    "span",
+    {
+      ref,
+      className: cn(filterChipVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs14("span", { className: "text-xs opacity-70", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx32("span", { children: value }),
+        onRemove && /* @__PURE__ */ jsx32(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 transition-colors",
+            "aria-label": `Remove ${label} filter`,
+            children: /* @__PURE__ */ jsx32(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx32("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+);
+FilterChip.displayName = "FilterChip";
+var ActiveFilters = React31.forwardRef(({ className, onClearAll, clearAllLabel = "Clear all", children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-wrap items-center gap-2", className),
+    ...props,
+    children: [
+      children,
+      onClearAll && /* @__PURE__ */ jsx32(
+        "button",
+        {
+          type: "button",
+          onClick: onClearAll,
+          className: "text-sm text-[--color-on-surface-muted] hover:text-[--color-on-surface-secondary] underline transition-colors",
+          children: clearAllLabel
+        }
+      )
+    ]
+  }
+));
+ActiveFilters.displayName = "ActiveFilters";
+var FilterBarActions = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+  "div",
+  {
+    ref,
+    className: cn("ml-auto flex items-center gap-2", className),
+    ...props
+  }
+));
+FilterBarActions.displayName = "FilterBarActions";
+
+// src/components/popover/popover.tsx
+import * as React32 from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive2.Root;
+var PopoverTrigger = PopoverPrimitive2.Trigger;
+var PopoverAnchor = PopoverPrimitive2.Anchor;
+var PopoverContent = React32.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx33(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx33(
+  PopoverPrimitive2.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-popover w-72 rounded-md border border-[--color-border] bg-[--color-surface-raised] p-4 shadow-md outline-none",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+
+// src/components/dropdown-menu/dropdown-menu.tsx
+import * as React33 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuContent = React33.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx34(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] p-1 shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuSubTrigger = React33.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-[--color-surface-muted]",
+      "data-[state=open]:bg-[--color-surface-muted]",
+      "touch:min-h-[--touch-target-min]",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx34(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "ml-auto",
+          children: /* @__PURE__ */ jsx34("path", { d: "m9 18 6-6-6-6" })
+        }
+      )
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-dropdown min-w-[8rem] overflow-hidden rounded-md border border-[--color-border] bg-[--color-surface-raised] p-1 shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+var DropdownMenuItem = React33.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx34(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+      "focus:bg-[--color-surface-muted] focus:text-[--color-on-surface]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "touch:min-h-[--touch-target-min]",
+      destructive && "text-error-600 focus:bg-error-50 focus:text-error-600",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = React33.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs15(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-[--color-surface-muted]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "touch:min-h-[--touch-target-min]",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx34("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioItem = React33.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-[--color-surface-muted]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "touch:min-h-[--touch-target-min]",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "currentColor", children: /* @__PURE__ */ jsx34("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuLabel = React33.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-xs font-medium text-[--color-on-surface-muted]",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx34(
+  "span",
+  {
+    className: cn(
+      "ml-auto text-xs tracking-widest text-[--color-on-surface-muted]",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/dialog/dialog.tsx
+import * as React34 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-modal bg-black/50",
+      "animate-in fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx35(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs16(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-modal bg-[--color-surface-raised] p-6 shadow-xl",
+        "focus-visible:outline-none",
+        // Mobile: full-screen
+        "inset-0",
+        // Desktop: centered modal
+        "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+        "sm:w-full sm:max-w-lg sm:rounded-xl sm:border sm:border-[--color-border]",
+        // Animations
+        "animate-in fade-in-0",
+        "sm:zoom-in-95 sm:slide-in-from-left-1/2 sm:slide-in-from-top-[48%]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        "data-[state=closed]:sm:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs16(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx35(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx35("path", { d: "M18 6 6 18M6 6l12 12" })
+            }
+          ),
+          /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx35(
+  "div",
+  {
+    className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx35(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+
+// src/components/command-palette/command-palette.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { Command as Command2 } from "cmdk";
+import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+function CommandPalette({
+  open,
+  onOpenChange,
+  placeholder = "Type a command or search...",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx36(DialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(DialogPrimitive2.Portal, { children: [
+    /* @__PURE__ */ jsx36(DialogPrimitive2.Overlay, { className: "fixed inset-0 z-modal bg-black/50 animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" }),
+    /* @__PURE__ */ jsx36(
+      DialogPrimitive2.Content,
+      {
+        className: cn(
+          "fixed left-1/2 top-[20%] z-modal w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-[--color-border] bg-[--color-surface-raised] shadow-2xl",
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs17(Command2, { shouldFilter: true, className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-[--color-border] px-4", children: [
+            /* @__PURE__ */ jsxs17(
+              "svg",
+              {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "shrink-0 text-[--color-on-surface-muted]",
+                children: [
+                  /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
+                  /* @__PURE__ */ jsx36("path", { d: "m21 21-4.3-4.3" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              Command2.Input,
+              {
+                placeholder,
+                className: "flex h-12 w-full bg-transparent px-3 text-base outline-none placeholder:text-[--color-on-surface-muted]"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx36(Command2.List, { className: "max-h-80 overflow-auto p-2", children })
+        ] })
+      }
+    )
+  ] }) });
+}
+CommandPalette.displayName = "CommandPalette";
+function CommandPaletteGroup({
+  heading,
+  children
+}) {
+  return /* @__PURE__ */ jsx36(
+    Command2.Group,
+    {
+      heading,
+      className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[--color-on-surface-muted]",
+      children
+    }
+  );
+}
+CommandPaletteGroup.displayName = "CommandPaletteGroup";
+function CommandPaletteItem({
+  icon,
+  shortcut,
+  onSelect,
+  disabled,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs17(
+    Command2.Item,
+    {
+      onSelect,
+      disabled,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none",
+        "data-[selected=true]:bg-[--color-surface-muted]",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx36("span", { className: "mr-2 flex h-4 w-4 items-center justify-center text-[--color-on-surface-muted]", children: icon }),
+        /* @__PURE__ */ jsx36("span", { className: "flex-1", children }),
+        shortcut && /* @__PURE__ */ jsx36(CommandPaletteShortcut, { children: shortcut })
+      ]
+    }
+  );
+}
+CommandPaletteItem.displayName = "CommandPaletteItem";
+function CommandPaletteSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx36(
+    Command2.Separator,
+    {
+      className: cn("-mx-1 my-1 h-px bg-[--color-border]", className),
+      ...props
+    }
+  );
+}
+CommandPaletteSeparator.displayName = "CommandPaletteSeparator";
+function CommandPaletteEmpty({
+  className,
+  children = "No results found.",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx36(
+    Command2.Empty,
+    {
+      className: cn("px-2 py-6 text-center text-sm text-[--color-on-surface-muted]", className),
+      ...props,
+      children
+    }
+  );
+}
+CommandPaletteEmpty.displayName = "CommandPaletteEmpty";
+function CommandPaletteShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx36(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-[--color-on-surface-muted]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+CommandPaletteShortcut.displayName = "CommandPaletteShortcut";
+
+// src/components/drawer/drawer.tsx
+import * as React35 from "react";
+import * as DialogPrimitive3 from "@radix-ui/react-dialog";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+var [DrawerContextProvider, useDrawerContext] = createContext2("Drawer");
+var DrawerStackContext = React35.createContext(
+  null
+);
+function DrawerProvider({ children }) {
+  const stackRef = React35.useRef([]);
+  const [, forceUpdate] = React35.useState(0);
+  const register = React35.useCallback((id) => {
+    const level = stackRef.current.length;
+    stackRef.current = [...stackRef.current, { id, level }];
+    forceUpdate((n) => n + 1);
+    return level;
+  }, []);
+  const unregister = React35.useCallback((id) => {
+    stackRef.current = stackRef.current.filter((e) => e.id !== id);
+    forceUpdate((n) => n + 1);
+  }, []);
+  const ctx = React35.useMemo(
+    () => ({ stack: stackRef.current, register, unregister }),
+    [register, unregister]
+  );
+  return /* @__PURE__ */ jsx37(DrawerStackContext.Provider, { value: ctx, children });
+}
+DrawerProvider.displayName = "DrawerProvider";
+function Drawer({
+  open,
+  onOpenChange,
+  side = "right",
+  pinnable = false,
+  pinned = false,
+  onPinnedChange,
+  children
+}) {
+  return /* @__PURE__ */ jsx37(DrawerContextProvider, { value: { side, pinnable, pinned, onPinnedChange }, children: /* @__PURE__ */ jsx37(DialogPrimitive3.Root, { open, onOpenChange, children }) });
+}
+Drawer.displayName = "Drawer";
+var DrawerTrigger = DialogPrimitive3.Trigger;
+var DrawerClose = DialogPrimitive3.Close;
+var drawerSizeVariants = cva14("", {
+  variants: {
+    size: {
+      sm: "w-80",
+      // 320px
+      md: "w-[480px]",
+      lg: "w-[640px]",
+      xl: "w-[800px]"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var DrawerContent = React35.forwardRef(({ className, size, children, ...props }, ref) => {
+  const { side, pinned } = useDrawerContext();
+  const stackCtx = React35.useContext(DrawerStackContext);
+  const drawerId = React35.useId();
+  const [level, setLevel] = React35.useState(0);
+  React35.useEffect(() => {
+    if (stackCtx) {
+      const l = stackCtx.register(drawerId);
+      setLevel(l);
+      return () => stackCtx.unregister(drawerId);
+    }
+  }, [stackCtx, drawerId]);
+  const stackOffset = stackCtx ? level * 2 : 0;
+  if (pinned) {
+    return /* @__PURE__ */ jsx37(
+      "div",
+      {
+        className: cn(
+          "flex flex-col border-[--color-border] bg-[--color-surface-raised]",
+          side === "right" ? "border-l" : "border-r",
+          drawerSizeVariants({ size }),
+          className
+        ),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs18(DialogPrimitive3.Portal, { children: [
+    /* @__PURE__ */ jsx37(
+      DialogPrimitive3.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 bg-black/30",
+          "animate-in fade-in-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+        ),
+        style: { zIndex: 200 + stackOffset }
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      DialogPrimitive3.Content,
+      {
+        ref,
+        className: cn(
+          "fixed top-0 h-full bg-[--color-surface-raised] shadow-xl",
+          "focus-visible:outline-none",
+          side === "right" && "right-0 border-l border-[--color-border] animate-slide-in-right data-[state=closed]:animate-slide-out-right",
+          side === "left" && "left-0 border-r border-[--color-border] animate-slide-in-left data-[state=closed]:animate-slide-out-left",
+          drawerSizeVariants({ size }),
+          className
+        ),
+        style: { zIndex: 201 + stackOffset },
+        ...props,
+        children: /* @__PURE__ */ jsx37("div", { className: "flex h-full flex-col", children })
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React35.forwardRef(({ className, ...props }, ref) => {
+  const { pinnable, pinned, onPinnedChange } = useDrawerContext();
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between border-b border-[--color-border] px-6 py-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx37("div", { className: "flex-1", children: props.children }),
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+          pinnable && /* @__PURE__ */ jsx37(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPinnedChange?.(!pinned),
+              className: cn(
+                "rounded-sm p-1 transition-opacity hover:opacity-100",
+                pinned ? "opacity-100 text-primary-500" : "opacity-50"
+              ),
+              "aria-label": pinned ? "Unpin drawer" : "Pin drawer",
+              children: /* @__PURE__ */ jsx37(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: pinned ? "currentColor" : "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx37("path", { d: "M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1 1 1 0 0 1 1 1z" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs18(DialogPrimitive3.Close, { className: "rounded-sm p-1 opacity-50 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", children: [
+            /* @__PURE__ */ jsx37(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx37("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            ),
+            /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "Close" })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+  DialogPrimitive3.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+  DialogPrimitive3.Description,
+  {
+    ref,
+    className: cn("text-sm text-[--color-on-surface-muted]", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerFooter = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-2 border-t border-[--color-border] px-6 py-4",
+      className
+    ),
+    ...props
+  }
+));
+DrawerFooter.displayName = "DrawerFooter";
+
+// src/components/app-shell/app-shell.tsx
+import * as React36 from "react";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+var [AppShellProvider, useAppShell] = createContext2("AppShell");
+var AppShell = React36.forwardRef(
+  ({
+    className,
+    sidebarCollapsed: controlledCollapsed,
+    onSidebarCollapsedChange,
+    sidebarWidth = 256,
+    sidebarCollapsedWidth = 64,
+    withBottomNav = false,
+    children,
+    ...props
+  }, ref) => {
+    const { isMobile } = useBreakpoint();
+    const [internalCollapsed, setInternalCollapsed] = React36.useState(false);
+    const [mobileSidebarOpen, setMobileSidebarOpen] = React36.useState(false);
+    const collapsed = controlledCollapsed ?? internalCollapsed;
+    const setCollapsed = onSidebarCollapsedChange ?? setInternalCollapsed;
+    return /* @__PURE__ */ jsx38(
+      AppShellProvider,
+      {
+        value: {
+          sidebarCollapsed: collapsed,
+          setSidebarCollapsed: setCollapsed,
+          isMobile,
+          withBottomNav,
+          mobileSidebarOpen,
+          setMobileSidebarOpen
+        },
+        children: /* @__PURE__ */ jsx38(
+          "div",
+          {
+            ref,
+            className: cn("flex h-dvh", className),
+            style: {
+              "--sidebar-width": `${sidebarWidth}px`,
+              "--sidebar-collapsed-width": `${sidebarCollapsedWidth}px`
+            },
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+AppShell.displayName = "AppShell";
+var AppShellSidebar = React36.forwardRef(({ className, children, ...props }, ref) => {
+  const { sidebarCollapsed, isMobile, mobileSidebarOpen, setMobileSidebarOpen } = useAppShell();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx38(
+      Drawer,
+      {
+        open: mobileSidebarOpen,
+        onOpenChange: setMobileSidebarOpen,
+        side: "left",
+        children: /* @__PURE__ */ jsx38(DrawerContent, { size: "sm", className, children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx38(
+    "aside",
+    {
+      ref,
+      className: cn(
+        "hidden md:flex md:flex-col shrink-0 border-r border-[--color-border] bg-[--color-surface-raised] overflow-y-auto transition-[width] duration-slow",
+        className
+      ),
+      style: {
+        width: sidebarCollapsed ? "var(--sidebar-collapsed-width)" : "var(--sidebar-width)"
+      },
+      ...props,
+      children
+    }
+  );
+});
+AppShellSidebar.displayName = "AppShellSidebar";
+var AppShellHeader = React36.forwardRef(({ className, children, ...props }, ref) => {
+  const { isMobile, setMobileSidebarOpen } = useAppShell();
+  return /* @__PURE__ */ jsxs19(
+    "header",
+    {
+      ref,
+      className: cn(
+        "flex h-14 items-center gap-3 border-b border-[--color-border] bg-[--color-surface-raised] px-4 shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        isMobile && /* @__PURE__ */ jsx38(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMobileSidebarOpen(true),
+            className: "rounded-md p-1.5 hover:bg-[--color-surface-muted] transition-colors touch:min-h-[--touch-target-min] touch:min-w-[--touch-target-min] flex items-center justify-center",
+            "aria-label": "Open menu",
+            children: /* @__PURE__ */ jsx38(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx38("path", { d: "M4 6h16M4 12h16M4 18h16" })
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+});
+AppShellHeader.displayName = "AppShellHeader";
+var AppShellContent = React36.forwardRef(({ className, ...props }, ref) => {
+  const { withBottomNav } = useAppShell();
+  return /* @__PURE__ */ jsx38(
+    "main",
+    {
+      ref,
+      className: cn(
+        "flex-1 overflow-auto",
+        withBottomNav && "pb-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AppShellContent.displayName = "AppShellContent";
+var AppShellFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+  "footer",
+  {
+    ref,
+    className: cn(
+      "flex items-center border-t border-[--color-border] bg-[--color-surface-raised] px-4 py-2 shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+AppShellFooter.displayName = "AppShellFooter";
+
+// src/components/bottom-navigation/bottom-navigation.tsx
+import * as React37 from "react";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var BottomNavigation = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
+  "nav",
+  {
+    ref,
+    className: cn(
+      "fixed bottom-0 left-0 right-0 z-sticky flex items-center justify-around border-t border-[--color-border] bg-[--color-surface-raised] pb-[--safe-area-bottom]",
+      "h-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))]",
+      className
+    ),
+    ...props
+  }
+));
+BottomNavigation.displayName = "BottomNavigation";
+var BottomNavigationItem = React37.forwardRef(({ className, icon, label, active = false, ...props }, ref) => /* @__PURE__ */ jsxs20(
+  "button",
+  {
+    ref,
+    className: cn(
+      "flex min-w-[--touch-target-min] flex-1 flex-col items-center justify-center gap-0.5 py-1 text-xs transition-colors",
+      active ? "text-primary-500 font-medium" : "text-[--color-on-surface-muted] hover:text-[--color-on-surface-secondary]",
+      className
+    ),
+    "aria-current": active ? "page" : void 0,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx39("span", { className: "flex h-6 w-6 items-center justify-center", children: icon }),
+      /* @__PURE__ */ jsx39("span", { children: label })
+    ]
+  }
+));
+BottomNavigationItem.displayName = "BottomNavigationItem";
+
+// src/components/offline-indicator/offline-indicator.tsx
+import * as React38 from "react";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+var OfflineIndicator = React38.forwardRef(
+  ({
+    className,
+    isOffline,
+    message = "\u30AA\u30D5\u30E9\u30A4\u30F3\u3067\u3059\u3002\u4E00\u90E8\u306E\u6A5F\u80FD\u304C\u5236\u9650\u3055\u308C\u307E\u3059\u3002",
+    ...props
+  }, ref) => {
+    if (!isOffline) return null;
+    return /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "fixed top-0 left-0 right-0 z-toast flex items-center justify-center bg-warning-500 px-4 py-2 text-xs font-medium text-white pt-[calc(0.5rem+var(--safe-area-top))]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs21(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "mr-2 shrink-0",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx40("line", { x1: "2", x2: "22", y1: "2", y2: "22" }),
+                /* @__PURE__ */ jsx40("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" }),
+                /* @__PURE__ */ jsx40("path", { d: "M2 8.82a15 15 0 0 1 4.17-2.65" }),
+                /* @__PURE__ */ jsx40("path", { d: "M10.66 5c4.01-.36 8.14.9 11.34 3.76" }),
+                /* @__PURE__ */ jsx40("path", { d: "M16.85 11.25a10 10 0 0 1 2.22 1.68" }),
+                /* @__PURE__ */ jsx40("path", { d: "M5 12.859a10 10 0 0 1 5.17-2.69" }),
+                /* @__PURE__ */ jsx40("line", { x1: "12", x2: "12.01", y1: "20", y2: "20" })
+              ]
+            }
+          ),
+          message
+        ]
+      }
+    );
+  }
+);
+OfflineIndicator.displayName = "OfflineIndicator";
+
+// src/components/install-prompt/install-prompt.tsx
+import * as React39 from "react";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+var InstallPrompt = React39.forwardRef(
+  ({
+    className,
+    canInstall,
+    onInstall,
+    onDismiss,
+    title = "\u30A2\u30D7\u30EA\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB",
+    description = "\u30DB\u30FC\u30E0\u753B\u9762\u306B\u8FFD\u52A0\u3059\u308B\u3068\u3001\u3059\u3050\u306B\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u3059\u3002",
+    installLabel = "\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB",
+    dismissLabel = "\u5F8C\u3067",
+    ...props
+  }, ref) => {
+    if (!canInstall) return null;
+    return /* @__PURE__ */ jsx41(
+      "div",
+      {
+        ref,
+        role: "dialog",
+        "aria-label": title,
+        className: cn(
+          "fixed bottom-0 left-0 right-0 z-modal border-t border-[--color-border] bg-[--color-surface-raised] p-4 shadow-lg pb-[calc(1rem+var(--safe-area-bottom))]",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs22("div", { className: "mx-auto max-w-md", children: [
+          /* @__PURE__ */ jsx41("p", { className: "text-sm font-semibold text-[--color-on-surface]", children: title }),
+          /* @__PURE__ */ jsx41("p", { className: "mt-1 text-xs text-[--color-on-surface-muted]", children: description }),
+          /* @__PURE__ */ jsxs22("div", { className: "mt-3 flex gap-2", children: [
+            /* @__PURE__ */ jsx41(Button, { size: "sm", onClick: onInstall, className: "flex-1", children: installLabel }),
+            /* @__PURE__ */ jsx41(
+              Button,
+              {
+                size: "sm",
+                variant: "ghost",
+                onClick: onDismiss,
+                className: "flex-1",
+                children: dismissLabel
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+InstallPrompt.displayName = "InstallPrompt";
+
+// src/components/pull-to-refresh/pull-to-refresh.tsx
+import * as React40 from "react";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+var PullToRefresh = React40.forwardRef(
+  ({ className, onRefresh, threshold = 80, disabled = false, children, ...props }, ref) => {
+    const [pullDistance, setPullDistance] = React40.useState(0);
+    const [isRefreshing, setIsRefreshing] = React40.useState(false);
+    const startYRef = React40.useRef(0);
+    const containerRef = React40.useRef(null);
+    React40.useImperativeHandle(ref, () => containerRef.current);
+    const handleTouchStart = React40.useCallback(
+      (e) => {
+        if (disabled || isRefreshing) return;
+        const container = containerRef.current;
+        if (container && container.scrollTop === 0) {
+          startYRef.current = e.touches[0].clientY;
+        }
+      },
+      [disabled, isRefreshing]
+    );
+    const handleTouchMove = React40.useCallback(
+      (e) => {
+        if (disabled || isRefreshing || startYRef.current === 0) return;
+        const distance = Math.max(
+          0,
+          (e.touches[0].clientY - startYRef.current) * 0.5
+        );
+        if (distance > 0) {
+          setPullDistance(Math.min(distance, threshold * 1.5));
+        }
+      },
+      [disabled, isRefreshing, threshold]
+    );
+    const handleTouchEnd = React40.useCallback(async () => {
+      if (disabled || isRefreshing) return;
+      if (pullDistance >= threshold) {
+        setIsRefreshing(true);
+        try {
+          await onRefresh();
+        } finally {
+          setIsRefreshing(false);
+        }
+      }
+      setPullDistance(0);
+      startYRef.current = 0;
+    }, [disabled, isRefreshing, pullDistance, threshold, onRefresh]);
+    const indicatorOpacity = Math.min(pullDistance / threshold, 1);
+    const shouldTrigger = pullDistance >= threshold;
+    return /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative overflow-auto", className),
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx42(
+            "div",
+            {
+              className: "flex items-center justify-center overflow-hidden transition-[height] duration-normal",
+              style: { height: isRefreshing ? threshold * 0.6 : pullDistance },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx42(
+                "div",
+                {
+                  className: "transition-opacity",
+                  style: { opacity: isRefreshing ? 1 : indicatorOpacity },
+                  children: isRefreshing ? /* @__PURE__ */ jsx42(Spinner, { size: "sm" }) : /* @__PURE__ */ jsxs23(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: cn(
+                        "text-[--color-on-surface-muted] transition-transform duration-normal",
+                        shouldTrigger && "rotate-180 text-primary-500"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx42("path", { d: "M12 5v14" }),
+                        /* @__PURE__ */ jsx42("path", { d: "m19 12-7 7-7-7" })
+                      ]
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+PullToRefresh.displayName = "PullToRefresh";
+export {
+  ActiveFilters,
+  AppShell,
+  AppShellContent,
+  AppShellFooter,
+  AppShellHeader,
+  AppShellSidebar,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  BREAKPOINTS,
+  Badge,
+  BottomNavigation,
+  BottomNavigationItem,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Combobox,
+  CommandPalette,
+  CommandPaletteEmpty,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+  CommandPaletteSeparator,
+  CommandPaletteShortcut,
+  DataTable,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableToolbar,
+  DatePicker,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerProvider,
+  DrawerTitle,
+  DrawerTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DynamicFormField,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+  FilterBar,
+  FilterBarActions,
+  FilterBarGroup,
+  FilterChip,
+  FormActions,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
+  FormLayout,
+  FormMessage,
+  FormSection,
+  Input,
+  InstallPrompt,
+  Label,
+  NumberInput,
+  OfflineIndicator,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  PullToRefresh,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Skeleton,
+  Spinner,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  ThemeProvider,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Toaster,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  avatarVariants,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  createContext2 as createContext,
+  formLayoutVariants,
+  getFieldComponent,
+  inputVariants,
+  spinnerVariants,
+  switchVariants,
+  textareaVariants,
+  toast,
+  toastVariants,
+  useAppShell,
+  useBreakpoint,
+  useDisplayMode,
+  useFormField,
+  useInstallPrompt,
+  useOnlineStatus,
+  useTheme,
+  useTheme2 as useThemeContext,
+  useToast,
+  useViewportHeight
+};
+//# sourceMappingURL=index.js.map