@polastack/design-system 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -390,11 +390,15 @@ declare const progressVariants: (props?: ({
390
390
  } & class_variance_authority_types.ClassProp) | undefined) => string;
391
391
  interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, VariantProps<typeof progressVariants> {
392
392
  showLabel?: boolean | ((value: number | null | undefined) => React.ReactNode);
393
- labelPosition?: 'right' | 'top';
393
+ /** @default 'right' */
394
+ labelPosition?: 'right' | 'top' | 'floating';
395
+ /** Show a dot marker at the progress edge */
396
+ showMarker?: boolean;
394
397
  }
395
398
  declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
396
399
 
397
400
  type StepStatus = 'pending' | 'active' | 'completed' | 'error' | 'loading';
401
+ type StepperConnector = 'line' | 'arrow' | 'chevron';
398
402
  interface StepItem {
399
403
  label: string;
400
404
  description?: string;
@@ -408,6 +412,7 @@ interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'chi
408
412
  activeStep: number;
409
413
  orientation?: StepperOrientation;
410
414
  size?: StepperSize;
415
+ connector?: StepperConnector;
411
416
  clickable?: boolean;
412
417
  onStepClick?: (index: number) => void;
413
418
  }
@@ -899,4 +904,4 @@ interface ChartLegendProps {
899
904
  }
900
905
  declare const ChartLegend: React.FC<ChartLegendProps>;
901
906
 
902
- 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 };
907
+ 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 CHANGED
@@ -1849,6 +1849,27 @@ var progressIndicatorVariants = cva11(
1849
1849
  }
1850
1850
  }
1851
1851
  );
1852
+ var floatingBubbleVariants = {
1853
+ default: "bg-primary-600 dark:bg-primary-400",
1854
+ success: "bg-success-600 dark:bg-success-400",
1855
+ warning: "bg-warning-600 dark:bg-warning-400",
1856
+ error: "bg-error-600 dark:bg-error-400",
1857
+ info: "bg-info-600 dark:bg-info-400"
1858
+ };
1859
+ var floatingArrowVariants = {
1860
+ default: "border-t-primary-600 dark:border-t-primary-400",
1861
+ success: "border-t-success-600 dark:border-t-success-400",
1862
+ warning: "border-t-warning-600 dark:border-t-warning-400",
1863
+ error: "border-t-error-600 dark:border-t-error-400",
1864
+ info: "border-t-info-600 dark:border-t-info-400"
1865
+ };
1866
+ var markerVariants = {
1867
+ default: "border-primary-500",
1868
+ success: "border-success-500",
1869
+ warning: "border-warning-500",
1870
+ error: "border-error-500",
1871
+ info: "border-info-500"
1872
+ };
1852
1873
  var Progress = React27.forwardRef(
1853
1874
  ({
1854
1875
  className,
@@ -1858,11 +1879,16 @@ var Progress = React27.forwardRef(
1858
1879
  max = 100,
1859
1880
  showLabel,
1860
1881
  labelPosition = "right",
1882
+ showMarker,
1861
1883
  ...props
1862
1884
  }, ref) => {
1863
1885
  const isIndeterminate = value === null || value === void 0;
1864
1886
  const clampedValue = isIndeterminate ? null : Math.min(max, Math.max(0, value));
1887
+ const percent = isIndeterminate ? 0 : clampedValue / max * 100;
1888
+ const resolvedVariant = variant ?? "default";
1865
1889
  const labelContent = showLabel ? typeof showLabel === "function" ? showLabel(clampedValue) : isIndeterminate ? null : `${Math.round(clampedValue)}%` : null;
1890
+ const isFloating = labelPosition === "floating" && labelContent && !isIndeterminate;
1891
+ const hasMarker = showMarker && !isIndeterminate;
1866
1892
  const bar = /* @__PURE__ */ jsx26(
1867
1893
  ProgressPrimitive.Root,
1868
1894
  {
@@ -1880,11 +1906,62 @@ var Progress = React27.forwardRef(
1880
1906
  indeterminate: isIndeterminate
1881
1907
  })
1882
1908
  ),
1883
- style: isIndeterminate ? void 0 : { width: `${clampedValue / max * 100}%` }
1909
+ style: isIndeterminate ? void 0 : { width: `${percent}%` }
1884
1910
  }
1885
1911
  )
1886
1912
  }
1887
1913
  );
