@polastack/design-system 0.1.24 → 0.1.26

package/dist/index.d.ts

@@ -398,6 +398,7 @@ interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPr
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 
 type StepStatus = 'pending' | 'active' | 'completed' | 'error' | 'loading';
+type StepperConnector = 'line' | 'arrow' | 'chevron';
 interface StepItem {
     label: string;
     description?: string;
@@ -411,6 +412,7 @@ interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'chi
     activeStep: number;
     orientation?: StepperOrientation;
     size?: StepperSize;
+    connector?: StepperConnector;
     clickable?: boolean;
     onStepClick?: (index: number) => void;
 }
@@ -902,4 +904,4 @@ interface ChartLegendProps {
 }
 declare const ChartLegend: React.FC<ChartLegendProps>;
 
-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, ChartLegend, type ChartLegendProps, type ChartSemanticColors, ChartTooltip, type ChartTooltipProps, 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, Progress, type ProgressProps, 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, type StepItem, type StepStatus, Stepper, type StepperProps, 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, getChartColors, getChartSubtleColors, getChartTheme, getFieldComponent, inputVariants, printDocumentVariants, printFieldGroupVariants, progressVariants, spinnerVariants, stepIndicatorVariants, 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, ChartLegend, type ChartLegendProps, type ChartSemanticColors, ChartTooltip, type ChartTooltipProps, 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, Progress, type ProgressProps, 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, type StepItem, type StepStatus, Stepper, type StepperConnector, type StepperProps, 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, getChartColors, getChartSubtleColors, getChartTheme, getFieldComponent, inputVariants, printDocumentVariants, printFieldGroupVariants, progressVariants, spinnerVariants, stepIndicatorVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };

package/dist/index.js

@@ -875,16 +875,27 @@ function useToast() {
 // src/components/toast/toaster.tsx
 import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 function Toaster() {
-  const { toasts } = useToast();
+  const { toasts, dismiss } = 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__ */ jsx12(ToastTitle, { children: title }),
-        description && /* @__PURE__ */ jsx12(ToastDescription, { children: description })
-      ] }),
-      action,
-      /* @__PURE__ */ jsx12(ToastClose, {})
-    ] }, id)),
+    toasts.map(({ id, title, description, action, open, ...props }) => /* @__PURE__ */ jsxs3(
+      Toast,
+      {
+        open,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) dismiss(id);
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "grid gap-1", children: [
+            title && /* @__PURE__ */ jsx12(ToastTitle, { children: title }),
+            description && /* @__PURE__ */ jsx12(ToastDescription, { children: description })
+          ] }),
+          action,
+          /* @__PURE__ */ jsx12(ToastClose, {})
+        ]
+      },
+      id
+    )),
     /* @__PURE__ */ jsx12(ToastViewport, {})
   ] });
 }
@@ -1980,7 +1991,7 @@ Progress.displayName = "Progress";
 // src/components/stepper/stepper.tsx
 import * as React28 from "react";
 import { cva as cva12 } from "class-variance-authority";
-import { Check as Check4 } from "lucide-react";
+import { Check as Check4, ChevronRight, ChevronDown as ChevronDown3 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 var stepIndicatorVariants = cva12(
   "flex items-center justify-center rounded-full font-medium shrink-0 transition-colors duration-normal border-2",
@@ -2005,22 +2016,6 @@ var stepIndicatorVariants = cva12(
     }
   }
 );
