@oliasoft-open-source/react-ui-library 4.0.0-beta-59 → 4.0.0-beta-61

package/dist/storybook/assets/{toggle-d9a0cd27.css → toggle-239108ba.css}

@@ -1 +1 @@
-:root{--color-background-toggle: rgba(0, 0, 0, .2);--color-background-toggle-hover: rgba(0, 0, 0, .25)}[data-theme=dark]{--color-background-toggle: rgba(255, 255, 255, .2);--color-background-toggle-hover: rgba(255, 255, 255, .3)}._toggle_6nx51_9{--size-toggle: var(--size-xs);position:relative;display:inline-flex;align-items:center;gap:var(--padding-xxs);backface-visibility:hidden;outline:0;vertical-align:baseline;font-style:normal;min-height:var(--size-toggle);font-size:inherit;line-height:var(--size-toggle);min-width:var(--size-toggle);margin:calc((var(--size) - var(--size-toggle)) / 2) 0}._toggle_6nx51_9._small_6nx51_25{--size-toggle: calc(var(--size-xs) - 4px);margin:calc((var(--size-sm) - var(--size-toggle)) / 2) 0;font-size:var(--font-size-sm)}._toggle_6nx51_9 input{width:calc(var(--size-toggle) * 2);height:var(--size-toggle);cursor:pointer;position:absolute;top:0;left:0;opacity:0!important;outline:0;z-index:3;box-sizing:border-box;padding:0;overflow:visible;font-family:sans-serif;margin:0}._toggle_6nx51_9 label{min-height:var(--size-toggle);padding-left:calc((var(--size-toggle) * 2) + var(--padding-xs));transition:color .1s ease;cursor:auto;position:relative;display:block;outline:0}._toggle_6nx51_9 label:empty{padding-left:calc(var(--size-toggle) * 2)}._toggle_6nx51_9 label:before,._toggle_6nx51_9 label:after{display:block;position:absolute;content:""}._toggle_6nx51_9 label:before{height:var(--size-toggle);border-radius:calc(var(--size-toggle) / 2);z-index:1;transform:none;background:var(--color-background-toggle);box-shadow:none;width:calc(var(--size-toggle) * 2);left:0;top:0;transition:background .3s ease,border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease}._toggle_6nx51_9 label:after{height:calc(var(--size-toggle) - 4px);width:calc(var(--size-toggle) - 4px);border-radius:50%;left:2px;top:50%;transform:translateY(-50%);box-shadow:var(--shadow-button);background:white;opacity:1;z-index:2;transition:background .3s ease,left .3s ease}._toggle_6nx51_9 input:hover~label:before{background:var(--color-background-toggle-hover)}._toggle_6nx51_9 input:checked~label:before{background-color:var(--color-background-button-primary)}._toggle_6nx51_9 input:checked~label:after{left:calc(var(--size-toggle) + 2px)}._toggle_6nx51_9 input:checked:hover~label:before{background-color:var(--color-background-button-primary-hover)}._toggle_6nx51_9._disabled_6nx51_101{cursor:default;pointer-events:none;color:var(--color-text-faint)}._toggle_6nx51_9._disabled_6nx51_101 label:before{background-color:var(--color-background-disabled)}._toggle_6nx51_9._disabled_6nx51_101 label:after{opacity:.4}._noMargin_6nx51_112{margin:0}
+:root{--color-background-toggle: rgba(0, 0, 0, .2);--color-background-toggle-hover: rgba(0, 0, 0, .25)}[data-theme=dark]{--color-background-toggle: rgba(255, 255, 255, .2);--color-background-toggle-hover: rgba(255, 255, 255, .3)}._toggle_3ujcm_9{--size-toggle: var(--size-xs);position:relative;display:inline-flex;align-items:center;gap:var(--padding-xxs);backface-visibility:hidden;outline:0;vertical-align:baseline;font-style:normal;min-height:var(--size-toggle);font-size:inherit;line-height:var(--size-toggle);min-width:var(--size-toggle);margin:calc((var(--size) - var(--size-toggle)) / 2) 0}._toggle_3ujcm_9._small_3ujcm_25{--size-toggle: calc(var(--size-xs) - 4px);margin:calc((var(--size-sm) - var(--size-toggle)) / 2) 0;font-size:var(--font-size-sm)}._toggle_3ujcm_9 input{width:calc(var(--size-toggle) * 2);height:var(--size-toggle);cursor:pointer;position:absolute;top:0;left:0;opacity:0!important;outline:0;z-index:3;box-sizing:border-box;padding:0;overflow:visible;font-family:sans-serif;margin:0}._toggle_3ujcm_9 label{min-height:var(--size-toggle);padding-left:calc((var(--size-toggle) * 2) + var(--padding-xs));transition:color .1s ease;cursor:auto;position:relative;display:block;outline:0}._toggle_3ujcm_9 label:empty{padding-left:calc(var(--size-toggle) * 2)}._toggle_3ujcm_9 label:before,._toggle_3ujcm_9 label:after{display:block;position:absolute;content:""}._toggle_3ujcm_9 label:before{height:var(--size-toggle);border-radius:calc(var(--size-toggle) / 2);z-index:1;transform:none;background:var(--color-background-toggle);box-shadow:none;width:calc(var(--size-toggle) * 2);left:0;top:0;transition:background .3s ease,border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease}._toggle_3ujcm_9 label:after{height:calc(var(--size-toggle) - 4px);width:calc(var(--size-toggle) - 4px);border-radius:50%;left:2px;top:50%;transform:translateY(-50%);box-shadow:var(--shadow-button);background:white;opacity:1;z-index:2;transition:background .3s ease,left .3s ease}._toggle_3ujcm_9 input:hover~label:before{background:var(--color-background-toggle-hover)}._toggle_3ujcm_9 input:checked~label:before{background-color:var(--color-background-button-primary)}._toggle_3ujcm_9 input:checked~label:after{left:calc(var(--size-toggle) + 2px)}._toggle_3ujcm_9 input:checked:hover~label:before{background-color:var(--color-background-button-primary-hover)}._toggle_3ujcm_9._disabled_3ujcm_101{cursor:default;pointer-events:none;color:var(--color-text-faint)}._toggle_3ujcm_9._disabled_3ujcm_101 label:before{background-color:var(--color-background-disabled)}._toggle_3ujcm_9._disabled_3ujcm_101 label:after{opacity:.4}._noMargin_3ujcm_112{margin:0}._helpIconEnabled_3ujcm_115{pointer-events:auto}

