UNPKG

tsm-ui

Version:

### Welcome to TSM-UI: Your Design System for Modern Web Development

6 lines (5 loc) • 5.37 kB
1
2
3
4
5
6
import{s as d}from"./index.f31275f4.js";import{H as k}from"./index.8ca84786.js";import{T as g}from"./index.655ecc4d.js";import{a as r,F as i,j as t}from"./jsx-runtime.e41c3930.js";import{r as x}from"./index.d591fb27.js";import{I as b,r as v}from"./IconBase.esm.b270398d.js";import"./index.8dde8ec8.js";import"./_commonjsHelpers.712cc82f.js";var n=new Map;n.set("bold",function(e){return r(i,{children:[t("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),t("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"})]})});n.set("duotone",function(e){return r(i,{children:[t("line",{x1:"200",y1:"56",x2:"56",y2:"200",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),t("line",{x1:"200",y1:"200",x2:"56",y2:"56",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})]})});n.set("fill",function(){return t(i,{children:t("path",{d:"M139.3,128l66.4-66.3a8.1,8.1,0,0,0-11.4-11.4L128,116.7,61.7,50.3A8.1,8.1,0,0,0,50.3,61.7L116.7,128,50.3,194.3a8.1,8.1,0,0,0,0,11.4,8.2,8.2,0,0,0,11.4,0L128,139.3l66.3,66.4a8.2,8.2,0,0,0,11.4,0,8.1,8.1,0,0,0,0-11.4Z"})})});n.set("light",function(e){return r(i,{children:[t("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),t("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})]})});n.set("thin",function(e){return r(i,{children:[t("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),t("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"})]})});n.set("regular",function(e){return r(i,{children:[t("line",{x1:"200",y1:"56",x2:"56",y2:"200",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),t("line",{x1:"200",y1:"200",x2:"56",y2:"56",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})]})});var L=function(s,p){return v(s,p,n)},h=x.exports.forwardRef(function(e,s){return t(b,{...Object.assign({ref:s},e,{renderPath:L})})});h.displayName="X";const W=h,o="20px",j=d("div",{display:"flex",justifyContent:"space-between",backgroundColor:"$colorGreatAreaPrev",border:"4px solid $colorGreen030",borderRadius:"$sm",padding:"$2 $5",width:"$80",position:"absolute",variants:{position:{"top-left":{top:o,left:o},"top-center":{top:o,left:"50%",transform:"translateX(-50%)"},"top-right":{top:o,right:o},"bottom-left":{bottom:o,left:o},"bottom-center":{bottom:o,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:o,right:o}}}}),T=d("div",{display:"flex",flexDirection:"column"}),$=d("div",{color:"$colorPrimary020",marginRight:"-$3",cursor:"pointer"}),C=d(k,{color:"$colorSecondary010",lineHeight:"$base"}),_=d(g,{color:"$colorPrimary020"});function l({title:e,text:s,show:p,onClose:f,position:y="bottom-right"}){return p?r(j,{position:y,children:[r(T,{children:[t(C,{as:"span",size:"sm",children:e}),t(_,{as:"span",size:"sm",children:s})]}),t($,{onClick:f,children:t(W,{size:20})})]}):null}l.displayName="Toast";try{l.displayName="Toast",l.__docgenInfo={description:"",displayName:"Toast",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},show:{defaultValue:null,description:"",name:"show",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},position:{defaultValue:{value:"bottom-right"},description:"",name:"position",required:!1,type:{name:"enum",value:[{value:'"top-left"'},{value:'"top-center"'},{value:'"top-right"'},{value:'"bottom-left"'},{value:'"bottom-center"'},{value:'"bottom-right"'}]}}}}}catch{}const A={title:"Components/Toast",component:l,argTypes:{onClose:{action:"onClose",table:{disable:!0}},position:{options:["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],control:"select"}},parameters:{layout:"centered",docs:{description:{story:"The toast component is a versatile and user- friendly element that allows you to display important messages or notifications to your users.It provides a non- intrusive way to convey information, such as success messages, error alerts, or general notifications.With customizable features, you can easily configure the appearance, duration, and position of the toast to fit your application s needs.Whether it s providing feedback, notifying users about updates, or displaying error messages, the toast component is an effective and intuitive tool to enhance the user experience of your application."}}}},P=e=>t("div",{style:{height:"190px"},children:t(l,{...e})}),a=P.bind({});a.args={title:"Appointment booked",text:"Wednesday, March 21st at 8:00 PM",show:!0,position:"top-right"};var u,c,m;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`args => <div style={{ height: '190px' }}> <Toast {...args} /> </div>`,...(m=(c=a.parameters)==null?void 0:c.docs)==null?void 0:m.source}}};const F=["Primary"];export{a as Primary,F as __namedExportsOrder,A as default};