@saas-ui/react 3.0.0-next.5 → 3.0.0-next.50

package/dist/components/persona/persona.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AvatarPropsProvider, chakra, mergeProps, } from '@chakra-ui/react';
+import { dataAttr } from '@saas-ui/core/utils';
+import { cx } from '@saas-ui/core/utils';
+import { Avatar } from "../avatar/avatar.js";
+import { ClassNamesProvider, StylesProvider, usePropsContext, useRecipeResult, withContext, } from "./persona.context.js";
+/**
+ * The root component that provides context and styles.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaRoot = forwardRef((props, ref) => {
+    const propsContext = usePropsContext();
+    const mergedProps = useMemo(() => mergeProps(propsContext, props), [propsContext, props]);
+    const { styles, props: rootProps, classNames, } = useRecipeResult(mergedProps);
+    const className = classNames['root'];
+    const { outOfOffice, presence, ...rest } = rootProps;
+    return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(AvatarPropsProvider, { value: {
+                    size: props.size,
+                }, children: _jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
+                        presence
+                            ? {
+                                '--persona-presence': `colors.presence.${presence}`,
+                            }
+                            : undefined,
+                        styles['root'],
+                        rest.css,
+                    ], className: cx(className, rest.className) }) }) }) }));
+});
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaAvatar = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
+});
+const PersonaPresenceBadge = withContext('span', 'presence');
+/**
+ * Wrapper component for the labels.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaDetails = withContext('div', 'details');
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaLabel = withContext('span', 'label');
+PersonaLabel.displayName = 'PersonaLabel';
+/**
+ * The secondary label, usually the role of a person.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
+export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };

package/dist/components/persona/presence.d.ts

@@ -0,0 +1,20 @@
+export type PersonaPresence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
+export interface PersonaPresenceConfig {
+    label: string;
+    color: string;
+}
+export type PersonaPresenceOptions<P extends string = PersonaPresence> = Record<P, PersonaPresenceConfig>;
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const defaultPersonaPresenceOptions: PersonaPresenceOptions;

package/dist/components/persona/presence.js

@@ -0,0 +1,35 @@
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const defaultPersonaPresenceOptions = {
+    online: {
+        label: 'Online',
+        color: 'presence.online',
+    },
+    offline: {
+        label: 'Offline',
+        color: 'presence.offline',
+    },
+    busy: {
+        label: 'Busy',
+        color: 'presence.busy',
+    },
+    dnd: {
+        label: 'Do-not-disturb',
+        color: 'presence.dnd',
+    },
+    away: {
+        label: 'Away',
+        color: 'presence.away',
+    },
+};

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

@@ -1,2 +1,2 @@
-export { PinInput_alias_1 as PinInput } from '../../_tsup-dts-rollup.js';
-export { PinInputProps_alias_1 as PinInputProps } from '../../_tsup-dts-rollup.js';
+export { PinInput } from './pin-input.tsx';
+export type { PinInputProps } from './pin-input.tsx';

package/dist/components/pin-input/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  PinInput
-} from "../../chunk-RYKJOZ3B.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  PinInput
-};
+export { PinInput } from "./pin-input.js";

package/dist/components/pin-input/pin-input.d.ts

@@ -0,0 +1,8 @@
+import { PinInput as ChakraPinInput } from '@chakra-ui/react/pin-input';
+export interface PinInputProps extends ChakraPinInput.RootProps {
+    rootRef?: React.Ref<HTMLDivElement>;
+    pinLength?: number;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    attached?: boolean;
+}
+export declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/pin-input/pin-input.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Group } from '@chakra-ui/react/group';
+import { PinInput as ChakraPinInput } from '@chakra-ui/react/pin-input';
+export const PinInput = forwardRef(function PinInput(props, ref) {
+    const { pinLength = 4, inputProps, rootRef, attached, gap = attached ? 0 : 2, ...rest } = props;
+    return (_jsxs(ChakraPinInput.Root, { ref: rootRef, ...rest, children: [_jsx(ChakraPinInput.HiddenInput, { ref: ref, ...inputProps }), _jsx(ChakraPinInput.Control, { children: _jsx(Group, { attached: attached, gap: gap, children: Array.from({ length: pinLength }).map((_, index) => (_jsx(ChakraPinInput.Input, { index: index }, index))) }) })] }));
+});

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

@@ -1 +1 @@
-export { Popover_alias_1 as Popover } from '../../_tsup-dts-rollup.js';
+export * as Popover from './popover.tsx';

package/dist/components/popover/index.js

@@ -1,13 +1 @@
-'use client'
-import {
-  popover_exports
-} from "../../chunk-HRFQMDUK.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 {
-  popover_exports as Popover
-};
+export * as Popover from "./popover.js";

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,21 @@
+import { Popover as ChakraPopover } from '@chakra-ui/react/popover';
+import { type CloseButtonProps } from '../close-button/index.ts';
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+}
+declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverArrow: import("react").ForwardRefExoticComponent<ChakraPopover.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+interface PopoverCloseButtonProps extends CloseButtonProps, ChakraPopover.CloseTriggerProps {
+}
+declare const PopoverCloseButton: import("react").ForwardRefExoticComponent<PopoverCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PopoverCloseTrigger: import("react").ForwardRefExoticComponent<ChakraPopover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PopoverTitle: import("react").ForwardRefExoticComponent<ChakraPopover.TitleProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverDescription: import("react").ForwardRefExoticComponent<ChakraPopover.DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverFooter: import("react").ForwardRefExoticComponent<ChakraPopover.FooterProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverHeader: import("react").ForwardRefExoticComponent<ChakraPopover.HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverRoot: import("react").FC<ChakraPopover.RootProps>;
+declare const PopoverBody: import("react").ForwardRefExoticComponent<ChakraPopover.BodyProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ChakraPopover.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PopoverContext: (props: import("@ark-ui/react").PopoverContextProps) => import("react").ReactNode;
+export { PopoverContent as Content, PopoverArrow as Arrow, PopoverCloseButton as CloseButton, PopoverCloseTrigger as CloseTrigger, PopoverTitle as Title, PopoverDescription as Description, PopoverFooter as Footer, PopoverHeader as Header, PopoverRoot as Root, PopoverBody as Body, PopoverTrigger as Trigger, PopoverContext as Context, };
+type PopoverRootProps = ChakraPopover.RootProps;
+export type { PopoverRootProps as RootProps };

package/dist/components/popover/popover.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Popover as ChakraPopover } from '@chakra-ui/react/popover';
+import { CloseButton } from "../close-button/index.js";
+const PopoverContent = forwardRef(function PopoverContent(props, ref) {
+    return (_jsx(ChakraPopover.Positioner, { children: _jsx(ChakraPopover.Content, { ref: ref, ...props }) }));
+});
+const PopoverArrow = forwardRef(function PopoverArrow(props, ref) {
+    return (_jsx(ChakraPopover.Arrow, { ...props, ref: ref, children: _jsx(ChakraPopover.ArrowTip, {}) }));
+});
+const PopoverCloseButton = forwardRef(function PopoverCloseTrigger(props, ref) {
+    return (_jsx(ChakraPopover.CloseTrigger, { ref: ref, asChild: true, children: _jsx(CloseButton, { position: "absolute", top: "1", insetEnd: "1", ...props }) }));
+});
+const PopoverCloseTrigger = ChakraPopover.CloseTrigger;
+const PopoverTitle = ChakraPopover.Title;
+const PopoverDescription = ChakraPopover.Description;
+const PopoverFooter = ChakraPopover.Footer;
+const PopoverHeader = ChakraPopover.Header;
+const PopoverRoot = ChakraPopover.Root;
+const PopoverBody = ChakraPopover.Body;
+const PopoverTrigger = ChakraPopover.Trigger;
+const PopoverContext = ChakraPopover.Context;
+export { PopoverContent as Content, PopoverArrow as Arrow, PopoverCloseButton as CloseButton, PopoverCloseTrigger as CloseTrigger, PopoverTitle as Title, PopoverDescription as Description, PopoverFooter as Footer, PopoverHeader as Header, PopoverRoot as Root, PopoverBody as Body, PopoverTrigger as Trigger, PopoverContext as Context, };

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

@@ -1,2 +1 @@
-export { Portal_alias_1 as Portal } from '../../_tsup-dts-rollup.js';
-export { PortalProps_alias_1 as PortalProps } from '../../_tsup-dts-rollup.js';
+export { Portal, type PortalProps, } from '@chakra-ui/react/portal';

package/dist/components/portal/index.js

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

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

@@ -1,2 +1 @@
-export { Presence_alias_1 as Presence } from '../../_tsup-dts-rollup.js';
-export { PresenceProps_alias_1 as PresenceProps } from '../../_tsup-dts-rollup.js';
+export { Presence, type PresenceProps } from '@chakra-ui/react/presence';

package/dist/components/presence/index.js

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

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

@@ -1 +1 @@
-export { Progress_alias_1 as Progress } from '../../_tsup-dts-rollup.js';
+export { Progress } from '@chakra-ui/react/progress';

package/dist/components/progress/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Progress
-} from "../../chunk-6YZ76Q2W.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Progress
-};
+export { Progress } from '@chakra-ui/react/progress';

package/dist/components/progress-circle/index.d.ts

@@ -1 +1 @@
-export { ProgressCircle_alias_1 as ProgressCircle } from '../../_tsup-dts-rollup.js';
+export { ProgressCircle } from '@chakra-ui/react/progress-circle';

package/dist/components/progress-circle/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  ProgressCircle
-} from "../../chunk-7HAGRXKM.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  ProgressCircle
-};
+export { ProgressCircle } from '@chakra-ui/react/progress-circle';

package/dist/components/qr-code/index.d.ts

@@ -1 +1,2 @@
-export { QrCode_alias_1 as QrCode } from '../../_tsup-dts-rollup.js';
+export { QrCode, useQrCode } from '@chakra-ui/react/qr-code';
+export type { UseQrCodeProps, UseQrCodeReturn } from '@chakra-ui/react/qr-code';

package/dist/components/qr-code/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  QrCode
-} from "../../chunk-K3MFCSAW.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  QrCode
-};
+export { QrCode, useQrCode } from '@chakra-ui/react/qr-code';

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

@@ -0,0 +1 @@
+export { Quote, type QuoteProps, } from '@chakra-ui/react/quote';

package/dist/components/quote/index.js

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

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

@@ -1,2 +1,3 @@
-export { Radio_alias_1 as Radio } from '../../_tsup-dts-rollup.js';
-export { RadioProps_alias_1 as RadioProps } from '../../_tsup-dts-rollup.js';
+export { Radio } from './radio.tsx';
+export type { RadioProps } from './radio.tsx';
+export { RadioGroup } from '@chakra-ui/react/radio-group';

package/dist/components/radio/index.js

@@ -1,8 +1,2 @@
-'use client'
-import {
-  Radio
-} from "../../chunk-PZWP36YA.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Radio
-};
+export { Radio } from "./radio.js";
+export { RadioGroup } from '@chakra-ui/react/radio-group';

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react/radio-group';
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+    rootRef?: React.Ref<HTMLDivElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export type RadioGroupProps = ChakraRadioGroup.RootProps;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<ChakraRadioGroup.RootProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/radio/radio.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react/radio-group';
+export const Radio = forwardRef(function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props;
+    return (_jsxs(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [_jsx(ChakraRadioGroup.ItemHiddenInput, { ref: ref, ...inputProps }), _jsx(ChakraRadioGroup.ItemIndicator, {}), children && (_jsx(ChakraRadioGroup.ItemText, { children: children }))] }));
+});
+export const RadioGroup = ChakraRadioGroup.Root;

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

@@ -1 +1 @@
-export { RadioCard_alias_1 as RadioCard } from '../../_tsup-dts-rollup.js';
+export * as RadioCard from './radio-card.tsx';

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

@@ -1,8 +1 @@
-'use client'
-import {
-  radio_card_exports
-} from "../../chunk-KRJG7H4W.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  radio_card_exports as RadioCard
-};
+export * as RadioCard from "./radio-card.js";

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

@@ -0,0 +1,19 @@
+import { RadioCard } from '@chakra-ui/react/radio-card';
+interface RadioCardItemProps extends RadioCard.ItemProps {
+    icon?: React.ReactElement;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    addon?: React.ReactNode;
+    indicator?: React.ReactNode | null;
+    indicatorPlacement?: 'start' | 'end' | 'inside';
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+declare const RadioCardItem: import("react").ForwardRefExoticComponent<RadioCardItemProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const RadioCardRoot: import("react").ForwardRefExoticComponent<RadioCard.RootProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioCardLabel: import("react").ForwardRefExoticComponent<RadioCard.LabelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioCardItemIndicator: import("react").ForwardRefExoticComponent<RadioCard.ItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { RadioCardRoot as Root, RadioCardLabel as Label, RadioCardItemIndicator as ItemIndicator, RadioCardItem as Item, };
+export type ItemProps = RadioCardItemProps;
+export type RootProps = RadioCard.RootProps;
+export type LabelProps = RadioCard.LabelProps;
+export type ItemIndicatorProps = RadioCard.ItemIndicatorProps;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef } from 'react';
+import { RadioCard } from '@chakra-ui/react/radio-card';
+const RadioCardItem = forwardRef(function RadioCardItem(props, ref) {
+    const { inputProps, label, description, addon, icon, indicator = _jsx(RadioCard.ItemIndicator, {}), indicatorPlacement = 'end', ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? RadioCard.ItemContent : Fragment;
+    return (_jsxs(RadioCard.Item, { ...rest, children: [_jsx(RadioCard.ItemHiddenInput, { ref: ref, ...inputProps }), _jsxs(RadioCard.ItemControl, { children: [indicatorPlacement === 'start' && indicator, hasContent && (_jsxs(ContentWrapper, { children: [icon, label && _jsx(RadioCard.ItemText, { children: label }), description && (_jsx(RadioCard.ItemDescription, { children: description })), indicatorPlacement === 'inside' && indicator] })), indicatorPlacement === 'end' && indicator] }), addon && _jsx(RadioCard.ItemAddon, { children: addon })] }));
+});
+const RadioCardRoot = RadioCard.Root;
+const RadioCardLabel = RadioCard.Label;
+const RadioCardItemIndicator = RadioCard.ItemIndicator;
+export { RadioCardRoot as Root, RadioCardLabel as Label, RadioCardItemIndicator as ItemIndicator, RadioCardItem as Item, };

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

@@ -1 +1 @@
-export { RadioGroup_alias_1 as RadioGroup } from '../../_tsup-dts-rollup.js';
+export { RadioGroup } from '@chakra-ui/react/radio-group';

package/dist/components/radio-group/index.js

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

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

@@ -1,2 +1 @@
-export { Radiomark } from '../../_tsup-dts-rollup.js';
-export { RadiomarkProps } from '../../_tsup-dts-rollup.js';
+export { Radiomark, type RadiomarkProps, } from '@chakra-ui/react/radiomark';

package/dist/components/radiomark/index.js

@@ -1,10 +1 @@
-'use client'
-import "../../chunk-RTMS5TJN.js";
-
-// src/components/radiomark/index.ts
-import {
-  Radiomark
-} from "@chakra-ui/react/radiomark";
-export {
-  Radiomark
-};
+export { Radiomark, } from '@chakra-ui/react/radiomark';

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

@@ -1 +1 @@
-export { RatingGroup_alias_1 as RatingGroup } from '../../_tsup-dts-rollup.js';
+export { RatingGroup } from '@chakra-ui/react/rating-group';

package/dist/components/rating-group/index.js

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

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export { ScrollArea } from '@chakra-ui/react/scroll-area';

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { ScrollArea } from '@chakra-ui/react/scroll-area';

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

@@ -1,2 +1,2 @@
-export { SearchInput_alias_1 as SearchInput } from '../../_tsup-dts-rollup.js';
-export { SearchInputProps_alias_1 as SearchInputProps } from '../../_tsup-dts-rollup.js';
+export { SearchInput } from './search-input.tsx';
+export type { SearchInputProps } from './search-input.tsx';

package/dist/components/search-input/index.js

@@ -1,10 +1 @@
-'use client'
-import {
-  SearchInput
-} from "../../chunk-HJX66GFT.js";
-import "../../chunk-KTLWEUNW.js";
-import "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  SearchInput
-};
+export { SearchInput } from "./search-input.js";

package/dist/components/search-input/search-input.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputProps } from '@chakra-ui/react';
+export interface SearchInputProps extends InputProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    icon?: React.ReactElement;
+    resetIcon?: React.ReactElement;
+    endElement?: React.ReactElement;
+    onReset?: () => void;
+}
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/search-input/search-input.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { Group, IconButton, Input, InputElement, mergeRefs, useControllableState, } from '@chakra-ui/react';
+import { callAll } from '@saas-ui/core/utils';
+import { CloseIcon, SearchIcon } from "../icons/index.js";
+export const SearchInput = forwardRef((props, ref) => {
+    const { placeholder = 'Search', value: valueProp, defaultValue: defaultValueProp, size, variant, width = 'full', icon = _jsx(SearchIcon, {}), resetIcon, endElement: endElementProp, onChange: onChangeProp, onReset: onResetProp, onKeyDown: onKeyDownProp, disabled, ...inputProps } = props;
+    const inputRef = React.useRef(null);
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue: defaultValueProp,
+    });
+    const onChange = React.useCallback((e) => {
+        setValue(e.target.value);
+    }, [setValue]);
+    const onKeyDown = React.useCallback((event) => {
+        if (event.key === 'Escape') {
+            setValue('');
+            onReset();
+        }
+    }, [onResetProp, setValue]);
+    const onReset = () => {
+        setValue('');
+        onResetProp?.();
+        inputRef.current?.focus();
+    };
+    const showReset = value && !props.disabled;
+    const endElement = showReset ? (_jsx(SearchInputResetButton, { size: size, children: resetIcon })) : (endElementProp);
+    return (_jsxs(Group, { width: width, children: [_jsx(InputElement, { placement: "start", px: "0", aspectRatio: "9/10", fontSize: size, children: icon }), _jsx(Input, { type: "text", placeholder: placeholder, variant: variant, size: size, value: value, disabled: disabled, ref: mergeRefs(ref, inputRef), onChange: callAll(onChange, onChangeProp), onKeyDown: callAll(onKeyDown, onKeyDownProp), ps: "calc(var(--input-height) - var(--input-height) / 10)", pe: "calc(var(--input-height) - var(--input-height) / 10)", ...inputProps }), _jsx(InputElement, { placement: "end", children: endElement })] }));
+});
+const SearchInputResetButton = forwardRef((props, ref) => {
+    const { children = _jsx(CloseIcon, {}), ...rest } = props;
+    return (_jsx(IconButton, { ref: ref, variant: "ghost", "aria-label": "Reset search", me: "-2", aspectRatio: "square", height: "calc(100% - {spacing.2})", ...rest, children: children }));
+});
+SearchInput.displayName = 'SearchInput';

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

@@ -0,0 +1,2 @@
+export * as Section from './section.tsx';
+export { useSectionStyles } from './section.context.ts';

package/dist/components/section/index.js

@@ -0,0 +1,2 @@
+export * as Section from "./section.js";
+export { useSectionStyles } from "./section.context.js";

package/dist/components/section/section.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>>, useSectionStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, useClassNames: () => Record<string, string>;

package/dist/components/section/section.context.js

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