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

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

@@ -0,0 +1,101 @@
+export declare const sliderSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"marker" | "label" | "control" | "root" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
+    size: {
+        sm: {
+            root: {
+                '--slider-thumb-size': "sizes.4";
+                '--slider-track-size': "sizes.1.5";
+                '--slider-marker-top': "6px";
+                '--slider-marker-size': "sizes.1";
+                '--slider-marker-inset': "3px";
+            };
+        };
+        md: {
+            root: {
+                '--slider-thumb-size': "sizes.5";
+                '--slider-track-size': "sizes.2";
+                '--slider-marker-top': "8px";
+                '--slider-marker-size': "sizes.1";
+                '--slider-marker-inset': "4px";
+            };
+        };
+        lg: {
+            root: {
+                '--slider-thumb-size': "sizes.6";
+                '--slider-track-size': "sizes.2.5";
+                '--slider-marker-top': "9px";
+                '--slider-marker-size': "sizes.1.5";
+                '--slider-marker-inset': "5px";
+            };
+        };
+    };
+    variant: {
+        outline: {
+            track: {
+                shadow: "inset";
+                bg: "bg.emphasized/72";
+            };
+            range: {
+                bg: "colorPalette.solid";
+            };
+            thumb: {
+                borderWidth: "2px";
+                borderColor: "colorPalette.solid";
+                bg: "bg";
+                _disabled: {
+                    bg: "border.emphasized";
+                    borderColor: "border.emphasized";
+                };
+            };
+        };
+        solid: {
+            track: {
+                bg: "colorPalette.subtle";
+                _disabled: {
+                    bg: "bg.muted";
+                };
+            };
+            range: {
+                bg: "colorPalette.solid";
+            };
+            thumb: {
+                bg: "colorPalette.solid";
+                _disabled: {
+                    bg: "border.emphasized";
+                };
+            };
+        };
+    };
+    orientation: {
+        vertical: {
+            root: {
+                display: "inline-flex";
+            };
+            control: {
+                flexDirection: "column";
+                height: "100%";
+                minWidth: "var(--slider-thumb-size)";
+            };
+            track: {
+                width: "var(--slider-track-size)";
+            };
+            thumb: {
+                left: "50%";
+                translate: "-50% 0";
+            };
+        };
+        horizontal: {
+            control: {
+                flexDirection: "row";
+                width: "100%";
+                minHeight: "var(--slider-thumb-size)";
+            };
+            track: {
+                height: "var(--slider-track-size)";
+            };
+            thumb: {
+                top: "50%";
+                translate: "0 -50%";
+            };
+        };
+    };
+}>;

package/dist/components/slider/slider.recipe.js

