@acusti/uikit-docs 0.4.4 → 0.4.6

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.
Files changed (84) hide show
  1. package/.storybook/main.ts +19 -4
  2. package/CHANGELOG.md +60 -0
  3. package/dist/assets/CSSValueInput-B69U5DrZ.js +5 -0
  4. package/dist/assets/{CSSValueInput-BgAgo3f9.css → CSSValueInput-DKgB9IQs.css} +1 -1
  5. package/dist/assets/CSSValueInput.stories-vCftVQHX.js +113 -0
  6. package/dist/assets/Color-6BZIO3FS-BHsDhiaJ.js +1 -0
  7. package/dist/assets/DatePicker.stories-X2JO2cn6.js +585 -0
  8. package/dist/assets/DocsRenderer-LL677BLK-i2bqAbNY.js +2 -0
  9. package/dist/assets/Dropdown-QkqMQiyU.css +1 -0
  10. package/dist/assets/Dropdown-_IIsqrAA.js +101 -0
  11. package/dist/assets/Dropdown.stories-msGED41R.js +364 -0
  12. package/dist/assets/InputText-_BMv0r1n.css +1 -0
  13. package/dist/assets/InputText.stories-CG1EnzrQ.js +148 -0
  14. package/dist/assets/Introduction-orXeKug7.js +184 -0
  15. package/dist/assets/MonthCalendar.stories-CJT-JiqF.js +177 -0
  16. package/dist/assets/WithTooltip-65CFNBJE-DlgYg9W2.js +9 -0
  17. package/dist/assets/blocks-C4xgyV4X.js +46 -0
  18. package/dist/assets/chunk-242VQQM5-DEt_wvrI.js +1 -0
  19. package/dist/assets/chunk-YKABRMAI-BpCcWWoG.js +18 -0
  20. package/dist/assets/client-Bvdml6v2.js +9 -0
  21. package/dist/assets/clsx-Bdud1Ih_.js +1 -0
  22. package/dist/assets/compiler-runtime-BOsKKfMw.js +1 -0
  23. package/dist/assets/components-CuDS54ZU.js +92 -0
  24. package/dist/assets/dist-6e4YoSiG.js +1 -0
  25. package/dist/assets/dist-BreUZhw6.js +1 -0
  26. package/dist/assets/formatter-EIJCOSYU-4RP_9NAI.js +1 -0
  27. package/dist/assets/iframe-BsC6HWDY.js +1221 -0
  28. package/dist/assets/jsx-runtime-CZwoFFIL.js +1 -0
  29. package/dist/assets/lib-WXkUx4TK.js +1 -0
  30. package/dist/assets/preload-helper-Bhb7V-Yo.js +1 -0
  31. package/dist/assets/react-18-6aLPZbD-.js +1 -0
  32. package/dist/assets/react-DcwytXSz.js +1 -0
  33. package/dist/assets/react-dom-CFVoDXTy.js +1 -0
  34. package/dist/assets/syntaxhighlighter-ED5Y7EFY-BQSv6pbL.js +6 -0
  35. package/dist/assets/theming-DLDZLcJn.js +39 -0
  36. package/dist/assets/useIsOutOfBounds.stories-CI4DMSUD.js +105 -0
  37. package/dist/assets/{useKeyboardEvents-BH4Zd7d3.css → useKeyboardEvents-CKMYGqVT.css} +1 -1
  38. package/dist/assets/useKeyboardEvents.stories-CNX299tr.js +3 -0
  39. package/dist/favicon-wrapper.svg +46 -0
  40. package/dist/favicon.svg +1 -1
  41. package/dist/iframe.html +59 -40
  42. package/dist/index.html +8 -16
  43. package/dist/index.json +1 -1
  44. package/dist/project.json +1 -1
  45. package/dist/sb-addons/docs-1/manager-bundle.js +1 -149
  46. package/dist/sb-addons/storybook-2/manager-bundle.js +1 -1
  47. package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +548 -108
  48. package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
  49. package/dist/sb-common-assets/favicon.svg +1 -1
  50. package/dist/sb-manager/globals-runtime.js +73064 -67182
  51. package/dist/sb-manager/globals.js +6 -16
  52. package/dist/sb-manager/manager-stores.js +23 -0
  53. package/dist/sb-manager/runtime.js +17712 -10309
  54. package/dist/vite-inject-mocker-entry.js +2 -0
  55. package/package.json +11 -9
  56. package/stories/CSSValueInput.stories.tsx +1 -1
  57. package/stories/DatePicker.stories.tsx +182 -45
  58. package/stories/InputText.stories.tsx +36 -0
  59. package/tsconfig.json +1 -0
  60. package/tsconfig.tsbuildinfo +1 -1
  61. package/dist/assets/CSSValueInput-BoZriUnh.js +0 -1
  62. package/dist/assets/CSSValueInput.stories-D1VcYZJ0.js +0 -113
  63. package/dist/assets/Color-AVL7NMMY-BeW0C7pE.js +0 -1
  64. package/dist/assets/DatePicker.stories-BSWV31FV.js +0 -244
  65. package/dist/assets/DocsRenderer-PQXLIZUC-D92GwNti.js +0 -2
  66. package/dist/assets/Dropdown-D5cyjefk.css +0 -1
  67. package/dist/assets/Dropdown-DUP_ybXe.js +0 -84
  68. package/dist/assets/Dropdown.stories-2Wtw1otE.js +0 -336
  69. package/dist/assets/InputText-Tkbh5amB.css +0 -1
  70. package/dist/assets/InputText.stories-BYt2Aj0_.js +0 -90
  71. package/dist/assets/Introduction-nSE2hjmb.js +0 -183
  72. package/dist/assets/MonthCalendar.stories-IJrL6wIl.js +0 -169
  73. package/dist/assets/blocks-Du178fXa.js +0 -658
  74. package/dist/assets/client-B2qWCcIR.js +0 -25
  75. package/dist/assets/clsx-hXifHU8N.js +0 -9
  76. package/dist/assets/iframe-ByGa_ItU.js +0 -1102
  77. package/dist/assets/index-BRXcJgsA.js +0 -1
  78. package/dist/assets/index-BVajFqaV.js +0 -1
  79. package/dist/assets/index-DwJ-mRZ2.js +0 -9
  80. package/dist/assets/jsx-runtime-D_zvdyIk.js +0 -9
  81. package/dist/assets/react-18-djOrgGe8.js +0 -1
  82. package/dist/assets/useIsOutOfBounds.stories-e48KZd_G.js +0 -105
  83. package/dist/assets/useKeyboardEvents.stories-CJbDuGfk.js +0 -3
  84. package/dist/sb-manager/globals-module-info.js +0 -797
