@sourceful-energy/ui 0.1.27 → 0.1.29

package/dist/index.d.mts

@@ -357,6 +357,119 @@ interface LenisProviderProps {
 }
 declare function LenisProvider({ children }: LenisProviderProps): react_jsx_runtime.JSX.Element;
 
+type Theme = "base" | "elevated" | (string & {});
+type FontMode = "default" | "dyslexic";
+type ColorMode = "default" | "deuteranopia" | "protanopia" | "tritanopia" | "achromatopsia";
+type SpacingMode = "default" | "comfortable";
+type FocusMode = "default" | "enhanced";
+interface DesignSystemContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+}
+/**
+ * Hook to access and control the visual theme (base, elevated, etc.)
+ * Theme is typically set by the developer at app initialization.
+ */
+declare function useDesignSystemTheme(): {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+/**
+ * Hook to access and control dyslexic font mode.
+ */
+declare function useFontMode(): {
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+};
+/**
+ * Hook to access and control color blind mode.
+ */
+declare function useColorMode(): {
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+};
+/**
+ * Hook to access and control text spacing mode (WCAG 1.4.12).
+ */
+declare function useSpacingMode(): {
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+};
+/**
+ * Hook to access and control enhanced focus mode (WCAG 2.4.7).
+ */
+declare function useFocusMode(): {
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+};
+/**
+ * Hook to access all accessibility settings at once.
+ * Useful for building accessibility settings panels.
+ */
+declare function useAccessibility(): {
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+};
+/**
+ * Hook to access the full design system context.
+ */
+declare function useDesignSystem(): DesignSystemContextValue;
+interface DesignSystemProviderProps {
+    children: React$1.ReactNode;
+    /**
+     * Visual theme for the application.
+     * Typically set by the developer at app initialization.
+     * @default "base"
+     */
+    defaultTheme?: Theme;
+    /**
+     * Default font mode for accessibility.
+     * @default "default"
+     */
+    defaultFontMode?: FontMode;
+    /**
+     * Default color mode for color blind users.
+     * @default "default"
+     */
+    defaultColorMode?: ColorMode;
+    /**
+     * Default text spacing mode for readability.
+     * @default "default"
+     */
+    defaultSpacingMode?: SpacingMode;
+    /**
+     * Default focus indicator mode for keyboard navigation.
+     * @default "default"
+     */
+    defaultFocusMode?: FocusMode;
+    /**
+     * localStorage key for persisting user accessibility preferences.
+     * Theme is NOT persisted (it's app config, not user preference).
+     * @default "sourceful-a11y"
+     */
+    storageKey?: string;
+    /**
+     * Disable localStorage persistence (useful for testing).
+     * @default false
+     */
+    disableStorage?: boolean;
+}
+declare function DesignSystemProvider({ children, defaultTheme, defaultFontMode, defaultColorMode, defaultSpacingMode, defaultFocusMode, storageKey, disableStorage, }: DesignSystemProviderProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Pattern definitions for the PixelGrid component.
  *
@@ -370,7 +483,7 @@ declare function LenisProvider({ children }: LenisProviderProps): react_jsx_runt
  * 3 4 5
  * 6 7 8
  */
-type PatternType = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "L-tl" | "L-tr" | "L-bl" | "L-br" | "T-top" | "T-bot" | "T-left" | "T-right" | "duo-h" | "duo-v" | "duo-diag" | "frame" | "frame-sync" | "plus-hollow" | "sparse-1" | "sparse-2" | "sparse-3";
+type PatternType$4 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "L-tl" | "L-tr" | "L-bl" | "L-br" | "T-top" | "T-bot" | "T-left" | "T-right" | "duo-h" | "duo-v" | "duo-diag" | "frame" | "frame-sync" | "plus-hollow" | "sparse-1" | "sparse-2" | "sparse-3";
 interface PatternFrame {
     activePixels: number[];
     duration?: number;
@@ -386,39 +499,75 @@ interface PatternDefinition {
  * Each pattern is an array of frames, where each frame specifies which pixels are active.
  * Animation interpolates between frames for smooth transitions.
  */
-declare const patterns: Record<PatternType, PatternDefinition>;
-declare const patternNames: PatternType[];
-declare const patternCategories: Record<string, PatternType[]>;
+declare const patterns: Record<PatternType$4, PatternDefinition>;
+declare const patternNames: PatternType$4[];
+declare const patternCategories: Record<string, PatternType$4[]>;
+
+/**
+ * Pattern definitions for the 4x4 PixelGrid component.
+ *
+ * Grid position reference (4x4):
+ *  0  1  2  3   (row 0)
+ *  4  5  6  7   (row 1)
+ *  8  9 10 11   (row 2)
+ * 12 13 14 15   (row 3)
+ */
+type PatternType$3 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "frame" | "frame-sync" | "plus-hollow" | "square-inner" | "square-outer" | "cross-full" | "cross-spin";
+
+/**
+ * Pattern definitions for the 6x6 PixelGrid component.
+ *
+ * Grid position reference (6x6):
+ *  0  1  2  3  4  5   (row 0)
+ *  6  7  8  9 10 11   (row 1)
+ * 12 13 14 15 16 17   (row 2)
+ * 18 19 20 21 22 23   (row 3)
+ * 24 25 26 27 28 29   (row 4)
+ * 30 31 32 33 34 35   (row 5)
+ */
+type PatternType$2 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "frame" | "frame-sync" | "plus-hollow" | "ripple" | "spiral" | "checkerboard" | "diamond" | "wave";
 
 type PixelGridColor = "blue" | "pink" | "green";
 type PixelGridSpeed = "slow" | "normal" | "fast";
 type PixelGridSize = "sm" | "md" | "lg";
+type PixelGridDimension = 3 | 4 | 6;
+
+type PatternType$1 = PatternType$4 | PatternType$3 | PatternType$2;
 interface PixelGridProps {
     /** The animation pattern to display */
-    pattern: PatternType;
+    pattern: PatternType$1;
+    /** Grid dimension - 3x3, 4x4, or 6x6 */
+    dimension?: PixelGridDimension;
     /** Color theme - blue/cyan or pink/coral or green */
     color?: PixelGridColor;
     /** Animation speed */
     speed?: PixelGridSpeed;
     /** Grid size */
     size?: PixelGridSize;
-    /** Pause the animation */
+    /** Whether to animate (false = static display) */
+    animated?: boolean;
+    /** Pause the animation (only applies when animated=true) */
     paused?: boolean;
     /** Additional className for the container */
     className?: string;
     /** Show pattern label below the grid */
     showLabel?: boolean;
 }
-declare function PixelGrid({ pattern, color, speed, size, paused, className, showLabel, }: PixelGridProps): react_jsx_runtime.JSX.Element;
+declare function PixelGrid({ pattern, dimension, color, speed, size, animated, paused, className, showLabel, }: PixelGridProps): react_jsx_runtime.JSX.Element | null;
 declare namespace PixelGrid {
     var displayName: string;
 }
 
+type PatternType = PatternType$4 | PatternType$3 | PatternType$2;
 interface PixelGridShowcaseProps {
+    /** Grid dimension - 3x3, 4x4, or 6x6 */
+    dimension?: PixelGridDimension;
     /** Color theme for all grids */
     color?: PixelGridColor;
     /** Size for all grids */
     size?: PixelGridSize;
+    /** Whether to animate (false = static display) */
+    animated?: boolean;
     /** Show category headers */
     showCategories?: boolean;
     /** Filter to specific categories */
@@ -426,7 +575,7 @@ interface PixelGridShowcaseProps {
     /** Additional className */
     className?: string;
 }
-declare function PixelGridShowcase({ color, size, showCategories, categories, className, }: PixelGridShowcaseProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridShowcase({ dimension, color, size, animated, showCategories, categories, className, }: PixelGridShowcaseProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridShowcase {
     var displayName: string;
 }
@@ -435,10 +584,12 @@ declare namespace PixelGridShowcase {
  */
 interface PixelGridColorComparisonProps {
     pattern: PatternType;
+    dimension?: PixelGridDimension;
     size?: PixelGridSize;
+    animated?: boolean;
     className?: string;
 }
-declare function PixelGridColorComparison({ pattern, size, className, }: PixelGridColorComparisonProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridColorComparison({ pattern, dimension, size, animated, className, }: PixelGridColorComparisonProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridColorComparison {
     var displayName: string;
 }
@@ -447,12 +598,14 @@ declare namespace PixelGridColorComparison {
  */
 interface PixelGridSizeComparisonProps {
     pattern: PatternType;
+    dimension?: PixelGridDimension;
     color?: PixelGridColor;
+    animated?: boolean;
     className?: string;
 }
-declare function PixelGridSizeComparison({ pattern, color, className, }: PixelGridSizeComparisonProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridSizeComparison({ pattern, dimension, color, animated, className, }: PixelGridSizeComparisonProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridSizeComparison {
     var displayName: string;
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, type BreadcrumbItem, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, LenisProvider, type PatternDefinition, type PatternFrame, type PatternType, PixelGrid, type PixelGridColor, PixelGridColorComparison, type PixelGridColorComparisonProps, type PixelGridProps, PixelGridShowcase, type PixelGridShowcaseProps, type PixelGridSize, PixelGridSizeComparison, type PixelGridSizeComparisonProps, type PixelGridSpeed, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, badgeVariants, buttonVariants, cn, patternCategories, patternNames, patterns };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, type BreadcrumbItem, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type ColorMode, DesignSystemProvider, type DesignSystemProviderProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FocusMode, type FontMode, Input, Label, LenisProvider, type PatternDefinition, type PatternFrame, type PatternType$1 as PatternType, PixelGrid, type PixelGridColor, PixelGridColorComparison, type PixelGridColorComparisonProps, type PixelGridProps, PixelGridShowcase, type PixelGridShowcaseProps, type PixelGridSize, PixelGridSizeComparison, type PixelGridSizeComparisonProps, type PixelGridSpeed, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingMode, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, badgeVariants, buttonVariants, cn, patternCategories, patternNames, patterns, useAccessibility, useColorMode, useDesignSystem, useDesignSystemTheme, useFocusMode, useFontMode, useSpacingMode };

package/dist/index.d.ts

@@ -357,6 +357,119 @@ interface LenisProviderProps {
 }
 declare function LenisProvider({ children }: LenisProviderProps): react_jsx_runtime.JSX.Element;
 
+type Theme = "base" | "elevated" | (string & {});
+type FontMode = "default" | "dyslexic";
+type ColorMode = "default" | "deuteranopia" | "protanopia" | "tritanopia" | "achromatopsia";
+type SpacingMode = "default" | "comfortable";
+type FocusMode = "default" | "enhanced";
+interface DesignSystemContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+}
+/**
+ * Hook to access and control the visual theme (base, elevated, etc.)
+ * Theme is typically set by the developer at app initialization.
+ */
+declare function useDesignSystemTheme(): {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+/**
+ * Hook to access and control dyslexic font mode.
+ */
+declare function useFontMode(): {
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+};
+/**
+ * Hook to access and control color blind mode.
+ */
+declare function useColorMode(): {
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+};
+/**
+ * Hook to access and control text spacing mode (WCAG 1.4.12).
+ */
+declare function useSpacingMode(): {
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+};
+/**
+ * Hook to access and control enhanced focus mode (WCAG 2.4.7).
+ */
+declare function useFocusMode(): {
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+};
+/**
+ * Hook to access all accessibility settings at once.
+ * Useful for building accessibility settings panels.
+ */
+declare function useAccessibility(): {
+    fontMode: FontMode;
+    setFontMode: (mode: FontMode) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    spacingMode: SpacingMode;
+    setSpacingMode: (mode: SpacingMode) => void;
+    focusMode: FocusMode;
+    setFocusMode: (mode: FocusMode) => void;
+};
+/**
+ * Hook to access the full design system context.
+ */
+declare function useDesignSystem(): DesignSystemContextValue;
+interface DesignSystemProviderProps {
+    children: React$1.ReactNode;
+    /**
+     * Visual theme for the application.
+     * Typically set by the developer at app initialization.
+     * @default "base"
+     */
+    defaultTheme?: Theme;
+    /**
+     * Default font mode for accessibility.
+     * @default "default"
+     */
+    defaultFontMode?: FontMode;
+    /**
+     * Default color mode for color blind users.
+     * @default "default"
+     */
+    defaultColorMode?: ColorMode;
+    /**
+     * Default text spacing mode for readability.
+     * @default "default"
+     */
+    defaultSpacingMode?: SpacingMode;
+    /**
+     * Default focus indicator mode for keyboard navigation.
+     * @default "default"
+     */
+    defaultFocusMode?: FocusMode;
+    /**
+     * localStorage key for persisting user accessibility preferences.
+     * Theme is NOT persisted (it's app config, not user preference).
+     * @default "sourceful-a11y"
+     */
+    storageKey?: string;
+    /**
+     * Disable localStorage persistence (useful for testing).
+     * @default false
+     */
+    disableStorage?: boolean;
+}
+declare function DesignSystemProvider({ children, defaultTheme, defaultFontMode, defaultColorMode, defaultSpacingMode, defaultFocusMode, storageKey, disableStorage, }: DesignSystemProviderProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Pattern definitions for the PixelGrid component.
  *
@@ -370,7 +483,7 @@ declare function LenisProvider({ children }: LenisProviderProps): react_jsx_runt
  * 3 4 5
  * 6 7 8
  */
-type PatternType = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "L-tl" | "L-tr" | "L-bl" | "L-br" | "T-top" | "T-bot" | "T-left" | "T-right" | "duo-h" | "duo-v" | "duo-diag" | "frame" | "frame-sync" | "plus-hollow" | "sparse-1" | "sparse-2" | "sparse-3";
+type PatternType$4 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "L-tl" | "L-tr" | "L-bl" | "L-br" | "T-top" | "T-bot" | "T-left" | "T-right" | "duo-h" | "duo-v" | "duo-diag" | "frame" | "frame-sync" | "plus-hollow" | "sparse-1" | "sparse-2" | "sparse-3";
 interface PatternFrame {
     activePixels: number[];
     duration?: number;
@@ -386,39 +499,75 @@ interface PatternDefinition {
  * Each pattern is an array of frames, where each frame specifies which pixels are active.
  * Animation interpolates between frames for smooth transitions.
  */
-declare const patterns: Record<PatternType, PatternDefinition>;
-declare const patternNames: PatternType[];
-declare const patternCategories: Record<string, PatternType[]>;
+declare const patterns: Record<PatternType$4, PatternDefinition>;
+declare const patternNames: PatternType$4[];
+declare const patternCategories: Record<string, PatternType$4[]>;
+
+/**
+ * Pattern definitions for the 4x4 PixelGrid component.
+ *
+ * Grid position reference (4x4):
+ *  0  1  2  3   (row 0)
+ *  4  5  6  7   (row 1)
+ *  8  9 10 11   (row 2)
+ * 12 13 14 15   (row 3)
+ */
+type PatternType$3 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "frame" | "frame-sync" | "plus-hollow" | "square-inner" | "square-outer" | "cross-full" | "cross-spin";
+
+/**
+ * Pattern definitions for the 6x6 PixelGrid component.
+ *
+ * Grid position reference (6x6):
+ *  0  1  2  3  4  5   (row 0)
+ *  6  7  8  9 10 11   (row 1)
+ * 12 13 14 15 16 17   (row 2)
+ * 18 19 20 21 22 23   (row 3)
+ * 24 25 26 27 28 29   (row 4)
+ * 30 31 32 33 34 35   (row 5)
+ */
+type PatternType$2 = "solo-center" | "solo-tl" | "solo-br" | "line-h-top" | "line-h-mid" | "line-h-bot" | "line-v-left" | "line-v-mid" | "line-v-right" | "line-diag-1" | "line-diag-2" | "corners-sync" | "corners-only" | "frame" | "frame-sync" | "plus-hollow" | "ripple" | "spiral" | "checkerboard" | "diamond" | "wave";
 
 type PixelGridColor = "blue" | "pink" | "green";
 type PixelGridSpeed = "slow" | "normal" | "fast";
 type PixelGridSize = "sm" | "md" | "lg";
+type PixelGridDimension = 3 | 4 | 6;
+
+type PatternType$1 = PatternType$4 | PatternType$3 | PatternType$2;
 interface PixelGridProps {
     /** The animation pattern to display */
-    pattern: PatternType;
+    pattern: PatternType$1;
+    /** Grid dimension - 3x3, 4x4, or 6x6 */
+    dimension?: PixelGridDimension;
     /** Color theme - blue/cyan or pink/coral or green */
     color?: PixelGridColor;
     /** Animation speed */
     speed?: PixelGridSpeed;
     /** Grid size */
     size?: PixelGridSize;
-    /** Pause the animation */
+    /** Whether to animate (false = static display) */
+    animated?: boolean;
+    /** Pause the animation (only applies when animated=true) */
     paused?: boolean;
     /** Additional className for the container */
     className?: string;
     /** Show pattern label below the grid */
     showLabel?: boolean;
 }
-declare function PixelGrid({ pattern, color, speed, size, paused, className, showLabel, }: PixelGridProps): react_jsx_runtime.JSX.Element;
+declare function PixelGrid({ pattern, dimension, color, speed, size, animated, paused, className, showLabel, }: PixelGridProps): react_jsx_runtime.JSX.Element | null;
 declare namespace PixelGrid {
     var displayName: string;
 }
 
+type PatternType = PatternType$4 | PatternType$3 | PatternType$2;
 interface PixelGridShowcaseProps {
+    /** Grid dimension - 3x3, 4x4, or 6x6 */
+    dimension?: PixelGridDimension;
     /** Color theme for all grids */
     color?: PixelGridColor;
     /** Size for all grids */
     size?: PixelGridSize;
+    /** Whether to animate (false = static display) */
+    animated?: boolean;
     /** Show category headers */
     showCategories?: boolean;
     /** Filter to specific categories */
@@ -426,7 +575,7 @@ interface PixelGridShowcaseProps {
     /** Additional className */
     className?: string;
 }
-declare function PixelGridShowcase({ color, size, showCategories, categories, className, }: PixelGridShowcaseProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridShowcase({ dimension, color, size, animated, showCategories, categories, className, }: PixelGridShowcaseProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridShowcase {
     var displayName: string;
 }
@@ -435,10 +584,12 @@ declare namespace PixelGridShowcase {
  */
 interface PixelGridColorComparisonProps {
     pattern: PatternType;
+    dimension?: PixelGridDimension;
     size?: PixelGridSize;
+    animated?: boolean;
     className?: string;
 }
-declare function PixelGridColorComparison({ pattern, size, className, }: PixelGridColorComparisonProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridColorComparison({ pattern, dimension, size, animated, className, }: PixelGridColorComparisonProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridColorComparison {
     var displayName: string;
 }
@@ -447,12 +598,14 @@ declare namespace PixelGridColorComparison {
  */
 interface PixelGridSizeComparisonProps {
     pattern: PatternType;
+    dimension?: PixelGridDimension;
     color?: PixelGridColor;
+    animated?: boolean;
     className?: string;
 }
-declare function PixelGridSizeComparison({ pattern, color, className, }: PixelGridSizeComparisonProps): react_jsx_runtime.JSX.Element;
+declare function PixelGridSizeComparison({ pattern, dimension, color, animated, className, }: PixelGridSizeComparisonProps): react_jsx_runtime.JSX.Element;
 declare namespace PixelGridSizeComparison {
     var displayName: string;
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, type BreadcrumbItem, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, LenisProvider, type PatternDefinition, type PatternFrame, type PatternType, PixelGrid, type PixelGridColor, PixelGridColorComparison, type PixelGridColorComparisonProps, type PixelGridProps, PixelGridShowcase, type PixelGridShowcaseProps, type PixelGridSize, PixelGridSizeComparison, type PixelGridSizeComparisonProps, type PixelGridSpeed, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, badgeVariants, buttonVariants, cn, patternCategories, patternNames, patterns };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, type BreadcrumbItem, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type ColorMode, DesignSystemProvider, type DesignSystemProviderProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FocusMode, type FontMode, Input, Label, LenisProvider, type PatternDefinition, type PatternFrame, type PatternType$1 as PatternType, PixelGrid, type PixelGridColor, PixelGridColorComparison, type PixelGridColorComparisonProps, type PixelGridProps, PixelGridShowcase, type PixelGridShowcaseProps, type PixelGridSize, PixelGridSizeComparison, type PixelGridSizeComparisonProps, type PixelGridSpeed, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingMode, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, badgeVariants, buttonVariants, cn, patternCategories, patternNames, patterns, useAccessibility, useColorMode, useDesignSystem, useDesignSystemTheme, useFocusMode, useFontMode, useSpacingMode };