@@ -0,0 +1,175 @@
+import { sliderAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const sliderSlotRecipe = defineSlotRecipe({
+    className: 'chakra-slider',
+    slots: sliderAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1',
+            fontSize: 'sm',
+            position: 'relative',
+            isolation: 'isolate',
+            touchAction: 'none',
+        },
+        control: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            position: 'relative',
+        },
+        track: {
+            overflow: 'hidden',
+            borderRadius: 'full',
+            flex: '1',
+        },
+        range: {
+            width: 'inherit',
+            height: 'inherit',
+            _disabled: { bg: 'border.emphasized!' },
+        },
+        markerGroup: {
+            position: 'absolute!',
+            top: 'var(--slider-marker-top)',
+            insetInline: 'var(--slider-marker-inset)',
+            zIndex: '1',
+        },
+        marker: {
+            '--marker-bg': { base: 'white', _underValue: 'colors.bg' },
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1.5',
+            color: 'fg.muted',
+            fontSize: 'xs',
+        },
+        markerIndicator: {
+            width: 'var(--slider-marker-size)',
+            height: 'var(--slider-marker-size)',
+            borderRadius: 'full',
+            bg: 'var(--marker-bg)',
+        },
+        thumb: {
+            width: 'var(--slider-thumb-size)',
+            height: 'var(--slider-thumb-size)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            outline: 0,
+            zIndex: '2',
+            borderRadius: 'full',
+            _focusVisible: {
+                ring: '2px',
+                ringColor: 'colorPalette.focusRing',
+                ringOffset: '2px',
+                ringOffsetColor: 'bg',
+            },
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                root: {
+                    '--slider-thumb-size': 'sizes.4',
+                    '--slider-track-size': 'sizes.1.5',
+                    '--slider-marker-top': '6px',
+                    '--slider-marker-size': 'sizes.1',
+                    '--slider-marker-inset': '3px',
+                },
+            },
+            md: {
+                root: {
+                    '--slider-thumb-size': 'sizes.5',
+                    '--slider-track-size': 'sizes.2',
+                    '--slider-marker-top': '8px',
+                    '--slider-marker-size': 'sizes.1',
+                    '--slider-marker-inset': '4px',
+                },
+            },
+            lg: {
+                root: {
+                    '--slider-thumb-size': 'sizes.6',
+                    '--slider-track-size': 'sizes.2.5',
+                    '--slider-marker-top': '9px',
+                    '--slider-marker-size': 'sizes.1.5',
+                    '--slider-marker-inset': '5px',
+                },
+            },
+        },
+        variant: {
+            outline: {
+                track: {
+                    shadow: 'inset',
+                    bg: 'bg.emphasized/72',
+                },
+                range: {
+                    bg: 'colorPalette.solid',
+                },
+                thumb: {
+                    borderWidth: '2px',
+                    borderColor: 'colorPalette.solid',
+                    bg: 'bg',
+                    _disabled: {
+                        bg: 'border.emphasized',
+                        borderColor: 'border.emphasized',
+                    },
+                },
+            },
+            solid: {
+                track: {
+                    bg: 'colorPalette.subtle',
+                    _disabled: {
+                        bg: 'bg.muted',
+                    },
+                },
+                range: {
+                    bg: 'colorPalette.solid',
+                },
+                thumb: {
+                    bg: 'colorPalette.solid',
+                    _disabled: {
+                        bg: 'border.emphasized',
+                    },
+                },
+            },
+        },
+        orientation: {
+            vertical: {
+                root: {
+                    display: 'inline-flex',
+                },
+                control: {
+                    flexDirection: 'column',
+                    height: '100%',
+                    minWidth: 'var(--slider-thumb-size)',
+                },
+                track: {
+                    width: 'var(--slider-track-size)',
+                },
+                thumb: {
+                    left: '50%',
+                    translate: '-50% 0',
+                },
+            },
+            horizontal: {
+                control: {
+                    flexDirection: 'row',
+                    width: '100%',
+                    minHeight: 'var(--slider-thumb-size)',
+                },
+                track: {
+                    height: 'var(--slider-track-size)',
+                },
+                thumb: {
+                    top: '50%',
+                    translate: '0 -50%',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+        orientation: 'horizontal',
+    },
+});

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

@@ -0,0 +1 @@
+export { Spacer, type SpacerProps, } from '@chakra-ui/react/spacer';

package/dist/components/spacer/index.js

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

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

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner.tsx';
+export type { SpinnerProps } from './spinner.tsx';

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,6 @@
+import type { SpinnerProps as ChakraSpinnerProps } from '@chakra-ui/react/spinner';
+export interface SpinnerProps extends ChakraSpinnerProps {
+    loading?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Spinner as ChakraSpinner } from '@chakra-ui/react/spinner';
+export const Spinner = forwardRef(function Spinner(props, ref) {
+    const { loading, children, ...rest } = props;
+    if (loading === false) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(ChakraSpinner, { ref: ref, ...rest });
+});

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

@@ -0,0 +1,22 @@
+export declare const spinnerRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        inherit: {
+            '--spinner-size': "1em";
+        };
+        xs: {
+            '--spinner-size': "sizes.3";
+        };
+        sm: {
+            '--spinner-size': "sizes.4";
+        };
+        md: {
+            '--spinner-size': "sizes.5";
+        };
+        lg: {
+            '--spinner-size': "sizes.8";
+        };
+        xl: {
+            '--spinner-size': "sizes.10";
+        };
+    };
+}>;

