@polastack/design-system 0.1.13 → 0.1.15

package/dist/index.d.ts

@@ -370,7 +370,7 @@ declare const formLayoutVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof formLayoutVariants> {
-    columns?: number;
+    columns?: number | 'responsive';
 }
 declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
 interface FormSectionProps extends React.HTMLAttributes<HTMLFieldSetElement> {
@@ -661,6 +661,72 @@ interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const PullToRefresh: React.ForwardRefExoticComponent<PullToRefreshProps & React.RefAttributes<HTMLDivElement>>;
 
+declare const printDocumentVariants: (props?: ({
+    size?: "A4" | "Letter" | null | undefined;
+    orientation?: "portrait" | "landscape" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PrintDocumentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof printDocumentVariants> {
+    /** Padding inside the document. Default: "20mm" */
+    padding?: string;
+}
+declare const PrintDocument: React.ForwardRefExoticComponent<PrintDocumentProps & React.RefAttributes<HTMLDivElement>>;
+interface PrintHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Logo element (img or SVG) */
+    logo?: React.ReactNode;
+    /** Main title (e.g., "請求書") */
+    title?: string;
+    /** Subtitle (e.g., "Invoice") */
+    subtitle?: string;
+    /** Right-aligned meta info (e.g., invoice number, date) */
+    meta?: React.ReactNode;
+}
+declare const PrintHeader: React.ForwardRefExoticComponent<PrintHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface PrintFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const PrintFooter: React.ForwardRefExoticComponent<PrintFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+interface PrintTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+}
+declare const PrintTable: React.ForwardRefExoticComponent<PrintTableProps & React.RefAttributes<HTMLTableElement>>;
+interface PrintTableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const PrintTableHeader: React.ForwardRefExoticComponent<PrintTableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+interface PrintTableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const PrintTableBody: React.ForwardRefExoticComponent<PrintTableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+interface PrintTableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const PrintTableFooter: React.ForwardRefExoticComponent<PrintTableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+interface PrintTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+declare const PrintTableRow: React.ForwardRefExoticComponent<PrintTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+interface PrintTableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+}
+declare const PrintTableHead: React.ForwardRefExoticComponent<PrintTableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+interface PrintTableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+}
+declare const PrintTableCell: React.ForwardRefExoticComponent<PrintTableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+
+interface PrintFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Field label */
+    label: string;
+    /** Field value (string or ReactNode for rich content) */
+    value?: React.ReactNode;
+}
+declare const PrintField: React.ForwardRefExoticComponent<PrintFieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const printFieldGroupVariants: (props?: ({
+    columns?: 2 | 1 | 3 | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PrintFieldGroupProps extends React.HTMLAttributes<HTMLDListElement>, VariantProps<typeof printFieldGroupVariants> {
+}
+declare const PrintFieldGroup: React.ForwardRefExoticComponent<PrintFieldGroupProps & React.RefAttributes<HTMLDListElement>>;
+
+interface PrintDividerProps extends React.HTMLAttributes<HTMLHRElement> {
+}
+declare const PrintDivider: React.ForwardRefExoticComponent<PrintDividerProps & React.RefAttributes<HTMLHRElement>>;
+
 interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Metric label (e.g. "Total Revenue") */
     label: string;
@@ -740,4 +806,4 @@ declare const chartColors: {
 type ChartCategoricalColors = typeof chartColors.categorical;
 type ChartSemanticColors = typeof chartColors.semantic;
 
-export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartCategoricalColors, ChartContainer, type ChartContainerProps, type ChartSemanticColors, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, chartColors, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };
+export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartCategoricalColors, ChartContainer, type ChartContainerProps, type ChartSemanticColors, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrintDivider, type PrintDividerProps, PrintDocument, type PrintDocumentProps, PrintField, PrintFieldGroup, type PrintFieldGroupProps, type PrintFieldProps, PrintFooter, type PrintFooterProps, PrintHeader, type PrintHeaderProps, PrintTable, PrintTableBody, type PrintTableBodyProps, PrintTableCell, type PrintTableCellProps, PrintTableFooter, type PrintTableFooterProps, PrintTableHead, type PrintTableHeadProps, PrintTableHeader, type PrintTableHeaderProps, type PrintTableProps, PrintTableRow, type PrintTableRowProps, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, chartColors, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, printDocumentVariants, printFieldGroupVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };

package/dist/index.js

@@ -302,7 +302,7 @@ 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",
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors touch:px-3 touch:py-1 touch:text-sm",
   {
     variants: {
       variant: {
@@ -637,7 +637,7 @@ var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("flex flex-col gap-1.5 p-6", className),
+    className: cn("flex flex-col gap-1.5 p-4 sm:p-6", className),
     ...props
   }
 ));
@@ -646,7 +646,7 @@ var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "h3",
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: cn("text-base sm:text-lg font-semibold leading-none tracking-tight", className),
     ...props
   }
 ));
