@designcrowd/fe-shared-lib 1.5.20 → 1.5.21

package/.storybook-static/assets/ButtonsCrazyDomains.stories-oZtahAmR.js

@@ -0,0 +1,199 @@
+import{B as r}from"./Button-DtVlr_q3.js";import"./ButtonPrimary-DG9wNod9.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-8mZGP41G.js";const i={title:"Components/Buttons/Crazy Domains",component:r},t=()=>({components:{Button:r},data(){return{themeCrazyDomains:"crazyDomains"}},template:`
+    <table class="tw-w-full">
+      <thead>
+        <tr>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="tw-bg-grayscale-200">
+          <td class="tw-p-4">
+            <Button
+              label="Regular Button"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Regular Button"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              size="large"
+              url="http://www.google.com"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Button Anchor Link"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                size="large"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr class="tw-bg-grayscale-200">
+          <td class="tw-p-4">
+            <Button
+              label="Regular Button (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Regular Button (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              url="http://www.google.com"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Button Anchor Link (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    `});t.story={name:"Primary"};var n,a,e;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button
+    },
+    data() {
+      return {
+        themeCrazyDomains: 'crazyDomains'
+      };
+    },
+    template: \`
+    <table class="tw-w-full">
+      <thead>
+        <tr>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="tw-bg-grayscale-200">
+          <td class="tw-p-4">
+            <Button
+              label="Regular Button"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Regular Button"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              size="large"
+              url="http://www.google.com"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Button Anchor Link"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                size="large"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr class="tw-bg-grayscale-200">
+          <td class="tw-p-4">
+            <Button
+              label="Regular Button (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Regular Button (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+        <tr>
+          <td class="tw-p-4">
+            <Button
+              label="Button Anchor Link (small)"
+              size="small"
+              :theme="themeCrazyDomains"
+              variant="primary"
+              url="http://www.google.com"
+            />
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Button
+                label="Button Anchor Link (small)"
+                size="small"
+                :theme="themeCrazyDomains"
+                variant="primary"
+                url="http://www.google.com"
+              /&gt;
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    \`
+  };
+}`,...(e=(a=t.parameters)==null?void 0:a.docs)==null?void 0:e.source}}};const d=["CrazyDomainPrimarySamples"];export{t as CrazyDomainPrimarySamples,d as __namedExportsOrder,i as default};

package/.storybook-static/assets/Checkbox.mixin-DkHpdvGa.js

@@ -0,0 +1 @@
+const e={props:{modelValue:{type:Boolean,required:!0},id:{type:String,required:!0},label:{type:String,required:!1,default:void 0},showLabelScreenReaderOnly:{type:Boolean,required:!1,default:!1},inline:{type:Boolean,required:!1,default:!1},required:{type:Boolean,required:!1,default:!1},disabled:{type:Boolean,required:!1,default:!1},color:{type:String,required:!1,default:"success"},size:{type:String,required:!1,default:"md"},showBorder:{type:Boolean,require:!1,default:!1},classes:{type:[String,Object],required:!1,default:""}}};export{e as C};

package/.storybook-static/assets/Checkbox.stories-C67RL0ut.js

