@vespiario-thailand/design-system 0.0.15 → 1.3.1

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

@@ -24,6 +24,24 @@ declare const _default: {
                 };
             };
         };
+        color: {
+            control: string;
+            description: string;
+            options: string[];
+        };
+        shade: {
+            control: string;
+            options: number[];
+        };
+        contentColor: {
+            control: string;
+            description: string;
+            options: string[];
+        };
+        contentShade: {
+            control: string;
+            options: number[];
+        };
         sizes: {
             control: {
                 type: string;
@@ -67,18 +85,83 @@ declare const _default: {
     };
 };
 export default _default;
-/** Simple button template */
-export declare const Default: {
+/**
+ * <h4>Simple Primary button</h4>
+ * Can custom background color with prop `color` and `shade`<br/>
+ * Can custom text and icon color with `contentColor` and `contentShade`
+ */
+export declare const Primary: {
     render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
     args: {
+        variant: "primary";
         children: string;
         sizes: "medium";
         onlyIcon: false;
-        variant: "primary";
+        color: undefined;
+        shade: undefined;
+        contentColor: undefined;
+        contentShade: undefined;
+        isLoading: false;
+        disabled: false;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+/**
+ * <h4>Simple Secondary button</h4>
+ * Can custom text and icon color with `color` and `shade`
+ */
+export declare const Secondary: {
+    render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: "secondary";
+        children: string;
+        sizes: "medium";
+        onlyIcon: false;
+        color: undefined;
+        shade: undefined;
+        contentColor: undefined;
+        contentShade: undefined;
         isLoading: false;
+        disabled: false;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+/**
+ * <h4>Simple Outline button</h4>
+ * Can not custom background, text and icon color
+ */
+export declare const Outline: {
+    render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: "outline";
+        children: string;
+        sizes: "medium";
+        onlyIcon: false;
+        color: undefined;
+        shade: undefined;
+        contentColor: undefined;
+        contentShade: undefined;
+        isLoading: false;
+        disabled: false;
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
     };
 };
-/** Simple button with icon template */
+/**
+ * <h4>Simple button with icon template</h4>
+ * Can custom background text and icon up on button variants
+ */
 export declare const WithIcon: {
     render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -87,10 +170,18 @@ export declare const WithIcon: {
         sizes: "medium";
         onlyIcon: false;
         variant: "primary";
+        color: undefined;
+        shade: undefined;
+        contentColor: undefined;
+        contentShade: undefined;
         isLoading: false;
+        disabled: false;
     };
 };
-/** Simple button only icon template */
+/**
+ * <h4>Simple button only icon template</h4>
+ * Can custom background text and icon up on button variants
+ */
 export declare const OnlyIcon: {
     render: (args: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -100,6 +191,11 @@ export declare const OnlyIcon: {
         onlyIcon: true;
         sizes: "medium";
         variant: "primary";
+        color: undefined;
+        shade: undefined;
+        contentColor: undefined;
+        contentShade: undefined;
         isLoading: false;
+        disabled: false;
     };
 };

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

@@ -1,10 +1,11 @@
 /** libs */
 import { ButtonHTMLAttributes } from 'react';
 /** types */
-import { SizeType, ButtonVariantType, IconListType, IconSizeType } from '../../../types';
+import { SizeType, IconListType, IconSizeType } from '../../../types';
+type ButtonBackgroundColorType = 'blue' | 'green' | 'light-green' | 'yellow' | 'dark';
+type ButtonBackgroundShadeType = 100 | 200 | 300 | 400 | 500 | 600 | 700;
 type CommonButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {
     sizes?: SizeType;
-    variant?: ButtonVariantType;
     iconLeft?: IconListType;
     iconLeftSize?: IconSizeType;
     iconRightSize?: IconSizeType;
@@ -17,6 +18,25 @@ type ConditionButtonIconType = {
     onlyIcon?: boolean;
     iconRight?: never;
 };
-export type ButtonProps = CommonButtonType & ConditionButtonIconType;
+type ConditionButtonColorsType = {
+    variant?: 'primary';
+    color?: ButtonBackgroundColorType;
+    shade?: ButtonBackgroundShadeType;
+    contentColor?: ButtonBackgroundColorType;
+    contentShade?: ButtonBackgroundShadeType;
+} | {
+    variant?: 'secondary';
+    color?: ButtonBackgroundColorType;
+    shade?: ButtonBackgroundShadeType;
+    contentColor?: never;
+    contentShade?: never;
+} | {
+    variant?: 'outline';
+    color?: never;
+    shade?: never;
+    contentColor?: never;
+    contentShade?: never;
+};
+export type ButtonProps = CommonButtonType & ConditionButtonIconType & ConditionButtonColorsType;
 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/custom-theme.cjs

@@ -467,7 +467,8 @@ module.exports = {
   safelist: [
     {
       pattern:
-        /bg-(blue|green|light-green|yellow|dark|light|shade-dark|shade-light)-(100|200|300|400|500|600|700|800|900)/,
+        /(bg|text)-(blue|green|light-green|yellow|dark|light|shade-dark|shade-light)-(100|200|300|400|500|600|700|800|900)/,
+      variants: ['hover', 'active', '[&:not(:disabled)]:hover', '[&:not(:disabled)]:active', 'disabled'],
     },
   ],
 }

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;