@wishket/design-system 0.8.3 → 0.9.0

package/README.md

@@ -1,36 +1,67 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+> **WDS v1.0 will be coming 🎉** Read the [Latest Release notes](https://github.com/wishket/design-system/releases/tag/v0.8.4)
+>
+
+<h1 align="center">Wishket Design System</h1>
+<p align="center">Wishket Design System (WDS) is the design concept system for Wishket products.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@wishket/design-system" target="_blank"><img src="https://img.shields.io/npm/v/@wishket/design-system.svg?style=for-the-badge&label=Latest&color=black" alt="Package version" /></a>
+  <a href="https://www.npmjs.com/package/@wishket/design-system" target="_blank"><img src="https://img.shields.io/npm/dm/@wishket/design-system?style=for-the-badge&color=black" alt="Downloads per month" /></a>
+</p>
+
+<br /><br />
+
+## Features
+
+- **Steady Components**. Frequently used Components based on the Atomic Design Pattern.
+- **Storybook**. You can explore the components in [Storybook](https://design-system.wishdev.net).
 
 ## Getting Started
 
-First, run the development server:
+### 1. Install
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+```shell
+yarn add @wishket/design-system
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+or
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+npm install @wishket/design-system
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+or
 
-## Learn More
+pnpm add @wishket/design-system
+```
+
+### 2. Setting in tailwind.config.ts
 
-To learn more about Next.js, take a look at the following resources:
+```typescript
+// tailwind.config.ts
+import path from 'path';
+import type { Config } from 'tailwindcss';
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+const config: Config = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
+  ],
+  presets: [require('@wishket/design-system/dist/config/tailwind.config')],
+  plugins: [],
+};
+export default config;
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```
 
-## Deploy on Vercel
+## Usage
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+```typescript
+//Home.tsx
+import { Typography } from '@wishket/design-system';
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+export const Home  = () => {
+  return (
+      <Typography variant="title1" className='bg-w-cyan-500'>Hello, World!</Typography>
+  );
+}
+
+export default Home;
+```

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

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.types';
-declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, rounded, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, rounded, needThrottle, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/Components/Atoms/Button/Button.js

@@ -1 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("./Button.parts.js");module.exports=function(i){var t=i.type,d=i.ref,n=i.disabled,a=i.children,o=i.className,s=i.onClick,u=i.size,l=i.variant,i=i.rounded;return e.jsx(r.ButtonContainer,{ref:d,size:void 0===u?"md":u,type:void 0===t?"button":t,disabled:void 0!==n&&n,rounded:void 0!==i&&i,variant:void 0===l?"default":l,className:o,onClick:s,children:a})};
+'use client';
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./Button.parts.js");module.exports=function(n){var i=n.type,i=void 0===i?"button":i,u=n.ref,o=n.disabled,o=void 0!==o&&o,d=n.children,c=n.className,a=n.onClick,s=n.size,s=void 0===s?"md":s,l=n.variant,l=void 0===l?"default":l,v=n.rounded,v=void 0!==v&&v,n=n.needThrottle,n=void 0!==n&&n,f=r.useRef(void 0);return r.useEffect(function(){return function(){f&&clearTimeout(f.current)}},[f]),e.jsx(t.ButtonContainer,{ref:u,size:s,type:i,disabled:o,rounded:v,variant:l,className:c,onClick:n?function(e){e.preventDefault(),f.current||(null!=a&&a(e),f.current=setTimeout(function(){f.current=void 0},300))}:a,children:d})};

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

@@ -5,5 +5,6 @@ export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     size?: ButtonSizeType;
     variant?: ButtonVariantType;
     rounded?: boolean;
+    needThrottle?: boolean;
 }
 export {};

package/dist/Components/Atoms/TextField/TextField.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),s=require("tailwind-merge"),t=require("./parts/LabelContainer.js"),i=require("./parts/PasswordContainer.js"),n=require("./parts/SupportContainer.js"),o=a.forwardRef(function(o,l){var g=o.type,u=o.name,d=o.value,p=o.onChange,c=o.maxLength,x=o.disabled,x=void 0!==x&&x,h=o.placeholder,m=o.lable,b=o.testId,f=o.measure,w=o.isError,v=o.endIcon,y=o.startIcon,j=o.errorMessage,M=o.supportMessage,_=o.variant,_=void 0===_?"default":_,L=o.isMaxLengthVisible,L=void 0!==L&&L,o=e.__rest(o,["type","name","value","onChange","maxLength","disabled","placeholder","lable","testId","measure","isError","endIcon","startIcon","errorMessage","supportMessage","variant","isMaxLengthVisible"]),I=a.useState(!1),q=I[0],C=I[1],I=a.useState(0),E=I[0],F=I[1],I=e.__assign({variant:_,type:g,name:u,value:d,placeholder:h,lable:m,maxLength:c,onChange:p,isFocused:q,isError:w,onFocus:function(){C(!0)},onBlur:function(){C(!1)},disabled:x},o),_=w||M||L;return a.useEffect(function(){"string"==typeof d&&c&&F(d.length)},[d,g,c]),r.jsxs("div",{className:"flex flex-col gap-3 bg-w-white","data-testid":b,children:[r.jsx("label",{role:"input-box",className:s.twMerge("flex shrink-0 cursor-text items-center gap-3 rounded-xl px-4 py-2.5 text-[16px] leading-[26px] text-w-gray-600 ring-1",x?"bg-w-gray-10":"bg-w-white",w?"ring-w-red-500":q?"ring-w-primary":"ring-w-gray-200 hover:ring-w-primary"),children:"password"===g?r.jsx(i,e.__assign({ref:l},I)):r.jsx(t,e.__assign({ref:l,measure:f,startIcon:y,endIcon:v},I))}),_&&r.jsx(n,{isError:w,errorMessage:j,supportMessage:M,currentLength:E,maxLength:c,isMaxLengthVisible:L})]})});o.displayName="TextField",module.exports=o;
+"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),s=require("tailwind-merge"),t=require("./parts/LabelContainer.js"),n=require("./parts/PasswordContainer.js"),i=require("./parts/SupportContainer.js"),o=a.forwardRef(function(o,l){var g=o.type,u=o.name,d=o.value,p=o.onChange,c=o.maxLength,x=o.disabled,x=void 0!==x&&x,h=o.placeholder,m=o.lable,w=o.testId,b=o.measure,f=o.isError,v=o.endIcon,y=o.startIcon,j=o.errorMessage,L=o.supportMessage,M=o.variant,M=void 0===M?"default":M,_=o.isMaxLengthVisible,_=void 0!==_&&_,o=e.__rest(o,["type","name","value","onChange","maxLength","disabled","placeholder","lable","testId","measure","isError","endIcon","startIcon","errorMessage","supportMessage","variant","isMaxLengthVisible"]),I=a.useState(!1),q=I[0],C=I[1],I=a.useState(0),E=I[0],S=I[1],I=a.useState(!1),F=I[0],N=I[1],I=e.__assign({variant:M,type:g,name:u,value:d,placeholder:h,lable:m,maxLength:c,onChange:p,isFocused:q,isError:f,onFocus:function(){C(!0)},onBlur:function(){C(!1)},disabled:x},o),u=f||L||_;return a.useEffect(function(){"string"==typeof d&&c&&S(d.length)},[d,g,c]),a.useEffect(function(){var e=window.navigator.userAgent.toLowerCase().includes("mobile");N(e)},[]),r.jsxs("div",{className:"flex flex-col gap-3 bg-w-white","data-testid":w,children:[r.jsx("label",{role:"input-box",className:s.twMerge("flex shrink-0 cursor-text items-center gap-3 rounded-xl px-4 py-2.5 text-[16px] leading-[26px] text-w-gray-600 ring-1","lable"===M&&"h-[66px] px-[17px] py-3",x?"bg-w-gray-10":"bg-w-white",f?"ring-w-red-500":q?"ring-w-primary":F?"ring-w-gray-200":"ring-w-gray-200 hover:ring-w-primary"),children:"password"===g?r.jsx(n,e.__assign({ref:l},I)):r.jsx(t,e.__assign({ref:l,measure:b,startIcon:y,endIcon:v},I))}),u&&r.jsx(i,{isError:f,errorMessage:j,supportMessage:L,currentLength:E,maxLength:c,isMaxLengthVisible:_})]})});o.displayName="TextField",module.exports=o;