@@ -660,13 +660,13 @@ var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("p-4 pt-0 sm:p-6 sm:pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
-    className: cn("flex items-center p-6 pt-0", className),
+    className: cn("flex items-center p-4 pt-0 sm:p-6 sm:pt-0", className),
     ...props
   }
 ));
@@ -715,7 +715,7 @@ var ToastViewport = React12.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 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",
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-3 sm: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-bottom-full sm: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-bottom-full sm:data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
       variant: {
@@ -1865,15 +1865,22 @@ var formLayoutVariants = cva10("", {
   }
 });
 var FormLayout = React26.forwardRef(
-  ({ className, layout, size, columns = 2, style, ...props }, ref) => /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ref,
-      className: cn(formLayoutVariants({ layout, size }), className),
-      style: layout === "grid" ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : style,
-      ...props
-    }
-  )
+  ({ className, layout, size, columns = 2, style, ...props }, ref) => {
+    const isResponsive = columns === "responsive";
+    return /* @__PURE__ */ jsx25(
+      "div",
+      {
+        ref,
+        className: cn(
+          formLayoutVariants({ layout, size }),
+          isResponsive && layout === "grid" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+          className
+        ),
+        style: layout === "grid" && !isResponsive ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : style,
+        ...props
+      }
+    );
+  }
 );
 FormLayout.displayName = "FormLayout";
 var FormSection = React26.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