package/dist/storybook/assets/toggle-de8e437a.js

@@ -0,0 +1 @@
+import{j as l}from"./jsx-runtime-f961835c.js";import{r as b}from"./index-f80c8c95.js";import{c as y}from"./index-a80ed1cf.js";import{b as x}from"./common-types-2c81813f.js";import{D as C}from"./disabled-context-d654f6ff.js";import{H as j}from"./help-icon-5be78589.js";const E="_toggle_3ujcm_9",h="_small_3ujcm_25",q="_disabled_3ujcm_101",I="_noMargin_3ujcm_112",V="_helpIconEnabled_3ujcm_115",a={toggle:E,small:h,disabled:q,noMargin:I,helpIconEnabled:V},i=({name:t,label:d,checked:e=!1,disabled:u,small:m=!1,onChange:p,noMargin:c=!1,testId:g,helpText:o,onClickHelp:r})=>{const f=b.useContext(C),_=o||r,s=u||f;return l.jsxs("div",{className:y(a.toggle,s?a.disabled:null,m?a.small:null,c?a.noMargin:null),onClick:n=>{s||(n.target.name=t,n.target.checked=!e,n.target.value=!e,p(n))},"data-testid":g,children:[l.jsx("input",{type:x.CHECKBOX,name:t,value:e==null?void 0:e.toString(),disabled:s,checked:e,onChange:()=>{}}),l.jsx("label",{children:d}),_&&l.jsx("div",{className:a.helpIconEnabled,onClick:r,children:l.jsx(j,{text:o})})]})};try{i.displayName="Toggle",i.__docgenInfo={description:"",displayName:"Toggle",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string | ReactElement<any, string | JSXElementConstructor<any>> | null"}},checked:{defaultValue:{value:"false"},description:"",name:"checked",required:!1,type:{name:"boolean"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},small:{defaultValue:{value:"false"},description:"",name:"small",required:!1,type:{name:"boolean"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(evt: ChangeEvent<HTMLInputElement>) => void"}},noMargin:{defaultValue:{value:"false"},description:"",name:"noMargin",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},helpText:{defaultValue:null,description:"",name:"helpText",required:!1,type:{name:"string"}},onClickHelp:{defaultValue:null,description:"",name:"onClickHelp",required:!1,type:{name:"((evt: any) => void)"}}}}}catch{}export{i as T};

