@simplexable/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/dist/index.js +11151 -0
- package/dist/styles.css +2 -0
- package/package.json +39 -0
package/dist/styles.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
:root{--sx-color-primary-background:#2f4fd8;--sx-color-primary-foreground:#fff;--sx-color-danger-background:#d92d20;--sx-color-danger-foreground:#fff;--sx-success-surface:#edf8f1;--sx-success-border:#b9dec7;--sx-success-text:#286b47;--sx-success-title:#205a3b;--sx-success-body:#38634b;--sx-field-surface:#fff;--sx-field-foreground:#253345;--sx-field-border:#d3d9e0;--sx-field-border-hover:#cbd5e1;--sx-field-focus:#2f4fd8;--sx-field-focus-ring:#2f4fd824;--sx-field-error:#d92d20;--sx-field-semantic:#3f8a63;--sx-field-readonly-background:#f7f9fb;--sx-field-readonly-foreground:#6b7688;--sx-field-disabled-background:#f2f4f7;--sx-field-disabled-opacity:.62;--sx-field-resolved-background:#f7f9fb;--sx-field-resolved-border:#c6cdd6;--sx-field-resolved-foreground:#4a5566;--sx-field-label:#6b7280;--sx-field-placeholder:#a3adba;--sx-field-helper:#6b7280;--sx-field-radius:.1875rem;--sx-field-padding-block:.375rem;--sx-field-padding-inline:.5rem;--sx-field-font-size:.7rem;--sx-field-line-height:1.35;--sx-field-control-min-height:.95rem;--sx-field-label-size:.47rem;--sx-field-label-gap:.18rem;--sx-field-message-size:.5rem;--sx-field-message-spacing:.22rem;--sx-button-border-radius:.25rem;--sx-button-height:1.85rem;--sx-button-font-size:.7rem;--sx-button-padding-inline:.9rem;--sx-button-compact-border-radius:0;--sx-button-compact-height:.95rem;--sx-button-compact-font-size:.5rem;--sx-button-compact-padding-inline:.4rem;--sx-button-disabled-background:#f2f4f7;--sx-button-disabled-border:#d3d9e0;--sx-button-disabled-foreground:#a3adba}.sx-field{width:100%;min-width:0}.sx-field__frame{background:var(--sx-field-surface);border:1px solid var(--sx-field-border);border-radius:var(--sx-field-radius);gap:var(--sx-field-label-gap);padding:var(--sx-field-padding-block) var(--sx-field-padding-inline);flex-direction:column;transition:background-color .15s,border-color .15s,box-shadow .15s;display:flex}.sx-field__label{color:var(--sx-field-label);font-size:var(--sx-field-label-size);letter-spacing:.02em;text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;margin:0;font-weight:600;line-height:1.1;display:block;overflow:hidden}.sx-field__required{color:var(--sx-field-error);margin-left:.15rem}.sx-field__control{box-sizing:border-box;color:var(--sx-field-foreground);font:inherit;font-size:var(--sx-field-font-size);line-height:var(--sx-field-line-height);min-height:var(--sx-field-control-min-height);background:0 0;border:0;outline:none;width:100%;margin:0;padding:0;display:block}.sx-field__control::placeholder{color:var(--sx-field-placeholder);opacity:1}.sx-field:not(.sx-field--disabled):not(.sx-field--readonly):not(.sx-field--resolved):hover .sx-field__frame{border-color:var(--sx-field-border-hover)}.sx-field:not(.sx-field--disabled):not(.sx-field--resolved):focus-within .sx-field__frame,.sx-field--open .sx-field__frame{border-color:var(--sx-field-focus);box-shadow:0 0 0 1px var(--sx-field-focus-ring)}.sx-field--validating .sx-field__frame{border-color:var(--sx-field-border-hover)}.sx-field--verified .sx-field__frame,.sx-field--accepted .sx-field__frame{border-color:var(--sx-field-semantic)}.sx-field--verified .sx-field__label,.sx-field--accepted .sx-field__label{color:var(--sx-field-semantic)}.sx-field--error:not(:focus-within):not(.sx-field--open) .sx-field__frame{border-color:var(--sx-field-error)}.sx-field--error:not(:focus-within):not(.sx-field--open) .sx-field__label{color:var(--sx-field-error)}.sx-field--readonly .sx-field__frame{background:var(--sx-field-readonly-background)}.sx-field--readonly .sx-field__label,.sx-field--readonly .sx-field__control{color:var(--sx-field-readonly-foreground)}.sx-field--disabled{opacity:var(--sx-field-disabled-opacity)}.sx-field--disabled .sx-field__frame{background:var(--sx-field-disabled-background)}.sx-field--disabled .sx-field__control{cursor:not-allowed}.sx-field--resolved .sx-field__frame{background:var(--sx-field-resolved-background);border-color:var(--sx-field-resolved-border);border-style:dashed}.sx-field--resolved .sx-field__label,.sx-field--resolved .sx-field__control{color:var(--sx-field-resolved-foreground)}.sx-field--resolved .sx-field__frame{box-shadow:none}.sx-field__helper,.sx-field__error{font-size:var(--sx-field-message-size);margin-top:var(--sx-field-message-spacing);padding-inline:var(--sx-field-padding-inline);line-height:1.35}.sx-field__helper{color:var(--sx-field-helper)}.sx-field__error{color:var(--sx-field-error)}.sx-field__control--textarea{resize:none;overflow:hidden}@media (prefers-reduced-motion:reduce){.sx-field__frame{transition:none}}.sx-select{position:relative}.sx-select__control-row{align-items:stretch;gap:.35rem;width:100%;display:flex}.sx-select__static-row{align-items:center;gap:.35rem;width:100%;display:flex}.sx-select__trigger{cursor:pointer;text-align:left;flex:auto;align-items:center;min-width:0;display:flex}.sx-select__value,.sx-select__display{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.sx-select__trigger--placeholder,.sx-select__display--placeholder{color:var(--sx-field-placeholder)}.sx-select__clear,.sx-select__disclosure-button,.sx-select__disclosure{color:var(--sx-field-helper);cursor:pointer;background:0 0;border:0;border-radius:.2rem;flex:none;align-self:center;align-items:center;padding:.2rem;line-height:0;display:inline-flex}.sx-select__disclosure{cursor:default}.sx-select__clear:hover,.sx-select__disclosure-button:not(:disabled):hover{color:var(--sx-field-foreground)}.sx-select__disclosure-button:disabled{cursor:not-allowed;opacity:.65}.sx-select__listbox,.sx-select__search-panel{background:var(--sx-field-surface);border:1px solid var(--sx-field-border-hover);border-radius:var(--sx-field-radius);z-index:20;min-width:100%;max-height:14rem;margin:.25rem 0 0;padding:.25rem 0;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 4px 12px #0f172a14}.sx-select__search-panel{flex-direction:column;max-height:14rem;padding:0;display:flex;overflow:hidden}.sx-select__search{border-bottom:1px solid var(--sx-field-border);padding:.4rem var(--sx-field-padding-inline);flex:none;align-items:center;gap:.35rem;width:100%;display:flex}.sx-select__search-icon{color:var(--sx-field-helper);flex:none}.sx-select__search-input{color:var(--sx-field-foreground);font:inherit;font-size:var(--sx-field-font-size);background:0 0;border:0;outline:0;flex:auto;min-width:0;padding:0}.sx-select__search-panel>.sx-select__listbox{box-shadow:none;border:0;border-radius:0;flex:0 auto;width:auto;min-height:0;max-height:12rem;margin:0;position:static;overflow-y:auto}.sx-select__search-panel>.sx-select__listbox:empty{padding:0}.sx-select__status{color:var(--sx-field-helper);font-size:var(--sx-field-message-size);padding:.35rem var(--sx-field-padding-inline);line-height:1.35}.sx-select__option{cursor:pointer;font-size:var(--sx-field-font-size);padding:.35rem var(--sx-field-padding-inline);align-items:flex-start;gap:.35rem;line-height:1.35;display:flex}.sx-select__option:hover,.sx-select__option--active{background:#eff6ff;box-shadow:inset 0 0 0 1px #2f4fd83d}.sx-select__option--selected{font-weight:600}.sx-select__option--disabled{color:var(--sx-field-placeholder);cursor:not-allowed}.sx-select__option-check{color:var(--sx-field-focus);flex:none;margin-top:.1rem}.sx-select__option-check--hidden{visibility:hidden}.sx-select__option-content{flex:auto;min-width:0}.sx-select__option-label{-webkit-line-clamp:3;white-space:normal;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.sx-select__option-secondary{color:var(--sx-field-helper);margin-top:.1rem;font-size:.55rem;font-weight:400;line-height:1.3;display:block}.sx-button{border-radius:var(--sx-button-border-radius);box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:var(--sx-button-font-size);height:var(--sx-button-height);padding:0 var(--sx-button-padding-inline);border:1px solid #0000;justify-content:center;align-items:center;font-weight:500;display:inline-flex}.sx-button--compact{border-radius:var(--sx-button-compact-border-radius);font-size:var(--sx-button-compact-font-size);height:var(--sx-button-compact-height);padding:0 var(--sx-button-compact-padding-inline);font-weight:400}.sx-button--primary{background:var(--sx-color-primary-background);color:var(--sx-color-primary-foreground)}.sx-button--danger{background:var(--sx-color-danger-background);color:var(--sx-color-danger-foreground)}.sx-button--not-ready{background:var(--sx-control-background);border-color:var(--sx-control-error-border);color:var(--sx-control-foreground)}.sx-button:disabled{background:var(--sx-button-disabled-background);border-color:var(--sx-button-disabled-border);color:var(--sx-button-disabled-foreground);cursor:not-allowed;opacity:1}.sx-button:not(:disabled):hover{opacity:.9}.sx-button:focus-visible{outline:1px solid var(--sx-control-focus-border);outline-offset:1px}.sx-badge{background:var(--sx-badge-background);border:1px solid var(--sx-badge-border);box-sizing:border-box;color:var(--sx-badge-foreground);vertical-align:middle;border-radius:.2rem;align-items:center;min-height:1.2rem;padding:.18rem .42rem;font-family:inherit;font-size:.58rem;font-weight:500;line-height:1.2;display:inline-flex}.sx-badge--neutral{--sx-badge-background:#f2f4f7;--sx-badge-border:#d3d9e0;--sx-badge-foreground:#4a5566}.sx-badge--info{--sx-badge-background:#edf2ff;--sx-badge-border:#bdcaf4;--sx-badge-foreground:#2340a8}.sx-badge--success{--sx-badge-background:#edf8f1;--sx-badge-border:#b9dec7;--sx-badge-foreground:#286b47}.sx-badge--warning{--sx-badge-background:#fff7e6;--sx-badge-border:#efd39a;--sx-badge-foreground:#8a5b08}.sx-badge--danger{--sx-badge-background:#fff0ef;--sx-badge-border:#edb9b5;--sx-badge-foreground:#a52a22}.sx-badge--outlined{background:0 0}.sx-choice-group .sx-choice-group__fieldset{gap:var(--sx-field-label-gap);border:0;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;display:flex}.sx-choice-group__legend{float:none;width:100%;padding:0}.sx-choice-group__list{flex-direction:column;gap:0;width:100%;display:flex}.sx-choice-group__list--horizontal{flex-flow:wrap;align-items:flex-start;gap:.15rem 1rem}.sx-choice-group__list--horizontal .sx-choice-row{border-top:0;flex:0 auto;width:max-content;max-width:100%;margin:0;padding:.3rem 0;display:flex}.sx-choice-group__list--horizontal .sx-choice-row--decision{max-width:100%}.sx-choice-group__list--two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.25rem;padding-top:.05rem;display:grid}.sx-choice-group__status{color:var(--sx-field-helper);font-size:var(--sx-field-message-size);margin-bottom:.35rem;line-height:1.35}.sx-choice-row{border-top:1px solid var(--sx-field-border);cursor:default;border-radius:.15rem;align-items:flex-start;gap:.55rem;width:calc(100% + .3rem);margin:0 -.15rem;padding:.4rem .15rem;display:flex}.sx-choice-group__list>.sx-choice-row:first-child{border-top:0}.sx-choice-row--compact{padding-top:.3rem;padding-bottom:.3rem}.sx-choice-row--decision{padding-top:.6rem;padding-bottom:.6rem}.sx-choice-group__list--two-column .sx-choice-row{border-top:0;width:100%;margin:0;padding:.3rem 0}.sx-choice-group:not(.sx-field--disabled):not(.sx-field--readonly):not(.sx-field--resolved) .sx-choice-row:not(.sx-choice-row--disabled):not(.sx-choice-row--static):hover{background:#0f172a09}.sx-choice-group:not(.sx-field--disabled):not(.sx-field--readonly):not(.sx-field--resolved) .sx-choice-row:not(.sx-choice-row--disabled):not(.sx-choice-row--static):has(.sx-choice-row__input:focus-visible){background:#0f172a05;box-shadow:inset 0 0 0 1px #2f4fd847}.sx-choice-row:not(.sx-choice-row--disabled):not(.sx-choice-row--static){cursor:pointer}.sx-choice-row--disabled{cursor:not-allowed;opacity:var(--sx-field-disabled-opacity)}.sx-choice-row__indicator{flex:none;padding-top:.1rem;position:relative}.sx-choice-row__input{opacity:0;z-index:1;width:1rem;height:1rem;margin:0;position:absolute}.sx-choice-row__input:focus-visible+.sx-choice-row__visual{box-shadow:0 0 0 2px #2f4fd847}.sx-choice-row__visual{background:var(--sx-field-surface);border:1.5px solid var(--sx-field-border-hover);justify-content:center;align-items:center;width:1rem;height:1rem;display:inline-flex}.sx-choice-row__visual--radio{border-radius:50%}.sx-choice-row__visual--checkbox{color:#fff;border-radius:.18rem}.sx-choice-row__visual--checked.sx-choice-row__visual--radio{border-color:var(--sx-field-focus);box-shadow:inset 0 0 0 .25rem var(--sx-field-focus)}.sx-choice-row__visual--checked.sx-choice-row__visual--checkbox{background:var(--sx-field-focus);border-color:var(--sx-field-focus)}.sx-choice-row__content{flex:auto;min-width:0}.sx-choice-row__label{color:inherit;cursor:inherit;font-size:var(--sx-field-font-size);font-weight:400;line-height:var(--sx-field-line-height);margin:0;display:block}.sx-choice-row--selected .sx-choice-row__label{font-weight:600}.sx-choice-row__description{color:var(--sx-field-helper);font-size:var(--sx-field-message-size);margin:.2rem 0 0;font-weight:400;line-height:1.35}.sx-choice-row__secondary,.sx-choice-row__disabled-reason{color:var(--sx-field-helper);margin-top:.16rem;font-size:.48rem;font-weight:400;line-height:1.35;display:block}.sx-field--readonly .sx-choice-row--readonly{cursor:default}.sx-field--readonly .sx-choice-row--readonly:not(.sx-choice-row--selected){opacity:.58}.sx-field--readonly .sx-choice-row--readonly:not(.sx-choice-row--selected) .sx-choice-row__visual{background:var(--sx-field-readonly-background);box-shadow:none;border-color:#dbe3ee}.sx-field--resolved .sx-choice-row--resolved{cursor:default}.sx-field--resolved .sx-choice-row--resolved:not(.sx-choice-row--selected){opacity:.42}.sx-field--resolved .sx-choice-row--resolved:not(.sx-choice-row--selected) .sx-choice-row__label,.sx-field--resolved .sx-choice-row--resolved:not(.sx-choice-row--selected) .sx-choice-row__description{color:#94a3b8}.sx-field--resolved .sx-choice-row--resolved:not(.sx-choice-row--selected) .sx-choice-row__visual{box-shadow:none;background:0 0;border-color:#e2e8f0}.sx-field--resolved .sx-choice-row--resolved.sx-choice-row--selected{opacity:1}.sx-checkbox-field .sx-choice-row{border-top:0;width:100%;margin:0;padding:0}.sx-checkbox-field:not(.sx-field--disabled):not(.sx-field--readonly):not(.sx-field--resolved) .sx-choice-row:not(.sx-choice-row--static):hover{border-radius:var(--sx-field-radius);background:#0f172a09;width:calc(100% + .7rem);margin:0 -.35rem;padding-left:.35rem;padding-right:.35rem}@media (width<=640px){.sx-choice-group__list--two-column{grid-template-columns:minmax(0,1fr)}}.sx-alert{box-sizing:border-box;border:1px solid;border-radius:.2rem;align-items:flex-start;gap:.45rem;width:100%;padding:.48rem .55rem;font-size:.62rem;line-height:1.35;display:flex}.sx-alert--info{color:#2340a8;background:#edf2ff;border-color:#bdcaf4}.sx-alert--warning{color:#a52a22;background:#fff0ef;border-color:#edb9b5}.sx-alert__content{flex:auto;min-width:0}.sx-alert__title{margin-bottom:.1rem;font-weight:700}.sx-alert__body{overflow-wrap:anywhere}.sx-alert__close{color:currentColor;cursor:pointer;opacity:.72;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.sx-alert__close:hover{opacity:1}.sx-alert__close:focus-visible{outline-offset:2px;border-radius:50%;outline:2px solid}.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{content:"";border:3px solid #ccc;border-width:3px 3px 0 0;width:9px;height:9px;display:block;position:absolute;top:6px}.react-datepicker__sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.react-datepicker-wrapper{border:0;padding:0;display:inline-block}.react-datepicker{color:#000;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:initial;background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-right-radius:.375em;border-bottom-left-radius:.375em}.react-datepicker-popper{z-index:1;line-height:0}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select,.react-datepicker__header--middle,.react-datepicker__header--bottom){border-top-right-radius:.3rem}.react-datepicker__header--middle{border-top:1px solid #aeaeae;border-radius:0;margin-top:4px}.react-datepicker__header--bottom{border-top:1px solid #aeaeae;border-bottom:none;border-radius:0 0 .3rem .3rem}.react-datepicker__header-wrapper{position:relative}.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:2px}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{margin:0 15px;display:inline-block}.react-datepicker__month-select,.react-datepicker__year-select,.react-datepicker__month-year-select{color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;background-color:#0000;border:1px solid #aeaeae;border-radius:.3rem;margin-top:5px;padding:2px 5px}.react-datepicker__month-select:focus-visible,.react-datepicker__year-select:focus-visible,.react-datepicker__month-year-select:focus-visible{outline:1px auto}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{color:#000;margin-top:0;font-size:.944rem;font-weight:700}h2.react-datepicker__current-month{margin:0;padding:0}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{text-align:center;cursor:pointer;z-index:1;text-indent:-999em;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex;position:absolute;top:2px;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{margin-left:auto;margin-right:auto;display:block;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{width:0;font-size:20px;position:relative;top:-1px}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{text-align:center;margin:.5em}.react-datepicker__year-wrapper{flex-wrap:wrap;max-width:180px;display:flex}.react-datepicker__year .react-datepicker__year-text{width:5em;margin:2px;display:inline-block}.react-datepicker__month{text-align:center;margin:.5em}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{width:5em;margin:2px;display:inline-block}.react-datepicker__input-time-container{clear:both;float:left;text-align:left;width:100%;margin:5px 0 10px 15px}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{margin-left:10px;display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.375em;display:inline;position:absolute;top:0;right:-87px}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.375em;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{text-align:center;border-bottom-right-radius:.375em;width:85px;margin:0 auto;overflow-x:hidden}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;width:100%;height:calc(195px + 1.0625em);margin:0;padding-left:0;padding-right:0;list-style:none;overflow-y:scroll}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{white-space:nowrap;height:30px;padding:5px 10px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{color:#fff;background-color:#216ba5;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:#0000}.react-datepicker__week-number{color:#ccc;text-align:center;width:2.125em;margin:.208em;line-height:2.125em;display:inline-block}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{color:#fff;background-color:#216ba5;border-radius:.3rem}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{text-align:center;white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;text-align:center;width:2.125em;margin:.208em;line-height:2.125em;display:inline-block}.react-datepicker__day-name--disabled,.react-datepicker__day--disabled,.react-datepicker__time-name--disabled{cursor:default;color:#ccc}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{color:#fff;background-color:#3dcc4a;border-radius:.3rem}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{color:#fff;background-color:#ff6803;border-radius:.3rem;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{color:#fff;white-space:nowrap;visibility:hidden;opacity:0;background-color:#333;border-radius:4px;padding:4px;transition:visibility,opacity .3s ease-in-out;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{color:#fff;background-color:#216ba5;border-radius:.3rem}.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{color:#000;background-color:#bad9f1;border-radius:.3rem}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{color:#fff;background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){color:#000;background-color:#f0f0f0}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{color:#fff;white-space:nowrap;visibility:hidden;opacity:0;background-color:#333;border-radius:4px;padding:4px;transition:visibility,opacity .3s ease-in-out;position:absolute;bottom:70%;left:50%;transform:translate(-50%)}.react-datepicker__input-container{width:100%;display:inline-block;position:relative}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:content-box;padding:.625em;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{top:0;right:-16px;transform:rotate(135deg)}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{z-index:1;text-align:center;background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;width:50%;position:absolute;top:30px;left:25%}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{width:100%;margin-left:auto;margin-right:auto;line-height:20px;display:block}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;user-select:none;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;vertical-align:middle;background-color:#0000;border:0;outline:0;height:100%;padding:0 6px 0 0;display:table-cell;position:absolute;top:0;right:0}.react-datepicker__close-icon:after{cursor:pointer;color:#fff;text-align:center;vertical-align:middle;content:"×";background-color:#216ba5;border-radius:50%;width:16px;height:16px;padding:2px;font-size:12px;line-height:1;display:table-cell}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{cursor:default;background-color:#ccc}.react-datepicker__today-button{cursor:pointer;text-align:center;clear:left;background:#f0f0f0;border-top:1px solid #aeaeae;padding:5px 0;font-weight:700}.react-datepicker__portal{z-index:2147483647;background-color:#000c;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.react-datepicker__children-container{width:17.25em;height:auto;margin:.5em;padding-left:.25em;padding-right:.25em}.react-datepicker__aria-live{clip-path:circle(0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.react-datepicker__calendar-icon{vertical-align:-.125em;width:1em;height:1em}.react-datepicker-popper-offset{margin-top:-.7em}.sx-picker__control{align-items:center;min-width:0;display:flex;position:relative}.sx-picker__wrapper{flex:auto;min-width:0;display:block}.sx-picker__input,.sx-picker__static{color:var(--sx-field-foreground);font-size:var(--sx-field-font-size);line-height:var(--sx-field-line-height);min-height:var(--sx-field-control-min-height);width:100%}.sx-picker__input{background:0 0;border:0;outline:0;padding:0 2.2rem 0 0}.sx-picker__input::placeholder{color:var(--sx-field-placeholder);opacity:1}.sx-picker__static{align-items:center;display:flex}.sx-picker__actions{align-items:center;gap:.1rem;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.sx-picker__action{color:var(--sx-field-helper);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:.15rem;display:inline-flex}.sx-picker__action:hover{color:var(--sx-field-foreground)}.sx-picker__action:focus-visible{outline:2px solid var(--sx-field-focus-ring);outline-offset:1px;border-radius:.15rem}.sx-picker__popper{z-index:30}.sx-picker__calendar{border:1px solid var(--sx-field-border);border-radius:var(--sx-field-radius);font-family:inherit;font-size:var(--sx-field-font-size);box-shadow:0 4px 12px #0f172a1a}.sx-picker__calendar .react-datepicker__header{background:var(--sx-field-readonly-background);border-bottom-color:var(--sx-field-border)}.sx-picker__calendar .react-datepicker__day--selected,.sx-picker__calendar .react-datepicker__time-list-item--selected{background:var(--sx-field-focus)}.sx-picker__calendar .react-datepicker__day:hover,.sx-picker__calendar .react-datepicker__time-list-item:hover{background:var(--sx-field-focus-ring)}.sx-picker__calendar .react-datepicker__time-container{border-left-color:var(--sx-field-border)}.sx-picker__calendar .react-datepicker__time-list{scrollbar-width:thin}.sx-dialog__overlay{z-index:1000;background:#0f172a52;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.sx-dialog{background:var(--sx-success-surface);border:1px solid var(--sx-success-border);box-sizing:border-box;color:var(--sx-success-text);border-radius:.25rem;width:100%;max-width:26rem;padding:.85rem;font-family:Helvetica,Arial,sans-serif;display:block;box-shadow:0 8px 24px #0f172a29}.sx-dialog:focus{outline-offset:2px;outline:2px solid #2f4fd859}.sx-dialog__main{align-items:flex-start;gap:.65rem;display:flex}.sx-dialog__icon{color:var(--sx-success-text);flex:none;padding-top:.05rem;line-height:1}.sx-dialog__content{width:100%;min-width:0}.sx-dialog__title{color:var(--sx-success-title);margin:0;font-size:.8rem;line-height:1.25}.sx-dialog__body{color:var(--sx-success-body);overflow-wrap:anywhere;margin-top:.35rem;font-size:.65rem;line-height:1.4}.sx-dialog__actions{justify-content:flex-end;margin-top:.75rem;display:flex}.sx-dialog__close{color:var(--sx-success-text);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.sx-dialog__close:hover{color:var(--sx-success-title)}.sx-dialog__close:focus-visible{outline-offset:2px;border-radius:50%;outline:2px solid #2f4fd859}.sx-dialog__reopen-message{color:#6b7280;width:100%;padding:.2rem 0;font-family:Helvetica,Arial,sans-serif;font-size:.62rem;line-height:1.35}@media (width<=30rem){.sx-dialog__overlay{padding:.65rem}}.sx-text-input__control{text-overflow:ellipsis}.sx-text-area__control{resize:none;overflow:hidden}
|
|
2
|
+
/*$vite$:1*/
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@simplexable/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Reusable React UI components and styles for Simplexable applications",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist",
|
|
8
|
+
"README.md"
|
|
9
|
+
],
|
|
10
|
+
"main": "./dist/index.js",
|
|
11
|
+
"module": "./dist/index.js",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./dist/index.js",
|
|
14
|
+
"./styles.css": "./dist/styles.css"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"dev": "vite",
|
|
18
|
+
"build": "vite build",
|
|
19
|
+
"prepublishOnly": "npm run build"
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
23
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
24
|
+
},
|
|
25
|
+
"publishConfig": {
|
|
26
|
+
"access": "restricted"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@vitejs/plugin-react": "^6.1.1",
|
|
30
|
+
"react": "^19.0.0",
|
|
31
|
+
"react-dom": "^19.0.0",
|
|
32
|
+
"vite": "^8.2.2"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@phosphor-icons/react": "^2.1.10",
|
|
36
|
+
"moment-timezone": "^0.6.3",
|
|
37
|
+
"react-datepicker": "^9.1.0"
|
|
38
|
+
}
|
|
39
|
+
}
|