@oliasoft-open-source/react-ui-library 4.1.5 → 4.1.6-beta-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-b17ea451.js → index-0fee18b2.js} +10 -10
- package/dist/assets/{index-4e076e2d.css → index-f2b208e6.css} +15 -14
- package/dist/index.d.ts +3 -1
- package/dist/index.html +1 -1
- package/dist/index.js +79 -32
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-6VNJS4EI-9a2985b2.js → Color-6VNJS4EI-189762fa.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-NNNQARDV-7d390284.js → DocsRenderer-NNNQARDV-12f4661f.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-4HIR6TLV-935a2b47.js → WithTooltip-4HIR6TLV-f2f8ab3e.js} +1 -1
- package/dist/storybook/assets/{afe.stories-86276073.js → afe.stories-cc38aff9.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-f8588ace.js → buttons-and-links-059bfed6.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-e5e1eaa9.js → casing-loads.stories-e65ed11b.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-ec25be11.js → chunk-HLWAVYOI-f01f3de0.js} +1 -1
- package/dist/storybook/assets/{color-9efc2f2e.js → color-cd3ec4c3.js} +1 -1
- package/dist/storybook/assets/dialog-d1746c46.js +1 -0
- package/dist/storybook/assets/{formation.stories-262bd728.js → formation.stories-e444112c.js} +1 -1
- package/dist/storybook/assets/{formatter-SWP5E3XI-6ab3c3a9.js → formatter-SWP5E3XI-d242f07b.js} +1 -1
- package/dist/storybook/assets/{iframe-697f8aaf.js → iframe-095d8394.js} +1 -1
- package/dist/storybook/assets/{index-a7512f2e.js → index-56205b57.js} +4 -4
- package/dist/storybook/assets/{input-validation-3ded498c.js → input-validation-229633ba.js} +1 -1
- package/dist/storybook/assets/{inputs-7d113dd0.js → inputs-b61c86fb.js} +1 -1
- package/dist/storybook/assets/{layout-forms-b74a30ba.js → layout-forms-d14c6084.js} +1 -1
- package/dist/storybook/assets/{layout-general-7e3b0be7.js → layout-general-7da3e8a7.js} +1 -1
- package/dist/storybook/assets/modal.stories-926201c3.js +173 -0
- package/dist/storybook/assets/{padding-and-spacing-d47007e6.js → padding-and-spacing-84f38432.js} +1 -1
- package/dist/storybook/assets/preview-87482613.js +1 -0
- package/dist/storybook/assets/{preview-c85f9156.js → preview-c3814db0.js} +1 -1
- package/dist/storybook/assets/{projects.stories-9d6e0a4c.js → projects.stories-3884a80c.js} +1 -1
- package/dist/storybook/assets/{site.stories-46091c50.js → site.stories-f06d77af.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-NMPM6SWI-90fd0fb6.js → syntaxhighlighter-NMPM6SWI-da38ba14.js} +1 -1
- package/dist/storybook/assets/tabs-be40d085.css +1 -0
- package/dist/storybook/assets/{tabs-cdfc5225.js → tabs-cf5ccede.js} +1 -1
- package/dist/storybook/assets/tabs.stories-5b0ca9e1.js +30 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/stories.json +1 -1
- package/package.json +1 -1
- package/dist/404.html +0 -1
- package/dist/storybook/assets/dialog-795008dd.js +0 -1
- package/dist/storybook/assets/modal.stories-b5414377.js +0 -141
- package/dist/storybook/assets/preview-20eb7184.js +0 -1
- package/dist/storybook/assets/tabs-c2db5f41.css +0 -1
- package/dist/storybook/assets/tabs.stories-c962aeea.js +0 -30
package/package.json
CHANGED
package/dist/404.html
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-b17ea451.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-4e076e2d.css"></head><body><div id="content"></div></body>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{c as l}from"./index-a80ed1cf.js";import{P as f}from"./portal-03fe4689.js";import{r as h}from"./index-f80c8c95.js";import{l as x}from"./lodash-75c70a11.js";import{I as y}from"./common-types-2c81813f.js";import{H as j}from"./heading-d29eb744.js";import{B as v}from"./button-74c97e4a.js";const N="_wrapper_sb0hc_1",b="_contentContainer_sb0hc_15",w="_centered_sb0hc_24",C="_newLine_sb0hc_28",i={wrapper:N,contentContainer:b,centered:w,newLine:C},k=({children:t})=>e.jsx("div",{className:l(i.wrapper),children:t}),I=({children:t,width:n,centered:s})=>e.jsx("div",{className:l(i.contentContainer,s?i.centered:""),style:{maxWidth:n},children:t}),p=({children:t,visible:n=!1,centered:s=!1,width:a="100%"})=>e.jsxs(e.Fragment,{children:[e.jsx(f,{id:"modalContainer",children:n?e.jsx(k,{children:e.jsx(I,{width:a,centered:s,children:t})}):null}),e.jsx("div",{id:"modalContainer"})]});try{p.displayName="Modal",p.__docgenInfo={description:"",displayName:"Modal",props:{visible:{defaultValue:{value:"false"},description:"",name:"visible",required:!1,type:{name:"boolean"}},centered:{defaultValue:{value:"false"},description:"",name:"centered",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}}}}}catch{}const D="_dialog_18g0k_1",q="_inline_18g0k_18",E="_scroll_18g0k_21",L="_header_18g0k_24",M="_dismiss_18g0k_33",V="_content_18g0k_38",$="_footer_18g0k_47",r={dialog:D,inline:q,scroll:E,header:L,dismiss:M,content:V,footer:$},B=t=>x.isArray(t)?t.map((n,s)=>e.jsxs(h.Fragment,{children:[n," ",e.jsx("br",{})]},s)):t,_=({dialog:t})=>{const{heading:n,content:s,contentPadding:a="var(--padding)",footer:d,scroll:u,width:c,height:g,onClose:m,testId:o}=t;return e.jsxs("div",{className:l(r.dialog,c?r.inline:null,u?r.scroll:null),style:{width:c,height:g},"data-testid":o??null,children:[e.jsxs("div",{className:r.header,children:[e.jsx(j,{testId:o&&`${o}-heading`,top:!0,marginBottom:0,children:n}),m?e.jsx("div",{className:r.dismiss,children:e.jsx(v,{icon:y.CLOSE,round:!0,basic:!0,small:!0,colored:"muted",onClick:m})}):null]}),e.jsx("div",{"data-testid":o&&`${o}-content`,className:r.content,style:{padding:a},children:B(s)}),d&&e.jsx("div",{"data-testid":o&&`${o}-footer`,className:r.footer,children:d})]})};try{_.displayName="Dialog",_.__docgenInfo={description:"",displayName:"Dialog",props:{dialog:{defaultValue:null,description:"",name:"dialog",required:!0,type:{name:"IDialog"}}}}}catch{}export{_ as D,p as M};
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{T as W}from"./common-types-2c81813f.js";import{M as E,D as R}from"./dialog-795008dd.js";import{B as n}from"./button-74c97e4a.js";import{P as H}from"./popover-06e375a5.js";import{I as K}from"./input-d68625a5.js";import{I as U}from"./input-group-20c3add3.js";import{F as p}from"./field-a094cd72.js";import{M as G}from"./actions-2d4e1c8e.js";import{S as V}from"./select-62aa86c5.js";import{S as Y}from"./spacer-54db0620.js";import{T as q}from"./tooltip-23e84186.js";import{M as m}from"./types-cc224262.js";import"./index-f80c8c95.js";import"./index-a80ed1cf.js";import"./portal-03fe4689.js";import"./index-3d476d02.js";import"./lodash-75c70a11.js";import"./heading-d29eb744.js";import"./help-icon-d4189b1b.js";import"./icon-e9cbb4d7.js";import"./inheritsLoose-d4851ab8.js";import"./tslib.es6-dfef685f.js";import"./index-c89a1915.js";import"./disabled-context-d654f6ff.js";import"./spinner-a81ebe38.js";import"./types-332ceaf3.js";import"./label-13d490a3.js";import"./badge-20e7ee0b.js";import"./assertThisInitialized-081f9914.js";import"./memoize-one.esm-52518564.js";import"./text-ad1f5f1d.js";import"./select.input-88b6ebab.js";const{useArgs:z}=__STORYBOOK_MODULE_ADDONS__,Te={title:"Modals/Modal",component:E,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.jsx(e.Fragment,{children:"This will complete the transaction"}),footer:e.jsxs(e.Fragment,{children:[e.jsx(n,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(n,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},o=()=>{const[{visible:c,centered:I,...w},L]=z(),g=()=>{L({visible:!c})};return e.jsxs(e.Fragment,{children:[e.jsx(E,{visible:c,centered:I,children:e.jsx(R,{dialog:{...w,onClose:g}})}),e.jsx(n,{label:"Open Modal",onClick:g})]})},d=o.bind({}),r=o.bind({});r.args={centered:!0};const a=o.bind({});a.args={content:["This is a","new line!"]};const l=o.bind({});l.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const s=o.bind({});s.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const t=o.bind({});t.args={contentPadding:0};const i=o.bind({});i.args={content:e.jsxs(e.Fragment,{children:[e.jsx(q,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(Y,{}),e.jsx(p,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(V,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.jsx(p,{label:"Nested Menu",children:e.jsx(G,{maxHeight:"240px",menu:{label:"Menu",trigger:W.DROP_DOWN_BUTTON,sections:[{type:m.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:m.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(H,{content:e.jsxs(U,{small:!0,children:[e.jsx(K,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(n,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(n,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(n,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};var u,b,M;d.parameters={...d.parameters,docs:{...(u=d.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
|
|
2
|
-
const [{
|
|
3
|
-
visible,
|
|
4
|
-
centered,
|
|
5
|
-
...dialogProps
|
|
6
|
-
}, updateArgs] = useArgs();
|
|
7
|
-
const toggleModal = () => {
|
|
8
|
-
updateArgs({
|
|
9
|
-
visible: !visible
|
|
10
|
-
});
|
|
11
|
-
};
|
|
12
|
-
return <>
|
|
13
|
-
<Modal visible={visible} centered={centered}>
|
|
14
|
-
<Dialog dialog={{
|
|
15
|
-
...dialogProps,
|
|
16
|
-
onClose: toggleModal
|
|
17
|
-
}} />
|
|
18
|
-
</Modal>
|
|
19
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
20
|
-
</>;
|
|
21
|
-
}`,...(M=(b=d.parameters)==null?void 0:b.docs)==null?void 0:M.source}}};var v,x,C;r.parameters={...r.parameters,docs:{...(v=r.parameters)==null?void 0:v.docs,source:{originalSource:`() => {
|
|
22
|
-
const [{
|
|
23
|
-
visible,
|
|
24
|
-
centered,
|
|
25
|
-
...dialogProps
|
|
26
|
-
}, updateArgs] = useArgs();
|
|
27
|
-
const toggleModal = () => {
|
|
28
|
-
updateArgs({
|
|
29
|
-
visible: !visible
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
return <>
|
|
33
|
-
<Modal visible={visible} centered={centered}>
|
|
34
|
-
<Dialog dialog={{
|
|
35
|
-
...dialogProps,
|
|
36
|
-
onClose: toggleModal
|
|
37
|
-
}} />
|
|
38
|
-
</Modal>
|
|
39
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
40
|
-
</>;
|
|
41
|
-
}`,...(C=(x=r.parameters)==null?void 0:x.docs)==null?void 0:C.source}}};var h,P,A;a.parameters={...a.parameters,docs:{...(h=a.parameters)==null?void 0:h.docs,source:{originalSource:`() => {
|
|
42
|
-
const [{
|
|
43
|
-
visible,
|
|
44
|
-
centered,
|
|
45
|
-
...dialogProps
|
|
46
|
-
}, updateArgs] = useArgs();
|
|
47
|
-
const toggleModal = () => {
|
|
48
|
-
updateArgs({
|
|
49
|
-
visible: !visible
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
return <>
|
|
53
|
-
<Modal visible={visible} centered={centered}>
|
|
54
|
-
<Dialog dialog={{
|
|
55
|
-
...dialogProps,
|
|
56
|
-
onClose: toggleModal
|
|
57
|
-
}} />
|
|
58
|
-
</Modal>
|
|
59
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
60
|
-
</>;
|
|
61
|
-
}`,...(A=(P=a.parameters)==null?void 0:P.docs)==null?void 0:A.source}}};var j,k,O;l.parameters={...l.parameters,docs:{...(j=l.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
|
|
62
|
-
const [{
|
|
63
|
-
visible,
|
|
64
|
-
centered,
|
|
65
|
-
...dialogProps
|
|
66
|
-
}, updateArgs] = useArgs();
|
|
67
|
-
const toggleModal = () => {
|
|
68
|
-
updateArgs({
|
|
69
|
-
visible: !visible
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
|
-
return <>
|
|
73
|
-
<Modal visible={visible} centered={centered}>
|
|
74
|
-
<Dialog dialog={{
|
|
75
|
-
...dialogProps,
|
|
76
|
-
onClose: toggleModal
|
|
77
|
-
}} />
|
|
78
|
-
</Modal>
|
|
79
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
80
|
-
</>;
|
|
81
|
-
}`,...(O=(k=l.parameters)==null?void 0:k.docs)==null?void 0:O.source}}};var f,S,T;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
|
|
82
|
-
const [{
|
|
83
|
-
visible,
|
|
84
|
-
centered,
|
|
85
|
-
...dialogProps
|
|
86
|
-
}, updateArgs] = useArgs();
|
|
87
|
-
const toggleModal = () => {
|
|
88
|
-
updateArgs({
|
|
89
|
-
visible: !visible
|
|
90
|
-
});
|
|
91
|
-
};
|
|
92
|
-
return <>
|
|
93
|
-
<Modal visible={visible} centered={centered}>
|
|
94
|
-
<Dialog dialog={{
|
|
95
|
-
...dialogProps,
|
|
96
|
-
onClose: toggleModal
|
|
97
|
-
}} />
|
|
98
|
-
</Modal>
|
|
99
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
100
|
-
</>;
|
|
101
|
-
}`,...(T=(S=s.parameters)==null?void 0:S.docs)==null?void 0:T.source}}};var y,B,D;t.parameters={...t.parameters,docs:{...(y=t.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
|
|
102
|
-
const [{
|
|
103
|
-
visible,
|
|
104
|
-
centered,
|
|
105
|
-
...dialogProps
|
|
106
|
-
}, updateArgs] = useArgs();
|
|
107
|
-
const toggleModal = () => {
|
|
108
|
-
updateArgs({
|
|
109
|
-
visible: !visible
|
|
110
|
-
});
|
|
111
|
-
};
|
|
112
|
-
return <>
|
|
113
|
-
<Modal visible={visible} centered={centered}>
|
|
114
|
-
<Dialog dialog={{
|
|
115
|
-
...dialogProps,
|
|
116
|
-
onClose: toggleModal
|
|
117
|
-
}} />
|
|
118
|
-
</Modal>
|
|
119
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
120
|
-
</>;
|
|
121
|
-
}`,...(D=(B=t.parameters)==null?void 0:B.docs)==null?void 0:D.source}}};var _,F,N;i.parameters={...i.parameters,docs:{...(_=i.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
122
|
-
const [{
|
|
123
|
-
visible,
|
|
124
|
-
centered,
|
|
125
|
-
...dialogProps
|
|
126
|
-
}, updateArgs] = useArgs();
|
|
127
|
-
const toggleModal = () => {
|
|
128
|
-
updateArgs({
|
|
129
|
-
visible: !visible
|
|
130
|
-
});
|
|
131
|
-
};
|
|
132
|
-
return <>
|
|
133
|
-
<Modal visible={visible} centered={centered}>
|
|
134
|
-
<Dialog dialog={{
|
|
135
|
-
...dialogProps,
|
|
136
|
-
onClose: toggleModal
|
|
137
|
-
}} />
|
|
138
|
-
</Modal>
|
|
139
|
-
<Button label="Open Modal" onClick={toggleModal} />
|
|
140
|
-
</>;
|
|
141
|
-
}`,...(N=(F=i.parameters)==null?void 0:F.docs)==null?void 0:N.source}}};const ye=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers"];export{r as Centered,d as Default,s as FullWidth,a as LineBreak,t as NoContentPadding,l as Scroll,i as WithPopoverLayers,ye as __namedExportsOrder,Te as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as e}from"./iframe-697f8aaf.js";import"../sb-preview/runtime.js";var a={docs:{renderer:async()=>{let{DocsRenderer:r}=await e(()=>import("./DocsRenderer-NNNQARDV-7d390284.js"),["./DocsRenderer-NNNQARDV-7d390284.js","./chunk-HLWAVYOI-ec25be11.js","./iframe-697f8aaf.js","./index-f80c8c95.js","./react-16-147b12fd.js","./index-3d476d02.js","./index-a7512f2e.js","./inheritsLoose-d4851ab8.js","./assertThisInitialized-081f9914.js","./index-cf68f115.js"],import.meta.url);return new r}}};export{a as parameters};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._tabs_twdtr_1{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color-border);flex-shrink:0}._tabs_twdtr_1._padding_twdtr_7{padding-left:var(--padding);padding-right:var(--padding)}._tabs_twdtr_1._margin_twdtr_11{margin:var(--padding) 0}._contentPadding_twdtr_14{padding-top:var(--padding)}._item_twdtr_17{align-self:flex-end;display:flex;align-items:center;position:relative;vertical-align:middle;line-height:1;text-decoration:none;flex:0 0 auto;-webkit-user-select:none;user-select:none;padding:var(--padding-xs) 0;transition:border .1s ease,color .1s ease;margin-bottom:-1px;border-bottom:1px solid transparent;font-size:var(--font-size-lg);color:var(--color-text-primary);cursor:pointer}._item_twdtr_17:not(:last-child){margin-right:var(--padding)}._item_twdtr_17:hover:not(._active_twdtr_38){color:var(--color-text-primary-hover);background:rgba(0,0,0,.025)}[data-theme=dark] ._item_twdtr_17:hover:not(._active_twdtr_38){background:rgba(255,255,255,.1)}._item_twdtr_17:active:not(._active_twdtr_38){color:var(--color-text-primary-active);background:rgba(0,0,0,.05)}[data-theme=dark] ._item_twdtr_17:active:not(._active_twdtr_38){background:rgba(255,255,255,.2)}._item_twdtr_17._active_twdtr_38{border-color:var(--color-text);color:var(--color-text);cursor:default}._item_twdtr_17._hidden_twdtr_57{display:none!important}._item_twdtr_17._disabled_twdtr_60{color:var(--color-text-faint);pointer-events:none}._item_twdtr_17._left_twdtr_64+._item_twdtr_17._right_twdtr_64{margin-left:auto}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-f961835c.js";import{r as H}from"./index-f80c8c95.js";import{T as d}from"./tabs-cdfc5225.js";import"./index-a80ed1cf.js";import"./disabled-context-d654f6ff.js";import"./badge-20e7ee0b.js";import"./select.input-88b6ebab.js";import"./types-cc224262.js";const q={title:"Navigation/Tabs",component:d,args:{name:"example",options:[{label:"Tab",value:0},{label:"Tab",value:1},{label:"With Badge",value:2,badge:"3"},{label:"Invalid",value:3,invalid:!0},{label:"Disabled",value:4,disabled:!0},{label:"Hidden tab",value:5,hidden:!0}],value:0}},l=n=>e.jsx(d,{...n}),o=l.bind({}),r=l.bind({});r.args={children:[e.jsx("div",{label:"Tab 0",children:e.jsx("h3",{children:"Tab 0 Content"})}),e.jsx("div",{label:"Tab 1",hidden:!0,children:e.jsx("h3",{children:"Tab 1 Content"})}),e.jsx("div",{label:"Tab 2",disabled:!0,children:e.jsx("h3",{children:"Tab 2 Content"})}),e.jsx("div",{label:"Tab 3",children:e.jsx("h3",{children:"Tab 3 Content"})}),e.jsx("div",{label:"Tab 4",children:e.jsx("h3",{children:"Tab 4 Content"})})]};const s=l.bind({});s.args={margin:!1};const a=l.bind({});a.parameters={layout:"fullscreen",docs:{description:{story:"When you want the divider to fill the edges of its container."}}};a.args={padding:!0};const t=l.bind({});t.args={options:[{label:"Tab 0",value:0},{label:"Tab 1",value:1},{label:"Tab 2",value:2},{label:"Tab 3",value:3,right:!0},{label:"Tab 4",value:4,right:!0}]};const i=()=>{const n=[{label:"Strawberries",value:"strawberries"},{label:"Bananas",value:"bananas"},{label:"Apples",value:"apples",disabled:!0},{label:"Pomegranates",value:"pomegranates"}],[b,W]=H.useState(n[0]);return e.jsxs(e.Fragment,{children:[e.jsx(d,{name:"example",value:b,options:n,onChange:y=>{const{value:B,label:D}=y.target;W({value:B,label:D})}}),e.jsxs("span",{children:["Eating ",b.value,"..."]})]})};var c,u,p;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:"args => <Tabs {...args} />",...(p=(u=o.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};var m,g,v;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:"args => <Tabs {...args} />",...(v=(g=r.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};var T,h,x;s.parameters={...s.parameters,docs:{...(T=s.parameters)==null?void 0:T.docs,source:{originalSource:"args => <Tabs {...args} />",...(x=(h=s.parameters)==null?void 0:h.docs)==null?void 0:x.source}}};var j,S,f;a.parameters={...a.parameters,docs:{...(j=a.parameters)==null?void 0:j.docs,source:{originalSource:"args => <Tabs {...args} />",...(f=(S=a.parameters)==null?void 0:S.docs)==null?void 0:f.source}}};var C,w,E;t.parameters={...t.parameters,docs:{...(C=t.parameters)==null?void 0:C.docs,source:{originalSource:"args => <Tabs {...args} />",...(E=(w=t.parameters)==null?void 0:w.docs)==null?void 0:E.source}}};var A,M,P;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
|
|
2
|
-
const options = [{
|
|
3
|
-
label: 'Strawberries',
|
|
4
|
-
value: 'strawberries'
|
|
5
|
-
}, {
|
|
6
|
-
label: 'Bananas',
|
|
7
|
-
value: 'bananas'
|
|
8
|
-
}, {
|
|
9
|
-
label: 'Apples',
|
|
10
|
-
value: 'apples',
|
|
11
|
-
disabled: true
|
|
12
|
-
}, {
|
|
13
|
-
label: 'Pomegranates',
|
|
14
|
-
value: 'pomegranates'
|
|
15
|
-
}];
|
|
16
|
-
const [selectedTab, setSelectedTab] = useState(options[0]);
|
|
17
|
-
return <>
|
|
18
|
-
<Tabs name="example" value={selectedTab} options={options} onChange={evt => {
|
|
19
|
-
const {
|
|
20
|
-
value,
|
|
21
|
-
label
|
|
22
|
-
} = evt.target;
|
|
23
|
-
setSelectedTab({
|
|
24
|
-
value,
|
|
25
|
-
label
|
|
26
|
-
});
|
|
27
|
-
}} />
|
|
28
|
-
<span>Eating {selectedTab.value}...</span>
|
|
29
|
-
</>;
|
|
30
|
-
}`,...(P=(M=i.parameters)==null?void 0:M.docs)==null?void 0:P.source}}};const G=["Default","WithChildren","NoMargin","HorizontalPadding","Alignment","Managed"];export{t as Alignment,o as Default,a as HorizontalPadding,i as Managed,s as NoMargin,r as WithChildren,G as __namedExportsOrder,q as default};
|