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

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

@@ -0,0 +1,29 @@
+export declare const fieldSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "select" | "errorText" | "helperText" | "requiredIndicator", {
+    orientation: {
+        vertical: {
+            root: {
+                flexDirection: "column";
+                alignItems: "flex-start";
+            };
+        };
+        horizontal: {
+            root: {
+                display: "grid";
+                gridTemplateColumns: "var(--field-label-width, 8rem) 1fr";
+                alignItems: "center";
+                '&:has(textarea)': {
+                    alignItems: "flex-start";
+                    '& label': {
+                        pt: number;
+                    };
+                };
+            };
+            helperText: {
+                gridColumn: number;
+            };
+            errorText: {
+                gridColumn: number;
+            };
+        };
+    };
+}>;

package/dist/components/field/field.recipe.js

@@ -0,0 +1,74 @@
+import { fieldAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const fieldSlotRecipe = defineSlotRecipe({
+    className: 'chakra-field',
+    slots: fieldAnatomy.keys(),
+    base: {
+        requiredIndicator: {
+            color: 'fg.error',
+            lineHeight: '1',
+        },
+        root: {
+            display: 'flex',
+            width: '100%',
+            position: 'relative',
+            gap: '1.5',
+        },
+        label: {
+            display: 'flex',
+            alignItems: 'center',
+            textAlign: 'start',
+            textStyle: 'sm',
+            fontWeight: 'medium',
+            gap: '1',
+            userSelect: 'none',
+            _disabled: {
+                opacity: '0.5',
+            },
+        },
+        errorText: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            fontWeight: 'medium',
+            gap: '1',
+            color: 'fg.error',
+            textStyle: 'xs',
+        },
+        helperText: {
+            color: 'fg.muted',
+            textStyle: 'xs',
+        },
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                root: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                },
+            },
+            horizontal: {
+                root: {
+                    display: 'grid',
+                    gridTemplateColumns: 'var(--field-label-width, 8rem) 1fr',
+                    alignItems: 'center',
+                    '&:has(textarea)': {
+                        alignItems: 'flex-start',
+                        '& label': {
+                            pt: 1.5,
+                        },
+                    },
+                },
+                helperText: {
+                    gridColumn: 2,
+                },
+                errorText: {
+                    gridColumn: 2,
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});

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

@@ -0,0 +1,37 @@
+export declare const fieldsetSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "errorText" | "helperText" | "legend", {
+    size: {
+        sm: {
+            root: {
+                spaceY: "2";
+            };
+            content: {
+                gap: "1.5";
+            };
+            legend: {
+                textStyle: "sm";
+            };
+        };
+        md: {
+            root: {
+                spaceY: "4";
+            };
+            content: {
+                gap: "4";
+            };
+            legend: {
+                textStyle: "sm";
+            };
+        };
+        lg: {
+            root: {
+                spaceY: "6";
+            };
+            content: {
+                gap: "4";
+            };
+            legend: {
+                textStyle: "md";
+            };
+        };
+    };
+}>;

package/dist/components/fieldset/fieldset.recipe.js

@@ -0,0 +1,59 @@
+import { fieldsetAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const fieldsetSlotRecipe = defineSlotRecipe({
+    className: 'fieldset',
+    slots: [...fieldsetAnatomy.keys(), 'content'],
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'full',
+        },
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'full',
+        },
+        legend: {
+            color: 'fg',
+            fontWeight: 'medium',
+            _disabled: {
+                opacity: '0.5',
+            },
+        },
+        helperText: {
+            color: 'fg.muted',
+            textStyle: 'sm',
+        },
+        errorText: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            color: 'fg.error',
+            gap: '2',
+            fontWeight: 'medium',
+            textStyle: 'sm',
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                root: { spaceY: '2' },
+                content: { gap: '1.5' },
+                legend: { textStyle: 'sm' },
+            },
+            md: {
+                root: { spaceY: '4' },
+                content: { gap: '4' },
+                legend: { textStyle: 'sm' },
+            },
+            lg: {
+                root: { spaceY: '6' },
+                content: { gap: '4' },
+                legend: { textStyle: 'md' },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Fieldset, useFieldsetContext } from '@chakra-ui/react/fieldset';

package/dist/components/fieldset/index.js

@@ -0,0 +1 @@
+export { Fieldset, useFieldsetContext } from '@chakra-ui/react/fieldset';

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { FileUpload as ChakraFileUpload } from '@chakra-ui/react/file-upload';
+import { type RecipeProps } from '@chakra-ui/react/styled-system';
+import { type ButtonProps } from '../button/index.ts';
+export interface RootProps extends ChakraFileUpload.RootProps {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLInputElement>>;
+export interface DropzoneProps extends ChakraFileUpload.DropzoneProps {
+}
+export declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLInputElement>>;
+interface VisibilityProps {
+    showSize?: boolean;
+    clearable?: boolean;
+}
+interface ListProps extends VisibilityProps, ChakraFileUpload.ItemGroupProps {
+    files?: File[];
+}
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+type Assign<T, U> = Omit<T, keyof U> & U;
+export interface InputProps extends Assign<ButtonProps, RecipeProps<'input'>> {
+    placeholder?: React.ReactNode;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Label: React.ForwardRefExoticComponent<ChakraFileUpload.LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export declare const ClearTrigger: React.ForwardRefExoticComponent<import("@chakra-ui/react").FileUploadClearTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Trigger: React.ForwardRefExoticComponent<ChakraFileUpload.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Context: (props: import("@ark-ui/react").FileUploadContextProps) => import("react").ReactNode;
+export {};

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Span } from '@chakra-ui/react';
+import { FileUpload as ChakraFileUpload, useFileUploadContext, } from '@chakra-ui/react/file-upload';
+import { useRecipe } from '@chakra-ui/react/styled-system';
+import { Button } from "../button/index.js";
+import { CloseButton } from "../close-button/index.js";
+export const Root = React.forwardRef(function FileUploadRoot(props, ref) {
+    const { children, inputProps, ...rest } = props;
+    return (_jsxs(ChakraFileUpload.Root, { ...rest, children: [_jsx(ChakraFileUpload.HiddenInput, { ref: ref, ...inputProps }), children] }));
+});
+export const Dropzone = React.forwardRef(function FileUploadDropzone(props, ref) {
+    const { children, ...rest } = props;
+    return (_jsx(ChakraFileUpload.Dropzone, { ref: ref, ...rest, children: _jsx(ChakraFileUpload.DropzoneContent, { children: children }) }));
+});
+const Item = React.forwardRef(function FileUploadItem(props, ref) {
+    const { file, showSize, icon, clearable } = props;
+    return (_jsxs(ChakraFileUpload.Item, { file: file, ref: ref, children: [_jsx(ChakraFileUpload.ItemPreview, { children: icon }), showSize ? (_jsxs(ChakraFileUpload.ItemContent, { children: [_jsx(ChakraFileUpload.ItemName, {}), _jsx(ChakraFileUpload.ItemSizeText, {})] })) : (_jsx(ChakraFileUpload.ItemName, { flex: "1" })), clearable && (_jsx(ChakraFileUpload.ItemDeleteTrigger, { asChild: true, children: _jsx(CloseButton, { size: "xs" }) }))] }));
+});
+export const List = React.forwardRef(function FileUploadList(props, ref) {
+    const { showSize, clearable, files, ...rest } = props;
+    const fileUpload = useFileUploadContext();
+    const acceptedFiles = files ?? fileUpload.acceptedFiles;
+    if (acceptedFiles.length === 0)
+        return null;
+    return (_jsx(ChakraFileUpload.ItemGroup, { ref: ref, ...rest, children: acceptedFiles.map((file) => (_jsx(Item, { file: file, showSize: showSize, clearable: clearable }, file.name))) }));
+});
+export const Input = React.forwardRef(function FileInput(props, ref) {
+    const inputRecipe = useRecipe({ key: 'input' });
+    const [recipeProps, restProps] = inputRecipe.splitVariantProps(props);
+    const { placeholder = 'Select file(s)', ...rest } = restProps;
+    return (_jsx(ChakraFileUpload.Trigger, { asChild: true, children: _jsx(Button, { unstyled: true, py: "0", ref: ref, ...rest, css: [inputRecipe(recipeProps), props.css], children: _jsx(ChakraFileUpload.Context, { children: ({ acceptedFiles }) => {
+                    if (acceptedFiles.length === 1) {
+                        return _jsx("span", { children: acceptedFiles[0].name });
+                    }
+                    if (acceptedFiles.length > 1) {
+                        return _jsxs("span", { children: [acceptedFiles.length, " files"] });
+                    }
+                    return _jsx(Span, { color: "fg.subtle", children: placeholder });
+                } }) }) }));
+});
+export const Label = ChakraFileUpload.Label;
+export const ClearTrigger = ChakraFileUpload.ClearTrigger;
+export const Trigger = ChakraFileUpload.Trigger;
+export const Context = ChakraFileUpload.Context;

package/dist/components/file-upload/file-upload.recipe.d.ts

@@ -0,0 +1 @@
+export declare const fileUploadSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText", import("@chakra-ui/react").SlotRecipeVariantRecord<"label" | "root" | "item" | "itemContent" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText">>;

package/dist/components/file-upload/file-upload.recipe.js

@@ -0,0 +1,90 @@
+import { fileUploadAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const fileUploadSlotRecipe = defineSlotRecipe({
+    className: 'chakra-file-upload',
+    slots: fileUploadAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4',
+            width: '100%',
+            alignItems: 'flex-start',
+        },
+        label: {
+            fontWeight: 'medium',
+            textStyle: 'sm',
+        },
+        dropzone: {
+            background: 'bg',
+            borderRadius: 'panel.md',
+            borderWidth: '1px',
+            borderStyle: 'dashed',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: '4',
+            justifyContent: 'center',
+            p: '4',
+            transition: 'backgrounds',
+            focusVisibleRing: 'outside',
+            _dragging: {
+                bg: 'colorPalette.subtle',
+                borderStyle: 'solid',
+                borderColor: 'colorPalette.solid',
+            },
+        },
+        dropzoneContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            gap: '4',
+            textStyle: 'sm',
+        },
+        item: {
+            textStyle: 'sm',
+            animationName: 'fade-in',
+            animationDuration: 'moderate',
+            background: 'bg',
+            borderRadius: 'panel.md',
+            borderWidth: '1px',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '3',
+            px: '4',
+            py: '2',
+        },
+        itemGroup: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '3',
+        },
+        itemName: {
+            color: 'fg',
+            fontWeight: 'medium',
+            lineClamp: '1',
+        },
+        itemContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5',
+            flex: '1',
+        },
+        itemSizeText: {
+            color: 'fg.muted',
+            textStyle: 'xs',
+        },
+        itemDeleteTrigger: {
+            alignSelf: 'flex-start',
+        },
+        itemPreviewImage: {
+            width: '10',
+            height: '10',
+            objectFit: 'scale-down',
+        },
+    },
+    defaultVariants: {},
+});

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export * as FileUpload from './file-upload';
+export { useFileUploadContext } from '@chakra-ui/react/file-upload';

