@salesmind-ai/design-system 0.1.9 → 0.1.11

package/dist/core/index.d.cts

@@ -928,6 +928,8 @@ interface GridProps extends BoxProps {
     rows?: number | string;
     align?: 'start' | 'center' | 'end' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'stretch';
+    /** Prevent grid from expanding to more columns on wide screens. */
+    fixed?: boolean;
 }
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
 
@@ -2391,21 +2393,31 @@ declare const Z_INDEX: {
 type ZIndexToken = keyof typeof Z_INDEX;
 
 declare const BREAKPOINTS: {
+    readonly '3xs': 320;
+    readonly '2xs': 375;
     readonly xs: 480;
     readonly sm: 640;
     readonly md: 768;
     readonly lg: 1024;
     readonly xl: 1280;
     readonly '2xl': 1536;
+    readonly '3xl': 1920;
+    readonly '4xl': 2560;
+    readonly '5xl': 3840;
 };
 type Breakpoint = keyof typeof BREAKPOINTS;
 declare const MEDIA_QUERIES: {
+    readonly '3xs': "(min-width: 320px)";
+    readonly '2xs': "(min-width: 375px)";
     readonly xs: "(min-width: 480px)";
     readonly sm: "(min-width: 640px)";
     readonly md: "(min-width: 768px)";
     readonly lg: "(min-width: 1024px)";
     readonly xl: "(min-width: 1280px)";
     readonly '2xl': "(min-width: 1536px)";
+    readonly '3xl': "(min-width: 1920px)";
+    readonly '4xl': "(min-width: 2560px)";
+    readonly '5xl': "(min-width: 3840px)";
 };
 
 export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, type AppearanceContextValue, AppearancePanel, type AppearancePanelLabels, type AppearancePanelProps, AppearanceProvider, type AppearanceProviderProps, type AppearanceSettings, AspectRatio, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, BREAKPOINTS, Badge, type BadgeProps, Box, type BoxProps, type Brand, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type Breakpoint, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLORS, CONTAINER_SIZE_MAP, Calendar, type CalendarLabels, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, type CarouselNextProps, CarouselPrevious, type CarouselPreviousProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, Container, type ContainerProps, type ContainerSize, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuProps, ContextMenuSeparator, ContextMenuTrigger, DISTANCE, DSIntlProvider, type DSIntlProviderProps, DURATION, type Density, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EASING, EmptyState, type EmptyStateProps, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, type FieldRenderProps, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Grid, type GridProps, Heading, type HeadingProps, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, LINE_HEIGHT, Label, type LabelProps, MEDIA_QUERIES, MOTION, type MessageValues, type NavPlacement, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Popover, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, Prose, type ProseProps, RADIUS, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Radius, type RadiusToken, SHADOWS, SPACING, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps, Section, type SectionProps, Separator, type SeparatorProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetProps, type SheetSide, SheetTitle, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SpacingProps, type SpacingToken, Stack, type StackProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, TRANSITION, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type Theme, ToastContext, type ToastContextType, ToastItem, type ToastProps, ToastProvider, type ToastVariant, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, VARIANTS, VisuallyHidden, type ZIndexToken, Z_INDEX, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, dialogMessages, extractSpacingStyles, formMessages, hexToRgb, initializeAppearance, methodologyMessages, navigationMessages, paginationMessages, prefersReducedMotion, reportMessages, resolveSpacing, toastMessages, useAppearance, useDateFormat, useFormField, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection, useToast };

package/dist/core/index.d.ts

@@ -928,6 +928,8 @@ interface GridProps extends BoxProps {
     rows?: number | string;
     align?: 'start' | 'center' | 'end' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'stretch';
+    /** Prevent grid from expanding to more columns on wide screens. */
+    fixed?: boolean;
 }
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
 
