@vespiario-thailand/design-system 0.0.1 → 0.0.3

package/README.md

@@ -1 +1,24 @@
-# init-vite-storybook
+# Vespiario Thailand
+
+## vespa-design-system
+
+This project was created with
+
+- [Vite js](https://vitejs.dev/).
+- [Storybook](https://storybook.js.org/).
+- [TailwindCSS](https://tailwindcss.com/).
+
+### `yarn build`
+
+Builds the app for production to the `dist` folder.\
+Use this for publishing to npm package `@VespiarioThailand/design-system`.
+
+### `yarn storybook`
+
+Runs the app in the storybook development mode.\
+Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
+
+### `yarn build-storybook`
+
+Builds the app for production to the `storybook-static` folder.\
+Use this for deploying to staging site.

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,5 @@
+/** libs */
+import React, { LiHTMLAttributes } from 'react';
+/** types */
+export type BreadcrumbItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/Breadcrumb/BreadcrumbLink.d.ts

@@ -0,0 +1,5 @@
+/** libs */
+import React, { AnchorHTMLAttributes } from 'react';
+/** types */
+export type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,8 @@
+/** libs */
+import React, { HTMLAttributes } from 'react';
+/** types */
+export type BreadcrumbProps = HTMLAttributes<HTMLDivElement>;
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<import("./BreadcrumbItem").BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<import("./BreadcrumbLink").BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+};

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

@@ -1,5 +1,21 @@
+/** libs */
+import { ButtonHTMLAttributes } from 'react';
 /** types */
-import { CommonButtonType, ConditionButtonIconType } from '../../types/Button';
+import { ButtonSizeType, ButtonVariantType } from '../../types/Button';
+import { IconType } from '../../types/Icon';
+type CommonButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {
+    sizes?: ButtonSizeType;
+    variant?: ButtonVariantType;
+    iconLeft?: IconType;
+    isLoading?: boolean;
+};
+type ConditionButtonIconType = {
+    onlyIcon?: never;
+    iconRight?: IconType;
+} | {
+    onlyIcon?: boolean;
+    iconRight?: never;
+};
 export type ButtonPropType = CommonButtonType & ConditionButtonIconType;
-declare const Button: import("react").ForwardRefExoticComponent<ButtonPropType & import("react").RefAttributes<HTMLButtonElement>>;
-export default Button;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonPropType & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,10 @@
+/** libs */
+import { ButtonHTMLAttributes } from 'react';
+/** types */
+import { ButtonCrossVariantsType } from '../../types/ButtonCross';
+export type ButtonCrossProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonCrossVariantsType;
+};
+export declare const ButtonCross: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "reset-input" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,11 +1,10 @@
-/** lib */
+/** libs */
 import { HTMLAttributes } from 'react';
-export declare const ChipVariants: readonly ["light", "dark"];
-export type ChipVariantsType = typeof ChipVariants[number];
+/** types */
+import { ChipVariantsType } from '../../types/Chip';
 export type ChipProps = HTMLAttributes<HTMLSpanElement> & {
-    variants: ChipVariantsType;
+    variant?: ChipVariantsType;
 };
-declare const Chip: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
-    variants: ChipVariantsType;
+export declare const Chip: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    variant?: "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLSpanElement>>;
-export default Chip;

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

@@ -1,8 +1,6 @@
-import * as RadixDialog from '@radix-ui/react-dialog';
-export declare const fixedPositionCss = "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
-declare const CompoundDialog: ((props: RadixDialog.DialogProps) => JSX.Element) & {
-    Confirm: (props: RadixDialog.DialogCloseProps) => JSX.Element;
-    Content: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+import * as PrimitiveDialog from '@radix-ui/react-dialog';
+export declare const Dialog: ((props: PrimitiveDialog.DialogProps) => JSX.Element) & {
+    Confirm: (props: PrimitiveDialog.DialogCloseProps) => JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<PrimitiveDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<PrimitiveDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
-export default CompoundDialog;

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

@@ -1,15 +1,16 @@
-/** lib */
+/** libs */
 import { HTMLAttributes } from 'react';
-/** type */
+/** types */
 import { IconColorType, IconSizeType, IconType } from '../../types/Icon';
-export type IconProps = HTMLAttributes<HTMLDivElement> & {
-    icon: IconType;
+export type IconProps = HTMLAttributes<HTMLSpanElement> & {
+    icon?: IconType;
     size?: IconSizeType;
     color?: IconColorType;
+    iconClassName?: string;
 };
-declare const Icon: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    icon: IconType;
-    size?: "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "60" | "72" | "80" | undefined;
-    color?: "blue" | "green" | "light-green" | "yellow" | "dark" | "light" | "shade-dark" | "shade-light" | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default Icon;
+export declare const Icon: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    icon?: "pause" | "play" | "stop" | "list" | "arrowhead-sm-right" | "null-1" | "null-2" | "arrowhead-top" | "arrowhead-left" | "arrowhead-right" | "arrowhead-bottom" | "arrowhead-sm-top" | "arrowhead-sm-left" | "arrowhead-sm-bottom" | "round-arrow-top" | "round-arrow-left" | "round-arrow-right" | "round-arrow-bottom" | "round-solid-arrow-top" | "round-solid-arrow-left" | "round-solid-arrow-right" | "round-solid-arrow-bottom" | "cross" | "plus" | "bar" | "double-bar" | "bow-tie" | "first" | "last" | "globe" | "tako" | "kebab" | "cheese" | "veggie" | "meatball" | "hamburger" | "vespa" | "check" | "align-left" | "align-center" | "align-justify-center" | "align-justify-full" | "align-justify-left" | "align-justify-right" | "align-object-bottom" | "align-object-center" | "align-object-left" | "align-object-middle" | "align-object-right" | "align-object-top" | "align-right" | "bag-1" | "bag-2" | "bag-3" | "bag-4" | "download-1" | "download-2" | "grid-1" | "grid-2" | "cloud-error" | "cloud-upload" | "cloud-download" | "cloud" | "star-1" | "star-2" | "star-3" | "star-4" | "star-5" | "upload-1" | "upload-2" | "clipboard" | undefined;
+    size?: "16" | "12" | "20" | "24" | "32" | "40" | "48" | "56" | "60" | "72" | "80" | undefined;
+    color?: "blue-500" | "green-500" | "light-green-500" | "yellow-500" | "dark-100" | "light-100" | "light-300" | "shade-dark-500" | "shade-light-500" | undefined;
+    iconClassName?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,10 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** types */
+import { AspectRatioType } from '../../types/ImagePlaceholder';
+export type ImagePlaceholderProps = HTMLAttributes<HTMLDivElement> & {
+    aspectRatio?: AspectRatioType;
+};
+export declare const ImagePlaceholder: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    aspectRatio?: "1/1" | "3/4" | "4/3" | "16/9" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,12 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** types */
+import { LogoColorsType } from '../../types/Logo';
+export type LogoProps = HTMLAttributes<HTMLImageElement> & {
+    logoColors?: LogoColorsType;
+    alt?: string;
+};
+export declare const Logo: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & {
+    logoColors?: "light" | "dark" | "default" | undefined;
+    alt?: string | undefined;
+} & import("react").RefAttributes<HTMLImageElement>>;

package/dist/components/NumberSwitch/NumberSwitchButton.d.ts

@@ -0,0 +1,8 @@
+/** libs */
+import { ButtonHTMLAttributes } from 'react';
+export type NumberSwitchButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'decrease' | 'increase';
+};
+export declare const NumberSwitchButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "decrease" | "increase" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/NumberSwitch/NumberSwitchInput.d.ts

@@ -0,0 +1,5 @@
+/** libs */
+import { InputHTMLAttributes } from 'react';
+type NumberSwitchInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const NumberSwitchInput: import("react").ForwardRefExoticComponent<NumberSwitchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,14 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+export type NumberSwitchCtxType = {
+    isError?: boolean;
+};
+export declare const NumberSwitchCtx: import("react").Context<NumberSwitchCtxType>;
+export declare const NumberSwitch: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    isError?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>> & {
+    Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        variant?: "decrease" | "increase" | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+};

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

@@ -0,0 +1,11 @@
+import * as PrimitivePopover from '@radix-ui/react-popover';
+export declare const Popover: {
+    (props: PrimitivePopover.PopoverProps): JSX.Element;
+    displayName: string;
+} & {
+    Content: import("react").ForwardRefExoticComponent<PrimitivePopover.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Anchor: import("react").ForwardRefExoticComponent<PrimitivePopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").FC<PrimitivePopover.PopoverPortalProps>;
+    Trigger: import("react").ForwardRefExoticComponent<PrimitivePopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<PrimitivePopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/Select/SelectContent.d.ts

@@ -0,0 +1,2 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/SelectItem.d.ts

@@ -0,0 +1,2 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/SelectTrigger.d.ts

@@ -0,0 +1,2 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,16 @@
+/** libs */
+import { Dispatch, SetStateAction } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export type SelectCtxType = {
+    contentWidth?: number | null;
+    setContentWidth?: Dispatch<SetStateAction<number | null>>;
+};
+export declare const SelectCtx: import("react").Context<SelectCtxType>;
+export declare const Select: {
+    (props: SelectPrimitive.SelectProps): JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,2 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderPrimitive.SliderProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
-declare const Stack: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    direction: 'horizon' | 'vertical';
-    gap: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40;
+export declare const Stack: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    direction?: "vertical" | "horizon" | undefined;
+    gap?: 0 | 4 | 8 | 16 | 12 | 20 | 24 | 32 | 40 | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export default Stack;

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

@@ -0,0 +1,8 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+/** types */
+export type SwitchProps = SwitchPrimitive.SwitchProps & {
+    isError?: boolean;
+};
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchPrimitive.SwitchProps & {
+    isError?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,9 @@
+/** libs */
+import { TextareaHTMLAttributes } from 'react';
+/** types */
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    isError?: boolean;
+};
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    isError?: boolean | undefined;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,9 @@
+/** libs */
+import { InputHTMLAttributes } from 'react';
+/** types */
+export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+    isError?: boolean;
+};
+export declare const TextField: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    isError?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TextFieldGroup/TextFieldGroupLeftElement.d.ts

@@ -0,0 +1,4 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+export type TextFieldGroupLeftElementProps = HTMLAttributes<HTMLDivElement>;
+export declare const TextFieldGroupLeftElement: import("react").ForwardRefExoticComponent<TextFieldGroupLeftElementProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TextFieldGroup/TextFieldGroupRightElement.d.ts

@@ -0,0 +1,4 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+export type TextFieldGroupRightElementProps = HTMLAttributes<HTMLDivElement>;
+export declare const TextFieldGroupRightElement: import("react").ForwardRefExoticComponent<TextFieldGroupRightElementProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** components */
+import { TextFieldGroupLeftElementProps } from './TextFieldGroupLeftElement';
+import { TextFieldGroupRightElementProps } from './TextFieldGroupRightElement';
+export type { TextFieldGroupLeftElementProps, TextFieldGroupRightElementProps };
+export type TextFieldGroupProps = HTMLAttributes<HTMLDivElement>;
+export declare const TextFieldGroup: import("react").ForwardRefExoticComponent<TextFieldGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    LeftElement: import("react").ForwardRefExoticComponent<TextFieldGroupLeftElementProps & import("react").RefAttributes<HTMLDivElement>>;
+    RightElement: import("react").ForwardRefExoticComponent<TextFieldGroupRightElementProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/TextFieldSlug/TextFieldSlugInput.d.ts

@@ -0,0 +1,6 @@
+/** components */
+import { TextFieldProps } from '../TextField';
+export type TextFieldSlugInputProps = TextFieldProps;
+export declare const TextFieldSlugInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    isError?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TextFieldSlug/TextFieldSlugPrefix.d.ts

@@ -0,0 +1,8 @@
+/** components */
+import { TextFieldGroupLeftElementProps } from '../TextFieldGroup';
+export type TextFieldSlugPrefixProps = TextFieldGroupLeftElementProps & {
+    disabled?: boolean;
+};
+export declare const TextFieldSlugPrefix: import("react").ForwardRefExoticComponent<TextFieldGroupLeftElementProps & {
+    disabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,22 @@
+/** components */
+import { type TextFieldGroupProps } from '../TextFieldGroup';
+export type TextFieldSlugCtxType = {
+    isError?: boolean;
+    disabled?: boolean;
+};
+export declare const TextFieldSlugCtx: import("react").Context<TextFieldSlugCtxType>;
+export type TextFieldSlugProps = TextFieldGroupProps & {
+    isError?: boolean;
+    disabled?: boolean;
+};
+export declare const TextFieldSlug: import("react").ForwardRefExoticComponent<TextFieldGroupProps & {
+    isError?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Prefix: import("react").ForwardRefExoticComponent<import("../TextFieldGroup").TextFieldGroupLeftElementProps & {
+        disabled?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+        isError?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+};

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

@@ -0,0 +1,14 @@
+import * as PrimitiveTooltip from '@radix-ui/react-tooltip';
+/** types */
+import { TooltipVariantsType } from '../../types/Tooltip';
+export type TooltipProps = PrimitiveTooltip.TooltipContentProps & {
+    variant?: TooltipVariantsType;
+};
+export declare const TooltipProvider: import("react").FC<PrimitiveTooltip.TooltipProviderProps>;
+export declare const Tooltip: ((props: PrimitiveTooltip.TooltipProps) => JSX.Element) & {
+    Content: import("react").ForwardRefExoticComponent<PrimitiveTooltip.TooltipContentProps & {
+        variant?: "light" | "dark" | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").FC<PrimitiveTooltip.TooltipPortalProps>;
+    Trigger: import("react").ForwardRefExoticComponent<PrimitiveTooltip.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/TouchPoint/TouchPointLabel.d.ts

@@ -0,0 +1,8 @@
+/** libs */
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const TouchPointLabel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    isBorder?: boolean | undefined;
+    children?: ReactNode;
+    size?: "small" | "medium" | "large" | undefined;
+    shadow?: "none" | "100" | "200" | "300" | "400" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+/** libs */
+import { ButtonHTMLAttributes } from 'react';
+/** types */
+export type TouchPointType = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const TouchPoint: import("react").ForwardRefExoticComponent<TouchPointType & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,12 +1,16 @@
 /** libs */
-import React from 'react';
+import React, { HTMLAttributes, ElementType } from 'react';
 /** types */
-import { HTMLTagType, TextSizeType, TextStyleType, TextWeightType } from '../../types/Typo';
-type TypoForwardRefType = HTMLHeadingElement & HTMLParagraphElement & HTMLSpanElement;
-declare const Typo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement & HTMLParagraphElement & HTMLSpanElement> & {
-    as: HTMLTagType;
-    size: TextSizeType;
-    textStyle: TextStyleType;
-    weight: TextWeightType;
-} & React.RefAttributes<TypoForwardRefType>>;
-export default Typo;
+import { TextSizeType, TextStyleType, TextWeightType } from '../../types/Typo';
+export type TypoProps = HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+    size?: TextSizeType;
+    textStyle?: TextStyleType;
+    weight?: TextWeightType;
+};
+export declare const Typo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any> | undefined;
+    size?: "body" | "caption" | "title-large" | "title-medium" | "title-small" | "title-small-alt" | "body-large" | "body-small" | undefined;
+    textStyle?: "normal" | "italic" | undefined;
+    weight?: "bold" | "normal" | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/dist/constants/Button/index.d.ts

@@ -0,0 +1,3 @@
+declare const buttonVariantList: readonly ["primary", "secondary", "outline"];
+declare const buttonSizeList: readonly ["small", "medium", "large"];
+export { buttonVariantList, buttonSizeList };

package/dist/constants/ButtonCross/index.d.ts

@@ -0,0 +1,2 @@
+declare const buttonCrossVariants: readonly ["reset-input"];
+export { buttonCrossVariants };

package/dist/constants/Chip/index.d.ts

@@ -0,0 +1,2 @@
+declare const chipVariants: readonly ["light", "dark"];
+export { chipVariants };

package/dist/constants/Icon/index.d.ts

@@ -0,0 +1,4 @@
+declare const iconLists: readonly ["null-1", "null-2", "arrowhead-top", "arrowhead-left", "arrowhead-right", "arrowhead-bottom", "arrowhead-sm-top", "arrowhead-sm-left", "arrowhead-sm-right", "arrowhead-sm-bottom", "round-arrow-top", "round-arrow-left", "round-arrow-right", "round-arrow-bottom", "round-solid-arrow-top", "round-solid-arrow-left", "round-solid-arrow-right", "round-solid-arrow-bottom", "cross", "plus", "bar", "double-bar", "bow-tie", "play", "stop", "pause", "first", "last", "globe", "tako", "kebab", "cheese", "veggie", "meatball", "hamburger", "vespa", "check", "align-left", "align-center", "align-justify-center", "align-justify-full", "align-justify-left", "align-justify-right", "align-object-bottom", "align-object-center", "align-object-left", "align-object-middle", "align-object-right", "align-object-top", "align-right", "bag-1", "bag-2", "bag-3", "bag-4", "download-1", "download-2", "grid-1", "grid-2", "list", "cloud-error", "cloud-upload", "cloud-download", "cloud", "star-1", "star-2", "star-3", "star-4", "star-5", "upload-1", "upload-2", "clipboard"];
+declare const iconColors: readonly ["blue-500", "green-500", "light-green-500", "yellow-500", "dark-100", "light-100", "light-300", "shade-dark-500", "shade-light-500"];
+declare const iconSizes: readonly ["12", "16", "20", "24", "32", "40", "48", "56", "60", "72", "80"];
+export { iconColors, iconLists, iconSizes };

package/dist/constants/ImagePlaceholder/index.d.ts

@@ -0,0 +1,2 @@
+declare const aspectRatioList: readonly ["1/1", "3/4", "4/3", "16/9"];
+export { aspectRatioList };

package/dist/constants/Logo/index.d.ts

@@ -0,0 +1,2 @@
+declare const logoColors: readonly ["default", "light", "dark"];
+export { logoColors };

package/dist/constants/Paginate/index.d.ts

@@ -0,0 +1,2 @@
+declare const paginateThemes: readonly ["light", "dark"];
+export { paginateThemes };

package/dist/constants/Stack/index.d.ts

@@ -0,0 +1,3 @@
+declare const stackDirections: readonly ["horizon", "vertical"];
+declare const stackGaps: readonly [0, 4, 8, 12, 16, 20, 24, 32, 40];
+export { stackDirections, stackGaps };

package/dist/constants/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+declare const tooltipVariants: readonly ["light", "dark"];
+export { tooltipVariants };

package/dist/constants/TouchPoint/index.d.ts

@@ -0,0 +1,3 @@
+declare const touchPointLabelSizes: readonly ["small", "medium", "large"];
+declare const touchPointLabelShadows: readonly ["none", "100", "200", "300", "400"];
+export { touchPointLabelSizes, touchPointLabelShadows };

package/dist/constants/Typo/index.d.ts

@@ -0,0 +1,4 @@
+declare const textSizes: readonly ["title-large", "title-medium", "title-small", "title-small-alt", "body-large", "body", "body-small", "caption"];
+declare const textStyles: readonly ["italic", "normal"];
+declare const textWeights: readonly ["bold", "normal"];
+export { textSizes, textStyles, textWeights };

package/dist/custom-theme.cjs

@@ -2,6 +2,12 @@
 
 module.exports = {
   theme: {
+    aspectRatio: {
+      '1/1': '1 / 1',
+      '3/4': '3 / 4',
+      '4/3': '4 / 3',
+      '16/9': '16 / 9',
+    },
     boxShadow: {
       100: '0px 4px 4px -1px rgba(0, 0, 0, 0.25)',
       200: '0px 8px 8px -2px rgba(0, 0, 0, 0.25)',
@@ -24,7 +30,7 @@ module.exports = {
     },
     fontFamily: {
       'vespa-thai': ['Vespiario Thai', 'system-ui', 'sans-serif'],
-      'vespa-thai-italic': ['Vespiario Condensed Italic',  'system-ui', 'sans-serif']
+      'vespa-thai-italic': ['Vespiario Condensed Italic', 'system-ui', 'sans-serif'],
     },
     fontSize: {
       /** name: [fontSize, lineHeight] */
@@ -45,11 +51,17 @@ module.exports = {
     },
     spacing: {
       0: '0',
+      2: '2px',
       4: '4px',
+      6: '6px',
       8: '8px',
+      10: '10px',
       12: '12px',
+      14: '14px',
       16: '16px',
+      18: '18px',
       20: '20px',
+      22: '22px',
       24: '24px',
       32: '32px',
       40: '40px',
@@ -157,18 +169,18 @@ module.exports = {
     keyframes: {
       overlayShow: {
         from: { opacity: 0 },
-        to: { opacity: 1 }
+        to: { opacity: 1 },
       },
       contentShow: {
         from: {
           opacity: 0,
-          transform: 'translate(-50%, -48%) scale(0.96)'
+          transform: 'translate(-50%, -48%) scale(0.96)',
         },
         to: {
           opacity: 1,
-          transform: 'translate(-50%, -50%) scale(1)'
-        }
-      }
-    }
-  }
-}
+          transform: 'translate(-50%, -50%) scale(1)',
+        },
+      },
+    },
+  },
+}

package/dist/functions/index.d.ts

@@ -0,0 +1,4 @@
+declare const isOnlyNumber: (value: string) => boolean;
+declare const setDelay: (ms: number) => Promise<unknown>;
+declare const numberWithCommas: (value: number | string) => string;
+export { isOnlyNumber, setDelay, numberWithCommas };

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

package/dist/hooks/useMergeRefs.d.ts

@@ -1,3 +1,3 @@
-import React, { MutableRefObject, LegacyRef, RefCallback } from 'react';
-declare const useMergeRefs: <T = any>(refs: (React.LegacyRef<T> | React.MutableRefObject<T>)[]) => (instance: T | null) => void;
+import { MutableRefObject, LegacyRef, RefCallback } from 'react';
+declare const useMergeRefs: <T = unknown>(refs: (LegacyRef<T> | MutableRefObject<T>)[]) => (instance: T | null) => void;
 export default useMergeRefs;