@vespiario-thailand/design-system 0.0.1

package/README.md

@@ -0,0 +1 @@
+# init-vite-storybook

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

@@ -0,0 +1,5 @@
+/** types */
+import { CommonButtonType, ConditionButtonIconType } from '../../types/Button';
+export type ButtonPropType = CommonButtonType & ConditionButtonIconType;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonPropType & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

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

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

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

@@ -0,0 +1,8 @@
+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>>;
+};
+export default CompoundDialog;

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

@@ -0,0 +1,15 @@
+/** lib */
+import { HTMLAttributes } from 'react';
+/** type */
+import { IconColorType, IconSizeType, IconType } from '../../types/Icon';
+export type IconProps = HTMLAttributes<HTMLDivElement> & {
+    icon: IconType;
+    size?: IconSizeType;
+    color?: IconColorType;
+};
+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;

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export declare const LabelSizes: readonly ["small", "medium", "large"];
+declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    isBorder: boolean;
+    children: ReactNode;
+    size: '';
+} & React.RefAttributes<unknown>>;
+export default Label;

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

@@ -0,0 +1,6 @@
+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;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Stack;

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

@@ -0,0 +1,12 @@
+/** libs */
+import React 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;

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

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

package/dist/constance/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", "bar", "bar-1", "bar-2", "double-bar", "bow-tie", "play", "stop", "pause", "first", "last", "globe", "tako", "kebab", "cheese", "veggie", "meatball", "hamburger", "vespa", "check"];
+declare const IconColors: readonly ["blue", "green", "light-green", "yellow", "dark", "light", "shade-dark", "shade-light"];
+declare const IconSizes: readonly ["12", "16", "20", "24", "32", "40", "48", "56", "60", "72", "80"];
+export { IconColors, IconLists, IconSizes, };

package/dist/custom-theme.cjs

@@ -0,0 +1,174 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  theme: {
+    boxShadow: {
+      100: '0px 4px 4px -1px rgba(0, 0, 0, 0.25)',
+      200: '0px 8px 8px -2px rgba(0, 0, 0, 0.25)',
+      300: '0px 12px 12px -3px rgba(0, 0, 0, 0.25)',
+      400: '0px 16px 16px -4px rgba(0, 0, 0, 0.25)',
+    },
+    backdropBlur: {
+      100: '2px',
+      200: '4px',
+      300: '6px',
+      400: '8px',
+      500: '10px',
+    },
+    blur: {
+      100: '2px',
+      200: '4px',
+      300: '6px',
+      400: '8px',
+      500: '10px',
+    },
+    fontFamily: {
+      'vespa-thai': ['Vespiario Thai', 'system-ui', 'sans-serif'],
+      'vespa-thai-italic': ['Vespiario Condensed Italic',  'system-ui', 'sans-serif']
+    },
+    fontSize: {
+      /** name: [fontSize, lineHeight] */
+      'title-large': ['72px', 1.4],
+      'title-medium': ['60px', 1.4],
+      'title-small': ['48px', 1.4],
+      'title-small-alt': ['32px', 1.4],
+      'body-large': ['24px', 1.4],
+      body: ['16px', 1.4],
+      'body-small': ['13px', 1.4],
+      caption: ['11px', 1.4],
+    },
+    fontWeight: {
+      light: '300',
+      normal: '400',
+      'semi-bold': '600',
+      bold: '700',
+    },
+    spacing: {
+      0: '0',
+      4: '4px',
+      8: '8px',
+      12: '12px',
+      16: '16px',
+      20: '20px',
+      24: '24px',
+      32: '32px',
+      40: '40px',
+      48: '48px',
+      56: '56px',
+      60: '60px',
+      72: '72px',
+      80: '80px',
+    },
+    colors: {
+      transparent: 'transparent',
+      blue: {
+        100: '#89CAE5',
+        200: '#6EBEDF',
+        300: '#52B1DA',
+        400: '#37A5D4',
+        500: '#1C99CE',
+        600: '#1987B5',
+        700: '#15749D',
+        800: '#126284',
+        900: '#0F506B',
+      },
+      green: {
+        100: '#98CFBF',
+        200: '#80C4B1',
+        300: '#68B9A2',
+        400: '#50AE94',
+        500: '#38A385',
+        600: '#318F75',
+        700: '#2B7C65',
+        800: '#246855',
+        900: '#1D5545',
+      },
+      'light-green': {
+        100: '#d0f5c2',
+        200: '#c5f3b3',
+        300: '#bbf0a5',
+        400: '#b0ee97',
+        500: '#A5EC89',
+        600: '#91d079',
+        700: '#7db368',
+        800: '#6a9758',
+        900: '#567b47',
+      },
+      yellow: {
+        100: '#ffe87a',
+        200: '#ffe35c',
+        300: '#ffde3d',
+        400: '#ffd81f',
+        500: '#FFD300',
+        600: '#e0ba00',
+        700: '#c2a000',
+        800: '#a38700',
+        900: '#856e00',
+      },
+      dark: {
+        100: '#000000',
+        200: '#1f1f1f',
+        300: '#3d3d3d',
+        400: '#5c5c5c',
+        500: '#7a7a7a',
+        600: '#999999',
+        700: '#b8b8b8',
+        800: '#d6d6d6',
+        900: '#f5f5f5',
+      },
+      light: {
+        100: '#ffffff',
+        200: '#e0e0e0',
+        300: '#c2c2c2',
+        400: '#a3a3a3',
+        500: '#858585',
+        600: '#666666',
+        700: '#474747',
+        800: '#292929',
+        900: '#0a0a0a',
+      },
+      'shade-dark': {
+        100: 'rgba(0, 0, 0, 0.1)',
+        200: 'rgba(0, 0, 0, 0.2)',
+        300: 'rgba(0, 0, 0, 0.3)',
+        400: 'rgba(0, 0, 0, 0.4)',
+        500: 'rgba(0, 0, 0, 0.5)',
+        600: 'rgba(0, 0, 0, 0.6)',
+        700: 'rgba(0, 0, 0, 0.7)',
+        800: 'rgba(0, 0, 0, 0.8)',
+        900: 'rgba(0, 0, 0, 0.9)',
+      },
+      'shade-light': {
+        100: 'rgba(255, 255, 255, 0.1)',
+        200: 'rgba(255, 255, 255, 0.2)',
+        300: 'rgba(255, 255, 255, 0.3)',
+        400: 'rgba(255, 255, 255, 0.4)',
+        500: 'rgba(255, 255, 255, 0.5)',
+        600: 'rgba(255, 255, 255, 0.6)',
+        700: 'rgba(255, 255, 255, 0.7)',
+        800: 'rgba(255, 255, 255, 0.8)',
+        900: 'rgba(255, 255, 255, 0.9)',
+      },
+    },
+    animation: {
+      overlayShow: 'overlayShow 0.25s ease-in-out',
+      contentShow: 'contentShow 0.25s ease-in-out',
+    },
+    keyframes: {
+      overlayShow: {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
+      },
+      contentShow: {
+        from: {
+          opacity: 0,
+          transform: 'translate(-50%, -48%) scale(0.96)'
+        },
+        to: {
+          opacity: 1,
+          transform: 'translate(-50%, -50%) scale(1)'
+        }
+      }
+    }
+  }
+}