@@ -0,0 +1,203 @@
+import{I as ne}from"./Icon-8mZGP41G.js";import{C as re}from"./Checkbox.mixin-DkHpdvGa.js";import{c as b,e as r,f as w,b as n,z as te,t as se,A as ae,B as ce,h as de,a as le,o as k}from"./iframe-C86bI_2U.js";import{_ as ie}from"./_plugin-vue_export-helper-DlAUqK2U.js";const Z={components:{Icon:ne},mixins:[re],computed:{iconSize(){let e;switch(this.size){case"sm":e="xs";break;case"md":default:e="sm";break}return e}}},me=["for"],ue={key:0,class:"tw-text-error-500"},he={class:"tw-flex tw-justify-between tw-items-center"},pe=["id","checked","disabled"],be=["classes"];function ke(e,x,xe,we,fe,_){const ee=le("Icon");return k(),b("div",{class:n(["tw-box-border",{"tw-cursor-pointer tw-pointer-events-none tw-opacity-30":e.disabled}])},[r("label",{for:`scl-input-${e.id}`,class:n(["tw-cursor-pointer",{"tw-flex tw-items-center":e.inline}])},[e.label?(k(),b("span",{key:0,class:n(["tw-font-sans tw-text-grayscale-700 tw-text-sm tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly,"tw-mb-2":!e.inline,"tw-ml-2 tw-order-last":e.inline}])},[te(se(e.label)+" ",1),e.required?(k(),b("span",ue,"*")):w("",!0)],2)):w("",!0),r("div",he,[r("input",{id:`scl-input-${e.id}`,checked:e.modelValue,type:"checkbox",class:"tw-sr-only",disabled:e.disabled,onChange:x[0]||(x[0]=oe=>e.$emit("update:modelValue",oe.target.checked))},null,40,pe),r("div",{class:n(["tw-rounded tw-duration-300 tw-ease-in-out tw-flex tw-items-center tw-justify-center",{"tw-bg-primary-500":e.modelValue&&e.color==="primary","tw-bg-success-500":e.modelValue&&e.color==="success","tw-bg-error-500":e.modelValue&&e.color==="error","tw-bg-info-500":e.modelValue&&e.color==="info","tw-bg-warning-500":e.modelValue&&e.color==="warning","tw-bg-white":!e.modelValue,"tw-h-5 tw-w-5":e.size==="sm","tw-h-6 tw-w-6":e.size==="md","tw-border tw-border-solid tw-border-grayscale-500":e.showBorder}]),classes:e.classes},[ae(de(ee,{class:n({"tw-mt-1":e.size==="md","tw-mt-0.5":e.size==="sm"}),name:"check",color:"white",size:_.iconSize},null,8,["class","size"]),[[ce,e.modelValue]])],10,be)])],10,me)],2)}const o=ie(Z,[["render",ke]]);Z.__docgenInfo={exportName:"default",displayName:"Checkbox",description:"",tags:{},props:[{name:"modelValue",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},required:!0},{name:"id",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"string"},required:!0},{name:"label",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showLabelScreenReaderOnly",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"inline",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"required",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"color",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'success'"}},{name:"size",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'md'"}},{name:"showBorder",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"classes",mixin:{name:"Checkbox.mixin",path:"Checkbox.mixin.js"},type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}}],events:[{name:"update:modelValue"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Checkbox/Checkbox.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Checkbox/Checkbox.vue"]};const Be={title:"Components/Checkbox",component:o},t=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test"  showBorder/>
+    `}),s=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" showBorder />
+    `}),a=()=>({components:{Checkbox:o},data(){return{checked:!0,unchecked:!1}},template:`
+      <Checkbox v-model="checked" class="tw-mb-4" id="test-1" label="Do you love checkboxes?" :inline="true" showBorder />
+      <Checkbox v-model="unchecked" id="test-2" label="Do you love checkboxes?" :inline="true" showBorder />
+    `}),c=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :required="true" showBorder />
+    `}),d=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" color="success" showBorder />
+    `}),l=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" color="error" showBorder />
+    `}),i=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" color="info" showBorder />
+    `}),m=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" color="warning" showBorder />
+    `}),u=()=>({components:{Checkbox:o},data(){return{checked:!0,unchecked:!1}},template:`
+      <div>
+        <div class="tw-flex tw-gap-4 tw-mb-4">
+          <Checkbox v-model="checked" id="test-1" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-2" :disabled="true" showBorder />
+        </div>
+        <div class="tw-flex tw-gap-4">
+          <Checkbox v-model="checked" id="test-3" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-4" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+        </div>
+      </div
+    `}),h=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <Checkbox v-model="checked" id="test" size="sm" showBorder />
+    `}),p=()=>({components:{Checkbox:o},data(){return{checked:!0}},template:`
+      <div class="tw-bg-grayscale-400 !tw-p-8">
+        <Checkbox v-model="checked" id="test" size="sm" />
+      </div>
+    `});var f,C,v;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test"  showBorder/>
+    \`
+  };
+}`,...(v=(C=t.parameters)==null?void 0:C.docs)==null?void 0:v.source}}};var g,y,B;s.parameters={...s.parameters,docs:{...(g=s.parameters)==null?void 0:g.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" showBorder />
+    \`
+  };
+}`,...(B=(y=s.parameters)==null?void 0:y.docs)==null?void 0:B.source}}};var S,V,j;a.parameters={...a.parameters,docs:{...(S=a.parameters)==null?void 0:S.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true,
+        unchecked: false
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" class="tw-mb-4" id="test-1" label="Do you love checkboxes?" :inline="true" showBorder />
+      <Checkbox v-model="unchecked" id="test-2" label="Do you love checkboxes?" :inline="true" showBorder />
+    \`
+  };
+}`,...(j=(V=a.parameters)==null?void 0:V.docs)==null?void 0:j.source}}};var z,q,D;c.parameters={...c.parameters,docs:{...(z=c.parameters)==null?void 0:z.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :required="true" showBorder />
+    \`
+  };
+}`,...(D=(q=c.parameters)==null?void 0:q.docs)==null?void 0:D.source}}};var I,N,L;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" color="success" showBorder />
+    \`
+  };
+}`,...(L=(N=d.parameters)==null?void 0:N.docs)==null?void 0:L.source}}};var $,E,R;l.parameters={...l.parameters,docs:{...($=l.parameters)==null?void 0:$.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" color="error" showBorder />
+    \`
+  };
+}`,...(R=(E=l.parameters)==null?void 0:E.docs)==null?void 0:R.source}}};var O,U,W;i.parameters={...i.parameters,docs:{...(O=i.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" color="info" showBorder />
+    \`
+  };
+}`,...(W=(U=i.parameters)==null?void 0:U.docs)==null?void 0:W.source}}};var A,F,M;m.parameters={...m.parameters,docs:{...(A=m.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" color="warning" showBorder />
+    \`
+  };
+}`,...(M=(F=m.parameters)==null?void 0:F.docs)==null?void 0:M.source}}};var T,G,H;u.parameters={...u.parameters,docs:{...(T=u.parameters)==null?void 0:T.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true,
+        unchecked: false
+      };
+    },
+    template: \`
+      <div>
+        <div class="tw-flex tw-gap-4 tw-mb-4">
+          <Checkbox v-model="checked" id="test-1" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-2" :disabled="true" showBorder />
+        </div>
+        <div class="tw-flex tw-gap-4">
+          <Checkbox v-model="checked" id="test-3" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-4" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+        </div>
+      </div
+    \`
+  };
+}`,...(H=(G=u.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};var J,K,P;h.parameters={...h.parameters,docs:{...(J=h.parameters)==null?void 0:J.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <Checkbox v-model="checked" id="test" size="sm" showBorder />
+    \`
+  };
+}`,...(P=(K=h.parameters)==null?void 0:K.docs)==null?void 0:P.source}}};var Q,X,Y;p.parameters={...p.parameters,docs:{...(Q=p.parameters)==null?void 0:Q.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Checkbox
+    },
+    data() {
+      return {
+        checked: true
+      };
+    },
+    template: \`
+      <div class="tw-bg-grayscale-400 !tw-p-8">
+        <Checkbox v-model="checked" id="test" size="sm" />
+      </div>
+    \`
+  };
+}`,...(Y=(X=p.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};const Se=["Sample","Label","LabelInline","Required","Success","Error","Info","Warning","Disabled","Small","NoBorder"];export{u as Disabled,l as Error,i as Info,s as Label,a as LabelInline,p as NoBorder,c as Required,t as Sample,h as Small,d as Success,m as Warning,Se as __namedExportsOrder,Be as default};

package/.storybook-static/assets/Checktile.stories-DN2wfzd6.js

@@ -0,0 +1,88 @@
+import{I as S}from"./Icon-8mZGP41G.js";import{c as i,e as d,f as R,g as V,b as c,h as W,a as B,o as r}from"./iframe-C86bI_2U.js";import{_ as I}from"./_plugin-vue_export-helper-DlAUqK2U.js";const g={components:{Icon:S},props:{selected:{type:Boolean,required:!0,default:!1},checkPosition:{type:String,default:"bottom-right"},displayCheck:{type:Boolean,default:!0},borderRadius:{type:String,required:!1,default:"sm"}},methods:{onClick(){this.$emit("click")}}},N={class:"tw-block tw-overflow-hidden"};function q(b,n,e,H,P,o){const x=B("Icon");return r(),i("button",{class:c(["tw-transition-shadow tw-duration-200 tw-ease-out tw-border-none tw-bg-white tw-cursor-pointer",{"hover:tw-shadow-lg":!e.selected,"tw-rounded-sm":e.borderRadius==="sm","tw-rounded":e.borderRadius==="reg","tw-rounded-md":e.borderRadius==="md"}]),onClick:n[0]||(n[0]=(..._)=>o.onClick&&o.onClick(..._))},[d("div",{class:c(["tw-h-full tw-relative tw-transition-shadow tw-duration-200 tw-ease-out tw-overflow-hidden",{"tw-rounded-sm":e.borderRadius==="sm","tw-rounded":e.borderRadius==="reg","tw-rounded-md":e.borderRadius==="md","!tw-shadow-[0_0_0_2px] !tw-shadow-info-500":e.selected,"!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500":!e.selected}])},[d("div",N,[V(b.$slots,"default")]),e.displayCheck?(r(),i("div",{key:0,class:c([{"tw-scale-0":!e.selected,"tw-scale-100":e.selected,"tw-absolute tw-bottom-0 tw-right-0 tw--translate-x-2 tw--translate-y-2":e.checkPosition==="bottom-right","tw-absolute tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-mr-3":e.checkPosition==="middle-right"},"tw-transition-transform tw-duration-200 tw-ease-out tw-text-white tw-transform tw-bg-info-500 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-w-6 tw-h-6"])},[W(x,{name:"check",size:"xs"})],2)):R("",!0)],2)],2)}const v=I(g,[["render",q]]);g.__docgenInfo={exportName:"default",displayName:"Checktile",description:"",tags:{},props:[{name:"selected",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"checkPosition",type:{name:"string"},defaultValue:{func:!1,value:"'bottom-right'"}},{name:"displayCheck",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"borderRadius",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}}],events:[{name:"click"}],slots:[{name:"default"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Checktile/Checktile.vue"]};const E={title:"Components/Checktile",component:v},a={components:{Checktile:v}},t=()=>({...a,data(){return{selected:!1}},template:`
+      <Checktile @click="onClick" :selected="selected">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `,methods:{onClick(){this.selected=!this.selected}}}),s=()=>({...a,template:`
+      <Checktile :selected="true">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `}),l=()=>({...a,data(){return{selected:!1}},template:`
+      <div class="tw-flex tw-flex-col tw-my-2 tw-w-64">
+        <Checktile class="tw-my-2" @click="onClick" :selected="selected" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Hello World
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10 tw-py-10">
+          Hello World Tall
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :display-check="false" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Without check
+          </div>
+        </Checktile>
+      </div>
+    `,methods:{onClick(){this.selected=!this.selected}}});var m,h,u;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false
+      };
+    },
+    template: \`
+      <Checktile @click="onClick" :selected="selected">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    \`,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      }
+    }
+  };
+}`,...(u=(h=t.parameters)==null?void 0:h.docs)==null?void 0:u.source}}};var w,k,p;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <Checktile :selected="true">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    \`
+  };
+}`,...(p=(k=s.parameters)==null?void 0:k.docs)==null?void 0:p.source}}};var f,C,y;l.parameters={...l.parameters,docs:{...(f=l.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false
+      };
+    },
+    template: \`
+      <div class="tw-flex tw-flex-col tw-my-2 tw-w-64">
+        <Checktile class="tw-my-2" @click="onClick" :selected="selected" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Hello World
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10 tw-py-10">
+          Hello World Tall
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :display-check="false" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Without check
+          </div>
+        </Checktile>
+      </div>
+    \`,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      }
+    }
+  };
+}`,...(y=(C=l.parameters)==null?void 0:C.docs)==null?void 0:y.source}}};const F=["Sample","SampleSelected","SampleText"];export{t as Sample,s as SampleSelected,l as SampleText,F as __namedExportsOrder,E as default};

