@saas-ui/react 3.0.0-next.3 → 3.0.0-next.30

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

@@ -0,0 +1,131 @@
+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',
+            fontWeight: 'medium',
+            color: 'fg.subtle',
+        },
+        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: 0.5,
+                    px: 2,
+                },
+            },
+            md: {
+                root: {
+                    textStyle: 'md',
+                    py: 1,
+                },
+                item: {
+                    py: 2,
+                    px: 3,
+                    gap: 2,
+                },
+                header: {
+                    py: 1,
+                    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

@@ -1 +1 @@
-export { GridList_alias_1 as GridList } from '../../_tsup-dts-rollup.js';
+export * as GridList from './grid-list.tsx';

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

@@ -1,8 +1 @@
-'use client'
-import {
-  grid_list_exports
-} from "../../chunk-ZUT5GZTD.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  grid_list_exports as GridList
-};
+export * as GridList from "./grid-list.js";

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

@@ -1,2 +1 @@
-export { Group_alias_1 as Group } from '../../_tsup-dts-rollup.js';
-export { GroupProps } from '../../_tsup-dts-rollup.js';
+export { Group, type GroupProps, } from '@chakra-ui/react/group';

package/dist/components/group/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Group
-} from "../../chunk-3CKGT42F.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Group
-};
+export { Group, } from '@chakra-ui/react/group';

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

@@ -0,0 +1,37 @@
+export declare const headingRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            textStyle: "xs";
+        };
+        sm: {
+            textStyle: "sm";
+        };
+        md: {
+            textStyle: "md";
+        };
+        lg: {
+            textStyle: "lg";
+        };
+        xl: {
+            textStyle: "xl";
+        };
+        '2xl': {
+            textStyle: "2xl";
+        };
+        '3xl': {
+            textStyle: "3xl";
+        };
+        '4xl': {
+            textStyle: "4xl";
+        };
+        '5xl': {
+            textStyle: "5xl";
+        };
+        '6xl': {
+            textStyle: "6xl";
+        };
+        '7xl': {
+            textStyle: "7xl";
+        };
+    };
+}>;

package/dist/components/heading/heading.recipe.js

@@ -0,0 +1,26 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const headingRecipe = defineRecipe({
+    className: 'chakra-heading',
+    base: {
+        fontFamily: 'heading',
+        fontWeight: 'semibold',
+    },
+    variants: {
+        size: {
+            xs: { textStyle: 'xs' },
+            sm: { textStyle: 'sm' },
+            md: { textStyle: 'md' },
+            lg: { textStyle: 'lg' },
+            xl: { textStyle: 'xl' },
+            '2xl': { textStyle: '2xl' },
+            '3xl': { textStyle: '3xl' },
+            '4xl': { textStyle: '4xl' },
+            '5xl': { textStyle: '5xl' },
+            '6xl': { textStyle: '6xl' },
+            '7xl': { textStyle: '7xl' },
+        },
+    },
+    defaultVariants: {
+        size: 'xl',
+    },
+});

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

@@ -1,2 +1 @@
-export { Heading_alias_1 as Heading } from '../../_tsup-dts-rollup.js';
-export { HeadingProps_alias_1 as HeadingProps } from '../../_tsup-dts-rollup.js';
+export { Heading, type HeadingProps } from '@chakra-ui/react/typography';

package/dist/components/heading/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Heading
-} from "../../chunk-HZX4AGO5.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Heading
-};
+export { Heading } from '@chakra-ui/react/typography';

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

@@ -1,2 +1 @@
-export { Highlight_alias_1 as Highlight } from '../../_tsup-dts-rollup.js';
-export { HighlightProps } from '../../_tsup-dts-rollup.js';
+export { Highlight, type HighlightProps, } from '@chakra-ui/react/highlight';

package/dist/components/highlight/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Highlight
-} from "../../chunk-TGEP2YAT.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Highlight
-};
+export { Highlight, } from '@chakra-ui/react/highlight';

package/dist/components/hover-card/hover-card.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { HoverCard } from '@chakra-ui/react/hover-card';
+interface ContentProps extends HoverCard.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Arrow: React.ForwardRefExoticComponent<HoverCard.ArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.FC<HoverCard.RootProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<HoverCard.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { HoverCard } from '@chakra-ui/react/hover-card';
+import { Portal } from '@chakra-ui/react/portal';
+export const Content = React.forwardRef(function HoverCardContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (_jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(HoverCard.Positioner, { children: _jsx(HoverCard.Content, { ref: ref, ...rest }) }) }));
+});
+export const Arrow = React.forwardRef(function HoverCardArrow(props, ref) {
+    return (_jsx(HoverCard.Arrow, { ref: ref, ...props, children: _jsx(HoverCard.ArrowTip, {}) }));
+});
+export const Root = HoverCard.Root;
+export const Trigger = HoverCard.Trigger;

