@serendie/ui 0.1.6

package/dist/components/IconButton.d.ts

@@ -0,0 +1,81 @@
+import { default as React, ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/types';
+export declare const IconButtonStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+    shape: {
+        rectangle: {
+            borderRadius: "sd.system.dimension.radius.medium";
+        };
+        circle: {
+            borderRadius: "sd.system.dimension.radius.full";
+        };
+    };
+    styleType: {
+        filled: {
+            color: "sd.system.color.impression.onPrimaryContainer";
+            bgColor: "sd.system.color.impression.primaryContainer";
+            _enabled: {
+                _hover: {
+                    backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)";
+                };
+                _focusVisible: {
+                    outlineWidth: "sd.system.dimension.border.medium";
+                    outlineStyle: "solid";
+                    outlineColor: "sd.system.color.interaction.hovered";
+                    outlineOffset: "-1px";
+                    backgroundImage: "linear-gradient(0deg, {colors.sd.system.color.interaction.hovered} 0%, {colors.sd.system.color.interaction.hovered} 100%)";
+                };
+            };
+        };
+        outlined: {
+            outlineColor: "sd.system.color.component.outline";
+            bgColor: "sd.system.color.component.surface";
+            _enabled: {
+                _hover: {
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                };
+                _focusVisible: {
+                    outlineColor: "sd.system.color.component.outlineVariant";
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                };
+            };
+        };
+        ghost: {
+            outlineColor: "transparent";
+            _enabled: {
+                _hover: {
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                };
+                _focusVisible: {
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                    outlineColor: "sd.system.color.component.outlineVariant";
+                };
+            };
+            _disabled: {
+                bg: "transparent";
+            };
+        };
+    };
+    size: {
+        large: {
+            w: "{spacing.sd.reference.dimension.scale.17}";
+            h: "{spacing.sd.reference.dimension.scale.17}";
+            "& svg": {
+                width: "sd.reference.dimension.scale.12";
+                height: "sd.reference.dimension.scale.12";
+            };
+        };
+        medium: {
+            w: "{spacing.sd.reference.dimension.scale.13}";
+            h: "{spacing.sd.reference.dimension.scale.13}";
+        };
+        small: {
+            w: "{spacing.sd.reference.dimension.scale.10}";
+            h: "{spacing.sd.reference.dimension.scale.10}";
+        };
+    };
+}>;
+type ButtonProps = RecipeVariantProps<typeof IconButtonStyle> & ComponentProps<"button"> & {
+    icon: React.ReactElement;
+};
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/List.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'react';
+export declare const List: ({ children, ...props }: ComponentProps<"ul">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ListItem.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps } from 'react';
+export declare const ListItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"description" | "title" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+    isLargeLeftIcon: {
+        true: {
+            leftIcon: {
+                "& svg": {
+                    width: "40px";
+                    height: "40px";
+                };
+            };
+        };
+        false: {};
+    };
+    size: {
+        small: {
+            wrapper: {
+                minH: number;
+            };
+        };
+    };
+}>;
+type ListItemBaseProps = {
+    title: string;
+    description?: string;
+    rightIcon?: React.ReactElement;
+    leftIcon?: React.ReactElement;
+    isLargeLeftIcon?: boolean;
+    badge?: number;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    focusVisible?: boolean;
+    size?: "small";
+};
+type ExclusiveRightItemProps = ({
+    badge?: number;
+} & {
+    rightIcon?: never;
+}) | ({
+    badge?: never;
+} & {
+    rightIcon?: React.ReactElement;
+});
+type ListItemProps = ComponentProps<"li"> & ListItemBaseProps & ExclusiveRightItemProps;
+export declare const ListItem: React.FC<ListItemProps>;
+export {};

package/dist/components/ModalDialog.d.ts