package/dist/components/file-upload/index.js

@@ -0,0 +1,2 @@
+export * as FileUpload from './file-upload';
+export { useFileUploadContext } from '@chakra-ui/react/file-upload';

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

@@ -0,0 +1 @@
+export { Flex, type FlexProps, } from '@chakra-ui/react/flex';

package/dist/components/flex/index.js

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

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

@@ -0,0 +1 @@
+export { Float, type FloatProps, } from '@chakra-ui/react/float';

package/dist/components/float/index.js

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

package/dist/components/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { FocusTrap, type FocusTrapProps } from '@chakra-ui/react/focus-trap';

package/dist/components/focus-trap/index.js

@@ -0,0 +1 @@
+export { FocusTrap } from '@chakra-ui/react/focus-trap';

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

@@ -0,0 +1 @@
+export { For, type ForProps, } from '@chakra-ui/react/for';

package/dist/components/for/index.js

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

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

@@ -0,0 +1 @@
+export { FormatByte, type FormatByteProps, FormatNumber, type FormatNumberProps, } from '@chakra-ui/react/format';

package/dist/components/format/index.js

@@ -0,0 +1 @@
+export { FormatByte, FormatNumber, } from '@chakra-ui/react/format';

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

@@ -0,0 +1 @@
+export { Grid, type GridProps, GridItem, type GridItemProps, SimpleGrid, type SimpleGridProps, } from '@chakra-ui/react/grid';

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+export { Grid, GridItem, SimpleGrid, } from '@chakra-ui/react/grid';

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