package/dist/components/hover-card/hover-card.recipe.d.ts

@@ -0,0 +1,28 @@
+export declare const hoverCardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
+    size: {
+        xs: {
+            content: {
+                padding: "3";
+                borderRadius: "panel.sm";
+            };
+        };
+        sm: {
+            content: {
+                padding: "4";
+                borderRadius: "panel.md";
+            };
+        };
+        md: {
+            content: {
+                padding: "5";
+                borderRadius: "panel.md";
+            };
+        };
+        lg: {
+            content: {
+                padding: "6";
+                borderRadius: "panel.lg";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,70 @@
+import { hoverCardAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const hoverCardSlotRecipe = defineSlotRecipe({
+    className: 'chakra-hover-card',
+    slots: hoverCardAnatomy.keys(),
+    base: {
+        content: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            textStyle: 'sm',
+            '--hovercard-bg': 'colors.bg.panel',
+            bg: 'var(--hovercard-bg)',
+            maxWidth: '80',
+            '--hover-card-z-index': 'zIndex.layer-2',
+            zIndex: 'calc(var(--hover-card-z-index) + var(--layer-index, 0))',
+            transformOrigin: 'var(--transform-origin)',
+            borderWidth: '1px',
+            outline: '0',
+            layerStyle: 'overlay',
+            _open: {
+                animationStyle: 'slide-fade-in',
+                animationDuration: 'fast',
+            },
+            _closed: {
+                animationStyle: 'slide-fade-out',
+                animationDuration: 'faster',
+            },
+        },
+        arrow: {
+            '--arrow-size': 'sizes.3',
+            '--arrow-background': 'var(--hovercard-bg)',
+        },
+        arrowTip: {
+            borderTopWidth: '0.5px',
+            borderInlineStartWidth: '0.5px',
+        },
+    },
+    variants: {
+        size: {
+            xs: {
+                content: {
+                    padding: '3',
+                    borderRadius: 'panel.sm',
+                },
+            },
+            sm: {
+                content: {
+                    padding: '4',
+                    borderRadius: 'panel.md',
+                },
+            },
+            md: {
+                content: {
+                    padding: '5',
+                    borderRadius: 'panel.md',
+                },
+            },
+            lg: {
+                content: {
+                    padding: '6',
+                    borderRadius: 'panel.lg',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/components/hover-card/index.d.ts

@@ -1 +1 @@
-export { HoverCard_alias_1 as HoverCard } from '../../_tsup-dts-rollup.js';
+export * as HoverCard from './hover-card.tsx';

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

@@ -1,8 +1 @@
-'use client'
-import {
-  hover_card_exports
-} from "../../chunk-MZ2RY4NU.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  hover_card_exports as HoverCard
-};
+export * as HoverCard from "./hover-card.js";

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

@@ -0,0 +1,25 @@
+export declare const iconRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        inherit: {
+            '--icon-size': "1em";
+        };
+        xs: {
+            '--icon-size': "sizes.3";
+        };
+        sm: {
+            '--icon-size': "sizes.4";
+        };
+        md: {
+            '--icon-size': "sizes.5";
+        };
+        lg: {
+            '--icon-size': "sizes.6";
+        };
+        xl: {
+            '--icon-size': "sizes.7";
+        };
+        '2xl': {
+            '--icon-size': "sizes.8";
+        };
+    };
+}>;

package/dist/components/icon/icon.recipe.js

@@ -0,0 +1,27 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const iconRecipe = defineRecipe({
+    className: 'chakra-icon',
+    base: {
+        display: 'inline-block',
+        lineHeight: '1em',
+        flexShrink: '0',
+        color: 'currentcolor',
+        verticalAlign: 'middle',
+        width: 'var(--icon-size)',
+        height: 'var(--icon-size)',
+    },
+    variants: {
+        size: {
+            inherit: { '--icon-size': '1em' },
+            xs: { '--icon-size': 'sizes.3' },
+            sm: { '--icon-size': 'sizes.4' },
+            md: { '--icon-size': 'sizes.5' },
+            lg: { '--icon-size': 'sizes.6' },
+            xl: { '--icon-size': 'sizes.7' },
+            '2xl': { '--icon-size': 'sizes.8' },
+        },
+    },
+    defaultVariants: {
+        size: 'inherit',
+    },
+});

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

@@ -1,2 +1 @@
-export { Icon_alias_1 as Icon } from '../../_tsup-dts-rollup.js';
-export { IconProps_alias_1 as IconProps } from '../../_tsup-dts-rollup.js';
+export { Icon, type IconProps } from '@chakra-ui/react/icon';

package/dist/components/icon/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Icon
-} from "../../chunk-M3DJWM6D.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Icon
-};
+export { Icon } from '@chakra-ui/react/icon';

package/dist/components/icon-badge/icon-badge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
+export interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'suiIconBadge'> {
+    /**
+     * The icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * A11y: A label that describes the icon
+     */
+    'aria-label'?: string;
+}
+export declare const IconBadge: React.ForwardRefExoticComponent<IconBadgeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cloneElement, isValidElement } from 'react';
+import { chakra, useRecipe, } from '@chakra-ui/react/styled-system';
+import { cx } from '@saas-ui/core/utils';
+export const IconBadge = React.forwardRef((props, ref) => {
+    const { icon, children, ...rest } = props;
+    const recipe = useRecipe({ key: 'suiIconBadge', recipe: props.recipe });
+    const [variantProps, localProps] = recipe.splitVariantProps(rest);
+    const styles = recipe(variantProps);
+    /**
+     * Passing the icon as prop or children should work
+     */
+    const element = icon || children;
+    const _children = isValidElement(element)
+        ? cloneElement(element, {
+            'aria-hidden': true,
+            focusable: false,
+        })
+        : null;
+    return (_jsx(chakra.div, { ref: ref, ...localProps, css: [styles, props.css], className: cx(recipe.className, props.className), children: _children }));
+});

package/dist/components/icon-badge/icon-badge.recipe.d.ts

@@ -0,0 +1,43 @@
+export declare const iconBadgeRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        outline: {
+            borderWidth: "1px";
+            borderColor: "colorPalette.subtle";
+            color: "colorPalette.fg";
+        };
+        solid: {
+            bg: "colorPalette.solid";
+            color: "white";
+        };
+        subtle: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+        };
+    };
+    size: {
+        sm: {
+            borderRadius: "sm";
+            fontSize: "0.9em";
+            w: number;
+            h: number;
+        };
+        md: {
+            borderRadius: "md";
+            fontSize: "1.1em";
+            w: number;
+            h: number;
+        };
+        lg: {
+            borderRadius: "md";
+            fontSize: "1.3em";
+            w: number;
+            h: number;
+        };
+        xl: {
+            borderRadius: "md";
+            fontSize: "1.5em";
+            w: number;
+            h: number;
+        };
+    };
+}>;