1914
+ if (isFloating || hasMarker) {
1915
+ return /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
1916
+ isFloating && /* @__PURE__ */ jsx26(
1917
+ "div",
1918
+ {
1919
+ className: "absolute bottom-full mb-2 transition-[left] duration-normal ease-default",
1920
+ style: { left: `${percent}%` },
1921
+ "aria-hidden": "true",
1922
+ children: /* @__PURE__ */ jsxs10("div", { className: "relative -translate-x-1/2", children: [
1923
+ /* @__PURE__ */ jsx26(
1924
+ "span",
1925
+ {
1926
+ className: cn(
1927
+ "block rounded-md px-2 py-0.5 text-xs font-semibold tabular-nums text-white whitespace-nowrap shadow-sm",
1928
+ floatingBubbleVariants[resolvedVariant]
1929
+ ),
1930
+ children: labelContent
1931
+ }
1932
+ ),
1933
+ /* @__PURE__ */ jsx26(
1934
+ "div",
1935
+ {
1936
+ className: cn(
1937
+ "mx-auto h-0 w-0 border-x-4 border-t-4 border-x-transparent",
1938
+ floatingArrowVariants[resolvedVariant]
1939
+ )
1940
+ }
1941
+ )
1942
+ ] })
1943
+ }
1944
+ ),
1945
+ bar,
1946
+ hasMarker && /* @__PURE__ */ jsx26(
1947
+ "div",
1948
+ {
1949
+ className: "absolute top-1/2 -translate-y-1/2 transition-[left] duration-normal ease-default pointer-events-none",
1950
+ style: { left: `${percent}%` },
1951
+ "aria-hidden": "true",
1952
+ children: /* @__PURE__ */ jsx26(
1953
+ "div",
1954
+ {
1955
+ className: cn(
1956
+ "h-3.5 w-3.5 -translate-x-1/2 rounded-full border-2 bg-white shadow-sm dark:bg-[var(--color-surface-raised)]",
1957
+ markerVariants[resolvedVariant]
1958
+ )
1959
+ }
1960
+ )
1961
+ }
1962
+ )
1963
+ ] });
1964
+ }
1888
1965
  if (!labelContent) return bar;