@@ -0,0 +1,15 @@
+import { DialogRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+declare const ModalDialogStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+type Props = {
+    isOpen: boolean;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+    cancelButtonLabel?: string;
+    submitButtonLabel: string;
+    onButtonClick: () => void;
+};
+export type ModalDialogProps = Props & DialogRootProps & RecipeVariantProps<typeof ModalDialogStyle>;
+export declare const ModalDialog: React.FC<ModalDialogProps>;
+export {};

package/dist/components/NotificationBadge.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+declare const NotificationBadgeStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
+    size: {
+        small: {
+            root: {
+                height: number;
+                minWidth: number;
+                paddingX: "sd.system.dimension.spacing.twoExtraSmall";
+            };
+        };
+        medium: {
+            root: {
+                height: number;
+                minWidth: number;
+                paddingX: "sd.system.dimension.spacing.extraSmall";
+            };
+        };
+    };
+    variant: {
+        primary: {
+            root: {
+                backgroundColor: "sd.system.color.impression.negative";
+            };
+        };
+        secondary: {
+            root: {
+                backgroundColor: "sd.system.color.impression.primary";
+            };
+        };
+    };
+    noNumber: {
+        true: {
+            root: {
+                height: number;
+                paddingX: number;
+                minWidth: number;
+            };
+        };
+    };
+    position: {
+        relative: {
+            root: {
+                position: "relative";
+            };
+        };
+    };
+}>;
+type BadgeProps = {
+    count?: number;
+};
+export type NotificationBadgeProps = BadgeProps & ComponentProps<"div"> & RecipeVariantProps<typeof NotificationBadgeStyle>;
+export declare const NotificationBadge: React.FC<NotificationBadgeProps>;
+export {};