-var connectorVariants = cva12("transition-colors duration-normal", {
-  variants: {
-    completed: {
-      true: "bg-primary-500",
-      false: "bg-[var(--color-border)]"
-    },
-    orientation: {
-      horizontal: "h-0.5 flex-1 mx-2",
-      vertical: "w-0.5 min-h-6"
-    }
-  },
-  defaultVariants: {
-    completed: false,
-    orientation: "horizontal"
-  }
-});
 var spinnerSizeMap = {
   sm: "sm",
   md: "sm",
@@ -2031,6 +2026,16 @@ var checkSizeMap = {
   md: 16,
   lg: 20
 };
+var chevronSizeMap = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var indicatorHeight = {
+  sm: "h-6",
+  md: "h-8",
+  lg: "h-10"
+};
 function StepIndicatorContent({
   step,
   index,
@@ -2049,6 +2054,157 @@ function StepIndicatorContent({
   }
   return /* @__PURE__ */ jsx27(Fragment2, { children: index + 1 });
 }
+function StepConnector({
+  completed,
+  orientation,
+  connectorType,
+  size
+}) {
+  const isH = orientation === "horizontal";
+  const lineColor = completed ? "bg-primary-500" : "bg-[var(--color-border)]";
+  const iconColor = completed ? "text-primary-500" : "text-[var(--color-border)]";
+  if (connectorType === "arrow") {
+    if (isH) {
+      return /* @__PURE__ */ jsx27(
+        "div",
+        {
+          className: cn("flex items-center flex-1", indicatorHeight[size]),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center flex-1 mx-1.5", children: [
+            /* @__PURE__ */ jsx27(
+              "div",
+              {
+                className: cn(
+                  "h-0.5 flex-1 transition-colors duration-normal",
+                  lineColor
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx27(
+              "div",
+              {
+                className: cn(
+                  "w-0 h-0 shrink-0 border-y-[5px] border-y-transparent border-l-[7px] transition-colors duration-normal",
+                  completed ? "border-l-primary-500" : "border-l-[var(--color-border)]"
+                )
+              }
+            )
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: "flex flex-col items-center min-h-6",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: cn(
+                "w-0.5 flex-1 transition-colors duration-normal",
+                lineColor
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: cn(
+                "w-0 h-0 shrink-0 border-x-[5px] border-x-transparent border-t-[7px] transition-colors duration-normal",
+                completed ? "border-t-primary-500" : "border-t-[var(--color-border)]"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (connectorType === "chevron") {
+    const cSize = chevronSizeMap[size];
+    if (isH) {
+      return /* @__PURE__ */ jsx27(
+        "div",
+        {
+          className: cn("flex items-center flex-1", indicatorHeight[size]),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              className: cn(
+                "flex items-center flex-1 mx-1 transition-colors duration-normal",
+                iconColor
+              ),
+              children: [
+                /* @__PURE__ */ jsx27("div", { className: cn("h-0.5 flex-1", lineColor) }),
+                /* @__PURE__ */ jsx27(
+                  ChevronRight,
+                  {
+                    size: cSize,
+                    className: "shrink-0 mx-0.5",
+                    strokeWidth: 2.5
+                  }
+                ),
+                /* @__PURE__ */ jsx27("div", { className: cn("h-0.5 flex-1", lineColor) })
+              ]
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center min-h-6 transition-colors duration-normal",
+          iconColor
+        ),
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx27("div", { className: cn("w-0.5 flex-1", lineColor) }),
+          /* @__PURE__ */ jsx27(
+            ChevronDown3,
+            {
+              size: cSize,
+              className: "shrink-0 my-0.5",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsx27("div", { className: cn("w-0.5 flex-1", lineColor) })
+        ]
+      }
+    );
+  }
+  if (isH) {
+    return /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: cn("flex items-center flex-1", indicatorHeight[size]),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx27(
+          "div",
+          {
+            className: cn(
+              "h-0.5 flex-1 mx-2 transition-colors duration-normal",
+              lineColor
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: cn(
+        "w-0.5 min-h-6 transition-colors duration-normal",
+        lineColor
+      ),
+      "aria-hidden": "true"
+    }
+  );
+}
 var Stepper = React28.forwardRef(
   ({
     className,
@@ -2056,6 +2212,7 @@ var Stepper = React28.forwardRef(
     activeStep,
     orientation = "horizontal",
     size = "md",
+    connector: connectorType = "line",
     clickable = false,
     onStepClick,
     ...props
@@ -2078,16 +2235,13 @@ var Stepper = React28.forwardRef(
           const handleClick = () => {
             if (isClickable && onStepClick) onStepClick(index);
           };
-          const connector = !isLast ? /* @__PURE__ */ jsx27(
-            "div",
+          const connectorEl = !isLast ? /* @__PURE__ */ jsx27(
+            StepConnector,
             {
-              className: cn(
-                connectorVariants({
-                  completed: index < activeStep,
-                  orientation
-                })
-              ),
-              "aria-hidden": "true"
+              completed: index < activeStep,
+              orientation,
+              connectorType,
+              size
             }
           ) : null;
           const indicatorButton = /* @__PURE__ */ jsx27(
@@ -2145,7 +2299,7 @@ var Stepper = React28.forwardRef(
                   ]
                 }
               ),
-              connector
+              connectorEl
             ] }, index);
           }
           return /* @__PURE__ */ jsxs11(
@@ -2157,7 +2311,7 @@ var Stepper = React28.forwardRef(
               children: [
                 /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center", children: [
                   indicatorButton,
-                  connector
+                  connectorEl
                 ] }),
                 /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-0.5", !isLast && "pb-6"), children: [
                   labelEl,
@@ -2394,7 +2548,7 @@ import {
 import { ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
 
 // src/components/data-table/data-table-pagination.tsx
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 function DataTablePagination({
   table,
@@ -2446,7 +2600,7 @@ function DataTablePagination({
                 onClick: () => table.nextPage(),
                 disabled: !table.getCanNextPage(),
                 "aria-label": "Next page",
-                children: /* @__PURE__ */ jsx31(ChevronRight, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx31(ChevronRight2, { className: "h-4 w-4" })
               }
             )
           ] })
@@ -2833,7 +2987,7 @@ PopoverContent.displayName = "PopoverContent";
 // src/components/dropdown-menu/dropdown-menu.tsx
 import * as React36 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check as Check5, ChevronRight as ChevronRight2 } from "lucide-react";
+import { Check as Check5, ChevronRight as ChevronRight3 } from "lucide-react";
 import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -2873,7 +3027,7 @@ var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx37(ChevronRight2, { className: "ml-auto h-3.5 w-3.5" })
+      /* @__PURE__ */ jsx37(ChevronRight3, { className: "ml-auto h-3.5 w-3.5" })
     ]
   }
 ));
@@ -3948,7 +4102,7 @@ PrintDivider.displayName = "PrintDivider";
 
 // src/components/stat-card/stat-card.tsx
 import * as React48 from "react";
-import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown3 } from "lucide-react";
+import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown4 } from "lucide-react";
 import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 function inferDirection(trend) {
   if (!trend) return "neutral";
@@ -3963,7 +4117,7 @@ var TREND_STYLES = {
 };
 var TREND_ICON_COMPONENTS = {
   up: ChevronUp2,
-  down: ChevronDown3,
+  down: ChevronDown4,
   neutral: null
 };
 var StatCard = React48.forwardRef(