package/dist/hooks/hooks/index.ts

@@ -0,0 +1,5 @@
+export { default as useClickOutside } from './useClickOutside'
+export { default as useIsClient } from './useIsClient'
+export { default as useIsMounted } from './useIsMounted'
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+export { default as useMergeRefs } from './useMergeRefs'

package/dist/hooks/hooks/useClickOutside.ts

@@ -0,0 +1,33 @@
+/** libs */
+import React, { useEffect, useCallback, RefObject } from 'react'
+
+type Event = MouseEvent | TouchEvent
+
+const useClickOutside = (refs: RefObject<Element | null>[], handler: (event: Event) => void): void => {
+  const listener = useCallback(
+    (event: Event) => {
+      const results: boolean[] = refs.map((ref) => {
+        const el = ref?.current
+        return !el || el.contains(event.target as Node) ? true : false
+      })
+
+      if (results.includes(true)) return
+
+      /** Call the handler only if the click is outside of the element passed. */
+      handler(event)
+    },
+    [handler, refs],
+  )
+
+  useEffect(() => {
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [listener])
+}
+
+export default useClickOutside

package/dist/hooks/hooks/useIsClient.ts

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react'
+
+const useIsClient = (): boolean => {
+  const [isClient, setClient] = useState<boolean>(false)
+
+  useEffect(() => {
+    setClient(true)
+  }, [])
+
+  return isClient
+}
+
+export default useIsClient

package/dist/hooks/hooks/useIsMounted.ts

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+const useIsMounted = (): () => boolean => {
+  const isMounted = useRef<boolean>(false)
+
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return useCallback(() => isMounted.current, [])
+}
+
+export default useIsMounted

package/dist/hooks/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,5 @@
+import React, { useEffect, useLayoutEffect } from 'react'
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export default useIsomorphicLayoutEffect

package/dist/hooks/hooks/useMergeRefs.ts

@@ -0,0 +1,15 @@
+import React, { MutableRefObject, LegacyRef, RefCallback } from 'react'
+
+const useMergeRefs = <T = any>(refs: Array<LegacyRef<T> | MutableRefObject<T>>): RefCallback<T> => {
+  return (value) => {
+    refs?.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ;(ref as MutableRefObject<T | null>).current = value
+      }
+    })
+  }
+}
+
+export default useMergeRefs

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { default as useClickOutside } from './useClickOutside';
+export { default as useIsClient } from './useIsClient';
+export { default as useIsMounted } from './useIsMounted';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useMergeRefs } from './useMergeRefs';

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,5 @@
+/** libs */
+import { RefObject } from 'react';
+type Event = MouseEvent | TouchEvent;
+declare const useClickOutside: (refs: RefObject<Element | null>[], handler: (event: Event) => void) => void;
+export default useClickOutside;

package/dist/hooks/useIsClient.d.ts

@@ -0,0 +1,2 @@
+declare const useIsClient: () => boolean;
+export default useIsClient;

package/dist/hooks/useIsMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useIsMounted: () => () => boolean;
+export default useIsMounted;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

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

package/dist/hooks/useMergeRefs.d.ts

@@ -0,0 +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;
+export default useMergeRefs;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/** components */
+import Button from './components/Button';
+import Icon from './components/Icon';
+import Typo from './components/Typo';
+import Dialog from './components/Dialog';
+import Chip from './components/Chip';
+/** constance */
+import { ButtonSizeList, ButtonVariantList } from './constance/Button';
+import { IconColors, IconLists, IconSizes } from './constance/Icon';
+/** types */
+import type { ButtonSizeType, ButtonVariantType, CommonButtonType, ConditionButtonIconType } from './types/Button';
+import type { IconType, IconSizeType, IconColorType } from './types/Icon';
+export { 
+/** components */
+Button, Icon, Typo, Dialog, Chip, 
+/** constance */
+ButtonSizeList, ButtonVariantList, IconColors, IconLists, IconSizes, };
+/** Type */
+export type { ButtonSizeType, ButtonVariantType, CommonButtonType, ConditionButtonIconType, IconType, IconSizeType, IconColorType, };

package/dist/main.d.ts

@@ -0,0 +1 @@
+import './style.css';