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

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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Blockquote as ChakraBlockquote } from '@chakra-ui/react';
+import { Blockquote as ChakraBlockquote, type HTMLChakraProps } from '@chakra-ui/react';
 export interface BlockquoteProps extends ChakraBlockquote.RootProps {
     cite?: React.ReactNode;
     citeUrl?: string;
@@ -7,3 +7,4 @@ export interface BlockquoteProps extends ChakraBlockquote.RootProps {
     showDash?: boolean;
 }
 export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLDivElement>>;
+export declare const BlockquoteIcon: (props: HTMLChakraProps<"svg">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/blockquote/blockquote.js

@@ -1,7 +1,11 @@
+'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';
+import { Blockquote as ChakraBlockquote, } from '@chakra-ui/react';
 export const Blockquote = React.forwardRef(function Blockquote(props, ref) {
     const { children, cite, citeUrl, showDash, icon, ...rest } = props;
     return (_jsxs(ChakraBlockquote.Root, { ref: ref, ...rest, children: [icon, _jsx(ChakraBlockquote.Content, { cite: citeUrl, children: children }), cite && (_jsxs(ChakraBlockquote.Caption, { children: [showDash ? _jsx(_Fragment, { children: "\u2014" }) : null, " ", _jsx("cite", { children: cite })] }))] }));
 });
+export const BlockquoteIcon = (props) => {
+    return _jsx(ChakraBlockquote.Icon, { ...props });
+};

package/dist/components/blockquote/index.d.ts

@@ -1 +1 @@
-export { Blockquote, type BlockquoteProps } from './blockquote.tsx';
+export { Blockquote, BlockquoteIcon, type BlockquoteProps, } from './blockquote.tsx';

package/dist/components/blockquote/index.js

@@ -1 +1 @@
-export { Blockquote } from "./blockquote.js";
+export { Blockquote, BlockquoteIcon, } from "./blockquote.js";

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/index.d.ts

@@ -1,2 +1,3 @@
 export { Checkbox } from './checkbox.tsx';
 export type { CheckboxProps } from './checkbox.tsx';
+export { CheckboxGroup, type CheckboxGroupProps, } from '@chakra-ui/react/checkbox';

package/dist/components/checkbox/index.js

@@ -1 +1,2 @@
 export { Checkbox } from "./checkbox.js";
+export { CheckboxGroup, } 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.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/field/field.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const fieldSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "select" | "errorText" | "helperText" | "requiredIndicator", {
+export declare const fieldSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "errorText" | "helperText" | "select" | "requiredIndicator", {
     orientation: {
         vertical: {
             root: {

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/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/index.d.ts

@@ -1 +1,2 @@
 export * as Steps from './steps.tsx';
+export { useStepsContext } from '@chakra-ui/react/steps';

package/dist/components/steps/index.js

@@ -1 +1,2 @@
 export * as Steps from "./steps.js";
+export { useStepsContext } from '@chakra-ui/react/steps';

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

@@ -12,12 +12,12 @@ export { AppShell, type AppShellProps } from './components/app-shell/index.ts';
 export { Avatar, AvatarGroup, type AvatarProps, } from './components/avatar/index.ts';
 export { Badge, BadgePropsProvider, type BadgeProps, } from './components/badge/index.ts';
 export { BackButton, type BackButtonProps, } from './components/back-button/index.ts';
-export { Blockquote, type BlockquoteProps, } from './components/blockquote/index.ts';
+export { Blockquote, BlockquoteIcon, type BlockquoteProps, } from './components/blockquote/index.ts';
 export { Breadcrumb } from './components/breadcrumb/index.ts';
 export { Button, type ButtonProps } from './components/button/index.ts';
 export { ButtonGroup, type ButtonGroupProps, } from './components/button-group/index.ts';
 export { Card } from './components/card/index.ts';
-export { Checkbox, type CheckboxProps } from './components/checkbox/index.ts';
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps, } from './components/checkbox/index.ts';
 export { Checkmark, type CheckmarkProps } from './components/checkmark/index.ts';
 export { CodeBlock } from './components/code-block/index.ts';
 export { Circle } from './components/circle/index.ts';
@@ -137,3 +137,6 @@ 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 { For } from '@chakra-ui/react/for';
+export { LocaleProvider, useLocaleContext, useFilter, } from '@chakra-ui/react/locale';
+export { Theme } from '@chakra-ui/react';

package/dist/index.js

@@ -9,12 +9,12 @@ export { AppShell } from "./components/app-shell/index.js";
 export { Avatar, AvatarGroup, } from "./components/avatar/index.js";
 export { Badge, BadgePropsProvider, } from "./components/badge/index.js";
 export { BackButton, } from "./components/back-button/index.js";
-export { Blockquote, } from "./components/blockquote/index.js";
+export { Blockquote, BlockquoteIcon, } from "./components/blockquote/index.js";
 export { Breadcrumb } from "./components/breadcrumb/index.js";
 export { Button } from "./components/button/index.js";
 export { ButtonGroup, } from "./components/button-group/index.js";
 export { Card } from "./components/card/index.js";
-export { Checkbox } from "./components/checkbox/index.js";
+export { Checkbox, CheckboxGroup, } from "./components/checkbox/index.js";
 export { Checkmark } from "./components/checkmark/index.js";
 export { CodeBlock } from "./components/code-block/index.js";
 export { Circle } from "./components/circle/index.js";
@@ -130,3 +130,6 @@ export { Strong } from "./components/strong/index.js";
 export { VisuallyHidden } from "./components/visually-hidden/index.js";
 export { Wrap } from "./components/wrap/index.js";
 export { Flex } from "./components/flex/index.js";
+export { For } from '@chakra-ui/react/for';
+export { LocaleProvider, useLocaleContext, useFilter, } from '@chakra-ui/react/locale';
+export { Theme } from '@chakra-ui/react';

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/dist/styled-system/create-slot-recipe-context.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { chakra, createContext, mergeProps, useSlotRecipe, } from '@chakra-ui/react';
 import { cx } from '@saas-ui/core/utils';
 import { EMPTY_SLOT_STYLES } from "./empty.js";
@@ -30,8 +30,8 @@ export const createSlotRecipeContext = (options) => {
             recipe: restProps.recipe || recipeConfig,
         });
         // @ts-ignore
-        const [variantProps, otherProps] = slotRecipe.splitVariantProps(restProps);
-        const styles = unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps);
+        const [variantProps, otherProps] = useMemo(() => slotRecipe.splitVariantProps(restProps), [restProps, slotRecipe]);
+        const styles = useMemo(() => (unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps)), [unstyled, variantProps, slotRecipe]);
         return {
             styles: styles,
             classNames: slotRecipe.classNameMap,
@@ -41,7 +41,8 @@ export const createSlotRecipeContext = (options) => {
     function withRootProvider(Component, options = {}) {
         const { defaultProps } = options;
         const StyledComponent = (inProps) => {
-            const props = mergeProps(defaultProps, usePropsContext(), inProps);
+            const propsContext = usePropsContext();
+            const props = useMemo(() => mergeProps(defaultProps, propsContext, inProps), [propsContext, inProps]);
             const { styles, classNames, props: rootProps } = useRecipeResult(props);
             return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(Component, { ...rootProps }) }) }));
         };
@@ -53,10 +54,12 @@ export const createSlotRecipeContext = (options) => {
         const { defaultProps, ...restOptions } = options ?? {};
         const SuperComponent = chakra(Component, {}, restOptions);
         const StyledComponent = forwardRef((inProps, ref) => {
-            const props = mergeProps(defaultProps ?? {}, usePropsContext(), inProps);
+            const propsContext = usePropsContext();
+            const props = useMemo(() => mergeProps(defaultProps ?? {}, propsContext, inProps), [propsContext, inProps]);
             const { styles, props: rootProps, classNames } = useRecipeResult(props);
             const className = classNames[slot];
             const element = (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(SuperComponent, { ref: ref, ...rootProps, css: [styles[slot], props.css], className: cx(props.className, className) }) }) }));
+            // @ts-expect-error
             return options?.wrapElement?.(element, props) ?? element;
         });
         // @ts-expect-error

package/dist/theme/slot-recipes.d.ts

@@ -1335,7 +1335,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    field: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "select" | "errorText" | "helperText" | "requiredIndicator", {
+    field: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "errorText" | "helperText" | "select" | "requiredIndicator", {
         orientation: {
             vertical: {
                 root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.42",
+  "version": "3.0.0-next.44",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -60,26 +60,26 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.20.0",
+    "@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"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.25.0",
+    "@chakra-ui/react": "^3.27.0",
     "@emotion/react": "^11",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-icons": "^5.5.0",
     "rimraf": "^6.0.1",
-    "tsup": "^8.4.0",
-    "typescript": "^5.8.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4"
+    "tsup": "^8.5.0",
+    "typescript": "5.9.3"
   },
   "scripts": {
     "clean": "rimraf --no-glob ./dist",