@saas-ui/react 3.0.0-next.44 → 3.0.0-next.48

package/dist/colors.d.ts

@@ -1 +1 @@
-export { colors } from './theme/tokens/colors.ts';
+export { colors } from '@saas-ui/chakra-preset/colors';

package/dist/colors.js

@@ -1 +1 @@
-export { colors } from "./theme/tokens/colors.js";
+export { colors } from '@saas-ui/chakra-preset/colors';

package/dist/components/command/command.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type HTMLChakraProps, UnstyledProp } from '@chakra-ui/react/styled-system';
+import type { CommandVariantProps } from '@saas-ui/chakra-preset/recipes/command';
 import type { RecipeProps } from '../../types.ts';
-import type { CommandVariantProps } from './command.recipe.ts';
 export interface CommandBaseProps extends RecipeProps<'suiCommand', CommandVariantProps>, UnstyledProp {
 }
 export interface CommandProps extends HTMLChakraProps<'span'>, CommandBaseProps, CommandVariantProps {

package/dist/components/grid-list/grid-list.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import type { GridListVariantProps } from '@saas-ui/chakra-preset/slot-recipes/grid-list';
 import type { SlotRecipeProps } from '../../types.ts';
-import type { GridListVariantProps } from './grid-list.recipe.ts';
 interface GridListRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList', GridListVariantProps> {
 }
 declare const GridListRoot: import("react").ForwardRefExoticComponent<GridListRootProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/persona/persona-composed.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import type { PersonaVariantProps } from '@saas-ui/chakra-preset/slot-recipes/persona';
 import * as PersonaPrimitive from './persona.tsx';