package/dist/components/ProgressIndicator.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const ProgressIndicatorStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+    size: {
+        small: {
+            width: "16px";
+            height: "16px";
+        };
+        medium: {
+            width: "24px";
+            height: "24px";
+        };
+        large: {
+            width: "96px";
+            height: "96px";
+        };
+    };
+    color: {
+        gray: {
+            stroke: "sd.reference.color.scale.gray.400";
+        };
+        white: {
+            stroke: "sd.reference.color.scale.white.1000";
+        };
+    };
+}>;
+type ProgressIndicatorProps = ComponentProps<"svg"> & RecipeVariantProps<typeof ProgressIndicatorStyle>;
+export declare const ProgressIndicator: ({ className, ...props }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioButton.d.ts

@@ -0,0 +1,30 @@
+import { RadioGroupItemProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const radioIconCss: {
+    flexShrink: number;
+    cursor: string;
+    ".group:has(:focus-visible) &": {
+        backgroundColor: string;
+        borderRadius: string;
+    };
+};
+export declare const radioCheckedIconCss: {
+    color: string;
+    _disabled: {
+        color: string;
+    };
+};
+export declare const radioUncheckedIconCss: {
+    color: string;
+    _disabled: {
+        color: string;
+    };
+};
+export declare const RadioButtonStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"item" | "itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "unCheckedIcon", import('../../styled-system/types').SlotRecipeVariantRecord<"item" | "itemControl" | "checkedIcon" | "itemTextGroup" | "itemText" | "helperText" | "unCheckedIcon">>;
+type RadioButtonItemProps = {
+    label?: string;
+    helperText?: string;
+};
+export type RadioButtonProps = RadioGroupItemProps & RecipeVariantProps<typeof RadioButtonStyle> & RadioButtonItemProps;
+export declare const RadioButton: React.FC<RadioButtonProps>;
+export {};

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,2 @@
+import { RadioGroupRootProps } from '@ark-ui/react';
+export declare const RadioGroup: React.FC<RadioGroupRootProps>;

package/dist/components/Search.d.ts

@@ -0,0 +1,51 @@
+import { ComboboxRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const SearchStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+    size: {
+        medium: {
+            iconBox: {
+                w: "40px";
+            };
+            control: {
+                height: number;
+                gap: "sd.system.dimension.spacing.extraSmall";
+                textStyle: "sd.system.typography.body.medium_compact";
+                paddingTop: "sd.system.dimension.spacing.small";
+                paddingRight: "sd.system.dimension.spacing.extraSmall";
+                paddingBottom: "sd.system.dimension.spacing.small";
+                paddingLeft: "sd.system.dimension.spacing.twoExtraSmall";
+            };
+            comboboxItem: {
+                paddingRight: "sd.system.dimension.spacing.medium";
+                paddingLeft: "sd.system.dimension.spacing.medium";
+                paddingBottom: "sd.system.dimension.spacing.extraSmall";
+                paddingTop: "sd.system.dimension.spacing.extraSmall";
+            };
+        };
+        small: {
+            iconBox: {
+                w: "20px";
+            };
+            control: {
+                height: number;
+                gap: "sd.system.dimension.spacing.twoExtraSmall";
+                textStyle: "sd.system.typography.body.small_compact";
+                paddingTop: "sd.system.dimension.spacing.twoExtraSmall";
+                paddingLeft: "sd.system.dimension.spacing.extraSmall";
+                paddingRight: "sd.system.dimension.spacing.extraSmall";
+                paddingBottom: "sd.system.dimension.spacing.twoExtraSmall";
+                scrollPaddingLeft: "sd.system.dimension.spacing.twoExtraSmall";
+            };
+            comboboxItem: {
+                gap: "sd.system.dimension.spacing.twoExtraSmall";
+                paddingTop: "sd.system.dimension.spacing.extraSmall";
+                paddingRight: "sd.system.dimension.spacing.extraSmall";
+                paddingBottom: "sd.system.dimension.spacing.extraSmall";
+                paddingLeft: "sd.system.dimension.spacing.extraSmall";
+            };
+        };
+    };
+}>;
+type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle>;
+export declare const Search: React.FC<SearchStyleProps>;
+export {};

package/dist/components/Select.d.ts

@@ -0,0 +1,63 @@
+import { SelectRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const SelectStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "root" | "iconBox" | "valueText" | "trigger", {
+    size: {
+        medium: {
+            root: {
+                textStyle: {
+                    base: "sd.system.typography.body.medium_compact";
+                    expanded: "sd.system.typography.body.medium_expanded";
+                };
+            };
+            valueText: {
+                textStyle: {
+                    base: "sd.system.typography.body.medium_compact";
+                    expanded: "sd.system.typography.body.medium_expanded";
+                };
+            };
+            trigger: {
+                height: number;
+            };
+            item: {};
+        };
+        small: {
+            root: {
+                gridTemplateColumns: "minmax(auto, 150px)";
+                textStyle: {
+                    base: "sd.system.typography.body.small_compact";
+                };
+            };
+            valueText: {
+                textStyle: {
+                    base: "sd.system.typography.body.small_compact";
+                    expanded: "sd.system.typography.body.small_expanded";
+                };
+            };
+            trigger: {
+                height: number;
+                paddingTop: "sd.system.dimension.spacing.twoExtraSmall";
+                paddingRight: "sd.system.dimension.spacing.extraSmall";
+                paddingBottom: "sd.system.dimension.spacing.twoExtraSmall";
+                paddingLeft: "sd.system.dimension.spacing.extraSmall";
+                borderRadius: "sd.system.dimension.radius.small";
+            };
+            content: {
+                borderRadius: "sd.system.dimension.radius.small";
+            };
+            item: {};
+        };
+    };
+}>;
+type Props = {
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    invalidMessage?: string;
+};
+type selectItem = {
+    label: string;
+    value: string;
+};
+type SelectStyleProps = Props & SelectRootProps<selectItem> & RecipeVariantProps<typeof SelectStyle>;
+export declare const Select: React.FC<SelectStyleProps>;
+export {};

package/dist/components/SvgIcon.d.ts

@@ -0,0 +1,75 @@
+declare const icons: {
+    add: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    avatar: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    check: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    checkCircle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    arrow_outward: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    arrow_blank: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    content_copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    clipboard_copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    chevron_left: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    chevron_right: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    close: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    face: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    search: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    texture: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    expandMore: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    errorCircle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    error: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    error_fill: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    info: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    menu: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    account_circle: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    settings: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+};
+export type SvgIconName = keyof typeof icons;
+interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
+    icon: SvgIconName;
+    size?: string;
+}
+export declare const SvgIcon: React.FC<SvgIconProps>;
+export {};

package/dist/components/SvgIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SvgIcon } from './SvgIcon';
+declare const meta: Meta<typeof SvgIcon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const CustomClassName: Story;

package/dist/components/Switch.d.ts

@@ -0,0 +1,10 @@
+import { Switch as ArkSwitch, SwitchRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const SwitchStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb", import('../../styled-system/types').SlotRecipeVariantRecord<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb">>;
+type SwitchItemProps = {
+    label: string;
+    helperText?: string;
+};
+export type SwitchProps = SwitchRootProps & RecipeVariantProps<typeof SwitchStyle> & SwitchItemProps;
+export declare const Switch: import('react').ForwardRefExoticComponent<ArkSwitch.RootProps & {} & SwitchItemProps & import('react').RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/components/TabItem.d.ts

@@ -0,0 +1,22 @@
+import { Tabs as ArkTabs } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const TabItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "dot" | "trigger" | "badgeBox", import('../../styled-system/types').SlotRecipeVariantRecord<"badge" | "dot" | "trigger" | "badgeBox">>;
+type TabItemBaseProps = {
+    title: string;
+    value: string;
+    dot?: boolean;
+    disabled?: boolean;
+    badge?: number;
+};
+type ExclusiveBadgeProps = ({
+    badge?: number;
+} & {
+    dot?: never;
+}) | ({
+    badge?: never;
+} & {
+    dot?: boolean;
+});
+export type TabItemProps = TabItemBaseProps & RecipeVariantProps<typeof TabItemStyle> & ArkTabs.TriggerProps & ExclusiveBadgeProps;
+export declare const TabItem: ({ title, value, disabled, dot, badge, className, ...props }: TabItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,3 @@
+import { Tabs as ArkTabs } from '@ark-ui/react';
+export declare const TabsStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
+export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const TextArea: React.ForwardRefExoticComponent<{
+    label?: string;
+    description?: string;
+    invalid?: boolean;
+    invalidMessage?: string;
+    autoAdjustHeight?: boolean;
+} & Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextField.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export declare const TextField: React.ForwardRefExoticComponent<{
+    label?: string;
+    description?: string;
+    invalid?: boolean;
+    invalidMessage?: string;
+} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Toast.d.ts

@@ -0,0 +1,35 @@
+import { createToaster } from '@ark-ui/react';
+export declare const ToastStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "text" | "root" | "textGroup", {
+    variant: {
+        default: {
+            root: {
+                background: "sd.system.color.component.inverseSurface";
+            };
+            text: {
+                color: "sd.system.color.component.inverseOnSurface";
+            };
+            icon: {
+                color: "sd.system.color.impression.positive";
+            };
+        };
+        error: {
+            root: {
+                background: "sd.system.color.impression.negativeContainer";
+                borderColor: "sd.system.color.impression.negative";
+                borderWidth: number;
+            };
+            text: {
+                color: "sd.system.color.impression.negative";
+            };
+            icon: {
+                color: "sd.system.color.impression.negative";
+            };
+        };
+    };
+}>;
+declare const toaster: ReturnType<typeof createToaster>;
+type ToastProps = {
+    toaster: typeof toaster;
+};
+declare const Toast: React.FC<ToastProps>;
+export { Toast, toaster };

package/dist/components/TopAppBar.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+import { NotificationBadgeProps } from './NotificationBadge';
+declare const topAppBarStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "left" | "title" | "root" | "buttonContainer", {
+    type: {
+        navbar: {};
+        titleBar: {};
+        titleBarTitleOnly: {
+            root: {
+                _lastOfType: {
+                    paddingBottom: "8px";
+                };
+                _firstOfType: {
+                    paddingBottom: "0px";
+                };
+            };
+        };
+    };
+}>;
+type VariantProps = Omit<RecipeVariantProps<typeof topAppBarStyle>, "type">;
+type BaseProps = {
+    headingIconButton?: React.ReactElement;
+    trailingIconButtons?: React.ReactElement;
+    badge?: NotificationBadgeProps["count"];
+    title?: string;
+} & VariantProps & ComponentProps<"nav">;
+type NavbarProps = BaseProps & {
+    type: "navbar";
+    title?: string;
+};
+type TitleBarProps = BaseProps & {
+    type: "titleBar";
+    title: string;
+};
+type Props = React.FC<NavbarProps | TitleBarProps>;
+export declare const TopAppBar: Props;
+export {};