diff --git a/assets/Action-CUJ6t2MN.js b/assets/Action-CQbRfPzs.js similarity index 74% rename from assets/Action-CUJ6t2MN.js rename to assets/Action-CQbRfPzs.js index cc7d2000..b870efef 100644 --- a/assets/Action-CUJ6t2MN.js +++ b/assets/Action-CQbRfPzs.js @@ -1,9 +1,9 @@ -import{j as e}from"./jsx-runtime-CexXSJP5.js";import{c as f}from"./index-CSpfAsmC.js";import{r as s}from"./index-BP8_t0zE.js";import{T as h}from"./Text-CbEoPjZC.js";import{u as b}from"./useId-DIHOOv91.js";import{C as g}from"./index-BugjtUKR.js";import{a as y}from"./Tooltip-WN4paGU5.js";const _="_container_1qov4_17",x="_control_1qov4_22",C="_action_1qov4_33",a={container:_,control:x,action:C},i=s.forwardRef(function({Icon:n,className:o,actionLabel:c,onActionClick:u,...p},d){const r=b(),m=f(a.container,o);return e.jsxs("div",{className:m,id:r,children:[e.jsx(h,{ref:d,...p,className:a.control}),e.jsx(y,{label:c,children:e.jsx("button",{type:"button",className:a.action,onClick:u,"aria-controls":r,children:e.jsx(n,{"aria-hidden":!0})})})]})}),l=s.forwardRef(function(n,o){return e.jsx(g,{asChild:!0,children:e.jsx(i,{ref:o,...n})})});try{i.displayName="ActionInput",i.__docgenInfo={description:`A generic input with an action icon on the right hand side. +import{j as e}from"./jsx-runtime-CexXSJP5.js";import{c as f}from"./index-CSpfAsmC.js";import{r as s}from"./index-BP8_t0zE.js";import{T as h}from"./Text-CbEoPjZC.js";import{u as b}from"./useId-DIHOOv91.js";import{C as g}from"./index-BugjtUKR.js";import{a as y}from"./Tooltip-womRVnul.js";const _="_container_1qov4_17",x="_control_1qov4_22",C="_action_1qov4_33",a={container:_,control:x,action:C},i=s.forwardRef(function({Icon:n,className:o,actionLabel:c,onActionClick:u,...p},d){const r=b(),m=f(a.container,o);return e.jsxs("div",{className:m,id:r,children:[e.jsx(h,{ref:d,...p,className:a.control}),e.jsx(y,{label:c,children:e.jsx("button",{type:"button",className:a.action,onClick:u,"aria-controls":r,children:e.jsx(n,{"aria-hidden":!0})})})]})}),l=s.forwardRef(function(n,o){return e.jsx(g,{asChild:!0,children:e.jsx(i,{ref:o,...n})})});try{i.displayName="ActionInput",i.__docgenInfo={description:`A generic input with an action icon on the right hand side. You should rarely use it directly, -but it is powering the likes of "copy to clipboard input", "password reveal", ...`,displayName:"ActionInput",props:{Icon:{defaultValue:null,description:"The React component to display on the right hand side of the icon.",name:"Icon",required:!0,type:{name:"FunctionComponent>"}},className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},enableLigatures:{defaultValue:null,description:`Enable contextual alternate ligatures on input text +but it is powering the likes of "copy to clipboard input", "password reveal", ...`,displayName:"ActionInput",props:{className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},Icon:{defaultValue:null,description:"The React component to display on the right hand side of the icon.",name:"Icon",required:!0,type:{name:"FunctionComponent>"}},enableLigatures:{defaultValue:null,description:`Enable contextual alternate ligatures on input text For example on an in-place editing field https://github.com/rsms/inter/issues/222 -https://github.com/rsms/inter/blob/master/src/features/calt.fea`,name:"enableLigatures",required:!1,type:{name:"boolean"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}}}}}catch{}try{l.displayName="ActionControl",l.__docgenInfo={description:"A styled text input wrapped in a `Control` component, for use in Radix forms.",displayName:"ActionControl",props:{Icon:{defaultValue:null,description:"The React component to display on the right hand side of the icon.",name:"Icon",required:!0,type:{name:"FunctionComponent>"}},className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},enableLigatures:{defaultValue:null,description:`Enable contextual alternate ligatures on input text +https://github.com/rsms/inter/blob/master/src/features/calt.fea`,name:"enableLigatures",required:!1,type:{name:"boolean"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}}}}}catch{}try{l.displayName="ActionControl",l.__docgenInfo={description:"A styled text input wrapped in a `Control` component, for use in Radix forms.",displayName:"ActionControl",props:{className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},Icon:{defaultValue:null,description:"The React component to display on the right hand side of the icon.",name:"Icon",required:!0,type:{name:"FunctionComponent>"}},enableLigatures:{defaultValue:null,description:`Enable contextual alternate ligatures on input text For example on an in-place editing field https://github.com/rsms/inter/issues/222 https://github.com/rsms/inter/blob/master/src/features/calt.fea`,name:"enableLigatures",required:!1,type:{name:"boolean"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}}}}}catch{}export{i as A}; diff --git a/assets/Action.stories-DW_rXh_d.js b/assets/Action.stories-CQseSQfa.js similarity index 97% rename from assets/Action.stories-DW_rXh_d.js rename to assets/Action.stories-CQseSQfa.js index 26b20e57..463ddb56 100644 --- a/assets/Action.stories-DW_rXh_d.js +++ b/assets/Action.stories-CQseSQfa.js @@ -1,4 +1,4 @@ -import{j as s}from"./jsx-runtime-CexXSJP5.js";import{i}from"./index-DVRl1JhA.js";import{A as p}from"./Action-CUJ6t2MN.js";import{T as l}from"./Tooltip-WN4paGU5.js";import{C as c}from"./check-Bjchr0Ec.js";import"./index-BP8_t0zE.js";import"./notifications-MBLL4uPX.js";import"./extensions-NPI-SMnu.js";import"./search-BC9ffyhQ.js";import"./close-D4bMmhFz.js";import"./chevron-down-Ua1BCmcD.js";import"./chevron-right-DF47_mtr.js";import"./error-Dmbc84hO.js";import"./settings-DxGsE2C2.js";import"./spinner-DszwWdC7.js";import"./threads-BMeJ5mkW.js";import"./user-profile-EvkA4CON.js";import"./visibility-on-D1sVPsTi.js";import"./warning-B4ZpXzLn.js";import"./index-CSpfAsmC.js";import"./Text-CbEoPjZC.js";import"./index-BugjtUKR.js";import"./index-DD7XHAoh.js";import"./index-Dp4tTk3o.js";import"./index-CcH3h_90.js";import"./index-BjHk5heU.js";import"./index-BlTQwN6S.js";import"./useId-DIHOOv91.js";import"./floating-ui.react-CWvUcNvr.js";const P={title:"Form/Controls/Action",component:p,tags:["autodocs"],parameters:{controls:{include:["onActionClick","defaultValue","placeholder","disabled","autoFocus","readOnly","invalid","actionLabel","Icon"]}},argTypes:{onActionClick:{action:"clicked"},defaultValue:{type:"string"},placeholder:{type:"string"},disabled:{type:"boolean"},autoFocus:{type:"boolean"},readOnly:{type:"boolean"},invalid:{type:"boolean"},actionLabel:{type:"string"},Icon:{options:Object.keys(i),mapping:i,defaultValue:"check",control:{type:"select"}}},render:({invalid:d,...m})=>s.jsx(l,{children:s.jsx(p,{"data-invalid":d||void 0,...m})}),args:{placeholder:"",autoFocus:!1,disabled:!1,readOnly:!1,invalid:!1,actionLabel:"Action",Icon:c}},e={parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4477"}}},o={args:{defaultValue:"Filled"},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4536"}}},a={args:{defaultValue:"Disabled",disabled:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4530"}}},n={args:{defaultValue:"Read only",readOnly:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2126-21984"}}},r={args:{autoFocus:!0}},t={args:{defaultValue:"Invalid",invalid:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4514"}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ +import{j as s}from"./jsx-runtime-CexXSJP5.js";import{i}from"./index-DVRl1JhA.js";import{A as p}from"./Action-CQbRfPzs.js";import{T as l}from"./Tooltip-womRVnul.js";import{C as c}from"./check-Bjchr0Ec.js";import"./index-BP8_t0zE.js";import"./notifications-MBLL4uPX.js";import"./extensions-NPI-SMnu.js";import"./search-BC9ffyhQ.js";import"./close-D4bMmhFz.js";import"./chevron-down-Ua1BCmcD.js";import"./chevron-right-DF47_mtr.js";import"./error-Dmbc84hO.js";import"./settings-DxGsE2C2.js";import"./spinner-DszwWdC7.js";import"./threads-BMeJ5mkW.js";import"./user-profile-EvkA4CON.js";import"./visibility-on-D1sVPsTi.js";import"./warning-B4ZpXzLn.js";import"./index-CSpfAsmC.js";import"./Text-CbEoPjZC.js";import"./index-BugjtUKR.js";import"./index-DD7XHAoh.js";import"./index-Dp4tTk3o.js";import"./index-CcH3h_90.js";import"./index-BjHk5heU.js";import"./index-BlTQwN6S.js";import"./useId-DIHOOv91.js";import"./floating-ui.react-CWvUcNvr.js";const P={title:"Form/Controls/Action",component:p,tags:["autodocs"],parameters:{controls:{include:["onActionClick","defaultValue","placeholder","disabled","autoFocus","readOnly","invalid","actionLabel","Icon"]}},argTypes:{onActionClick:{action:"clicked"},defaultValue:{type:"string"},placeholder:{type:"string"},disabled:{type:"boolean"},autoFocus:{type:"boolean"},readOnly:{type:"boolean"},invalid:{type:"boolean"},actionLabel:{type:"string"},Icon:{options:Object.keys(i),mapping:i,defaultValue:"check",control:{type:"select"}}},render:({invalid:d,...m})=>s.jsx(l,{children:s.jsx(p,{"data-invalid":d||void 0,...m})}),args:{placeholder:"",autoFocus:!1,disabled:!1,readOnly:!1,invalid:!1,actionLabel:"Action",Icon:c}},e={parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4477"}}},o={args:{defaultValue:"Filled"},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4536"}}},a={args:{defaultValue:"Disabled",disabled:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4530"}}},n={args:{defaultValue:"Read only",readOnly:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2126-21984"}}},r={args:{autoFocus:!0}},t={args:{defaultValue:"Invalid",invalid:!0},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=793-4514"}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ parameters: { design: { type: "figma", diff --git a/assets/ActionButton.stories-DobOdmj1.js b/assets/ActionButton.stories-B1qPgtU8.js similarity index 99% rename from assets/ActionButton.stories-DobOdmj1.js rename to assets/ActionButton.stories-B1qPgtU8.js index 83db2640..38a120cc 100644 --- a/assets/ActionButton.stories-DobOdmj1.js +++ b/assets/ActionButton.stories-B1qPgtU8.js @@ -1,4 +1,4 @@ -import{j as y}from"./jsx-runtime-CexXSJP5.js";import{f as O}from"./index-ozRUDpri.js";import{i as b,s as z,l as E,v as T,a as x,m as j,b as M,c as k,e as V,d as A,u as B,f as F}from"./index-DVRl1JhA.js";import{B as L}from"./Button-C0_Ps78g.js";import{T as _,a as D}from"./Tooltip-WN4paGU5.js";import{S as P}from"./search-BC9ffyhQ.js";import{C as f}from"./check-Bjchr0Ec.js";import{C}from"./close-D4bMmhFz.js";import"./index-BP8_t0zE.js";import"./notifications-MBLL4uPX.js";import"./extensions-NPI-SMnu.js";import"./chevron-down-Ua1BCmcD.js";import"./chevron-right-DF47_mtr.js";import"./error-Dmbc84hO.js";import"./settings-DxGsE2C2.js";import"./spinner-DszwWdC7.js";import"./threads-BMeJ5mkW.js";import"./user-profile-EvkA4CON.js";import"./visibility-on-D1sVPsTi.js";import"./warning-B4ZpXzLn.js";import"./index-CSpfAsmC.js";import"./UnstyledButton-C9fNLva5.js";import"./floating-ui.react-CWvUcNvr.js";import"./index-BlTQwN6S.js";const R=({label:h,...v})=>y.jsx(_,{children:y.jsx(D,{label:h,children:y.jsx(L,{iconOnly:!0,...v})})}),de={title:"Button/Actions",component:R,tags:["autodocs"],argTypes:{label:{type:"string"},size:{options:["sm","lg"],control:{type:"inline-radio"}},kind:{options:["primary","secondary","tertiary"],control:{type:"inline-radio"}},destructive:{type:"boolean"},disabled:{type:"boolean"},as:{options:["a","button"],control:{type:"inline-radio"}},Icon:{options:Object.keys(b),mapping:b,control:{type:"select"}},onClick:{action:"onClick"}},args:{label:"Action",size:"lg",as:"button",destructive:!1,disabled:!1,onClick:O()},controls:{exclude:["children"]}},e={args:{label:"Settings",kind:"secondary",Icon:z}},r={args:{label:"Copy link",kind:"secondary",Icon:E}},n={args:{label:"Turn video off",kind:"secondary",Icon:T}},s={args:{label:"Turn video on",kind:"primary",Icon:x}},o={args:{label:"Turn mic off",kind:"secondary",Icon:j}},a={args:{label:"Turn mic on",kind:"primary",Icon:M}},c={args:{label:"Share screen",kind:"secondary",Icon:k}},i={args:{label:"Stop sharing screen",kind:"primary",Icon:k}},t={args:{label:"Full screen",kind:"secondary",Icon:V}},l={args:{label:"End call",kind:"primary",destructive:!0,Icon:A}},d={args:{label:"Invite",kind:"primary",size:"sm",Icon:B}},m={args:{label:"Edit",kind:"primary",size:"sm",Icon:F}},p={args:{label:"Search",kind:"secondary",size:"sm",Icon:P}},u={args:{label:"Save",kind:"primary",size:"sm",Icon:f}},S={args:{label:"Save",kind:"primary",size:"sm",Icon:f,disabled:!0}},g={args:{label:"Cancel",kind:"secondary",size:"sm",Icon:C}},I={args:{label:"Close",kind:"secondary",size:"sm",Icon:C}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ +import{j as y}from"./jsx-runtime-CexXSJP5.js";import{f as O}from"./index-ozRUDpri.js";import{i as b,s as z,l as E,v as T,a as x,m as j,b as M,c as k,e as V,d as A,u as B,f as F}from"./index-DVRl1JhA.js";import{B as L}from"./Button-C0_Ps78g.js";import{T as _,a as D}from"./Tooltip-womRVnul.js";import{S as P}from"./search-BC9ffyhQ.js";import{C as f}from"./check-Bjchr0Ec.js";import{C}from"./close-D4bMmhFz.js";import"./index-BP8_t0zE.js";import"./notifications-MBLL4uPX.js";import"./extensions-NPI-SMnu.js";import"./chevron-down-Ua1BCmcD.js";import"./chevron-right-DF47_mtr.js";import"./error-Dmbc84hO.js";import"./settings-DxGsE2C2.js";import"./spinner-DszwWdC7.js";import"./threads-BMeJ5mkW.js";import"./user-profile-EvkA4CON.js";import"./visibility-on-D1sVPsTi.js";import"./warning-B4ZpXzLn.js";import"./index-CSpfAsmC.js";import"./UnstyledButton-C9fNLva5.js";import"./floating-ui.react-CWvUcNvr.js";import"./index-BlTQwN6S.js";const R=({label:h,...v})=>y.jsx(_,{children:y.jsx(D,{label:h,children:y.jsx(L,{iconOnly:!0,...v})})}),de={title:"Button/Actions",component:R,tags:["autodocs"],argTypes:{label:{type:"string"},size:{options:["sm","lg"],control:{type:"inline-radio"}},kind:{options:["primary","secondary","tertiary"],control:{type:"inline-radio"}},destructive:{type:"boolean"},disabled:{type:"boolean"},as:{options:["a","button"],control:{type:"inline-radio"}},Icon:{options:Object.keys(b),mapping:b,control:{type:"select"}},onClick:{action:"onClick"}},args:{label:"Action",size:"lg",as:"button",destructive:!1,disabled:!1,onClick:O()},controls:{exclude:["children"]}},e={args:{label:"Settings",kind:"secondary",Icon:z}},r={args:{label:"Copy link",kind:"secondary",Icon:E}},n={args:{label:"Turn video off",kind:"secondary",Icon:T}},s={args:{label:"Turn video on",kind:"primary",Icon:x}},o={args:{label:"Turn mic off",kind:"secondary",Icon:j}},a={args:{label:"Turn mic on",kind:"primary",Icon:M}},c={args:{label:"Share screen",kind:"secondary",Icon:k}},i={args:{label:"Stop sharing screen",kind:"primary",Icon:k}},t={args:{label:"Full screen",kind:"secondary",Icon:V}},l={args:{label:"End call",kind:"primary",destructive:!0,Icon:A}},d={args:{label:"Invite",kind:"primary",size:"sm",Icon:B}},m={args:{label:"Edit",kind:"primary",size:"sm",Icon:F}},p={args:{label:"Search",kind:"secondary",size:"sm",Icon:P}},u={args:{label:"Save",kind:"primary",size:"sm",Icon:f}},S={args:{label:"Save",kind:"primary",size:"sm",Icon:f,disabled:!0}},g={args:{label:"Cancel",kind:"secondary",size:"sm",Icon:C}},I={args:{label:"Close",kind:"secondary",size:"sm",Icon:C}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ args: { label: "Settings", kind: "secondary", diff --git a/assets/Alert-MLodzOUA.js b/assets/Alert-ClH3E2JC.js similarity index 94% rename from assets/Alert-MLodzOUA.js rename to assets/Alert-ClH3E2JC.js index 9b222374..039bca53 100644 --- a/assets/Alert-MLodzOUA.js +++ b/assets/Alert-ClH3E2JC.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-CexXSJP5.js";import{c as h}from"./index-CSpfAsmC.js";import{r as _}from"./index-BP8_t0zE.js";import{a as f,I as x,C as y}from"./close-D4bMmhFz.js";import{E as b}from"./error-Dmbc84hO.js";import{T as i}from"./Text-43GasnQW.js";import"./Button-C0_Ps78g.js";import{I as g}from"./IconButton-C9ac23w1.js";const j="_alert_1bz08_19",v="_content_1bz08_46",C="_title_1bz08_57",N="_icon_1bz08_57",I="_actions_1bz08_73",t={alert:j,content:v,"text-content":"_text-content_1bz08_53",title:C,icon:N,actions:I},r=({type:n,title:l,children:c,className:m,actions:a,onClose:o,...d})=>{const u=h(t.alert,m),p=_.useCallback(s=>{switch(n){case"critical":return e.jsx(b,{...s});case"info":return e.jsx(x,{...s});case"success":return e.jsx(f,{...s})}},[n]);return e.jsxs("div",{...d,className:u,"data-type":n,children:[p({width:24,height:24,className:t.icon,"aria-hidden":!0}),e.jsxs("div",{className:t.content,children:[e.jsxs("div",{className:t["text-content"],children:[e.jsx(i,{size:"md",weight:"semibold",children:l}),e.jsx(i,{size:"sm",weight:"regular",children:c})]}),a&&e.jsx("div",{className:t.actions,children:a})]}),o&&e.jsx(g,{onClick:o,"aria-label":"Close",role:"button",className:t.close,children:e.jsx(y,{})})]})};try{r.displayName="Alert",r.__docgenInfo={description:"An alert component component that is dismissable when passing an `onClose`\nproperty.",displayName:"Alert",props:{type:{defaultValue:null,description:"The type of alert",name:"type",required:!0,type:{name:"enum",value:[{value:'"success"'},{value:'"critical"'},{value:'"info"'}]}},title:{defaultValue:null,description:"The headline of the alert.",name:"title",required:!0,type:{name:"string"}},className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},actions:{defaultValue:null,description:`Actions that will be displayed to the right of the content +import{j as e}from"./jsx-runtime-CexXSJP5.js";import{c as h}from"./index-CSpfAsmC.js";import{r as _}from"./index-BP8_t0zE.js";import{a as f,I as x,C as y}from"./close-D4bMmhFz.js";import{E as b}from"./error-Dmbc84hO.js";import{T as i}from"./Text-BgCCN_GG.js";import"./Button-C0_Ps78g.js";import{I as g}from"./IconButton-Ccv5Unpx.js";const j="_alert_1bz08_19",v="_content_1bz08_46",C="_title_1bz08_57",N="_icon_1bz08_57",I="_actions_1bz08_73",t={alert:j,content:v,"text-content":"_text-content_1bz08_53",title:C,icon:N,actions:I},r=({type:n,title:l,children:c,className:m,actions:a,onClose:o,...d})=>{const u=h(t.alert,m),p=_.useCallback(s=>{switch(n){case"critical":return e.jsx(b,{...s});case"info":return e.jsx(x,{...s});case"success":return e.jsx(f,{...s})}},[n]);return e.jsxs("div",{...d,className:u,"data-type":n,children:[p({width:24,height:24,className:t.icon,"aria-hidden":!0}),e.jsxs("div",{className:t.content,children:[e.jsxs("div",{className:t["text-content"],children:[e.jsx(i,{size:"md",weight:"semibold",children:l}),e.jsx(i,{size:"sm",weight:"regular",children:c})]}),a&&e.jsx("div",{className:t.actions,children:a})]}),o&&e.jsx(g,{onClick:o,"aria-label":"Close",role:"button",className:t.close,children:e.jsx(y,{})})]})};try{r.displayName="Alert",r.__docgenInfo={description:"An alert component component that is dismissable when passing an `onClose`\nproperty.",displayName:"Alert",props:{type:{defaultValue:null,description:"The type of alert",name:"type",required:!0,type:{name:"enum",value:[{value:'"success"'},{value:'"critical"'},{value:'"info"'}]}},title:{defaultValue:null,description:"The headline of the alert.",name:"title",required:!0,type:{name:"string"}},className:{defaultValue:null,description:"The CSS class name.",name:"className",required:!1,type:{name:"string"}},actions:{defaultValue:null,description:`Actions that will be displayed to the right of the content Wraps and stacks actions under content when alert's size is <=600px eg \`\`\` diff --git a/assets/Alert.stories-wkv0S3EY.js b/assets/Alert.stories-LJ9BoOdE.js similarity index 92% rename from assets/Alert.stories-wkv0S3EY.js rename to assets/Alert.stories-LJ9BoOdE.js index ac27ddcb..161258be 100644 --- a/assets/Alert.stories-wkv0S3EY.js +++ b/assets/Alert.stories-LJ9BoOdE.js @@ -1,4 +1,4 @@ -import{j as o}from"./jsx-runtime-CexXSJP5.js";import{B as a}from"./Button-C0_Ps78g.js";import{A as n}from"./Alert-MLodzOUA.js";import"./index-BP8_t0zE.js";import"./index-CSpfAsmC.js";import"./UnstyledButton-C9fNLva5.js";import"./close-D4bMmhFz.js";import"./error-Dmbc84hO.js";import"./Text-43GasnQW.js";import"./Typography-BWOtt-hZ.js";import"./IconButton-C9ac23w1.js";import"./IndicatorIcon-B59qELJf.js";import"./Tooltip-WN4paGU5.js";import"./floating-ui.react-CWvUcNvr.js";import"./index-BlTQwN6S.js";const v={title:"Alert",component:n,tags:["autodocs"],argTypes:{type:{options:["success","critical","info"],control:{type:"inline-radio"}}},args:{title:"Title",children:"Description",onClose:()=>{console.log("Clicked!")}},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=795-7802&mode=design&t=g71gv6nZdJA7QSGB-0"}}},e={args:{type:"success"}},t={args:{type:"critical"}},i={args:{type:"info"}},s={args:{type:"info",title:"Long title. 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.",children:"Actions are vertically centered against alert content. 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.",actions:o.jsxs(o.Fragment,{children:[o.jsx(a,{children:"Yes"}),o.jsx(a,{children:"No"})]})}},r={...e,args:{...e.args,onClose:void 0}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ +import{j as o}from"./jsx-runtime-CexXSJP5.js";import{B as a}from"./Button-C0_Ps78g.js";import{A as n}from"./Alert-ClH3E2JC.js";import"./index-BP8_t0zE.js";import"./index-CSpfAsmC.js";import"./UnstyledButton-C9fNLva5.js";import"./close-D4bMmhFz.js";import"./error-Dmbc84hO.js";import"./Text-BgCCN_GG.js";import"./Typography-DuHxGDyc.js";import"./IconButton-Ccv5Unpx.js";import"./IndicatorIcon-_PMFIuo8.js";import"./Tooltip-womRVnul.js";import"./floating-ui.react-CWvUcNvr.js";import"./index-BlTQwN6S.js";const v={title:"Alert",component:n,tags:["autodocs"],argTypes:{type:{options:["success","critical","info"],control:{type:"inline-radio"}}},args:{title:"Title",children:"Description",onClose:()=>{console.log("Clicked!")}},parameters:{design:{type:"figma",url:"https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=795-7802&mode=design&t=g71gv6nZdJA7QSGB-0"}}},e={args:{type:"success"}},t={args:{type:"critical"}},i={args:{type:"info"}},s={args:{type:"info",title:"Long title. 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.",children:"Actions are vertically centered against alert content. 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.",actions:o.jsxs(o.Fragment,{children:[o.jsx(a,{children:"Yes"}),o.jsx(a,{children:"No"})]})}},r={...e,args:{...e.args,onClose:void 0}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{ args: { type: "success" } diff --git a/assets/Avatar-OPpxc4CT.js b/assets/Avatar-DyB-Y6ln.js similarity index 84% rename from assets/Avatar-OPpxc4CT.js rename to assets/Avatar-DyB-Y6ln.js index b806fb92..331e1a7f 100644 --- a/assets/Avatar-OPpxc4CT.js +++ b/assets/Avatar-DyB-Y6ln.js @@ -1,2 +1,2 @@ import{j as m}from"./jsx-runtime-CexXSJP5.js";import{c as d}from"./index-CSpfAsmC.js";import{r as f,a as u}from"./index-BP8_t0zE.js";const v="@",h="#",y="+",A=new Intl.Segmenter;function I(a){if(a.length<1)return"";const e=a[0];[v,h,y].includes(e)&&(a=a.substring(1));const t=A.segment(a)[Symbol.iterator]().next();return t.done?"":t.value.segment}const M="_avatar_mcap2_17",R="_image_mcap2_50",o={avatar:M,image:R,"avatar-imageless":"_avatar-imageless_mcap2_61","stacked-avatars":"_stacked-avatars_mcap2_111","clip-path":"_clip-path_mcap2_130"};function S(a){return a.split("").reduce((r,n)=>r+n.charCodeAt(0),0)%6+1}function x(a){return!!(a.onClick||a.onKeyDown||a.onKeyUp)}const p=f.forwardRef(function({src:e,id:t,name:i="",type:r="round",className:n="",size:s,style:c={},onError:_,...l},g){return u.createElement(x(l)?"button":"span",{ref:g,role:"img","aria-label":t,...l,"data-type":r,"data-color":S(t),className:d(o.avatar,n,{[o["avatar-imageless"]]:!e}),style:{...c,"--cpd-avatar-size":s}},m.jsx(u.Fragment,{children:e?m.jsx("img",{loading:"lazy",alt:"",src:e,referrerPolicy:"no-referrer",className:d(o.image),"data-type":r,style:c,width:s,height:s,onError:_}):I(i)}))});try{p.displayName="Avatar",p.__docgenInfo={description:`Avatar component that will fallback to an initial letter over a coloured -background if no source is provided or if the source has failed to load.`,displayName:"Avatar",props:{size:{defaultValue:null,description:'The avatar size in CSS units, e.g. `"24px"`.',name:"size",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"The avatar image URL, if any.",name:"src",required:!1,type:{name:"string"}}}}}catch{}export{p as A,o as s}; +background if no source is provided or if the source has failed to load.`,displayName:"Avatar",props:{src:{defaultValue:null,description:"The avatar image URL, if any.",name:"src",required:!1,type:{name:"string"}},size:{defaultValue:null,description:'The avatar size in CSS units, e.g. `"24px"`.',name:"size",required:!1,type:{name:"string"}}}}}catch{}export{p as A,o as s}; diff --git a/assets/Avatar.stories-BVjcXUo5.js b/assets/Avatar.stories-5GNcD0iH.js similarity index 97% rename from assets/Avatar.stories-BVjcXUo5.js rename to assets/Avatar.stories-5GNcD0iH.js index 31fa1d45..5edf0647 100644 --- a/assets/Avatar.stories-BVjcXUo5.js +++ b/assets/Avatar.stories-5GNcD0iH.js @@ -1,4 +1,4 @@ -import{j as a}from"./jsx-runtime-CexXSJP5.js";import{A as s}from"./Avatar-OPpxc4CT.js";import"./index-BP8_t0zE.js";import"./index-CSpfAsmC.js";const b={title:"Avatar",component:s,tags:["autodocs"],argTypes:{},args:{name:"Bob",size:"64px",id:"@bob:example.org",src:"/images/__test__/kitten.jpg",type:"round"}},m=r=>a.jsx(s,{...r}),e=m.bind({});e.args={type:"round"};const o=m.bind({});o.args={type:"square"};const t=m.bind({});t.args={type:"round",onClick:()=>console.log("clicked!")};const n=m.bind({});n.args={src:""};const c=m.bind({});c.args={src:"",size:"128px"};const d=r=>a.jsxs(a.Fragment,{children:[a.jsx(s,{...r,id:"1"})," ",a.jsx(s,{...r,id:"2"})," ",a.jsx(s,{...r,id:"3"})," ",a.jsx(s,{...r,id:"4"})," ",a.jsx(s,{...r,id:"5"})," ",a.jsx(s,{...r,id:"6"})," "]}),p=d.bind({});p.args={src:"",size:"36px"};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"args => ",...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:"args => ",...o.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:"args => ",...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:"args => ",...n.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:"args => ",...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`args => <> +import{j as a}from"./jsx-runtime-CexXSJP5.js";import{A as s}from"./Avatar-DyB-Y6ln.js";import"./index-BP8_t0zE.js";import"./index-CSpfAsmC.js";const b={title:"Avatar",component:s,tags:["autodocs"],argTypes:{},args:{name:"Bob",size:"64px",id:"@bob:example.org",src:"/images/__test__/kitten.jpg",type:"round"}},m=r=>a.jsx(s,{...r}),e=m.bind({});e.args={type:"round"};const o=m.bind({});o.args={type:"square"};const t=m.bind({});t.args={type:"round",onClick:()=>console.log("clicked!")};const n=m.bind({});n.args={src:""};const c=m.bind({});c.args={src:"",size:"128px"};const d=r=>a.jsxs(a.Fragment,{children:[a.jsx(s,{...r,id:"1"})," ",a.jsx(s,{...r,id:"2"})," ",a.jsx(s,{...r,id:"3"})," ",a.jsx(s,{...r,id:"4"})," ",a.jsx(s,{...r,id:"5"})," ",a.jsx(s,{...r,id:"6"})," "]}),p=d.bind({});p.args={src:"",size:"36px"};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"args => ",...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:"args => ",...o.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:"args => ",...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:"args => ",...n.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:"args => ",...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`args => <>   diff --git a/assets/AvatarStack-Ba__udwu.js b/assets/AvatarStack-DBPldPV8.js similarity index 97% rename from assets/AvatarStack-Ba__udwu.js rename to assets/AvatarStack-DBPldPV8.js index f457e73e..2fd589c1 100644 --- a/assets/AvatarStack-Ba__udwu.js +++ b/assets/AvatarStack-DBPldPV8.js @@ -1,4 +1,4 @@ -import{j as o}from"./jsx-runtime-CexXSJP5.js";import{c}from"./index-CSpfAsmC.js";import{r as d}from"./index-BP8_t0zE.js";import{s as n}from"./Avatar-OPpxc4CT.js";const p=`