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

package/dist/components/icons/create-icon.d.ts

@@ -0,0 +1,27 @@
+import type { IconProps } from '@chakra-ui/react/icon';
+interface CreateIconOptions {
+    /**
+     * The icon `svg` viewBox
+     * @default "0 0 24 24"
+     */
+    viewBox?: string;
+    /**
+     * The `svg` path or group element
+     * @type React.ReactElement | React.ReactElement[]
+     */
+    path?: React.ReactElement | React.ReactElement[];
+    /**
+     * If the `svg` has a single path, simply copy the path's `d` attribute
+     */
+    d?: string;
+    /**
+     * The display name useful in the dev tools
+     */
+    displayName?: string;
+    /**
+     * Default props automatically passed to the component; overwriteable
+     */
+    defaultProps?: IconProps;
+}
+export declare const createIcon: (props: CreateIconOptions) => import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/icons/create-icon.js

@@ -0,0 +1,15 @@
+'use client';
+import { createIcon as _createIcon } from '@chakra-ui/react/icon';
+export const createIcon = (props) => {
+    return _createIcon({
+        viewBox: '0 0 24 24',
+        defaultProps: {
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeWidth: '2',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+        },
+        ...props,
+    });
+};

package/dist/components/icons/icons.d.ts

@@ -0,0 +1,18 @@
+export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const HamburgerIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const FilterIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CalendarIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const PlusIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MinusIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ViewOffIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ViewIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SearchIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CheckIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const EllipsisIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CopyIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const InfoIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowLeftIcon: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/icons/icons.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createIcon } from "./create-icon.js";
+export const ChevronUpIcon = createIcon({
+    displayName: 'ChevronUpIcon',
+    path: _jsx("polyline", { points: "18 15 12 9 6 15" }),
+});
+export const ChevronDownIcon = createIcon({
+    displayName: 'ChevronDownIcon',
+    path: _jsx("polyline", { points: "6 9 12 15 18 9" }),
+});
+export const ChevronLeftIcon = createIcon({
+    displayName: 'ChevronLeftIcon',
+    path: _jsx("polyline", { points: "15 18 9 12 15 6" }),
+});
+export const ChevronRightIcon = createIcon({
+    displayName: 'ChevronRightIcon',
+    path: _jsx("polyline", { points: "9 18 15 12 9 6" }),
+});
+export const HamburgerIcon = createIcon({
+    displayName: 'ChevronDownIcon',
+    path: (_jsxs("g", { fill: "none", children: [_jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] })),
+});
+export const CloseIcon = createIcon({
+    displayName: 'CloseIcon',
+    path: (_jsxs("g", { children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
+});
+export const FilterIcon = createIcon({
+    displayName: 'FilterIcon',
+    path: (_jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })),
+});
+export const CalendarIcon = createIcon({
+    displayName: 'CalendarIcon',
+    path: (_jsxs("g", { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] })),
+});
+export const PlusIcon = createIcon({
+    displayName: 'PlusIcon',
+    path: (_jsxs("g", { children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
+});
+export const MinusIcon = createIcon({
+    displayName: 'MinusIcon',
+    path: (_jsx("g", { children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })),
+});
+export const ViewOffIcon = createIcon({
+    displayName: 'ViewOffIcon',
+    path: (_jsxs("g", { children: [_jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })),
+});
+export const ViewIcon = createIcon({
+    displayName: 'ViewOffIcon',
+    path: (_jsxs("g", { children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
+});
+export const SearchIcon = createIcon({
+    displayName: 'SearchIcon',
+    path: (_jsxs("g", { children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })),
+});
+export const CheckIcon = createIcon({
+    displayName: 'CheckIcon',
+    path: (_jsx("g", { children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })),
+});
+export const EllipsisIcon = createIcon({
+    displayName: 'EllipsisIcon',
+    path: (_jsxs("g", { children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" })] })),
+});
+export const CopyIcon = createIcon({
+    displayName: 'CopyIcon',
+    path: (_jsxs("g", { children: [_jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }), _jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] })),
+});
+export const InfoIcon = createIcon({
+    displayName: 'InfoIcon',
+    path: (_jsxs("g", { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4" }), _jsx("path", { d: "M12 8h.01" })] })),
+});
+export const ArrowLeftIcon = createIcon({
+    displayName: 'ArrowLeftIcon',
+    path: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }), _jsx("polyline", { points: "12 19 5 12 12 5" })] })),
+});

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

@@ -1,18 +1 @@
-export { ChevronUpIcon } from '../../_tsup-dts-rollup.js';
-export { ChevronDownIcon } from '../../_tsup-dts-rollup.js';
-export { ChevronLeftIcon } from '../../_tsup-dts-rollup.js';
-export { ChevronRightIcon } from '../../_tsup-dts-rollup.js';
-export { HamburgerIcon } from '../../_tsup-dts-rollup.js';
-export { CloseIcon } from '../../_tsup-dts-rollup.js';
-export { FilterIcon } from '../../_tsup-dts-rollup.js';
-export { CalendarIcon } from '../../_tsup-dts-rollup.js';
-export { PlusIcon } from '../../_tsup-dts-rollup.js';
-export { MinusIcon } from '../../_tsup-dts-rollup.js';
-export { ViewOffIcon } from '../../_tsup-dts-rollup.js';
-export { ViewIcon } from '../../_tsup-dts-rollup.js';
-export { SearchIcon } from '../../_tsup-dts-rollup.js';
-export { CheckIcon } from '../../_tsup-dts-rollup.js';
-export { EllipsisIcon } from '../../_tsup-dts-rollup.js';
-export { CopyIcon } from '../../_tsup-dts-rollup.js';
-export { InfoIcon } from '../../_tsup-dts-rollup.js';
-export { ArrowLeftIcon } from '../../_tsup-dts-rollup.js';
+export * from './icons.tsx';

package/dist/components/icons/index.js

@@ -1,43 +1 @@
-'use client'
-import "../../chunk-KTLWEUNW.js";
-import {
-  ArrowLeftIcon,
-  CalendarIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-  CloseIcon,
-  CopyIcon,
-  EllipsisIcon,
-  FilterIcon,
-  HamburgerIcon,
-  InfoIcon,
-  MinusIcon,
-  PlusIcon,
-  SearchIcon,
-  ViewIcon,
-  ViewOffIcon
-} from "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  ArrowLeftIcon,
-  CalendarIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-  CloseIcon,
-  CopyIcon,
-  EllipsisIcon,
-  FilterIcon,
-  HamburgerIcon,
-  InfoIcon,
-  MinusIcon,
-  PlusIcon,
-  SearchIcon,
-  ViewIcon,
-  ViewOffIcon
-};
+export * from "./icons.js";

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

@@ -1,2 +1 @@
-export { Image_alias_1 as Image } from '../../_tsup-dts-rollup.js';
-export { ImageProps_alias_1 as ImageProps } from '../../_tsup-dts-rollup.js';
+export { Image, type ImageProps } from '@chakra-ui/react/image';

package/dist/components/image/index.js

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

package/dist/components/info-tip/index.d.ts

@@ -1,2 +1 @@
-export { InfoTip_alias_1 as InfoTip } from '../../_tsup-dts-rollup.js';
-export { InfoTipProps_alias_1 as InfoTipProps } from '../../_tsup-dts-rollup.js';
+export { InfoTip, type InfoTipProps } from './info-tip.tsx';

package/dist/components/info-tip/index.js

@@ -1,16 +1 @@
-'use client'
-import {
-  InfoTip
-} from "../../chunk-AHG5XKEK.js";
-import "../../chunk-JL4MHGRE.js";
-import "../../chunk-HRFQMDUK.js";
-import "../../chunk-KTLWEUNW.js";
-import "../../chunk-JMYI6YXR.js";
-import "../../chunk-WZUKOJGI.js";
-import "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  InfoTip
-};
+export { InfoTip } from "./info-tip.js";

package/dist/components/info-tip/info-tip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type ToggleTipProps } from '../toggle-tip/index.ts';
+export interface InfoTipProps extends Omit<ToggleTipProps, 'content'> {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    'aria-label'?: string;
+}
+export declare const InfoTip: React.ForwardRefExoticComponent<InfoTipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/info-tip/info-tip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { IconButton } from "../icon-button/index.js";
+import { InfoIcon } from "../icons/index.js";
+import { ToggleTip } from "../toggle-tip/index.js";
+export const InfoTip = React.forwardRef(function InfoTip(props, ref) {
+    const { children, icon, 'aria-label': ariaLabel = 'Info', ...rest } = props;
+    return (_jsx(ToggleTip, { content: children, ...rest, ref: ref, children: _jsx(IconButton, { variant: "ghost", "aria-label": ariaLabel, size: "2xs", children: icon ?? _jsx(InfoIcon, {}) }) }));
+});

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

@@ -1,9 +1,2 @@
-export { Input_alias_1 as Input } from '../../_tsup-dts-rollup.js';
-export { InputAddon_alias_1 as InputAddon } from '../../_tsup-dts-rollup.js';
-export { InputElement_alias_1 as InputElement } from '../../_tsup-dts-rollup.js';
-export { InputPropsProvider_alias_1 as InputPropsProvider } from '../../_tsup-dts-rollup.js';
-export { InputGroup_alias_1 as InputGroup } from '../../_tsup-dts-rollup.js';
-export { InputProps_alias_1 as InputProps } from '../../_tsup-dts-rollup.js';
-export { InputAddonProps_alias_1 as InputAddonProps } from '../../_tsup-dts-rollup.js';
-export { InputElementProps_alias_1 as InputElementProps } from '../../_tsup-dts-rollup.js';
-export { InputGroupProps_alias_1 as InputGroupProps } from '../../_tsup-dts-rollup.js';
+export { Input, InputAddon, InputElement, InputPropsProvider, InputGroup, } from '@chakra-ui/react/input';
+export type { InputProps, InputAddonProps, InputElementProps, InputGroupProps, } from '@chakra-ui/react/input';

package/dist/components/input/index.js

@@ -1,16 +1 @@
-'use client'
-import {
-  Input,
-  InputAddon,
-  InputElement,
-  InputGroup,
-  InputPropsProvider
-} from "../../chunk-BLSGOJQ7.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Input,
-  InputAddon,
-  InputElement,
-  InputGroup,
-  InputPropsProvider
-};
+export { Input, InputAddon, InputElement, InputPropsProvider, InputGroup, } from '@chakra-ui/react/input';

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: "white/10";
+            };
+        };
+        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.js";
+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: 'white/10' },
+            },
+            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

@@ -1,2 +1 @@
-export { Kbd_alias_1 as Kbd } from '../../_tsup-dts-rollup.js';
-export { KbdProps_alias_1 as KbdProps } from '../../_tsup-dts-rollup.js';
+export { Kbd, type KbdProps } from '@chakra-ui/react/kbd';

package/dist/components/kbd/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Kbd
-} from "../../chunk-OQU4LWZW.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Kbd
-};
+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: 'indicator.md',
+    },
+    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',
+    },
+});