package/.storybook-static/assets/CollapsiblePanel.stories-BkzrqfVG.js

@@ -0,0 +1,39 @@
+import{I as f}from"./Icon-8mZGP41G.js";import{d as u,c as w,e as a,g as h,f as g,t as x,h as P,b as y,a as _,o as I}from"./iframe-C86bI_2U.js";import{_ as v}from"./_plugin-vue_export-helper-DlAUqK2U.js";const j=u({props:{title:{type:String,required:!0},isCollapsed:{type:Boolean,required:!1,default:!1}},data(){return{selfIsCollapsed:!1}},watch:{isCollapsed(e){this.selfIsCollapsed=e}},created(){this.selfIsCollapsed=this.isCollapsed},methods:{toggleCollapsed(){this.selfIsCollapsed=!this.selfIsCollapsed,this.$emit("changed")}}}),d={components:{Icon:f},mixins:[j]},F={class:"tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-flex-col tw-mb-4 tw-p-4 tw-rounded-md"},S={class:"tw-grow tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800"},$={class:"tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-ml-2"};function N(e,s,k,q,B,V){const C=_("Icon");return I(),w("div",F,[a("div",{class:y(["tw-cursor-pointer tw-text-secondary-500 tw-flex tw-items-center tw-select-none",{"tw-mb-2":!e.selfIsCollapsed}]),onClick:s[0]||(s[0]=z=>e.toggleCollapsed())},[a("div",S,x(e.title),1),a("div",$,[P(C,{name:e.selfIsCollapsed?"chevron-down":"chevron-up",size:"sm"},null,8,["name"])])],2),e.selfIsCollapsed?g("",!0):h(e.$slots,"default",{key:0})])}const c=v(d,[["render",N]]);d.__docgenInfo={exportName:"default",displayName:"CollapsiblePanel",description:"",tags:{},props:[{name:"title",mixin:{name:"CollapsiblePanel.mixin",path:"CollapsiblePanel.mixin.js"},type:{name:"string"},required:!0},{name:"isCollapsed",mixin:{name:"CollapsiblePanel.mixin",path:"CollapsiblePanel.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"changed",mixin:{name:"CollapsiblePanel.mixin",path:"CollapsiblePanel.mixin.js"}}],slots:[{name:"default"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/CollapsiblePanel/CollapsiblePanel.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue"]};const U={title:"Components/CollapsiblePanel",component:c},b={components:{CollapsiblePanel:c}},l=()=>({...b,template:`
+      <CollapsiblePanel title="Hello">
+        <h1>Content</h1>
+        <p>Content Content Content Content</p>
+      </CollapsiblePanel>
+    `}),t=()=>({...b,template:`
+      <CollapsiblePanel title="Form">
+        <form>
+          <label for="fname">First name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="fname" name="fname"><br>
+          <label for="lname">Last name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="lname" name="lname">
+        </form>
+      </CollapsiblePanel>
+    `});var n,o,r;l.parameters={...l.parameters,docs:{...(n=l.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CollapsiblePanel title="Hello">
+        <h1>Content</h1>
+        <p>Content Content Content Content</p>
+      </CollapsiblePanel>
+    \`
+  };
+}`,...(r=(o=l.parameters)==null?void 0:o.docs)==null?void 0:r.source}}};var i,p,m;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <CollapsiblePanel title="Form">
+        <form>
+          <label for="fname">First name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="fname" name="fname"><br>
+          <label for="lname">Last name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="lname" name="lname">
+        </form>
+      </CollapsiblePanel>
+    \`
+  };
+}`,...(m=(p=t.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};const W=["Simple","WithForm"];export{l as Simple,t as WithForm,W as __namedExportsOrder,U as default};

package/.storybook-static/assets/ColorPicker.stories-85BQwpyF.js

@@ -0,0 +1,73 @@
+import{F as H}from"./FormControl.mixin-_gXRExB7.js";import{c as n,f as F,e as a,b as t,z as J,t as K,n as Q,C as v,o as l}from"./iframe-C86bI_2U.js";import{_ as X}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-8mZGP41G.js";const A={mixins:[H],props:{modelValue:{type:String,required:!0},mode:{type:String,default:"color-and-text"}},data(){return{color:this.modelValue}},watch:{color(e){this.$emit("update:modelValue",e)},value(e){this.color=e}},methods:{onColorChange(e){this.color=e,this.$emit("input",e)}}},Z=["for"],$={key:0,class:"tw-text-error-500"},ee=["id","value","disabled"],re={key:0,class:"tw-w-full tw-h-full"},oe=["value","disabled"];function ne(e,o,C,ae,x,b){return l(),n("div",{class:t(["tw-box-border",{"tw-w-32":C.mode==="color-and-text","tw-w-10":C.mode==="color-only"}])},[e.label?(l(),n("label",{key:0,for:`scl-input-${e.id}`,class:t(["tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold",{"tw-sr-only":e.showLabelScreenReaderOnly}])},[J(K(e.label)+" ",1),e.required?(l(),n("span",$,"*")):F("",!0)],10,Z)):F("",!0),a("div",{class:t([{"tw-opacity-50":e.disabled},"tw-cursor-pointer tw-flex tw-overflow-hidden tw-h-10 tw-items-center tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-rounded tw-border tw-border-solid tw-border-grayscale-500"])},[a("div",{style:Q({backgroundColor:x.color}),class:"tw-flex-none tw-h-full tw-w-10 tw-border-t-0 tw-border-l-0 tw-border-b-0 tw-border-r tw-border-solid tw-border-grayscale-500 tw-relative"},[a("input",{id:e.id?`scl-input-${e.id}`:null,ref:"input",value:x.color,type:"color",class:"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",disabled:e.disabled,onInput:o[0]||(o[0]=v(w=>b.onColorChange(w.target.value),["stop"]))},null,40,ee)],4),C.mode==="color-and-text"?(l(),n("div",re,[a("input",{value:x.color,type:"text",disabled:e.disabled,maxlength:"7",minlength:"4",class:t(["tw-w-full tw-h-full tw-px-3 tw-uppercase tw-border-0 tw-p-0 tw-font-sans focus:tw-outline-none",{"tw-bg-error-100 tw-text-error-700 ":e.error,"tw-bg-warning-100 tw-text-warning-700 ":e.warning,"tw-bg-success-100 tw-text-success-700 ":e.success,"tw-bg-white tw-text-secondary-500 ":!e.error&&!e.warning&&!e.success}]),onInput:o[1]||(o[1]=v(w=>b.onColorChange(w.target.value),["stop"]))},null,42,oe)])):F("",!0)],2)],2)}const G=X(A,[["render",ne]]);A.__docgenInfo={exportName:"default",displayName:"ColorPicker",description:"",tags:{},props:[{name:"attrs",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"object"},required:!1,defaultValue:{func:!0,value:"() => {}"}},{name:"modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!0,defaultValue:{func:!1,value:"''"}},{name:"id",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"placeholder",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"size",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'sm'"}},{name:"label",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showLabelScreenReaderOnly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"icon",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"required",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"error",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"warning",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"success",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"readonly",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"name",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"maxlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"minlength",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"isSpaceDisabled",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"requiredMessage",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Please fill in this field.'"}},{name:"mode",type:{name:"string"},defaultValue:{func:!1,value:"'color-and-text'"}}],events:[{name:"update:modelValue",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"input",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keyup",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"keydown",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"focus",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"blur",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}},{name:"enter-key-up",mixin:{name:"FormControl.mixin",path:"../FormControl/FormControl.mixin.js"},type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/ColorPicker/ColorPicker.vue","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/FormControl/FormControl.mixin.js"]};const se={title:"Components/Color Picker",component:G},r={components:{ColorPicker:G},data(){return{value:"#ff0000"}}},m=()=>({...r,template:`
+      <ColorPicker v-model="value" />
+    `}),i=()=>({...r,template:`
+      <ColorPicker v-model="value" mode="color-only" />
+    `}),s=()=>({...r,template:`
+      <ColorPicker v-model="value" label="Your Name" />
+    `}),u=()=>({...r,template:`
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    `}),d=()=>({...r,template:`
+      <ColorPicker v-model="value" :warning="true" />
+    `}),c=()=>({...r,template:`
+      <ColorPicker v-model="value" :error="true" />
+    `}),p=()=>({...r,template:`
+      <ColorPicker v-model="value" :success="true" />
+    `}),f=()=>({...r,template:`
+      <ColorPicker v-model="value" :disabled="true" />
+    `});var h,y,g;m.parameters={...m.parameters,docs:{...(h=m.parameters)==null?void 0:h.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" />
+    \`
+  };
+}`,...(g=(y=m.parameters)==null?void 0:y.docs)==null?void 0:g.source}}};var j,k,V;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" mode="color-only" />
+    \`
+  };
+}`,...(V=(k=i.parameters)==null?void 0:k.docs)==null?void 0:V.source}}};var q,P,S;s.parameters={...s.parameters,docs:{...(q=s.parameters)==null?void 0:q.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" />
+    \`
+  };
+}`,...(S=(P=s.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};var N,L,O;u.parameters={...u.parameters,docs:{...(N=u.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    \`
+  };
+}`,...(O=(L=u.parameters)==null?void 0:L.docs)==null?void 0:O.source}}};var z,D,E;d.parameters={...d.parameters,docs:{...(z=d.parameters)==null?void 0:z.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :warning="true" />
+    \`
+  };
+}`,...(E=(D=d.parameters)==null?void 0:D.docs)==null?void 0:E.source}}};var R,Y,_;c.parameters={...c.parameters,docs:{...(R=c.parameters)==null?void 0:R.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :error="true" />
+    \`
+  };
+}`,...(_=(Y=c.parameters)==null?void 0:Y.docs)==null?void 0:_.source}}};var B,I,M;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :success="true" />
+    \`
+  };
+}`,...(M=(I=p.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};var U,W,T;f.parameters={...f.parameters,docs:{...(U=f.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
+  return {
+    ...data,
+    template: \`
+      <ColorPicker v-model="value" :disabled="true" />
+    \`
+  };
+}`,...(T=(W=f.parameters)==null?void 0:W.docs)==null?void 0:T.source}}};const ue=["Sample","SampleColorOnly","Label","LabelRequired","Warning","Error","Success","Disabled"];export{f as Disabled,c as Error,s as Label,u as LabelRequired,m as Sample,i as SampleColorOnly,p as Success,d as Warning,ue as __namedExportsOrder,se as default};