package/dist/components/spinner/spinner.recipe.js

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const spinnerRecipe = defineRecipe({
+    className: 'chakra-spinner',
+    base: {
+        display: 'inline-block',
+        borderColor: 'currentColor',
+        borderStyle: 'solid',
+        borderWidth: '2px',
+        borderRadius: 'full',
+        width: 'var(--spinner-size)',
+        height: 'var(--spinner-size)',
+        animation: 'spin',
+        animationDuration: 'slowest',
+        '--spinner-track-color': 'transparent',
+        borderBottomColor: 'var(--spinner-track-color)',
+        borderInlineStartColor: 'var(--spinner-track-color)',
+    },
+    variants: {
+        size: {
+            inherit: { '--spinner-size': '1em' },
+            xs: { '--spinner-size': 'sizes.3' },
+            sm: { '--spinner-size': 'sizes.4' },
+            md: { '--spinner-size': 'sizes.5' },
+            lg: { '--spinner-size': 'sizes.8' },
+            xl: { '--spinner-size': 'sizes.10' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Stack, type StackProps, HStack, StackSeparator, type StackSeparatorProps, VStack, } from '@chakra-ui/react/stack';

package/dist/components/stack/index.js

@@ -0,0 +1 @@
+export { Stack, HStack, StackSeparator, VStack, } from '@chakra-ui/react/stack';

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

@@ -0,0 +1 @@
+export * as Stat from './stat.tsx';

package/dist/components/stat/index.js

@@ -0,0 +1 @@
+export * as Stat from "./stat.js";

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type BadgeProps } from '@chakra-ui/react/badge';
+import { Stat as ChakraStat } from '@chakra-ui/react/stat';
+interface StatValueTextProps extends ChakraStat.ValueTextProps {
+    value?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+}
+declare const StatValueText: React.ForwardRefExoticComponent<StatValueTextProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatUpTrend: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatDownTrend: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.ForwardRefExoticComponent<ChakraStat.RootProps & React.RefAttributes<HTMLDListElement>>;
+export declare const Label: React.ForwardRefExoticComponent<ChakraStat.LabelProps & React.RefAttributes<HTMLElement>>;
+export declare const HelpText: React.ForwardRefExoticComponent<ChakraStat.HelpTextProps & React.RefAttributes<HTMLElement>>;
+export declare const ValueUnit: React.ForwardRefExoticComponent<ChakraStat.ValueUnitProps & React.RefAttributes<HTMLElement>>;
+export type RootProps = ChakraStat.RootProps;
+export type ValueTextProps = StatValueTextProps;
+export { StatValueText as ValueText, StatUpTrend as UpTrend, StatDownTrend as DownTrend, };

package/dist/components/stat/stat.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Badge } from '@chakra-ui/react/badge';
+import { FormatNumber } from '@chakra-ui/react/format';
+import { Stat as ChakraStat } from '@chakra-ui/react/stat';
+const StatValueText = React.forwardRef(function StatValueText(props, ref) {
+    const { value, formatOptions, children, ...rest } = props;
+    return (_jsx(ChakraStat.ValueText, { ...rest, ref: ref, children: children ||
+            (value != null && _jsx(FormatNumber, { value: value, ...formatOptions })) }));
+});
+const StatUpTrend = React.forwardRef(function StatUpTrend(props, ref) {
+    return (_jsxs(Badge, { colorPalette: "green", gap: "0", ...props, ref: ref, children: [_jsx(ChakraStat.UpIndicator, {}), props.children] }));
+});
+const StatDownTrend = React.forwardRef(function StatDownTrend(props, ref) {
+    return (_jsxs(Badge, { colorPalette: "red", gap: "0", ...props, ref: ref, children: [_jsx(ChakraStat.DownIndicator, {}), props.children] }));
+});
+export const Root = ChakraStat.Root;
+export const Label = ChakraStat.Label;
+export const HelpText = ChakraStat.HelpText;
+export const ValueUnit = ChakraStat.ValueUnit;
+export { StatValueText as ValueText, StatUpTrend as UpTrend, StatDownTrend as DownTrend, };

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

@@ -0,0 +1,19 @@
+export declare const statSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "valueText" | "helpText" | "valueUnit", {
+    size: {
+        sm: {
+            valueText: {
+                textStyle: "xl";
+            };
+        };
+        md: {
+            valueText: {
+                textStyle: "2xl";
+            };
+        };
+        lg: {
+            valueText: {
+                textStyle: "3xl";
+            };
+        };
+    };
+}>;

package/dist/components/stat/stat.recipe.js

@@ -0,0 +1,76 @@
+import { statAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const statSlotRecipe = defineSlotRecipe({
+    className: 'chakra-stat',
+    slots: statAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1',
+            position: 'relative',
+            flex: '1',
+        },
+        label: {
+            color: 'fg.muted',
+            textStyle: 'sm',
+        },
+        helpText: {
+            color: 'fg.muted',
+            textStyle: 'xs',
+        },
+        valueUnit: {
+            color: 'fg.muted',
+            textStyle: 'xs',
+            fontWeight: 'initial',
+            letterSpacing: 'initial',
+        },
+        valueText: {
+            verticalAlign: 'baseline',
+            fontWeight: 'semibold',
+            letterSpacing: 'tight',
+            fontFeatureSettings: 'pnum',
+            fontVariantNumeric: 'proportional-nums',
+            display: 'inline-flex',
+            gap: '1',
+        },
+        indicator: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginEnd: 1,
+            '& :where(svg)': {
+                w: '1em',
+                h: '1em',
+            },
+            '&[data-type=up]': {
+                color: 'fg.success',
+            },
+            '&[data-type=down]': {
+                color: 'fg.error',
+            },
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                valueText: {
+                    textStyle: 'xl',
+                },
+            },
+            md: {
+                valueText: {
+                    textStyle: '2xl',
+                },
+            },
+            lg: {
+                valueText: {
+                    textStyle: '3xl',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Status, type StatusProps } from './status.tsx';

package/dist/components/status/index.js

@@ -0,0 +1 @@
+export { Status } from "./status.js";

package/dist/components/status/status.d.ts

@@ -0,0 +1,14 @@
+import { Status as ChakraStatus } from '@chakra-ui/react/status';
+import type { Token } from '@chakra-ui/react/styled-system';
+export type StatusTokens = Extract<Token, `colors.status.${string}`>;
+export interface StatusProps extends ChakraStatus.RootProps {
+    /**
+     * The status value, used to determine the color of the status
+     * colors can be configured as semantic tokens under the `colors.status` key.
+     */
+    value?: StatusTokens extends never ? string : StatusTokens;
+}
+/**
+ * Status component
+ */
+export declare const Status: import("react").ForwardRefExoticComponent<StatusProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/status/status.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Status as ChakraStatus } from '@chakra-ui/react/status';
+/**
+ * Status component
+ */
+export const Status = forwardRef(function Status(props, ref) {
+    const { children, value, ...rest } = props;
+    const color = value ? `status.${value}` : undefined;
+    return (_jsxs(ChakraStatus.Root, { ref: ref, ...rest, children: [_jsx(ChakraStatus.Indicator, { bg: color }), children] }));
+});

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

@@ -0,0 +1,19 @@
+export declare const statusSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root", {
+    size: {
+        sm: {
+            root: {
+                textStyle: "xs";
+            };
+        };
+        md: {
+            root: {
+                textStyle: "sm";
+            };
+        };
+        lg: {
+            root: {
+                textStyle: "md";
+            };
+        };
+    };
+}>;

package/dist/components/status/status.recipe.js

@@ -0,0 +1,44 @@
+import { statusAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const statusSlotRecipe = defineSlotRecipe({
+    className: 'chakra-status',
+    slots: statusAnatomy.keys(),
+    base: {
+        root: {
+            colorPalette: 'gray',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '2',
+        },
+        indicator: {
+            width: '0.64em',
+            height: '0.64em',
+            flexShrink: 0,
+            borderRadius: 'full',
+            forcedColorAdjust: 'none',
+            bg: 'colorPalette.solid',
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                root: {
+                    textStyle: 'xs',
+                },
+            },
+            md: {
+                root: {
+                    textStyle: 'sm',
+                },
+            },
+            lg: {
+                root: {
+                    textStyle: 'md',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export * as Steps from './steps.tsx';

package/dist/components/steps/index.js

@@ -0,0 +1 @@
+export * as Steps from "./steps.js";

package/dist/components/steps/steps.d.ts

@@ -0,0 +1,24 @@
+import { Steps as ChakraSteps, useStepsContext } from '@chakra-ui/react/steps';
+interface StepInfoProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+interface StepsItemProps extends Omit<ChakraSteps.ItemProps, 'title'>, StepInfoProps {
+    completedIcon?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+declare const StepsItem: (props: StepsItemProps) => import("react/jsx-runtime").JSX.Element;
+interface StepsIndicatorProps {
+    completedIcon: React.ReactNode;
+    icon?: React.ReactNode;
+}
+declare const StepsIndicator: (props: StepsIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const StepsList: import("react").ForwardRefExoticComponent<ChakraSteps.ListProps & import("react").RefAttributes<HTMLDivElement>>;
+type StepsRootProps = ChakraSteps.RootProps;
+declare const StepsRoot: import("react").ForwardRefExoticComponent<ChakraSteps.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const StepsContent: import("react").ForwardRefExoticComponent<ChakraSteps.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const StepsCompletedContent: import("react").ForwardRefExoticComponent<ChakraSteps.CompletedContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const StepsNextTrigger: (props: ChakraSteps.NextTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const StepsPrevTrigger: (props: ChakraSteps.PrevTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { StepsRoot as Root, StepsContent as Content, StepsCompletedContent as CompletedContent, StepsList as List, StepsIndicator as Indicator, StepsItem as Item, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, useStepsContext as useContext, };
+export type { StepsRootProps as RootProps, StepsItemProps as ItemProps, StepsIndicatorProps as IndicatorProps, };