elij-ui-library 0.1.0

package/dist/provider/UIContext.d.ts

@@ -0,0 +1,10 @@
+import { MessageKey, Messages } from '../i18n/messages';
+import { ThemeName } from './UIProvider';
+export interface UIContextValue {
+    locale: string;
+    messages: Messages;
+    theme: ThemeName;
+    t: (key: MessageKey | (string & {}), fallback?: string) => string;
+}
+export declare const UIContext: import('react').Context<UIContextValue>;
+export declare function useUI(): UIContextValue;

package/dist/provider/UIProvider.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInLocale, Messages } from '../i18n/messages';
+export type ThemeName = 'light' | 'dark' | 'ocean' | (string & {});
+export interface UIProviderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: ReactNode;
+    locale?: BuiltInLocale | (string & {});
+    messages?: Partial<Messages>;
+    theme?: ThemeName;
+}
+export declare function UIProvider({ children, locale, messages, theme, className, style, ...props }: UIProviderProps): import("react").JSX.Element;

package/dist/provider/index.d.ts

@@ -0,0 +1,5 @@
+export { UIProvider } from './UIProvider';
+export type { ThemeName, UIProviderProps } from './UIProvider';
+export { useUI } from './UIContext';
+export type { UIContextValue } from './UIContext';
+export type { BuiltInLocale, MessageKey, Messages } from '../i18n/messages';

package/dist/ui-library.css

