@saas-ui/react 3.0.0-next.2 → 3.0.0-next.21

package/dist/components/input/input-addon.recipe.d.ts

@@ -0,0 +1,56 @@
+export declare const inputAddonRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            borderRadius: "control.sm";
+            textStyle: "xs";
+            px: "2";
+            '--input-height': "sizes.6";
+        };
+        sm: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "2.5";
+            '--input-height': "sizes.7";
+        };
+        md: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "3";
+            '--input-height': "sizes.8";
+        };
+        lg: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "4.5";
+            '--input-height': "sizes.10";
+        };
+        xl: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "6";
+            '--input-height': "sizes.12";
+        };
+    };
+    variant: {
+        outline: {
+            border: "1px solid";
+            borderColor: "border";
+            bg: "bg.muted";
+        };
+        subtle: {
+            border: "2px solid";
+            borderColor: "transparent";
+            bg: {
+                _light: "gray.100";
+                _dark: "whiteAlpha.50";
+            };
+        };
+        flushed: {
+            borderBottom: "1px solid";
+            borderColor: "inherit";
+            borderRadius: "0";
+            px: "0";
+            bg: "transparent";
+        };
+    };
+}>;

package/dist/components/input/input-addon.recipe.js

@@ -0,0 +1,36 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+import { inputRecipe } from './input.recipe';
+export const inputAddonRecipe = defineRecipe({
+    className: 'chakra-input-addon',
+    base: {
+        flex: '0 0 auto',
+        width: 'auto',
+        height: 'var(--input-height)',
+        display: 'flex',
+        alignItems: 'center',
+        whiteSpace: 'nowrap',
+    },
+    variants: {
+        size: inputRecipe.variants.size,
+        variant: {
+            outline: {
+                border: '1px solid',
+                borderColor: 'border',
+                bg: 'bg.muted',
+            },
+            subtle: {
+                border: '2px solid',
+                borderColor: 'transparent',
+                bg: { _light: 'gray.100', _dark: 'whiteAlpha.50' },
+            },
+            flushed: {
+                borderBottom: '1px solid',
+                borderColor: 'inherit',
+                borderRadius: '0',
+                px: '0',
+                bg: 'transparent',
+            },
+        },
+    },
+    defaultVariants: inputRecipe.defaultVariants,
+});

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

@@ -0,0 +1,66 @@
+export declare const inputRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            borderRadius: "control.sm";
+            textStyle: "xs";
+            px: "2";
+            '--input-height': "sizes.6";
+        };
+        sm: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "2.5";
+            '--input-height': "sizes.7";
+        };
+        md: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "3";
+            '--input-height': "sizes.8";
+        };
+        lg: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "4.5";
+            '--input-height': "sizes.10";
+        };
+        xl: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "6";
+            '--input-height': "sizes.12";
+        };
+    };
+    variant: {
+        outline: {
+            bg: "transparent";
+            borderWidth: "1px";
+            borderColor: "border";
+            focusVisibleRing: "inside";
+            focusRingWidth: "0";
+            _hover: {
+                borderColor: "border.emphasized";
+                _focusVisible: {
+                    borderColor: "var(--focus-ring-color)";
+                };
+            };
+        };
+        subtle: {
+            borderWidth: "1px";
+            borderColor: "transparent";
+            bg: "bg.muted";
+            focusVisibleRing: "inside";
+        };
+        flushed: {
+            bg: "transparent";
+            borderBottomWidth: "1px";
+            borderBottomColor: "border";
+            borderRadius: "0";
+            px: "0";
+            _focusVisible: {
+                borderColor: "var(--focus-color)";
+                boxShadow: "0px 1px 0px 0px var(--focus-color)";
+            };
+        };
+    };
+}>;

package/dist/components/input/input.recipe.js

