reusify-ui 1.0.7 → 2.0.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/LICENSE +21 -0
- package/README.md +300 -7
- package/dist/reusify-ui.cjs +1506 -0
- package/dist/reusify-ui.js +1506 -0
- package/dist/styles.css +1 -0
- package/package.json +30 -29
- package/dist/reusify-ui.es.js +0 -640
- package/dist/reusify-ui.umd.js +0 -30
- package/dist/vite.svg +0 -1
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--ru-primary: #5b4cf5;--ru-secondary: #6b6b76;--ru-success: #12a150;--ru-danger: #e5484d;--ru-warning: #d97706;--ru-info: #2f7cf6;--ru-on-color: #ffffff;--ru-bg: #fcfcfd;--ru-surface: #ffffff;--ru-muted: #f4f4f6;--ru-border: rgb(19 19 22 / .1);--ru-text: #131316;--ru-text-muted: #6b6b76;--ru-overlay: rgb(9 9 11 / .4);--ru-tooltip-bg: #131316;--ru-tooltip-text: #fafafa;--ru-shimmer: rgb(255 255 255 / .5);--ru-highlight: rgb(255 255 255 / .18);--ru-radius-sm: .375rem;--ru-radius: .625rem;--ru-radius-lg: .875rem;--ru-font-family: inherit;--ru-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--ru-shadow-xs: 0 1px 2px -1px rgb(0 0 0 / .1), 0 0 0 1px rgb(19 19 22 / .1);--ru-shadow-sm: 0 1px 1px -.5px rgb(0 0 0 / .06), 0 3px 3px -1.5px rgb(0 0 0 / .04);--ru-shadow: 0 1px 1px rgb(0 0 0 / .04), 0 4px 8px -2px rgb(19 19 22 / .08), 0 12px 24px -8px rgb(19 19 22 / .1);--ru-shadow-lg: 0 1px 1px rgb(0 0 0 / .05), 0 4px 6px rgb(19 19 22 / .06), 0 10px 32px rgb(19 19 22 / .12), 0 24px 68px rgb(19 19 22 / .08);--ru-transition: .15s ease;--ru-z-dropdown: 1000;--ru-z-overlay: 1300;--ru-z-popover: 1350;--ru-z-toast: 1400;--ru-z-tooltip: 1500}.dark,[data-theme=dark]{--ru-primary: #7c6fff;--ru-secondary: #a1a1aa;--ru-success: #3dd68c;--ru-danger: #ff6369;--ru-warning: #f5a524;--ru-info: #52a8ff;--ru-bg: #09090b;--ru-surface: #111113;--ru-muted: #1c1c1f;--ru-border: rgb(255 255 255 / .09);--ru-text: #f4f4f5;--ru-text-muted: #a1a1aa;--ru-overlay: rgb(0 0 0 / .6);--ru-tooltip-bg: #f4f4f5;--ru-tooltip-text: #111113;--ru-shimmer: rgb(255 255 255 / .05);--ru-highlight: rgb(255 255 255 / .22);--ru-shadow-xs: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .09);--ru-shadow-sm: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .04);--ru-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 4px 12px rgb(0 0 0 / .45);--ru-shadow-lg: inset 0 1px 0 rgb(255 255 255 / .05), 0 0 0 1px rgb(255 255 255 / .06), 0 24px 48px rgb(0 0 0 / .6);color-scheme:dark}[class^=ru-],[class*=" ru-"],[class^=ru-]:before,[class*=" ru-"]:before,[class^=ru-]:after,[class*=" ru-"]:after{box-sizing:border-box}.ru-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ru-btn{--_c: var(--ru-primary);--_bg: var(--_c);--_fg: var(--ru-on-color);--_bd: transparent;--_img: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0));--_sh: inset 0 1px 0 var(--ru-highlight), 0 0 0 1px color-mix(in srgb, var(--_c) 78%, black), 0 1px 2px -1px rgb(0 0 0 / .3);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--ru-radius);font-family:var(--ru-font-family);font-weight:500;line-height:1.25;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ru-transition),border-color var(--ru-transition),color var(--ru-transition),box-shadow var(--ru-transition),opacity var(--ru-transition)}.ru-btn--sm{height:2rem;padding:0 .75rem;font-size:.8125rem}.ru-btn--md{height:2.5rem;padding:0 1rem;font-size:.875rem}.ru-btn--lg{height:3rem;padding:0 1.5rem;font-size:1rem}.ru-btn--full{width:100%}.ru-btn svg{width:1em;height:1em;flex-shrink:0}.ru-btn:is(button,a){background-color:var(--_bg);background-image:var(--_img);color:var(--_fg);border-color:var(--_bd);box-shadow:var(--_sh)}.ru-btn:hover:not(:disabled){--_bg: color-mix(in srgb, var(--_c) 90%, black)}.ru-btn:active:not(:disabled){transform:translateY(.5px)}.ru-btn:focus-visible{outline:none;box-shadow:var(--_sh),0 0 0 4px color-mix(in srgb,var(--_c) 28%,transparent)}.ru-btn:disabled{opacity:.55;cursor:not-allowed}.ru-btn--danger{--_c: var(--ru-danger)}.ru-btn--success{--_c: var(--ru-success)}.ru-btn--secondary{--_c: var(--ru-secondary);--_bg: var(--ru-surface);--_fg: var(--ru-text);--_img: none;--_sh: var(--ru-shadow-xs)}.ru-btn--secondary:hover:not(:disabled){--_bg: var(--ru-muted)}.ru-btn--outline{--_bg: transparent;--_bd: var(--_c);--_fg: var(--_c);--_img: none;--_sh: 0 0 #0000}.ru-btn--ghost{--_bg: transparent;--_fg: var(--_c);--_img: none;--_sh: 0 0 #0000}.ru-btn--outline:hover:not(:disabled),.ru-btn--ghost:hover:not(:disabled){--_bg: color-mix(in srgb, var(--_c) 10%, transparent)}.ru-btn--link{--_bg: transparent;--_fg: var(--_c);--_img: none;--_sh: 0 0 #0000;height:auto;padding:0}.ru-btn--link:hover:not(:disabled){--_bg: transparent;text-decoration:underline}.ru-btn .ru-spinner{width:1em;height:1em;border-width:2px;color:inherit}.ru-spinner-wrap{display:inline-flex}.ru-spinner{display:inline-block;flex-shrink:0;width:1.5rem;height:1.5rem;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--_c, var(--ru-primary));animation:ru-spin .7s linear infinite}.ru-spinner--sm{width:1rem;height:1rem;border-width:2px}.ru-spinner--lg{width:2.25rem;height:2.25rem;border-width:3px}.ru-badge{display:inline-flex;align-items:center;gap:.375rem;border:1px solid transparent;border-radius:9999px;font-family:var(--ru-font-family);font-weight:500;line-height:1;white-space:nowrap}.ru-badge--sm{height:1.25rem;padding:0 .5rem;font-size:.6875rem}.ru-badge--md{height:1.5rem;padding:0 .625rem;font-size:.75rem}.ru-badge--solid{background:var(--_c);color:var(--ru-on-color)}.ru-badge--soft{background:color-mix(in srgb,var(--_c) 14%,transparent);color:var(--_c)}.ru-badge--outline{background:transparent;border-color:var(--_c);color:var(--_c)}.ru-badge__dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}.ru-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;vertical-align:middle;border-radius:9999px;background:var(--ru-muted);color:var(--ru-text-muted);font-family:var(--ru-font-family);font-weight:600;-webkit-user-select:none;user-select:none}.ru-avatar--square{border-radius:var(--ru-radius)}.ru-avatar img{width:100%;height:100%;object-fit:cover}.ru-avatar__icon{width:60%;height:60%}.ru-avatar--xs{width:1.5rem;height:1.5rem;font-size:.625rem}.ru-avatar--sm{width:2rem;height:2rem;font-size:.75rem}.ru-avatar--md{width:2.5rem;height:2.5rem;font-size:.875rem}.ru-avatar--lg{width:3rem;height:3rem;font-size:1rem}.ru-avatar--xl{width:4rem;height:4rem;font-size:1.25rem}.ru-avatar-group{display:inline-flex;align-items:center}.ru-avatar-group>.ru-avatar{box-shadow:0 0 0 2px var(--ru-surface)}.ru-avatar-group>.ru-avatar+.ru-avatar{margin-left:-.5rem}.ru-alert{display:flex;gap:.75rem;padding:.875rem 1rem;border:1px solid color-mix(in srgb,var(--_c) 30%,transparent);border-radius:var(--ru-radius);background:color-mix(in srgb,var(--_c) 10%,var(--ru-surface));color:var(--ru-text);font-family:var(--ru-font-family);font-size:.875rem;line-height:1.5}.ru-alert__icon{display:flex;flex-shrink:0;padding-top:.125rem;color:var(--_c)}.ru-alert__icon svg{width:1.125rem;height:1.125rem}.ru-alert__content{flex:1;min-width:0}.ru-alert__title{margin:0 0 .125rem;font-weight:600}.ru-alert__desc{color:var(--ru-text);opacity:.85}.ru-alert .ru-close{margin:-.25rem -.375rem 0 0}.ru-alert .ru-close:hover{background:color-mix(in srgb,var(--_c) 15%,transparent)}.ru-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--ru-radius-sm);background:transparent;color:var(--ru-text-muted);cursor:pointer;transition:background-color var(--ru-transition),color var(--ru-transition)}.ru-close:hover{background:var(--ru-muted);color:var(--ru-text)}.ru-close:focus-visible{outline:2px solid var(--ru-primary);outline-offset:1px}.ru-close svg{width:1rem;height:1rem}.ru-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ru-border);border-radius:var(--ru-radius-lg);background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-sm);font-family:var(--ru-font-family)}.ru-card--elevated{box-shadow:var(--ru-shadow)}.ru-card--hoverable{transition:box-shadow .2s ease,transform .2s ease}.ru-card--hoverable:hover{box-shadow:var(--ru-shadow-lg);transform:translateY(-2px)}.ru-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem 0}.ru-card__title{margin:0;font-size:1rem;font-weight:600;line-height:1.4}.ru-card__subtitle{margin:.25rem 0 0;font-size:.875rem;color:var(--ru-text-muted)}.ru-card__body{flex:1;padding:1.25rem;font-size:.875rem;line-height:1.6}.ru-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.875rem 1.25rem;border-top:1px solid var(--ru-border);background:color-mix(in srgb,var(--ru-muted) 50%,transparent)}.ru-divider{width:100%;height:1px;margin:1rem 0;border:none;background:var(--ru-border)}.ru-divider--vertical{display:inline-block;width:1px;height:auto;min-height:1em;margin:0 .75rem;align-self:stretch}.ru-divider--label{display:flex;align-items:center;gap:.75rem;height:auto;background:none;color:var(--ru-text-muted);font-family:var(--ru-font-family);font-size:.75rem;font-weight:500}.ru-divider--label:before,.ru-divider--label:after{content:"";flex:1;height:1px;background:var(--ru-border)}.ru-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface)}.ru-table{width:100%;border-collapse:collapse;color:var(--ru-text);font-family:var(--ru-font-family);font-size:.875rem;text-align:left}.ru-table caption{caption-side:bottom;padding:.75rem;color:var(--ru-text-muted);font-size:.8125rem}.ru-table th{padding:.75rem 1rem;border-bottom:1px solid var(--ru-border);background:var(--ru-muted);color:var(--ru-text-muted);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}.ru-table td{padding:.75rem 1rem;border-bottom:1px solid var(--ru-border);vertical-align:middle}.ru-table tbody tr:last-child td{border-bottom:none}.ru-table--sm th,.ru-table--sm td{padding:.5rem .75rem}.ru-table--striped tbody tr:nth-child(2n){background:color-mix(in srgb,var(--ru-muted) 50%,transparent)}.ru-table--hover tbody tr:hover{background:var(--ru-muted)}.ru-table td.ru-table__empty{padding:2rem 1rem;text-align:center;color:var(--ru-text-muted)}.ru-field{display:inline-flex;flex-direction:column;gap:.375rem;min-width:0;font-family:var(--ru-font-family)}.ru-field--full{display:flex;width:100%}.ru-label{padding:0;color:var(--ru-text);font-family:var(--ru-font-family);font-size:.875rem;font-weight:500}.ru-label__req{margin-left:.125rem;color:var(--ru-danger)}.ru-input-wrap{position:relative;display:flex;align-items:center;gap:.5rem;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface);color:var(--ru-text);box-shadow:0 1px 2px -1px #00000014;transition:border-color var(--ru-transition),box-shadow var(--ru-transition)}.ru-input-wrap:focus-within{border-color:var(--ru-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--ru-primary) 16%,transparent)}.ru-input-wrap--error{border-color:var(--ru-danger)}.ru-input-wrap--error:focus-within{border-color:var(--ru-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--ru-danger) 16%,transparent)}.ru-input-wrap--disabled{opacity:.6;cursor:not-allowed;background:var(--ru-muted)}.ru-input-wrap--sm{min-height:2rem;padding:0 .625rem;font-size:.8125rem}.ru-input-wrap--md{min-height:2.5rem;padding:0 .75rem;font-size:.875rem}.ru-input-wrap--lg{min-height:3rem;padding:0 1rem;font-size:1rem}.ru-input-wrap--textarea{align-items:stretch;padding:.5rem .75rem;font-size:.875rem}.ru-input{flex:1;align-self:stretch;width:100%;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;color:inherit;font:inherit}.ru-input::placeholder{color:var(--ru-text-muted);opacity:.8}.ru-input:disabled{cursor:not-allowed}textarea.ru-input{min-height:5rem;line-height:1.5;resize:vertical}.ru-native-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:1.5rem;cursor:pointer}.ru-native-select option{background:var(--ru-surface);color:var(--ru-text)}.ru-native-select__chevron{position:absolute;right:.75rem;width:1rem;height:1rem;color:var(--ru-text-muted);pointer-events:none}.ru-input-wrap.ru-select-wrap{padding:0}.ru-select-trigger{display:flex;flex:1;align-self:stretch;align-items:center;gap:.5rem;width:100%;min-width:0;margin:0;padding:0 .75rem;border:none;border-radius:inherit;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;outline:none}.ru-input-wrap--sm .ru-select-trigger{padding:0 .625rem}.ru-input-wrap--lg .ru-select-trigger{padding:0 1rem}.ru-select-trigger:disabled{cursor:not-allowed}.ru-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ru-select__placeholder{color:var(--ru-text-muted)}.ru-select__chevron{flex-shrink:0;width:1rem;height:1rem;color:var(--ru-text-muted);transition:transform var(--ru-transition)}.ru-select-wrap--open .ru-select__chevron{transform:rotate(180deg)}.ru-select__native{position:absolute;bottom:0;left:0;width:100%;height:1px;padding:0;border:0;opacity:0;pointer-events:none}.ru-select__list{position:fixed;z-index:var(--ru-z-popover);margin:0;padding:.25rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;list-style:none;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-lg);font-family:var(--ru-font-family);font-size:.875rem;transform-origin:top;animation:ru-scale-in .12s ease}.ru-select__list--top{transform-origin:bottom}.ru-select__list::-webkit-scrollbar{display:none}.ru-select__option{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border-radius:var(--ru-radius-sm);line-height:1.35;cursor:pointer;-webkit-user-select:none;user-select:none}.ru-select__option--active{background:var(--ru-muted)}.ru-select__option--selected .ru-select__label{font-weight:500}.ru-select__option--disabled{opacity:.45;cursor:not-allowed}.ru-select__text{display:flex;flex:1;flex-direction:column;min-width:0}.ru-select__desc{margin-top:.0625rem;color:var(--ru-text-muted);font-size:.75rem}.ru-select__icon{display:flex;flex-shrink:0;color:var(--ru-text-muted)}.ru-select__icon svg{width:1rem;height:1rem}.ru-select__check{flex-shrink:0;width:1rem;height:1rem;color:var(--ru-primary)}.ru-select__group{padding:.5rem .625rem .25rem;color:var(--ru-text-muted);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.ru-select__group:not(:first-child){margin-top:.25rem;padding-top:.625rem;border-top:1px solid var(--ru-border)}.ru-select__empty{padding:.75rem;color:var(--ru-text-muted);text-align:center}.ru-input-icon{display:flex;flex-shrink:0;color:var(--ru-text-muted)}.ru-input-icon svg{width:1rem;height:1rem}.ru-help{margin:0;color:var(--ru-text-muted);font-size:.75rem}.ru-help--error{color:var(--ru-danger)}.ru-check{--_c: var(--ru-primary);position:relative;display:inline-flex;align-items:flex-start;gap:.5rem;color:var(--ru-text);font-family:var(--ru-font-family);font-size:.875rem;line-height:1.25rem;cursor:pointer}.ru-check--disabled{opacity:.55;cursor:not-allowed}.ru-check__input{-moz-appearance:none;appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex-shrink:0;width:1rem;height:1rem;margin:.125rem 0 0;border:1.5px solid color-mix(in srgb,var(--ru-text-muted) 60%,transparent);border-radius:.25rem;background:var(--ru-surface);cursor:inherit;transition:background-color var(--ru-transition),border-color var(--ru-transition),box-shadow var(--ru-transition)}.ru-check__input:before{content:"";width:.55rem;height:.55rem;background:var(--ru-on-color);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transition:transform .12s ease}.ru-check__input:checked,.ru-check__input:indeterminate{border-color:var(--_c);background:var(--_c)}.ru-check__input:checked:before{transform:scale(1)}.ru-check__input:indeterminate:before{width:.5rem;height:2px;clip-path:none;transform:scale(1)}.ru-check__input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c) 35%,transparent)}.ru-check__input--radio{border-radius:50%}.ru-check__input--radio:before{width:.4rem;height:.4rem;border-radius:50%;clip-path:none}.ru-check__text{display:flex;flex-direction:column}.ru-check__desc{color:var(--ru-text-muted);font-size:.8125rem}.ru-radio-group{min-width:0;margin:0;padding:0;border:none}.ru-radio-group>legend{margin-bottom:.5rem}.ru-radio-group__items{display:flex;flex-direction:column;gap:.625rem}.ru-radio-group__items--horizontal{flex-direction:row;flex-wrap:wrap;gap:1rem}.ru-switch{--_c: var(--ru-primary);--_w: 2.25rem;--_h: 1.25rem;--_t: 1rem;display:inline-flex;align-items:center;gap:.625rem;color:var(--ru-text);font-family:var(--ru-font-family);font-size:.875rem;cursor:pointer}.ru-switch--sm{--_w: 1.75rem;--_h: 1rem;--_t: .75rem}.ru-switch--lg{--_w: 2.75rem;--_h: 1.5rem;--_t: 1.25rem}.ru-switch--disabled{opacity:.55;cursor:not-allowed}.ru-switch__track{position:relative;display:inline-flex;align-items:center;flex-shrink:0;width:var(--_w);height:var(--_h);padding:0;border:none;border-radius:9999px;cursor:inherit;transition:background-color var(--ru-transition)}button.ru-switch__track{background:color-mix(in srgb,var(--ru-text-muted) 40%,transparent)}.ru-switch__track[aria-checked=true]{background:var(--_c)}.ru-switch__track:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c) 35%,transparent)}.ru-switch__thumb{position:absolute;left:2px;width:var(--_t);height:var(--_t);border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--ru-transition)}.ru-switch__track[aria-checked=true] .ru-switch__thumb{transform:translate(calc(var(--_w) - var(--_t) - 4px))}.ru-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--ru-z-overlay);display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto;background:var(--ru-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ru-fade-in .15s ease}.ru-modal{position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 2rem);border:1px solid var(--ru-border);border-radius:var(--ru-radius-lg);background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-lg);font-family:var(--ru-font-family);outline:none;animation:ru-scale-in .18s cubic-bezier(.16,1,.3,1)}.ru-modal--sm{max-width:24rem}.ru-modal--md{max-width:32rem}.ru-modal--lg{max-width:48rem}.ru-modal--xl{max-width:64rem}.ru-modal--full{max-width:none;height:calc(100vh - 2rem)}.ru-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem .5rem}.ru-modal__title{margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}.ru-modal__desc{margin:.25rem 0 0;color:var(--ru-text-muted);font-size:.875rem}.ru-modal__body{flex:1;overflow-y:auto;padding:.5rem 1.25rem 1.25rem;font-size:.875rem;line-height:1.6;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ru-text) 20%,transparent) transparent}.ru-modal__footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid var(--ru-border)}.ru-overlay--drawer{display:block;padding:0}.ru-drawer{position:fixed;display:flex;flex-direction:column;background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-lg);font-family:var(--ru-font-family);outline:none}.ru-drawer--left,.ru-drawer--right{top:0;height:100%;width:min(var(--ru-drawer-size, 24rem),100vw)}.ru-drawer--top,.ru-drawer--bottom{left:0;width:100%;height:min(var(--ru-drawer-size, 24rem),100vh)}.ru-drawer--right{right:0;border-left:1px solid var(--ru-border);animation:ru-slide-from-right .22s cubic-bezier(.16,1,.3,1)}.ru-drawer--left{left:0;border-right:1px solid var(--ru-border);animation:ru-slide-from-left .22s cubic-bezier(.16,1,.3,1)}.ru-drawer--top{top:0;border-bottom:1px solid var(--ru-border);animation:ru-slide-from-top .22s cubic-bezier(.16,1,.3,1)}.ru-drawer--bottom{bottom:0;border-top:1px solid var(--ru-border);animation:ru-slide-from-bottom .22s cubic-bezier(.16,1,.3,1)}.ru-tooltip{position:relative;display:inline-flex}.ru-tooltip__bubble{position:absolute;z-index:var(--ru-z-tooltip);width:max-content;max-width:16rem;padding:.375rem .625rem;border-radius:var(--ru-radius-sm);background:var(--ru-tooltip-bg);color:var(--ru-tooltip-text);box-shadow:var(--ru-shadow);font-family:var(--ru-font-family);font-size:.75rem;font-weight:500;line-height:1.4;pointer-events:none;animation:ru-fade-in .12s ease}.ru-tooltip__bubble--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.ru-tooltip__bubble--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.ru-tooltip__bubble--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ru-tooltip__bubble--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ru-dropdown{position:relative;display:inline-flex}.ru-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--ru-z-dropdown);min-width:10rem;padding:.25rem;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface);box-shadow:var(--ru-shadow);font-family:var(--ru-font-family);transform-origin:top;animation:ru-scale-in .12s ease}.ru-dropdown__menu--end{left:auto;right:0}.ru-dropdown__item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;border:none;border-radius:var(--ru-radius-sm);background:transparent;color:var(--ru-text);font:inherit;font-size:.875rem;text-align:left;white-space:nowrap;cursor:pointer}.ru-dropdown__item:hover:not(:disabled),.ru-dropdown__item:focus-visible{outline:none;background:var(--ru-muted)}.ru-dropdown__item--danger{color:var(--ru-danger)}.ru-dropdown__item--danger:hover:not(:disabled),.ru-dropdown__item--danger:focus-visible{background:color-mix(in srgb,var(--ru-danger) 10%,transparent)}.ru-dropdown__item:disabled{opacity:.5;cursor:not-allowed}.ru-dropdown__icon{display:flex}.ru-dropdown__icon svg{width:1rem;height:1rem}.ru-dropdown__divider{height:1px;margin:.25rem 0;background:var(--ru-border)}.ru-tabs{color:var(--ru-text);font-family:var(--ru-font-family)}.ru-tabs__list{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}.ru-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:.375rem;padding:.625rem .25rem;border:none;background:transparent;color:var(--ru-text-muted);font:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color var(--ru-transition),background-color var(--ru-transition)}.ru-tabs__tab:hover:not(:disabled){color:var(--ru-text)}.ru-tabs__tab:disabled{opacity:.5;cursor:not-allowed}.ru-tabs__tab:focus-visible{outline:2px solid var(--ru-primary);outline-offset:-2px;border-radius:var(--ru-radius-sm)}.ru-tabs__tab svg{width:1rem;height:1rem}.ru-tabs--line .ru-tabs__list{gap:1.25rem;box-shadow:inset 0 -1px 0 var(--ru-border)}.ru-tabs--line .ru-tabs__tab[aria-selected=true]{color:var(--ru-primary)}.ru-tabs--line .ru-tabs__tab[aria-selected=true]:after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;border-radius:2px;background:var(--ru-primary)}.ru-tabs--pills .ru-tabs__list{display:inline-flex;max-width:100%;padding:.25rem;border-radius:var(--ru-radius);background:var(--ru-muted)}.ru-tabs--pills .ru-tabs__tab{padding:.375rem .875rem;border-radius:var(--ru-radius-sm)}.ru-tabs--pills .ru-tabs__tab[aria-selected=true]{background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-sm)}.ru-tabs--full .ru-tabs__list{display:flex}.ru-tabs--full .ru-tabs__tab{flex:1;justify-content:center}.ru-tabs__panel{padding-top:1rem;font-size:.875rem;line-height:1.6;outline:none}.ru-accordion{overflow:hidden;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface);color:var(--ru-text);font-family:var(--ru-font-family)}.ru-accordion__item+.ru-accordion__item{border-top:1px solid var(--ru-border)}.ru-accordion__heading{margin:0;font:inherit}.ru-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;margin:0;padding:1rem 1.125rem;border:none;background:transparent;color:inherit;font:inherit;font-size:.9375rem;font-weight:500;text-align:left;cursor:pointer;transition:background-color var(--ru-transition)}.ru-accordion__trigger:hover:not(:disabled){background:color-mix(in srgb,var(--ru-muted) 60%,transparent)}.ru-accordion__trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ru-primary)}.ru-accordion__trigger:disabled{opacity:.5;cursor:not-allowed}.ru-accordion__chevron{flex-shrink:0;width:1rem;height:1rem;color:var(--ru-text-muted);transition:transform .2s ease}.ru-accordion__trigger[aria-expanded=true] .ru-accordion__chevron{transform:rotate(180deg)}.ru-accordion__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease,visibility .2s}.ru-accordion__panel--open{grid-template-rows:1fr;visibility:visible}.ru-accordion__inner{overflow:hidden}.ru-accordion__content{padding:0 1.125rem 1rem;color:var(--ru-text-muted);font-size:.875rem;line-height:1.6}.ru-pagination{font-family:var(--ru-font-family)}.ru-pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}.ru-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .5rem;border:1px solid var(--ru-border);border-radius:var(--ru-radius);color:var(--ru-text);font:inherit;font-size:.875rem;cursor:pointer;transition:background-color var(--ru-transition),border-color var(--ru-transition),color var(--ru-transition)}button.ru-pagination__btn{background:var(--ru-surface)}.ru-pagination--sm .ru-pagination__btn{min-width:2rem;height:2rem;font-size:.8125rem}.ru-pagination__btn:hover:not(:disabled):not([aria-current]){background:var(--ru-muted)}.ru-pagination__btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ru-primary) 35%,transparent)}.ru-pagination__btn[aria-current=page]{border-color:var(--ru-primary);background:var(--ru-primary);color:var(--ru-on-color)}.ru-pagination__btn:disabled{opacity:.45;cursor:not-allowed}.ru-pagination__btn svg{width:1rem;height:1rem}.ru-pagination__ellipsis{min-width:2rem;color:var(--ru-text-muted);text-align:center}.ru-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:0;padding:0;list-style:none;font-family:var(--ru-font-family);font-size:.875rem}.ru-breadcrumbs__item{display:inline-flex;align-items:center;color:var(--ru-text-muted)}.ru-breadcrumbs__item a{color:inherit}.ru-breadcrumbs__link{padding:0;border:none;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer;transition:color var(--ru-transition)}.ru-breadcrumbs__link:hover{color:var(--ru-text);text-decoration:underline}.ru-breadcrumbs__current{color:var(--ru-text);font-weight:500}.ru-breadcrumbs__sep{display:inline-flex;color:var(--ru-text-muted);opacity:.6}.ru-breadcrumbs__sep svg{width:.875rem;height:.875rem}.ru-progress{width:100%;font-family:var(--ru-font-family)}.ru-progress__label{display:flex;justify-content:space-between;margin-bottom:.375rem;color:var(--ru-text);font-size:.8125rem;font-weight:500}.ru-progress__value{color:var(--ru-text-muted)}.ru-progress__track{position:relative;width:100%;overflow:hidden;border-radius:9999px;background:var(--ru-muted)}.ru-progress__track--sm{height:.25rem}.ru-progress__track--md{height:.5rem}.ru-progress__track--lg{height:.75rem}.ru-progress__bar{height:100%;border-radius:inherit;background:var(--_c);transition:width .3s ease}.ru-progress--indeterminate .ru-progress__bar{position:absolute;width:40%;animation:ru-indeterminate 1.2s ease-in-out infinite}.ru-skeleton{position:relative;display:block;overflow:hidden;border-radius:var(--ru-radius-sm);background:var(--ru-muted)}.ru-skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,var(--ru-shimmer),transparent);transform:translate(-100%);animation:ru-shimmer 1.4s infinite}.ru-skeleton--text{height:.875rem}.ru-skeleton--rect{height:6rem}.ru-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:50%}.ru-skeleton-group{display:flex;flex-direction:column;gap:.5rem;width:100%}.ru-toaster{position:fixed;z-index:var(--ru-z-toast);display:flex;flex-direction:column;gap:.5rem;width:min(22rem,calc(100vw - 2rem));margin:0;padding:0;list-style:none;pointer-events:none}.ru-toaster--top-left{top:1rem;left:1rem}.ru-toaster--top-right{top:1rem;right:1rem}.ru-toaster--top-center{top:1rem;left:50%;transform:translate(-50%)}.ru-toaster--bottom-left{bottom:1rem;left:1rem}.ru-toaster--bottom-right{bottom:1rem;right:1rem}.ru-toaster--bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.ru-toast{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem .75rem .875rem 1rem;border:1px solid var(--ru-border);border-radius:var(--ru-radius);background:var(--ru-surface);color:var(--ru-text);box-shadow:var(--ru-shadow-lg);font-family:var(--ru-font-family);font-size:.875rem;pointer-events:auto;animation:ru-toast-in .22s cubic-bezier(.16,1,.3,1)}.ru-toast__icon{display:flex;padding-top:.0625rem;color:var(--_c)}.ru-toast__icon svg{width:1.125rem;height:1.125rem}.ru-toast__content{flex:1;min-width:0}.ru-toast__title{font-weight:600;line-height:1.4}.ru-toast__desc{margin-top:.125rem;color:var(--ru-text-muted);line-height:1.5}.ru-toast__action{margin-top:.5rem}.ru-toast .ru-close{margin-top:-.125rem}.ru-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.375rem;padding:0 .375rem;border-radius:.3125rem;background:var(--ru-surface);color:var(--ru-text-muted);box-shadow:var(--ru-shadow-xs),inset 0 -1px 0 var(--ru-border);font-family:var(--ru-font-mono);font-size:.6875rem;font-weight:500;line-height:1}.ru-pattern{--_line: color-mix(in srgb, var(--ru-text) 8%, transparent);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ru-pattern--grid{background-image:linear-gradient(to right,var(--_line) 1px,transparent 1px),linear-gradient(to bottom,var(--_line) 1px,transparent 1px);background-size:var(--ru-pattern-size) var(--ru-pattern-size)}.ru-pattern--dots{background-image:radial-gradient(circle,color-mix(in srgb,var(--ru-text) 20%,transparent) 1px,transparent 1px);background-size:var(--ru-pattern-size) var(--ru-pattern-size)}.ru-pattern--fade{-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%)}.ru-spotlight{position:relative;isolation:isolate}.ru-spotlight:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--ru-spot-x, 50%) var(--ru-spot-y, 50%),color-mix(in srgb,var(--ru-spot-color, var(--ru-primary)) 16%,transparent),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}.ru-spotlight:hover:before{opacity:1}.ru-c-primary{--_c: var(--ru-primary)}.ru-c-secondary{--_c: var(--ru-secondary)}.ru-c-success{--_c: var(--ru-success)}.ru-c-danger{--_c: var(--ru-danger)}.ru-c-warning{--_c: var(--ru-warning)}.ru-c-info{--_c: var(--ru-info)}@keyframes ru-spin{to{transform:rotate(360deg)}}@keyframes ru-fade-in{0%{opacity:0}}@keyframes ru-scale-in{0%{opacity:0;transform:translateY(6px) scale(.97)}}@keyframes ru-toast-in{0%{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes ru-slide-from-right{0%{transform:translate(100%)}}@keyframes ru-slide-from-left{0%{transform:translate(-100%)}}@keyframes ru-slide-from-top{0%{transform:translateY(-100%)}}@keyframes ru-slide-from-bottom{0%{transform:translateY(100%)}}@keyframes ru-indeterminate{0%{left:-40%}to{left:100%}}@keyframes ru-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.ru-overlay,.ru-modal,.ru-drawer,.ru-toast,.ru-dropdown__menu,.ru-tooltip__bubble,.ru-skeleton:after{animation:none}.ru-spinner{animation-duration:1.5s}.ru-accordion__panel,.ru-card--hoverable{transition:none}}
|
package/package.json
CHANGED
|
@@ -1,40 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reusify-ui",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"main": "dist/reusify-ui.
|
|
7
|
-
"module": "dist/reusify-ui.
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Reusable, accessible React UI components with dark mode and CSS-variable theming. Works with or without Tailwind CSS.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/reusify-ui.cjs",
|
|
7
|
+
"module": "./dist/reusify-ui.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/reusify-ui.js",
|
|
11
|
+
"require": "./dist/reusify-ui.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./styles.css": "./dist/styles.css",
|
|
14
|
+
"./package.json": "./package.json"
|
|
15
|
+
},
|
|
8
16
|
"files": [
|
|
9
17
|
"dist"
|
|
10
18
|
],
|
|
11
|
-
"
|
|
19
|
+
"sideEffects": [
|
|
20
|
+
"**/*.css"
|
|
21
|
+
],
|
|
12
22
|
"scripts": {
|
|
13
23
|
"dev": "vite",
|
|
14
|
-
"build": "
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
},
|
|
18
|
-
"exports": {
|
|
19
|
-
".": {
|
|
20
|
-
"import": "./dist/reusify-ui.es.js",
|
|
21
|
-
"require": "./dist/reusify-ui.umd.js"
|
|
22
|
-
}
|
|
24
|
+
"build": "vite build",
|
|
25
|
+
"preview": "vite preview",
|
|
26
|
+
"prepublishOnly": "npm run build"
|
|
23
27
|
},
|
|
24
28
|
"peerDependencies": {
|
|
25
|
-
"react": "
|
|
26
|
-
"react-dom": "
|
|
29
|
+
"react": ">=18.0.0",
|
|
30
|
+
"react-dom": ">=18.0.0"
|
|
27
31
|
},
|
|
28
32
|
"devDependencies": {
|
|
29
|
-
"@eslint/js": "^9.25.0",
|
|
30
|
-
"@types/react": "^18.2.47",
|
|
31
|
-
"@types/react-dom": "^18.2.17",
|
|
32
33
|
"@vitejs/plugin-react": "^4.4.1",
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"eslint-plugin-react-hooks": "^5.2.0",
|
|
36
|
-
"eslint-plugin-react-refresh": "^0.4.19",
|
|
37
|
-
"globals": "^16.0.0",
|
|
34
|
+
"react": "^18.3.1",
|
|
35
|
+
"react-dom": "^18.3.1",
|
|
38
36
|
"vite": "^6.3.5"
|
|
39
37
|
},
|
|
40
38
|
"keywords": [
|
|
@@ -42,9 +40,12 @@
|
|
|
42
40
|
"reusify-ui",
|
|
43
41
|
"react",
|
|
44
42
|
"ui",
|
|
43
|
+
"components",
|
|
45
44
|
"component-library",
|
|
45
|
+
"design-system",
|
|
46
|
+
"dark-mode",
|
|
46
47
|
"tailwindcss",
|
|
47
|
-
"
|
|
48
|
+
"accessible"
|
|
48
49
|
],
|
|
49
50
|
"author": "Mukesh Yadav",
|
|
50
51
|
"license": "MIT",
|
|
@@ -52,8 +53,8 @@
|
|
|
52
53
|
"type": "git",
|
|
53
54
|
"url": "git+https://github.com/curiousdevx/reusify-ui.git"
|
|
54
55
|
},
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
"
|
|
56
|
+
"homepage": "https://github.com/curiousdevx/reusify-ui#readme",
|
|
57
|
+
"bugs": {
|
|
58
|
+
"url": "https://github.com/curiousdevx/reusify-ui/issues"
|
|
58
59
|
}
|
|
59
60
|
}
|