-import type { PersonaVariantProps } from './persona.recipe.ts';
 import type { PersonaPresence } from './presence.ts';
 interface PersonaOptions {
     /**

package/dist/components/persona/persona.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
+import type { PersonaVariantProps } from '@saas-ui/chakra-preset/slot-recipes/persona';
 import { type AvatarProps } from '../avatar/avatar.tsx';
-import type { PersonaVariantProps } from './persona.recipe.ts';
 import type { PersonaPresence } from './presence.ts';
 interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**

package/dist/index.d.ts

@@ -136,7 +136,7 @@ export { Strong, type StrongProps } from './components/strong/index.ts';
 export { VisuallyHidden } from './components/visually-hidden/index.ts';
 export { Wrap, type WrapProps } from './components/wrap/index.ts';
 export { Flex, type FlexProps } from './components/flex/index.ts';
-export type { ColorPalette } from './theme/tokens/colors.ts';
+export type { ColorPalette } from '@saas-ui/chakra-preset/colors';
 export { For } from '@chakra-ui/react/for';
 export { LocaleProvider, useLocaleContext, useFilter, } from '@chakra-ui/react/locale';
 export { Theme } from '@chakra-ui/react';

package/dist/preset.d.ts

@@ -1,3 +1 @@
-declare const defaultConfig: import("@chakra-ui/react").SystemConfig;
-export declare const defaultSystem: import("@chakra-ui/react").SystemContext;
-export { defaultSystem as system, defaultConfig };
+export * from '@saas-ui/chakra-preset';

package/dist/preset.js

@@ -1,10 +1 @@
-import { createSystem, defaultBaseConfig, mergeConfigs } from '@chakra-ui/react';
-import { defaultThemeConfig } from "./theme/index.js";
-import { utilities } from "./theme/utilities.js";
-const defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig);
-/**
- * TODO: This is a temporary fix to add the utilities to the default config.
- */
-defaultConfig.utilities = Object.assign(defaultConfig.utilities ?? {}, utilities);
-export const defaultSystem = createSystem(defaultConfig);
-export { defaultSystem as system, defaultConfig };
+export * from '@saas-ui/chakra-preset';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.44",
+  "version": "3.0.0-next.48",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -62,8 +62,9 @@
   "dependencies": {
     "@ark-ui/react": "^5.25.1",
     "next-themes": "^0.4.6",
-    "@saas-ui/hooks": "3.0.0-next.3",
-    "@saas-ui/core": "3.0.0-next.11"
+    "@saas-ui/chakra-preset": "3.0.0-next.3",
+    "@saas-ui/core": "3.0.0-next.11",
+    "@saas-ui/hooks": "3.0.0-next.3"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.27.0",

package/dist/components/accordion/accordion.recipe.d.ts

@@ -1,84 +0,0 @@
-export declare const accordionSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody", {
-    variant: {
-        outline: {
-            item: {
-                borderBottomWidth: "1px";
-            };
-        };
-        subtle: {
-            itemTrigger: {
-                px: "var(--accordion-padding-x)";
-            };
-            itemContent: {
-                px: "var(--accordion-padding-x)";
-            };
-            item: {
-                borderRadius: "var(--accordion-radius)";
-                _open: {
-                    bg: "colorPalette.subtle";
-                };
-            };
-        };
-        enclosed: {
-            root: {
-                borderWidth: "1px";
-                borderRadius: "var(--accordion-radius)";
-                divideY: string;
-                overflow: "hidden";
-            };
-            itemTrigger: {
-                px: "var(--accordion-padding-x)";
-            };
-            itemContent: {
-                px: "var(--accordion-padding-x)";
-            };
-            item: {
-                _open: {
-                    bg: "bg.subtle";
-                };
-            };
-        };
-        plain: {};
-    };
-    size: {
-        sm: {
-            root: {
-                '--accordion-padding-x': "spacing.3";
-                '--accordion-padding-y': "spacing.2";
-            };
-            itemTrigger: {
-                textStyle: "sm";
-                py: "var(--accordion-padding-y)";
-            };
-            itemContent: {
-                textStyle: "sm";
-            };
-        };
-        md: {
-            root: {
-                '--accordion-padding-x': "spacing.4";
-                '--accordion-padding-y': "spacing.2";
-            };
-            itemTrigger: {
-                textStyle: "md";
-                py: "var(--accordion-padding-y)";
-            };
-            itemContent: {
-                textStyle: "md";
-            };
-        };
-        lg: {
-            root: {
-                '--accordion-padding-x': "spacing.4.5";
-                '--accordion-padding-y': "spacing.2.5";
-            };
-            itemTrigger: {
-                textStyle: "lg";
-                py: "var(--accordion-padding-y)";
-            };
-            itemContent: {
-                textStyle: "lg";
-            };
-        };
-    };
-}>;

package/dist/components/accordion/accordion.recipe.js

@@ -1,148 +0,0 @@
-import { accordionAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const accordionSlotRecipe = defineSlotRecipe({
-    className: 'chakra-accordion',
-    slots: accordionAnatomy.keys(),
-    base: {
-        root: {
-            width: 'full',
-            '--accordion-radius': 'radii.panel.md',
-        },
-        item: {
-            overflowAnchor: 'none',
-        },
-        itemTrigger: {
-            display: 'flex',
-            alignItems: 'center',
-            width: 'full',
-            outline: '0',
-            gap: '3',
-            fontWeight: 'medium',
-            borderRadius: 'var(--accordion-radius)',
-            _focusVisible: {
-                outline: '2px solid',
-                outlineColor: 'colorPalette.focusRing',
-            },
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-        },
-        itemBody: {
-            pt: 'var(--accordion-padding-y)',
-            pb: 'calc(var(--accordion-padding-y) * 2)',
-        },
-        itemContent: {
-            overflow: 'hidden',
-            borderRadius: 'var(--accordion-radius)',
-            _open: {
-                animationName: 'expand-height, fade-in',
-                animationDuration: 'moderate',
-            },
-            _closed: {
-                animationName: 'collapse-height, fade-out',
-                animationDuration: 'moderate',
-            },
-        },
-        itemIndicator: {
-            ms: 'auto',
-            transition: 'rotate 0.2s',
-            transformOrigin: 'center',
-            color: 'fg.subtle',
-            _open: {
-                rotate: '90deg',
-            },
-            _icon: {
-                width: '1.2em',
-                height: '1.2em',
-            },
-        },
-    },
-    variants: {
-        variant: {
-            outline: {
-                item: {
-                    borderBottomWidth: '1px',
-                },
-            },
-            subtle: {
-                itemTrigger: {
-                    px: 'var(--accordion-padding-x)',
-                },
-                itemContent: {
-                    px: 'var(--accordion-padding-x)',
-                },
-                item: {
-                    borderRadius: 'var(--accordion-radius)',
-                    _open: {
-                        bg: 'colorPalette.subtle',
-                    },
-                },
-            },
-            enclosed: {
-                root: {
-                    borderWidth: '1px',
-                    borderRadius: 'var(--accordion-radius)',
-                    divideY: '1px',
-                    overflow: 'hidden',
-                },
-                itemTrigger: {
-                    px: 'var(--accordion-padding-x)',
-                },
-                itemContent: {
-                    px: 'var(--accordion-padding-x)',
-                },
-                item: {
-                    _open: {
-                        bg: 'bg.subtle',
-                    },
-                },
-            },
-            plain: {},
-        },
-        size: {
-            sm: {
-                root: {
-                    '--accordion-padding-x': 'spacing.3',
-                    '--accordion-padding-y': 'spacing.2',
-                },
-                itemTrigger: {
-                    textStyle: 'sm',
-                    py: 'var(--accordion-padding-y)',
-                },
-                itemContent: {
-                    textStyle: 'sm',
-                },
-            },
-            md: {
-                root: {
-                    '--accordion-padding-x': 'spacing.4',
-                    '--accordion-padding-y': 'spacing.2',
-                },
-                itemTrigger: {
-                    textStyle: 'md',
-                    py: 'var(--accordion-padding-y)',
-                },
-                itemContent: {
-                    textStyle: 'md',
-                },
-            },
-            lg: {
-                root: {
-                    '--accordion-padding-x': 'spacing.4.5',
-                    '--accordion-padding-y': 'spacing.2.5',
-                },
-                itemTrigger: {
-                    textStyle: 'lg',
-                    py: 'var(--accordion-padding-y)',
-                },
-                itemContent: {
-                    textStyle: 'lg',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});

package/dist/components/action-bar/action-bar.recipe.d.ts

@@ -1 +0,0 @@
-export declare const actionBarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger">>;

package/dist/components/action-bar/action-bar.recipe.js

@@ -1,56 +0,0 @@
-import { actionBarAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const actionBarSlotRecipe = defineSlotRecipe({
-    className: 'chakra-action-bar',
-    slots: actionBarAnatomy.keys(),
-    base: {
-        positioner: {
-            position: 'fixed',
-            display: 'flex',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-            insetInline: '0',
-            top: 'unset',
-            bottom: 'calc(env(safe-area-inset-bottom) + 20px)',
-        },
-        content: {
-            bg: 'bg.panel',
-            shadow: 'md',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '3',
-            borderRadius: 'panel.md',
-            py: '2.5',
-            px: '3',
-            pointerEvents: 'auto',
-            // Stabilize the position of the action bar when the scrollbar is hidden
-            // by using the scrollbar width to offset the position.
-            translate: 'calc(-1 * var(--scrollbar-width) / 2) 0px',
-            _open: {
-                animationName: 'slide-from-bottom, fade-in',
-                animationDuration: 'moderate',
-            },
-            _closed: {
-                animationName: 'slide-to-bottom, fade-out',
-                animationDuration: 'faster',
-            },
-        },
-        separator: {
-            width: '1px',
-            height: '5',
-            bg: 'border',
-        },
-        selectionTrigger: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '2',
-            alignSelf: 'stretch',
-            textStyle: 'sm',
-            px: '4',
-            py: '1',
-            borderRadius: 'control.md',
-            borderWidth: '1px',
-            borderStyle: 'dashed',
-        },
-    },
-});

package/dist/components/alert/alert.recipe.d.ts

@@ -1,120 +0,0 @@
-export declare const alertSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "root" | "title", {
-    status: {
-        info: {
-            root: {
-                colorPalette: "blue";
-            };
-        };
-        warning: {
-            root: {
-                colorPalette: "orange";
-            };
-        };
-        success: {
-            root: {
-                colorPalette: "green";
-            };
-        };
-        error: {
-            root: {
-                colorPalette: "red";
-            };
-        };
-        neutral: {
-            root: {
-                colorPalette: "gray";
-            };
-        };
-    };
-    inline: {
-        true: {
-            content: {
-                display: "inline-flex";
-                flexDirection: "row";
-                alignItems: "center";
-            };
-        };
-        false: {
-            content: {
-                display: "flex";
-                flexDirection: "column";
-            };
-        };
-    };
-    variant: {
-        subtle: {
-            root: {
-                bg: "colorPalette.subtle";
-                color: "colorPalette.fg";
-            };
-        };
-        surface: {
-            root: {
-                bg: "colorPalette.subtle";
-                color: "colorPalette.fg";
-                shadow: "inset 0 0 0px 1px var(--shadow-color)";
-                shadowColor: "colorPalette.solid";
-            };
-            indicator: {
-                color: "colorPalette.fg";
-            };
-        };
-        outline: {
-            root: {
-                color: "colorPalette.fg";
-                shadow: "inset 0 0 0px 1px var(--shadow-color)";
-                shadowColor: "colorPalette.subtle";
-            };
-            indicator: {
-                color: "colorPalette.fg";
-            };
-        };
-        solid: {
-            root: {
-                bg: "colorPalette.solid";
-                color: "colorPalette.contrast";
-            };
-            indicator: {
-                color: "colorPalette.contrast";
-            };
-        };
-    };
-    size: {
-        sm: {
-            root: {
-                gap: "2";
-                px: "3";
-                py: "3";
-                textStyle: "xs";
-                borderRadius: "panel.sm";
-            };
-            indicator: {
-                textStyle: "lg";
-            };
-        };
-        md: {
-            root: {
-                gap: "3";
-                px: "4";
-                py: "4";
-                textStyle: "sm";
-                borderRadius: "panel.md";
-            };
-            indicator: {
-                textStyle: "xl";
-            };
-        };
-        lg: {
-            root: {
-                gap: "3";
-                px: "4";
-                py: "4";
-                textStyle: "md";
-                borderRadius: "panel.lg";
-            };
-            indicator: {
-                textStyle: "2xl";
-            };
-        };
-    };
-}>;

package/dist/components/alert/alert.recipe.js

@@ -1,149 +0,0 @@
-import { alertAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const alertSlotRecipe = defineSlotRecipe({
-    slots: alertAnatomy.keys(),
-    className: 'chakra-alert',
-    base: {
-        root: {
-            width: 'full',
-            display: 'flex',
-            alignItems: 'flex-start',
-            position: 'relative',
-        },
-        title: {
-            fontWeight: 'medium',
-        },
-        description: {
-            display: 'inline',
-        },
-        indicator: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: '0',
-            width: '1em',
-            height: '1em',
-        },
-        content: {
-            display: 'flex',
-            flex: '1',
-            gap: '1',
-        },
-    },
-    variants: {
-        status: {
-            info: {
-                root: { colorPalette: 'blue' },
-            },
-            warning: {
-                root: { colorPalette: 'orange' },
-            },
-            success: {
-                root: { colorPalette: 'green' },
-            },
-            error: {
-                root: { colorPalette: 'red' },
-            },
-            neutral: {
-                root: { colorPalette: 'gray' },
-            },
-        },
-        inline: {
-            true: {
-                content: {
-                    display: 'inline-flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                },
-            },
-            false: {
-                content: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                },
-            },
-        },
-        variant: {
-            subtle: {
-                root: {
-                    bg: 'colorPalette.subtle',
-                    color: 'colorPalette.fg',
-                },
-            },
-            surface: {
-                root: {
-                    bg: 'colorPalette.subtle',
-                    color: 'colorPalette.fg',
-                    shadow: 'inset 0 0 0px 1px var(--shadow-color)',
-                    shadowColor: 'colorPalette.solid',
-                },
-                indicator: {
-                    color: 'colorPalette.fg',
-                },
-            },
-            outline: {
-                root: {
-                    color: 'colorPalette.fg',
-                    shadow: 'inset 0 0 0px 1px var(--shadow-color)',
-                    shadowColor: 'colorPalette.subtle',
-                },
-                indicator: {
-                    color: 'colorPalette.fg',
-                },
-            },
-            solid: {
-                root: {
-                    bg: 'colorPalette.solid',
-                    color: 'colorPalette.contrast',
-                },
-                indicator: {
-                    color: 'colorPalette.contrast',
-                },
-            },
-        },
-        size: {
-            sm: {
-                root: {
-                    gap: '2',
-                    px: '3',
-                    py: '3',
-                    textStyle: 'xs',
-                    borderRadius: 'panel.sm',
-                },
-                indicator: {
-                    textStyle: 'lg',
-                },
-            },
-            md: {
-                root: {
-                    gap: '3',
-                    px: '4',
-                    py: '4',
-                    textStyle: 'sm',
-                    borderRadius: 'panel.md',
-                },
-                indicator: {
-                    textStyle: 'xl',
-                },
-            },
-            lg: {
-                root: {
-                    gap: '3',
-                    px: '4',
-                    py: '4',
-                    textStyle: 'md',
-                    borderRadius: 'panel.lg',
-                },
-                indicator: {
-                    textStyle: '2xl',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        status: 'info',
-        variant: 'subtle',
-        size: 'md',
-        inline: false,
-    },
-});

package/dist/components/app-shell/app-shell.recipe.d.ts

@@ -1,13 +0,0 @@
-export declare const appShellSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "main", {
-    fullscreen: {
-        true: {
-            root: {
-                position: "fixed";
-                inset: number;
-            };
-        };
-    };
-    variant: {
-        plain: {};
-    };
-}>;