@@ -0,0 +1,93 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const inputRecipe = defineRecipe({
+    className: 'chakra-input',
+    base: {
+        width: '100%',
+        minWidth: '0',
+        outline: '0',
+        position: 'relative',
+        appearance: 'none',
+        textAlign: 'start',
+        _disabled: {
+            layerStyle: 'disabled',
+        },
+        height: 'var(--input-height)',
+        minW: 'var(--input-height)',
+        '--focus-color': 'colors.colorPalette.focusRing',
+        '--error-color': 'colors.border.error',
+        _invalid: {
+            focusRingColor: 'var(--error-color)',
+            borderColor: 'var(--error-color)',
+        },
+    },
+    variants: {
+        size: {
+            xs: {
+                borderRadius: 'control.sm',
+                textStyle: 'xs',
+                px: '2',
+                '--input-height': 'sizes.6',
+            },
+            sm: {
+                borderRadius: 'control.md',
+                textStyle: 'sm',
+                px: '2.5',
+                '--input-height': 'sizes.7',
+            },
+            md: {
+                borderRadius: 'control.md',
+                textStyle: 'sm',
+                px: '3',
+                '--input-height': 'sizes.8',
+            },
+            lg: {
+                borderRadius: 'control.lg',
+                textStyle: 'md',
+                px: '4.5',
+                '--input-height': 'sizes.10',
+            },
+            xl: {
+                borderRadius: 'control.lg',
+                textStyle: 'md',
+                px: '6',
+                '--input-height': 'sizes.12',
+            },
+        },
+        variant: {
+            outline: {
+                bg: 'transparent',
+                borderWidth: '1px',
+                borderColor: 'border',
+                focusVisibleRing: 'inside',
+                focusRingWidth: '0',
+                _hover: {
+                    borderColor: 'border.emphasized',
+                    _focusVisible: {
+                        borderColor: 'var(--focus-ring-color)',
+                    },
+                },
+            },
+            subtle: {
+                borderWidth: '1px',
+                borderColor: 'transparent',
+                bg: 'bg.muted',
+                focusVisibleRing: 'inside',
+            },
+            flushed: {
+                bg: 'transparent',
+                borderBottomWidth: '1px',
+                borderBottomColor: 'border',
+                borderRadius: '0',
+                px: '0',
+                _focusVisible: {
+                    borderColor: 'var(--focus-color)',
+                    boxShadow: '0px 1px 0px 0px var(--focus-color)',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});

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

@@ -0,0 +1 @@
+export { Kbd, type KbdProps } from '@chakra-ui/react/kbd';

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd } from '@chakra-ui/react/kbd';

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

@@ -0,0 +1,36 @@
+export declare const kbdRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        raised: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+            borderWidth: "1px";
+            borderBottomWidth: "2px";
+            borderColor: "colorPalette.muted";
+        };
+        outline: {
+            borderWidth: "1px";
+            color: "colorPalette.fg";
+        };
+        subtle: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+        };
+        plain: {
+            color: "colorPalette.fg";
+        };
+    };
+    size: {
+        sm: {
+            textStyle: "xs";
+            height: "4.5";
+        };
+        md: {
+            textStyle: "xs";
+            height: "5";
+        };
+        lg: {
+            textStyle: "sm";
+            height: "6";
+        };
+    };
+}>;

package/dist/components/kbd/kbd.recipe.js

