@wishket/design-system 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,12 +4,13 @@ export interface LabelRootProps extends ComponentProps<'div'> {
4
4
  variant?: 'text' | 'outlined' | 'filled';
5
5
  color?: 'primary' | 'gray';
6
6
  size?: 'sm' | 'md';
7
+ canHover?: boolean;
7
8
  }
8
9
  export interface LabelIconProps extends ComponentProps<'div'> {
9
10
  icon?: SystemIconName;
10
11
  }
11
12
  declare const Label: {
12
- Root: ({ children, className, size, variant, color, ref, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
13
+ Root: ({ children, className, size, variant, color, ref, canHover, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
13
14
  Text: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
14
15
  Icon: ({ children, className, icon }: LabelIconProps) => import("react/jsx-runtime").JSX.Element;
15
16
  };
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- "use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),a=require("tailwind-merge"),i=require("../Box/Box.js"),s=require("../Typography/Typography.js"),o=require("../SystemIcon/SystemIcon.js"),n=t.createContext({variant:"",color:"",size:""}),c={Root:function(t){var s=t.children,o=t.className,c=t.size,c=void 0===c?"md":c,l=t.variant,d=void 0===l?"text":l,l=t.color,y=void 0===l?"primary":l,l=(t.ref,e.__rest(t,["children","className","size","variant","color","ref"]));return r.jsx(n.Provider,{value:{variant:d,color:y,size:c},children:r.jsx(i,e.__assign({"data-testid":"design-system-label",className:a.twMerge("flex w-fit items-center gap-1.5","filled"===d&&"rounded-lg px-2 py-0.5","outlined"===d&&"rounded-lg border px-2 py-px",function(){var e="outlined"===d;if("text"!==d)return"gray"===y?e?"bg-w-gray-10 border-w-gray-200 hover:border-w-gray-400":"bg-w-gray-10 hover:bg-w-gray-200":e?"bg-primary-50 border-primary-200 hover:border-primary":"bg-primary-50 hover:bg-primary-100"}(),o)},l,{children:s}))})},Text:function(e){var i=e.children,e=e.className,o=t.useContext(n),c=o.variant,l=o.color,o=o.size;return r.jsx(s,{variant:"md"===o?"body2":"caption1","data-testid":"design-system-label--text",className:a.twMerge("select-none text-w-gray-600",!("text"===c)&&"primary"===l&&"text-primary",e),children:i})},Icon:function(e){var s=e.children,c=e.className,e=e.icon,l=t.useContext(n),d=l.variant,l=l.color;return r.jsxs(i,{"data-testid":"design-system-label--icon",className:a.twMerge("aspect-w-[14px] size-[14px] shrink-0 object-contain",!e&&c),children:[e&&r.jsx(o,{name:e,className:a.twMerge("text-w-gray-400","primary"===l&&"text-primary","text"===d&&"text-w-gray-400",c)}),s]})}};module.exports=c;
2
+ "use strict";var r=require("../../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),a=require("react"),t=require("tailwind-merge"),i=require("../Box/Box.js"),o=require("../Typography/Typography.js"),s=require("../SystemIcon/SystemIcon.js"),n=a.createContext({variant:"",color:"",size:""}),c={Root:function(a){var o=a.children,s=a.className,c=a.size,c=void 0===c?"md":c,d=a.variant,l=void 0===d?"text":d,d=a.color,y=void 0===d?"primary":d,d=(a.ref,a.canHover),g=void 0!==d&&d,d=r.__rest(a,["children","className","size","variant","color","ref","canHover"]);return e.jsx(n.Provider,{value:{variant:l,color:y,size:c},children:e.jsx(i,r.__assign({"data-testid":"design-system-label",className:t.twMerge("flex w-fit items-center gap-1.5","filled"===l&&"rounded-lg px-2 py-0.5","outlined"===l&&"rounded-lg border px-2 py-px",g&&"cursor-pointer",function(){var r="outlined"===l;if("text"!==l)return"gray"===y?r?g?"bg-w-gray-10 border-w-gray-200 hover:border-w-gray-400":"bg-w-gray-10 border-w-gray-200":g?"bg-w-gray-10 hover:bg-w-gray-200":"bg-w-gray-10":r?g?"bg-primary-50 border-primary-200 hover:border-primary":"bg-primary-50 border-primary-200":g?"bg-primary-50 hover:bg-primary-100":"bg-primary-50"}(),s)},d,{children:o}))})},Text:function(r){var i=r.children,r=r.className,s=a.useContext(n),c=s.variant,d=s.color,s=s.size;return e.jsx(o,{variant:"md"===s?"body2":"caption1","data-testid":"design-system-label--text",className:t.twMerge("select-none text-w-gray-600",!("text"===c)&&"primary"===d&&"text-primary",r),children:i})},Icon:function(r){var o=r.children,c=r.className,r=r.icon,d=a.useContext(n),l=d.variant,d=d.color;return e.jsxs(i,{"data-testid":"design-system-label--icon",className:t.twMerge("aspect-w-[14px] size-[14px] shrink-0 object-contain",!r&&c),children:[r&&e.jsx(s,{name:r,className:t.twMerge("text-w-gray-400","primary"===d&&"text-primary","text"===l&&"text-w-gray-400",c)}),o]})}};module.exports=c;
@@ -1,7 +1,7 @@
1
1
  import type { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ children, className, size, variant, color, ref, ...rest }: import("./Label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ children, className, size, variant, color, ref, canHover, ...rest }: import("./Label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  argTypes: {
7
7
  variant: {
@@ -12,6 +12,9 @@ declare const meta: {
12
12
  control: string;
13
13
  options: string[];
14
14
  };
15
+ canHover: {
16
+ control: string;
17
+ };
15
18
  };
16
19
  };
17
20
  export default meta;
@@ -6,5 +6,6 @@ declare const ModalContext: {
6
6
  Root: ({ isOpen: externalIsOpen, setIsOpen: externalSetIsOpen, children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
7
7
  Trigger: ({ children, testId }: import("./ModalContext.types").ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
8
8
  Content: ({ children, testId, role, className, }: import("./ModalContext.types").ModalContentProps) => import("react/jsx-runtime").JSX.Element;
9
+ Close: ({ children, testId }: import("./ModalContext.types").ModalCloseProps) => import("react/jsx-runtime").JSX.Element;
9
10
  };
10
11
  export default ModalContext;
@@ -1 +1 @@
1
- "use strict";var t=require("./ModalContext.parts.js"),e={Root:t.Root,Trigger:t.Trigger,Content:t.Content};module.exports=e;
1
+ "use strict";var e=require("./ModalContext.parts.js"),o={Root:e.Root,Trigger:e.Trigger,Content:e.Content,Close:e.Close};module.exports=o;
@@ -1,4 +1,5 @@
1
- import { ModalContentProps, ModalRootProps, ModalTriggerProps } from './ModalContext.types';
1
+ import { ModalCloseProps, ModalContentProps, ModalRootProps, ModalTriggerProps } from './ModalContext.types';
2
2
  export declare const Root: ({ isOpen: externalIsOpen, setIsOpen: externalSetIsOpen, children, hasBackground, isPreventClose, size, }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export declare const Trigger: ({ children, testId }: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
4
+ export declare const Close: ({ children, testId }: ModalCloseProps) => import("react/jsx-runtime").JSX.Element;
4
5
  export declare const Content: ({ children, testId, role, className, }: ModalContentProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("react"),n=s.createContext({isOpen:!1,setOpen:function(){},hasBackground:!0,isPreventClose:!1,size:"md"}),r=function(){var r=s.useContext(n),i=r.isOpen,r=r.hasBackground;return e.jsx(e.Fragment,{children:i&&e.jsx("div",{"data-testid":"design-system-modalContext--background",className:t.twMerge("fixed left-0 top-0 z-30 h-[100vh] w-[100vw]",r?" bg-black bg-opacity-50":"bg-transparent")})})};exports.Content=function(i){var o=i.children,a=i.testId,d=i.role,i=i.className,l=s.useContext(n),c=l.isOpen,u=l.size,l=l.isPreventClose;return s.useEffect(function(){return c&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=""}},[c]),e.jsxs(e.Fragment,{children:[c&&l&&e.jsx(r,{}),e.jsx("div",{role:d,"data-testid":a,className:t.twMerge("fixed left-[50%] z-40 box-border flex translate-x-[-50%] transform items-center justify-center overflow-auto rounded-3xl bg-w-white px-[15px] py-[15px] shadow-modal transition-all duration-100 ease-in",c?"visible top-[50%] translate-y-[-50%]":"invisible top-[60%] translate-y-[-40%] opacity-0","sm"===u&&"size-[400px]","md"===u&&"size-[500px]","lg"===u&&"size-[600px]","xl"===u&&"size-[1000px]",i),children:o})]})},exports.Root=function(t){var r=t.isOpen,i=t.setIsOpen,o=t.children,a=t.hasBackground,a=void 0===a||a,d=t.isPreventClose,d=void 0!==d&&d,t=t.size,t=void 0===t?"md":t,l=s.useState(!1),c=l[0],u=l[1];return e.jsx(n.Provider,{value:{isOpen:void 0!==r?r:c,setOpen:i||function(){return u(!c)},hasBackground:a,isPreventClose:d,size:t},children:o})},exports.Trigger=function(t){var i=t.children,t=t.testId,o=s.useContext(n),a=o.isOpen,d=o.setOpen,o=o.isPreventClose;return e.jsxs("div",{"data-testid":t,onClick:d,children:[i,a&&!o&&e.jsx(r,{})]})};
2
+ "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("react"),n=s.createContext({isOpen:!1,setOpen:function(){},hasBackground:!0,isPreventClose:!1,size:"md"}),r=function(){var r=s.useContext(n),i=r.isOpen,r=r.hasBackground;return e.jsx(e.Fragment,{children:i&&e.jsx("div",{"data-testid":"design-system-modalContext--background",className:t.twMerge("fixed left-0 top-0 z-30 h-[100vh] w-[100vw]",r?" bg-black bg-opacity-50":"bg-transparent")})})};exports.Close=function(t){var r=t.children,t=t.testId,i=s.useContext(n).setOpen;return e.jsx(e.Fragment,{children:e.jsx("div",{"data-testid":t,onClick:i,children:r})})},exports.Content=function(i){var o=i.children,a=i.testId,d=i.role,i=i.className,l=s.useContext(n),c=l.isOpen,u=l.size,l=l.isPreventClose;return s.useEffect(function(){return c&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=""}},[c]),e.jsxs(e.Fragment,{children:[c&&l&&e.jsx(r,{}),e.jsx("div",{role:d,"data-testid":a,className:t.twMerge("fixed left-[50%] z-40 box-border flex translate-x-[-50%] transform items-center justify-center overflow-auto rounded-3xl bg-w-white px-[15px] py-[15px] shadow-modal transition-all duration-100 ease-in",c?"visible top-[50%] translate-y-[-50%]":"invisible top-[60%] translate-y-[-40%] opacity-0","sm"===u&&"size-[400px]","md"===u&&"size-[500px]","lg"===u&&"size-[600px]","xl"===u&&"size-[1000px]",i),children:o})]})},exports.Root=function(t){var r=t.isOpen,i=t.setIsOpen,o=t.children,a=t.hasBackground,a=void 0===a||a,d=t.isPreventClose,d=void 0!==d&&d,t=t.size,t=void 0===t?"md":t,l=s.useState(!1),c=l[0],u=l[1];return e.jsx(n.Provider,{value:{isOpen:void 0!==r?r:c,setOpen:i||function(){return u(!c)},hasBackground:a,isPreventClose:d,size:t},children:o})},exports.Trigger=function(t){var i=t.children,t=t.testId,o=s.useContext(n),a=o.isOpen,d=o.setOpen,o=o.isPreventClose;return e.jsxs("div",{"data-testid":t,onClick:d,children:[i,a&&!o&&e.jsx(r,{})]})};
@@ -12,6 +12,12 @@ export interface ModalTriggerProps {
12
12
  children?: ReactNode;
13
13
  testId?: string;
14
14
  }
15
+ export interface ModalCloseProps {
16
+ setOpen?: () => void;
17
+ children?: ReactNode;
18
+ testId?: string;
19
+ onClick?: () => void;
20
+ }
15
21
  export interface ModalBackgroundProps {
16
22
  isOpen?: boolean;
17
23
  hasBackground?: boolean;
@@ -1 +1 @@
1
- "use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("tailwind-merge"),r=require("react"),a=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),i=(require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),"\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]:h-5\n [&::-moz-range-thumb]:w-5\n [&::-moz-range-thumb]:-translate-x-1/4\n [&::-moz-range-thumb]:transform\n [&::-moz-range-thumb]:appearance-none\n [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:border\n [&::-moz-range-thumb]:border-w-gray-200\n [&::-moz-range-thumb]:bg-transparent\n [&::-moz-range-thumb]:bg-white\n [&::-moz-range-thumb]:shadow-graymedium\n [&::-moz-range-thumb]:outline\n [&::-moz-range-thumb]:ring-1\n [&::-moz-range-thumb]:ring-inset\n [&::-moz-range-thumb]:ring-w-gray-200\n [&::-moz-range-thumb]:transition-all \n [&::-moz-range-thumb]:duration-150\n [&::-moz-range-thumb]:ease-in-out\n [&::-moz-range-thumb]:dark:bg-w-white\n\n [&::-webkit-slider-thumb]:pointer-events-auto\n [&::-webkit-slider-thumb]:mr-2\n [&::-webkit-slider-thumb]:h-5\n [&::-webkit-slider-thumb]:w-5\n [&::-webkit-slider-thumb]:-translate-x-1/4\n [&::-webkit-slider-thumb]:transform\n [&::-webkit-slider-thumb]:appearance-none\n [&::-webkit-slider-thumb]:rounded-full\n [&::-webkit-slider-thumb]:border\n [&::-webkit-slider-thumb]:border-w-gray-200\n [&::-webkit-slider-thumb]:bg-transparent\n [&::-webkit-slider-thumb]:bg-white\n [&::-webkit-slider-thumb]:shadow-graymedium\n [&::-webkit-slider-thumb]:outline\n [&::-webkit-slider-thumb]:ring-1\n [&::-webkit-slider-thumb]:ring-inset\n [&::-webkit-slider-thumb]:ring-w-gray-200\n [&::-webkit-slider-thumb]:transition-all \n [&::-webkit-slider-thumb]:duration-150\n [&::-webkit-slider-thumb]:ease-in-out\n [&::-webkit-slider-thumb]:dark:bg-w-white\n ");module.exports=function(s){function m(t,n){var r=(a="min"===n)?"start":"end",a=a?Math.min(Number(t.target.value),p.max-1):Math.max(Number(t.target.value),p.min+1);z(r),x(e.__assign(e.__assign({},p),((t={})[n]=a,t))),null!=h&&h(e.__assign(e.__assign({},p),((r={})[n]=a,r)))}var u=s.variant,u=void 0===u?"single":u,l=s.size,l=void 0===l?"sm":l,o=s.step,o=void 0===o?10:o,d=s.value,d=void 0===d?{min:0,max:0}:d,b=s.min,b=void 0===b?0:b,g=s.max,g=void 0===g?100:g,h=s.onChange,w=s.className,s=e.__rest(s,["variant","size","step","value","min","max","onChange","className"]),u="dual"===u,c=d.min,d=d.max,c=r.useState({min:u?c:0,max:d}),p=c[0],x=c[1],d=r.useState("end"),c=d[0],z=d[1],d=Math.floor(Number(g)/Number(o))+1;return t.jsxs(a,{className:n.twMerge("relative px-1",w),"data-testid":"design-system-rangeSlider",children:[u&&t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:b,max:g,step:o,value:p.min,onInput:function(e){return m(e,"min")},className:n.twMerge("pointer-events-none absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",i,"start"===c&&"z-50")},s)),t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:b,max:g,value:p.max,onInput:function(e){return m(e,"max")},step:o,className:n.twMerge("pointer-events-auto absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",i,u&&"pointer-events-none","end"===c&&"z-50")},s)),t.jsxs(a,{"data-testid":"design-system-rangeSlider--container",className:n.twMerge("relative overflow-hidden","sm"===l&&"h-1 rounded-sm","md"===l&&"h-2 rounded"),children:["md"===l&&t.jsx(a,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:e.__spreadArray([],Array(d),!0).map(function(e,n){return t.jsx(a,{"data-testid":"design-system-rangeSlider--unit-dot",className:"size-1 rounded-full bg-w-white"},n)})}),t.jsx(a,{className:"absolute left-0 top-0 z-0 h-full w-full bg-w-gray-50","data-testid":"design-system-rangeSlider--rail"}),t.jsx(a,{className:"absolute left-0 top-0 z-10 h-full bg-primary","data-testid":"design-system-rangeSlider--fill-track",style:{width:"".concat(u?p.max-p.min:p.max,"%"),left:u?"".concat(p.min,"%"):0}})]})]})};
1
+ "use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("tailwind-merge"),r=require("react"),a=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),i=(require("../../Atoms/Radio/Radio.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),"\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]:-translate-x-1/4\n [&::-moz-range-thumb]:transform\n [&::-moz-range-thumb]:appearance-none\n [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:border\n [&::-moz-range-thumb]:border-w-gray-200\n [&::-moz-range-thumb]:bg-transparent\n [&::-moz-range-thumb]:bg-white\n [&::-moz-range-thumb]:shadow-graymedium\n [&::-moz-range-thumb]:outline\n [&::-moz-range-thumb]:ring-1\n [&::-moz-range-thumb]:ring-inset\n [&::-moz-range-thumb]:ring-w-gray-200\n [&::-moz-range-thumb]:transition-all \n [&::-moz-range-thumb]:duration-150\n [&::-moz-range-thumb]:ease-in-out\n [&::-moz-range-thumb]:dark:bg-w-white\n\n [&::-webkit-slider-thumb]:pointer-events-auto\n [&::-webkit-slider-thumb]:mr-2\n [&::-webkit-slider-thumb]:-translate-x-1/4\n [&::-webkit-slider-thumb]:transform\n [&::-webkit-slider-thumb]:appearance-none\n [&::-webkit-slider-thumb]:rounded-full\n [&::-webkit-slider-thumb]:border\n [&::-webkit-slider-thumb]:border-w-gray-200\n [&::-webkit-slider-thumb]:bg-transparent\n [&::-webkit-slider-thumb]:bg-white\n [&::-webkit-slider-thumb]:shadow-graymedium\n [&::-webkit-slider-thumb]:outline\n [&::-webkit-slider-thumb]:ring-1\n [&::-webkit-slider-thumb]:ring-inset\n [&::-webkit-slider-thumb]:ring-w-gray-200\n [&::-webkit-slider-thumb]:transition-all \n [&::-webkit-slider-thumb]:duration-150\n [&::-webkit-slider-thumb]:ease-in-out\n [&::-webkit-slider-thumb]:dark:bg-w-white\n ");module.exports=function(s){function m(t,n){var r=(a="min"===n)?"start":"end",a=a?Math.min(Number(t.target.value),x.max-1):Math.max(Number(t.target.value),x.min+1);f(r),z(e.__assign(e.__assign({},x),((t={})[n]=a,t))),null!=w&&w(e.__assign(e.__assign({},x),((r={})[n]=a,r)))}function u(){return"sm"===d?i+"[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4":i+"[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}var l=s.variant,l=void 0===l?"single":l,o=s.size,d=void 0===o?"sm":o,o=s.step,o=void 0===o?10:o,b=s.value,b=void 0===b?{min:0,max:0}:b,g=s.min,g=void 0===g?0:g,h=s.max,h=void 0===h?100:h,w=s.onChange,c=s.className,s=e.__rest(s,["variant","size","step","value","min","max","onChange","className"]),l="dual"===l,p=b.min,b=b.max,p=r.useState({min:l?p:0,max:b}),x=p[0],z=p[1],b=r.useState("end"),p=b[0],f=b[1],b=Math.floor(Number(h)/Number(o))+1;return t.jsxs(a,{className:n.twMerge("relative px-1",c),"data-testid":"design-system-rangeSlider",children:[l&&t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:g,max:h,step:o,value:x.min,onInput:function(e){return m(e,"min")},className:n.twMerge("pointer-events-none absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",u(),"start"===p&&"z-50")},s)),t.jsx("input",e.__assign({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:g,max:h,value:x.max,onInput:function(e){return m(e,"max")},step:o,className:n.twMerge("pointer-events-auto absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",u(),l&&"pointer-events-none","end"===p&&"z-50")},s)),t.jsxs(a,{"data-testid":"design-system-rangeSlider--container",className:n.twMerge("relative overflow-hidden","sm"===d&&"h-1 rounded-sm","md"===d&&"h-2 rounded"),children:["md"===d&&t.jsx(a,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:e.__spreadArray([],Array(b),!0).map(function(e,n){return t.jsx(a,{"data-testid":"design-system-rangeSlider--unit-dot",className:"size-1 rounded-full bg-w-white"},n)})}),t.jsx(a,{className:"absolute left-0 top-0 z-0 h-full w-full bg-w-gray-50","data-testid":"design-system-rangeSlider--rail"}),t.jsx(a,{className:"absolute left-0 top-0 z-10 h-full bg-primary","data-testid":"design-system-rangeSlider--fill-track",style:{width:"".concat(l?x.max-x.min:x.max,"%"),left:l?"".concat(x.min,"%"):0}})]})]})};
@@ -1,6 +1,9 @@
1
1
  import { ComponentProps } from 'react';
2
2
  export interface TooltipProps extends ComponentProps<'div'> {
3
+ variant?: 'plain' | 'rich';
3
4
  direction?: 'up' | 'down' | 'left' | 'right';
5
+ title?: string;
6
+ description?: string;
4
7
  }
5
- declare const Tooltip: ({ direction, children, className }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
8
+ declare const Tooltip: ({ direction, children, className, variant, title, description, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
6
9
  export default Tooltip;
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),o=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("react"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),require("./Tooltip.parts.js"));module.exports=function(i){var a=i.direction,a=void 0===a?"up":a,l=i.children,i=i.className;return e.jsx(s,{"data-testid":"design-system-toolTip",className:i,children:e.jsxs(s,{className:"relative h-fit w-full select-none border-none opacity-80 outline-none",children:[e.jsx(o.Arrow,{testId:"design-system-toolTip--arrow",className:t.twMerge("absolute z-10","down"===a&&"-bottom-[7px] left-1/2 translate-x-[-50%] -rotate-90","up"===a&&"-top-[7px] left-1/2 translate-x-[-50%] rotate-90","left"===a&&"-left-[4.8px] top-1/2 translate-y-[-50%] rotate-0","right"===a&&"-right-[4.8px] top-1/2 translate-y-[-50%] rotate-180")}),e.jsx(s,{className:"z-0 flex h-auto min-h-[28px] w-full items-center rounded-lg bg-w-black px-3 py-1",children:e.jsx(r,{variant:"body3",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:l})})]})})};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("../../Atoms/Typography/Typography.js"),r=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),a=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("react"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.parts.js"),require("./Tooltip.parts.js"));module.exports=function(i){var o=i.direction,o=void 0===o?"up":o,l=i.children,n=i.className,d=i.variant,m=i.title,i=i.description;return e.jsx(r,{"data-testid":"design-system-toolTip",className:n,children:"rich"===(void 0===d?"plain":d)?e.jsxs(r,{className:t.twMerge("flex w-full flex-col gap-1 rounded-xl bg-white px-6 py-5 shadow-graymedium tablet:w-80 desktop:w-80"),"data-testid":"design-system-toolTip--rich",children:[e.jsx(r,{className:"flex w-full items-start justify-between gap-4",children:e.jsx(s,{variant:"body2",className:"font-medium text-w-gray-900",children:m})}),e.jsx(s,{variant:"body3",className:"text-w-gray-400",children:i})]}):e.jsxs(r,{className:"relative h-fit w-full select-none border-none opacity-80 outline-none","data-testid":"design-system-toolTip--plain",children:[e.jsx(a.Arrow,{testId:"design-system-toolTip--arrow",className:t.twMerge("absolute z-10","down"===o&&"-bottom-[7px] left-1/2 translate-x-[-50%] -rotate-90","up"===o&&"-top-[7px] left-1/2 translate-x-[-50%] rotate-90","left"===o&&"-left-[4.8px] top-1/2 translate-y-[-50%] rotate-0","right"===o&&"-right-[4.8px] top-1/2 translate-y-[-50%] rotate-180")}),e.jsx(r,{className:"z-0 flex h-auto min-h-[28px] w-full items-center rounded-lg bg-w-black px-3 py-1",children:e.jsx(s,{variant:"body3",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:l})})]})})};
@@ -1,7 +1,7 @@
1
1
  import type { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ direction, children, className }: import("./Tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element;
4
+ component: ({ direction, children, className, variant, title, description, }: import("./Tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element;
5
5
  tags: string[];
6
6
  argTypes: {
7
7
  direction: {
@@ -11,6 +11,12 @@ declare const meta: {
11
11
  className: {
12
12
  control: string;
13
13
  };
14
+ title: {
15
+ control: string;
16
+ };
17
+ description: {
18
+ control: string;
19
+ };
14
20
  };
15
21
  };
16
22
  export default meta;
@@ -19,3 +25,4 @@ export declare const Up: Story;
19
25
  export declare const Down: Story;
20
26
  export declare const Left: Story;
21
27
  export declare const Right: Story;
28
+ export declare const Rich: Story;
@@ -0,0 +1,11 @@
1
+ import { PropsWithChildren } from 'react';
2
+ export interface DialogProps extends PropsWithChildren {
3
+ title: string;
4
+ description: string;
5
+ variant?: 'primary' | 'caution';
6
+ onClick?: () => void;
7
+ confirm?: string;
8
+ close?: string;
9
+ }
10
+ declare const Dialog: ({ children, title, description, variant, onClick, confirm, close, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
11
+ export default Dialog;
@@ -0,0 +1,2 @@
1
+ 'use client';
2
+ "use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Atoms/Typography/Typography.js"),i=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Box/Box.js")),o=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Radio/Radio.js"),require("../../Atoms/Button/Button.js")),t=(require("../../Atoms/TextField/TextField.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallScrap.js"),require("../../Atoms/SystemIcon/Icons/Small/SmallBell.js"),require("../../Atoms/SystemIcon/Icons/Medium/MediumEdit.js"),require("../../Atoms/ChoiceChip/ChoiceChip.js"),require("react"),require("../../Atoms/Label/Label.js"),require("../../Atoms/ModalContext/ModalContext.js"));module.exports=function(l){var a=l.children,n=l.title,d=l.description,c=l.variant,m=l.onClick,u=l.confirm,l=l.close,l=void 0===l?"닫기":l,c="caution"===(void 0===c?"primary":c);return e.jsxs(t.Root,{size:"sm",children:[e.jsx(t.Trigger,{testId:"design-system-dialog--trigger",children:a}),e.jsxs(t.Content,{testId:"design-system-dialog--content",className:"box-border flex h-auto min-h-[250px] w-[320px] flex-col gap-8 overflow-hidden bg-w-white p-8 tablet:w-[400px] desktop:w-[400px]",children:[e.jsxs(i,{className:"flex w-full flex-col gap-6",children:[e.jsx(s,{variant:"subTitle2",className:"font-medium text-w-gray-900",children:n}),e.jsx(s,{variant:"body1",className:"whitespace-break-spaces text-w-gray-800",children:d})]}),e.jsxs(i,{className:"flex w-full items-center justify-end gap-4",children:[e.jsx(t.Close,{testId:"design-system-dialog--close-button",children:e.jsx(o,{variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-200 hover:bg-w-bluegray-200",children:l})}),e.jsx(t.Close,{testId:"design-system-dialog--confirm-button",children:e.jsx(o,{onClick:m,variant:"solid",className:r.twJoin(c&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-500 hover:bg-w-orange-500"),children:u})})]})]})]})};
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Dialog from './Dialog';
3
+ declare const meta: Meta<typeof Dialog>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Primary: Story;
7
+ export declare const Caution: Story;
@@ -0,0 +1,2 @@
1
+ import Dialog from './Dialog';
2
+ export default Dialog;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("./Dialog.js");module.exports=e;
@@ -7,3 +7,4 @@ export { Autocomplete } from './Autocomplete';
7
7
  export type { SkillItem, LegacySkillItem } from './Autocomplete';
8
8
  export { default as TableOfContents } from './TableOfContents';
9
9
  export type { TableOfContentsProps, ContentItem } from './TableOfContents';
10
+ export { default as Dialog } from './Dialog';
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),t=require("./Components/Atoms/CountBadge/CountBadge.js"),s=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),n=require("./Components/Atoms/Radio/Radio.js"),i=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),u=require("./Components/Atoms/Divider/Divider.js"),m=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),x=require("./Components/Atoms/Avatar/Avatar.js"),C=require("./Components/Atoms/Switch/Switch.js"),l=require("./Components/Atoms/SystemIcon/SystemIcon.js"),c=require("./Components/Atoms/NewBadge/NewBadge.js"),d=require("./Components/Atoms/ChoiceChip/ChoiceChip.js"),j=require("./Components/Atoms/Textarea/Textarea.js"),q=require("./Components/Atoms/IconButton/IconButton.js"),g=require("./Components/Atoms/SkillChip/SkillChip.js"),B=require("./Components/Atoms/ImageLabel/ImageLabel.js"),h=require("./Components/Atoms/Label/Label.js"),T=require("./Components/Atoms/ModalContext/ModalContext.js"),A=require("./Components/Molecules/WithBadge/WithBadge.js"),L=require("./Components/Molecules/GridLayout/GridLayout.js"),b=require("./Components/Molecules/CheckboxList/CheckboxList.js"),M=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),S=require("./Components/Molecules/RadioList/RadioList.js"),k=require("./Components/Molecules/MessageBox/MessageBox.js"),I=require("./Components/Molecules/TextButton/TextButton.js"),w=require("./Components/Molecules/InputChip/InputChip.js"),y=require("./Components/Molecules/List/List.js"),D=require("./Components/Molecules/Pagination/Pagination.js"),R=require("./Components/Molecules/Drawer/Drawer.js"),v=require("./Components/Molecules/SnackBar/SnackBar.js"),O=require("./Components/Molecules/Tooltip/Tooltip.js"),G=require("./Components/Molecules/RangeSlider/RangeSlider.js"),F=require("./Components/Molecules/RadioGroup/RadioGroup.js"),N=require("./Components/Organisms/TextTab/TextTab.js"),P=require("./Components/Organisms/GNBList/GNBList.js"),W=require("./Components/Organisms/TextFieldDropdown/TextFieldDropdown.js"),f=require("./Components/Organisms/TextButtonsDropdown/TextButtonsDropdown.js"),z=require("./Components/Organisms/WithSnackBar/WithSnackBar.js"),E=require("./Components/Organisms/Autocomplete/Autocomplete.js"),H=require("./Components/Organisms/TableOfContents/TableOfContents.js");exports.Typography=e,exports.Checkbox=o,exports.CountBadge=t,exports.Box=s,exports.ProductIcon=r,exports.Radio=n,exports.Button=i,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=u,exports.ServiceLogo=m,exports.Avatar=x,exports.Switch=C,exports.SystemIcon=l,exports.NewBadge=c,exports.ChoiceChip=d,exports.Textarea=j,exports.IconButton=q,exports.SkillChip=g,exports.ImageLabel=B,exports.Label=h,exports.ModalContext=T,exports.WithBadge=A,exports.GridLayout=L,exports.CheckboxList=b,exports.CheckboxCard=M,exports.RadioList=S,exports.MessageBox=k,exports.TextButton=I,exports.InputChip=w,exports.List=y,exports.Pagination=D,exports.Drawer=R,exports.SnackBar=v,exports.Tooltip=O,exports.RangeSlider=G,exports.RadioGroup=F,exports.TextTab=N,exports.GNBList=P,exports.TextFieldDropdown=W,exports.TextButtonsDropdown=f,exports.WithSnackBar=z,exports.Autocomplete=E,exports.TableOfContents=H;
1
+ "use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),t=require("./Components/Atoms/CountBadge/CountBadge.js"),s=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),n=require("./Components/Atoms/Radio/Radio.js"),i=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),u=require("./Components/Atoms/Divider/Divider.js"),m=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),x=require("./Components/Atoms/Avatar/Avatar.js"),C=require("./Components/Atoms/Switch/Switch.js"),l=require("./Components/Atoms/SystemIcon/SystemIcon.js"),c=require("./Components/Atoms/NewBadge/NewBadge.js"),d=require("./Components/Atoms/ChoiceChip/ChoiceChip.js"),j=require("./Components/Atoms/Textarea/Textarea.js"),q=require("./Components/Atoms/IconButton/IconButton.js"),g=require("./Components/Atoms/SkillChip/SkillChip.js"),B=require("./Components/Atoms/ImageLabel/ImageLabel.js"),h=require("./Components/Atoms/Label/Label.js"),T=require("./Components/Atoms/ModalContext/ModalContext.js"),A=require("./Components/Molecules/WithBadge/WithBadge.js"),L=require("./Components/Molecules/GridLayout/GridLayout.js"),b=require("./Components/Molecules/CheckboxList/CheckboxList.js"),M=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),S=require("./Components/Molecules/RadioList/RadioList.js"),k=require("./Components/Molecules/MessageBox/MessageBox.js"),I=require("./Components/Molecules/TextButton/TextButton.js"),w=require("./Components/Molecules/InputChip/InputChip.js"),D=require("./Components/Molecules/List/List.js"),y=require("./Components/Molecules/Pagination/Pagination.js"),R=require("./Components/Molecules/Drawer/Drawer.js"),O=require("./Components/Molecules/SnackBar/SnackBar.js"),v=require("./Components/Molecules/Tooltip/Tooltip.js"),G=require("./Components/Molecules/RangeSlider/RangeSlider.js"),F=require("./Components/Molecules/RadioGroup/RadioGroup.js"),N=require("./Components/Organisms/TextTab/TextTab.js"),P=require("./Components/Organisms/GNBList/GNBList.js"),W=require("./Components/Organisms/TextFieldDropdown/TextFieldDropdown.js"),f=require("./Components/Organisms/TextButtonsDropdown/TextButtonsDropdown.js"),z=require("./Components/Organisms/WithSnackBar/WithSnackBar.js"),E=require("./Components/Organisms/Autocomplete/Autocomplete.js"),H=require("./Components/Organisms/TableOfContents/TableOfContents.js"),J=require("./Components/Organisms/Dialog/Dialog.js");exports.Typography=e,exports.Checkbox=o,exports.CountBadge=t,exports.Box=s,exports.ProductIcon=r,exports.Radio=n,exports.Button=i,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=u,exports.ServiceLogo=m,exports.Avatar=x,exports.Switch=C,exports.SystemIcon=l,exports.NewBadge=c,exports.ChoiceChip=d,exports.Textarea=j,exports.IconButton=q,exports.SkillChip=g,exports.ImageLabel=B,exports.Label=h,exports.ModalContext=T,exports.WithBadge=A,exports.GridLayout=L,exports.CheckboxList=b,exports.CheckboxCard=M,exports.RadioList=S,exports.MessageBox=k,exports.TextButton=I,exports.InputChip=w,exports.List=D,exports.Pagination=y,exports.Drawer=R,exports.SnackBar=O,exports.Tooltip=v,exports.RangeSlider=G,exports.RadioGroup=F,exports.TextTab=N,exports.GNBList=P,exports.TextFieldDropdown=W,exports.TextButtonsDropdown=f,exports.WithSnackBar=z,exports.Autocomplete=E,exports.TableOfContents=H,exports.Dialog=J;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wishket/design-system",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Wishket Design System",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",