@@ -0,0 +1 @@
+:root{--ui-color-primary: #2563eb;--ui-color-primary-hover: #1d4ed8;--ui-color-primary-active: #1e40af;--ui-color-on-primary: #ffffff;--ui-color-text: #172033;--ui-color-surface: #ffffff;--ui-color-border: #d9e0eb;--ui-color-focus: #93c5fd;--ui-color-muted: #64748b;--ui-color-subtle: #f8fafc;--ui-color-danger: #dc2626;--ui-color-danger-subtle: #fef2f2;--ui-color-success: #15803d;--ui-color-success-subtle: #f0fdf4;--ui-color-warning: #a16207;--ui-color-warning-subtle: #fffbeb;--ui-color-info: #0369a1;--ui-color-info-subtle: #f0f9ff;--ui-chart-1: #2563eb;--ui-chart-2: #16a34a;--ui-chart-3: #d97706;--ui-chart-4: #9333ea;--ui-chart-5: #0891b2;--ui-radius-sm: .5rem;--ui-radius-md: .75rem;--ui-shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);--ui-shadow-md: 0 12px 32px rgb(15 23 42 / 16%);--ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-ui-theme=dark]{--ui-color-primary: #60a5fa;--ui-color-primary-hover: #93c5fd;--ui-color-primary-active: #3b82f6;--ui-color-on-primary: #0f172a;--ui-color-text: #e5edf8;--ui-color-surface: #111827;--ui-color-border: #334155;--ui-color-focus: #60a5fa;--ui-color-muted: #94a3b8;--ui-color-subtle: #1e293b;--ui-color-danger: #f87171;--ui-color-danger-subtle: #3b171d;--ui-color-success: #4ade80;--ui-color-success-subtle: #12351f;--ui-color-warning: #facc15;--ui-color-warning-subtle: #3b2f0b;--ui-color-info: #7dd3fc;--ui-color-info-subtle: #0c3044;--ui-chart-1: #60a5fa;--ui-chart-2: #4ade80;--ui-chart-3: #fbbf24;--ui-chart-4: #c084fc;--ui-chart-5: #22d3ee;--ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 35%)}[data-ui-theme=ocean]{--ui-color-primary: #007f86;--ui-color-primary-hover: #00666c;--ui-color-primary-active: #005158;--ui-color-on-primary: #ffffff;--ui-color-text: #12353a;--ui-color-surface: #f4feff;--ui-color-border: #aadce0;--ui-color-focus: #67d4da;--ui-color-muted: #51777b;--ui-color-subtle: #e3f8fa;--ui-chart-1: #007f86;--ui-chart-2: #2f855a;--ui-chart-3: #b7791f;--ui-chart-4: #6b46c1;--ui-chart-5: #0284c7}.ui-provider{color:var(--ui-color-text);background:var(--ui-color-surface);font-family:var(--ui-font-family)}*,*:before,*:after{box-sizing:border-box}.ui-field{display:inline-grid;gap:.375rem;color:var(--ui-color-text);font-family:var(--ui-font-family)}.ui-field--full{width:100%}.ui-field__label{margin:0;color:var(--ui-color-text);font-size:.875rem;font-weight:650}.ui-field__message{color:var(--ui-color-muted);font-size:.75rem}.ui-field__message--error{color:var(--ui-color-danger)}.ui-input,.ui-textarea,.ui-select{width:100%;min-height:2.5rem;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);color:var(--ui-color-text);background:var(--ui-color-surface);font:inherit;padding:.625rem .75rem;transition:border-color .14s ease,box-shadow .14s ease}.ui-textarea{min-height:6rem;resize:vertical}.ui-input:focus,.ui-textarea:focus,.ui-select:focus{border-color:var(--ui-color-primary);box-shadow:0 0 0 3px var(--ui-color-focus);outline:none}.ui-input--error,.ui-textarea--error,.ui-select--error{border-color:var(--ui-color-danger)}.ui-input:disabled,.ui-textarea:disabled,.ui-select:disabled{cursor:not-allowed;opacity:.55;background:var(--ui-color-subtle)}.ui-check,.ui-radio,.ui-switch-row{display:inline-flex;align-items:center;gap:.625rem;color:var(--ui-color-text);cursor:pointer;font-family:var(--ui-font-family)}.ui-check--disabled,.ui-switch-row--disabled{cursor:not-allowed;opacity:.55}.ui-check__input,.ui-radio input{position:absolute;width:1px;height:1px;opacity:0}.ui-check__control,.ui-radio__control{display:grid;width:1.125rem;height:1.125rem;place-items:center;border:1px solid var(--ui-color-border);background:var(--ui-color-surface)}.ui-check__control{border-radius:.25rem}.ui-radio__control{border-radius:50%}.ui-check__input:checked+.ui-check__control,.ui-check__input:indeterminate+.ui-check__control,.ui-radio input:checked+.ui-radio__control{border-color:var(--ui-color-primary);background:var(--ui-color-primary)}.ui-check__input:checked+.ui-check__control:after{content:"";width:.5rem;height:.25rem;border:solid var(--ui-color-on-primary);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px)}.ui-check__input:indeterminate+.ui-check__control:after{content:"";width:.55rem;height:2px;background:var(--ui-color-on-primary)}.ui-radio input:checked+.ui-radio__control:after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--ui-color-on-primary)}.ui-check__input:focus-visible+.ui-check__control,.ui-radio input:focus-visible+.ui-radio__control{outline:3px solid var(--ui-color-focus);outline-offset:2px}.ui-radio-group{margin:0;padding:0;border:0}.ui-radio-group__options{display:flex;gap:.75rem;margin-top:.5rem}.ui-radio-group--vertical .ui-radio-group__options{flex-direction:column}.ui-switch{position:relative;width:2.75rem;height:1.5rem;flex:none;border:0;border-radius:999px;background:var(--ui-color-border);cursor:pointer;padding:.1875rem;transition:background .14s ease}.ui-switch[aria-checked=true]{background:var(--ui-color-primary)}.ui-switch__thumb{display:block;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;box-shadow:var(--ui-shadow-sm);transition:transform .14s ease}.ui-switch[aria-checked=true] .ui-switch__thumb{transform:translate(1.25rem)}.ui-switch:focus-visible{outline:3px solid var(--ui-color-focus);outline-offset:2px}.ui-badge{display:inline-flex;align-items:center;width:fit-content;min-height:1.5rem;border-radius:999px;padding:.2rem .6rem;background:var(--ui-color-subtle);color:var(--ui-color-text);font:650 .75rem/1 var(--ui-font-family)}.ui-badge--primary{color:var(--ui-color-primary);background:color-mix(in srgb,var(--ui-color-primary) 12%,var(--ui-color-surface))}.ui-badge--success{color:var(--ui-color-success);background:var(--ui-color-success-subtle)}.ui-badge--warning{color:var(--ui-color-warning);background:var(--ui-color-warning-subtle)}.ui-badge--danger{color:var(--ui-color-danger);background:var(--ui-color-danger-subtle)}.ui-alert{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid currentColor;border-radius:var(--ui-radius-md);padding:.875rem 1rem;font-family:var(--ui-font-family)}.ui-alert--info{color:var(--ui-color-info);background:var(--ui-color-info-subtle)}.ui-alert--success{color:var(--ui-color-success);background:var(--ui-color-success-subtle)}.ui-alert--warning{color:var(--ui-color-warning);background:var(--ui-color-warning-subtle)}.ui-alert--error{color:var(--ui-color-danger);background:var(--ui-color-danger-subtle)}.ui-alert__content{display:grid;gap:.25rem}.ui-alert__title{color:inherit}.ui-alert__dismiss,.ui-dialog__close{border:0;color:inherit;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.ui-alert__dismiss:focus-visible,.ui-dialog__close:focus-visible{outline:3px solid var(--ui-color-focus);outline-offset:2px}.ui-card{overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);color:var(--ui-color-text);background:var(--ui-color-surface);box-shadow:var(--ui-shadow-sm);font-family:var(--ui-font-family)}.ui-card--interactive{transition:transform .14s ease,box-shadow .14s ease}.ui-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-md)}.ui-card__header,.ui-card__body,.ui-card__footer{padding:1rem 1.25rem}.ui-card__header{border-bottom:1px solid var(--ui-color-border)}.ui-card__footer{border-top:1px solid var(--ui-color-border);background:var(--ui-color-subtle)}.ui-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2px solid var(--ui-color-border);border-top-color:var(--ui-color-primary);border-radius:50%;animation:ui-spin .7s linear infinite}.ui-spinner--small{width:1rem;height:1rem}.ui-spinner--large{width:2.25rem;height:2.25rem;border-width:3px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ui-spinner{animation-duration:1.5s}}.ui-dialog__backdrop{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:1rem;background:#0206179e}.ui-dialog{width:min(32rem,100%);max-height:calc(100vh - 2rem);overflow:auto;border-radius:var(--ui-radius-md);color:var(--ui-color-text);background:var(--ui-color-surface);box-shadow:var(--ui-shadow-md);font-family:var(--ui-font-family)}.ui-dialog__header{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--ui-color-border);padding:1.25rem}.ui-dialog__header h2,.ui-dialog__header p{margin:0}.ui-dialog__header p{margin-top:.375rem;color:var(--ui-color-muted)}.ui-dialog__body{padding:1.25rem}.ui-dialog__footer{display:flex;justify-content:flex-end;gap:.75rem;border-top:1px solid var(--ui-color-border);padding:1rem 1.25rem;background:var(--ui-color-subtle)}.ui-divider{display:flex;align-items:center;color:var(--ui-color-muted);font:.75rem var(--ui-font-family)}.ui-divider--horizontal{width:100%;border-top:1px solid var(--ui-color-border)}.ui-divider--vertical{align-self:stretch;min-height:1.5rem;border-left:1px solid var(--ui-color-border)}.ui-divider--labelled{gap:.75rem;border:0}.ui-divider--labelled:before,.ui-divider--labelled:after{content:"";flex:1;border-top:1px solid var(--ui-color-border)}.ui-title{margin:0 0 .5em;color:var(--ui-color-text);font-family:var(--ui-font-family);line-height:1.2}.ui-title--1{font-size:2.25rem}.ui-title--2{font-size:1.875rem}.ui-title--3{font-size:1.5rem}.ui-title--4{font-size:1.25rem}.ui-title--5{font-size:1rem}.ui-title--6{font-size:.875rem}.ui-text,.ui-paragraph,.ui-link{color:var(--ui-color-text);font-family:var(--ui-font-family)}.ui-text--secondary{color:var(--ui-color-muted)}.ui-text--success{color:var(--ui-color-success)}.ui-text--warning{color:var(--ui-color-warning)}.ui-text--danger{color:var(--ui-color-danger)}.ui-text--strong{font-weight:700}.ui-text--code{border-radius:.25rem;padding:.125rem .3rem;background:var(--ui-color-subtle)}.ui-paragraph{margin:0 0 1rem;line-height:1.65}.ui-link{color:var(--ui-color-primary);text-decoration:underline;text-underline-offset:3px}.ui-space,.ui-flex{display:flex}.ui-space--vertical{flex-direction:column;align-items:stretch}.ui-row{display:flex;flex-wrap:wrap;width:auto}.ui-col{min-width:0}.ui-layout{display:flex;min-height:0;flex:1;flex-direction:column;color:var(--ui-color-text);background:var(--ui-color-subtle);font-family:var(--ui-font-family)}.ui-layout>.ui-layout{flex-direction:row}.ui-layout__header,.ui-layout__footer{padding:1rem 1.5rem;background:var(--ui-color-surface)}.ui-layout__sider{flex:0 0 14rem;padding:1rem;background:var(--ui-color-surface)}.ui-layout__content{flex:1;padding:1.5rem}.ui-avatar{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;flex:none;color:var(--ui-color-on-primary);background:var(--ui-color-primary);font:650 1rem var(--ui-font-family)}.ui-avatar--circle{border-radius:50%}.ui-avatar--square{border-radius:var(--ui-radius-sm)}.ui-avatar img{width:100%;height:100%;object-fit:cover}.ui-tag{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--ui-color-border);border-radius:.375rem;padding:.2rem .5rem;color:var(--ui-color-text);background:var(--ui-color-subtle);font:.75rem var(--ui-font-family)}.ui-tag button{border:0;padding:0;color:inherit;background:transparent;cursor:pointer}.ui-tag--primary{color:var(--ui-color-primary)}.ui-tag--success{color:var(--ui-color-success);background:var(--ui-color-success-subtle)}.ui-tag--warning{color:var(--ui-color-warning);background:var(--ui-color-warning-subtle)}.ui-tag--danger{color:var(--ui-color-danger);background:var(--ui-color-danger-subtle)}.ui-menu{display:flex;gap:.25rem;padding:.375rem;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);background:var(--ui-color-surface)}.ui-menu--vertical{min-width:12rem;flex-direction:column}.ui-menu__item{display:flex;align-items:center;gap:.5rem;border:0;border-radius:.375rem;padding:.625rem .75rem;color:var(--ui-color-text);background:transparent;cursor:pointer;text-align:left}.ui-menu__item:hover,.ui-menu__item:focus-visible,.ui-menu__item--active{color:var(--ui-color-primary);background:var(--ui-color-subtle);outline:none}.ui-menu__item--danger{color:var(--ui-color-danger)}.ui-menu__item:disabled{cursor:not-allowed;opacity:.45}.ui-dropdown{position:relative;display:inline-block}.ui-dropdown__panel{position:absolute;z-index:50;top:calc(100% + .375rem);min-width:12rem;box-shadow:var(--ui-shadow-md)}.ui-dropdown__panel--bottom-start{left:0}.ui-dropdown__panel--bottom-end{right:0}.ui-tabs{color:var(--ui-color-text);font-family:var(--ui-font-family)}.ui-tabs__list{display:flex;gap:.25rem;border-bottom:1px solid var(--ui-color-border)}.ui-tabs--vertical{display:flex}.ui-tabs--vertical .ui-tabs__list{min-width:10rem;flex-direction:column;border:0;border-right:1px solid var(--ui-color-border)}.ui-tabs__list button{border:0;border-bottom:2px solid transparent;padding:.75rem 1rem;color:var(--ui-color-muted);background:transparent;cursor:pointer}.ui-tabs__list button[aria-selected=true]{border-color:var(--ui-color-primary);color:var(--ui-color-primary)}.ui-tabs__list button:focus-visible{outline:3px solid var(--ui-color-focus);outline-offset:-3px}.ui-tabs__panel{padding:1rem}.ui-filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--ui-font-family)}.ui-filter-tabs button{border:1px solid var(--ui-color-border);border-radius:999px;padding:.5rem .875rem;color:var(--ui-color-text);background:var(--ui-color-surface);cursor:pointer}.ui-filter-tabs button[aria-pressed=true]{border-color:var(--ui-color-primary);color:var(--ui-color-on-primary);background:var(--ui-color-primary)}.ui-filter-tabs button:disabled{cursor:not-allowed;opacity:.5}.ui-filter-tabs button:focus-visible{outline:3px solid var(--ui-color-focus);outline-offset:2px}.ui-section-heading{display:grid;gap:1rem;color:var(--ui-color-text);font-family:var(--ui-font-family)}.ui-section-heading>div{min-width:0}.ui-section-heading .eyebrow{margin:0 0 .5rem;color:var(--ui-color-primary);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ui-section-heading .ui-title{margin-bottom:0}.ui-section-heading .ui-paragraph{margin:0;color:var(--ui-color-muted)}.event-carousel{overflow:hidden;color:var(--ui-color-text);font-family:var(--ui-font-family)}.event-carousel-viewport{position:relative;overflow:hidden}.event-carousel-track{display:flex;transition:transform .22s ease}.event-carousel-slide{min-width:100%;aspect-ratio:3 / 4;background:var(--ui-color-subtle)}.event-carousel-slide img,.event-carousel-slide video{display:block;width:100%;height:100%;object-fit:contain}.event-carousel-control{position:absolute;top:50%;border:1px solid var(--ui-color-border);border-radius:50%;padding:.35rem .55rem;color:var(--ui-color-text);background:var(--ui-color-surface);cursor:pointer;transform:translateY(-50%)}.event-carousel-control--prev{left:.75rem}.event-carousel-control--next{right:.75rem}.event-carousel-footer{padding-top:.75rem}.event-carousel-footer .ui-paragraph{margin:0;color:var(--ui-color-muted)}.event-carousel-dots{display:flex;justify-content:center;gap:.35rem;padding-top:.75rem}.event-carousel-dots button{width:.45rem;height:.45rem;border:0;border-radius:50%;background:var(--ui-color-border);cursor:pointer}.event-carousel-dots button[aria-current=true]{background:var(--ui-color-primary)}.ui-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;font:.875rem var(--ui-font-family)}.ui-breadcrumb li{display:flex;gap:.5rem;color:var(--ui-color-muted)}.ui-breadcrumb a{color:var(--ui-color-primary)}.ui-breadcrumb__separator{color:var(--ui-color-border)}.ui-pagination{display:flex;align-items:center;gap:.25rem}.ui-pagination>span{display:flex;align-items:center;gap:.25rem}.ui-pagination button{min-width:2rem;height:2rem;border:1px solid var(--ui-color-border);border-radius:.375rem;color:var(--ui-color-text);background:var(--ui-color-surface);cursor:pointer}.ui-pagination button[aria-current=page]{border-color:var(--ui-color-primary);color:var(--ui-color-on-primary);background:var(--ui-color-primary)}.ui-pagination button:disabled{opacity:.4;cursor:not-allowed}.ui-pagination__ellipsis{padding:0 .25rem;color:var(--ui-color-muted)}.ui-steps{display:flex;margin:0;padding:0;list-style:none}.ui-steps--vertical{flex-direction:column}.ui-step{position:relative;flex:1}.ui-step button{display:flex;align-items:flex-start;gap:.75rem;width:100%;border:0;padding:.5rem;color:var(--ui-color-muted);background:transparent;text-align:left}.ui-step__icon{display:grid;width:1.75rem;height:1.75rem;flex:none;place-items:center;border:1px solid currentColor;border-radius:50%}.ui-step small{display:block;margin-top:.2rem}.ui-step--process button{color:var(--ui-color-primary)}.ui-step--finish button{color:var(--ui-color-success)}.ui-step--error button{color:var(--ui-color-danger)}.ui-tooltip{position:relative;display:inline-flex}.ui-tooltip__bubble{position:absolute;z-index:100;width:max-content;max-width:18rem;border-radius:.375rem;padding:.4rem .6rem;color:#fff;background:#111827;font:.75rem var(--ui-font-family);pointer-events:none}.ui-tooltip__bubble--top{bottom:calc(100% + .4rem);left:50%;transform:translate(-50%)}.ui-tooltip__bubble--bottom{top:calc(100% + .4rem);left:50%;transform:translate(-50%)}.ui-tooltip__bubble--left{right:calc(100% + .4rem)}.ui-tooltip__bubble--right{left:calc(100% + .4rem)}.ui-table-wrap{overflow-x:auto;color:var(--ui-color-text);font-family:var(--ui-font-family)}.ui-table{width:100%;border-collapse:collapse;background:var(--ui-color-surface)}.ui-table caption{padding:.75rem;font-weight:700;text-align:left}.ui-table th,.ui-table td{border-bottom:1px solid var(--ui-color-border);padding:.75rem 1rem}.ui-table th{background:var(--ui-color-subtle);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.ui-empty{display:grid;justify-items:center;gap:.75rem;padding:2rem;color:var(--ui-color-muted);font-family:var(--ui-font-family);text-align:center}.ui-empty--compact{padding:1rem}.ui-empty__image{display:grid;width:3.5rem;height:3.5rem;place-items:center;border-radius:50%;background:var(--ui-color-subtle);font-size:2rem}.ui-skeleton{display:inline-block;min-height:1em;border-radius:.25rem;background:var(--ui-color-border)}.ui-skeleton--text{width:100%}.ui-skeleton--circle{border-radius:50%}.ui-skeleton--animated{background:linear-gradient(90deg,var(--ui-color-border),var(--ui-color-subtle),var(--ui-color-border));background-size:200% 100%;animation:ui-skeleton 1.4s ease infinite}@keyframes ui-skeleton{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ui-skeleton--animated{animation:none}}.ui-progress--line{display:flex;align-items:center;gap:.75rem;color:var(--ui-color-text)}.ui-progress__track{overflow:hidden;width:100%;height:.5rem;border-radius:999px;background:var(--ui-color-border)}.ui-progress__track span{display:block;height:100%;border-radius:inherit;background:var(--ui-color-primary)}.ui-progress--success .ui-progress__track span,.ui-progress--success .ui-progress__value{stroke:var(--ui-color-success);background:var(--ui-color-success)}.ui-progress--error .ui-progress__track span,.ui-progress--error .ui-progress__value{stroke:var(--ui-color-danger);background:var(--ui-color-danger)}.ui-progress--circle{position:relative;display:inline-grid;width:7rem;height:7rem;place-items:center}.ui-progress--circle svg{position:absolute;inset:0;transform:rotate(-90deg)}.ui-progress--circle circle{fill:none;stroke-width:8}.ui-progress__trail{stroke:var(--ui-color-border)}.ui-progress__value{stroke:var(--ui-color-primary);transition:stroke-dashoffset .2s ease}.ui-result{display:grid;justify-items:center;gap:.75rem;padding:2.5rem 1rem;color:var(--ui-color-text);text-align:center}.ui-result h2,.ui-result p{margin:0}.ui-result p{color:var(--ui-color-muted)}.ui-result__icon{display:grid;width:4rem;height:4rem;place-items:center;border-radius:50%;color:var(--ui-color-info);background:var(--ui-color-info-subtle);font-size:2rem}.ui-result--success .ui-result__icon{color:var(--ui-color-success);background:var(--ui-color-success-subtle)}.ui-result--warning .ui-result__icon{color:var(--ui-color-warning);background:var(--ui-color-warning-subtle)}.ui-result--error .ui-result__icon{color:var(--ui-color-danger);background:var(--ui-color-danger-subtle)}.ui-result__actions{margin-top:.75rem}.ui-drawer__backdrop{position:fixed;z-index:1000;inset:0;background:#0206179e}.ui-drawer{position:absolute;top:0;bottom:0;display:flex;max-width:calc(100vw - 2rem);flex-direction:column;color:var(--ui-color-text);background:var(--ui-color-surface);box-shadow:var(--ui-shadow-md)}.ui-drawer--left{left:0}.ui-drawer--right{right:0}.ui-drawer header,.ui-drawer footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--ui-color-border)}.ui-drawer footer{justify-content:flex-end;border-top:1px solid var(--ui-color-border);border-bottom:0}.ui-drawer h2{margin:0}.ui-drawer header button{border:0;color:inherit;background:transparent;font-size:1.25rem;cursor:pointer}.ui-drawer__body{overflow:auto;flex:1;padding:1.25rem}.ui-chart{width:100%;min-width:240px;color:var(--ui-color-text)}.ui-chart>.ui-empty,.ui-chart>.ui-spinner{height:100%;display:flex;align-items:center;justify-content:center}.ui-chart .recharts-text,.ui-chart .recharts-legend-item-text{fill:var(--ui-color-muted);color:var(--ui-color-muted)!important;font-family:var(--ui-font-family);font-size:12px}.ui-chart .recharts-default-tooltip{color:#172033;border-color:var(--ui-color-border)!important;border-radius:var(--ui-radius-sm)}.ui-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ui-radius-sm);font-family:var(--ui-font-family);font-weight:650;line-height:1;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.ui-button:focus-visible{outline:3px solid var(--ui-color-focus);outline-offset:2px}.ui-button:disabled{cursor:not-allowed;opacity:.5}.ui-button--primary{color:var(--ui-color-on-primary);background:var(--ui-color-primary)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--secondary{color:var(--ui-color-text);background:var(--ui-color-surface);border-color:var(--ui-color-border);box-shadow:var(--ui-shadow-sm)}.ui-button--secondary:hover:not(:disabled){background:var(--ui-color-subtle)}.ui-button--ghost{color:var(--ui-color-primary);background:transparent}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-subtle)}.ui-button--small{min-height:2rem;padding:.45rem .75rem;font-size:.8125rem}.ui-button--medium{min-height:2.5rem;padding:.625rem 1rem;font-size:.875rem}.ui-button--large{min-height:3rem;padding:.75rem 1.25rem;font-size:1rem}.ui-button--full-width{width:100%}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "elij-ui-library",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Reusable React UI Components Storybook",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zzr6036/web-workspace.git",
+    "directory": "packages/elij-ui-library"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/ui-library.css"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc -b && vite build",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.node.json --noEmit",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepack": "yarn build"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.35.0",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^22.18.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.2",
+    "eslint": "^9.35.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^9.1.5",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.42.0",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.11"
+  },
+  "dependencies": {
+    "react-is": "^19.2.6",
+    "recharts": "^3.10.1"
+  }
+}