diff --git a/assets/AccessibleIcon.stories-DxtZ_HrT.js b/assets/AccessibleIcon.stories-DxtZ_HrT.js new file mode 100644 index 00000000..864584ef --- /dev/null +++ b/assets/AccessibleIcon.stories-DxtZ_HrT.js @@ -0,0 +1,13 @@ +import{a as m,j as e}from"./jsx-runtime-WuQMLw89.js";import{r as o}from"./index-Dl6G-zuu.js";import{$ as d}from"./index-dNpvnuT6.js";import{B as b,A as f}from"./react-icons.esm-C3slgq7o.js";import{F as I}from"./Flex-Dyi1HvDT.js";import{I as r}from"./IconButton-CLMqZr-I.js";import"./extends-CCbyfPlC.js";import"./index-D1o5GlT1.js";import"./index-D1_ZHIBm.js";import"./index-Cy-whKHn.js";import"./stitches.config-CKE6G7UO.js";import"./Button-scdtd1Jr.js";import"./modifyVariantsForStory-D3vOGtQO.js";const u=({children:t,label:l})=>{const p=o.Children.only(t);return o.createElement(o.Fragment,null,o.cloneElement(p,{"aria-hidden":"true",focusable:"false"}),o.createElement(d,null,l))},A=u,c=A;try{c.displayName="AccessibleIcon",c.__docgenInfo={description:"",displayName:"AccessibleIcon",props:{}}}catch{}const O={title:"Components/AccessibleIcon",component:c,tags:["autodocs"]},n=()=>m(I,{gap:3,align:"center",children:[e(r,{children:e(c,{label:"notification",children:e(b,{})})}),e(r,{children:e(c,{label:"user settings",children:e(f,{})})})]});var s,a,i;n.parameters={...n.parameters,docs:{...(s=n.parameters)==null?void 0:s.docs,source:{originalSource:`() => + + + + + + + + + + + + `,...(i=(a=n.parameters)==null?void 0:a.docs)==null?void 0:i.source}}};const S=["Basic"];export{n as Basic,S as __namedExportsOrder,O as default}; diff --git a/assets/Accordion-VILEa6ug.js b/assets/Accordion-VILEa6ug.js new file mode 100644 index 00000000..4ccee16c --- /dev/null +++ b/assets/Accordion-VILEa6ug.js @@ -0,0 +1 @@ +import{j as I,a as le}from"./jsx-runtime-WuQMLw89.js";import{r as d,R as r}from"./index-Dl6G-zuu.js";import{_ as m}from"./extends-CCbyfPlC.js";import{$ as Y,a as se}from"./index-D_wDWxb3.js";import{$ as pe,a as fe}from"./index-DbIbOXBD.js";import{$ as Z}from"./index-Cy-whKHn.js";import{$ as M,a as J}from"./index-COmNUzeK.js";import{$ as w}from"./index-D1o5GlT1.js";import{$ as me}from"./index-C0EqwiN4.js";import{$ as Q}from"./index-CKWv3fp9.js";import{k as X,s as v}from"./stitches.config-CKE6G7UO.js";import{d as ue}from"./react-icons.esm-C3slgq7o.js";import{e as be}from"./Elevation-CQxWisSY.js";const ee="Collapsible",[$e,oe]=Y(ee),[he,z]=$e(ee),xe=d.forwardRef((e,a)=>{const{__scopeCollapsible:o,open:t,defaultOpen:i,disabled:n,onOpenChange:c,...l}=e,[s=!1,p]=M({prop:t,defaultProp:i,onChange:c});return d.createElement(he,{scope:o,disabled:n,contentId:Q(),open:s,onOpenToggle:d.useCallback(()=>p(b=>!b),[p])},d.createElement(w.div,m({"data-state":H(s),"data-disabled":n?"":void 0},l,{ref:a})))}),ge="CollapsibleTrigger",ve=d.forwardRef((e,a)=>{const{__scopeCollapsible:o,...t}=e,i=z(ge,o);return d.createElement(w.button,m({type:"button","aria-controls":i.contentId,"aria-expanded":i.open||!1,"data-state":H(i.open),"data-disabled":i.disabled?"":void 0,disabled:i.disabled},t,{ref:a,onClick:J(e.onClick,i.onOpenToggle)}))}),te="CollapsibleContent",ye=d.forwardRef((e,a)=>{const{forceMount:o,...t}=e,i=z(te,e.__scopeCollapsible);return d.createElement(me,{present:o||i.open},({present:n})=>d.createElement(_e,m({},t,{ref:a,present:n})))}),_e=d.forwardRef((e,a)=>{const{__scopeCollapsible:o,present:t,children:i,...n}=e,c=z(te,o),[l,s]=d.useState(t),p=d.useRef(null),b=Z(a,p),$=d.useRef(0),y=$.current,g=d.useRef(0),_=g.current,A=c.open||l,C=d.useRef(A),h=d.useRef();return d.useEffect(()=>{const f=requestAnimationFrame(()=>C.current=!1);return()=>cancelAnimationFrame(f)},[]),se(()=>{const f=p.current;if(f){h.current=h.current||{transitionDuration:f.style.transitionDuration,animationName:f.style.animationName},f.style.transitionDuration="0s",f.style.animationName="none";const u=f.getBoundingClientRect();$.current=u.height,g.current=u.width,C.current||(f.style.transitionDuration=h.current.transitionDuration,f.style.animationName=h.current.animationName),s(t)}},[c.open,t]),d.createElement(w.div,m({"data-state":H(c.open),"data-disabled":c.disabled?"":void 0,id:c.contentId,hidden:!A},n,{ref:b,style:{"--radix-collapsible-content-height":y?`${y}px`:void 0,"--radix-collapsible-content-width":_?`${_}px`:void 0,...e.style}}),A&&i)});function H(e){return e?"open":"closed"}const Ce=xe,Ae=ve,we=ye,x="Accordion",Ie=["Home","End","ArrowDown","ArrowUp","ArrowLeft","ArrowRight"],[L,Ee,Re]=pe(x),[E,mo]=Y(x,[Re,oe]),j=oe(),ne=r.forwardRef((e,a)=>{const{type:o,...t}=e,i=t,n=t;return r.createElement(L.Provider,{scope:e.__scopeAccordion},o==="multiple"?r.createElement(Pe,m({},n,{ref:a})):r.createElement(Ne,m({},i,{ref:a})))});ne.propTypes={type(e){const a=e.value||e.defaultValue;return e.type&&!["single","multiple"].includes(e.type)?new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`."):e.type==="multiple"&&typeof a=="string"?new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."):e.type==="single"&&Array.isArray(a)?new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."):null}};const[re,Se]=E(x),[ae,Ve]=E(x,{collapsible:!1}),Ne=r.forwardRef((e,a)=>{const{value:o,defaultValue:t,onValueChange:i=()=>{},collapsible:n=!1,...c}=e,[l,s]=M({prop:o,defaultProp:t,onChange:i});return r.createElement(re,{scope:e.__scopeAccordion,value:l?[l]:[],onItemOpen:s,onItemClose:r.useCallback(()=>n&&s(""),[n,s])},r.createElement(ae,{scope:e.__scopeAccordion,collapsible:n},r.createElement(ie,m({},c,{ref:a}))))}),Pe=r.forwardRef((e,a)=>{const{value:o,defaultValue:t,onValueChange:i=()=>{},...n}=e,[c=[],l]=M({prop:o,defaultProp:t,onChange:i}),s=r.useCallback(b=>l(($=[])=>[...$,b]),[l]),p=r.useCallback(b=>l(($=[])=>$.filter(y=>y!==b)),[l]);return r.createElement(re,{scope:e.__scopeAccordion,value:c,onItemOpen:s,onItemClose:p},r.createElement(ae,{scope:e.__scopeAccordion,collapsible:!0},r.createElement(ie,m({},n,{ref:a}))))}),[ke,R]=E(x),ie=r.forwardRef((e,a)=>{const{__scopeAccordion:o,disabled:t,dir:i,orientation:n="vertical",...c}=e,l=r.useRef(null),s=Z(l,a),p=Ee(o),$=fe(i)==="ltr",y=J(e.onKeyDown,g=>{var _;if(!Ie.includes(g.key))return;const A=g.target,C=p().filter(k=>{var T;return!((T=k.ref.current)!==null&&T!==void 0&&T.disabled)}),h=C.findIndex(k=>k.ref.current===A),f=C.length;if(h===-1)return;g.preventDefault();let u=h;const S=0,V=f-1,N=()=>{u=h+1,u>V&&(u=S)},P=()=>{u=h-1,u{const{__scopeAccordion:o,value:t,...i}=e,n=R(q,o),c=Se(q,o),l=j(o),s=Q(),p=t&&c.value.includes(t)||!1,b=n.disabled||e.disabled;return r.createElement(Te,{scope:o,open:p,disabled:b,triggerId:s},r.createElement(Ce,m({"data-orientation":n.orientation,"data-state":ce(p)},l,i,{ref:a,disabled:b,open:p,onOpenChange:$=>{$?c.onItemOpen(t):c.onItemClose(t)}})))}),Oe="AccordionHeader",De=r.forwardRef((e,a)=>{const{__scopeAccordion:o,...t}=e,i=R(x,o),n=F(Oe,o);return r.createElement(w.h3,m({"data-orientation":i.orientation,"data-state":ce(n.open),"data-disabled":n.disabled?"":void 0},t,{ref:a}))}),G="AccordionTrigger",Me=r.forwardRef((e,a)=>{const{__scopeAccordion:o,...t}=e,i=R(x,o),n=F(G,o),c=Ve(G,o),l=j(o);return r.createElement(L.ItemSlot,{scope:o},r.createElement(Ae,m({"aria-disabled":n.open&&!c.collapsible||void 0,"data-orientation":i.orientation,id:n.triggerId},l,t,{ref:a})))}),ze="AccordionContent",He=r.forwardRef((e,a)=>{const{__scopeAccordion:o,...t}=e,i=R(x,o),n=F(ze,o),c=j(o);return r.createElement(we,m({role:"region","aria-labelledby":n.triggerId,"data-orientation":i.orientation},c,t,{ref:a,style:{"--radix-accordion-content-height":"var(--radix-collapsible-content-height)","--radix-accordion-content-width":"var(--radix-collapsible-content-width)",...e.style}}))});function ce(e){return e?"open":"closed"}const Le=ne,je=qe,Fe=De,Ge=Me,Ke=He,Be=X({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),Ue=X({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),We=v(Le,{borderRadius:0,bc:"transparent",variants:{elevation:be},defaultVariants:{elevation:0}}),Ye=v(je,{mt:"$1",borderRadius:"inherit","&:first-child":{mt:0},boxShadow:"0 1px 0 0 $colors$divider"}),O=v(Fe,{all:"unset",display:"flex",borderRadius:"inherit"}),D=v(Ge,{all:"unset",borderRadius:"inherit",fontFamily:"inherit",bc:"$contentBg",c:"$accordionLabel",px:"$2",lineHeight:1,fontSize:"$3",display:"flex",flex:1,alignItems:"center",justifyContent:"flex-start",position:"relative","&::before":{borderRadius:"inherit",boxSizing:"border-box",content:'""',position:"absolute",inset:0},"&:focus":{boxShadow:"inset 0 0 0 1px $colors$accordionActiveShadow"},"@hover":{"&:hover":{cursor:"pointer","&::before":{backgroundColor:"$accordionHoverShadow"}}},transition:"opacity 200ms ease-out",variants:{size:{small:{py:"$2"},medium:{py:"$3"},large:{py:"$5"}}},defaultVariants:{size:"small"}}),Ze=v(ue,{mr:"$2",c:"$accordionText",transition:"transform 200ms ease-out","[data-state=open] > &":{transform:"rotateZ(90deg)"}}),Je=v(Ke,{overflow:"hidden",fontSize:"$3",c:"$accordionText",'&[data-state="open"]':{animation:`${Be} 200ms ease-out`},'&[data-state="closed"]':{animation:`${Ue} 200ms ease-out`}}),Qe=v("div",{variants:{size:{small:{py:"$2"},medium:{py:"$3"},large:{py:"$5"}}},defaultVariants:{size:"small"}}),K=We,B=Ye,U=r.forwardRef(({children:e,...a},o)=>I(O,{children:le(D,{ref:o,...a,children:[I(Ze,{"aria-hidden":!0}),e]})})),W=r.forwardRef(({children:e,size:a,...o},t)=>I(Je,{...o,ref:t,children:I(Qe,{size:a,children:e})}));try{O.displayName="StyledAccordionHeader",O.__docgenInfo={description:"",displayName:"StyledAccordionHeader",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{D.displayName="StyledAccordionTrigger",D.__docgenInfo={description:"",displayName:"StyledAccordionTrigger",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | ({ "@light"?: "medium" | "large" | "small"; "@bp1"?: "medium" | "large" | "small"; "@bp2"?: "medium" | "large" | "small" | undefined; ... 5 more ...; "@initial"?: "medium" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{K.displayName="AccordionRoot",K.__docgenInfo={description:"",displayName:"AccordionRoot",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},elevation:{defaultValue:null,description:"",name:"elevation",required:!1,type:{name:'number | `${number}` | ({ "@light"?: number | `${number}`; "@bp1"?: number | `${number}`; "@bp2"?: number | `${number}` | undefined; "@bp3"?: number | `${number}` | undefined; "@bp4"?: number | ... 1 more ... | undefined; "@motion"?: number | ... 1 more ... | undefined; "@hover"?: number | .....'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{B.displayName="AccordionItem",B.__docgenInfo={description:"",displayName:"AccordionItem",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{U.displayName="AccordionTrigger",U.__docgenInfo={description:"",displayName:"AccordionTrigger",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | ({ "@light"?: "medium" | "large" | "small"; "@bp1"?: "medium" | "large" | "small"; "@bp2"?: "medium" | "large" | "small" | undefined; ... 5 more ...; "@initial"?: "medium" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}}}}}catch{}try{W.displayName="AccordionContent",W.__docgenInfo={description:"",displayName:"AccordionContent",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | ({ "@light"?: "medium" | "large" | "small"; "@bp1"?: "medium" | "large" | "small"; "@bp2"?: "medium" | "large" | "small" | undefined; ... 5 more ...; "@initial"?: "medium" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ prefix: ""; media: { bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; ... 4 more ...; light: "(prefers-color-scheme: light)"; }; theme: { ...; }; themeMap: DefaultThemeMap; utils: { ...; }; }>'}}}}}catch{}export{B as A,D as S,U as a,W as b,K as c,O as d}; diff --git a/assets/Accordion.stories-D3ILyrcB.js b/assets/Accordion.stories-D3ILyrcB.js new file mode 100644 index 00000000..aeb9c825 --- /dev/null +++ b/assets/Accordion.stories-D3ILyrcB.js @@ -0,0 +1,163 @@ +import{j as e,a as n}from"./jsx-runtime-WuQMLw89.js";import{r as k}from"./index-Dl6G-zuu.js";import{m as P}from"./modifyVariantsForStory-D3vOGtQO.js";import{M as E}from"./react-icons.esm-C3slgq7o.js";import{B as p}from"./Box-CsPUZVXZ.js";import{A as i,a as t,b as c,c as U}from"./Accordion-VILEa6ug.js";import{T as r}from"./Text-DOWt1sZJ.js";import{B as L}from"./Badge-nC8BjyEy.js";import{D as R,a as H,b as J,c as K,d as N}from"./Dialog-O8I9yRz2.js";import{B as Q}from"./Button-scdtd1Jr.js";import{F as u}from"./Flex-Dyi1HvDT.js";import"./stitches.config-CKE6G7UO.js";import"./extends-CCbyfPlC.js";import"./index-D_wDWxb3.js";import"./index-DbIbOXBD.js";import"./index-Cy-whKHn.js";import"./index-COmNUzeK.js";import"./index-D1o5GlT1.js";import"./index-D1_ZHIBm.js";import"./index-C0EqwiN4.js";import"./index-CKWv3fp9.js";import"./Elevation-CQxWisSY.js";import"./index-CiDhy-qA.js";import"./index-BBzYKpmb.js";import"./Card-c3mvhibi.js";import"./IconButton-CLMqZr-I.js";const W=o=>e(U,{...o}),A=P(W),fe={title:"Components/Accordion",component:A},T=({size:o,...I})=>e(p,{css:{width:300},children:n(A,{...I,children:[n(i,{value:"item-1",children:[e(t,{size:o,children:"Item1 Trigger"}),e(c,{size:o,children:"Item1 Content"})]}),n(i,{value:"item-2",children:[e(t,{size:o,children:"Item2 Trigger"}),e(c,{size:o,children:"Item2 Content"})]}),n(i,{value:"item-3",children:[e(t,{size:o,children:"Item3 Trigger"}),e(c,{size:o,children:"Item3 Content"})]})]})}),s=T.bind({});s.args={type:"single",size:"small"};s.argTypes={size:{control:"inline-radio",options:["small","medium","large"]}};const g=T.bind({});g.args={size:"large"};const a=T.bind({});a.args={type:"single",collapsible:!0};a.argTypes={size:{control:"inline-radio",options:["small","medium","large"]}};const d=T.bind({});d.args={type:"multiple",collapsible:!0};d.argTypes={size:{control:"inline-radio",options:["small","medium","large"]}};const l=o=>e(p,{css:{width:300},children:n(A,{...o,children:[n(i,{value:"item-1",children:[e(t,{children:n(u,{css:{flexGrow:1},align:"center",justify:"space-between",children:[e(r,{children:"Title"}),e(L,{children:"Status"}),e(r,{children:"Metadata"})]})}),e(c,{children:n(u,{gap:"2",children:[e(E,{}),e(r,{children:"More information"}),e(r,{children:"Version"})]})})]}),n(i,{value:"item-2",children:[e(t,{children:"Item2 Trigger"}),e(c,{children:"Item2 Content"})]})]})});l.args={type:"multiple",collapsible:!0};l.argTypes={size:{control:"inline-radio",options:["small","medium","large"]}};const m=o=>{const[I,C]=k.useState(!1);return n(R,{open:I,onOpenChange:h=>C(h),children:[e(H,{asChild:!0,children:e(Q,{onClick:()=>C(!0),children:"Open dialog"})}),e(p,{children:[...Array(10)].map((h,$)=>e(r,{css:{my:"$1"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."},$))}),n(J,{children:[e(K,{}),e(N,{children:e(p,{css:{width:300,mt:"$5"},children:n(A,{...o,children:[n(i,{value:"item-1",children:[e(t,{children:n(u,{css:{flexGrow:1},align:"center",justify:"space-between",children:[e(r,{children:"Title"}),e(L,{children:"Status"}),e(r,{children:"Metadata"})]})}),e(c,{children:n(u,{gap:"2",children:[e(E,{}),e(r,{children:"More information"}),e(r,{children:"Version"})]})})]}),n(i,{value:"item-2",children:[e(t,{children:"Item2 Trigger"}),e(c,{children:"Item2 Content"})]})]})})})]})]})};m.args={type:"multiple",collapsible:!0};m.argTypes={size:{control:"inline-radio",options:["small","medium","large"]}};var x,z,y;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`({ + size, + ...args +}) => + + + Item1 Trigger + Item1 Content + + + Item2 Trigger + Item2 Content + + + Item3 Trigger + Item3 Content + + + `,...(y=(z=s.parameters)==null?void 0:z.docs)==null?void 0:y.source}}};var f,v,S;g.parameters={...g.parameters,docs:{...(f=g.parameters)==null?void 0:f.docs,source:{originalSource:`({ + size, + ...args +}) => + + + Item1 Trigger + Item1 Content + + + Item2 Trigger + Item2 Content + + + Item3 Trigger + Item3 Content + + + `,...(S=(v=g.parameters)==null?void 0:v.docs)==null?void 0:S.source}}};var B,b,F;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.docs,source:{originalSource:`({ + size, + ...args +}) => + + + Item1 Trigger + Item1 Content + + + Item2 Trigger + Item2 Content + + + Item3 Trigger + Item3 Content + + + `,...(F=(b=a.parameters)==null?void 0:b.docs)==null?void 0:F.source}}};var w,D,M;d.parameters={...d.parameters,docs:{...(w=d.parameters)==null?void 0:w.docs,source:{originalSource:`({ + size, + ...args +}) => + + + Item1 Trigger + Item1 Content + + + Item2 Trigger + Item2 Content + + + Item3 Trigger + Item3 Content + + + `,...(M=(D=d.parameters)==null?void 0:D.docs)==null?void 0:M.source}}};var O,q,j;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`args => + + + + + Title + Status + Metadata + + + + + + More information + Version + + + + + Item2 Trigger + Item2 Content + + + `,...(j=(q=l.parameters)==null?void 0:q.docs)==null?void 0:j.source}}};var G,V,_;m.parameters={...m.parameters,docs:{...(G=m.parameters)==null?void 0:G.docs,source:{originalSource:`args => { + const [open, setOpen] = useState(false); + return setOpen(isOpen)}> + + + + + + {[...Array(10)].map((_, i) => + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + )} + + + + + + + + + + + Title + Status + Metadata + + + + + + More information + Version + + + + + Item2 Trigger + Item2 Content + + + + + + ; +}`,...(_=(V=m.parameters)==null?void 0:V.docs)==null?void 0:_.source}}};const ve=["Single","Large","Collapsible","MultipleCollapsible","Complex","InsideModal"];export{a as Collapsible,l as Complex,m as InsideModal,g as Large,d as MultipleCollapsible,s as Single,ve as __namedExportsOrder,fe as default}; diff --git a/assets/Alert.stories-ChoA4mZn.js b/assets/Alert.stories-ChoA4mZn.js new file mode 100644 index 00000000..20959596 --- /dev/null +++ b/assets/Alert.stories-ChoA4mZn.js @@ -0,0 +1,14 @@ +import{a as s,j as i}from"./jsx-runtime-WuQMLw89.js";import{s as u}from"./stitches.config-CKE6G7UO.js";import{C as l}from"./Card-c3mvhibi.js";import{H as d}from"./Heading-6EoCpiwd.js";import{T as m}from"./Text-DOWt1sZJ.js";import"./index-Dl6G-zuu.js";import"./Elevation-CQxWisSY.js";const r=u(l,{variants:{variant:{gray:{"&::before":{boxShadow:"inset 0 0 0 1px $colors$slate9"}},info:{"&::before":{boxShadow:"inset 0 0 0 1px $colors$blue9"}},success:{"&::before":{boxShadow:"inset 0 0 0 1px $colors$green9"}},warning:{"&::before":{boxShadow:"inset 0 0 0 1px $colors$orange9"}},error:{"&::before":{boxShadow:"inset 0 0 0 1px $colors$red9"}}}},defaultVariants:{variant:"gray"}});try{r.displayName="Alert",r.__docgenInfo={description:"",displayName:"Alert",props:{elevation:{defaultValue:null,description:"",name:"elevation",required:!1,type:{name:'number | `${number}` | ({ "@light"?: number | `${number}`; "@bp1"?: number | `${number}`; "@bp2"?: number | `${number}` | undefined; "@bp3"?: number | `${number}` | undefined; "@bp4"?: number | ... 1 more ... | undefined; "@motion"?: number | ... 1 more ... | undefined; "@hover"?: number | .....'}},active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},interactive:{defaultValue:null,description:"",name:"interactive",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"gray" | "info" | "success" | "warning" | "error" | ({ "@light"?: "gray" | "info" | "success" | "warning" | "error"; "@bp1"?: "gray" | "info" | "success" | "warning" | "error"; ... 6 more ...; "@initial"?: "gray" | ... 4 more ... | undefined; } & { ...; }) | undefined'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}const v={title:"Components/Alert",component:r},e=n=>s(r,{...n,children:[i(d,{css:{mb:"$3"},children:"Alert"}),i(m,{css:{mb:"$3"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]});e.args={variant:"info"};e.argTypes={variant:{control:"inline-radio",options:["gray","info","success","warning","error"]}};var a,o,t;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`args => +

Alert

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + `,...(t=(o=e.parameters)==null?void 0:o.docs)==null?void 0:t.source}}};const y=["Variants"];export{e as Variants,y as __namedExportsOrder,v as default}; diff --git a/assets/AriaTable.stories-Ca6IuD9E.js b/assets/AriaTable.stories-Ca6IuD9E.js new file mode 100644 index 00000000..7d9d9b32 --- /dev/null +++ b/assets/AriaTable.stories-Ca6IuD9E.js @@ -0,0 +1,490 @@ +import{j as e,a,F as z}from"./jsx-runtime-WuQMLw89.js";import{r as l}from"./index-Dl6G-zuu.js";import{b as pe}from"./index-Cy-whKHn.js";import{s as T}from"./stitches.config-CKE6G7UO.js";import{m as Te}from"./index-C6x0cc2A.js";import{d as me}from"./react-icons.esm-C3slgq7o.js";import{C as ue,c as be,e as fe,S as ge,b as ye,d as ve,T as we,f as Se}from"./Table-BFjnAGFk.js";import{B as te}from"./Box-CsPUZVXZ.js";import{m as xe}from"./modifyVariantsForStory-D3vOGtQO.js";import{U as R}from"./Link-B9AS5LNU.js";import{I as Ce}from"./Image-6SeHXl5T.js";import{B as o}from"./Badge-nC8BjyEy.js";import{B as f}from"./Button-scdtd1Jr.js";import{F as _}from"./Flex-Dyi1HvDT.js";import{T as P}from"./Text-DOWt1sZJ.js";import"./extends-CCbyfPlC.js";import"./Label-Bv6blm_E.js";import"./index-D1o5GlT1.js";import"./index-D1_ZHIBm.js";import"./Elevation-CQxWisSY.js";const g=T("div",ue,{display:"table-caption"}),ke=T("div",be,{display:"table-row-group"}),h=l.forwardRef((r,t)=>e(ke,{ref:t,role:"rowgroup",...r})),Be=T("div",fe,{display:"table-footer-group"}),S=l.forwardRef((r,t)=>e(Be,{ref:t,role:"rowgroup",...r})),V=T("div",ge,{display:"table-row"}),_e=T(pe,V),Ae=({isOpen:r,children:t})=>{const c=l.useMemo(()=>r?{transition:"all 0.2s ease-out",paddingBottom:0,paddingTop:0,border:"none"}:{transition:"all 0.2s ease-out",padding:"0px 16px",pointerEvents:"none",border:"none"},[r]),s=l.useMemo(()=>r?{transition:"all 0.2s ease-out",padding:"16px",paddingBottom:0}:{transition:"all 0.2s ease-out",height:0,overflow:"hidden",padding:"0px 16px"},[r]);return e(V,{css:r?{"&:not(:last-child)":{borderBottom:"1px solid $tableRowBorder"}}:{},children:e(n,{css:c,fullColSpan:!0,children:e(te,{css:s,children:t})})})},d=l.forwardRef(({asChild:r,children:t,collapsedContent:c,emptyFirstColumn:s,tableHead:m,css:L,...ie},oe)=>{const le=r?_e:V,[x,ce]=l.useState(!1);if(!r){const u=l.Children.toArray(t);if(u.some(N=>{if(!l.isValidElement(N))return!1;const{fullColSpan:he}=N.props;return!!he})&&u.length>1)throw new Error("Using fullColSpan is allowed only for a single full width Td.")}const F=l.useMemo(()=>s?m?e(i,{css:{width:24}}):e(n,{},"empty-td"):c?e(n,{children:e(te,{onClick:u=>{u.stopPropagation(),u.preventDefault()},children:e(me,{onClick:()=>ce(!x),style:{cursor:"pointer",transition:"transform 0.2s ease-out",transform:x?"rotate(90deg)":"initial"}})})},"chevron-td"):null,[x]),se=l.useMemo(()=>{var u;return r?l.cloneElement(t,{...t==null?void 0:t.props},[F,...(u=t==null?void 0:t.props)==null?void 0:u.children]):a(z,{children:[F,t]})},[r,F,t]);return a(z,{children:[e(le,{ref:oe,role:"row",css:c&&!x?{...L,"&:nth-last-child(2) span":{borderBottom:"none"}}:{...L},...ie,children:se}),!!c&&e(Ae,{isOpen:x,children:c})]})}),De=T("span",ye,{display:"table-cell"}),i=l.forwardRef((r,t)=>e(De,{ref:t,role:"columnheader",...r})),$=T("span",ve,{display:"table-cell"}),Fe=T($,{visibility:"hidden"}),n=l.forwardRef(({fullColSpan:r,css:t,...c},s)=>{const m=l.useMemo(()=>r?{position:"absolute",left:0,width:"100%",height:"100%"}:{},[r]);return r?a(z,{children:[e(Fe,{css:t,...c}),e($,{ref:s,role:"cell",css:Te(m,t),...c})]}):e($,{ref:s,role:"cell",css:t,...c})}),Re=T("div",we,{display:"table-header-group"}),p=l.forwardRef((r,t)=>e(Re,{ref:t,role:"rowgroup",...r})),ze=T("div",Se,{display:"table"}),B=l.forwardRef(({hasCollapsibleChildren:r,css:t,...c},s)=>e(ze,{ref:s,role:"table",css:r?{borderCollapse:"collapse",...t}:t,...c}));try{g.displayName="Caption",g.__docgenInfo={description:"",displayName:"Caption",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLDivElement | null) => void) | RefObject | null"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "0" | "11" | "12" | "inherit" | ({ "@light"?: number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "0" | "11" | "12" | "inherit"; ... 7 more ...; "@initial"?: number | ... 14 more ...; } & { ...; }) | undef...'}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"light" | "regular" | "medium" | "semiBold" | "bold" | ({ "@light"?: "light" | "regular" | "medium" | "semiBold" | "bold"; "@bp1"?: "light" | "regular" | "medium" | "semiBold" | "bold"; ... 6 more ...; "@initial"?: "light" | ... 4 more ... | undefined; } & { ...; }) | undefined'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"red" | "default" | "inherit" | "invalid" | "contrast" | "subtle" | ({ "@light"?: "red" | "default" | "inherit" | "invalid" | "contrast" | "subtle"; "@bp1"?: "red" | "default" | ... 4 more ...; ... 6 more ...; "@initial"?: "red" | ... 5 more ... | undefined; } & { ...; }) | undefined'}},gradient:{defaultValue:null,description:"",name:"gradient",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:'"capitalize" | "uppercase" | "capitalizeWords" | ({ "@light"?: "capitalize" | "uppercase" | "capitalizeWords"; "@bp1"?: "capitalize" | "uppercase" | "capitalizeWords"; ... 6 more ...; "@initial"?: "capitalize" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},noWrap:{defaultValue:null,description:"",name:"noWrap",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{h.displayName="Tbody",h.__docgenInfo={description:"",displayName:"Tbody",props:{css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{S.displayName="Tfoot",S.__docgenInfo={description:"",displayName:"Tfoot",props:{css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{d.displayName="Tr",d.__docgenInfo={description:"",displayName:"Tr",props:{active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},interactive:{defaultValue:null,description:"",name:"interactive",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},collapsedContent:{defaultValue:null,description:"",name:"collapsedContent",required:!1,type:{name:"ReactNode"}},emptyFirstColumn:{defaultValue:null,description:"",name:"emptyFirstColumn",required:!1,type:{name:"boolean"}},tableHead:{defaultValue:null,description:"",name:"tableHead",required:!1,type:{name:"boolean"}}}}}catch{}try{i.displayName="Th",i.__docgenInfo={description:"",displayName:"Th",props:{transform:{defaultValue:null,description:"",name:"transform",required:!1,type:{name:'"capitalize" | ({ "@light"?: "capitalize"; "@bp1"?: "capitalize"; "@bp2"?: "capitalize" | undefined; "@bp3"?: "capitalize" | undefined; "@bp4"?: "capitalize" | undefined; "@motion"?: "capitalize" | undefined; "@hover"?: "capitalize" | undefined; "@dark"?: "capitalize" | undefined; "@initial"?...'}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "0" | "11" | "12" | "inherit" | ({ "@light"?: number | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "0" | "11" | "12" | "inherit"; ... 7 more ...; "@initial"?: number | ... 14 more ...; } & { ...; }) | undef...'}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"light" | "regular" | "medium" | "semiBold" | "bold" | ({ "@light"?: "light" | "regular" | "medium" | "semiBold" | "bold"; "@bp1"?: "light" | "regular" | "medium" | "semiBold" | "bold"; ... 6 more ...; "@initial"?: "light" | ... 4 more ... | undefined; } & { ...; }) | undefined'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"red" | "default" | "inherit" | "invalid" | "contrast" | "subtle" | ({ "@light"?: "red" | "default" | "inherit" | "invalid" | "contrast" | "subtle"; "@bp1"?: "red" | "default" | ... 4 more ...; ... 6 more ...; "@initial"?: "red" | ... 5 more ... | undefined; } & { ...; }) | undefined'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"center" | "end" | "start" | ({ "@light"?: "center" | "end" | "start"; "@bp1"?: "center" | "end" | "start"; "@bp2"?: "center" | "end" | "start" | undefined; "@bp3"?: "center" | ... 2 more ... | undefined; ... 4 more ...; "@initial"?: "center" | ... 2 more ... | undefined; } & { ...; }) | unde...'}},noWrap:{defaultValue:null,description:"",name:"noWrap",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},gradient:{defaultValue:null,description:"",name:"gradient",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}}}}}catch{}try{n.displayName="Td",n.__docgenInfo={description:"",displayName:"Td",props:{css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"center" | "end" | "start" | ({ "@light"?: "center" | "end" | "start"; "@bp1"?: "center" | "end" | "start"; "@bp2"?: "center" | "end" | "start" | undefined; "@bp3"?: "center" | ... 2 more ... | undefined; ... 4 more ...; "@initial"?: "center" | ... 2 more ... | undefined; } & { ...; }) | unde...'}},subtle:{defaultValue:null,description:"",name:"subtle",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},fullColSpan:{defaultValue:null,description:"",name:"fullColSpan",required:!1,type:{name:"boolean"}}}}}catch{}try{p.displayName="Thead",p.__docgenInfo={description:"",displayName:"Thead",props:{css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{B.displayName="Table",B.__docgenInfo={description:"",displayName:"Table",props:{elevation:{defaultValue:null,description:"",name:"elevation",required:!1,type:{name:'number | `${number}` | ({ "@light"?: number | `${number}`; "@bp1"?: number | `${number}`; "@bp2"?: number | `${number}` | undefined; "@bp3"?: number | `${number}` | undefined; "@bp4"?: number | ... 1 more ... | undefined; "@motion"?: number | ... 1 more ... | undefined; "@hover"?: number | .....'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},hasCollapsibleChildren:{defaultValue:null,description:"",name:"hasCollapsibleChildren",required:!1,type:{name:"boolean"}}}}}catch{}const $e=r=>e(B,{...r}),b=xe($e),rn={title:"Components/AriaTable",component:b},y=({transform:r,...t})=>a(b,{"aria-label":"People","aria-describedby":"basic-table-caption",...t,children:[e(g,{id:"basic-table-caption",size:"10",children:"People with some information"}),e(p,{children:a(d,{children:[e(i,{transform:r,children:"first name"}),e(i,{transform:r,children:"last name"}),e(i,{transform:r,children:"Status"}),e(i,{transform:r,children:"Role"})]})}),a(h,{children:[a(d,{children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Luke"}),e(n,{children:"Skywalker"}),e(n,{children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{children:"Star wars"})]})]}),e(S,{children:e(d,{children:e(n,{fullColSpan:!0,"aria-colspan":4,css:{textAlign:"center"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Load more..."})})})})]});y.args={transform:"capitalize"};y.argTypes={transform:{control:"inline-radio",options:["capitalize","capitalizeWords","uppercase","none"],mapping:{capitalize:"capitalize",capitalizeWords:"capitalizeWords",uppercase:"uppercase",none:""}}};const v=r=>a(b,{children:[e(p,{children:a(d,{children:[e(i,{...r,children:"Firstname"}),e(i,{...r,children:"Lastname"}),e(i,{...r,children:"Status"}),e(i,{...r,children:"Role"})]})}),a(h,{children:[a(d,{children:[e(n,{...r,children:"John"}),e(n,{...r,children:"Doe"}),e(n,{...r,children:e(o,{variant:"green",children:"Connected"})}),e(n,{...r,children:"Developer"})]}),a(d,{children:[e(n,{...r,children:"Johny"}),e(n,{...r,children:"Depp"}),e(n,{...r,children:e(o,{variant:"orange",children:"AFK"})}),e(n,{...r,children:"Actor"})]}),a(d,{children:[e(n,{...r,children:"Natalie"}),e(n,{...r,children:"Portman"}),e(n,{...r,children:e(o,{variant:"green",children:"Connected"})}),e(n,{...r,children:"Actor"})]}),a(d,{children:[e(n,{...r,children:"Luke"}),e(n,{...r,children:"Skywalker"}),e(n,{...r,children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{...r,children:"Star wars"})]})]})]});v.argTypes={align:{control:"inline-radio",options:["start","center","end"]}};v.args={align:"start"};const C=r=>{const[t,c]=l.useState(3),s=l.useCallback(m=>({active:t===m,onClick:()=>c(m)}),[t,c]);return a(b,{children:[e(p,{children:a(d,{children:[e(i,{children:"Firstname"}),e(i,{children:"Lastname"}),e(i,{children:"Status"}),e(i,{children:"Role"})]})}),a(h,{children:[a(d,{...r,...s(1),children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{...r,...s(2),children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{...r,...s(3),children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]}),a(d,{...r,...s(4),children:[e(n,{children:"Luke"}),e(n,{children:"Skywalker"}),e(n,{children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{children:"Star Wars"})]})]})]})};C.args={interactive:!0};const A=r=>a(B,{hasCollapsibleChildren:!0,"aria-label":"Empty","aria-describedby":"empty-table-caption",...r,children:[e(g,{id:"empty-table-caption",children:"Table with empty data"}),e(p,{children:a(d,{emptyFirstColumn:!0,tableHead:!0,children:[e(i,{children:"first name"}),e(i,{children:"last name"}),e(i,{children:"Status"}),e(i,{children:"Role"})]})}),a(h,{children:[e(d,{interactive:!0,asChild:!0,collapsedContent:e(_,{children:e(P,{children:"Additional description for this row."})}),children:a(R,{href:"https://traefik.io",target:"_blank",children:[e(n,{children:"Johnny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]})}),e(d,{emptyFirstColumn:!0,interactive:!0,asChild:!0,children:a(R,{href:"https://traefik.io",target:"_blank",children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Admin"})]})}),e(d,{interactive:!0,asChild:!0,collapsedContent:e(w,{}),children:a(R,{href:"https://traefik.io",target:"_blank",children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"red",children:"Offline"})}),e(n,{children:"Developer"})]})})]})]}),D=({transform:r,...t})=>a(_,{direction:"column",gap:"4",children:[a(b,{"aria-label":"People","aria-describedby":"basic-table-caption",...t,children:[e(g,{size:"10",id:"basic-table-caption",children:"People with some information"}),e(p,{children:a(d,{children:[e(i,{transform:r,children:"first name"}),e(i,{transform:r,children:"last name"}),e(i,{transform:r,children:"Status"}),e(i,{transform:r,children:"Role"})]})}),a(h,{children:[a(d,{children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Luke"}),e(n,{children:"Skywalker"}),e(n,{children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{children:"Star wars"})]})]}),e(S,{children:e(d,{children:e(n,{fullColSpan:!0,"aria-colspan":4,css:{textAlign:"center"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Load more..."})})})})]}),a(b,{"aria-label":"People","aria-describedby":"basic-table-caption",...t,children:[e(g,{size:"10",id:"basic-table-caption",children:"People with some information"}),e(p,{children:a(d,{children:[e(i,{transform:r,children:"first name"}),e(i,{transform:r,children:"last name"}),e(i,{transform:r,children:"Status"}),e(i,{transform:r,children:"Role"})]})}),a(h,{children:[a(d,{children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Luke"}),e(n,{children:"Skywalker"}),e(n,{children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{children:"Star wars"})]})]}),e(S,{children:a(d,{children:[e(n,{css:{textAlign:"left"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"One"})}),e(n,{css:{textAlign:"left"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Two"})}),e(n,{css:{textAlign:"left"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Three"})}),e(n,{css:{textAlign:"left"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Four"})})]})})]}),a(b,{css:{tableLayout:"auto"},"aria-label":"People","aria-describedby":"basic-table-caption",...t,children:[e(g,{size:"10",id:"basic-table-caption",children:"People with some information"}),e(p,{children:a(d,{children:[e(i,{transform:r,children:"first name"}),e(i,{transform:r,children:"last name"}),e(i,{transform:r,children:"Status"}),e(i,{transform:r,children:"Role"})]})}),a(h,{children:[a(d,{children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]}),a(d,{children:[e(n,{children:"Luke"}),e(n,{children:"Skywalker"}),e(n,{children:e(o,{variant:"red",children:"Disconnected"})}),e(n,{children:"Star wars"})]})]}),e(S,{children:e(d,{children:e(n,{fullColSpan:!0,"aria-colspan":4,css:{textAlign:"center"},children:e(f,{ghost:!0,variant:"secondary",css:{fontSize:"$1",height:"$5",boxShadow:"none"},children:"Load more..."})})})})]})]}),Pe=()=>e(_,{align:"center",justify:"center",children:e(Ce,{src:"https://picsum.photos/38/38"})}),w=r=>a(b,{children:[e(p,{children:a(d,{children:[e(i,{children:"Flex issue column"}),e(i,{children:"Column"})]})}),e(h,{children:a(d,{children:[e(n,{children:e(Pe,{})}),e(n,{children:e(_,{align:"center",justify:"center",children:e(P,{children:"Cell"})})})]})})]}),k=r=>{const[t,c]=l.useState(3),s=l.useCallback(m=>({active:t===m,onClick:()=>c(m)}),[t,c]);return a(B,{hasCollapsibleChildren:!0,children:[e(p,{children:a(d,{emptyFirstColumn:!0,tableHead:!0,children:[e(i,{children:"Firstname"}),e(i,{children:"Lastname"}),e(i,{children:"Status"}),e(i,{children:"Role"})]})}),a(h,{children:[a(d,{emptyFirstColumn:!0,...s(1),...r,children:[e(n,{children:"John"}),e(n,{children:"Doe"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Developer"})]}),a(d,{collapsedContent:e(_,{children:e(P,{children:"Additional description."})}),...s(2),...r,children:[e(n,{children:"Johny"}),e(n,{children:"Depp"}),e(n,{children:e(o,{variant:"orange",children:"AFK"})}),e(n,{children:"Actor"})]}),a(d,{collapsedContent:e(w,{}),...r,...s(3),children:[e(n,{children:"Natalie"}),e(n,{children:"Portman"}),e(n,{children:e(o,{variant:"green",children:"Connected"})}),e(n,{children:"Actor"})]})]})]})};k.args={interactive:!0};var q,J,I;y.parameters={...y.parameters,docs:{...(q=y.parameters)==null?void 0:q.docs,source:{originalSource:`({ + transform, + ...args +}) => + + People with some information + + + + first name + last name + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star wars + + + + + + + + + + `,...(I=(J=y.parameters)==null?void 0:J.docs)==null?void 0:I.source}}};var K,W,E;v.parameters={...v.parameters,docs:{...(K=v.parameters)==null?void 0:K.docs,source:{originalSource:`args => + + + Firstname + Lastname + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star wars + + + `,...(E=(W=v.parameters)==null?void 0:W.docs)==null?void 0:E.source}}};var U,H,j;C.parameters={...C.parameters,docs:{...(U=C.parameters)==null?void 0:U.docs,source:{originalSource:`args => { + const [selectedRow, setSelectedRow] = useState(3); + const makeSelectableRowProps = useCallback((rowNum: number) => ({ + active: selectedRow === rowNum, + onClick: () => setSelectedRow(rowNum) + }), [selectedRow, setSelectedRow]); + return + + + Firstname + Lastname + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star Wars + + + ; +}`,...(j=(H=C.parameters)==null?void 0:H.docs)==null?void 0:j.source}}};var M,O,G;A.parameters={...A.parameters,docs:{...(M=A.parameters)==null?void 0:M.docs,source:{originalSource:`args => + + + + + + + + + + + + Additional description for this row. + }> + + + + + + + + + + + + + + + + }> + + + + + + + + +
Table with empty data
first namelast nameStatusRole
JohnnyDepp + Connected + Developer
JohnDoe + Connected + Admin
NataliePortman + Offline + Developer
`,...(G=(O=A.parameters)==null?void 0:O.docs)==null?void 0:G.source}}};var Q,X,Y;D.parameters={...D.parameters,docs:{...(Q=D.parameters)==null?void 0:Q.docs,source:{originalSource:`({ + transform, + ...args +}) => + + + People with some information + + + + first name + last name + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star wars + + + + + + + + + + + + + People with some information + + + + first name + last name + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star wars + + + + + + + + + + + + + + + + + + + + + + People with some information + + + + first name + last name + Status + Role + + + + + John + Doe + + Connected + + Developer + + + Johny + Depp + + AFK + + Actor + + + Natalie + Portman + + Connected + + Actor + + + Luke + Skywalker + + Disconnected + + Star wars + + + + + + + + + + + `,...(Y=(X=D.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var Z,ee,ne;w.parameters={...w.parameters,docs:{...(Z=w.parameters)==null?void 0:Z.docs,source:{originalSource:`args => + + + Flex issue column + Column + + + + + + + + + + Cell + + + + + `,...(ne=(ee=w.parameters)==null?void 0:ee.docs)==null?void 0:ne.source}}};var re,ae,de;k.parameters={...k.parameters,docs:{...(re=k.parameters)==null?void 0:re.docs,source:{originalSource:`args => { + const [selectedRow, setSelectedRow] = useState(3); + const makeSelectableRowProps = useCallback((rowNum: number) => ({ + active: selectedRow === rowNum, + onClick: () => setSelectedRow(rowNum) + }), [selectedRow, setSelectedRow]); + return + + + + + + + + + + + + + + + + + Additional description. + } {...makeSelectableRowProps(2)} {...args}> + + + + + + } {...args} {...makeSelectableRowProps(3)}> + + + + + + +
FirstnameLastnameStatusRole
JohnDoe + Connected + Developer
JohnyDepp + AFK + Actor
NataliePortman + Connected + Actor
; +}`,...(de=(ae=k.parameters)==null?void 0:ae.docs)==null?void 0:de.source}}};const an=["Basic","Alignment","Interactive","Links","Columns","VerticalAlignment","CollapsibleRow"];export{v as Alignment,y as Basic,k as CollapsibleRow,D as Columns,C as Interactive,A as Links,w as VerticalAlignment,an as __namedExportsOrder,rn as default}; diff --git a/assets/Avatar-BnWvMGaE.js b/assets/Avatar-BnWvMGaE.js new file mode 100644 index 00000000..26bdb232 --- /dev/null +++ b/assets/Avatar-BnWvMGaE.js @@ -0,0 +1 @@ +import{j as l,a as x}from"./jsx-runtime-WuQMLw89.js";import{r as n,R as v}from"./index-Dl6G-zuu.js";import{s as u}from"./stitches.config-CKE6G7UO.js";import{_ as f}from"./extends-CCbyfPlC.js";import{$ as S,b as A,a as $}from"./index-D_wDWxb3.js";import{$ as p}from"./index-D1o5GlT1.js";import{B as y}from"./Box-CsPUZVXZ.js";const g="Avatar",[w,K]=S(g),[_,h]=w(g),C=n.forwardRef((a,i)=>{const{__scopeAvatar:t,...e}=a,[r,o]=n.useState("idle");return n.createElement(_,{scope:t,imageLoadingStatus:r,onImageLoadingStatusChange:o},n.createElement(p.span,f({},e,{ref:i})))}),q="AvatarImage",L=n.forwardRef((a,i)=>{const{__scopeAvatar:t,src:e,onLoadingStatusChange:r=()=>{},...o}=a,c=h(q,t),d=R(e),s=A(b=>{r(b),c.onImageLoadingStatusChange(b)});return $(()=>{d!=="idle"&&s(d)},[d,s]),d==="loaded"?n.createElement(p.img,f({},o,{ref:i,src:e})):null}),k="AvatarFallback",z=n.forwardRef((a,i)=>{const{__scopeAvatar:t,delayMs:e,...r}=a,o=h(k,t),[c,d]=n.useState(e===void 0);return n.useEffect(()=>{if(e!==void 0){const s=window.setTimeout(()=>d(!0),e);return()=>window.clearTimeout(s)}},[e]),c&&o.imageLoadingStatus!=="loaded"?n.createElement(p.span,f({},r,{ref:i})):null});function R(a){const[i,t]=n.useState("idle");return $(()=>{if(!a){t("error");return}let e=!0;const r=new window.Image,o=c=>()=>{e&&t(c)};return t("loading"),r.onload=o("loaded"),r.onerror=o("error"),r.src=a,()=>{e=!1}},[a]),i}const I=C,V=L,E=z,M=u(I,{alignItems:"center",justifyContent:"center",verticalAlign:"middle",overflow:"hidden",userSelect:"none",boxSizing:"border-box",display:"flex",flexShrink:0,position:"relative",border:"none",fontFamily:"inherit",lineHeight:"1",margin:"0",outline:"none",padding:"0",fontWeight:"$medium",color:"$hiContrast","&::before":{content:'""',position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:"inherit",boxShadow:"inset 0px 0px 1px rgba(0, 0, 0, 0.12)"},variants:{size:{1:{width:"$3",height:"$3"},2:{width:"$5",height:"$5"},3:{width:"$6",height:"$6"},4:{width:"$7",height:"$7"},5:{width:"$8",height:"$8"},6:{width:"$9",height:"$9"}},variant:{gray:{backgroundColor:"$slate5"},red:{backgroundColor:"$red5"},purple:{backgroundColor:"$purple5"},blue:{backgroundColor:"$blue5"},green:{backgroundColor:"$green5"},orange:{backgroundColor:"$orange5"}},shape:{square:{borderRadius:"$2"},circle:{borderRadius:"50%"}}},defaultVariants:{size:"2",variant:"gray",shape:"circle"}}),F=u(V,{display:"flex",objectFit:"cover",boxSizing:"border-box",height:"100%",verticalAlign:"middle",width:"100%"}),N=u(E,{textTransform:"uppercase",fontFamily:"$rubik",color:"$deepBlue10",variants:{size:{1:{fontSize:"10px",lineHeight:"15px"},2:{fontSize:"$3"},3:{fontSize:"$6"},4:{fontSize:"$7"},5:{fontSize:"$8"},6:{fontSize:"$9"}}},defaultVariants:{size:"2"}}),m=v.forwardRef(({alt:a,src:i,fallback:t,size:e,variant:r,shape:o,css:c,...d},s)=>l(y,{css:{...c,position:"relative",height:"fit-content",width:"fit-content"},children:x(M,{...d,ref:s,size:e,variant:r,shape:o,children:[l(F,{alt:a,src:i}),l(N,{size:e,children:t})]})}));try{m.displayName="Avatar",m.__docgenInfo={description:"",displayName:"Avatar",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'number | "1" | "2" | "3" | "4" | "5" | "6" | ({ "@light"?: number | "1" | "2" | "3" | "4" | "5" | "6"; "@bp1"?: number | "1" | "2" | "3" | "4" | "5" | "6"; "@bp2"?: number | ... 6 more ... | undefined; ... 5 more ...; "@initial"?: number | ... 6 more ... | undefined; } & { ...; }) | undefined'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"blue" | "orange" | "red" | "green" | "gray" | "purple" | ({ "@light"?: "blue" | "orange" | "red" | "green" | "gray" | "purple"; "@bp1"?: "blue" | "orange" | "red" | "green" | "gray" | "purple"; ... 6 more ...; "@initial"?: "blue" | ... 5 more ... | undefined; } & { ...; }) | undefined'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ prefix: ""; media: { bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; ... 4 more ...; light: "(prefers-color-scheme: light)"; }; theme: { ...; }; themeMap: DefaultThemeMap; utils: { ...; }; }>'}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},alt:{defaultValue:null,description:"",name:"alt",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},shape:{defaultValue:null,description:"",name:"shape",required:!1,type:{name:'"circle" | "square" | ({ "@light"?: "circle" | "square"; "@bp1"?: "circle" | "square"; "@bp2"?: "circle" | "square" | undefined; "@bp3"?: "circle" | "square" | undefined; ... 4 more ...; "@initial"?: "circle" | ... 1 more ... | undefined; } & { ...; }) | undefined'}},fallback:{defaultValue:null,description:"",name:"fallback",required:!1,type:{name:"ReactNode"}}}}}catch{}export{m as A}; diff --git a/assets/Avatar.stories-D2GVOxRU.js b/assets/Avatar.stories-D2GVOxRU.js new file mode 100644 index 00000000..be47c62e --- /dev/null +++ b/assets/Avatar.stories-D2GVOxRU.js @@ -0,0 +1 @@ +import{j as z}from"./jsx-runtime-WuQMLw89.js";import{A as b}from"./Avatar-BnWvMGaE.js";import"./index-Dl6G-zuu.js";import"./stitches.config-CKE6G7UO.js";import"./extends-CCbyfPlC.js";import"./index-D_wDWxb3.js";import"./index-D1o5GlT1.js";import"./index-D1_ZHIBm.js";import"./index-Cy-whKHn.js";import"./Box-CsPUZVXZ.js";const F={title:"Components/Avatar",component:b},r=v=>z(b,{...v});r.args={src:"https://picsum.photos/100",size:"4"};r.argTypes={size:{control:"inline-radio",options:["1","2","3","4","5","6"]}};const a=r.bind({});a.args={src:"https://picsum.photos/100",shape:"square",size:"4"};a.argTypes={size:{control:"inline-radio",options:["1","2","3","4","5","6"]},shape:{control:"inline-radio",options:["square","circle"]}};const e=r.bind({});e.args={fallback:"M",shape:"circle",size:"4",variant:"red"};e.argTypes={size:{control:"inline-radio",options:["1","2","3","4","5","6"]},shape:{control:"inline-radio",options:["square","circle"]},variant:{control:"inline-radio",options:["gray","red","purple","blue","green","orange"]},fallback:{control:"string"}};const o=r.bind({});o.args={fallback:"M",shape:"circle",size:"4",variant:"blue"};o.argTypes={size:{control:"inline-radio",options:["1","2","3","4","5","6"]},shape:{control:"inline-radio",options:["square","circle"]},variant:{control:"inline-radio",options:["gray","red","purple","blue","green","orange"]}};var s,i,t;r.parameters={...r.parameters,docs:{...(s=r.parameters)==null?void 0:s.docs,source:{originalSource:"args => ",...(t=(i=r.parameters)==null?void 0:i.docs)==null?void 0:t.source}}};var n,p,c;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:"args => ",...(c=(p=a.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var l,m,d;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:"args => ",...(d=(m=e.parameters)==null?void 0:m.docs)==null?void 0:d.source}}};var g,u,h;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:"args => ",...(h=(u=o.parameters)==null?void 0:u.docs)==null?void 0:h.source}}};const M=["Template","Shape","Fallback","Variants"];export{e as Fallback,a as Shape,r as Template,o as Variants,M as __namedExportsOrder,F as default}; diff --git a/assets/Badge-nC8BjyEy.js b/assets/Badge-nC8BjyEy.js new file mode 100644 index 00000000..1c3f3a9e --- /dev/null +++ b/assets/Badge-nC8BjyEy.js @@ -0,0 +1 @@ +import{j as c}from"./jsx-runtime-WuQMLw89.js";import{R as m,r as g}from"./index-Dl6G-zuu.js";import{s as r}from"./stitches.config-CKE6G7UO.js";import{b as t}from"./index-Cy-whKHn.js";const a=["gray","red","blue","green","neon","orange","purple"],i=e=>({bc:`$${e}6`,color:`$${e}10`,border:`1px solid $${e}10`}),f=a.reduce((e,n)=>({...e,[n]:i(n)}),{}),h=a.reduce((e,n)=>({...e,[n]:{...i(n)}}),{}),v=a.map(e=>({alphaBg:!0,variant:e,css:{bc:`$${e}A6`}})),l={alignItems:"center",appearance:"none",border:"none",boxSizing:"border-box",display:"inline-flex",flexShrink:0,fontFamily:"$rubik",fontWeight:"$medium",justifyContent:"center",lineHeight:"1",verticalAlign:"middle",outline:"none",padding:"0",textDecoration:"none",userSelect:"none",WebkitTapHighlightColor:"rgba(0,0,0,0)",borderRadius:"$pill",whiteSpace:"nowrap",fontVariantNumeric:"tabular-nums",position:"relative","&:disabled":{backgroundColor:"$slate3",pointerEvents:"none",color:"$slate8"},variants:{size:{small:{height:"$4",px:"$2",fontSize:"$2"},large:{height:"$5",px:"$3",fontSize:"$3"}},variant:f,alphaBg:{true:{}},borderless:{true:{border:"none"}}},compoundVariants:v,defaultVariants:{size:"small",variant:"gray",borderless:!1}},d=r("span",l),y=r(t,d),s=r("button",l,{"&::before":{boxSizing:"border-box",content:'""',position:"absolute",inset:0,borderRadius:"inherit"},"&:focus-visible":{outline:"2px solid $primary"},"&:hover":{cursor:"pointer","&::before":{backgroundColor:"$badgeInteractiveBackgroundHover"}},"&:active":{"&::before":{backgroundColor:"$badgeInteractiveBackgroundActive"}},variants:{variant:h,borderless:{true:{border:"none"}}}}),x=r(t,s),o=m.forwardRef(({interactive:e,asChild:n,...u},p)=>{const b=g.useMemo(()=>e?n?x:s:n?y:d,[n]);return c(b,{...u,ref:p})});try{o.displayName="Badge",o.__docgenInfo={description:"",displayName:"Badge",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"large" | "small" | ({ "@light"?: "large" | "small"; "@bp1"?: "large" | "small"; "@bp2"?: "large" | "small" | undefined; "@bp3"?: "large" | "small" | undefined; "@bp4"?: "large" | ... 1 more ... | undefined; "@motion"?: "large" | ... 1 more ... | undefined; "@hover"?: "large" | ... 1 more ......'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"neon" | "blue" | "orange" | "red" | "green" | "gray" | "purple" | ({ "@light"?: "neon" | "blue" | "orange" | "red" | "green" | "gray" | "purple"; "@bp1"?: "neon" | "blue" | ... 5 more ...; ... 6 more ...; "@initial"?: "neon" | ... 6 more ... | undefined; } & { ...; }) | undefined'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},interactive:{defaultValue:null,description:"",name:"interactive",required:!1,type:{name:"boolean"}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},borderless:{defaultValue:null,description:"",name:"borderless",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},alphaBg:{defaultValue:null,description:"",name:"alphaBg",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}}}}}catch{}export{o as B,a as C}; diff --git a/assets/Badge.stories-k2OZCZZE.js b/assets/Badge.stories-k2OZCZZE.js new file mode 100644 index 00000000..e62f77cc --- /dev/null +++ b/assets/Badge.stories-k2OZCZZE.js @@ -0,0 +1,24 @@ +import{a as U,j as r}from"./jsx-runtime-WuQMLw89.js";import{B as a,C as j}from"./Badge-nC8BjyEy.js";import{m as A}from"./modifyVariantsForStory-D3vOGtQO.js";import{F as _}from"./Flex-Dyi1HvDT.js";import{U as I}from"./Link-B9AS5LNU.js";import"./index-Dl6G-zuu.js";import"./stitches.config-CKE6G7UO.js";import"./index-Cy-whKHn.js";import"./extends-CCbyfPlC.js";import"./Text-DOWt1sZJ.js";const E=e=>r(a,{...e}),T=A(E),Q={title:"Components/Badge",component:T,argTypes:{size:{control:"inline-radio"},variant:{control:"select"},borderless:{control:"boolean"}}},o=e=>U(_,{css:{gap:"$3"},children:[r(a,{...e,children:"Default"}),j.map(s=>r(a,{...e,variant:s,children:s},s))]});o.args={interactive:!1,size:"small",variant:"gray",borderless:!1};const t=o.bind({});t.args={alphaBg:!0};const n=e=>r(a,{...e,children:"Small badge"});n.args={interactive:!1,size:"small",variant:"blue",borderless:!1};const c=e=>r(a,{...e,children:"Large badge"});c.args={interactive:!1,size:"large",variant:"green",borderless:!1};const l=e=>U(_,{css:{gap:"$3"},children:[r(a,{...e,children:"Default"}),j.map(s=>r(a,{...e,variant:s,children:s}))]});l.args={interactive:!0,size:"small",variant:"gray",borderless:!1};const d=e=>r(a,{asChild:!0,interactive:!0,...e,children:r(I,{href:"https://traefik.io",children:"Link"})}),i=e=>r(a,{...e,children:"Borderless badge"});i.args={interactive:!0,size:"small",variant:"neon",borderless:!0};var g,m,p;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`args => + Default + {COLORS.map(color => + {color} + )} + `,...(p=(m=o.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};var u,B,f;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`args => + Default + {COLORS.map(color => + {color} + )} + `,...(f=(B=t.parameters)==null?void 0:B.docs)==null?void 0:f.source}}};var h,v,S;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:"args => Small badge",...(S=(v=n.parameters)==null?void 0:v.docs)==null?void 0:S.source}}};var b,L,k;c.parameters={...c.parameters,docs:{...(b=c.parameters)==null?void 0:b.docs,source:{originalSource:"args => Large badge",...(k=(L=c.parameters)==null?void 0:L.docs)==null?void 0:k.source}}};var x,y,C;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:`args => + Default + {COLORS.map(color => + {color} + )} + `,...(C=(y=l.parameters)==null?void 0:y.docs)==null?void 0:C.source}}};var F,O,z;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.docs,source:{originalSource:`args => + Link + `,...(z=(O=d.parameters)==null?void 0:O.docs)==null?void 0:z.source}}};var D,$,R;i.parameters={...i.parameters,docs:{...(D=i.parameters)==null?void 0:D.docs,source:{originalSource:"args => Borderless badge",...(R=($=i.parameters)==null?void 0:$.docs)==null?void 0:R.source}}};const W=["Colors","AlphaBackground","Small","Large","Interactive","BadgeLink","Borderless"];export{t as AlphaBackground,d as BadgeLink,i as Borderless,o as Colors,l as Interactive,c as Large,n as Small,W as __namedExportsOrder,Q as default}; diff --git a/assets/Box-CsPUZVXZ.js b/assets/Box-CsPUZVXZ.js new file mode 100644 index 00000000..73952fa2 --- /dev/null +++ b/assets/Box-CsPUZVXZ.js @@ -0,0 +1 @@ +import{s as r}from"./stitches.config-CKE6G7UO.js";const e=r("div",{boxSizing:"border-box"});try{e.displayName="Box",e.__docgenInfo={description:"",displayName:"Box",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLDivElement | null) => void) | RefObject | null"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}export{e as B}; diff --git a/assets/Box.stories-BuGI19is.js b/assets/Box.stories-BuGI19is.js new file mode 100644 index 00000000..d28a5cac --- /dev/null +++ b/assets/Box.stories-BuGI19is.js @@ -0,0 +1,14 @@ +import{j as s}from"./jsx-runtime-WuQMLw89.js";import{m as i}from"./modifyVariantsForStory-D3vOGtQO.js";import{B as n}from"./Box-CsPUZVXZ.js";import{T as p}from"./Text-DOWt1sZJ.js";import"./index-Dl6G-zuu.js";import"./stitches.config-CKE6G7UO.js";const l=o=>s(n,{...o}),c=i(l),y={title:"Components/Box",component:c},e=o=>s(n,{css:{px:"$4",py:"$6",bc:"$deepBlue6",ta:"center"},...o,children:s(p,{as:"p",size:"4",css:{lineHeight:"27px"},children:"Traefik Labs develops the world's most popular cloud-native application networking software. It helps developers and operations teams of all sizes build, deploy and run modern microservices applications quickly and easily."})});var r,a,t;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`args => + + Traefik Labs develops the world's most popular cloud-native application networking software. + It helps developers and operations teams of all sizes build, deploy and run modern + microservices applications quickly and easily. + + `,...(t=(a=e.parameters)==null?void 0:a.docs)==null?void 0:t.source}}};const h=["Basic"];export{e as Basic,h as __namedExportsOrder,y as default}; diff --git a/assets/Bubble-Dbm5DCWD.js b/assets/Bubble-Dbm5DCWD.js new file mode 100644 index 00000000..784fe5a4 --- /dev/null +++ b/assets/Bubble-Dbm5DCWD.js @@ -0,0 +1 @@ +import{k as n,s as r}from"./stitches.config-CKE6G7UO.js";const o=n({"0%":{top:0,right:0,bottom:0,left:0,opacity:1},"100%":{top:-8,right:-8,bottom:-8,left:-8,opacity:0}}),e=r("div",{display:"inline-block",size:"$4",bc:"$red8",borderRadius:"50%",position:"relative","&::before":{animation:`${o} 1s ease infinite`,boxSizing:"border-box",content:'""',position:"absolute",top:0,right:0,bottom:0,left:0,boxShadow:"inset 0 0 0 1px rgba(255,255,255,.5)",borderRadius:"50%",pointerEvents:"none",zIndex:-1},"&::after":{boxSizing:"border-box",content:'""',position:"absolute",top:5,right:5,bottom:5,left:5,bc:"rgba(255,255,255,.1)",borderRadius:"50%",pointerEvents:"none"},variants:{variant:{red:{bc:"$red8","&::before":{bc:"$red8"}},green:{bc:"$green8","&::before":{bc:"$green8"}},orange:{bc:"$orange8","&::before":{bc:"$orange8"}},blue:{bc:"$blue8","&::before":{bc:"$blue8"}},yellow:{bc:"$neon8","&::before":{bc:"$neon8"}},purple:{bc:"$purple8","&::before":{bc:"$purple8"}},gray:{bc:"$slate8","&::before":{bc:"$slate8"}}},size:{"x-small":{size:"$1"},small:{size:"$2"},medium:{size:"$3"},large:{size:"$4"},"x-large":{size:"$5"}},noAnimation:{true:{"&::before":{content:"none"}}}},defaultVariants:{size:"small",noAnimation:!1}});try{e.displayName="Bubble",e.__docgenInfo={description:"",displayName:"Bubble",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLDivElement | null) => void) | RefObject | null"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"blue" | "orange" | "red" | "green" | "gray" | "yellow" | "purple" | ({ "@light"?: "blue" | "orange" | "red" | "green" | "gray" | "yellow" | "purple"; "@bp1"?: "blue" | "orange" | ... 5 more ...; ... 6 more ...; "@initial"?: "blue" | ... 6 more ... | undefined; } & { ...; }) | undefined'}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | "x-large" | "x-small" | ({ "@light"?: "medium" | "large" | "small" | "x-large" | "x-small"; "@bp1"?: "medium" | "large" | "small" | "x-large" | "x-small"; ... 6 more ...; "@initial"?: "medium" | ... 4 more ... | undefined; } & { ...; }) | undefined'}},noAnimation:{defaultValue:null,description:"",name:"noAnimation",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}export{e as B}; diff --git a/assets/Bubble.stories-BAUU56am.js b/assets/Bubble.stories-BAUU56am.js new file mode 100644 index 00000000..7450c1ca --- /dev/null +++ b/assets/Bubble.stories-BAUU56am.js @@ -0,0 +1,20 @@ +import{a as u,j as a}from"./jsx-runtime-WuQMLw89.js";import{B as r}from"./Bubble-Dbm5DCWD.js";import{m as p}from"./modifyVariantsForStory-D3vOGtQO.js";import{F as c}from"./Flex-Dyi1HvDT.js";import"./index-Dl6G-zuu.js";import"./stitches.config-CKE6G7UO.js";const g=e=>a(r,{...e}),B=p(g),F={title:"Components/Bubble",component:B},s=e=>u(c,{css:{gap:"$3"},children:[a(r,{...e,variant:"red"}),a(r,{...e,variant:"green"}),a(r,{...e,variant:"orange"}),a(r,{...e,variant:"blue"}),a(r,{...e,variant:"yellow"}),a(r,{...e,variant:"purple"}),a(r,{...e,variant:"gray"})]});s.args={size:"small",noAnimation:!1};s.argTypes={size:{control:"inline-radio",options:["x-small","small","medium","large","x-large"]},variant:{control:!0}};const n=e=>u(c,{css:{gap:"$3",alignItems:"center"},children:[a(r,{...e,size:"x-small"}),a(r,{...e,size:"small"}),a(r,{...e,size:"medium"}),a(r,{...e,size:"large"}),a(r,{...e,size:"x-large"})]});n.args={variant:"purple"};n.argTypes={size:{control:!1,noAnimation:!1},variant:{control:"select"}};var l,o,i;s.parameters={...s.parameters,docs:{...(l=s.parameters)==null?void 0:l.docs,source:{originalSource:`args => + + + + + + + + `,...(i=(o=s.parameters)==null?void 0:o.docs)==null?void 0:i.source}}};var t,m,b;n.parameters={...n.parameters,docs:{...(t=n.parameters)==null?void 0:t.docs,source:{originalSource:`args => + + + + + + `,...(b=(m=n.parameters)==null?void 0:m.docs)==null?void 0:b.source}}};const S=["Colors","Sizes"];export{s as Colors,n as Sizes,S as __namedExportsOrder,F as default}; diff --git a/assets/Button-scdtd1Jr.js b/assets/Button-scdtd1Jr.js new file mode 100644 index 00000000..817db59c --- /dev/null +++ b/assets/Button-scdtd1Jr.js @@ -0,0 +1,7 @@ +import{j as i}from"./jsx-runtime-WuQMLw89.js";import{R as m,r as p}from"./index-Dl6G-zuu.js";import{s as d,k as c}from"./stitches.config-CKE6G7UO.js";import{m as b}from"./modifyVariantsForStory-D3vOGtQO.js";import{b as f}from"./index-Cy-whKHn.js";const g={appearance:"none",userSelect:"none",boxSizing:"border-box",border:"none",WebkitTapHighlightColor:"rgba(0,0,0,0)","&:disabled":{pointerEvents:"none",opacity:.5}},h={small:"$sizes$8",medium:"$sizes$9",large:"$sizes$10"},n=e=>({$$bgSize:h[e],backgroundSize:"$$bgSize",backgroundImage:`linear-gradient( + -45deg, + transparent 33%, + $colors$deepBlue4 33%, + $colors$deepBlue4 66%, + transparent 66% + )`,animation:`${c({"100%":{transform:"translateX($$bgSize)"}})} 500ms linear infinite`}),a=d("button",g,{all:"unset",alignItems:"center",overflow:"hidden","&::before":{boxSizing:"border-box",content:'""',position:"absolute",inset:0},"&::after":{boxSizing:"border-box",content:'""',position:"absolute",inset:0},display:"inline-flex",flexShrink:0,justifyContent:"center",lineHeight:"1",position:"relative",height:"$5",px:"$2",fontFamily:"$rubik",fontSize:"$3",fontWeight:"$medium",fontVariantNumeric:"tabular-nums","&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$focusOutline","&::before":{backgroundColor:"rgba(255, 255, 255, 0.15)"},"&::after":{opacity:.15}},"@hover":{"&:hover":{cursor:"pointer","&::before":{backgroundColor:"rgba(255, 255, 255, 0.15)"},"&::after":{opacity:.05}}},"&:active":{"&::before":{backgroundColor:"rgba(0, 0, 0, 0.15)"}},variants:{size:{small:{borderRadius:"$3",height:"$5",px:"$2",fontSize:"$1",lineHeight:"$sizes$5"},medium:{borderRadius:"$3",height:"$6",px:"$3",fontSize:"$3",lineHeight:"$sizes$6"},large:{borderRadius:"$3",height:"$7",px:"$3",fontSize:"$3",lineHeight:"$sizes$7"}},variant:{primary:{bc:"$primary",c:"$buttonPrimaryText","&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"},"@hover":{"&:hover":{"&::after":{backgroundColor:"$primary"}}}},secondary:{bc:"$buttonSecondaryBg",c:"$buttonSecondaryText",boxShadow:"inset 0 0 0 2px $colors$buttonSecondaryBorder","&:active":{boxShadow:"inset 0 0 0 1px $colors$buttonSecondaryBorder"},"&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$buttonSecondaryFocusBorder"},"@hover":{"&:hover":{"&::after":{backgroundColor:"$primary"}}}},red:{backgroundColor:"$buttonRedBg",color:"$buttonRedText","&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$buttonRedFocusBg"}}},state:{active:{bc:"$deepBlue5",c:"$deepBlue11","&:active":{backgroundColor:"$deepBlue5"}},waiting:{bc:"$deepBlue3",boxShadow:"inset 0 0 0 1px $deepBlue4",c:"transparent",overflow:"hidden",pointerEvents:"none","&::after":{left:"-100%",width:"200%",...n("medium")}}},ghost:{true:{boxShadow:"none","@hover":{"&:hover":{boxShadow:"none"}}}},rounded:{true:{borderRadius:"$pill"}}},compoundVariants:[{variant:"primary",ghost:"true",css:{color:"$primary",backgroundColor:"transparent","@hover":{"&:hover":{color:"$buttonPrimaryGhostHoverText",backgroundColor:"transparent"}}}},{variant:"secondary",state:"waiting",css:{backgroundColor:"$deepBlue3",color:"transparent"}},{variant:"secondary",state:"active",css:{backgroundColor:"$buttonPrimaryBg",color:"$buttonPrimaryText"}},{variant:"red",state:"waiting",css:{backgroundColor:"$deepBlue3",color:"transparent"}},{variant:"red",ghost:"true",css:{color:"$buttonRedBg",backgroundColor:"transparent","@hover":{"&:hover":{color:"$buttonRedHoverText",backgroundColor:"transparent"}}}},{size:"small",state:"waiting",css:{"&::after":n("small")}},{size:"large",state:"waiting",css:{"&::after":n("large")}}],defaultVariants:{size:"medium",variant:"primary"}}),y=d(f,a),r=m.forwardRef(({children:e,asChild:t,...l},u)=>{const s=p.useMemo(()=>t?y:a,[t]);return i(s,{ref:u,...l,children:e})}),$=e=>i(r,{...e}),o=b($);try{a.displayName="StyledButton",a.__docgenInfo={description:"",displayName:"StyledButton",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLButtonElement | null) => void) | RefObject | null"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | ({ "@light"?: "medium" | "large" | "small"; "@bp1"?: "medium" | "large" | "small"; "@bp2"?: "medium" | "large" | "small" | undefined; ... 5 more ...; "@initial"?: "medium" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"red" | "primary" | "secondary" | ({ "@light"?: "red" | "primary" | "secondary"; "@bp1"?: "red" | "primary" | "secondary"; "@bp2"?: "red" | "primary" | "secondary" | undefined; ... 5 more ...; "@initial"?: "red" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:'"active" | "waiting" | ({ "@light"?: "active" | "waiting"; "@bp1"?: "active" | "waiting"; "@bp2"?: "active" | "waiting" | undefined; "@bp3"?: "active" | "waiting" | undefined; ... 4 more ...; "@initial"?: "active" | ... 1 more ... | undefined; } & { ...; }) | undefined'}},ghost:{defaultValue:null,description:"",name:"ghost",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},rounded:{defaultValue:null,description:"",name:"rounded",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{r.displayName="Button",r.__docgenInfo={description:"",displayName:"Button",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"medium" | "large" | "small" | ({ "@light"?: "medium" | "large" | "small"; "@bp1"?: "medium" | "large" | "small"; "@bp2"?: "medium" | "large" | "small" | undefined; ... 5 more ...; "@initial"?: "medium" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"string"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"red" | "primary" | "secondary" | ({ "@light"?: "red" | "primary" | "secondary"; "@bp1"?: "red" | "primary" | "secondary"; "@bp2"?: "red" | "primary" | "secondary" | undefined; ... 5 more ...; "@initial"?: "red" | ... 2 more ... | undefined; } & { ...; }) | undefined'}},ghost:{defaultValue:null,description:"",name:"ghost",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ prefix: ""; media: { bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; ... 4 more ...; light: "(prefers-color-scheme: light)"; }; theme: { ...; }; themeMap: DefaultThemeMap; utils: { ...; }; }>'}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:'"active" | "waiting" | ({ "@light"?: "active" | "waiting"; "@bp1"?: "active" | "waiting"; "@bp2"?: "active" | "waiting" | undefined; "@bp3"?: "active" | "waiting" | undefined; ... 4 more ...; "@initial"?: "active" | ... 1 more ... | undefined; } & { ...; }) | undefined'}},rounded:{defaultValue:null,description:"",name:"rounded",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}}}}}catch{}try{o.displayName="ButtonForStory",o.__docgenInfo={description:"",displayName:"ButtonForStory",props:{as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"string"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"((instance: HTMLButtonElement | null) => void) | RefObject | null"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ prefix: ""; media: { bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; ... 4 more ...; light: "(prefers-color-scheme: light)"; }; theme: { ...; }; themeMap: DefaultThemeMap; utils: { ...; }; }>'}},asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"large"'},{value:'"small"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"red"'},{value:'"primary"'},{value:'"secondary"'}]}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"enum",value:[{value:'"active"'},{value:'"waiting"'}]}},ghost:{defaultValue:null,description:"",name:"ghost",required:!1,type:{name:"boolean"}},rounded:{defaultValue:null,description:"",name:"rounded",required:!1,type:{name:"boolean"}}}}}catch{}export{r as B,o as a,g as b}; diff --git a/assets/Button.stories-BT8zbZSj.js b/assets/Button.stories-BT8zbZSj.js new file mode 100644 index 00000000..1c43f414 --- /dev/null +++ b/assets/Button.stories-BT8zbZSj.js @@ -0,0 +1,33 @@ +import{j as r,a as l,F as M}from"./jsx-runtime-WuQMLw89.js";import{R as N}from"./index-Dl6G-zuu.js";import{a as m}from"./Button-scdtd1Jr.js";import{I as Q}from"./react-icons.esm-C3slgq7o.js";import{U as V}from"./Link-B9AS5LNU.js";import{F as q}from"./Flex-Dyi1HvDT.js";import{T as z}from"./Text-DOWt1sZJ.js";import"./stitches.config-CKE6G7UO.js";import"./modifyVariantsForStory-D3vOGtQO.js";import"./index-Cy-whKHn.js";import"./extends-CCbyfPlC.js";const mr={title:"Components/Button",component:m,argTypes:{onClick:{action:"clicked"}}},o=t=>r(m,{...t,children:"Button"}),e=o.bind({});e.args={};const s=o.bind({});s.args={variant:"secondary"};const a=o.bind({});a.args={variant:"red"};const n=o.bind({});n.args={ghost:!0,variant:"secondary"};const c=o.bind({});c.args={disabled:!0};const X=t=>r(m,{...t,children:l(q,{css:{gap:"$2",alignItems:"center"},children:[r(Q,{}),r(z,{css:{color:"currentColor",lineHeight:"normal"},children:"Button"})]})}),p=X.bind({}),Y=({state:t,...J})=>{const[B,K]=N.useState(0);return l(M,{children:[l(z,{css:{pb:"$3"},children:["Tab ",B+1," is active"]}),r(q,{css:{gap:"$3"},children:[...Array(4)].map((Z,g)=>l(m,{...J,...B===g?{state:"active"}:{},onClick:()=>K(g),children:["Tab ",g+1]}))})]})},i=Y.bind({});i.args={};const u=o.bind({});u.args={state:"waiting"};const d=t=>r(m,{asChild:!0,...t,children:r(V,{href:"https://traefik.io",children:"Button"})});d.argTypes={state:{options:["waiting",void 0],control:"inline-radio"}};var y,S,F;e.parameters={...e.parameters,docs:{...(y=e.parameters)==null?void 0:y.docs,source:{originalSource:"args => Button",...(F=(S=e.parameters)==null?void 0:S.docs)==null?void 0:F.source}}};var h,v,b;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:"args => Button",...(b=(v=s.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};var T,f,x;a.parameters={...a.parameters,docs:{...(T=a.parameters)==null?void 0:T.docs,source:{originalSource:"args => Button",...(x=(f=a.parameters)==null?void 0:f.docs)==null?void 0:x.source}}};var k,C,I;n.parameters={...n.parameters,docs:{...(k=n.parameters)==null?void 0:k.docs,source:{originalSource:"args => Button",...(I=(C=n.parameters)==null?void 0:C.docs)==null?void 0:I.source}}};var A,W,$;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:"args => Button",...($=(W=c.parameters)==null?void 0:W.docs)==null?void 0:$.source}}};var L,R,_;p.parameters={...p.parameters,docs:{...(L=p.parameters)==null?void 0:L.docs,source:{originalSource:`args => + + + Button + + `,...(_=(R=p.parameters)==null?void 0:R.docs)==null?void 0:_.source}}};var U,j,w;i.parameters={...i.parameters,docs:{...(U=i.parameters)==null?void 0:U.docs,source:{originalSource:`({ + state, + ...args +}) => { + const [active, setActive] = React.useState(0); + return <> + Tab {active + 1} is active + + {[...Array(4)].map((_, i) => setActive(i)}> + Tab {i + 1} + )} + + ; +}`,...(w=(j=i.parameters)==null?void 0:j.docs)==null?void 0:w.source}}};var D,G,H;u.parameters={...u.parameters,docs:{...(D=u.parameters)==null?void 0:D.docs,source:{originalSource:"args => Button",...(H=(G=u.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};var P,E,O;d.parameters={...d.parameters,docs:{...(P=d.parameters)==null?void 0:P.docs,source:{originalSource:`args => + Button + `,...(O=(E=d.parameters)==null?void 0:E.docs)==null?void 0:O.source}}};const pr=["Primary","Secondary","Red","Ghost","Disabled","WithIcon","Active","Waiting","ButtonLink"];export{i as Active,d as ButtonLink,c as Disabled,n as Ghost,e as Primary,a as Red,s as Secondary,u as Waiting,p as WithIcon,pr as __namedExportsOrder,mr as default}; diff --git a/assets/ButtonSwitch.stories-DK_7bN92.js b/assets/ButtonSwitch.stories-DK_7bN92.js new file mode 100644 index 00000000..ea39bf87 --- /dev/null +++ b/assets/ButtonSwitch.stories-DK_7bN92.js @@ -0,0 +1,15 @@ +import{a as E,j as m}from"./jsx-runtime-WuQMLw89.js";import{_ as l}from"./extends-CCbyfPlC.js";import{r as b,R as t}from"./index-Dl6G-zuu.js";import{$ as N}from"./index-D_wDWxb3.js";import{$ as w}from"./index-D1o5GlT1.js";import{$ as T,a as j,b as D}from"./index-DDdsoQNw.js";import{$ as S,a as L}from"./index-COmNUzeK.js";import{a as z}from"./index-DbIbOXBD.js";import{s as R}from"./stitches.config-CKE6G7UO.js";import"./index-D1_ZHIBm.js";import"./index-Cy-whKHn.js";import"./index-CKWv3fp9.js";const U=b.forwardRef((e,o)=>{const{pressed:i,defaultPressed:n=!1,onPressedChange:a,...c}=e,[s=!1,r]=S({prop:i,onChange:a,defaultProp:n});return b.createElement(w.button,l({type:"button","aria-pressed":s,"data-state":s?"on":"off","data-disabled":e.disabled?"":void 0},c,{ref:o,onClick:L(e.onClick,()=>{e.disabled||r(!s)})}))}),v="ToggleGroup",[O,pe]=N(v,[T]),k=T(),W=t.forwardRef((e,o)=>{const{type:i,...n}=e;if(i==="single"){const a=n;return t.createElement(H,l({},a,{ref:o}))}if(i==="multiple"){const a=n;return t.createElement(J,l({},a,{ref:o}))}throw new Error(`Missing prop \`type\` expected on \`${v}\``)}),[A,M]=O(v),H=t.forwardRef((e,o)=>{const{value:i,defaultValue:n,onValueChange:a=()=>{},...c}=e,[s,r]=S({prop:i,defaultProp:n,onChange:a});return t.createElement(A,{scope:e.__scopeToggleGroup,type:"single",value:s?[s]:[],onItemActivate:r,onItemDeactivate:t.useCallback(()=>r(""),[r])},t.createElement(F,l({},c,{ref:o})))}),J=t.forwardRef((e,o)=>{const{value:i,defaultValue:n,onValueChange:a=()=>{},...c}=e,[s=[],r]=S({prop:i,defaultProp:n,onChange:a}),d=t.useCallback(p=>r((f=[])=>[...f,p]),[r]),x=t.useCallback(p=>r((f=[])=>f.filter(q=>q!==p)),[r]);return t.createElement(A,{scope:e.__scopeToggleGroup,type:"multiple",value:s,onItemActivate:d,onItemDeactivate:x},t.createElement(F,l({},c,{ref:o})))}),[K,Q]=O(v),F=t.forwardRef((e,o)=>{const{__scopeToggleGroup:i,disabled:n=!1,rovingFocus:a=!0,orientation:c,dir:s,loop:r=!0,...d}=e,x=k(i),p=z(s),f={role:"group",dir:p,...d};return t.createElement(K,{scope:i,rovingFocus:a,disabled:n},a?t.createElement(j,l({asChild:!0},x,{orientation:c,dir:p,loop:r}),t.createElement(w.div,l({},f,{ref:o}))):t.createElement(w.div,l({},f,{ref:o})))}),C="ToggleGroupItem",X=t.forwardRef((e,o)=>{const i=M(C,e.__scopeToggleGroup),n=Q(C,e.__scopeToggleGroup),a=k(e.__scopeToggleGroup),c=i.value.includes(e.value),s=n.disabled||e.disabled,r={...e,pressed:c,disabled:s},d=t.useRef(null);return n.rovingFocus?t.createElement(D,l({asChild:!0},a,{focusable:!s,active:c,ref:d}),t.createElement(_,l({},r,{ref:o}))):t.createElement(_,l({},r,{ref:o}))}),_=t.forwardRef((e,o)=>{const{__scopeToggleGroup:i,value:n,...a}=e,c=M(C,i),s={role:"radio","aria-checked":e.pressed,"aria-pressed":void 0},r=c.type==="single"?s:void 0;return t.createElement(U,l({},r,a,{ref:o,onPressedChange:d=>{d?c.onItemActivate(n):c.onItemDeactivate(n)}}))}),Y=W,Z=X,g=R(Y,{display:"inline-flex",bc:"$buttonSwitchContainerBg",borderRadius:"$3",p:"3px",gap:"$1"}),u=R(Z,{display:"inline-flex",bc:"$buttonSwitchOffBg",c:"$buttonSwitchOffColor",p:"$1",width:"$10",justifyContent:"center",fontWeight:600,border:"none",position:"relative","&::before":{boxSizing:"border-box",content:'""',position:"absolute",inset:0,borderRadius:"$3"},"&::after":{boxSizing:"border-box",content:'""',position:"absolute",inset:0,borderRadius:"$3"},"&:focus-visible":{borderRadius:"$3","&::before":{backgroundColor:"rgba(255, 255, 255, 0.15)"},"&::after":{opacity:.15}},"@hover":{"&:hover":{cursor:"pointer","&::before":{backgroundColor:"rgba(255, 255, 255, 0.15)"},"&::after":{opacity:.05}}},"&[data-state=on]":{bc:"$buttonSwitchActiveBg",c:"$buttonSwitchActiveColor",borderRadius:"$3"}});try{g.displayName="ButtonSwitchContainer",g.__docgenInfo={description:"",displayName:"ButtonSwitchContainer",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}try{u.displayName="ButtonSwitchItem",u.__docgenInfo={description:"",displayName:"ButtonSwitchItem",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}}}}}catch{}const fe={title:"Components/ButtonSwitch",component:g},h=()=>{const[e,o]=b.useState("left");return E(g,{type:"single",value:e,onValueChange:o,children:[m(u,{value:"left",children:"Left"}),m(u,{value:"right",children:"Right"})]})},$=()=>{const[e,o]=b.useState([]);return E(g,{type:"multiple",value:e,onValueChange:o,children:[m(u,{value:"option1",children:"Option 1"}),m(u,{value:"option2",children:"Option 2"}),m(u,{value:"option3",children:"Option 3"}),m(u,{value:"option4",children:"Option 4"})]})};var y,B,G;h.parameters={...h.parameters,docs:{...(y=h.parameters)==null?void 0:y.docs,source:{originalSource:`() => { + const [value, setValue] = useState('left'); + return + Left + Right + ; +}`,...(G=(B=h.parameters)==null?void 0:B.docs)==null?void 0:G.source}}};var I,V,P;$.parameters={...$.parameters,docs:{...(I=$.parameters)==null?void 0:I.docs,source:{originalSource:`() => { + const [value, setValue] = useState([]); + return + Option 1 + Option 2 + Option 3 + Option 4 + ; +}`,...(P=(V=$.parameters)==null?void 0:V.docs)==null?void 0:P.source}}};const me=["Basic","Multiple"];export{h as Basic,$ as Multiple,me as __namedExportsOrder,fe as default}; diff --git a/assets/Card-c3mvhibi.js b/assets/Card-c3mvhibi.js new file mode 100644 index 00000000..5a5176dd --- /dev/null +++ b/assets/Card-c3mvhibi.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-WuQMLw89.js";import{R as d}from"./index-Dl6G-zuu.js";import{s as t}from"./stitches.config-CKE6G7UO.js";import{e as l}from"./Elevation-CQxWisSY.js";const a=t("div",{appearance:"none",border:"none",boxSizing:"border-box",font:"inherit",lineHeight:"1",outline:"none",padding:"$3",textAlign:"inherit",verticalAlign:"middle",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",backgroundColor:"$cardBackground",display:"block",textDecoration:"none",color:"inherit",borderRadius:"$3",position:"relative","&::before":{boxSizing:"border-box",content:'""',position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:"$3",pointerEvents:"none"},variants:{elevation:l,variant:{inner:{backgroundColor:"$innerCardBgColor"},ghost:{backgroundColor:"transparent",boxShadow:"none"}},active:{true:{"&::before":{outline:"1px solid $colors$cardActiveBorder",backgroundColor:"$cardActiveBackground"}}}},defaultVariants:{elevation:1}}),u=t("button",a,{"@hover":{"&:hover":{cursor:"pointer","&::before":{outline:"1px solid $colors$cardHoverBorder",backgroundColor:"$cardHoverBackground"}}},"&:focus":{outline:"2px solid $primary"},"&:active":{"&::before":{outline:"1px solid $colors$cardActiveBorder",backgroundColor:"$cardActiveBackground"}}}),i=d.forwardRef(({interactive:e,...r},n)=>e?o(u,{tabIndex:0,ref:n,...r}):o(a,{ref:n,...r}));try{i.displayName="Card",i.__docgenInfo={description:"",displayName:"Card",props:{elevation:{defaultValue:null,description:"",name:"elevation",required:!1,type:{name:'number | `${number}` | ({ "@light"?: number | `${number}`; "@bp1"?: number | `${number}`; "@bp2"?: number | `${number}` | undefined; "@bp3"?: number | `${number}` | undefined; "@bp4"?: number | ... 1 more ... | undefined; "@motion"?: number | ... 1 more ... | undefined; "@hover"?: number | .....'}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:'"inner" | "ghost" | ({ "@light"?: "inner" | "ghost"; "@bp1"?: "inner" | "ghost"; "@bp2"?: "inner" | "ghost" | undefined; "@bp3"?: "inner" | "ghost" | undefined; "@bp4"?: "inner" | ... 1 more ... | undefined; "@motion"?: "inner" | ... 1 more ... | undefined; "@hover"?: "inner" | ... 1 more ......'}},active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:'boolean | "true" | ({ "@light"?: boolean | "true"; "@bp1"?: boolean | "true"; "@bp2"?: boolean | "true" | undefined; "@bp3"?: boolean | "true" | undefined; "@bp4"?: boolean | "true" | undefined; "@motion"?: boolean | ... 1 more ... | undefined; "@hover"?: boolean | ... 1 more ... | undefined;...'}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:'CSS<{ bp1: "(min-width: 520px) and (max-width: 899px)"; bp2: "(min-width: 900px) and (max-width: 1199px)"; bp3: "(min-width: 1200px) and (max-width: 1799px)"; bp4: "(min-width: 1800px)"; motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; dark: "(prefers-color-scheme: dark)"; light: "(prefers-color-sche...'}},interactive:{defaultValue:null,description:"",name:"interactive",required:!1,type:{name:"boolean"}}}}}catch{}export{i as C}; diff --git a/assets/Card.stories-CNXoMDHr.js b/assets/Card.stories-CNXoMDHr.js new file mode 100644 index 00000000..f1e71003 --- /dev/null +++ b/assets/Card.stories-CNXoMDHr.js @@ -0,0 +1,125 @@ +import{a as i,j as e}from"./jsx-runtime-WuQMLw89.js";import{C as t}from"./Card-c3mvhibi.js";import{H as a}from"./Heading-6EoCpiwd.js";import{F as I}from"./Flex-Dyi1HvDT.js";import{T as n}from"./Text-DOWt1sZJ.js";import"./index-Dl6G-zuu.js";import"./stitches.config-CKE6G7UO.js";import"./Elevation-CQxWisSY.js";const k={title:"Components/Card",component:t},c=m=>i(t,{...m,children:[e(a,{css:{mb:"$3"},children:"Card"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),o=c.bind({});o.args={};const r=c.bind({});r.args={variant:"ghost"};const u=c.bind({});u.args={active:!0};const s=c.bind({});s.args={interactive:!0};const l=m=>i(t,{children:[e(a,{css:{mb:"$3"},children:"Wrapping Card"}),e(c,{...m})]});l.args={variant:"inner"};const d=m=>i(I,{css:{gap:"$3"},children:[i(t,{elevation:0,children:[e(a,{css:{mb:"$3"},children:"No Elevation"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),i(t,{children:[e(a,{css:{mb:"$3"},children:"Default Elevation"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),i(t,{elevation:2,children:[e(a,{css:{mb:"$3"},children:"Elevation 2"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),i(t,{elevation:3,children:[e(a,{css:{mb:"$3"},children:"Elevation 3"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),i(t,{elevation:4,children:[e(a,{css:{mb:"$3"},children:"Elevation 4"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]}),i(t,{elevation:5,children:[e(a,{css:{mb:"$3"},children:"Elevation 5"}),e(n,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."})]})]});d.args={};var p,q,v;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`args => +

Card

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + `,...(v=(q=o.parameters)==null?void 0:q.docs)==null?void 0:v.source}}};var g,x,b;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`args => +

Card

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + `,...(b=(x=r.parameters)==null?void 0:x.docs)==null?void 0:b.source}}};var f,h,C;u.parameters={...u.parameters,docs:{...(f=u.parameters)==null?void 0:f.docs,source:{originalSource:`args => +

Card

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + `,...(C=(h=u.parameters)==null?void 0:h.docs)==null?void 0:C.source}}};var E,H,T;s.parameters={...s.parameters,docs:{...(E=s.parameters)==null?void 0:E.docs,source:{originalSource:`args => +

Card

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + `,...(T=(H=s.parameters)==null?void 0:H.docs)==null?void 0:T.source}}};var $,D,L;l.parameters={...l.parameters,docs:{...($=l.parameters)==null?void 0:$.docs,source:{originalSource:`args => +

Wrapping Card

+