@@ -2391,21 +2393,31 @@ declare const Z_INDEX: {
 type ZIndexToken = keyof typeof Z_INDEX;
 
 declare const BREAKPOINTS: {
+    readonly '3xs': 320;
+    readonly '2xs': 375;
     readonly xs: 480;
     readonly sm: 640;
     readonly md: 768;
     readonly lg: 1024;
     readonly xl: 1280;
     readonly '2xl': 1536;
+    readonly '3xl': 1920;
+    readonly '4xl': 2560;
+    readonly '5xl': 3840;
 };
 type Breakpoint = keyof typeof BREAKPOINTS;
 declare const MEDIA_QUERIES: {
+    readonly '3xs': "(min-width: 320px)";
+    readonly '2xs': "(min-width: 375px)";
     readonly xs: "(min-width: 480px)";
     readonly sm: "(min-width: 640px)";
     readonly md: "(min-width: 768px)";
     readonly lg: "(min-width: 1024px)";
     readonly xl: "(min-width: 1280px)";
     readonly '2xl': "(min-width: 1536px)";
+    readonly '3xl': "(min-width: 1920px)";
+    readonly '4xl': "(min-width: 2560px)";
+    readonly '5xl': "(min-width: 3840px)";
 };
 
 export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, type AppearanceContextValue, AppearancePanel, type AppearancePanelLabels, type AppearancePanelProps, AppearanceProvider, type AppearanceProviderProps, type AppearanceSettings, AspectRatio, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, BREAKPOINTS, Badge, type BadgeProps, Box, type BoxProps, type Brand, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type Breakpoint, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLORS, CONTAINER_SIZE_MAP, Calendar, type CalendarLabels, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, type CarouselNextProps, CarouselPrevious, type CarouselPreviousProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, Container, type ContainerProps, type ContainerSize, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuProps, ContextMenuSeparator, ContextMenuTrigger, DISTANCE, DSIntlProvider, type DSIntlProviderProps, DURATION, type Density, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EASING, EmptyState, type EmptyStateProps, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, type FieldRenderProps, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Grid, type GridProps, Heading, type HeadingProps, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, LINE_HEIGHT, Label, type LabelProps, MEDIA_QUERIES, MOTION, type MessageValues, type NavPlacement, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Popover, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, Prose, type ProseProps, RADIUS, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Radius, type RadiusToken, SHADOWS, SPACING, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps, Section, type SectionProps, Separator, type SeparatorProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetProps, type SheetSide, SheetTitle, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SpacingProps, type SpacingToken, Stack, type StackProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, TRANSITION, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type Theme, ToastContext, type ToastContextType, ToastItem, type ToastProps, ToastProvider, type ToastVariant, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, VARIANTS, VisuallyHidden, type ZIndexToken, Z_INDEX, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, dialogMessages, extractSpacingStyles, formMessages, hexToRgb, initializeAppearance, methodologyMessages, navigationMessages, paginationMessages, prefersReducedMotion, reportMessages, resolveSpacing, toastMessages, useAppearance, useDateFormat, useFormField, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection, useToast };

package/dist/core/index.js

@@ -227,20 +227,30 @@ var Z_INDEX = {
 
 // src/tokens/breakpoints.ts
 var BREAKPOINTS = {
+  "3xs": 320,
+  "2xs": 375,
   xs: 480,
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
-  "2xl": 1536
+  "2xl": 1536,
+  "3xl": 1920,
+  "4xl": 2560,
+  "5xl": 3840
 };
 var MEDIA_QUERIES = {
+  "3xs": `(min-width: ${BREAKPOINTS["3xs"]}px)`,
+  "2xs": `(min-width: ${BREAKPOINTS["2xs"]}px)`,
   xs: `(min-width: ${BREAKPOINTS.xs}px)`,
   sm: `(min-width: ${BREAKPOINTS.sm}px)`,
   md: `(min-width: ${BREAKPOINTS.md}px)`,
   lg: `(min-width: ${BREAKPOINTS.lg}px)`,
   xl: `(min-width: ${BREAKPOINTS.xl}px)`,
-  "2xl": `(min-width: ${BREAKPOINTS["2xl"]}px)`
+  "2xl": `(min-width: ${BREAKPOINTS["2xl"]}px)`,
+  "3xl": `(min-width: ${BREAKPOINTS["3xl"]}px)`,
+  "4xl": `(min-width: ${BREAKPOINTS["4xl"]}px)`,
+  "5xl": `(min-width: ${BREAKPOINTS["5xl"]}px)`
 };
 var STORAGE_KEY = "void-appearance-settings";
 var DEFAULT_SETTINGS = {
@@ -3340,15 +3350,22 @@ var Stack = forwardRef(
   }
 );
 Stack.displayName = "Stack";
+var MAX_RESPONSIVE_COLS = 6;
 var Grid = forwardRef(
-  ({ columns, rows, align, justify, className, style, ...props }, ref) => {
+  ({ columns, rows, align, justify, fixed, className, style, ...props }, ref) => {
+    const useColClass = typeof columns === "number" && columns >= 1 && columns <= MAX_RESPONSIVE_COLS;
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref,
-        className: clsx27("ds-grid", className),
+        className: clsx27(
+          "ds-grid",
+          useColClass && `ds-grid--cols-${columns}`,
+          fixed && "ds-grid--fixed",
+          className
+        ),
         style: {
-          gridTemplateColumns: typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns,
+          gridTemplateColumns: useColClass ? void 0 : typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns,
           gridTemplateRows: typeof rows === "number" ? `repeat(${rows}, 1fr)` : rows,
           alignItems: align,
           justifyItems: justify,
@@ -3379,7 +3396,7 @@ var Container = forwardRef(
     } else if (size) {
       resolvedMaxWidth = CONTAINER_SIZE_MAP[size];
     } else {
-      resolvedMaxWidth = maxWidth || "1200px";
+      resolvedMaxWidth = maxWidth || "var(--container-default-max, 1200px)";
     }
     return /* @__PURE__ */ jsx(
       Box,