@@ -0,0 +1 @@
+export declare const 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>>, 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>>, useGridListStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>;

package/dist/components/grid-list/grid-list.context.js

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

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

@@ -0,0 +1,17 @@
+import type { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+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>>;
+interface GridListItemProps extends HTMLChakraProps<'div'> {
+}
+declare const GridListItem: import("react").ForwardRefExoticComponent<GridListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+}
+declare const GridListHeader: import("react").ForwardRefExoticComponent<GridListHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+interface GridListCellProps extends HTMLChakraProps<'div'> {
+}
+declare const GridListCell: import("react").ForwardRefExoticComponent<GridListCellProps & import("react").RefAttributes<HTMLDivElement>>;
+export { GridListRoot as Root, GridListItem as Item, GridListHeader as Header, GridListCell as Cell, };
+export type { GridListRootProps as RootProps, GridListHeaderProps as HeaderProps, GridListItemProps as ItemProps, GridListCellProps as CellProps, };

package/dist/components/grid-list/grid-list.js

@@ -0,0 +1,7 @@
+import { GridList } from '@saas-ui/core/grid-list';
+import { withContext, withProvider } from "./grid-list.context.js";
+const GridListRoot = withProvider(GridList.Root, 'root');
+const GridListItem = withContext(GridList.Item, 'item');
+const GridListHeader = withContext(GridList.Header, 'header');
+const GridListCell = withContext(GridList.Cell, 'cell');
+export { GridListRoot as Root, GridListItem as Item, GridListHeader as Header, GridListCell as Cell, };

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

