@saas-ui/react 3.0.0-next.43 → 3.0.0-next.47

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/absolute-center/index.js

@@ -1 +1,2 @@
+'use client';
 export { AbsoluteCenter, } from '@chakra-ui/react/absolute-center';

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { ActionBar } from '@chakra-ui/react/action-bar';

package/dist/components/aspect-ratio/index.js

@@ -1 +1,2 @@
+'use client';
 export { AspectRatio, } from '@chakra-ui/react/aspect-ratio';

package/dist/components/blockquote/blockquote.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Blockquote as ChakraBlockquote, } from '@chakra-ui/react';

package/dist/components/checkbox/checkbox.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Checkbox as ChakraCheckbox } from '@chakra-ui/react/checkbox';

package/dist/components/checkbox-card/checkbox-card.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, forwardRef } from 'react';
 import { CheckboxCard as ChakraCheckboxCard } from '@chakra-ui/react/checkbox-card';

package/dist/components/clipboard/clipboard.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Clipboard as ChakraClipboard } from '@chakra-ui/react/clipboard';

package/dist/components/close-button/close-button.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { IconButton } from "../icon-button/index.js";

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/command/command.js

@@ -1,3 +1,4 @@
+'use client';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createRecipeContext, } from '@chakra-ui/react/styled-system';
 import { Kbd } from "../kbd/index.js";

package/dist/components/dialog/dialog.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Dialog as ChakraDialog } from '@chakra-ui/react/dialog';

package/dist/components/drawer/drawer.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { DialogContext } from '@ark-ui/react/dialog';

package/dist/components/empty-state/empty-state.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Box, EmptyState as ChakraEmptyState, useEmptyStateStyles, } from '@chakra-ui/react';

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/grid-list/grid-list.js

@@ -1,3 +1,4 @@
+'use client';
 import { GridList } from '@saas-ui/core/grid-list';
 import { withContext, withProvider } from "./grid-list.context.js";
 const GridListRoot = withProvider(GridList.Root, 'root');

package/dist/components/hover-card/hover-card.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { HoverCard } from '@chakra-ui/react/hover-card';

package/dist/components/icon-button/icon-button.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Button } from "../button/index.js";

package/dist/components/info-tip/info-tip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { IconButton } from "../icon-button/index.js";

package/dist/components/link/link.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Link as ChakraLink } from '@chakra-ui/react/link';

package/dist/components/loading-overlay/loading-overlay.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Presence, splitPresenceProps, } from '@ark-ui/react/presence';

package/dist/components/navbar/navbar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Navbar } from '@saas-ui/core/navbar';

package/dist/components/number-input/number-input.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { NumberInput as ChakraNumberInput } from '@chakra-ui/react/number-input';

package/dist/components/pagination/pagination.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { Pagination as ChakraPagination, usePaginationContext, } from '@chakra-ui/react/pagination';

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/components/pin-input/pin-input.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Group } from '@chakra-ui/react/group';

package/dist/components/popover/popover.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Popover as ChakraPopover } from '@chakra-ui/react/popover';

package/dist/components/radio/radio.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react/radio-group';

package/dist/components/radio-card/radio-card.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, forwardRef } from 'react';
 import { RadioCard } from '@chakra-ui/react/radio-card';

package/dist/components/search-input/search-input.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import { Group, IconButton, Input, InputElement, mergeRefs, useControllableState, } from '@chakra-ui/react';

package/dist/components/sidebar/sidebar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Sidebar, useSidebar } from '@saas-ui/core/sidebar';
 import { ClassNamesProvider, StylesProvider, useRecipeResult, withContext, withItemContext, withItemProvider, } from "./sidebar.context.js";

package/dist/components/skeleton/skeleton.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Circle } from '@chakra-ui/react/circle';

package/dist/components/slider/slider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Slider as ChakraSlider } from '@chakra-ui/react/slider';

package/dist/components/spinner/spinner.js

@@ -1,3 +1,4 @@
+'use client';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Spinner as ChakraSpinner } from '@chakra-ui/react/spinner';

package/dist/components/stat/stat.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Badge } from '@chakra-ui/react/badge';

package/dist/components/status/status.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Status as ChakraStatus } from '@chakra-ui/react/status';

package/dist/components/steps/steps.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react/box';
 import { Steps as ChakraSteps, useStepsContext } from '@chakra-ui/react/steps';

package/dist/components/switch/switch.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Switch as ChakraSwitch } from '@chakra-ui/react/switch';

package/dist/components/tag/tag.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Tag as ChakraTag } from '@chakra-ui/react/tag';

package/dist/components/toggle-tip/toggle-tip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Popover } from "../popover/index.js";

package/dist/components/tooltip/tooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Portal } from '@chakra-ui/react/portal';

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/dist/provider/sui-provider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ChakraProvider } from '@chakra-ui/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.43",
+  "version": "3.0.0-next.47",
   "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/hooks": "3.0.0-next.3"
+    "@saas-ui/chakra-preset": "3.0.0-next.2"
   },
   "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',
-        },
-    },
-});