package/dist/Components/Atoms/TextField/parts/InputContainer.js

@@ -1 +1 @@
-"use strict";var e=require("../../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),l=require("tailwind-merge"),r=require("react").forwardRef(function(r,t){function s(){return m?"text-w-red-500":h?"text-w-primary":"text-w-gray-300"}var n=r.type,i=r.name,o=r.value,u=r.onFocus,d=r.onBlur,x=r.onChange,c=r.maxLength,g=r.disabled,p=r.placeholder,f=r.lable,m=r.isError,w=r.variant,h=r.isFocused,r=e.__rest(r,["type","name","value","onFocus","onBlur","onChange","maxLength","disabled","placeholder","lable","isError","variant","isFocused"]),n=e.__assign({role:"text-input",type:n,name:i,value:o,onChange:x,onFocus:u,onBlur:d,maxLength:c,placeholder:p,disabled:g},r),i="w-full outline-none placeholder:text-w-gray-300 disabled:bg-w-gray-10",x=m?"text-w-red-500":"text-w-gray-600";return"default"===w?a.jsx("input",e.__assign({ref:t,className:l.twMerge(i,x)},n)):"lable_fixed"===w?a.jsxs("div",{className:"flex w-full flex-col",children:[a.jsx("div",{className:l.twMerge("text-[11px] leading-[14px]",s()),children:f}),a.jsx("input",e.__assign({ref:t,className:l.twMerge(i,x)},n))]}):"lable"===w?a.jsxs("label",{className:"relative flex w-full flex-col",children:[a.jsx("div",{className:l.twMerge("absolute",s(),h||o?"transition-all duration-300 scale-[0.6875] -translate-y-0.5 origin-top-left":"text-[16px] transition-all duration-300 translate-y-2 origin-top-left"),children:f}),a.jsx("input",e.__assign({ref:t,className:l.twMerge(i,x,"pt-[14px]")},n))]}):void 0});r.displayName="InputContainer",module.exports=r;
+"use strict";var e=require("../../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),l=require("tailwind-merge"),t=require("react").forwardRef(function(t,r){function s(){return m?"text-w-red-500":h?"text-w-primary":"text-w-gray-300"}var n=t.type,i=t.name,o=t.value,u=t.onFocus,d=t.onBlur,x=t.onChange,c=t.maxLength,g=t.disabled,p=t.placeholder,f=t.lable,m=t.isError,w=t.variant,h=t.isFocused,t=e.__rest(t,["type","name","value","onFocus","onBlur","onChange","maxLength","disabled","placeholder","lable","isError","variant","isFocused"]),n=e.__assign({role:"text-input",type:n,name:i,value:o,onChange:x,onFocus:u,onBlur:d,maxLength:c,placeholder:p,disabled:g},t),i="w-full outline-none placeholder:text-w-gray-300 disabled:bg-w-gray-10",x=m?"text-w-red-500":"text-w-gray-600";return"default"===w?a.jsx("input",e.__assign({ref:r,className:l.twMerge(i,x)},n)):"lable_fixed"===w?a.jsxs("div",{className:"flex w-full flex-col",children:[a.jsx("div",{className:l.twMerge("text-[11px] leading-[14px]",s()),children:f}),a.jsx("input",e.__assign({ref:r,className:l.twMerge(i,x)},n))]}):"lable"===w?a.jsxs("label",{className:"relative flex w-full flex-col",children:[a.jsx("div",{className:l.twMerge("absolute",s(),h||o?"transition-all duration-300 scale-[0.6875] -translate-y-0.5 origin-top-left":"text-[16px] transition-all duration-300 translate-y-2 origin-top-left -top-[1px]"),children:f}),a.jsx("input",e.__assign({ref:r,className:l.twMerge(i,x,"pt-[14px]")},n))]}):void 0});t.displayName="InputContainer",module.exports=t;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),i=require("../../Atoms/Typography/Typography.js"),r=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../../_virtual/_tslib.js"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("./CheckboxCard.parts.js")),s=require("./useCheckboxCard.js");module.exports=function(a){var d=a.disabled,d=void 0!==d&&d,o=a.checked,c=a.isError,c=void 0!==c&&c,n=a.onChange,x=a.isWide,x=void 0!==x&&x,h=a.className,l=a.iconName,m=a.title,C=a.description,a=a.testId,o=s({checked:void 0!==o&&o,disabled:d,onChange:n}),n=o.isHover,u=o.isChecked,b=o.hoverListItemContainer,g=o.unhoverListItemContainer,o=o.handleChange;return e.jsx("label",{className:"h-fit w-fit","data-testid":a,role:"checkbox-card",children:e.jsxs(r.CheckboxCardContainer,{"data-testid":"design-system-checkboxCard--container",checked:u,isError:c,isWide:x,isHover:n,disabled:d,onMouseOver:b,onMouseOut:g,className:h,children:[e.jsx(r.StyledCheckbox,{isWide:x,checked:u,onChange:o,isError:c,isHover:n,disabled:d}),e.jsx(r.CheckboxCardIcon,{iconName:l,disabled:!!c||d}),e.jsxs(r.TitleContainer,{isWide:x,"data-testid":"design-system-checkboxCard--titleBox",children:[e.jsx(i,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:t.twMerge("font-medium",x?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-900"),children:m}),C&&e.jsx(i,{variant:"body2",className:t.twMerge("font-medium",x?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:C})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("../../Atoms/Typography/Typography.js"),i=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../../_virtual/_tslib.js"),require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("./CheckboxCard.parts.js")),s=require("./useCheckboxCard.js");module.exports=function(a){var d=a.disabled,d=void 0!==d&&d,o=a.checked,c=a.isError,c=void 0!==c&&c,n=a.onChange,x=a.isWide,x=void 0!==x&&x,h=a.className,l=a.iconName,m=a.title,C=a.description,a=a.testId,o=s({checked:void 0!==o&&o,disabled:d,onChange:n}),n=o.isHover,u=o.isChecked,b=o.hoverListItemContainer,g=o.unhoverListItemContainer,o=o.handleChange;return e.jsx("label",{className:"h-fit w-fit","data-testid":a,role:"checkbox-card",children:e.jsxs(i.CheckboxCardContainer,{"data-testid":"design-system-checkboxCard--container",checked:u,isError:c,isWide:x,isHover:n,disabled:d,onMouseOver:b,onMouseOut:g,className:h,children:[e.jsx(i.StyledCheckbox,{isWide:x,checked:u,onChange:o,isError:c,isHover:n,disabled:d}),e.jsx(i.CheckboxCardIcon,{iconName:l,disabled:!!c||d}),e.jsxs(i.TitleContainer,{isWide:x,"data-testid":"design-system-checkboxCard--titleBox",children:[e.jsx(r,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:t.twMerge("font-medium",x?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-900"),children:m}),C&&e.jsx(r,{variant:"body2",className:t.twMerge("font-medium",x?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:C})]})]})})};

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.parts.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("tailwind-merge"),s=require("../../Atoms/Checkbox/Checkbox.js"),t=require("../../Atoms/ProductIcon/ProductIcon.js");require("../../Atoms/TextField/TextField.js"),require("next/image"),exports.CheckboxCardContainer=function(s){var t=s.children,n=s.isWide,a=s.checked,c=s.isError,o=s.isHover,d=s.disabled,l=s.className,s=e.__rest(s,["children","isWide","checked","isError","isHover","disabled","className"]);return r.jsx("div",e.__assign({className:i.twMerge("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl ring-1",n?"min-h-[94px] w-[298px] flex-row p-[17px]":"min-h-fit w-[224px] flex-col justify-center px-[17px] pb-[25px] pt-[17px]",d?i.twMerge("cursor-not-allowed",a&&!c?"ring-w-cyan-100":"ring-w-gray-200"):c?"ring-w-red-500":a||o?"ring-w-cyan-500":"ring-w-gray-200",d?a&&!c?"bg-w-cyan-10":"bg-w-gray-10":a?c?"bg-w-red-10":"bg-w-cyan-10":"bg-w-white",l)},s,{children:t}))},exports.CheckboxCardIcon=function(e){var i=e.iconName,e=e.disabled;return r.jsx("div",{className:"flex h-[60px] w-[60px] items-center justify-center","data-testid":"design-system-checkboxCard--icon",children:r.jsx(t,{name:i,disabled:e})})},exports.StyledCheckbox=function(t){var n=t.isWide,a=t.className,t=e.__rest(t,["isWide","className"]);return r.jsx(s,e.__assign({className:i.twMerge(!n&&"absolute left-[17px] top-[17px]",a)},t))},exports.TitleContainer=function(e){var s=e.isWide,e=e.children;return r.jsx("div",{className:i.twMerge("flex h-auto w-full flex-col justify-between",s?"items-start":"items-center"),children:e})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("tailwind-merge"),s=require("../../Atoms/Checkbox/Checkbox.js"),t=require("../../Atoms/ProductIcon/ProductIcon.js");require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),exports.CheckboxCardContainer=function(s){var t=s.children,a=s.isWide,n=s.checked,c=s.isError,o=s.isHover,d=s.disabled,l=s.className,s=e.__rest(s,["children","isWide","checked","isError","isHover","disabled","className"]);return r.jsx("div",e.__assign({className:i.twMerge("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl ring-1",a?"min-h-[94px] w-[298px] flex-row p-[17px]":"min-h-fit w-[224px] flex-col justify-center px-[17px] pb-[25px] pt-[17px]",d?i.twMerge("cursor-not-allowed",n&&!c?"ring-w-cyan-100":"ring-w-gray-200"):c?"ring-w-red-500":n||o?"ring-w-cyan-500":"ring-w-gray-200",d?n&&!c?"bg-w-cyan-10":"bg-w-gray-10":n?c?"bg-w-red-10":"bg-w-cyan-10":"bg-w-white",l)},s,{children:t}))},exports.CheckboxCardIcon=function(e){var i=e.iconName,e=e.disabled;return r.jsx("div",{className:"flex h-[60px] w-[60px] items-center justify-center","data-testid":"design-system-checkboxCard--icon",children:r.jsx(t,{name:i,disabled:e})})},exports.StyledCheckbox=function(t){var a=t.isWide,n=t.className,t=e.__rest(t,["isWide","className"]);return r.jsx(s,e.__assign({className:i.twMerge(!a&&"absolute left-[17px] top-[17px]",n)},t))},exports.TitleContainer=function(e){var s=e.isWide,e=e.children;return r.jsx("div",{className:i.twMerge("flex h-auto w-full flex-col justify-between",s?"items-start":"items-center"),children:e})};

package/dist/Components/Molecules/CheckboxList/CheckboxListItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("react"),r=require("tailwind-merge"),t=require("../../Atoms/Typography/Typography.js"),a=require("../../Atoms/Checkbox/Checkbox.js"),c=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(s){var t=s.children,a=s.disabled,c=s.className,s=e.__rest(s,["children","disabled","className"]);return i.jsx("label",e.__assign({className:r.twMerge("grid h-min w-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-checkbox-list-item-container",a?"cursor-not-allowed":"cursor-pointer",c)},s,{children:t}))});module.exports=function(e){var r=e.label,d=e.description,n=e.checked,o=e.disabled,o=void 0!==o&&o,l=e.isError,l=void 0!==l&&l,m=e.className,x=e.CheckboxClassName,e=e.onChange,h=s.useState(!1),b=h[0],g=h[1];return i.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:o,className:m,onMouseOver:function(){g(!0)},onMouseOut:function(){g(!1)},children:[i.jsx("div",{className:"grid-in-checkbox",children:i.jsx(a,{checked:n,isHover:b,isError:l,disabled:o,onChange:e,className:x})}),i.jsx("div",{className:"mb-px grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:i.jsx(t,{variant:"body1",className:o?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-checkboxList--item-label",children:r})}),d&&i.jsx("div",{className:"grid-in-description",children:i.jsx(t,{variant:"body2",className:o?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:d})})]})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("react"),r=require("tailwind-merge"),t=require("../../Atoms/Typography/Typography.js"),a=require("../../Atoms/Checkbox/Checkbox.js"),c=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(s){var t=s.children,a=s.disabled,c=s.className,s=e.__rest(s,["children","disabled","className"]);return i.jsx("label",e.__assign({className:r.twMerge("grid h-min w-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container items-center gap-x-3 gap-y-0.5 grid-areas-checkbox-list-item-container",a?"cursor-not-allowed":"cursor-pointer",c)},s,{children:t}))});module.exports=function(e){var r=e.label,n=e.description,d=e.checked,o=e.disabled,o=void 0!==o&&o,l=e.isError,l=void 0!==l&&l,m=e.className,x=e.CheckboxClassName,e=e.onChange,h=s.useState(!1),u=h[0],g=h[1];return i.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:o,className:m,onMouseOver:function(){g(!0)},onMouseOut:function(){g(!1)},children:[i.jsx("div",{className:"flex cursor-pointer items-center justify-center p-px grid-in-checkbox",children:i.jsx(a,{checked:d,isHover:u,isError:l,disabled:o,onChange:e,className:x})}),i.jsx("div",{className:"flex items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:i.jsx(t,{variant:"body1",className:o?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-checkboxList--item-label",children:r})}),n&&i.jsx("div",{className:"flex items-center grid-in-description",children:i.jsx(t,{variant:"body2",className:o?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:n})})]})};

package/dist/Components/Molecules/IconMessageCard/IconMessageCard.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("tailwind-merge"),require("../../Atoms/Box/Box.js")),i=require("../../Atoms/ProductIcon/ProductIcon.js"),t=(require("../../../_virtual/_tslib.js"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/Divider/Divider.js")),a=(require("next/image"),require("./IconMessageCard.parts.js"));module.exports=function(n){var o=n.icon,d=n.title,c=n.description,n=n.links;return e.jsxs(s,{className:"flex h-auto flex-col rounded-xl border border-w-gray-200","data-testid":"design-system-icon-message-card--container",children:[e.jsxs(s,{className:"flex h-auto flex-col gap-4 border-w-gray-200 p-6",children:[o&&e.jsx(i,{name:o,size:"medium"}),e.jsxs(s,{className:"flex h-auto flex-col gap-1.5",children:[e.jsx(r,{variant:"subTitle2",className:"whitespace-pre-line font-medium text-w-gray-900","data-testid":"design-system-icon-message-card--title",children:d}),c&&e.jsx(r,{variant:"body1",className:"whitespace-pre-line text-w-gray-600","data-testid":"design-system-icon-message-card--description",children:c})]})]}),n&&0<n.length&&e.jsxs(e.Fragment,{children:[e.jsx(t,{}),e.jsx(a.ExternalLinks,{links:n})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("tailwind-merge"),require("../../Atoms/Box/Box.js")),i=require("../../Atoms/ProductIcon/ProductIcon.js"),t=(require("../../../_virtual/_tslib.js"),require("react"),require("../../Atoms/TextField/TextField.js"),require("../../Atoms/Divider/Divider.js")),a=(require("next/image"),require("./IconMessageCard.parts.js"));module.exports=function(n){var o=n.icon,c=n.title,d=n.description,n=n.links;return e.jsxs(s,{className:"flex h-auto flex-col rounded-xl border border-w-gray-200","data-testid":"design-system-icon-message-card--container",children:[e.jsxs(s,{className:"flex h-auto flex-col gap-4 border-w-gray-200 p-6",children:[o&&e.jsx(i,{name:o,size:"medium"}),e.jsxs(s,{className:"flex h-auto flex-col gap-1.5",children:[e.jsx(r,{variant:"subTitle2",className:"whitespace-pre-line font-medium text-w-gray-900","data-testid":"design-system-icon-message-card--title",children:c}),d&&e.jsx(r,{variant:"body1",className:"whitespace-pre-line text-w-gray-600","data-testid":"design-system-icon-message-card--description",children:d})]})]}),n&&0<n.length&&e.jsxs(e.Fragment,{children:[e.jsx(t,{}),e.jsx(a.ExternalLinks,{links:n})]})]})};

package/dist/Components/Molecules/IconMessageCard/IconMessageCard.parts.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("next/link"),t=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("tailwind-merge"),require("../../Atoms/Box/Box.js")),i=(require("../../../_virtual/_tslib.js"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("../../Atoms/SystemIcon/SystemIcon.js"));exports.ExternalLinks=function(n){n=n.links;return e.jsx(s,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-icon-message-card--external-links-container",children:null==n?void 0:n.map(function(s,n){return e.jsxs(r,{target:s.target||"_blank",prefetch:"_self"===s.target,href:s.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":"design-system-icon-message-card--external-links-item-".concat(n),children:[e.jsx(t,{variant:"body1",className:"hover:underline hover:underline-offset-2",children:s.title}),e.jsx(i,{name:"small_arrow_right"})]},"".concat(s.title,"-").concat(s.url))})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("next/link"),t=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("tailwind-merge"),require("../../Atoms/Box/Box.js")),i=(require("../../../_virtual/_tslib.js"),require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("../../Atoms/SystemIcon/SystemIcon.js"));exports.ExternalLinks=function(n){n=n.links;return e.jsx(s,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-icon-message-card--external-links-container",children:null==n?void 0:n.map(function(s,n){return e.jsxs(r,{target:s.target||"_blank",prefetch:"_self"===s.target,href:s.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":"design-system-icon-message-card--external-links-item-".concat(n),children:[e.jsx(t,{variant:"body1",className:"hover:underline hover:underline-offset-2",children:s.title}),e.jsx(i,{name:"small_arrow_right"})]},"".concat(s.title,"-").concat(s.url))})})};

package/dist/Components/Molecules/RadioList/RadioListItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("react"),s=require("tailwind-merge"),a=require("../../Atoms/Typography/Typography.js"),t=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Radio/Radio.js")),d=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(r){var a=r.children,t=r.disabled,d=r.className,r=e.__rest(r,["children","disabled","className"]);return i.jsx("label",e.__assign({className:s.twMerge("grid h-min w-min grid-cols-radio-list-item-container grid-rows-radio-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-radio-list-item-container",t?"cursor-not-allowed":"cursor-pointer",d)},r,{children:a}))});module.exports=function(e){var s=e.name,n=e.value,o=e.label,l=e.description,c=e.checked,m=e.disabled,m=void 0!==m&&m,u=e.isError,u=void 0!==u&&u,g=e.className,x=e.RadioClassName,e=e.onChange,h=r.useState(!1),v=h[0],b=h[1];return i.jsxs(d,{"data-testid":"design-system-radioList--item",disabled:m,className:g,onMouseOver:function(){b(!0)},onMouseOut:function(){b(!1)},children:[i.jsx("div",{className:"cursor-pointer grid-in-radio",children:i.jsx(t,{name:s,value:n,checked:c,isHover:v,isError:u,disabled:m,onChange:e,className:x})}),i.jsx("div",{className:"grid-in-label",children:i.jsx(a,{variant:"body1",className:m?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-radioList--item-label",children:o})}),l&&i.jsx("div",{className:"grid-in-description",children:i.jsx(a,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-radioList--item-description",children:l})})]})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("react"),s=require("tailwind-merge"),a=require("../../Atoms/Typography/Typography.js"),t=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Radio/Radio.js")),d=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(r){var a=r.children,t=r.disabled,d=r.className,r=e.__rest(r,["children","disabled","className"]);return i.jsx("label",e.__assign({className:s.twMerge("grid h-min w-min grid-cols-radio-list-item-container grid-rows-radio-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-radio-list-item-container",t?"cursor-not-allowed":"cursor-pointer",d)},r,{children:a}))});module.exports=function(e){var s=e.name,n=e.value,o=e.label,l=e.description,c=e.checked,m=e.disabled,m=void 0!==m&&m,u=e.isError,u=void 0!==u&&u,g=e.className,x=e.RadioClassName,e=e.onChange,h=r.useState(!1),v=h[0],b=h[1];return i.jsxs(d,{"data-testid":"design-system-radioList--item",disabled:m,className:g,onMouseOver:function(){b(!0)},onMouseOut:function(){b(!1)},children:[i.jsx("div",{className:"flex cursor-pointer items-center grid-in-radio",children:i.jsx(t,{name:s,value:n,checked:c,isHover:v,isError:u,disabled:m,onChange:e,className:x})}),i.jsx("div",{className:"flex items-center grid-in-label",children:i.jsx(a,{variant:"body1",className:m?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-radioList--item-label",children:o})}),l&&i.jsx("div",{className:"flex items-center grid-in-description",children:i.jsx(a,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-radioList--item-description",children:l})})]})};

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

@@ -0,0 +1,3 @@
+import { TextButtonProps } from './TextButton.types';
+declare const TextButton: ({ text, isSmall, iconAlign, badgeText, }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default TextButton;

package/dist/Components/Molecules/TextButton/TextButton.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Badge/Badge.js")),i=require("../../Atoms/Box/Box.js"),r=(require("../../../_virtual/_tslib.js"),require("tailwind-merge"),require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("../../Atoms/SystemIcon/SystemIcon.js"));module.exports=function(a){var n=a.text,o=a.isSmall,o=void 0!==o&&o,d=a.iconAlign,d=void 0===d?"none":d,a=a.badgeText;return e.jsxs(i,{"data-testid":"design-system-text-button--container",className:"flex min-h-6 w-fit cursor-pointer items-center justify-center gap-x-0.5",children:["left"===d&&e.jsx(i,{"data-testid":"design-system-text-button--icon--left",className:"w-fit",children:e.jsx(r,{name:o?"small_arrow_left":"medium_arrow_left",className:"text-w-cyan-500"})}),e.jsx(i,{"data-testid":"design-system-text-button--text",className:"w-fit",children:e.jsx(t,{variant:o?"body2":"body1",className:"align-baseline text-w-cyan-500",children:n})}),"right"===d&&e.jsx(i,{"data-testid":"design-system-text-button--icon--right",className:"w-fit",children:e.jsx(r,{name:o?"small_arrow_right":"medium_arrow_right",className:"text-w-cyan-500"})}),!!a&&e.jsx(i,{"data-testid":"design-system-text-button--badge",children:e.jsx(s,{text:null!=a?a:""})})]})};

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

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

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

@@ -0,0 +1,6 @@
+export interface TextButtonProps {
+    text: string;
+    isSmall?: boolean;
+    iconAlign?: 'left' | 'right' | 'none';
+    badgeText?: string;
+}

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

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

package/dist/Components/Molecules/TextButton/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./TextButton.js");module.exports=e;

package/dist/Components/Molecules/WithBadge/WithBadge.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Badge/Badge.js"));require("../../Atoms/TextField/TextField.js"),require("next/image"),module.exports=function(i){var a=i.text,s=i.children,d=i.className,l=i.variant,l=void 0===l?"small":l,o=i.showZero,o=void 0!==o&&o,i=i.disabled,i=void 0!==i&&i;return e.jsxs("div",{className:r.twMerge("relative w-fit",d),"data-testid":"with-badge",children:[s,e.jsx(t,{text:a,variant:l,disabled:i,showZero:o,className:"absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 transform"})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=(require("../../../_virtual/_tslib.js"),require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Badge/Badge.js"));require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),module.exports=function(i){var a=i.text,s=i.children,d=i.className,l=i.variant,l=void 0===l?"small":l,o=i.showZero,o=void 0!==o&&o,i=i.disabled,i=void 0!==i&&i;return e.jsxs("div",{className:r.twMerge("relative w-fit",d),"data-testid":"with-badge",children:[s,e.jsx(t,{text:a,variant:l,disabled:i,showZero:o,className:"absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 transform"})]})};

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