@@ -0,0 +1,148 @@
1
+ import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";/* empty css */var ee=r(),i=e(t(),1),a=n();function o(e){let t=(0,ee.c)(80),{autoCapitalize:n,autoComplete:r,autoFocus:o,className:s,disabled:c,discardOnEscape:l,doubleClickToEdit:u,enterKeyHint:d,form:f,id:p,initialValue:m,list:h,max:g,maxHeight:_,maxLength:v,min:y,minHeight:b,minLength:x,multiLine:S,multiple:C,name:w,onBlur:T,onChange:E,onChangeValue:D,onFocus:O,onKeyDown:k,onKeyUp:A,pattern:j,placeholder:M,readOnly:ie,ref:N,required:ae,rows:oe,selectTextOnFocus:P,size:se,step:ce,style:F,submitOnEnter:le,tabIndex:ue,title:de,type:fe}=e,pe=oe===void 0?1:oe,me=fe===void 0?`text`:fe,I=(0,i.useRef)(null),L=m??``,R=(0,i.useRef)(L),z;t[0]!==_||t[1]!==b||t[2]!==S?(z=()=>{if(!I.current||te)return;if(!S){I.current.style.height=``;return}let{transitionDelay:e,transitionDuration:t}=I.current.style;I.current.style.transitionDelay=`0s`,I.current.style.transitionDuration=`0s`,I.current.style.height=``;let n=typeof b==`string`?parseFloat(b):b,r=typeof _==`string`?parseFloat(_):_,ee=Math.max(n??0,Math.min(I.current.scrollHeight,r??1/0));ee&&(I.current.style.height=`${ee}px`),setTimeout(()=>{I.current&&(I.current.style.transitionDelay=e===`0s`?``:e,I.current.style.transitionDuration=t===`0s`?``:t)},0)},t[0]=_,t[1]=b,t[2]=S,t[3]=z):z=t[3];let B=z,V;t[4]!==S||t[5]!==N||t[6]!==B?(V=e=>{I.current=e;let t;if(typeof N==`function`?t=N(e):N&&(N.current=e),!e||!S||te)return t;B();let n=new ResizeObserver(B);return n.observe(e),()=>{n.disconnect(),typeof t==`function`&&t()}},t[4]=S,t[5]=N,t[6]=B,t[7]=V):V=t[7];let he=V,H,U;t[8]===L?(H=t[9],U=t[10]):(H=()=>{R.current=L,I.current&&(I.current.value=L)},U=[L],t[8]=L,t[9]=H,t[10]=U),(0,i.useEffect)(H,U);let[W,ge]=(0,i.useState)(ie??u),_e=(0,i.useRef)(!0),G;t[11]===u?G=t[12]:(G=()=>{u&&ge(!1)},t[11]=u,t[12]=G);let ve=G,K;t[13]!==E||t[14]!==D?(K=e=>{E&&E(e),D&&D(e.target.value)},t[13]=E,t[14]=D,t[15]=K):K=t[15];let q=K,J;t[16]!==S||t[17]!==O||t[18]!==B?(J=e=>{O&&O(e),S&&B()},t[16]=S,t[17]=O,t[18]=B,t[19]=J):J=t[19];let ye=J,Y;t[20]!==u||t[21]!==T||t[22]!==P?(Y=e=>{T&&T(e),R.current=e.currentTarget.value,u&&ge(!0),P&&(_e.current=!0)},t[20]=u,t[21]=T,t[22]=P,t[23]=Y):Y=t[23];let be=Y,X;t[24]===P?X=t[25]:(X=e=>{if(!P)return;let t=e.currentTarget;if(!_e.current||(_e.current=!1,!t.value)||t.ownerDocument.activeElement!==t)return;let n=t.value.length;t.selectionStart===0&&t.selectionEnd===n||(t.selectionStart=0,t.selectionEnd=n)},t[24]=P,t[25]=X);let xe=X,Z;t[26]!==l||t[27]!==u||t[28]!==q||t[29]!==S||t[30]!==k||t[31]!==W||t[32]!==le?(Z=e=>{if(k&&k(e),!(e.key!==`Enter`&&e.key!==`Escape`)){if(e.key===`Enter`&&(le||S&&re(e))&&(!S||!e.shiftKey&&!e.altKey&&!e.ctrlKey)){e.preventDefault(),e.currentTarget.closest(`form`)?.requestSubmit(),e.currentTarget.blur();return}!l&&!u||(e.key===`Escape`&&l?e.currentTarget.value!==R.current&&(e.currentTarget.value=R.current,q(e)):e.key===`Enter`&&u&&W&&ge(!1),e.currentTarget.blur())}},t[26]=l,t[27]=u,t[28]=q,t[29]=S,t[30]=k,t[31]=W,t[32]=le,t[33]=Z):Z=t[33];let Se=Z,Q;t[34]!==_||t[35]!==b||t[36]!==S||t[37]!==F?(Q=S&&te?{...F,fieldSizing:`content`,maxHeight:ne(_)?void 0:_,minHeight:ne(b)?void 0:b}:F,t[34]=_,t[35]=b,t[36]=S,t[37]=F,t[38]=Q):Q=t[38];let Ce=Q,we=S?`textarea`:`input`,$;t[39]!==g||t[40]!==y||t[41]!==S||t[42]!==pe||t[43]!==B||t[44]!==ce?($=S?{onInput:B,rows:pe}:{max:g,min:y,step:ce},t[39]=g,t[40]=y,t[41]=S,t[42]=pe,t[43]=B,t[44]=ce,t[45]=$):$=t[45];let Te;return t[46]!==we||t[47]!==n||t[48]!==r||t[49]!==o||t[50]!==s||t[51]!==c||t[52]!==d||t[53]!==f||t[54]!==be||t[55]!==q||t[56]!==ye||t[57]!==Se||t[58]!==he||t[59]!==xe||t[60]!==p||t[61]!==Ce||t[62]!==h||t[63]!==v||t[64]!==x||t[65]!==C||t[66]!==w||t[67]!==A||t[68]!==j||t[69]!==M||t[70]!==W||t[71]!==ae||t[72]!==se||t[73]!==ve||t[74]!==$||t[75]!==ue||t[76]!==de||t[77]!==me||t[78]!==L?(Te=(0,a.jsx)(we,{autoCapitalize:n,autoComplete:r,autoFocus:o,className:s,defaultValue:L,disabled:c,enterKeyHint:d,form:f,id:p,list:h,maxLength:v,minLength:x,multiple:C,name:w,onBlur:be,onChange:q,onDoubleClick:ve,onFocus:ye,onKeyDown:Se,onKeyUp:A,onSelect:xe,pattern:j,placeholder:M,readOnly:W,ref:he,required:ae,size:se,style:Ce,tabIndex:ue,title:de,type:me,...$}),t[46]=we,t[47]=n,t[48]=r,t[49]=o,t[50]=s,t[51]=c,t[52]=d,t[53]=f,t[54]=be,t[55]=q,t[56]=ye,t[57]=Se,t[58]=he,t[59]=xe,t[60]=p,t[61]=Ce,t[62]=h,t[63]=v,t[64]=x,t[65]=C,t[66]=w,t[67]=A,t[68]=j,t[69]=M,t[70]=W,t[71]=ae,t[72]=se,t[73]=ve,t[74]=$,t[75]=ue,t[76]=de,t[77]=me,t[78]=L,t[79]=Te):Te=t[79],Te}var te=typeof CSS>`u`?!0:CSS.supports(`field-sizing`,`content`),s=/mac|iphone|ipad|ipod/i;function ne(e){return e==null||e===``||e===0||e===1/0}function re(e){let t=globalThis.navigator?.platform??``;return s.test(t)?e.metaKey:e.ctrlKey}o.__docgenInfo={description:``,methods:[],displayName:`InputText`,props:{autoCapitalize:{required:!1,tsType:{name:`union`,raw:`'characters' | 'none' | 'off' | 'sentences' | 'words'`,elements:[{name:`literal`,value:`'characters'`},{name:`literal`,value:`'none'`},{name:`literal`,value:`'off'`},{name:`literal`,value:`'sentences'`},{name:`literal`,value:`'words'`}]},description:``},autoComplete:{required:!1,tsType:{name:`HTMLInputElement['autocomplete']`,raw:`HTMLInputElement['autocomplete']`},description:``},autoFocus:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},discardOnEscape:{required:!1,tsType:{name:`boolean`},description:`If true, resets input’s value to initialValue and blurs when user presses
2
+ the escape key.`},doubleClickToEdit:{required:!1,tsType:{name:`boolean`},description:`If true, input renders as readonly initially and only becomes interactive
3
+ when double-clicked or when user focuses the readonly input and then
4
+ presses the enter key. Likewise, the input becomes readonly again when
5
+ it is blurred or when the user presses enter or escape.`},enterKeyHint:{required:!1,tsType:{name:`InputHTMLAttributes['enterKeyHint']`,raw:`InputHTMLAttributes<HTMLInputElement>['enterKeyHint']`},description:``},form:{required:!1,tsType:{name:`string`},description:``},id:{required:!1,tsType:{name:`string`},description:``},initialValue:{required:!1,tsType:{name:`string`},description:`The initial value of the text input. If props.initialValue changes at
6
+ any point, the new value will override the local state of the input.`},list:{required:!1,tsType:{name:`string`},description:``},max:{required:!1,tsType:{name:`number`},description:``},maxHeight:{required:!1,tsType:{name:`union`,raw:`null | number | string`,elements:[{name:`null`},{name:`number`},{name:`string`}]},description:``},maxLength:{required:!1,tsType:{name:`number`},description:``},min:{required:!1,tsType:{name:`number`},description:``},minHeight:{required:!1,tsType:{name:`union`,raw:`null | number | string`,elements:[{name:`null`},{name:`number`},{name:`string`}]},description:``},minLength:{required:!1,tsType:{name:`number`},description:``},multiLine:{required:!1,tsType:{name:`boolean`},description:`If true, input renders as a <textarea> that automatically grows and
7
+ shrinks vertically to adjust to the length of its contents.`},multiple:{required:!1,tsType:{name:`boolean`},description:``},name:{required:!1,tsType:{name:`string`},description:``},onBlur:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`FocusEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: ChangeEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`ChangeEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`ChangeEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onChangeValue:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => unknown`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`unknown`}}},description:`Custom change handler that only receives the changed value as an argument.
8
+ Enables passing a state setter function directly, e.g. onChangeValue={setValue}.`},onFocus:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`FocusEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyDown:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`KeyboardEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyUp:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<InputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`union`,raw:`HTMLInputElement | HTMLTextAreaElement`,elements:[{name:`HTMLInputElement`},{name:`HTMLTextAreaElement`}]}],raw:`KeyboardEvent<InputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},pattern:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},readOnly:{required:!1,tsType:{name:`boolean`},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLInputElement`}],raw:`Ref<HTMLInputElement>`},description:``},required:{required:!1,tsType:{name:`boolean`},description:``},rows:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`1`,computed:!1}},selectTextOnFocus:{required:!1,tsType:{name:`boolean`},description:`If true, the contents of the input are selected when it’s focused.`},size:{required:!1,tsType:{name:`number`},description:``},step:{required:!1,tsType:{name:`number`},description:``},style:{required:!1,tsType:{name:`CSSProperties`},description:``},submitOnEnter:{required:!1,tsType:{name:`boolean`},description:`If true, pressing enter/return submits the <form> that the input is a
9
+ part of, or else blurs the input if no form is found.`},tabIndex:{required:!1,tsType:{name:`number`},description:``},title:{required:!1,tsType:{name:`string`},description:``},type:{required:!1,tsType:{name:`union`,raw:`'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'`,elements:[{name:`literal`,value:`'email'`},{name:`literal`,value:`'number'`},{name:`literal`,value:`'password'`},{name:`literal`,value:`'search'`},{name:`literal`,value:`'tel'`},{name:`literal`,value:`'text'`},{name:`literal`,value:`'url'`}]},description:``,defaultValue:{value:`'text'`,computed:!1}}}};var{fn:c}=__STORYBOOK_MODULE_TEST__,l={component:o,parameters:{docs:{description:{component:'`InputText` is a React component that renders a textual input (`type: "text"|"email"|"number"|"password"|"search"|"tel"|"url"`) that is uncontrolled, but whose value is overwritten whenever `props.initialValue` changes. Also, if `props.selectTextOnFocus` is true, it selects the entire contents of the input whenever the input is focused. And it supports multiline inputs (rendered as a `<textarea>`) that automatically resize vertically to fit their content.'}}},tags:[`autodocs`],title:`UIKit/Controls/InputText`};const u={args:{className:`input-text`,name:`empty`,onBlur:c(),onChange:c(),onChangeValue:c(),onFocus:c(),onKeyDown:c(),onKeyUp:c(),placeholder:`enter text here…`}},d={args:{className:`input-text`,initialValue:`Bolivia`,placeholder:`enter country name`}},f={args:{className:`input-text`,initialValue:`Bolivia`,name:`country`,placeholder:`enter country name (selectTextOnFocus)`,selectTextOnFocus:!0}},p={args:{className:`multi-line-input-text`,initialValue:`The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”`,maxHeight:600,multiLine:!0,name:`multi-line-input`,placeholder:`enter text of any length`,selectTextOnFocus:!0}};var m={className:`multi-line-input-text`,maxHeight:600,multiLine:!0,name:`multi-line-submit-on-enter-input`,placeholder:`enter text of any length`,submitOnEnter:!0},h=new Intl.DateTimeFormat(void 0,{timeStyle:`medium`}).format;const g={args:m,render(){let[e,t]=(0,i.useState)(null),n=e?h(e):`never`;return(0,a.jsxs)(`form`,{onSubmit:e=>{e.preventDefault(),t(new Date)},children:[(0,a.jsx)(o,{...m}),(0,a.jsxs)(`pre`,{children:[`Last submitted: `,n]})]})}},_={args:{...m,name:`${m.name}-no-form`}};var v={className:`input-text-double-click-to-edit`,doubleClickToEdit:!0,initialValue:`Lorem ipsum dolor sit amet`,name:`double-click-to-edit-input`};const y={args:v};var b={className:`input-text`,discardOnEscape:!0,initialValue:`Lorem ipsum`,name:`discard-on-escape-input`};const x={args:b},S={args:{...b,...v,name:`double-click-to-edit-and-discard-on-escape-input`}},C={args:{autoFocus:!0,name:`autofocus-input`}},w={args:{className:`multi-line-input-text`,initialValue:`This textarea has a minHeight of 50px.
10
+
11
+ Try deleting this text to see that the textarea does not shrink below the minimum height.`,minHeight:50,multiLine:!0,name:`multi-line-min-height-input`,placeholder:`enter text of any length`}},T={args:{className:`multi-line-input-text`,initialValue:`This textarea has a maxHeight of 150px.
12
+
13
+ Line 3
14
+ Line 4
15
+ Line 5
16
+ Line 6
17
+ Line 7
18
+ Line 8
19
+ Line 9
20
+ Line 10`,maxHeight:150,multiLine:!0,name:`multi-line-max-height-input`,placeholder:`enter text of any length`}},E={args:{className:`multi-line-input-text`,initialValue:`This textarea has minHeight of 100px and maxHeight of 200px.`,maxHeight:200,minHeight:100,multiLine:!0,name:`multi-line-min-max-height-input`,placeholder:`enter text of any length`}},D={args:{className:`multi-line-input-css-transition`,multiLine:!0,name:`multi-line-input-css-transition`,placeholder:`Write a quick note here`,rows:4}};var O={className:`multi-line-input-text`,initialValue:`This multi-line input should resize to fit its contents when the popover opens even though it initializes with display: none as a result of being inside a hidden popover element so it doesn’t have any dimensions when the component initially renders.`,multiLine:!0,name:`multi-line-input-in-popover`,selectTextOnFocus:!0};const k={args:O,render(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`button`,{popoverTarget:`multi-line-input-popover`,children:`Open Popover`}),(0,a.jsx)(`div`,{id:`multi-line-input-popover`,popover:`auto`,children:(0,a.jsx)(o,{...O})})]})}};var A={autoFocus:!0,initialValue:`This multi-line input should be focused when the popover opens`,multiLine:!0,name:`multi-line-input-with-autofocus-in-popover`,selectTextOnFocus:!0};const j={args:A,render(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`button`,{popoverTarget:`multi-line-input-with-autofocus-popover`,children:`Open Popover`}),(0,a.jsx)(`div`,{id:`multi-line-input-with-autofocus-popover`,popover:`auto`,children:(0,a.jsx)(o,{...A})})]})}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
21
+ args: {
22
+ className: 'input-text',
23
+ name: 'empty',
24
+ // NOTE spies are a workaround for a bug related to implicit arg detection
25
+ onBlur: fn(),
26
+ onChange: fn(),
27
+ onChangeValue: fn(),
28
+ onFocus: fn(),
29
+ onKeyDown: fn(),
30
+ onKeyUp: fn(),
31
+ placeholder: 'enter text here…'
32
+ }
33
+ }`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
34
+ args: {
35
+ className: 'input-text',
36
+ initialValue: 'Bolivia',
37
+ placeholder: 'enter country name'
38
+ }
39
+ }`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
40
+ args: {
41
+ className: 'input-text',
42
+ initialValue: 'Bolivia',
43
+ name: 'country',
44
+ placeholder: 'enter country name (selectTextOnFocus)',
45
+ selectTextOnFocus: true
46
+ }
47
+ }`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
48
+ args: {
49
+ className: 'multi-line-input-text',
50
+ initialValue: 'The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”',
51
+ maxHeight: 600,
52
+ multiLine: true,
53
+ name: 'multi-line-input',
54
+ placeholder: 'enter text of any length',
55
+ selectTextOnFocus: true
56
+ }
57
+ }`,...p.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
58
+ args: SUBMIT_ON_ENTER_PROPS,
59
+ render() {
60
+ const [lastSubmitDate, setLastSubmitDate] = useState<Date | null>(null);
61
+ const lastSubmit = lastSubmitDate ? formatDate(lastSubmitDate) : 'never';
62
+ return <form onSubmit={(event: FormEvent<HTMLFormElement>) => {
63
+ event.preventDefault();
64
+ setLastSubmitDate(new Date());
65
+ }}>
66
+ <InputText {...SUBMIT_ON_ENTER_PROPS} />
67
+ <pre>Last submitted: {lastSubmit}</pre>
68
+ </form>;
69
+ }
70
+ }`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
71
+ args: {
72
+ ...SUBMIT_ON_ENTER_PROPS,
73
+ name: \`\${SUBMIT_ON_ENTER_PROPS.name}-no-form\`
74
+ }
75
+ }`,..._.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
76
+ args: DOUBLE_CLICK_TO_EDIT_PROPS
77
+ }`,...y.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
78
+ args: DISCARD_ON_ESCAPE_PROPS
79
+ }`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
80
+ args: {
81
+ ...DISCARD_ON_ESCAPE_PROPS,
82
+ ...DOUBLE_CLICK_TO_EDIT_PROPS,
83
+ name: 'double-click-to-edit-and-discard-on-escape-input'
84
+ }
85
+ }`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
86
+ args: {
87
+ autoFocus: true,
88
+ name: 'autofocus-input'
89
+ }
90
+ }`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
91
+ args: {
92
+ className: 'multi-line-input-text',
93
+ initialValue: 'This textarea has a minHeight of 50px.\\n\\nTry deleting this text to see that the textarea does not shrink below the minimum height.',
94
+ minHeight: 50,
95
+ multiLine: true,
96
+ name: 'multi-line-min-height-input',
97
+ placeholder: 'enter text of any length'
98
+ }
99
+ }`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
100
+ args: {
101
+ className: 'multi-line-input-text',
102
+ initialValue: 'This textarea has a maxHeight of 150px.\\n\\nLine 3\\nLine 4\\nLine 5\\nLine 6\\nLine 7\\nLine 8\\nLine 9\\nLine 10',
103
+ maxHeight: 150,
104
+ multiLine: true,
105
+ name: 'multi-line-max-height-input',
106
+ placeholder: 'enter text of any length'
107
+ }
108
+ }`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
109
+ args: {
110
+ className: 'multi-line-input-text',
111
+ initialValue: 'This textarea has minHeight of 100px and maxHeight of 200px.',
112
+ maxHeight: 200,
113
+ minHeight: 100,
114
+ multiLine: true,
115
+ name: 'multi-line-min-max-height-input',
116
+ placeholder: 'enter text of any length'
117
+ }
118
+ }`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
119
+ args: {
120
+ className: 'multi-line-input-css-transition',
121
+ multiLine: true,
122
+ name: 'multi-line-input-css-transition',
123
+ placeholder: 'Write a quick note here',
124
+ rows: 4
125
+ }
126
+ }`,...D.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
127
+ args: MULTI_LINE_INPUT_IN_POPOVER_PROPS,
128
+ render() {
129
+ return <>
130
+ <button popoverTarget="multi-line-input-popover">Open Popover</button>
131
+ <div id="multi-line-input-popover" popover="auto">
132
+ <InputText {...MULTI_LINE_INPUT_IN_POPOVER_PROPS} />
133
+ </div>
134
+ </>;
135
+ }
136
+ }`,...k.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
137
+ args: MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS,
138
+ render() {
139
+ return <>
140
+ <button popoverTarget="multi-line-input-with-autofocus-popover">
141
+ Open Popover
142
+ </button>
143
+ <div id="multi-line-input-with-autofocus-popover" popover="auto">
144
+ <InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
145
+ </div>
146
+ </>;
147
+ }
148
+ }`,...j.parameters?.docs?.source}}};const M=[`EmptyInput`,`InputWithInitialValue`,`InputWithInitialValueAndSelectTextOnFocus`,`MultiLineInputWithInitialValueAndSelectTextOnFocus`,`MultiLineInputWithSubmitOnEnter`,`MultiLineInputWithSubmitOnEnterNoForm`,`InputWithDoubleClickToEdit`,`InputWithDiscardOnEscape`,`InputWithDoubleClickToEditAndDiscardOnEscape`,`InputWithAutoFocus`,`MultiLineInputWithMinHeight`,`MultiLineInputWithMaxHeight`,`MultiLineInputWithMinHeightAndMaxHeight`,`MultiLineInputWithCSSTransition`,`MultiLineInputInPopover`,`MultiLineInputWithAutoFocusInPopover`];export{u as EmptyInput,C as InputWithAutoFocus,x as InputWithDiscardOnEscape,y as InputWithDoubleClickToEdit,S as InputWithDoubleClickToEditAndDiscardOnEscape,d as InputWithInitialValue,f as InputWithInitialValueAndSelectTextOnFocus,k as MultiLineInputInPopover,j as MultiLineInputWithAutoFocusInPopover,D as MultiLineInputWithCSSTransition,p as MultiLineInputWithInitialValueAndSelectTextOnFocus,T as MultiLineInputWithMaxHeight,w as MultiLineInputWithMinHeight,E as MultiLineInputWithMinHeightAndMaxHeight,g as MultiLineInputWithSubmitOnEnter,_ as MultiLineInputWithSubmitOnEnterNoForm,M as __namedExportsOrder,l as default};
@@ -0,0 +1,184 @@
1
+ import{n as e}from"./lib-WXkUx4TK.js";import"./react-dom-CFVoDXTy.js";import{t}from"./jsx-runtime-CZwoFFIL.js";import"./components-CuDS54ZU.js";import{a as n}from"./blocks-C4xgyV4X.js";var r=t(),i=`data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.0001%200C7.16466%200%200%207.17472%200%2016.0256C0%2023.1061%204.58452%2029.1131%2010.9419%2031.2322C11.7415%2031.3805%2012.0351%2030.8845%2012.0351%2030.4613C12.0351%2030.0791%2012.0202%2028.8167%2012.0133%2027.4776C7.56209%2028.447%206.62283%2025.5868%206.62283%2025.5868C5.89499%2023.7345%204.8463%2023.2419%204.8463%2023.2419C3.39461%2022.2473%204.95573%2022.2678%204.95573%2022.2678C6.56242%2022.3808%207.40842%2023.9192%207.40842%2023.9192C8.83547%2026.3691%2011.1514%2025.6609%2012.0645%2025.2514C12.2081%2024.2156%2012.6227%2023.5087%2013.0803%2023.1085C9.52648%2022.7032%205.7906%2021.3291%205.7906%2015.1886C5.7906%2013.4389%206.41563%2012.0094%207.43916%2010.8871C7.27303%2010.4834%206.72537%208.85349%207.59415%206.64609C7.59415%206.64609%208.93774%206.21539%2011.9953%208.28877C13.2716%207.9337%2014.6404%207.75563%2016.0001%207.74953C17.3599%207.75563%2018.7297%207.9337%2020.0084%208.28877C23.0623%206.21539%2024.404%206.64609%2024.404%206.64609C25.2749%208.85349%2024.727%2010.4834%2024.5608%2010.8871C25.5868%2012.0094%2026.2075%2013.4389%2026.2075%2015.1886C26.2075%2021.3437%2022.4645%2022.699%2018.9017%2023.0957C19.4756%2023.593%2019.9869%2024.5683%2019.9869%2026.0634C19.9869%2028.2077%2019.9684%2029.9334%2019.9684%2030.4613C19.9684%2030.8877%2020.2564%2031.3874%2021.0674%2031.2301C27.4213%2029.1086%2032%2023.1037%2032%2016.0256C32%207.17472%2024.8364%200%2016.0001%200ZM5.99257%2022.8288C5.95733%2022.9084%205.83227%2022.9322%205.71834%2022.8776C5.60229%2022.8253%205.53711%2022.7168%205.57474%2022.6369C5.60918%2022.5549%205.7345%2022.5321%205.85029%2022.587C5.9666%2022.6393%206.03284%2022.7489%205.99257%2022.8288ZM6.7796%2023.5321C6.70329%2023.603%206.55412%2023.5701%206.45291%2023.4581C6.34825%2023.3464%206.32864%2023.197%206.40601%2023.125C6.4847%2023.0542%206.62937%2023.0874%206.73429%2023.1991C6.83895%2023.3121%206.85935%2023.4605%206.7796%2023.5321ZM7.31953%2024.4321C7.2215%2024.5003%207.0612%2024.4363%206.96211%2024.2938C6.86407%2024.1513%206.86407%2023.9804%206.96422%2023.9119C7.06358%2023.8435%207.2215%2023.905%207.32191%2024.0465C7.41968%2024.1914%207.41968%2024.3623%207.31953%2024.4321ZM8.23267%2025.4743C8.14497%2025.5712%207.95818%2025.5452%207.82146%2025.413C7.68156%2025.2838%207.64261%2025.1004%207.73058%2025.0035C7.81934%2024.9064%208.00719%2024.9337%208.14497%2025.0648C8.28381%2025.1938%208.3262%2025.3785%208.23267%2025.4743ZM9.41281%2025.8262C9.37413%2025.9517%209.19423%2026.0088%209.013%2025.9554C8.83203%2025.9005%208.7136%2025.7535%208.75016%2025.6266C8.78778%2025.5003%208.96848%2025.4408%209.15104%2025.4979C9.33174%2025.5526%209.45044%2025.6985%209.41281%2025.8262ZM10.7559%2025.9754C10.7604%2026.1076%2010.6067%2026.2172%2010.4165%2026.2196C10.2252%2026.2238%2010.0704%2026.1169%2010.0683%2025.9868C10.0683%2025.8534%2010.2185%2025.7448%2010.4098%2025.7416C10.6001%2025.7379%2010.7559%2025.8441%2010.7559%2025.9754ZM12.0753%2025.9248C12.0981%2026.0537%2011.9658%2026.1862%2011.7769%2026.2215C11.5912%2026.2554%2011.4192%2026.1758%2011.3957%2026.0479C11.3726%2025.9157%2011.5072%2025.7833%2011.6927%2025.7491C11.8819%2025.7162%2012.0512%2025.7937%2012.0753%2025.9248Z'%20fill='%23161614'/%3e%3c/svg%3e`,a=`data:image/svg+xml,%3csvg%20width='33'%20height='32'%20viewBox='0%200%2033%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_10031_177575)'%3e%3cmask%20id='mask0_10031_177575'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='4'%20width='33'%20height='25'%3e%3cpath%20d='M32.5034%204.00195H0.503906V28.7758H32.5034V4.00195Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_10031_177575)'%3e%3cpath%20d='M27.5928%206.20817C25.5533%205.27289%2023.3662%204.58382%2021.0794%204.18916C21.0378%204.18154%2020.9962%204.20057%2020.9747%204.23864C20.6935%204.73863%2020.3819%205.3909%2020.1637%205.90358C17.7042%205.53558%2015.2573%205.53558%2012.8481%205.90358C12.6299%205.37951%2012.307%204.73863%2012.0245%204.23864C12.003%204.20184%2011.9614%204.18281%2011.9198%204.18916C9.63431%204.58255%207.44721%205.27163%205.40641%206.20817C5.38874%206.21578%205.3736%206.22848%205.36355%206.24497C1.21508%2012.439%200.078646%2018.4809%200.636144%2024.4478C0.638667%2024.477%200.655064%2024.5049%200.677768%2024.5227C3.41481%2026.5315%206.06609%2027.7511%208.66815%2028.5594C8.70979%2028.5721%208.75392%2028.5569%208.78042%2028.5226C9.39594%2027.6826%209.94461%2026.7968%2010.4151%2025.8653C10.4428%2025.8107%2010.4163%2025.746%2010.3596%2025.7244C9.48927%2025.3945%208.66058%2024.9922%207.86343%2024.5354C7.80038%2024.4986%207.79533%2024.4084%207.85333%2024.3653C8.02108%2024.2397%208.18888%2024.109%208.34906%2023.977C8.37804%2023.9529%208.41842%2023.9478%208.45249%2023.963C13.6894%2026.3526%2019.359%2026.3526%2024.5341%2023.963C24.5682%2023.9465%2024.6086%2023.9516%2024.6388%2023.9757C24.799%2024.1077%2024.9668%2024.2397%2025.1358%2024.3653C25.1938%2024.4084%2025.19%2024.4986%2025.127%2024.5354C24.3298%2025.0011%2023.5011%2025.3945%2022.6296%2025.7232C22.5728%2025.7447%2022.5476%2025.8107%2022.5754%2025.8653C23.0559%2026.7955%2023.6046%2027.6812%2024.2087%2028.5213C24.234%2028.5569%2024.2794%2028.5721%2024.321%2028.5594C26.9357%2027.7511%2029.5869%2026.5315%2032.324%2024.5227C32.348%2024.5049%2032.3631%2024.4783%2032.3656%2024.4491C33.0328%2017.5506%2031.2481%2011.5584%2027.6344%206.24623C27.6256%206.22848%2027.6105%206.21578%2027.5928%206.20817ZM11.1971%2020.8146C9.62043%2020.8146%208.32129%2019.3679%208.32129%2017.5913C8.32129%2015.8146%209.59523%2014.368%2011.1971%2014.368C12.8115%2014.368%2014.0981%2015.8273%2014.0729%2017.5913C14.0729%2019.3679%2012.7989%2020.8146%2011.1971%2020.8146ZM21.8299%2020.8146C20.2533%2020.8146%2018.9541%2019.3679%2018.9541%2017.5913C18.9541%2015.8146%2020.228%2014.368%2021.8299%2014.368C23.4444%2014.368%2024.7309%2015.8273%2024.7057%2017.5913C24.7057%2019.3679%2023.4444%2020.8146%2021.8299%2020.8146Z'%20fill='%235865F2'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_10031_177575'%3e%3crect%20width='31.9995'%20height='32'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e`,o=`data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.3313%208.44657C30.9633%207.08998%2029.8791%206.02172%2028.5022%205.65916C26.0067%205.00026%2016%205.00026%2016%205.00026C16%205.00026%205.99333%205.00026%203.4978%205.65916C2.12102%206.02172%201.03665%207.08998%200.668678%208.44657C0%2010.9053%200%2016.0353%200%2016.0353C0%2016.0353%200%2021.1652%200.668678%2023.6242C1.03665%2024.9806%202.12102%2026.0489%203.4978%2026.4116C5.99333%2027.0703%2016%2027.0703%2016%2027.0703C16%2027.0703%2026.0067%2027.0703%2028.5022%2026.4116C29.8791%2026.0489%2030.9633%2024.9806%2031.3313%2023.6242C32%2021.1652%2032%2016.0353%2032%2016.0353C32%2016.0353%2032%2010.9053%2031.3313%208.44657Z'%20fill='%23ED1D24'/%3e%3cpath%20d='M12.7266%2020.6934L21.0902%2016.036L12.7266%2011.3781V20.6934Z'%20fill='white'/%3e%3c/svg%3e`,s=`data:image/svg+xml,%3csvg%20width='33'%20height='32'%20viewBox='0%200%2033%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_10031_177597)'%3e%3cpath%20opacity='0.7'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17%207.87059C17%206.48214%2017.9812%205.28722%2019.3431%205.01709L29.5249%202.99755C31.3238%202.64076%2033%204.01717%2033%205.85105V22.1344C33%2023.5229%2032.0188%2024.7178%2030.6569%2024.9879L20.4751%2027.0074C18.6762%2027.3642%2017%2025.9878%2017%2024.1539L17%207.87059Z'%20fill='%23B7F0EF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%205.85245C1%204.01857%202.67623%202.64215%204.47507%202.99895L14.6569%205.01848C16.0188%205.28861%2017%206.48354%2017%207.87198V24.1553C17%2025.9892%2015.3238%2027.3656%2013.5249%2027.0088L3.34311%2024.9893C1.98119%2024.7192%201%2023.5242%201%2022.1358V5.85245Z'%20fill='%2387E6E5'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.543%205.71289C15.543%205.71289%2016.8157%205.96289%2017.4002%206.57653C17.9847%207.19016%2018.4521%209.03107%2018.4521%209.03107C18.4521%209.03107%2018.4521%2025.1106%2018.4521%2026.9629C18.4521%2028.8152%2019.3775%2031.4174%2019.3775%2031.4174L17.4002%2028.8947L16.2575%2031.4174C16.2575%2031.4174%2015.543%2029.0765%2015.543%2027.122C15.543%2025.1674%2015.543%205.71289%2015.543%205.71289Z'%20fill='%2361C1FD'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_10031_177597'%3e%3crect%20width='32'%20height='32'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e`,c=``+new URL(`styling-Bk6zjRzU.png`,import.meta.url).href,l=``+new URL(`context-C0qIqeS4.png`,import.meta.url).href,u=`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkQAAAEECAMAAAD+jtuZAAAA1VBMVEUAAAC97a687K687K697K697a687a697K+87K6/76+87K7///831dPd9ddmvzyc24PE7riR1XWH0GdxxUru+utxxEr3/fXl+OHN9fTA7bNQ2tn7/vrm+vri99xE19Z8yllp396n4ZG07++o7ezz/Pz9/v2O6ObN8cKb6umC5eTf9tnZ9NHq+ebV883y/O/s+unJ8L7y/fzR8sex56Da9/dd3dtE2NZ24+GM027B8vFrwkO36qeW2HxrwkSm4ZGBzWB3yFHC7bTe9tas5Jih3orA8vJc3dy6weW4AAAACnRSTlMA3694YO/PkFAQwrWpKAAADgtJREFUeNrs2d1qg0AQQGGTNH+zCF4siixeBqHGIL5B3v+lGrbU3rQ0uhsGt+d7hsMww2TeebfdCDDLYfuWfTvtBVhgM2V0FGChXebtBFjsmD28CRDg9IiIjRpB9mcGEcLXoq0AQbbZQYAgm0yAQEQEIoI+IgIRQR8RgYigj4hARNBHRCAi6CMiEBH0ERGICPqICEQEfUQEIoI+IgIRQR8RgYigj4hARNBHRCCiZ9R9c7XWNmMhiO4fRFSPTWkmFRlFl3pEbW6NR0avk3JERWed+UFJRXGlGlHdV878xg2CiFKMqG6bm5kwi14uuYja3DrzJyuIJ6mIiu7qzHN6QTTJRFT3TWmeVwqiSSIivwTN1ApiWX9ErT/kZ6sEsaw7oqKrnFnGCWJZb0T+mxGAKz+adUZU+29GmE4QiWJE9b1YZPBLUDBbPNxrQTCtiIY+X+L9eruYOC75p34gpEA6EY2LAqqsMxFV+ZeRjIJoRDTk81W2NJHZfNLxkf1g196WEgeCAAzv9XQSTpEECXIMJxFUdEUX3FPVvv8jLUnEzWCsmnHSw7jT35UIxQ1/9TQJSvRHNHEldVbNGMrXdHPo2qMC/RFN5JcgJHOqqBzaI7qWWoKagChw8+hEU6A3otal+BIUAy7fzaPrRgr0RnQrvATha7ucW0Y+RnNELYElyG+DJnOXw8jHaI7oWmIJwrdwXdqtS6A5oiv3XUFyhum1dDn0a8cP0hzRu0vQMgb9Yvd/Wq3Xmwo7Db0RtaTuZuALXM7nvvvR8LxndhJ6I/opdTcD38rl/GSfmed5JxpFeiOqSi1B+Jou53P/Ts26iNK7GacXzymiEuiPKFuCDBFQRCXQHFG6BBnEp4hKoDOi6uXKhDMsr0kRlUBbRJOOUSPoYE4RqdMU0ZWRBe0FFJE6LRFVfTCVTxGp0xHRtaljaK9NEanTEFHV4IYAOhSRMuyITG8IVhSRMvyIAjDakiJShh5RFcwWU0TKkCMyfhABBBSRKuyIWmC6FUWkCjuiWzBdkyJShR1RB0wXzykiRdgRmXut+lVQekQVZM/sLYropPzSI/KQ1dlbFNFJtSkiRdgRLcB8c4pIDS3WAAuEiPoMS9e+iK7AfD5FpIYuNgK0KSJVXxgqs+/hZzoUkRL0iDqgXxRGIGNFESlBj2gCekXDhwvHcc4HIK6JH9Hv7eb72ZmXU2MFat4/T2fd79vj97EzohboMxrMzp2DMQiLkSNab568lFBEvEZ9zXLsjIj5oMUoHN87nCEICxAjysqQi4iXz8jSiH4BvnDYu3By0nn0dQSifMSIvnW9xO5HvbatHOzej+ipclDbdHfZwbZlB5ZGNAFc0XDGBzR+vIEw+dcARDURI/qRDpM+45y9H1GD5fXr/NiyNCLWBjSjx/G5k3MxG0SQmu0fzUDYHC2iTbLX/GYcwYgy67qXy8PWiBaAIF2CelxAveEdvBok5xkIC7AiqiQNrRlPOKLMNjnRXt7D1oguoXx3R0tQbxze8Ik5e3cgyseKqFHUkFxEWYldlrI1oiqUazQ4XoIGN/DGvdT3szZSRJXCT1YyouxMfGYJWyNibcQl6GEY5fOaTh9fHo+T+QTC5jgRNQqjkI7o2+4wiqyNKIByhNPjJSjkAptmA2qavVjuS/4CJaJ+8QcrHRGrHUaRtRFdgbroaAm6P16CYPTn9blR8jB5eQiiligR1YubkI0oG0UbtmdtRK2Sl6CLWdESNHNePcBeLx1KomKUiHbFH7h0ROlW9MT2rI2ILZXvZvBLUJEwy+vBSYQAMJVbijoIEfXTPwrIR/T8cp7ZG1Hn40sQ/0V+GgKPH0TnEUCULN7jQ1UjELVCiKiWjI8i8hGxl/PM3oj+sndHTWkDQQDHed67YAaZACGIxVJAUKlg1aLVtvb7f6UmzUBNe7F3m+PY9Pb30gfGmc70P9ziLc0Ev9KxE+dDUKmb7T3HWTYViVT24/dCV2Q/ouzf+wkUMBHd5a/4G1GvbzoEfYjVQ1C5eDtHd7PiROrWaB9kvIeInktSwUSU/cZpBeBvRGbrIN3S24x/vRNNC78gOstr0tWxHFH+5wsoYCLa5I14HNFc6JsWh6CPBj/2aSTEj91CWiJTidDVthrR83A4fC6bqzERZT9yPEx99jWiidB2Vljp0JfIzMmJ/J1ObHTzEdmMaGcFCqiIWv5+eTFncPMR50PQ9oM8or7dr4c+GK6D7CMiUEFF9OB9RAuh6V6mRgJjumsIuQ5iLaLWb6CCimjV2lG14kFEc5MSbgXO6FSmTruFdZCuwVAUghsaERnzIKLQJKKZwPrYXb+eo07N1kE4IrQGuBAJLcUjCA+1DjLgiHBcRTQQeopHEB5qHYQjwnEV0YXQoDiC8BDrIBwRjquIeogjqLpTs5sPjgirAU608UcQXn4Zq20JbnBESAP8EYS3NlsHmYMbHBHSpPoRtO6+fyO+tao8sy/CtsENjgip1694BHWzC5FpUvZTaS7xVPxpZjQU9XvgBEeE1a52BCXyl3gkVEaKVxHrIBNwgiPCmgsV7SMo3t3ur4Uof/U2EVuIdZABOMERYS2Fmt4RNJK/zf6qYqp8dbcOQm8o4oiQTIaiWBS9j+VrU+VRJxVn2gezC90euMARoXVM1suSsrca1fAz+/PVe7F1b3YXdw0ucERoc6FBfQQl8i83SXEUL5olhbs4ckMRR4QUCg3qI2gmc+pQYqkwTV81/yJsBC5wRHiR0KA6grpSKZ4WZm7FiWf+RdgQHOCI0PDrILGU5aEk5a+ut3dx5G4+OCKsa6FBcQSNZLnb5IPMlZ14ZndxHXCAI8LrCU3FIyiJJd7UcB2kDw5wRGjYdZCZrCLOIrqhdvPBEaF9E1qKR1AiK6K4DsIRISHXQWayKoLrIBwRHmIdZCRtmBFbB+GIsFDrILG04ROxoYgjwsKsg5zJ6giug3BEWIbrILNqH++xz626hL3jiKoIx4ZfhJ1JS05prYNwRHjhpcnNR5J/vHc9FF3AvnFEVYQLs3WQG2kHuZsPjggvPDf6IuxIWkJuHYQjwguDvsnNRyztuSW1DsIR4YVBW3sosuxUULr54IjwwqCjf/Nh10xoW8CecURVhMG5/jqIVSeJoLQOwhHhhUEQaQ9FeOolR0o3HxwRWhZR2+TmA0/xXBl9AewXR1RFGOgPRbcST/1cGULrIBwRWhZRMNZeB8FTP1eG0M0HR4QXBvpDUSKx1M+VITUUcURYeURXexqKNJ4rQ2cdhCPCyiMa6K+DmNB5rgydmw+OCC8MUn3tdRAz6ufK0ByKOCK0PCLtdRDrQxCddRCOCC2PaCE03egPQZof5Mmsg3BEaHlE+usgmkOQ9gd5OjcfZRE9cET/kEdk8eYjf0q+ATL/L/pjyT/4UfYQdBTfItJeBzl5M6DsNsMQmXWQkkcMZxE1AcW3iCysg9wYDkHEbj6+548YVr+wAgzfIjrXvvkwuc2o01D0kv6Db0Bhgy7Bt4gqDEUnp2ZDENGbj1az+Qwq2cTdAgzvIkLefFQcguisg6weS1O5SyfrDSB4F1FHaDozus2ozVD0VD75fElfegIE7yIKxkLTFDME0b75WD0cN0vfiPLAjo9WYMq/iC6FrmQ0WouDuAarvrcyT8+fm5nj0ko2x83M5+GwldHOwr+IrgR9A7DqXfOV5xWUWmUV7bRAk38RDQR9EVhUiGh4BG86GnJE5bKIcn1BXwj25BGlJ9Tdw8sG/mnz7uGu9TR85IgUdhG1BX0XYE8eERgackQKu4gWgr4O2MMR2bOL6FzQtwB7OCJ7wmArEuS1wR6OyJ4wqNFQZDsibfwR/w2vI+oI8jgiXYeK6HwsqBuAPRyRPWFQo6HoGmzaHKF8AU1eRkT/5iOEevEwIvI3Hx2oGQ8jCqgPRXV7I/IyoktBWu3eiLyMiPbNR1S7NyIvIyI9FPXr15CXEVFeB4mWUD9eRkT35qNdw/chTyOiOhRFF1BLXkZEch0kGkygpryMiNzNx/hqXstz7BdfIyI1FEXtTlDnhHyNiMw6SL/dOU//PhwRkvuIiN18jC8XvwLiiPBcR0RqKBpHV4Mg9X9E9NhsvoODcBtRL0gRWQfJhqDU/xPRy/ABDsN9RBRuPvIh6C89YDgNcCg4/FA0vkzPMDVgKI4juggKLgUafggqVdPfVFPgNKJlULAQDkX5GVaujreuRDiNqBcUnAtH+u3FHwHxSGRTA1y6dv4hPz/DNFwDw3EdUS9wevMxzj7I65nzGxFeA5xaIm4+bA1BPBHtSwPcmiCGIuRthonaboCQ0ADHJoihCDMEcUPuNMC15RwxFGFuM/gsc6UBzvWuEUMR8jaDP5e50IAD6C0vgtzY5hCEccEnWXUNOJDe1zB1ZeUdaL4MUb7y53orGnBQc1FR+9uESzisg0f0s317x20YBqIoOvr4N2pUEFIhqE5jp8gSsv9FJQICBDBgwyKLNzTuWcMtnkRyLHub8UVAEZhrTUOeZa76bcZ7Mdda80YQczgSc62PYafPlREUjbnYtGsE3QgoIHlEt+E1y5URFJU8Ik+vjKBvRlBg+ojGiRFUOX1EzypaZkZQBQJE9KCiJTGCKhEhIh/n4Q4jqCYhItoy4jSjXkEi2m4ZrSmlK3+CKhQmItSLiEBE0CMiEBH0iAhEBD0iAhFBj4hARNAjIhAR9IgIRAQ9IgIRQY+IQETQIyIQEfSICEQEPSICEUGPiEBE0CMiFLPGgSJHax0o0lrnQJHeLgcHCjRmdnagQG+/Tg5k62zDLEK+k/3p+c5HlsPZ/vXt0YFdmra72OYHk2xFNYF+8mMAAAAASUVORK5CYII=`,d=``+new URL(`docs---vsFbMi.png`,import.meta.url).href,f=``+new URL(`share-DGA-UcQf.png`,import.meta.url).href,p=``+new URL(`figma-plugin-CH2hELiO.png`,import.meta.url).href,m=``+new URL(`testing-cbzR9l9r.png`,import.meta.url).href,h=``+new URL(`accessibility-W_h2acOZ.png`,import.meta.url).href,g=``+new URL(`theming-D6WJLNoW.png`,import.meta.url).href,_=``+new URL(`addon-library-BWUCAmyN.png`,import.meta.url).href;const v=()=>(0,r.jsx)(`svg`,{viewBox:`0 0 14 14`,width:`8px`,height:`14px`,style:{marginLeft:`4px`,display:`inline-block`,shapeRendering:`inherit`,verticalAlign:`middle`,fill:`currentColor`,"path fill":`currentColor`},children:(0,r.jsx)(`path`,{d:`m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z`})});function y(t){let y={a:`a`,code:`code`,h1:`h1`,li:`li`,p:`p`,ul:`ul`,...e(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n,{title:`UIKit/Introduction`}),`
2
+ `,(0,r.jsx)(y.h1,{id:`welcome-to-uikits-storybook`,children:`Welcome to UIKit’s Storybook`}),`
3
+ `,(0,r.jsxs)(y.p,{children:[(0,r.jsx)(y.a,{href:`https://github.com/acusti/uikit`,rel:`nofollow`,children:`UIKit`}),` provides a collection of UI
4
+ components and tools for building modern web and mobile applications. To
5
+ see what the components look like and how to use them, explore everything
6
+ under the “Controls” folder in the sidebar. The four components currently
7
+ documented here are:`]}),`
8
+ `,(0,r.jsxs)(y.ul,{children:[`
9
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-inputtext--docs`,children:`InputText`})}),`
10
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-CSSValueInput--docs`,children:`CSSValueInput`})}),`
11
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-Dropdown--docs`,children:`Dropdown`})}),`
12
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-controls-datepicker-datepicker--docs`,children:`DatePicker`})}),`
13
+ `]}),`
14
+ `,(0,r.jsx)(y.p,{children:`There are also two custom React hooks available under the “Hooks” folder:`}),`
15
+ `,(0,r.jsxs)(y.ul,{children:[`
16
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-hooks-useisoutofbounds--docs`,children:`useIsOutOfBounds`})}),`
17
+ `,(0,r.jsx)(y.li,{children:(0,r.jsx)(y.a,{href:`../?path=/docs/uikit-hooks-usekeyboardevents--docs`,children:`useKeyboardEvents`})}),`
18
+ `]}),`
19
+ `,(0,r.jsx)(y.p,{children:`See below for more about Storybook and how it works.`}),`
20
+ `,`
21
+ `,(0,r.jsxs)(`div`,{className:`sb-container`,children:[(0,r.jsxs)(`div`,{className:`sb-section-title`,children:[(0,r.jsx)(y.h1,{id:`configure-your-project`,children:`Configure your project`}),(0,r.jsx)(y.p,{children:`Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.`})]}),(0,r.jsxs)(`div`,{className:`sb-section`,children:[(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:c,alt:`A wall of logos representing different styling technologies`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Add styling and CSS`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/styling-and-css`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:l,alt:`An abstraction representing the composition of data for a component`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Provide context and mocking`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:u,alt:`A representation of typography and image assets`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Load assets and resources`}),(0,r.jsxs)(`p`,{className:`sb-section-item-paragraph`,children:[`To link static files (like fonts) to your projects and stories, use the
22
+ `,(0,r.jsx)(y.code,{children:`staticDirs`}),` configuration option to specify folders to load when
23
+ starting Storybook.`]}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/images-and-assets`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]})]})]})]}),`
24
+ `,(0,r.jsxs)(`div`,{className:`sb-container`,children:[(0,r.jsxs)(`div`,{className:`sb-section-title`,children:[(0,r.jsx)(y.h1,{id:`do-more-with-storybook`,children:`Do more with Storybook`}),(0,r.jsx)(y.p,{children:`Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.`})]}),(0,r.jsx)(`div`,{className:`sb-section`,children:(0,r.jsxs)(`div`,{className:`sb-features-grid`,children:[(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:d,alt:`A screenshot showing the autodocs tag being set, pointing a docs page being generated`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Autodocs`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Auto-generate living,
25
+ interactive reference documentation from your components and stories.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-docs/autodocs`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:f,alt:`A browser window showing a Storybook being published to a chromatic.com URL`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Publish to Chromatic`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Publish your Storybook to review and collaborate with your entire team.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:p,alt:`Windows showing the Storybook plugin in Figma`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Figma Plugin`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Embed your stories into Figma to cross-reference the design and live
26
+ implementation in one place.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:m,alt:`Screenshot of tests passing and failing`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Testing`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Use stories to test a component in all its variations, no matter how
27
+ complex.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-tests/introduction`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:h,alt:`Screenshot of accessibility tests passing and failing`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Accessibility`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Automatically test your components for a11y issues as you develop.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/writing-tests/accessibility-testing`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-grid-item`,children:[(0,r.jsx)(`img`,{src:g,alt:`Screenshot of Storybook in light and dark mode`}),(0,r.jsx)(`h4`,{className:`sb-section-item-heading`,children:`Theming`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Theme Storybook's UI to personalize it to your project.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/docs/react/configure/theming`,target:`_blank`,children:[`Learn more`,(0,r.jsx)(v,{})]})]})]})})]}),`
28
+ `,(0,r.jsxs)(`div`,{className:`sb-addon`,children:[(0,r.jsxs)(`div`,{className:`sb-addon-text`,children:[(0,r.jsx)(`h4`,{children:`Addons`}),(0,r.jsx)(`p`,{className:`sb-section-item-paragraph`,children:`Integrate your tools with Storybook to connect workflows.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/integrations/`,target:`_blank`,children:[`Discover all addons`,(0,r.jsx)(v,{})]})]}),(0,r.jsx)(`div`,{className:`sb-addon-img`,children:(0,r.jsx)(`img`,{src:_,alt:`Integrate your tools with Storybook to connect workflows.`})})]}),`
29
+ `,(0,r.jsxs)(`div`,{className:`sb-section sb-socials`,children:[(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:i,alt:`Github logo`,className:`sb-explore-image`}),(0,r.jsx)(y.p,{children:`Join our contributors building the future of UI development.`}),(0,r.jsxs)(`a`,{href:`https://github.com/storybookjs/storybook`,target:`_blank`,children:[`Star on GitHub`,(0,r.jsx)(v,{})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:a,alt:`Discord logo`,className:`sb-explore-image`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(y.p,{children:`Get support and chat with frontend developers.`}),(0,r.jsxs)(`a`,{href:`https://discord.gg/storybook`,target:`_blank`,children:[`Join Discord server`,(0,r.jsx)(v,{})]})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:o,alt:`Youtube logo`,className:`sb-explore-image`}),(0,r.jsxs)(`div`,{children:[(0,r.jsx)(y.p,{children:`Watch tutorials, feature previews and interviews.`}),(0,r.jsxs)(`a`,{href:`https://www.youtube.com/@chromaticui`,target:`_blank`,children:[`Watch on YouTube`,(0,r.jsx)(v,{})]})]})]}),(0,r.jsxs)(`div`,{className:`sb-section-item`,children:[(0,r.jsx)(`img`,{src:s,alt:`A book`,className:`sb-explore-image`}),(0,r.jsx)(`p`,{children:`Follow guided walkthroughs on for key workflows.`}),(0,r.jsxs)(`a`,{href:`https://storybook.js.org/tutorials/`,target:`_blank`,children:[`Discover tutorials`,(0,r.jsx)(v,{})]})]})]}),`
30
+ `,(0,r.jsx)(`style`,{children:`
31
+ .sb-container {
32
+ margin-bottom: 48px;
33
+ }
34
+
35
+ .sb-section {
36
+ width: 100%;
37
+ display: flex;
38
+ flex-direction: row;
39
+ gap: 20px;
40
+ }
41
+
42
+ img {
43
+ object-fit: cover;
44
+ }
45
+
46
+ .sb-section-title {
47
+ margin-bottom: 32px;
48
+ }
49
+
50
+ .sb-section a:not(h1 a, h2 a, h3 a) {
51
+ font-size: 14px;
52
+ }
53
+
54
+ .sb-section-item, .sb-grid-item {
55
+ flex: 1;
56
+ display: flex;
57
+ flex-direction: column;
58
+ }
59
+
60
+ .sb-section-item-heading {
61
+ padding-top: 20px !important;
62
+ padding-bottom: 5px !important;
63
+ margin: 0 !important;
64
+ }
65
+ .sb-section-item-paragraph {
66
+ margin: 0;
67
+ padding-bottom: 10px;
68
+ }
69
+
70
+ .sb-chevron {
71
+ margin-left: 5px;
72
+ }
73
+
74
+ .sb-features-grid {
75
+ display: grid;
76
+ grid-template-columns: repeat(2, 1fr);
77
+ grid-gap: 32px 20px;
78
+ }
79
+
80
+ .sb-socials {
81
+ display: grid;
82
+ grid-template-columns: repeat(4, 1fr);
83
+ }
84
+
85
+ .sb-socials p {
86
+ margin-bottom: 10px;
87
+ }
88
+
89
+ .sb-explore-image {
90
+ max-height: 32px;
91
+ align-self: flex-start;
92
+ }
93
+
94
+ .sb-addon {
95
+ width: 100%;
96
+ display: flex;
97
+ align-items: center;
98
+ position: relative;
99
+ background-color: #EEF3F8;
100
+ border-radius: 5px;
101
+ border: 1px solid rgba(0, 0, 0, 0.05);
102
+ background: #EEF3F8;
103
+ height: 180px;
104
+ margin-bottom: 48px;
105
+ overflow: hidden;
106
+ }
107
+
108
+ .sb-addon-text {
109
+ padding-left: 48px;
110
+ max-width: 240px;
111
+ }
112
+
113
+ .sb-addon-text h4 {
114
+ padding-top: 0px;
115
+ }
116
+
117
+ .sb-addon-img {
118
+ position: absolute;
119
+ left: 345px;
120
+ top: 0;
121
+ height: 100%;
122
+ width: 200%;
123
+ overflow: hidden;
124
+ }
125
+
126
+ .sb-addon-img img {
127
+ width: 650px;
128
+ transform: rotate(-15deg);
129
+ margin-left: 40px;
130
+ margin-top: -72px;
131
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0);
132
+ backface-visibility: hidden;
133
+ }
134
+
135
+ @media screen and (max-width: 800px) {
136
+ .sb-addon-img {
137
+ left: 300px;
138
+ }
139
+ }
140
+
141
+ @media screen and (max-width: 600px) {
142
+ .sb-section {
143
+ flex-direction: column;
144
+ }
145
+
146
+ .sb-features-grid {
147
+ grid-template-columns: repeat(1, 1fr);
148
+ }
149
+
150
+ .sb-socials {
151
+ grid-template-columns: repeat(2, 1fr);
152
+ }
153
+
154
+ .sb-addon {
155
+ height: 280px;
156
+ align-items: flex-start;
157
+ padding-top: 32px;
158
+ overflow: hidden;
159
+ }
160
+
161
+ .sb-addon-text {
162
+ padding-left: 24px;
163
+ }
164
+
165
+ .sb-addon-img {
166
+ right: 0;
167
+ left: 0;
168
+ top: 130px;
169
+ bottom: 0;
170
+ overflow: hidden;
171
+ height: auto;
172
+ width: 124%;
173
+ }
174
+
175
+ .sb-addon-img img {
176
+ width: 1200px;
177
+ transform: rotate(-12deg);
178
+ margin-left: 0;
179
+ margin-top: 48px;
180
+ margin-bottom: -40px;
181
+ margin-left: -24px;
182
+ }
183
+ }
184
+ `})]})}function b(t={}){let{wrapper:n}={...e(),...t.components};return n?(0,r.jsx)(n,{...t,children:(0,r.jsx)(y,{...t})}):y(t)}export{v as RightArrow,b as default};
@@ -0,0 +1,177 @@
1
+ import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";import{t as i}from"./clsx-Bdud1Ih_.js";import{n as a}from"./dist-BreUZhw6.js";const o=`uktmonthcalendar`,s=`
2
+ .${o} {
3
+ display: flex;
4
+ flex-direction: column;
5
+ flex: 1 1 auto;
6
+ box-sizing: border-box;
7
+ max-width: 325px;
8
+ }
9
+
10
+ .${o}-month-title {
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ flex: 0 0 auto;
15
+ box-sizing: border-box;
16
+ padding-bottom: 25px;
17
+ }
18
+
19
+ h3.${o}-month-title-text {
20
+ font-size: 18px;
21
+ line-height: 23px;
22
+ font-weight: 600;
23
+ color: #000;
24
+ margin: 0px;
25
+ text-align: center;
26
+ }
27
+
28
+ .${o}-month-week {
29
+ flex: 0 0 auto;
30
+ display: grid;
31
+ grid-column-gap: 0px;
32
+ grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
33
+ grid-auto-flow: dense;
34
+ box-sizing: border-box;
35
+ padding-bottom: 12px;
36
+ }
37
+
38
+ .${o}-month-week .week-day-item {
39
+ flex: 1 1 auto;
40
+ display: flex;
41
+ justify-content: center;
42
+ align-items: center;
43
+ }
44
+
45
+ .${o}-month-week span.week-day-item-text {
46
+ text-align: center;
47
+ font-size: 13px;
48
+ line-height: 21px;
49
+ margin: 0px;
50
+ color: #9a9a9a;
51
+ }
52
+
53
+ .${o}-month-days {
54
+ flex: 1 1 auto;
55
+ display: flex;
56
+ flex-direction: column;
57
+ }
58
+
59
+ .${o}-month-row {
60
+ flex: 1 1 auto;
61
+ display: grid;
62
+ grid-column-gap: 0px;
63
+ grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
64
+ grid-auto-flow: dense;
65
+ margin-bottom: 1px;
66
+ }
67
+
68
+ .${o}-month-day-item {
69
+ display: flex;
70
+ justify-content: center;
71
+ align-items: center;
72
+ position: relative;
73
+ height: 46px;
74
+ width: 46px;
75
+ cursor: pointer;
76
+ border: none;
77
+ background-color: transparent;
78
+ }
79
+
80
+ .${o}-month-day-item:disabled {
81
+ cursor: auto;
82
+ }
83
+
84
+ .${o}-month-day-item.is-today span.month-day-item-text {
85
+ color: #eb4e3d;
86
+ }
87
+
88
+ .${o}.is-range .${o}-month-day-item.is-selected {
89
+ background-color: #f6f6f6;
90
+ }
91
+
92
+ .${o}.is-range .${o}-month-day-item.start-date {
93
+ background-color: #f6f6f6;
94
+ border-top-left-radius: 50%;
95
+ border-bottom-left-radius: 50%;
96
+ }
97
+
98
+ .${o}-month-day-item.start-date:after {
99
+ background-color: #000;
100
+ opacity: 1;
101
+ visibility: visible;
102
+ }
103
+
104
+ .${o}-month-day-item.start-date span.month-day-item-text {
105
+ color: #fff;
106
+ }
107
+
108
+ .${o}.is-range .${o}-month-day-item.end-date {
109
+ background-color: #f6f6f6;
110
+ border-top-right-radius: 50%;
111
+ border-bottom-right-radius: 50%;
112
+ }
113
+
114
+ .${o}-month-day-item.end-date:after {
115
+ background-color: #000;
116
+ opacity: 1;
117
+ visibility: visible;
118
+ }
119
+
120
+ .${o}-month-day-item.end-date span.month-day-item-text {
121
+ color: #fff;
122
+ }
123
+
124
+ .${o}-month-day-item:hover:after,
125
+ .${o}-month-day-item.is-today:hover:after {
126
+ border-color: #000;
127
+ opacity: 1;
128
+ visibility: visible;
129
+ }
130
+
131
+ .${o}-month-day-item:after {
132
+ content: "";
133
+ position: absolute;
134
+ left: 50%;
135
+ top: 50%;
136
+ transform: translate(-50%, -50%);
137
+ pointer-events: none;
138
+ border-radius: 50%;
139
+ border: 1px solid #000;
140
+ width: 43px;
141
+ height: 43px;
142
+ transition: opacity 0.25s ease-in-out;
143
+ opacity: 0;
144
+ visibility: hidden;
145
+ }
146
+
147
+ .${o}-month-day-item.is-empty:after {
148
+ content: none;
149
+ }
150
+
151
+ .${o}-month-day-item span.month-day-item-text {
152
+ text-align: center;
153
+ font-size: 13px;
154
+ line-height: 21px;
155
+ margin: 0px;
156
+ color: #000;
157
+ position: relative;
158
+ z-index: 1;
159
+ }
160
+ `;var c=1970,l=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],u=(e,t)=>(t?e.getUTCFullYear():e.getFullYear())-c;const d=(e,t)=>u(e,t)*12+(t?e.getUTCMonth():e.getMonth()),f=e=>Math.floor(e/12)+c,p=e=>{let t=e%12;return Number.isNaN(t)?``:(t<0&&(t=12+t),l[t])},m=(e,t,n)=>{let r=e<0?(12-Math.abs(e%12))%12:e%12,i=f(e);return n?new Date(Date.UTC(i,r,t)):new Date(i,r,t)},h=(e,t)=>m(e+1,0,t);var g=r(),_=e(t(),1),v=n(),y=Array(7).fill(null);function b(e){let t=(0,g.c)(47),{className:n,dateEnd:r,dateEndPreview:c,dateStart:l,isRange:u,month:b,onChange:x,onChangeEndPreview:S,title:C}=e,w,T,E,D,O,k,A;if(t[0]!==b||t[1]!==n||t[2]!==r||t[3]!==c||t[4]!==l||t[5]!==u||t[6]!==x||t[7]!==S||t[8]!==C){let e=new Date,g=Number.isFinite(b)?Math.max(-(2**53-1),Math.min(2**53-1,b)):d(e),j=f(g);C??=`${p(g)} ${j}`;let M=m(g,1),N=h(g),P=N.getDate(),F=M.getDay(),I=7-N.getDay()%7,L=P+F+I,[R,z,B]=[l,r,c].reduce((e,t,n)=>{if(t!=null&&!(t instanceof Date)&&(t=new Date(t)),t==null||Number.isNaN(t.getTime()))return e;let r=d(t);if(r<g?e[n]=-1:r>g?e[n]=P+1:e[n]=t.getDate(),n===1){let t=e[n-1],r=e[n];t!=null&&r!=null&&t>r&&(e[n-1]=r,e[n]=t)}return e},[null,null,null]),V;t[17]===x?V=t[18]:(V=e=>{let{date:t}=e.currentTarget.dataset;t&&x&&x(t)},t[17]=x,t[18]=V);let H=V,U;t[19]!==u||t[20]!==S?(U=e=>{if(u&&S){let{date:t}=e.currentTarget.dataset;t&&S(t)}},t[19]=u,t[20]=S,t[21]=U):U=t[21];let W=U;w=_.Fragment,t[22]===Symbol.for(`react.memo_cache_sentinel`)?(A=(0,v.jsx)(a,{href:`@acusti/date-picker/MonthCalendar`,children:s}),t[22]=A):A=t[22],t[23]!==n||t[24]!==u?(D=i(o,n,{"is-range":u}),t[23]=n,t[24]=u,t[25]=D):D=t[25],t[26]===C?O=t[27]:(O=(0,v.jsx)(`div`,{className:`${o}-month-title`,children:(0,v.jsx)(`h3`,{className:`${o}-month-title-text`,children:C})}),t[26]=C,t[27]=O);let G;t[28]===Symbol.for(`react.memo_cache_sentinel`)?(G=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Su`})}),t[28]=G):G=t[28];let K;t[29]===Symbol.for(`react.memo_cache_sentinel`)?(K=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Mo`})}),t[29]=K):K=t[29];let q;t[30]===Symbol.for(`react.memo_cache_sentinel`)?(q=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Tu`})}),t[30]=q):q=t[30];let J;t[31]===Symbol.for(`react.memo_cache_sentinel`)?(J=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`We`})}),t[31]=J):J=t[31];let Y;t[32]===Symbol.for(`react.memo_cache_sentinel`)?(Y=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Th`})}),t[32]=Y):Y=t[32];let X;t[33]===Symbol.for(`react.memo_cache_sentinel`)?(X=(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Fr`})}),t[33]=X):X=t[33],t[34]===Symbol.for(`react.memo_cache_sentinel`)?(k=(0,v.jsxs)(`div`,{className:`${o}-month-week`,children:[G,K,q,J,Y,X,(0,v.jsx)(`div`,{className:`week-day-item`,children:(0,v.jsx)(`span`,{className:`week-day-item-text`,children:`Sa`})})]}),t[34]=k):k=t[34],T=`${o}-month-days`,E=Array(Math.floor(L/7)).fill(null).map((t,n)=>(0,v.jsx)(`div`,{className:`${o}-month-row`,children:y.map((t,r)=>{r+=n*7;let a=r-F+1,s=a<1||a>P,c=s?null:m(g,a),l=R!=null&&a>R,u=z==null&&B!=null&&a<B||z!=null&&a<z;return(0,v.jsx)(`button`,{className:i(`${o}-month-day-item`,{"end-date":!s&&a===z,"is-empty":s,"is-selected":!s&&l&&u,"is-today":!s&&g===d(e)&&a===e.getDate(),"start-date":!s&&a===R}),"data-date":c?.toISOString(),disabled:s,onClick:H,onMouseEnter:W,type:`button`,children:s?null:(0,v.jsx)(`span`,{className:`month-day-item-text`,children:a})},`MonthDayItem-${a}`)})},`MonthRow-${n}`)),t[0]=b,t[1]=n,t[2]=r,t[3]=c,t[4]=l,t[5]=u,t[6]=x,t[7]=S,t[8]=C,t[9]=w,t[10]=T,t[11]=E,t[12]=D,t[13]=O,t[14]=k,t[15]=A,t[16]=C}else w=t[9],T=t[10],E=t[11],D=t[12],O=t[13],k=t[14],A=t[15],C=t[16];let j;t[35]!==T||t[36]!==E?(j=(0,v.jsx)(`div`,{className:T,children:E}),t[35]=T,t[36]=E,t[37]=j):j=t[37];let M;t[38]!==D||t[39]!==O||t[40]!==k||t[41]!==j?(M=(0,v.jsxs)(`div`,{className:D,children:[O,k,j]}),t[38]=D,t[39]=O,t[40]=k,t[41]=j,t[42]=M):M=t[42];let N;return t[43]!==w||t[44]!==A||t[45]!==M?(N=(0,v.jsxs)(w,{children:[A,M]}),t[43]=w,t[44]=A,t[45]=M,t[46]=N):N=t[46],N}b.__docgenInfo={description:``,methods:[],displayName:`MonthCalendar`,props:{className:{required:!1,tsType:{name:`string`},description:``},dateEnd:{required:!1,tsType:{name:`union`,raw:`Date | null | number | string`,elements:[{name:`Date`},{name:`null`},{name:`number`},{name:`string`}]},description:``},dateEndPreview:{required:!1,tsType:{name:`union`,raw:`null | string`,elements:[{name:`null`},{name:`string`}]},description:``},dateStart:{required:!1,tsType:{name:`union`,raw:`Date | null | number | string`,elements:[{name:`Date`},{name:`null`},{name:`number`},{name:`string`}]},description:``},isRange:{required:!1,tsType:{name:`boolean`},description:``},month:{required:!0,tsType:{name:`number`},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(date: string) => void`,signature:{arguments:[{type:{name:`string`},name:`date`}],return:{name:`void`}}},description:``},onChangeEndPreview:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(date: string) => void`,signature:{arguments:[{type:{name:`string`},name:`date`}],return:{name:`void`}}},description:``},title:{required:!1,tsType:{name:`string`},description:``}}};var x={argTypes:{dateEnd:{control:`date`,description:`(optional) end date of current date range`},dateStart:{control:`date`,description:`(optional) start date of current date range`}},component:b,parameters:{docs:{description:{component:"`MonthCalendar` is a React component that renders a calendar UI for the given month."}}},tags:[`autodocs`],title:`UIKit/Controls/DatePicker/MonthCalendar`};const S={args:{className:`month-calendar-story`,month:d(new Date)}},C={args:{className:`february-month-calendar-story`,month:181}},w={args:{className:`date-range-month-calendar-story`,dateEnd:new Date(2023,10,14),dateStart:new Date(2023,10,9),month:d(new Date(2023,10,1))}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
161
+ args: {
162
+ className: 'month-calendar-story',
163
+ month: getMonthFromDate(new Date())
164
+ }
165
+ }`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
166
+ args: {
167
+ className: 'february-month-calendar-story',
168
+ month: 181
169
+ }
170
+ }`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
171
+ args: {
172
+ className: 'date-range-month-calendar-story',
173
+ dateEnd: new Date(2023, 10, 14),
174
+ dateStart: new Date(2023, 10, 9),
175
+ month: getMonthFromDate(new Date(2023, 10, 1))
176
+ }
177
+ }`,...w.parameters?.docs?.source}}};const T=[`ThisMonthsCalendar`,`February1985Calendar`,`DateRangeDiwaliCalendar`];export{w as DateRangeDiwaliCalendar,C as February1985Calendar,S as ThisMonthsCalendar,T as __namedExportsOrder,x as default};