@wishket/design-system 0.3.0 → 0.5.0

package/dist/Components/Atoms/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,3 @@
+import { LoadingIndicatorProps } from './LoadingIndicator.types';
+declare const LoadingIndicator: ({ isFixed, size, }: LoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadingIndicator;

package/dist/Components/Atoms/LoadingIndicator/LoadingIndicator.parts.d.ts

@@ -0,0 +1,3 @@
+import { LoadingIndicatorSize } from './LoadingIndicator.types';
+export declare const generateBoxSize: (size: LoadingIndicatorSize) => "w-4" | "w-6" | "w-8" | "w-12" | "w-16" | "w-20" | "w-24" | "w-32";
+export declare const generateSpinnerBorderSize: (size: LoadingIndicatorSize) => "border-[3px]" | "border-[4px]" | "border-[6px]" | "border-[8px]" | "border-[10px]" | "border-[12px]" | "border-[14px]" | "border-[16px]";

package/dist/Components/Atoms/LoadingIndicator/LoadingIndicator.stories.d.ts

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

package/dist/Components/Atoms/LoadingIndicator/LoadingIndicator.types.d.ts

@@ -0,0 +1,5 @@
+export type LoadingIndicatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface LoadingIndicatorProps {
+    isFixed?: boolean;
+    size?: LoadingIndicatorSize;
+}

package/dist/Components/Atoms/LoadingIndicator/index.d.ts

@@ -0,0 +1,2 @@
+import LoadingIndicator from './LoadingIndicator';
+export default LoadingIndicator;

package/dist/Components/Atoms/TextInput/TextInput.d.ts

@@ -0,0 +1,3 @@
+import { TextInputProps } from './TextInput.types';
+declare const TextInput: ({ type, name, value, variant, placeholder, lable, startIcon, endIcon, maxLength, supportMessage, measure, isError, errorMessage, disabled, testId, onChange, }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TextInput;

package/dist/Components/Atoms/TextInput/TextInput.stories.d.ts

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

package/dist/Components/Atoms/TextInput/TextInput.types.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithRef } from 'react';
+type variant = 'default' | 'lable' | 'lable_fixed';
+export interface TextInputProps extends ComponentPropsWithRef<'input'> {
+    variant?: variant;
+    lable?: string;
+    isError?: boolean;
+    startIcon?: string;
+    endIcon?: string;
+    supportMessage?: string;
+    measure?: string;
+    errorMessage?: string;
+    testId?: string;
+}
+export interface InputContainerProps extends ComponentPropsWithRef<'input'> {
+    variant: variant;
+    lable?: string;
+    isFocused?: boolean;
+    isError?: boolean;
+}
+export interface LabelContainerProps extends InputContainerProps {
+    startIcon?: string;
+    endIcon?: string;
+    measure?: string;
+}
+export interface SupportContainerProps {
+    isError?: boolean;
+    errorMessage?: string;
+    supportMessage?: string;
+    currentLength?: number;
+    maxLength?: number;
+}
+export {};

package/dist/Components/Atoms/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+import TextInput from './TextInput';
+export default TextInput;

package/dist/Components/Atoms/TextInput/parts/Icon.d.ts

@@ -0,0 +1,6 @@
+interface IconProps {
+    name: string;
+    className?: string;
+}
+export declare const Icon: ({ name, className }: IconProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/Components/Atoms/TextInput/parts/InputContainer.d.ts

@@ -0,0 +1,3 @@
+import { InputContainerProps } from '../TextInput.types';
+declare const InputContainer: ({ type, name, value, lable, maxLength, placeholder, variant, disabled, isFocused, isError, onChange, onFocus, onBlur, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default InputContainer;

package/dist/Components/Atoms/TextInput/parts/LabelContainer.d.ts

@@ -0,0 +1,3 @@
+import { LabelContainerProps } from '../TextInput.types';
+declare const LabelContainer: ({ type, name, value, variant, lable, placeholder, startIcon, endIcon, maxLength, measure, isFocused, isError, onBlur, onFocus, disabled, onChange, }: LabelContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default LabelContainer;

package/dist/Components/Atoms/TextInput/parts/PasswordContainer.d.ts

@@ -0,0 +1,3 @@
+import { InputContainerProps } from '../TextInput.types';
+declare const PasswordContainer: ({ type, name, value, lable, maxLength, placeholder, variant, disabled, isFocused, isError, onChange, onFocus, onBlur, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordContainer;

package/dist/Components/Atoms/TextInput/parts/SupportContainer.d.ts

@@ -0,0 +1,3 @@
+import { SupportContainerProps } from '../TextInput.types';
+declare const SupportContainer: ({ isError, errorMessage, supportMessage, currentLength, maxLength, }: SupportContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default SupportContainer;

package/dist/Components/Atoms/TextInput/parts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LabelContainer } from './LabelContainer';
+export { default as PasswordContainer } from './PasswordContainer';
+export { default as SupportContainer } from './SupportContainer';

package/dist/Components/Atoms/index.d.ts

@@ -5,3 +5,5 @@ export { default as Box } from './Box';
 export { default as ProductIcon } from './ProductIcon';
 export { default as Radio } from './Radio';
 export { default as Button } from './Button';
+export { default as LoadingIndicator } from './LoadingIndicator';
+export { default as TextInput } from './TextInput';

package/dist/Components/Molecules/RadioList/RadioList.d.ts

@@ -0,0 +1,3 @@
+import { RadioListProps } from './RadioList.types';
+declare const RadioList: ({ data, name, className, testId }: RadioListProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioList;

package/dist/Components/Molecules/RadioList/RadioList.stories.d.ts

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

package/dist/Components/Molecules/RadioList/RadioList.types.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEvent } from 'react';
+import { RadioStatus } from '../../../types';
+export interface RadioListData extends Omit<RadioStatus, 'isHover'> {
+    label: string;
+    value?: string;
+    description?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export interface RadioListProps {
+    name: string;
+    data: RadioListData[];
+    className?: string;
+    [key: string]: any;
+}

package/dist/Components/Molecules/RadioList/RadioListItem.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent } from 'react';
+import { RadioStatus } from '../../../types';
+interface RadioListProps extends RadioStatus {
+    label: string;
+    name: string;
+    value?: string;
+    description?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    RadioClassName?: string;
+}
+declare const RadioListItem: ({ name, value, label, description, checked, disabled, isError, className, RadioClassName, onChange, }: RadioListProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioListItem;

package/dist/Components/Molecules/RadioList/index.d.ts

@@ -0,0 +1,2 @@
+import RadioList from './RadioList';
+export default RadioList;

package/dist/Components/Molecules/index.d.ts

@@ -2,3 +2,4 @@ export { default as WithBadge } from './WithBadge';
 export { default as GridLayout } from './GridLayout';
 export { default as CheckboxList } from './CheckboxList';
 export { default as CheckboxCard } from './CheckboxCard';
+export { default as RadioList } from './RadioList';

package/dist/Components/Organisms/Modal/Modal.d.ts

@@ -0,0 +1,10 @@
+import { ModalRootProps } from './Modal.types';
+export interface ModalProps extends ModalRootProps {
+    isPreventClose?: boolean;
+}
+declare const Modal: {
+    Root: ({ children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, testId }: import("./Modal.types").ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, testId, role, className, }: import("./Modal.types").ModalContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Modal;

package/dist/Components/Organisms/Modal/Modal.parts.d.ts

@@ -0,0 +1,4 @@
+import { ModalContentProps, ModalRootProps, ModalTriggerProps } from './Modal.types';
+export declare const Root: ({ children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Trigger: ({ children, testId }: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Content: ({ children, testId, role, className, }: ModalContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Organisms/Modal/Modal.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react';
+import { ModalRootProps } from './Modal.types';
+import Modal from '.';
+declare const meta: {
+    title: string;
+    component: ({ children, ...rest }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        hasBackground: {
+            control: string;
+        };
+        isPreventClose: {
+            control: string;
+        };
+        size: {
+            options: string[];
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Modal.Root>;
+export declare const Default: Story;

package/dist/Components/Organisms/Modal/Modal.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface ModalRootProps {
+    children: ReactNode;
+    hasBackground?: boolean;
+    isPreventClose?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface ModalTriggerProps {
+    setOpen?: () => void;
+    children?: ReactNode;
+    testId?: string;
+}
+export interface ModalBackgroundProps {
+    isOpen?: boolean;
+    hasBackground?: boolean;
+    testId?: string;
+}
+export interface ModalContentProps {
+    children?: ReactNode;
+    testId?: string;
+    role?: string;
+    className?: string;
+}

package/dist/Components/Organisms/Modal/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as usePreventScroll } from './usePreventScroll';

package/dist/Components/Organisms/Modal/hooks/usePreventScroll.d.ts

@@ -0,0 +1,2 @@
+declare const usePreventScroll: (isOpen?: boolean) => void;
+export default usePreventScroll;

package/dist/Components/Organisms/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import Modal from './Modal';
+export default Modal;

package/dist/Components/Organisms/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

package/dist/config/tailwind.config.js

@@ -8,16 +8,16 @@ module.exports = {
   ],
   theme: {
     screens: {
-      'mobile': '360px',
-      'tablet': '720px',
-      'desktop': '980px',
+      mobile: '360px',
+      tablet: '720px',
+      desktop: '960px',
     },
     extend: {
       gridAutoColumns: {
         '1fr': '1fr',
       },
       spacing: {
-        'container':'1200px',
+        container: '1200px',
       },
       colors: {
         'w-cyan-10': '#F2FCFF',
@@ -125,22 +125,38 @@ module.exports = {
         'w-secondary': '#2E6BAA',
         'y-primary': '#6B16EE',
       },
+      boxShadow: {
+        'graysmall': '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
+        'graymedium': '0px 2px 8px 0px rgba(0, 0, 0, 0.16)',
+        'bluegray': '0px 1px 4px 0px rgba(230, 235, 240, 0.80)',
+        'cyan': '0px 2px 8px 0px rgba(59, 163, 199, 0.32)',
+        'indigo': '0px 2px 8px 0px rgba(46, 107, 170, 0.32)',
+        'violet': '0px 2px 8px 0px rgba(107, 22, 238, 0.32)',
+      },
       backgroundImage: {
-        'gradient-cyan-0': "linear-gradient(0deg, #5db6d4 0%, #369cc2 100%)",
-        'gradient-violet-0': "linear-gradient(0deg, #8e2de2 0%, #5a00db 100%)",
-        'gradient-indigo-0': "linear-gradient(0deg, #5487ba 0%, #26619e 100%)",
-        'gradient-cyan-30': "linear-gradient(30deg, #5db6d4 0%, #369cc2 100%)",
-        'gradient-violet-30': "linear-gradient(30deg, #8e2de2 0%, #5a00db 100%)",
-        'gradient-indigo-30': "linear-gradient(30deg, #5487ba 0%, #26619e 100%)",
-        'gradient-cyan-45': "linear-gradient(45deg, #5db6d4 0%, #369cc2 100%)",
-        'gradient-violet-45': "linear-gradient(45deg, #8e2de2 0%, #5a00db 100%)",
-        'gradient-indigo-45': "linear-gradient(45deg, #5487ba 0%, #26619e 100%)",
-        'gradient-cyan-60': "linear-gradient(60deg, #5db6d4 0%, #369cc2 100%)",
-        'gradient-violet-60': "linear-gradient(60deg, #8e2de2 0%, #5a00db 100%)",
-        'gradient-indigo-60': "linear-gradient(60deg, #5487ba 0%, #26619e 100%)",
-        'gradient-cyan-90': "linear-gradient(90deg, #5db6d4 0%, #369cc2 100%)",
-        'gradient-violet-90': "linear-gradient(90deg, #8e2de2 0%, #5a00db 100%)",
-        'gradient-indigo-90': "linear-gradient(90deg, #5487ba 0%, #26619e 100%)",
+        'gradient-cyan-0': 'linear-gradient(0deg, #5db6d4 0%, #369cc2 100%)',
+        'gradient-violet-0': 'linear-gradient(0deg, #8e2de2 0%, #5a00db 100%)',
+        'gradient-indigo-0': 'linear-gradient(0deg, #5487ba 0%, #26619e 100%)',
+        'gradient-cyan-30': 'linear-gradient(30deg, #5db6d4 0%, #369cc2 100%)',
+        'gradient-violet-30':
+          'linear-gradient(30deg, #8e2de2 0%, #5a00db 100%)',
+        'gradient-indigo-30':
+          'linear-gradient(30deg, #5487ba 0%, #26619e 100%)',
+        'gradient-cyan-45': 'linear-gradient(45deg, #5db6d4 0%, #369cc2 100%)',
+        'gradient-violet-45':
+          'linear-gradient(45deg, #8e2de2 0%, #5a00db 100%)',
+        'gradient-indigo-45':
+          'linear-gradient(45deg, #5487ba 0%, #26619e 100%)',
+        'gradient-cyan-60': 'linear-gradient(60deg, #5db6d4 0%, #369cc2 100%)',
+        'gradient-violet-60':
+          'linear-gradient(60deg, #8e2de2 0%, #5a00db 100%)',
+        'gradient-indigo-60':
+          'linear-gradient(60deg, #5487ba 0%, #26619e 100%)',
+        'gradient-cyan-90': 'linear-gradient(90deg, #5db6d4 0%, #369cc2 100%)',
+        'gradient-violet-90':
+          'linear-gradient(90deg, #8e2de2 0%, #5a00db 100%)',
+        'gradient-indigo-90':
+          'linear-gradient(90deg, #5487ba 0%, #26619e 100%)',
       },
       gridTemplateAreas: {
         'default-mobile': ['content content content content'],
@@ -150,13 +166,16 @@ module.exports = {
         'default-desktop': [
           'content content content content content content content content content content content content',
         ],
-        'checkbox-list-item-container':['checkbox label',' . description']
+        'checkbox-list-item-container': ['checkbox label', ' . description'],
+        'radio-list-item-container': ['radio label', ' . description'],
       },
       gridTemplateRows: {
         'checkbox-list-item-container': 'min-content min-content',
+        'radio-list-item-container': 'min-content min-content',
       },
       gridTemplateColumns: {
         'checkbox-list-item-container': '18px min-content',
+        'radio-list-item-container': '18px min-content',
       },
     },
   },
@@ -164,5 +183,4 @@ module.exports = {
   variants: {
     gridTemplateAreas: ['responsive'],
   },
-}
-
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Components/Atoms';
 export * from './Components/Molecules';
+export * from './Components/Organisms';