1889
1966
  if (labelPosition === "top") {
1890
1967
  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [
@@ -1903,7 +1980,7 @@ Progress.displayName = "Progress";
1903
1980
  // src/components/stepper/stepper.tsx
1904
1981
  import * as React28 from "react";
1905
1982
  import { cva as cva12 } from "class-variance-authority";
1906
- import { Check as Check4 } from "lucide-react";
1983
+ import { Check as Check4, ChevronRight, ChevronDown as ChevronDown3 } from "lucide-react";
1907
1984
  import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
1908
1985
  var stepIndicatorVariants = cva12(
1909
1986
  "flex items-center justify-center rounded-full font-medium shrink-0 transition-colors duration-normal border-2",
@@ -1928,22 +2005,6 @@ var stepIndicatorVariants = cva12(
1928
2005
  }
1929
2006
  }
1930
2007
  );
1931
- var connectorVariants = cva12("transition-colors duration-normal", {
1932
- variants: {
1933
- completed: {
1934
- true: "bg-primary-500",
1935
- false: "bg-[var(--color-border)]"
1936
- },
1937
- orientation: {
1938
- horizontal: "h-0.5 flex-1 mx-2",
1939
- vertical: "w-0.5 min-h-6"
1940
- }
1941
- },
1942
- defaultVariants: {
1943
- completed: false,
1944
- orientation: "horizontal"
1945
- }
1946
- });
1947
2008
  var spinnerSizeMap = {
1948
2009
  sm: "sm",
1949
2010
  md: "sm",
@@ -1954,6 +2015,16 @@ var checkSizeMap = {
1954
2015
  md: 16,
1955
2016
  lg: 20
1956
2017
  };
2018
+ var chevronSizeMap = {
2019
+ sm: 14,
2020
+ md: 16,
2021
+ lg: 20
2022
+ };
2023
+ var indicatorHeight = {
2024
+ sm: "h-6",
2025
+ md: "h-8",
2026
+ lg: "h-10"
2027
+ };
1957
2028
  function StepIndicatorContent({
1958
2029
  step,
1959
2030
  index,
@@ -1972,6 +2043,157 @@ function StepIndicatorContent({
1972
2043
  }
1973
2044
  return /* @__PURE__ */ jsx27(Fragment2, { children: index + 1 });
1974
2045
  }
2046
+ function StepConnector({
2047
+ completed,
2048
+ orientation,
2049
+ connectorType,
2050
+ size
2051
+ }) {
2052
+ const isH = orientation === "horizontal";
2053
+ const lineColor = completed ? "bg-primary-500" : "bg-[var(--color-border)]";
2054
+ const iconColor = completed ? "text-primary-500" : "text-[var(--color-border)]";
2055
+ if (connectorType === "arrow") {
2056
+ if (isH) {
2057
+ return /* @__PURE__ */ jsx27(
2058
+ "div",
2059
+ {
2060
+ className: cn("flex items-center flex-1", indicatorHeight[size]),
2061
+ "aria-hidden": "true",
2062
+ children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center flex-1 mx-1.5", children: [
2063
+ /* @__PURE__ */ jsx27(
2064
+ "div",
2065
+ {
2066
+ className: cn(
2067
+ "h-0.5 flex-1 transition-colors duration-normal",
2068
+ lineColor
2069
+ )
2070
+ }
2071
+ ),
2072
+ /* @__PURE__ */ jsx27(
2073
+ "div",
2074
+ {
2075
+ className: cn(
2076
+ "w-0 h-0 shrink-0 border-y-[5px] border-y-transparent border-l-[7px] transition-colors duration-normal",
2077
+ completed ? "border-l-primary-500" : "border-l-[var(--color-border)]"
2078
+ )
2079
+ }
2080
+ )
2081
+ ] })
2082
+ }
2083
+ );
2084
+ }
2085
+ return /* @__PURE__ */ jsxs11(
2086
+ "div",
2087
+ {
2088
+ className: "flex flex-col items-center min-h-6",
2089
+ "aria-hidden": "true",
2090
+ children: [
2091
+ /* @__PURE__ */ jsx27(
2092
+ "div",
2093
+ {
2094
+ className: cn(
2095
+ "w-0.5 flex-1 transition-colors duration-normal",
2096
+ lineColor
2097
+ )
2098
+ }
2099
+ ),
2100
+ /* @__PURE__ */ jsx27(
2101
+ "div",
2102
+ {
2103
+ className: cn(
2104
+ "w-0 h-0 shrink-0 border-x-[5px] border-x-transparent border-t-[7px] transition-colors duration-normal",
2105
+ completed ? "border-t-primary-500" : "border-t-[var(--color-border)]"
2106
+ )
2107
+ }
2108
+ )
2109
+ ]
2110
+ }
2111
+ );
2112
+ }
2113
+ if (connectorType === "chevron") {
2114
+ const cSize = chevronSizeMap[size];
2115
+ if (isH) {
2116
+ return /* @__PURE__ */ jsx27(
2117
+ "div",
2118
+ {
2119
+ className: cn("flex items-center flex-1", indicatorHeight[size]),
2120
+ "aria-hidden": "true",
2121
+ children: /* @__PURE__ */ jsxs11(
2122
+ "div",
2123
+ {
2124
+ className: cn(
2125
+ "flex items-center flex-1 mx-1 transition-colors duration-normal",
2126
+ iconColor
2127
+ ),
2128
+ children: [
2129
+ /* @__PURE__ */ jsx27("div", { className: cn("h-0.5 flex-1", lineColor) }),
2130
+ /* @__PURE__ */ jsx27(
2131
+ ChevronRight,
2132
+ {
2133
+ size: cSize,
2134
+ className: "shrink-0 mx-0.5",
2135
+ strokeWidth: 2.5
2136
+ }
2137
+ ),
2138
+ /* @__PURE__ */ jsx27("div", { className: cn("h-0.5 flex-1", lineColor) })
2139
+ ]
2140
+ }
2141
+ )
2142
+ }
2143
+ );
2144
+ }
2145
+ return /* @__PURE__ */ jsxs11(
2146
+ "div",
2147
+ {
2148
+ className: cn(
2149
+ "flex flex-col items-center min-h-6 transition-colors duration-normal",
2150
+ iconColor
2151
+ ),
2152
+ "aria-hidden": "true",
2153
+ children: [
2154
+ /* @__PURE__ */ jsx27("div", { className: cn("w-0.5 flex-1", lineColor) }),
2155
+ /* @__PURE__ */ jsx27(
2156
+ ChevronDown3,
2157
+ {
2158
+ size: cSize,
2159
+ className: "shrink-0 my-0.5",
2160
+ strokeWidth: 2.5
2161
+ }
2162
+ ),
2163
+ /* @__PURE__ */ jsx27("div", { className: cn("w-0.5 flex-1", lineColor) })
2164
+ ]
2165
+ }
2166
+ );
2167
+ }
2168
+ if (isH) {
2169
+ return /* @__PURE__ */ jsx27(
2170
+ "div",
2171
+ {
2172
+ className: cn("flex items-center flex-1", indicatorHeight[size]),
2173
+ "aria-hidden": "true",
2174
+ children: /* @__PURE__ */ jsx27(
2175
+ "div",
2176
+ {
2177
+ className: cn(
2178
+ "h-0.5 flex-1 mx-2 transition-colors duration-normal",
2179
+ lineColor
2180
+ )
2181
+ }
2182
+ )
2183
+ }
2184
+ );
2185
+ }
2186
+ return /* @__PURE__ */ jsx27(
2187
+ "div",
2188
+ {
2189
+ className: cn(
2190
+ "w-0.5 min-h-6 transition-colors duration-normal",
2191
+ lineColor
2192
+ ),
2193
+ "aria-hidden": "true"
2194
+ }
2195
+ );
2196
+ }
1975
2197
  var Stepper = React28.forwardRef(
1976
2198
  ({
1977
2199
  className,
@@ -1979,6 +2201,7 @@ var Stepper = React28.forwardRef(
1979
2201
  activeStep,
1980
2202
  orientation = "horizontal",
1981
2203
  size = "md",
2204
+ connector: connectorType = "line",
1982
2205
  clickable = false,
1983
2206
  onStepClick,
1984
2207
  ...props
@@ -2001,16 +2224,13 @@ var Stepper = React28.forwardRef(
2001
2224
  const handleClick = () => {
2002
2225
  if (isClickable && onStepClick) onStepClick(index);
2003
2226
  };
2004
- const connector = !isLast ? /* @__PURE__ */ jsx27(
2005
- "div",
2227
+ const connectorEl = !isLast ? /* @__PURE__ */ jsx27(
2228
+ StepConnector,
2006
2229
  {
2007
- className: cn(
2008
- connectorVariants({
2009
- completed: index < activeStep,
2010
- orientation
2011
- })
2012
- ),
2013
- "aria-hidden": "true"
2230
+ completed: index < activeStep,
2231
+ orientation,
2232
+ connectorType,
2233
+ size
2014
2234
  }
2015
2235
  ) : null;
2016
2236
  const indicatorButton = /* @__PURE__ */ jsx27(
@@ -2068,7 +2288,7 @@ var Stepper = React28.forwardRef(
2068
2288
  ]
2069
2289
  }
2070
2290
  ),
2071
- connector
2291
+ connectorEl
2072
2292
  ] }, index);
2073
2293
  }
2074
2294
  return /* @__PURE__ */ jsxs11(
@@ -2080,7 +2300,7 @@ var Stepper = React28.forwardRef(
2080
2300
  children: [
2081
2301
  /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center", children: [
2082
2302
  indicatorButton,
2083
- connector
2303
+ connectorEl
2084
2304
  ] }),
2085
2305
  /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-0.5", !isLast && "pb-6"), children: [
2086
2306
  labelEl,
@@ -2317,7 +2537,7 @@ import {
2317
2537
  import { ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
2318
2538
 
2319
2539
  // src/components/data-table/data-table-pagination.tsx
2320
- import { ChevronLeft, ChevronRight } from "lucide-react";
2540
+ import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
2321
2541
  import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
2322
2542
  function DataTablePagination({
2323
2543
  table,
@@ -2369,7 +2589,7 @@ function DataTablePagination({
2369
2589
  onClick: () => table.nextPage(),
2370
2590
  disabled: !table.getCanNextPage(),
2371
2591
  "aria-label": "Next page",
2372
- children: /* @__PURE__ */ jsx31(ChevronRight, { className: "h-4 w-4" })
2592
+ children: /* @__PURE__ */ jsx31(ChevronRight2, { className: "h-4 w-4" })
2373
2593
  }
2374
2594
  )
2375
2595
  ] })
@@ -2756,7 +2976,7 @@ PopoverContent.displayName = "PopoverContent";
2756
2976
  // src/components/dropdown-menu/dropdown-menu.tsx
2757
2977
  import * as React36 from "react";
2758
2978
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
2759
- import { Check as Check5, ChevronRight as ChevronRight2 } from "lucide-react";
2979
+ import { Check as Check5, ChevronRight as ChevronRight3 } from "lucide-react";
2760
2980
  import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
2761
2981
  var DropdownMenu = DropdownMenuPrimitive.Root;
2762
2982
  var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -2796,7 +3016,7 @@ var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, .
2796
3016
  ...props,
2797
3017
  children: [
2798
3018
  children,
2799
- /* @__PURE__ */ jsx37(ChevronRight2, { className: "ml-auto h-3.5 w-3.5" })
3019
+ /* @__PURE__ */ jsx37(ChevronRight3, { className: "ml-auto h-3.5 w-3.5" })
2800
3020
  ]
2801
3021
  }
2802
3022
  ));
@@ -3871,7 +4091,7 @@ PrintDivider.displayName = "PrintDivider";
3871
4091
 
3872
4092
  // src/components/stat-card/stat-card.tsx
3873
4093
  import * as React48 from "react";
3874
- import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown3 } from "lucide-react";
4094
+ import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown4 } from "lucide-react";
3875
4095
  import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
3876
4096
  function inferDirection(trend) {
3877
4097
  if (!trend) return "neutral";
@@ -3886,7 +4106,7 @@ var TREND_STYLES = {
3886
4106
  };
3887
4107
  var TREND_ICON_COMPONENTS = {
3888
4108
  up: ChevronUp2,
3889
- down: ChevronDown3,
4109
+ down: ChevronDown4,
3890
4110
  neutral: null
3891
4111
  };
3892
4112
  var StatCard = React48.forwardRef(