package/dist/storybook/assets/toggle.stories-05bf43ff.js

@@ -0,0 +1,108 @@
+import{j as y}from"./jsx-runtime-f961835c.js";import{r as G}from"./index-f80c8c95.js";import{T as u}from"./toggle-de8e437a.js";import"./index-a80ed1cf.js";import"./common-types-2c81813f.js";import"./disabled-context-d654f6ff.js";import"./help-icon-5be78589.js";import"./tooltip-23e84186.js";import"./index-3d476d02.js";import"./icon-c5e1f218.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";const{useArgs:I}=__STORYBOOK_MODULE_ADDONS__,ce={title:"Forms/Toggle",component:u,args:{label:"Label"}},e=g=>{const[{checked:p},i]=I(),h=()=>{i({checked:!p})};return y.jsx(u,{...g,onChange:h})},d=e.bind({}),n=e.bind({});n.args={disabled:!0};const s=e.bind({});s.args={checked:!0,disabled:!0};const a=e.bind({});a.args={small:!0};const r=e.bind({});r.args={label:null};const t=e.bind({});t.args={helpText:"Help text"};const c=e.bind({});c.args={onClickHelp:()=>console.log("Help clicked")};const l=()=>{const[g,p]=G.useState(!1);return y.jsx(u,{name:"name",label:"Label",checked:g,onChange:i=>{const{name:h,value:z,checked:m}=i.target;p(m),console.log(h,z,m)}})},o=e.bind({});o.args={helpText:"Help text",disabled:!0};var k,C,b;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(b=(C=d.parameters)==null?void 0:C.docs)==null?void 0:b.source}}};var x,A,T;n.parameters={...n.parameters,docs:{...(x=n.parameters)==null?void 0:x.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(T=(A=n.parameters)==null?void 0:A.docs)==null?void 0:T.source}}};var S,j,D;s.parameters={...s.parameters,docs:{...(S=s.parameters)==null?void 0:S.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(D=(j=s.parameters)==null?void 0:j.docs)==null?void 0:D.source}}};var H,_,f;a.parameters={...a.parameters,docs:{...(H=a.parameters)==null?void 0:H.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(f=(_=a.parameters)==null?void 0:_.docs)==null?void 0:f.source}}};var O,v,E;r.parameters={...r.parameters,docs:{...(O=r.parameters)==null?void 0:O.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(E=(v=r.parameters)==null?void 0:v.docs)==null?void 0:E.source}}};var L,R,W;t.parameters={...t.parameters,docs:{...(L=t.parameters)==null?void 0:L.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(W=(R=t.parameters)==null?void 0:R.docs)==null?void 0:W.source}}};var B,F,K;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(K=(F=c.parameters)==null?void 0:F.docs)==null?void 0:K.source}}};var M,N,U;l.parameters={...l.parameters,docs:{...(M=l.parameters)==null?void 0:M.docs,source:{originalSource:`() => {
+  const [checked, setChecked] = useState(false);
+  return <Toggle name="name" label="Label" checked={checked} onChange={evt => {
+    const {
+      name,
+      value,
+      checked
+    } = evt.target;
+    setChecked(checked);
+    console.log(name, value, checked);
+  }} />;
+}`,...(U=(N=l.parameters)==null?void 0:N.docs)==null?void 0:U.source}}};var Y,q,w;o.parameters={...o.parameters,docs:{...(Y=o.parameters)==null?void 0:Y.docs,source:{originalSource:`args => {
+  const [{
+    checked
+  }, updateArgs] = useArgs();
+  const handleChange = () => {
+    updateArgs({
+      checked: !checked
+    });
+  };
+  return <Toggle
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  {...args} onChange={handleChange} />;
+}`,...(w=(q=o.parameters)==null?void 0:q.docs)==null?void 0:w.source}}};const oe=["Default","Disabled","DisabledChecked","Small","Standalone","HelpText","OnClickHelp","TestClickevt","DisabledWithHelpText"];export{d as Default,n as Disabled,s as DisabledChecked,o as DisabledWithHelpText,t as HelpText,c as OnClickHelp,a as Small,r as Standalone,l as TestClickevt,oe as __namedExportsOrder,ce as default};