@@ -1920,7 +1927,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 var [TabsVariantProvider, useTabsVariant] = createContext2("TabsVariant");
 var Tabs = TabsPrimitive.Root;
 var tabsListVariants = cva11(
-  "inline-flex items-center justify-center",
+  "inline-flex items-center justify-center overflow-x-auto max-w-full",
   {
     variants: {
       variant: {
@@ -1940,7 +1947,7 @@ var TabsList = React27.forwardRef(({ className, variant = "default", ...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 tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap shrink-0 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-[var(--color-surface-raised)] data-[state=active]:shadow-sm data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]",
   underline: "border-b-2 border-transparent rounded-none data-[state=active]:border-primary-500 data-[state=active]:text-[var(--color-on-surface)] text-[var(--color-on-surface-secondary)]"
@@ -2103,7 +2110,7 @@ var TableCell = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-3 py-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      "px-2 py-2 sm:px-3 sm:py-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -2145,12 +2152,12 @@ function DataTablePagination({
     "div",
     {
       className: cn(
-        "flex items-center justify-between px-3 py-3 text-sm text-[var(--color-on-surface-secondary)]",
+        "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between px-3 py-3 text-sm text-[var(--color-on-surface-secondary)]",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx29("span", { children: "Rows per page" }),
+          /* @__PURE__ */ jsx29("span", { className: "hidden sm:inline", children: "Rows per page" }),
           /* @__PURE__ */ jsx29(
             "select",
             {
@@ -2849,7 +2856,7 @@ var DialogContent = React35.forwardRef(({ className, children, ...props }, ref)
         "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-[var(--color-border)]",
+        "sm:w-full sm:max-w-lg md:max-w-xl sm:rounded-xl sm:border sm:border-[var(--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%]",
@@ -3169,7 +3176,7 @@ var DrawerContent = React36.forwardRef(({ className, size, children, ...props },
       {
         ref,
         className: cn(
-          "fixed top-0 h-full bg-[var(--color-surface-raised)] shadow-xl",
+          "fixed top-0 h-full max-w-full bg-[var(--color-surface-raised)] shadow-xl",
           "focus-visible:outline-none",
           side === "right" && "right-0 border-l border-[var(--color-border)] animate-slide-in-right data-[state=closed]:animate-slide-out-right",
           side === "left" && "left-0 border-r border-[var(--color-border)] animate-slide-in-left data-[state=closed]:animate-slide-out-left",
@@ -3191,7 +3198,7 @@ var DrawerHeader = React36.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "flex items-center justify-between border-b border-[var(--color-border)] px-6 py-4",
+        "flex items-center justify-between border-b border-[var(--color-border)] px-4 py-3 sm:px-6 sm:py-4",
         className
       ),
       ...props,
@@ -3270,7 +3277,7 @@ var DrawerFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-6 py-4",
+      "flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-4 py-3 sm:px-6 sm:py-4",
       className
     ),
     ...props
@@ -3670,9 +3677,214 @@ var PullToRefresh = React41.forwardRef(
 );
 PullToRefresh.displayName = "PullToRefresh";
 
-// src/components/stat-card/stat-card.tsx
+// src/components/print/print-document.tsx
 import * as React42 from "react";
+import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var printDocumentVariants = cva15(
+  [
+    "bg-white text-neutral-900",
+    "flex flex-col",
+    // Screen preview: paper-on-desk effect
+    "screen:shadow-lg screen:border screen:border-neutral-200"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        A4: "w-[210mm] min-h-[297mm]",
+        Letter: "w-[8.5in] min-h-[11in]"
+      },
+      orientation: {
+        portrait: "",
+        landscape: ""
+      }
+    },
+    compoundVariants: [
+      { size: "A4", orientation: "landscape", className: "w-[297mm] min-h-[210mm]" },
+      { size: "Letter", orientation: "landscape", className: "w-[11in] min-h-[8.5in]" }
+    ],
+    defaultVariants: {
+      size: "A4",
+      orientation: "portrait"
+    }
+  }
+);
+var PrintDocument = React42.forwardRef(
+  ({ className, size, orientation, padding = "20mm", style, children, ...props }, ref) => /* @__PURE__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn(printDocumentVariants({ size, orientation }), className),
+      style: {
+        padding,
+        boxSizing: "border-box",
+        fontFamily: 'Inter, "Noto Sans JP", sans-serif',
+        fontSize: "10pt",
+        lineHeight: "1.6",
+        ...style
+      },
+      ...props,
+      children
+    }
+  )
+);
+PrintDocument.displayName = "PrintDocument";
+var PrintHeader = React42.forwardRef(
+  ({ className, logo, title, subtitle, meta, children, ...props }, ref) => /* @__PURE__ */ jsxs25("div", { ref, className: cn("mb-6", className), ...props, children: [
+    /* @__PURE__ */ jsx44("div", { className: "h-1 bg-primary-500 rounded-full mb-5" }),
+    /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between pb-4 border-b border-neutral-200", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-3", children: [
+        logo && /* @__PURE__ */ jsx44("div", { className: "shrink-0", children: logo }),
+        /* @__PURE__ */ jsxs25("div", { children: [
+          title && /* @__PURE__ */ jsx44("h1", { className: "text-xl font-bold text-neutral-900 leading-tight", children: title }),
+          subtitle && /* @__PURE__ */ jsx44("p", { className: "text-[8pt] font-medium tracking-widest uppercase text-neutral-400 mt-0.5", children: subtitle })
+        ] })
+      ] }),
+      meta && /* @__PURE__ */ jsx44("div", { className: "text-right text-[9pt] text-neutral-600 leading-relaxed", children: meta }),
+      children
+    ] })
+  ] })
+);
+PrintHeader.displayName = "PrintHeader";
+var PrintFooter = React42.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn("mt-auto pt-4 border-t border-neutral-200 text-[8pt] text-neutral-400 text-center leading-relaxed", className),
+      ...props,
+      children
+    }
+  )
+);
+PrintFooter.displayName = "PrintFooter";
+
+// src/components/print/print-table.tsx
+import * as React43 from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var PrintTable = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+    "table",
+    {
+      ref,
+      className: cn("w-full border-collapse text-[9pt]", className),
+      ...props
+    }
+  )
+);
+PrintTable.displayName = "PrintTable";
+var PrintTableHeader = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45("thead", { ref, className: cn("", className), ...props })
+);
+PrintTableHeader.displayName = "PrintTableHeader";
+var PrintTableBody = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45("tbody", { ref, className: cn("", className), ...props })
+);
+PrintTableBody.displayName = "PrintTableBody";
+var PrintTableFooter = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45("tfoot", { ref, className: cn("", className), ...props })
+);
+PrintTableFooter.displayName = "PrintTableFooter";
+var PrintTableRow = React43.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+    "tr",
+    {
+      ref,
+      className: cn("[break-inside:avoid]", className),
+      ...props
+    }
+  )
+);
+PrintTableRow.displayName = "PrintTableRow";
+var PrintTableHead = React43.forwardRef(
+  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx45(
+    "th",
+    {
+      ref,
+      className: cn(
+        "py-1.5 px-2 font-semibold text-neutral-700 bg-neutral-50 border-b-2 border-neutral-300 text-[8pt]",
+        align === "right" && "text-right",
+        align === "center" && "text-center",
+        align === "left" && "text-left",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PrintTableHead.displayName = "PrintTableHead";
+var PrintTableCell = React43.forwardRef(
+  ({ className, align = "left", ...props }, ref) => /* @__PURE__ */ jsx45(
+    "td",
+    {
+      ref,
+      className: cn(
+        "py-1.5 px-2 border-b border-neutral-200",
+        align === "right" && "text-right",
+        align === "center" && "text-center",
+        align === "left" && "text-left",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PrintTableCell.displayName = "PrintTableCell";
+
+// src/components/print/print-field.tsx
+import * as React44 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var PrintField = React44.forwardRef(
+  ({ className, label, value, children, ...props }, ref) => /* @__PURE__ */ jsxs26("div", { ref, className: cn("", className), ...props, children: [
+    /* @__PURE__ */ jsx46("dt", { className: "text-[8pt] font-medium text-neutral-500 mb-0.5", children: label }),
+    /* @__PURE__ */ jsx46("dd", { className: "text-[9pt] text-neutral-900", children: value ?? children })
+  ] })
+);
+PrintField.displayName = "PrintField";
+var printFieldGroupVariants = cva16("grid gap-x-6 gap-y-2", {
+  variants: {
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      responsive: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+    }
+  },
+  defaultVariants: {
+    columns: 2
+  }
+});
+var PrintFieldGroup = React44.forwardRef(
+  ({ className, columns, ...props }, ref) => /* @__PURE__ */ jsx46(
+    "dl",
+    {
+      ref,
+      className: cn(printFieldGroupVariants({ columns }), className),
+      ...props
+    }
+  )
+);
+PrintFieldGroup.displayName = "PrintFieldGroup";
+
+// src/components/print/print-divider.tsx
+import * as React45 from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var PrintDivider = React45.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+    "hr",
+    {
+      ref,
+      className: cn("border-neutral-200 my-4", className),
+      ...props
+    }
+  )
+);
+PrintDivider.displayName = "PrintDivider";
+
+// src/components/stat-card/stat-card.tsx
+import * as React46 from "react";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function inferDirection(trend) {
   if (!trend) return "neutral";
   if (trend.startsWith("+")) return "up";
@@ -3689,27 +3901,27 @@ var TREND_ICONS = {
   down: "M7 7l5 5 5-5",
   neutral: ""
 };
-var StatCard = React42.forwardRef(
+var StatCard = React46.forwardRef(
   ({ className, label, value, trend, trendDirection, icon, ...props }, ref) => {
     const direction = trendDirection ?? inferDirection(trend);
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs27(
       "div",
       {
         ref,
         className: cn(
-          "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-5",
+          "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-4 sm:p-5",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx44("p", { className: "text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider", children: label }),
-            icon && /* @__PURE__ */ jsx44("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
+          /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx48("p", { className: "text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider", children: label }),
+            icon && /* @__PURE__ */ jsx48("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
           ] }),
-          /* @__PURE__ */ jsxs25("div", { className: "flex items-baseline gap-2 mt-2", children: [
-            /* @__PURE__ */ jsx44("span", { className: "text-2xl font-bold tabular-nums", children: value }),
-            trend && /* @__PURE__ */ jsxs25("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
-              direction !== "neutral" && /* @__PURE__ */ jsx44("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx44("path", { d: TREND_ICONS[direction] }) }),
+          /* @__PURE__ */ jsxs27("div", { className: "flex items-baseline gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx48("span", { className: "text-xl sm:text-2xl font-bold tabular-nums", children: value }),
+            trend && /* @__PURE__ */ jsxs27("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
+              direction !== "neutral" && /* @__PURE__ */ jsx48("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx48("path", { d: TREND_ICONS[direction] }) }),
               trend
             ] })
           ] })
@@ -3721,10 +3933,10 @@ var StatCard = React42.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/chart-container/chart-container.tsx
-import * as React43 from "react";
-import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
-var ChartContainer = React43.forwardRef(
-  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
+import * as React47 from "react";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+var ChartContainer = React47.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs28(
     "div",
     {
       ref,
@@ -3734,14 +3946,14 @@ var ChartContainer = React43.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-4 p-5 pb-0", children: [
-          /* @__PURE__ */ jsxs26("div", { children: [
-            /* @__PURE__ */ jsx45("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
-            description && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4 p-4 sm:p-5 pb-0", children: [
+          /* @__PURE__ */ jsxs28("div", { children: [
+            /* @__PURE__ */ jsx49("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
+            description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
           ] }),
-          actions && /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+          actions && /* @__PURE__ */ jsx49("div", { className: "flex items-center gap-2 shrink-0", children: actions })
         ] }),
-        /* @__PURE__ */ jsx45("div", { className: "p-5", children })
+        /* @__PURE__ */ jsx49("div", { className: "p-4 sm:p-5", children })
       ]
     }
   )
@@ -3926,6 +4138,19 @@ export {
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  PrintDivider,
+  PrintDocument,
+  PrintField,
+  PrintFieldGroup,
+  PrintFooter,
+  PrintHeader,
+  PrintTable,
+  PrintTableBody,
+  PrintTableCell,
+  PrintTableFooter,
+  PrintTableHead,
+  PrintTableHeader,
+  PrintTableRow,
   PullToRefresh,
   RadioGroup,
   RadioGroupItem,
@@ -3977,6 +4202,8 @@ export {
   formLayoutVariants,
   getFieldComponent,
   inputVariants,
+  printDocumentVariants,
+  printFieldGroupVariants,
   spinnerVariants,
   switchVariants,
   textareaVariants,