diff --git a/assets/Action-BGgU3MW6.js b/assets/Action-BDtQzHLa.js similarity index 74% rename from assets/Action-BGgU3MW6.js rename to assets/Action-BDtQzHLa.js index 0f15e139..bb80aa1f 100644 --- a/assets/Action-BGgU3MW6.js +++ b/assets/Action-BDtQzHLa.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-Cz5oMJIL.js";import{u as b}from"./useId-DIHOOv91.js";import{C as g}from"./index-Dn9bhuYh.js";import{a as y}from"./Tooltip-2883fbVA.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-Cz5oMJIL.js";import{u as b}from"./useId-DIHOOv91.js";import{C as g}from"./index-Dn9bhuYh.js";import{a as y}from"./Tooltip-BAR-jXLn.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:{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 +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 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"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}}}}}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 +https://github.com/rsms/inter/blob/master/src/features/calt.fea`,name:"enableLigatures",required:!1,type:{name:"boolean"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}}}}}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 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"}},actionLabel:{defaultValue:null,description:'The name of the action to perform (e.g. "Copy to clipboard")',name:"actionLabel",required:!0,type:{name:"string"}},onActionClick:{defaultValue:null,description:"On click callback for the icon on the right hand side",name:"onActionClick",required:!0,type:{name:"(e: MouseEvent) => void"}}}}}catch{}export{i as A}; diff --git a/assets/Action.stories-Cg5uTF0D.js b/assets/Action.stories-2yFdYypf.js similarity index 97% rename from assets/Action.stories-Cg5uTF0D.js rename to assets/Action.stories-2yFdYypf.js index 8b682c4b..1a8e0f58 100644 --- a/assets/Action.stories-Cg5uTF0D.js +++ b/assets/Action.stories-2yFdYypf.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-BGgU3MW6.js";import{T as l}from"./Tooltip-2883fbVA.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-Cz5oMJIL.js";import"./index-Dn9bhuYh.js";import"./index-DD7XHAoh.js";import"./index-Dp4tTk3o.js";import"./index-vl_XNHfj.js";import"./index-CkD-EKAR.js";import"./index-Cw6ikIwd.js";import"./useId-DIHOOv91.js";import"./floating-ui.react-KXiqSXy2.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-BDtQzHLa.js";import{T as l}from"./Tooltip-BAR-jXLn.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-Cz5oMJIL.js";import"./index-Dn9bhuYh.js";import"./index-DD7XHAoh.js";import"./index-Dp4tTk3o.js";import"./index-vl_XNHfj.js";import"./index-CkD-EKAR.js";import"./index-Cw6ikIwd.js";import"./useId-DIHOOv91.js";import"./floating-ui.react-KXiqSXy2.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-BFsixLGq.js b/assets/ActionButton.stories-zAWdjOht.js similarity index 98% rename from assets/ActionButton.stories-BFsixLGq.js rename to assets/ActionButton.stories-zAWdjOht.js index 7e384798..001860f8 100644 --- a/assets/ActionButton.stories-BFsixLGq.js +++ b/assets/ActionButton.stories-zAWdjOht.js @@ -1,4 +1,4 @@ -import{j as y}from"./jsx-runtime-CexXSJP5.js";import{f as O}from"./index-BSM_bQPn.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-iukP6Ype.js";import{T as _,a as D}from"./Tooltip-2883fbVA.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"./index-C8k3Z-3Y.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-KXiqSXy2.js";import"./index-Cw6ikIwd.js";const R=({label:h,...v})=>y.jsx(_,{children:y.jsx(D,{label:h,children:y.jsx(L,{iconOnly:!0,...v})})}),me={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}},o={args:{label:"Turn video on",kind:"primary",Icon:x}},s={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-BSM_bQPn.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-DgWOmrd7.js";import{T as _,a as D}from"./Tooltip-BAR-jXLn.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"./index-C8k3Z-3Y.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-KXiqSXy2.js";import"./index-Cw6ikIwd.js";const R=({label:h,...v})=>y.jsx(_,{children:y.jsx(D,{label:h,children:y.jsx(L,{iconOnly:!0,...v})})}),me={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}},o={args:{label:"Turn video on",kind:"primary",Icon:x}},s={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-CF-OqaEv.js b/assets/Alert-DXpvtUxL.js similarity index 92% rename from assets/Alert-CF-OqaEv.js rename to assets/Alert-DXpvtUxL.js index af16af3d..300617b6 100644 --- a/assets/Alert-CF-OqaEv.js +++ b/assets/Alert-DXpvtUxL.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-BgCCN_GG.js";import"./Button-iukP6Ype.js";import{I as g}from"./IconButton-Y-BQAUFS.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-43GasnQW.js";import"./Button-DgWOmrd7.js";import{I as g}from"./IconButton-CUq7vsKn.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-DUG3TM7S.js b/assets/Alert.stories-BFAJifdF.js similarity index 92% rename from assets/Alert.stories-DUG3TM7S.js rename to assets/Alert.stories-BFAJifdF.js index 485048e6..f39aa075 100644 --- a/assets/Alert.stories-DUG3TM7S.js +++ b/assets/Alert.stories-BFAJifdF.js @@ -1,4 +1,4 @@ -import{j as o}from"./jsx-runtime-CexXSJP5.js";import{B as a}from"./Button-iukP6Ype.js";import{A as n}from"./Alert-CF-OqaEv.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-Y-BQAUFS.js";import"./IndicatorIcon-_PMFIuo8.js";import"./Tooltip-2883fbVA.js";import"./floating-ui.react-KXiqSXy2.js";import"./index-Cw6ikIwd.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-DgWOmrd7.js";import{A as n}from"./Alert-DXpvtUxL.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-CUq7vsKn.js";import"./IndicatorIcon-B59qELJf.js";import"./Tooltip-BAR-jXLn.js";import"./floating-ui.react-KXiqSXy2.js";import"./index-Cw6ikIwd.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-DyB-Y6ln.js b/assets/Avatar-OPpxc4CT.js similarity index 84% rename from assets/Avatar-DyB-Y6ln.js rename to assets/Avatar-OPpxc4CT.js index 331e1a7f..b806fb92 100644 --- a/assets/Avatar-DyB-Y6ln.js +++ b/assets/Avatar-OPpxc4CT.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:{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}; +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}; diff --git a/assets/Avatar.stories-5GNcD0iH.js b/assets/Avatar.stories-BVjcXUo5.js similarity index 97% rename from assets/Avatar.stories-5GNcD0iH.js rename to assets/Avatar.stories-BVjcXUo5.js index 5edf0647..31fa1d45 100644 --- a/assets/Avatar.stories-5GNcD0iH.js +++ b/assets/Avatar.stories-BVjcXUo5.js @@ -1,4 +1,4 @@ -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 => <> +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 => <>   diff --git a/assets/AvatarStack-DBPldPV8.js b/assets/AvatarStack-Ba__udwu.js similarity index 97% rename from assets/AvatarStack-DBPldPV8.js rename to assets/AvatarStack-Ba__udwu.js index 2fd589c1..f457e73e 100644 --- a/assets/AvatarStack-DBPldPV8.js +++ b/assets/AvatarStack-Ba__udwu.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-DyB-Y6ln.js";const p=`