suus-component-library 0.1.5 → 0.1.9

package/dist/suus-component-library.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={suusButton:`_suusButton_1q9to_1`,icon:`_icon_1q9to_45`,label:`_label_1q9to_62`,primary:`_primary_1q9to_69`,secondary:`_secondary_1q9to_113`,loading:`_loading_1q9to_169`,loader:`_loader_1q9to_173`,"btn-spin":`_btn-spin_1q9to_1`,loaderSecondary:`_loaderSecondary_1q9to_182`};function r({label:e,onClick:r,type:i=`button`,disabled:a=!1,loading:o=!1,variant:s=`primary`,colorToken:c=`--colors-juice-sugarcane`,icon:l,...u}){return(0,t.jsx)(`button`,{type:i,onClick:r,disabled:a||o,style:{"--button-background-color":`var(${c})`},className:[n.suusButton,n[s],o?n.loading:``].filter(Boolean).join(` `),"aria-busy":o,...u,children:o?(0,t.jsx)(`span`,{className:`${n.loader} ${s===`primary`?``:n.loaderSecondary}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:n.icon,children:l}):null,(0,t.jsx)(`span`,{className:n.label,children:e})]})})}e.InputButton=r});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react/jsx-runtime`),require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react/jsx-runtime`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`SUUS Component Library`]={},e.jsxRuntime,e.React))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r={suusButton:`_suusButton_1q9to_1`,icon:`_icon_1q9to_45`,label:`_label_1q9to_62`,primary:`_primary_1q9to_69`,secondary:`_secondary_1q9to_113`,loading:`_loading_1q9to_169`,loader:`_loader_1q9to_173`,"btn-spin":`_btn-spin_1q9to_1`,loaderSecondary:`_loaderSecondary_1q9to_182`};function i({label:e,onClick:n,type:i=`button`,disabled:a=!1,loading:o=!1,variant:s=`primary`,colorToken:c=`--colors-juice-sugarcane`,icon:l,...u}){return(0,t.jsx)(`button`,{type:i,onClick:n,disabled:a||o,style:{"--button-background-color":`var(${c})`},className:[r.suusButton,r[s],o?r.loading:``].filter(Boolean).join(` `),"aria-busy":o,...u,children:o?(0,t.jsx)(`span`,{className:`${r.loader} ${s===`primary`?``:r.loaderSecondary}`,"aria-hidden":`true`}):(0,t.jsxs)(t.Fragment,{children:[l?(0,t.jsx)(`span`,{className:r.icon,children:l}):null,(0,t.jsx)(`span`,{className:r.label,children:e})]})})}var a={checkboxWrapper:`_checkboxWrapper_137qc_1`,checkboxInput:`_checkboxInput_137qc_15`,checkboxLabel:`_checkboxLabel_137qc_24`,customCheckbox:`_customCheckbox_137qc_34`,checkIcon:`_checkIcon_137qc_57`,checkboxText:`_checkboxText_137qc_76`,checkboxWrapperDisabled:`_checkboxWrapperDisabled_137qc_107`,checkboxWrapperError:`_checkboxWrapperError_137qc_133`,errorMessage:`_errorMessage_137qc_147`,checkboxWrapperGlassy:`_checkboxWrapperGlassy_137qc_157`};function o({label:e,name:n,id:r,error:i,variant:o=`default`,className:s,disabled:c,...l}){let u=r??`${n}-checkbox`;return(0,t.jsxs)(`div`,{className:[a.checkboxWrapper,o===`glassy`?a.checkboxWrapperGlassy:``,i?a.checkboxWrapperError:``,c?a.checkboxWrapperDisabled:``,s??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`checkbox`,id:u,name:n,disabled:c,className:a.checkboxInput,"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,...l}),(0,t.jsxs)(`label`,{htmlFor:u,className:a.checkboxLabel,children:[(0,t.jsx)(`span`,{className:a.customCheckbox,"aria-hidden":`true`,children:(0,t.jsx)(`svg`,{className:a.checkIcon,viewBox:`0 0 24 24`,focusable:`false`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M20 6L9 17L4 12`})})}),(0,t.jsx)(`span`,{className:a.checkboxText,children:e})]}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:a.errorMessage,children:i})]})}var s={chip:`_chip_9t0x4_1`,chipGlassy:`_chipGlassy_9t0x4_19`};function c({children:e,variant:n=`default`,className:r,...i}){return(0,t.jsx)(`span`,{className:[s.chip,n===`glassy`?s.chipGlassy:``,r??``].filter(Boolean).join(` `),...i,children:e})}var l={inputBlockVertical:`_inputBlockVertical_1vqyb_1`,inputLabel:`_inputLabel_1vqyb_7`,inputLabelGlassy:`_inputLabelGlassy_1vqyb_13`,dateInputWrapper:`_dateInputWrapper_1vqyb_17`,inputDateField:`_inputDateField_1vqyb_22`,inputDateFieldGlassy:`_inputDateFieldGlassy_1vqyb_54`,inputError:`_inputError_1vqyb_72`,calendarIconButton:`_calendarIconButton_1vqyb_76`,icon:`_icon_1vqyb_104`,errorMessage:`_errorMessage_1vqyb_113`};function u({label:e,name:r,id:i,value:a=null,maxDate:o,minDate:s,error:c,variant:u=`default`,className:m,ref:h,onDateChange:g,onBlur:_,disabled:v,...y}){let b=i??r,x=(0,n.useRef)(null),S=o??new Date;function C(e){x.current=e,typeof h==`function`?h(e):h&&(h.current=e)}function w(e){let t=e.target.value;if(!t){g?.(null);return}g?.(f(t))}function T(){v||(x.current?.showPicker?.(),x.current?.focus())}return(0,t.jsxs)(`div`,{className:l.inputBlockVertical,children:[(0,t.jsx)(`label`,{htmlFor:b,className:[l.inputLabel,u===`glassy`?l.inputLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:l.dateInputWrapper,children:[(0,t.jsx)(`input`,{id:b,name:r,ref:C,type:`date`,value:d(a),max:d(S),min:s?d(s):void 0,disabled:v,onChange:w,onBlur:_,className:[l.inputDateField,u===`glassy`?l.inputDateFieldGlassy:``,c?l.inputError:``,m??``].filter(Boolean).join(` `),"aria-invalid":!!c,"aria-describedby":c?`${r}-error`:void 0,...y}),(0,t.jsx)(`button`,{type:`button`,className:l.calendarIconButton,onClick:T,disabled:v,"aria-label":`Datum auswählen`,tabIndex:-1,children:(0,t.jsx)(p,{})})]}),c&&(0,t.jsx)(`span`,{id:`${r}-error`,className:l.errorMessage,children:c})]})}function d(e){return e?`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`:``}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(){return(0,t.jsxs)(`svg`,{className:l.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M8 2V5`}),(0,t.jsx)(`path`,{d:`M16 2V5`}),(0,t.jsx)(`path`,{d:`M3.5 9.09H20.5`}),(0,t.jsx)(`path`,{d:`M21 8.5V17.5C21 20 19.75 21.5 16.75 21.5H7.25C4.25 21.5 3 20 3 17.5V8.5C3 6 4.25 4.5 7.25 4.5H16.75C19.75 4.5 21 6 21 8.5Z`})]})}var m={inputBlockVertical:`_inputBlockVertical_1eq2l_1`,inputLabel:`_inputLabel_1eq2l_7`,inputLabelGlassy:`_inputLabelGlassy_1eq2l_13`,inputSelectField:`_inputSelectField_1eq2l_17`,inputSelectFieldGlassy:`_inputSelectFieldGlassy_1eq2l_27`,inputError:`_inputError_1eq2l_40`,errorMessage:`_errorMessage_1eq2l_44`};function h({label:e,name:n,options:r,placeholder:i,error:a,variant:o=`default`,className:s,disabled:c,...l}){return(0,t.jsxs)(`div`,{className:m.inputBlockVertical,children:[(0,t.jsx)(`label`,{htmlFor:n,className:[m.inputLabel,o===`glassy`?m.inputLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`select`,{id:n,name:n,disabled:c,className:[m.inputSelectField,o===`glassy`?m.inputSelectFieldGlassy:``,a?m.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${n}-error`:void 0,...l,children:[i&&(0,t.jsx)(`option`,{value:``,disabled:!0,children:i}),r.map(e=>(0,t.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),a&&(0,t.jsx)(`span`,{id:`${n}-error`,className:m.errorMessage,children:a})]})}var g={appLink:`_appLink_18ja7_1`,appLinkGlassy:`_appLinkGlassy_18ja7_27`,label:`_label_18ja7_35`,icon:`_icon_18ja7_40`,arrowIcon:`_arrowIcon_18ja7_51`};function _({children:e,href:n,onClick:r,newTab:i=!1,showArrow:a=!0,variant:o=`default`,className:s,...c}){function l(e){n||e.preventDefault(),r?.(e)}return(0,t.jsxs)(`a`,{href:n??`#`,onClick:l,target:n&&i?`_blank`:void 0,rel:n&&i?`noopener noreferrer`:void 0,className:[g.appLink,o===`glassy`?g.appLinkGlassy:``,s??``].filter(Boolean).join(` `),...c,children:[(0,t.jsx)(`span`,{className:g.label,children:e}),a&&(0,t.jsx)(`span`,{className:g.icon,"aria-hidden":`true`,children:(0,t.jsx)(v,{})})]})}function v(){return(0,t.jsxs)(`svg`,{className:g.arrowIcon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M5 12H19`}),(0,t.jsx)(`path`,{d:`M13 6L19 12L13 18`})]})}var y={inputBlockVertical:`_inputBlockVertical_1x5ym_1`,inputLabel:`_inputLabel_1x5ym_7`,inputLabelGlassy:`_inputLabelGlassy_1x5ym_13`,passwordInputWrapper:`_passwordInputWrapper_1x5ym_17`,inputTextField:`_inputTextField_1x5ym_22`,inputTextFieldGlassy:`_inputTextFieldGlassy_1x5ym_34`,inputError:`_inputError_1x5ym_52`,togglePasswordButton:`_togglePasswordButton_1x5ym_56`,icon:`_icon_1x5ym_88`,errorMessage:`_errorMessage_1x5ym_97`};function b({label:e,name:r,id:i,error:a,variant:o=`default`,colorToken:s=`--colors-juice-sugarcane`,className:c,disabled:l,ref:u,autoComplete:d=`current-password`,...f}){let[p,m]=(0,n.useState)(!1),h=i??r,g={"--password-accent-color":`var(${s})`};function _(){m(e=>!e)}return(0,t.jsxs)(`div`,{className:y.inputBlockVertical,style:g,children:[e&&(0,t.jsx)(`label`,{htmlFor:h,className:[y.inputLabel,o===`glassy`?y.inputLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:y.passwordInputWrapper,children:[(0,t.jsx)(`input`,{id:h,name:r,ref:u,type:p?`text`:`password`,disabled:l,autoComplete:d,className:[y.inputTextField,o===`glassy`?y.inputTextFieldGlassy:``,a?y.inputError:``,c??``].filter(Boolean).join(` `),"aria-invalid":!!a,"aria-describedby":a?`${r}-error`:void 0,...f}),(0,t.jsx)(`button`,{type:`button`,className:y.togglePasswordButton,onClick:_,disabled:l,"aria-label":p?`Passwort ausblenden`:`Passwort anzeigen`,"aria-pressed":p,children:p?(0,t.jsx)(S,{}):(0,t.jsx)(x,{})})]}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:y.errorMessage,children:a})]})}function x(){return(0,t.jsxs)(`svg`,{className:y.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`path`,{d:`M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z`}),(0,t.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`})]})}function S(){return(0,t.jsx)(`svg`,{className:y.icon,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M17.94 17.94A10.94 10.94 0 0 1 12 20C7 20 2.73 16.11 1 12c.74-1.64 1.82-3.06 3.11-4.24m3.52-2.42A10.94 10.94 0 0 1 12 4c5 0 9.27 3.89 11 8-1.1 2.42-2.91 4.5-5.06 5.94M1 1l22 22`})})}var C={inputBlockVertical:`_inputBlockVertical_n4fz9_1`,inputLabel:`_inputLabel_n4fz9_7`,inputLabelGlassy:`_inputLabelGlassy_n4fz9_13`,inputWrapper:`_inputWrapper_n4fz9_17`,inputTextField:`_inputTextField_n4fz9_22`,inputTextFieldGlassy:`_inputTextFieldGlassy_n4fz9_34`,inputValid:`_inputValid_n4fz9_60`,inputError:`_inputError_n4fz9_64`,loading:`_loading_n4fz9_68`,suggestionList:`_suggestionList_n4fz9_77`,suggestionItem:`_suggestionItem_n4fz9_94`,postalCode:`_postalCode_n4fz9_114`,locality:`_locality_n4fz9_119`,emptyState:`_emptyState_n4fz9_123`,successMessage:`_successMessage_n4fz9_138`,errorMessage:`_errorMessage_n4fz9_144`};function w({label:e,name:r,id:i,error:a,variant:o=`default`,className:s,disabled:c,placeholder:l=`z.B. 8001 oder Zürich`,ref:u,onChange:d,onBlur:f,onValueChange:p,onSuggestionSelect:m,...h}){let g=(0,n.useId)(),_=i??`${r}-${g}`,v=(0,n.useRef)(null),[y,b]=(0,n.useState)(``),[x,S]=(0,n.useState)([]),[w,T]=(0,n.useState)(!1),[E,D]=(0,n.useState)(!1),O=/^\d+$/.test(y.trim()),k=y.trim().length>=4&&O&&!w,A=k&&x.some(e=>e.postalCode===y.trim()),j=k&&!A;(0,n.useEffect)(()=>{let e=y.trim();if(e.length<2){S([]),D(!1);return}let t=new AbortController;async function n(){T(!0);try{let n=/^\d+$/.test(e)?`https://openplzapi.org/ch/Localities?postalCode=${e}`:`https://openplzapi.org/ch/Localities?locality=${encodeURIComponent(e)}`,r=await fetch(n,{signal:t.signal});if(!r.ok)throw Error(`Postal-Code-Suche fehlgeschlagen`);let i=await r.json();S(Array.from(new Map(i.map(e=>{let t=`${e.postalCode} ${e.name}`;return[t,{label:t,postalCode:e.postalCode,locality:e.name}]})).values()).slice(0,10)),D(!0)}catch(e){if(t.signal.aborted)return;console.error(e),S([]),D(!0)}finally{t.signal.aborted||T(!1)}}let r=window.setTimeout(n,300);return()=>{window.clearTimeout(r),t.abort()}},[y]);function M(e){v.current=e,typeof u==`function`?u(e):u&&(u.current=e)}function N(e){let t=e.target.value;b(t),p?.(t),d?.(e)}function P(e){b(e.label),S([]),p?.(e.label),m?.(e),v.current&&(v.current.value=e.label,v.current.dispatchEvent(new Event(`input`,{bubbles:!0})))}return(0,t.jsxs)(`div`,{className:C.inputBlockVertical,children:[(0,t.jsx)(`label`,{htmlFor:_,className:[C.inputLabel,o===`glassy`?C.inputLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsxs)(`div`,{className:C.inputWrapper,children:[(0,t.jsx)(`input`,{id:_,name:r,ref:M,type:`text`,inputMode:`search`,autoComplete:`postal-code`,disabled:c,placeholder:l,value:y,onChange:N,onBlur:f,className:[C.inputTextField,o===`glassy`?C.inputTextFieldGlassy:``,A?C.inputValid:``,j||a?C.inputError:``,s??``].filter(Boolean).join(` `),"aria-invalid":!!a||j,"aria-describedby":a?`${r}-error`:void 0,...h}),w&&(0,t.jsx)(`span`,{className:C.loading,children:`Lädt…`}),x.length>0&&(0,t.jsx)(`ul`,{className:C.suggestionList,children:x.map(e=>(0,t.jsx)(`li`,{children:(0,t.jsxs)(`button`,{type:`button`,className:C.suggestionItem,onMouseDown:e=>e.preventDefault(),onClick:()=>P(e),children:[(0,t.jsx)(`span`,{className:C.postalCode,children:e.postalCode}),(0,t.jsx)(`span`,{className:C.locality,children:e.locality})]})},e.label))}),E&&y.trim().length>=2&&x.length===0&&!w&&(0,t.jsx)(`div`,{className:C.emptyState,children:`Keine Schweizer PLZ oder Ortschaft gefunden.`})]}),A&&(0,t.jsx)(`span`,{className:C.successMessage,children:`Gültige Schweizer Postleitzahl`}),j&&(0,t.jsx)(`span`,{className:C.errorMessage,children:`Diese Schweizer Postleitzahl wurde nicht gefunden.`}),a&&(0,t.jsx)(`span`,{id:`${r}-error`,className:C.errorMessage,children:a})]})}var T={radioGroup:`_radioGroup_tmet2_1`,radioGroupGlassy:`_radioGroupGlassy_tmet2_11`,radioLabel:`_radioLabel_tmet2_15`,radioLabelGlassy:`_radioLabelGlassy_tmet2_20`,optionGroup:`_optionGroup_tmet2_24`,optionWrapper:`_optionWrapper_tmet2_31`,optionWrapperDisabled:`_optionWrapperDisabled_tmet2_37`,radioInput:`_radioInput_tmet2_41`,optionButton:`_optionButton_tmet2_53`,optionTitle:`_optionTitle_tmet2_77`,optionDescription:`_optionDescription_tmet2_83`,optionButtonError:`_optionButtonError_tmet2_117`,optionButtonGlassy:`_optionButtonGlassy_tmet2_122`,errorMessage:`_errorMessage_tmet2_144`};function E({label:e,name:n,options:r,error:i,variant:a=`default`,className:o,disabled:s,value:c,defaultValue:l,onChange:u,...d}){let f=c!==void 0;return(0,t.jsxs)(`fieldset`,{className:[T.radioGroup,a===`glassy`?T.radioGroupGlassy:``,o??``].filter(Boolean).join(` `),"aria-invalid":!!i,"aria-describedby":i?`${n}-error`:void 0,children:[e&&(0,t.jsx)(`legend`,{className:[T.radioLabel,a===`glassy`?T.radioLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsx)(`div`,{className:T.optionGroup,children:r.map(e=>{let r=f?{checked:c===e.value}:{defaultChecked:l===e.value};return(0,t.jsxs)(`label`,{className:[T.optionWrapper,s?T.optionWrapperDisabled:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{type:`radio`,name:n,value:e.value,disabled:s,className:T.radioInput,onChange:u,...r,...d}),(0,t.jsxs)(`span`,{className:[T.optionButton,a===`glassy`?T.optionButtonGlassy:``,i?T.optionButtonError:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:T.optionTitle,children:e.label}),e.description&&(0,t.jsx)(`span`,{className:T.optionDescription,children:e.description})]})]},e.value)})}),i&&(0,t.jsx)(`span`,{id:`${n}-error`,className:T.errorMessage,children:i})]})}var D={switchWrapper:`_switchWrapper_f34wd_1`,switchCheckbox:`_switchCheckbox_f34wd_7`,switchLabel:`_switchLabel_f34wd_15`,switchLabelGlassy:`_switchLabelGlassy_f34wd_24`,switchBackground:`_switchBackground_f34wd_28`,switchButton:`_switchButton_f34wd_42`,iconChecked:`_iconChecked_f34wd_86`,iconUnchecked:`_iconUnchecked_f34wd_87`,switchText:`_switchText_f34wd_119`,errorMessage:`_errorMessage_f34wd_129`};function O({name:e,id:n,label:r,error:i,variant:a=`default`,className:o,disabled:s,...c}){let l=n??`${e}-switch`;return(0,t.jsxs)(`div`,{className:[D.switchWrapper,o??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`input`,{id:l,name:e,type:`checkbox`,disabled:s,className:D.switchCheckbox,"aria-invalid":!!i,"aria-describedby":i?`${e}-error`:void 0,...c}),(0,t.jsxs)(`label`,{htmlFor:l,className:[D.switchLabel,a===`glassy`?D.switchLabelGlassy:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`span`,{className:D.switchBackground,children:(0,t.jsxs)(`span`,{className:D.switchButton,"aria-hidden":`true`,children:[(0,t.jsx)(`span`,{className:D.iconChecked,children:(0,t.jsx)(k,{})}),(0,t.jsx)(`span`,{className:D.iconUnchecked,children:(0,t.jsx)(A,{})})]})}),r&&(0,t.jsx)(`span`,{className:D.switchText,children:r})]}),i&&(0,t.jsx)(`span`,{id:`${e}-error`,className:D.errorMessage,children:i})]})}function k(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 6.5L5.5 9L9 3`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function A(){return(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M3 3L9 9M9 3L3 9`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}var j={inputBlockVertical:`_inputBlockVertical_1khad_1`,inputLabel:`_inputLabel_1khad_8`,inputLabelGlassy:`_inputLabelGlassy_1khad_14`,inputTextField:`_inputTextField_1khad_20`,inputTextFieldGlassy:`_inputTextFieldGlassy_1khad_37`,inputError:`_inputError_1khad_59`,errorMessage:`_errorMessage_1khad_63`};function M({label:e,name:n,error:r,placeholder:i,variant:a=`default`,className:o,ref:s,...c}){return(0,t.jsxs)(`div`,{className:j.inputBlockVertical,children:[(0,t.jsx)(`label`,{htmlFor:n,className:[j.inputLabel,a===`glassy`?j.inputLabelGlassy:``].filter(Boolean).join(` `),children:e}),(0,t.jsx)(`input`,{id:n,name:n,ref:s,placeholder:i,className:[j.inputTextField,a===`glassy`?j.inputTextFieldGlassy:``,r?j.inputError:``,o??``].filter(Boolean).join(` `),"aria-invalid":!!r,"aria-describedby":r?`${n}-error`:void 0,...c}),r&&(0,t.jsx)(`span`,{id:`${n}-error`,className:j.errorMessage,children:r})]})}var N={wrapper:`_wrapper_1jqlw_1`,label:`_label_1jqlw_7`,labelGlassy:`_labelGlassy_1jqlw_13`,dropzone:`_dropzone_1jqlw_17`,dropzoneGlassy:`_dropzoneGlassy_1jqlw_32`,dragOver:`_dragOver_1jqlw_39`,errorState:`_errorState_1jqlw_48`,disabled:`_disabled_1jqlw_52`,hiddenInput:`_hiddenInput_1jqlw_57`,dropzoneContent:`_dropzoneContent_1jqlw_65`,placeholder:`_placeholder_1jqlw_74`,big:`_big_1jqlw_80`,small:`_small_1jqlw_86`,hint:`_hint_1jqlw_91`,selected:`_selected_1jqlw_111`,preview:`_preview_1jqlw_118`,fileMeta:`_fileMeta_1jqlw_127`,fileName:`_fileName_1jqlw_134`,fileSize:`_fileSize_1jqlw_142`,remove:`_remove_1jqlw_156`,errorMessage:`_errorMessage_1jqlw_198`};function P({label:e,name:r,id:i,file:a,error:o,variant:s=`default`,accept:c=`image/*`,maxSizeBytes:l=5*1024*1024,disabled:u,className:d,onChange:f,onFileChange:p,...m}){let h=(0,n.useId)(),g=i??`${r}-${h}`,[_,v]=(0,n.useState)(!1),[y,b]=(0,n.useState)(a??null),x=a!==void 0,S=x?a:y,C=(0,n.useMemo)(()=>!S||!S.type.startsWith(`image/`)?null:URL.createObjectURL(S),[S]);(0,n.useEffect)(()=>{x&&b(a??null)},[a,x]),(0,n.useEffect)(()=>()=>{C&&URL.revokeObjectURL(C)},[C]);function w(e){return!e||(c===`image/*`||c.startsWith(`image/`))&&!e.type.startsWith(`image/`)||l&&e.size>l?null:e}function T(e){let t=w(e);x||b(t),p?.(t)}function E(e){T(e.target.files?.[0]??null),f?.(e)}function D(e){e.preventDefault(),e.stopPropagation(),u||v(!0)}function O(e){e.preventDefault(),e.stopPropagation(),!e.currentTarget.contains(e.relatedTarget)&&v(!1)}function k(e){e.preventDefault(),e.stopPropagation(),v(!1),!u&&T(e.dataTransfer.files?.[0]??null)}function A(){x||b(null),p?.(null)}let j=Math.round(l/(1024*1024));return(0,t.jsxs)(`div`,{className:[N.wrapper,d??``].filter(Boolean).join(` `),children:[(0,t.jsx)(`label`,{className:[N.label,s===`glassy`?N.labelGlassy:``].filter(Boolean).join(` `),htmlFor:g,children:e}),(0,t.jsxs)(`div`,{className:[N.dropzone,s===`glassy`?N.dropzoneGlassy:``,_?N.dragOver:``,o?N.errorState:``,u?N.disabled:``].filter(Boolean).join(` `),onDragOver:D,onDragLeave:O,onDrop:k,children:[(0,t.jsx)(`input`,{id:g,name:r,className:N.hiddenInput,type:`file`,accept:c,disabled:u,onChange:E,"aria-invalid":!!o,"aria-describedby":o?`${r}-error`:void 0,...m}),(0,t.jsx)(`label`,{htmlFor:g,className:N.dropzoneContent,children:S?(0,t.jsxs)(`span`,{className:N.selected,children:[C&&(0,t.jsx)(`img`,{className:N.preview,src:C,alt:`Vorschau von ${S.name}`}),(0,t.jsxs)(`span`,{className:N.fileMeta,children:[(0,t.jsx)(`span`,{className:N.fileName,children:S.name}),(0,t.jsxs)(`span`,{className:N.fileSize,children:[(S.size/1024).toFixed(0),` KB ·`,` `,S.type||`unknown`]})]})]}):(0,t.jsxs)(`span`,{className:N.placeholder,children:[(0,t.jsx)(`span`,{className:N.big,children:`Datei hier reinziehen`}),(0,t.jsx)(`span`,{className:N.small,children:`…oder klicken, um auszuwählen`}),(0,t.jsxs)(`span`,{className:N.hint,children:[`Erlaubt: `,c,` · max. `,j,` MB`]})]})}),S&&(0,t.jsx)(`button`,{type:`button`,className:N.remove,onClick:A,disabled:u,children:`Entfernen`})]}),o&&(0,t.jsx)(`span`,{id:`${r}-error`,className:N.errorMessage,children:o})]})}e.Button=i,e.Checkbox=o,e.Chip=c,e.DatePicker=u,e.Dropdown=h,e.Link=_,e.Password=b,e.PostalCode=w,e.RadioButton=E,e.Switch=O,e.TextField=M,e.Upload=P});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suus-component-library",
-  "version": "0.1.5",
+  "version": "0.1.9",
   "type": "module",
   "main": "./dist/suus-component-library.umd.cjs",
   "module": "./dist/suus-component-library.js",
@@ -18,10 +18,13 @@
   },
   "scripts": {
     "build-component-library": "tsc -b && vite build",
-    "pack-component-library-for-local-testing": "npm pack",
     "publish-component-library": "npm version patch && npm publish",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-component-library-for-local-testing": "npm pack",
+    "build-storybook": "storybook build",
+    "build-storybook:github": "STORYBOOK_BASE=/suus-component-library/ storybook build",
+    "build-storybook:local": "STORYBOOK_BASE=/ storybook build",
+    "run-storybook-static": "npx http-server storybook-static -p 63342",
+    "run-storybook-local": "storybook dev -p 6006"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
@@ -46,6 +49,7 @@
     "vite-plugin-dts": "latest"
   },
   "dependencies": {
+    "msw": "^2.14.6",
     "suus-design-tokens": "^1.0.13"
   }
 }

package/dist/components/form/buttons/input-button/InputButton.d.ts

@@ -1,14 +0,0 @@
-import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
-export type ProductColorToken = "--colors-juice-sugarcane" | "--colors-juice-tamarind" | "--colors-juice-guava" | "--colors-juice-icetea";
-export type ButtonProps = {
-    label: string;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    loading?: boolean;
-    variant?: "primary" | "secondary";
-    colorToken?: ProductColorToken;
-    icon?: ReactNode;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "disabled">;
-export default function InputButton({ label, onClick, type, disabled, loading, variant, colorToken, icon, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputButton.d.ts.map

package/dist/components/form/buttons/input-button/InputButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/InputButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,MAAM,MAAM,iBAAiB,GACvB,0BAA0B,GAC1B,yBAAyB,GACzB,sBAAsB,GACtB,uBAAuB,CAAC;AAE9B,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EACI,KAAK,EACL,OAAO,EACP,IAAe,EACf,QAAgB,EAChB,OAAe,EACf,OAAmB,EACnB,UAAuC,EACvC,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,WAAW,2CAoCjD"}

package/dist/components/form/buttons/input-button/InputButton.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/InputButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CA4B0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA+BlB,CAAC"}

package/dist/components/form/buttons/input-button/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './InputButton';
-export type { ButtonProps, ProductColorToken } from './InputButton';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/form/buttons/input-button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/buttons/input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}