@vespiario-thailand/design-system 0.0.15 → 1.3.0

package/dist/components/generals/Button/Button.stories.d.ts

@@ -2,6 +2,7 @@ import { type ButtonProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    parameters: {};
     argTypes: {
         children: {
             control: string;
@@ -24,6 +25,15 @@ declare const _default: {
                 };
             };
         };
+        bgColor: {
+            control: string;
+            description: string;
+            options: string[];
+        };
+        bgShade: {
+            control: string;
+            options: number[];
+        };
         sizes: {
             control: {
                 type: string;
@@ -75,8 +85,31 @@ export declare const Default: {
         sizes: "medium";
         onlyIcon: false;
         variant: "primary";
+        bgColor: undefined;
         isLoading: false;
     };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export declare const CustomBackgroundColor: {
+    render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: undefined;
+        bgColor: "blue";
+        bgShade: 500;
+        children: string;
+        sizes: "medium";
+        onlyIcon: false;
+        isLoading: false;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 /** Simple button with icon template */
 export declare const WithIcon: {
@@ -87,6 +120,7 @@ export declare const WithIcon: {
         sizes: "medium";
         onlyIcon: false;
         variant: "primary";
+        bgColor: undefined;
         isLoading: false;
     };
 };
@@ -100,6 +134,7 @@ export declare const OnlyIcon: {
         onlyIcon: true;
         sizes: "medium";
         variant: "primary";
+        bgColor: undefined;
         isLoading: false;
     };
 };

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

@@ -1,10 +1,10 @@
 /** libs */
 import { ButtonHTMLAttributes } from 'react';
 /** types */
-import { SizeType, ButtonVariantType, IconListType, IconSizeType } from '../../../types';
+import { SizeType, ButtonVariantType, IconListType, IconSizeType, ColorShadeType } from '../../../types';
+type ButtonBackgroundColorType = 'blue' | 'green' | 'light-green' | 'yellow' | 'dark';
 type CommonButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {
     sizes?: SizeType;
-    variant?: ButtonVariantType;
     iconLeft?: IconListType;
     iconLeftSize?: IconSizeType;
     iconRightSize?: IconSizeType;
@@ -17,6 +17,15 @@ type ConditionButtonIconType = {
     onlyIcon?: boolean;
     iconRight?: never;
 };
-export type ButtonProps = CommonButtonType & ConditionButtonIconType;
+type ConditionButtonVariantType = {
+    bgColor?: ButtonBackgroundColorType;
+    bgShade?: ColorShadeType;
+    variant?: never;
+} | {
+    variant?: ButtonVariantType;
+    bgColor?: never;
+    bgShade?: never;
+};
+export type ButtonProps = CommonButtonType & ConditionButtonVariantType & ConditionButtonIconType;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/generals/DatePicker/DatePicker.stories.d.ts

@@ -1,22 +1,27 @@
 import { DateRange } from 'react-day-picker';
+/** component */
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        hideClearIcon?: boolean | undefined;
-    } & {
         mode?: "range" | "single" | undefined;
-        previousYearRange?: number | undefined;
-        nextYearRange?: number | undefined;
-        minDate?: Date | undefined;
-        maxDate?: Date | undefined;
+        minYear?: number | undefined;
+        maxYear?: number | undefined;
         selectedSingleDate?: Date | undefined;
-        onSelectedSingleDate?: ((date: Date | undefined) => void) | undefined;
+        onSelectSingleDate?: ((selectedSingleDate?: Date | undefined) => void) | undefined;
         selectedDateRange?: DateRange | undefined;
-        onSelectedDateRange?: ((dates: DateRange | undefined) => void) | undefined;
+        onSelectDateRange?: ((selectedDateRange?: DateRange | undefined) => void) | undefined;
     } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     argTypes: {
         mode: {
             control: string;
+            description: string;
             options: string[];
             table: {
                 defaultValue: {
@@ -24,81 +29,62 @@ declare const _default: {
                 };
             };
         };
-        minDate: {
-            control: boolean;
-            description: string;
-        };
-        maxDate: {
-            control: boolean;
-            description: string;
-        };
-        previousYearRange: {
+        minYear: {
             control: string;
+            description: string;
             table: {
                 defaultValue: {
-                    summary: number;
+                    summary: undefined;
                 };
             };
         };
-        nextYearRange: {
+        maxYear: {
             control: string;
+            description: string;
             table: {
                 defaultValue: {
-                    summary: number;
+                    summary: undefined;
                 };
             };
         };
         selectedSingleDate: {
             control: boolean;
             description: string;
+            table: {
+                defaultValue: {
+                    summary: undefined;
+                };
+            };
         };
-        onSelectedSingleDate: {
-            control: boolean;
+        onSelectSingleDate: {
+            control: string;
             description: string;
         };
         selectedDateRange: {
             control: boolean;
             description: string;
-        };
-        onSelectedDateRange: {
-            control: boolean;
-            description: string;
-        };
-        hideClearIcon: {
-            control: string;
-            description: string;
             table: {
                 defaultValue: {
-                    summary: boolean;
+                    summary: undefined;
                 };
             };
         };
+        onSelectDateRange: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: {
-        hideClearIcon?: boolean | undefined;
-    } & {
         mode?: "range" | "single" | undefined;
-        previousYearRange?: number | undefined;
-        nextYearRange?: number | undefined;
-        minDate?: Date | undefined;
-        maxDate?: Date | undefined;
+        minYear?: number | undefined;
+        maxYear?: number | undefined;
         selectedSingleDate?: Date | undefined;
-        onSelectedSingleDate?: ((date: Date | undefined) => void) | undefined;
+        onSelectSingleDate?: ((selectedSingleDate?: Date | undefined) => void) | undefined;
         selectedDateRange?: DateRange | undefined;
-        onSelectedDateRange?: ((dates: DateRange | undefined) => void) | undefined;
+        onSelectDateRange?: ((selectedDateRange?: DateRange | undefined) => void) | undefined;
     } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    args: {
-        previousYearRange: number;
-        nextYearRange: number;
-    };
-};
-export declare const Range: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    args: {
-        previousYearRange: number;
-        nextYearRange: number;
-    };
+    args: {};
 };

package/dist/components/generals/DatePicker/DatePickerCaption.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CaptionProps } from 'react-day-picker';
+/** types */
+export type DatePickerCaptionProps = {
+    minYear?: number;
+    maxYear?: number;
+} & CaptionProps;
+export declare const DatePickerCaption: import("react").ForwardRefExoticComponent<{
+    minYear?: number | undefined;
+    maxYear?: number | undefined;
+} & CaptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generals/DatePicker/DatePickerHeadRow.d.ts

@@ -0,0 +1,3 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+export declare const DatePickerHeaderRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/generals/DatePicker/DatePickerInputButton.d.ts

@@ -0,0 +1,17 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** types */
+export type DatePickerInputButtonProps = {
+    placeholder?: string;
+    value?: Date;
+    hideClearIcon?: boolean;
+    active?: boolean;
+    onClear?: () => void;
+} & HTMLAttributes<HTMLButtonElement>;
+export declare const DatePickerInputButton: import("react").ForwardRefExoticComponent<{
+    placeholder?: string | undefined;
+    value?: Date | undefined;
+    hideClearIcon?: boolean | undefined;
+    active?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+} & HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/generals/DatePicker/DatePickerMonthSelector.d.ts

@@ -0,0 +1,15 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** types */
+export type DatePickerMonthSelectorProps = {
+    selectedMonth?: number;
+    onSelectMonth?: (month: number) => void;
+    onPreviousMonth?: () => void;
+    onNextMonth?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DatePickerMonthSelector: import("react").ForwardRefExoticComponent<{
+    selectedMonth?: number | undefined;
+    onSelectMonth?: ((month: number) => void) | undefined;
+    onPreviousMonth?: (() => void) | undefined;
+    onNextMonth?: (() => void) | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generals/DatePicker/DatePickerRange.d.ts

@@ -0,0 +1,16 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+import { DateRange } from 'react-day-picker';
+/** types */
+export type DatePickerRangeProps = {
+    minYear?: number;
+    maxYear?: number;
+    selectedDateRange?: DateRange;
+    onSelectDateRange?: (selectedDateRange?: DateRange) => void;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DatePickerRange: import("react").ForwardRefExoticComponent<{
+    minYear?: number | undefined;
+    maxYear?: number | undefined;
+    selectedDateRange?: DateRange | undefined;
+    onSelectDateRange?: ((selectedDateRange?: DateRange) => void) | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generals/DatePicker/DatePickerSingle.d.ts

@@ -0,0 +1,15 @@
+/** libs */
+import { HTMLAttributes } from 'react';
+/** types */
+export type DatePickerSingleProps = {
+    minYear?: number;
+    maxYear?: number;
+    selectedDate?: Date;
+    onSelectDate?: (selectedDate?: Date) => void;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DatePickerSingle: import("react").ForwardRefExoticComponent<{
+    minYear?: number | undefined;
+    maxYear?: number | undefined;
+    selectedDate?: Date | undefined;
+    onSelectDate?: ((selectedDate?: Date) => void) | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generals/DatePicker/DatePickerYearDDL.d.ts

@@ -2,14 +2,14 @@
 import { HTMLAttributes } from 'react';
 /** types */
 export type DatePickerYearDDLProps = {
-    selected?: Date;
-    onSelected?: (date: Date) => void;
-    previousYearRange?: number;
-    nextYearRange?: number;
+    selectedYear?: number;
+    minYear?: number;
+    maxYear?: number;
+    onSelectYear?: (year: number) => void;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const DatePickerYearDDL: import("react").ForwardRefExoticComponent<{
-    selected?: Date | undefined;
-    onSelected?: ((date: Date) => void) | undefined;
-    previousYearRange?: number | undefined;
-    nextYearRange?: number | undefined;
+    selectedYear?: number | undefined;
+    minYear?: number | undefined;
+    maxYear?: number | undefined;
+    onSelectYear?: ((year: number) => void) | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generals/DatePicker/index.d.ts

@@ -1,31 +1,22 @@
 /** libs */
-import { Dispatch, HTMLAttributes } from 'react';
-import { FloatingContext } from '@floating-ui/react';
-import { DatePickerCalendarProps } from './DatePickerCalendar';
+import { HTMLAttributes } from 'react';
+import { DateRange } from 'react-day-picker';
 /** types */
-export type DataPickerProps = {
-    hideClearIcon?: boolean;
-} & DatePickerCalendarProps & HTMLAttributes<HTMLDivElement>;
-export type DatePickerCtxType = {
-    isActive?: boolean;
-    setIsActive?: Dispatch<boolean>;
-    startIsActive?: boolean;
-    setStartIsActive?: Dispatch<boolean>;
-    endIsActive?: boolean;
-    setEndIsActive?: Dispatch<boolean>;
-    context?: FloatingContext;
-};
-export declare const DatePickerCtx: import("react").Context<DatePickerCtxType>;
+export type DatePickerProps = {
+    mode?: 'single' | 'range';
+    minYear?: number;
+    maxYear?: number;
+    selectedSingleDate?: Date;
+    onSelectSingleDate?: (selectedSingleDate?: Date) => void;
+    selectedDateRange?: DateRange;
+    onSelectDateRange?: (selectedDateRange?: DateRange) => void;
+} & HTMLAttributes<HTMLDivElement>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<{
-    hideClearIcon?: boolean | undefined;
-} & {
     mode?: "range" | "single" | undefined;
-    previousYearRange?: number | undefined;
-    nextYearRange?: number | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
+    minYear?: number | undefined;
+    maxYear?: number | undefined;
     selectedSingleDate?: Date | undefined;
-    onSelectedSingleDate?: ((date: Date | undefined) => void) | undefined;
-    selectedDateRange?: import("react-day-picker").DateRange | undefined;
-    onSelectedDateRange?: ((dates: import("react-day-picker").DateRange | undefined) => void) | undefined;
+    onSelectSingleDate?: ((selectedSingleDate?: Date) => void) | undefined;
+    selectedDateRange?: DateRange | undefined;
+    onSelectDateRange?: ((selectedDateRange?: DateRange) => void) | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/functions/index.d.ts

@@ -2,5 +2,5 @@ import { ColorNameType, ColorShadeType } from '../types';
 declare const isOnlyNumber: (value: string) => boolean;
 declare const setDelay: (ms: number) => Promise<unknown>;
 declare const numberWithCommas: (value: number | string) => string;
-declare const dynamicBackGroundColors: (colorNames: ColorNameType, colorShades: ColorShadeType) => string;
+declare const dynamicBackGroundColors: <T extends ColorNameType = ColorNameType, U extends ColorShadeType = ColorShadeType>(colorNames: T, colorShades: U) => string;
 export { isOnlyNumber, setDelay, numberWithCommas, dynamicBackGroundColors };

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare const cln: (...classes: ClassValue[]) => string;