@saas-ui/react 3.0.0-next.4 → 3.0.0-next.40

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_alias_1 as 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,59 @@
+export declare const headingRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            fontSize: "xs";
+            lineHeight: "heading.xs";
+            letterSpacing: "heading.xs";
+        };
+        sm: {
+            fontSize: "sm";
+            lineHeight: "heading.sm";
+            letterSpacing: "heading.sm";
+        };
+        md: {
+            fontSize: "md";
+            lineHeight: "heading.md";
+            letterSpacing: "heading.md";
+        };
+        lg: {
+            fontSize: "lg";
+            lineHeight: "heading.lg";
+            letterSpacing: "heading.lg";
+        };
+        xl: {
+            fontSize: "xl";
+            lineHeight: "heading.xl";
+            letterSpacing: "heading.xl";
+        };
+        '2xl': {
+            fontSize: "2xl";
+            lineHeight: "heading.2xl";
+            letterSpacing: "heading.2xl";
+        };
+        '3xl': {
+            fontSize: "3xl";
+            lineHeight: "heading.3xl";
+            letterSpacing: "heading.3xl";
+        };
+        '4xl': {
+            fontSize: "4xl";
+            lineHeight: "heading.4xl";
+            letterSpacing: "heading.4xl";
+        };
+        '5xl': {
+            fontSize: "5xl";
+            lineHeight: "heading.5xl";
+            letterSpacing: "heading.5xl";
+        };
+        '6xl': {
+            fontSize: "6xl";
+            lineHeight: "heading.6xl";
+            letterSpacing: "heading.6xl";
+        };
+        '7xl': {
+            fontSize: "7xl";
+            lineHeight: "heading.7xl";
+            letterSpacing: "heading.7xl";
+        };
+    };
+}>;

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

@@ -0,0 +1,70 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const headingRecipe = defineRecipe({
+    className: 'chakra-heading',
+    base: {
+        fontFamily: 'heading',
+        fontWeight: 'semibold',
+    },
+    variants: {
+        size: {
+            xs: {
+                fontSize: 'xs',
+                lineHeight: 'heading.xs',
+                letterSpacing: 'heading.xs',
+            },
+            sm: {
+                fontSize: 'sm',
+                lineHeight: 'heading.sm',
+                letterSpacing: 'heading.sm',
+            },
+            md: {
+                fontSize: 'md',
+                lineHeight: 'heading.md',
+                letterSpacing: 'heading.md',
+            },
+            lg: {
+                fontSize: 'lg',
+                lineHeight: 'heading.lg',
+                letterSpacing: 'heading.lg',
+            },
+            xl: {
+                fontSize: 'xl',
+                lineHeight: 'heading.xl',
+                letterSpacing: 'heading.xl',
+            },
+            '2xl': {
+                fontSize: '2xl',
+                lineHeight: 'heading.2xl',
+                letterSpacing: 'heading.2xl',
+            },
+            '3xl': {
+                fontSize: '3xl',
+                lineHeight: 'heading.3xl',
+                letterSpacing: 'heading.3xl',
+            },
+            '4xl': {
+                fontSize: '4xl',
+                lineHeight: 'heading.4xl',
+                letterSpacing: 'heading.4xl',
+            },
+            '5xl': {
+                fontSize: '5xl',
+                lineHeight: 'heading.5xl',
+                letterSpacing: 'heading.5xl',
+            },
+            '6xl': {
+                fontSize: '6xl',
+                lineHeight: 'heading.6xl',
+                letterSpacing: 'heading.6xl',
+            },
+            '7xl': {
+                fontSize: '7xl',
+                lineHeight: 'heading.7xl',
+                letterSpacing: 'heading.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_alias_1 as 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',
+    },
+});