@@ -0,0 +1,56 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const kbdRecipe = defineRecipe({
+    className: 'chakra-kbd',
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        fontWeight: 'medium',
+        fontFamily: 'body',
+        flexShrink: '0',
+        whiteSpace: 'nowrap',
+        wordSpacing: '-0.5em',
+        userSelect: 'none',
+        px: '1',
+        borderRadius: 'l2',
+    },
+    variants: {
+        variant: {
+            raised: {
+                bg: 'colorPalette.subtle',
+                color: 'colorPalette.fg',
+                borderWidth: '1px',
+                borderBottomWidth: '2px',
+                borderColor: 'colorPalette.muted',
+            },
+            outline: {
+                borderWidth: '1px',
+                color: 'colorPalette.fg',
+            },
+            subtle: {
+                bg: 'colorPalette.subtle',
+                color: 'colorPalette.fg',
+            },
+            plain: {
+                color: 'colorPalette.fg',
+            },
+        },
+        size: {
+            sm: {
+                textStyle: 'xs',
+                height: '4.5',
+            },
+            md: {
+                textStyle: 'xs',
+                height: '5',
+            },
+            lg: {
+                textStyle: 'sm',
+                height: '6',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'subtle',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export type { LinkProps } from './link';

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { Link } from './link';

package/dist/components/link/link.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type LinkProps } from '@chakra-ui/react/link';
+export type { LinkProps };
+/**
+ * Chakra UI `Link` component wrapped in a router specific link component.
+ * Falls back to a plain `Link` if no Saas UI context is available or no `linkComponent` is configured
+ * The router link component can be configured in `SaasProvider`.
+ * @see https://saas-ui.dev/docs/core/getting-started
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/link/link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Link as ChakraLink } from '@chakra-ui/react/link';
+import { useLink } from "../../provider/use-link.js";
+/**
+ * Chakra UI `Link` component wrapped in a router specific link component.
+ * Falls back to a plain `Link` if no Saas UI context is available or no `linkComponent` is configured
+ * The router link component can be configured in `SaasProvider`.
+ * @see https://saas-ui.dev/docs/core/getting-started
+ */
+export const Link = React.forwardRef((props, ref) => {
+    const LinkComponent = useLink();
+    return (_jsx(ChakraLink, { asChild: true, children: _jsx(LinkComponent, { ref: ref, ...props }) }));
+});
+Link.displayName = 'Link';

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

@@ -0,0 +1,18 @@
+export declare const linkRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        underline: {
+            color: "colorPalette.fg";
+            textDecoration: "underline";
+            textUnderlineOffset: "3px";
+            textDecorationColor: "currentColor/20";
+        };
+        plain: {
+            color: "colorPalette.fg";
+            _hover: {
+                textDecoration: "underline";
+                textUnderlineOffset: "3px";
+                textDecorationColor: "currentColor/20";
+            };
+        };
+    };
+}>;

package/dist/components/link/link.recipe.js

@@ -0,0 +1,34 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const linkRecipe = defineRecipe({
+    className: 'chakra-link',
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        outline: 'none',
+        gap: '1.5',
+        cursor: 'pointer',
+        borderRadius: 'l1',
+        focusRing: 'outside',
+    },
+    variants: {
+        variant: {
+            underline: {
+                color: 'colorPalette.fg',
+                textDecoration: 'underline',
+                textUnderlineOffset: '3px',
+                textDecorationColor: 'currentColor/20',
+            },
+            plain: {
+                color: 'colorPalette.fg',
+                _hover: {
+                    textDecoration: 'underline',
+                    textUnderlineOffset: '3px',
+                    textDecorationColor: 'currentColor/20',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'plain',
+    },
+});

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

@@ -0,0 +1,38 @@
+export declare const listSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root" | "item", {
+    variant: {
+        marker: {
+            root: {
+                listStyle: "revert";
+                listStylePosition: "inside";
+            };
+            item: {
+                _marker: {
+                    color: "fg.subtle";
+                };
+            };
+        };
+        plain: {
+            item: {
+                alignItems: "flex-start";
+                display: "inline-flex";
+            };
+        };
+    };
+    align: {
+        center: {
+            item: {
+                alignItems: "center";
+            };
+        };
+        start: {
+            item: {
+                alignItems: "flex-start";
+            };
+        };
+        end: {
+            item: {
+                alignItems: "flex-end";
+            };
+        };
+    };
+}>;

package/dist/components/list/list.recipe.js

@@ -0,0 +1,62 @@
+import { listAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const listSlotRecipe = defineSlotRecipe({
+    className: 'chakra-list',
+    slots: listAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--list-gap)',
+            '& :where(ul, ol)': {
+                marginTop: 'var(--list-gap)',
+            },
+        },
+        item: {
+            whiteSpace: 'normal',
+            display: 'list-item',
+        },
+        indicator: {
+            marginEnd: '2',
+            minHeight: '1lh',
+            flexShrink: 0,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+        },
+    },
+    variants: {
+        variant: {
+            marker: {
+                root: {
+                    listStyle: 'revert',
+                    listStylePosition: 'inside',
+                },
+                item: {
+                    _marker: {
+                        color: 'fg.subtle',
+                    },
+                },
+            },
+            plain: {
+                item: {
+                    alignItems: 'flex-start',
+                    display: 'inline-flex',
+                },
+            },
+        },
+        align: {
+            center: {
+                item: { alignItems: 'center' },
+            },
+            start: {
+                item: { alignItems: 'flex-start' },
+            },
+            end: {
+                item: { alignItems: 'flex-end' },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'marker',
+    },
+});

package/dist/components/loading-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export * as LoadingOverlay from './loading-overlay.tsx';
+export { useLoadingOverlayStyles } from './loading-overlay.context.ts';

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

@@ -0,0 +1,2 @@
+export * as LoadingOverlay from "./loading-overlay.js";
+export { useLoadingOverlayStyles } from "./loading-overlay.context.js";

package/dist/components/loading-overlay/loading-overlay.context.d.ts

@@ -0,0 +1 @@
+export declare const useLoadingOverlayStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>;

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

@@ -0,0 +1,4 @@
+import { createSlotRecipeContext } from '@chakra-ui/react';
+export const { useStyles: useLoadingOverlayStyles, withContext, withProvider, } = createSlotRecipeContext({
+    key: 'suiLoadingOverlay',
+});

package/dist/components/loading-overlay/loading-overlay.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type PresenceBaseProps } from '@ark-ui/react/presence';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+interface LoadingOverlayProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiLoadingOverlay'>, PresenceBaseProps {
+    /**
+     * Show or hide the LoadingOverlay.
+     * @default true
+     */
+    loading?: boolean;
+}
+declare const LoadingOverlayRoot: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const LoadingOverlaySpinner: React.ForwardRefExoticComponent<import("../spinner/spinner.tsx").SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+interface LoadingTextProps extends HTMLChakraProps<'p'> {
+}
+declare const LoadingOverlayText: React.ForwardRefExoticComponent<LoadingTextProps & React.RefAttributes<HTMLParagraphElement>>;
+export { LoadingOverlayRoot as Root, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text, };
+export type { LoadingOverlayProps as RootProps, LoadingTextProps as TextProps };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Presence, splitPresenceProps, } from '@ark-ui/react/presence';
+import { chakra } from '@chakra-ui/react';
+import { Spinner } from "../spinner/index.js";
+import { withContext, withProvider } from "./loading-overlay.context.js";
+const LoadingOverlay = forwardRef((props, ref) => {
+    const { children, loading = true, ...rest } = props;
+    const [presenceProps, rootProps] = splitPresenceProps(rest);
+    return (_jsx(Presence, { present: loading, ...presenceProps, asChild: true, children: _jsx(chakra.div, { ref: ref, ...rootProps, children: children }) }));
+});
+const LoadingOverlayRoot = withProvider(LoadingOverlay, 'root');
+LoadingOverlayRoot.displayName = 'LoadingOverlay';
+const LoadingOverlaySpinner = Spinner;
+const LoadingOverlayText = withContext('p', 'text');
+export { LoadingOverlayRoot as Root, LoadingOverlaySpinner as Spinner, LoadingOverlayText as Text, };

package/dist/components/loading-overlay/loading-overlay.recipe.d.ts

@@ -0,0 +1,35 @@
+export declare const loadingOverlaySlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"text" | "root", {
+    variant: {
+        fill: {
+            root: {
+                flex: number;
+                height: "100%";
+                bg: {
+                    base: "whiteAlpha.400";
+                    _dark: "blackAlpha.400";
+                };
+            };
+        };
+        fullscreen: {
+            root: {
+                position: "fixed";
+                inset: number;
+                zIndex: "modal";
+                bg: {
+                    base: "white";
+                    _dark: "gray.800";
+                };
+            };
+        };
+        overlay: {
+            root: {
+                position: "absolute";
+                inset: number;
+                bg: {
+                    base: "whiteAlpha.300";
+                    _dark: "blackAlpha.300";
+                };
+            };
+        };
+    };
+}>;