@@ -0,0 +1,60 @@
+import { type RecipeVariantProps } from '@chakra-ui/react/styled-system';
+export declare const gridListSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
+    interactive: {
+        true: {
+            item: {
+                cursor: "button";
+                transitionProperty: "bg";
+                transitionDuration: "fast";
+                _hover: {
+                    bg: "bg.subtle";
+                };
+                _active: {
+                    bg: "bg.subtle";
+                };
+            };
+        };
+    };
+    variant: {
+        simple: {};
+        rounded: {
+            item: {
+                borderRadius: "md";
+                mb: number;
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                textStyle: "sm";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+        md: {
+            root: {
+                textStyle: "md";
+                py: number;
+            };
+            item: {
+                py: number;
+                px: number;
+                gap: number;
+            };
+            header: {
+                py: number;
+                px: number;
+            };
+        };
+    };
+}>;
+export type GridListVariantProps = RecipeVariantProps<typeof gridListSlotRecipe>;

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

@@ -0,0 +1,132 @@
+import { defineSlotRecipe, } from '@chakra-ui/react/styled-system';
+export const gridListSlotRecipe = defineSlotRecipe({
+    className: 'sui-grid-list',
+    slots: ['root', 'item', 'header', 'cell'],
+    base: {
+        root: {
+            position: 'relative',
+        },
+        item: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flex: 1,
+            userSelect: 'none',
+            borderRadius: 'inherit',
+            outline: 'none',
+            _focusVisible: {
+                boxShadow: 'outline',
+            },
+            _disabled: {
+                cursor: 'disabled',
+                opacity: 0.5,
+                _hover: {
+                    bg: 'transparent',
+                    _dark: {
+                        bg: 'transparent',
+                    },
+                },
+                _active: {
+                    bg: 'transparent',
+                    _dark: {
+                        bg: 'transparent',
+                    },
+                },
+            },
+        },
+        header: {
+            display: 'flex',
+            flexDirection: 'row',
+            position: 'sticky',
+            fontSize: 'md',
+            fontWeight: 'semibold',
+            color: 'fg.muted',
+        },
+        cell: {
+            flexShrink: 0,
+        },
+    },
+    variants: {
+        interactive: {
+            true: {
+                item: {
+                    cursor: 'button',
+                    transitionProperty: 'bg',
+                    transitionDuration: 'fast',
+                    _hover: {
+                        bg: 'bg.subtle',
+                    },
+                    _active: {
+                        bg: 'bg.subtle',
+                    },
+                },
+            },
+        },
+        variant: {
+            simple: {},
+            rounded: {
+                item: {
+                    borderRadius: 'md',
+                    mb: 0.5,
+                },
+            },
+        },
+        size: {
+            sm: {
+                root: {
+                    textStyle: 'sm',
+                    py: 0.5,
+                },
+                item: {
+                    py: 1,
+                    px: 2,
+                    gap: 1,
+                },
+                header: {
+                    py: 1,
+                    px: 2,
+                },
+            },
+            md: {
+                root: {
+                    textStyle: 'md',
+                    py: 1,
+                },
+                item: {
+                    py: 2,
+                    px: 3,
+                    gap: 2,
+                },
+                header: {
+                    py: 2,
+                    px: 3,
+                },
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'rounded',
+            size: 'sm',
+            css: {
+                root: {
+                    p: 1,
+                },
+            },
+        },
+        {
+            variant: 'rounded',
+            size: 'md',
+            css: {
+                root: {
+                    p: 2,
+                },
+            },
+        },
+    ],
+    defaultVariants: {
+        variant: 'simple',
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export * as GridList from './grid-list.tsx';

package/dist/components/grid-list/index.js

@@ -0,0 +1 @@
+export * as GridList from "./grid-list.js";