package/dist/components/icon-badge/icon-badge.recipe.js

@@ -0,0 +1,57 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const iconBadgeRecipe = defineRecipe({
+    className: 'sui-icon-badge',
+    base: {
+        colorPalette: 'gray',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    variants: {
+        variant: {
+            outline: {
+                borderWidth: '1px',
+                borderColor: 'colorPalette.subtle',
+                color: 'colorPalette.fg',
+            },
+            solid: {
+                bg: 'colorPalette.solid',
+                color: 'white',
+            },
+            subtle: {
+                bg: 'colorPalette.subtle',
+                color: 'colorPalette.fg',
+            },
+        },
+        size: {
+            sm: {
+                borderRadius: 'sm',
+                fontSize: '0.9em',
+                w: 6,
+                h: 6,
+            },
+            md: {
+                borderRadius: 'md',
+                fontSize: '1.1em',
+                w: 8,
+                h: 8,
+            },
+            lg: {
+                borderRadius: 'md',
+                fontSize: '1.3em',
+                w: 10,
+                h: 10,
+            },
+            xl: {
+                borderRadius: 'md',
+                fontSize: '1.5em',
+                w: 12,
+                h: 12,
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md',
+    },
+});

package/dist/components/icon-badge/index.d.ts

@@ -1,2 +1,2 @@
-export { IconBadge_alias_1 as IconBadge } from '../../_tsup-dts-rollup.js';
-export { IconBadgeProps } from '../../_tsup-dts-rollup.js';
+export { IconBadge } from './icon-badge.tsx';
+export type { IconBadgeProps } from './icon-badge.tsx';

package/dist/components/icon-badge/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  IconBadge
-} from "../../chunk-NSFGACD7.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  IconBadge
-};
+export { IconBadge } from "./icon-badge.js";

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../button/index.ts';
+export interface IconButtonProps extends ButtonProps {
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button } from "../button/index.js";
+export const IconButton = forwardRef(function IconButton(props, ref) {
+    return (_jsx(Button, { px: "0", py: "0", _icon: { fontSize: '1.2em' }, ref: ref, ...props }));
+});

package/dist/components/icon-button/index.d.ts

@@ -1,2 +1 @@
-export { IconButton_alias_1 as IconButton } from '../../_tsup-dts-rollup.js';
-export { IconButtonProps_alias_1 as IconButtonProps } from '../../_tsup-dts-rollup.js';
+export { IconButton, type IconButtonProps } from './icon-button.tsx';

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

@@ -1,9 +1 @@
-'use client'
-import {
-  IconButton
-} from "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  IconButton
-};
+export { IconButton } from "./icon-button.js";