@@ -4,3 +4,4 @@ export { default as CheckboxList } from './CheckboxList';
 export { default as CheckboxCard } from './CheckboxCard';
 export { default as RadioList } from './RadioList';
 export { default as IconMessageCard } from './IconMessageCard';
+export { default as TextButton } from './TextButton';

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),s=require("./Components/Atoms/Badge/Badge.js"),t=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),i=require("./Components/Atoms/Radio/Radio.js"),n=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),m=require("./Components/Atoms/Divider/Divider.js"),x=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),d=require("./Components/Atoms/Avatar/Avatar.js"),u=require("./Components/Atoms/Switch/Switch.js"),c=require("./Components/Atoms/SystemIcon/SystemIcon.js"),C=require("./Components/Molecules/WithBadge/WithBadge.js"),j=require("./Components/Molecules/GridLayout/GridLayout.js"),q=require("./Components/Molecules/CheckboxList/CheckboxList.js"),g=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),h=require("./Components/Molecules/RadioList/RadioList.js"),l=require("./Components/Molecules/IconMessageCard/IconMessageCard.js"),A=require("./Components/Organisms/Modal/Modal.js"),L=require("./Components/Organisms/TextTab/TextTab.js");exports.Typography=e,exports.Checkbox=o,exports.Badge=s,exports.Box=t,exports.ProductIcon=r,exports.Radio=i,exports.Button=n,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=m,exports.ServiceLogo=x,exports.Avatar=d,exports.Switch=u,exports.SystemIcon=c,exports.WithBadge=C,exports.GridLayout=j,exports.CheckboxList=q,exports.CheckboxCard=g,exports.RadioList=h,exports.IconMessageCard=l,exports.Modal=A,exports.TextTab=L;
+"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),s=require("./Components/Atoms/Badge/Badge.js"),t=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"),x=require("./Components/Atoms/Divider/Divider.js"),u=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),m=require("./Components/Atoms/Avatar/Avatar.js"),d=require("./Components/Atoms/Switch/Switch.js"),c=require("./Components/Atoms/SystemIcon/SystemIcon.js"),C=require("./Components/Molecules/WithBadge/WithBadge.js"),j=require("./Components/Molecules/GridLayout/GridLayout.js"),q=require("./Components/Molecules/CheckboxList/CheckboxList.js"),g=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),l=require("./Components/Molecules/RadioList/RadioList.js"),h=require("./Components/Molecules/IconMessageCard/IconMessageCard.js"),A=require("./Components/Molecules/TextButton/TextButton.js"),B=require("./Components/Organisms/Modal/Modal.js"),L=require("./Components/Organisms/TextTab/TextTab.js");exports.Typography=e,exports.Checkbox=o,exports.Badge=s,exports.Box=t,exports.ProductIcon=r,exports.Radio=n,exports.Button=i,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=x,exports.ServiceLogo=u,exports.Avatar=m,exports.Switch=d,exports.SystemIcon=c,exports.WithBadge=C,exports.GridLayout=j,exports.CheckboxList=q,exports.CheckboxCard=g,exports.RadioList=l,exports.IconMessageCard=h,exports.TextButton=A,exports.Modal=B,exports.TextTab=L;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Wishket Design System",
   "main": "dist/index.js",
   "module": "dist/index.es.js",