@bigtablet/design-system 1.16.2 → 1.17.1

package/dist/vanilla/bigtablet.min.css

@@ -0,0 +1 @@
+:root{--bt-color-primary: #000000;--bt-color-primary-hover: #333333;--bt-color-background: #ffffff;--bt-color-background-secondary: #fafafa;--bt-color-background-neutral: #F3F3F3;--bt-color-background-muted: #f0f0f0;--bt-color-text-primary: #1a1a1a;--bt-color-text-secondary: #666666;--bt-color-text-tertiary: #999999;--bt-text-inverse: #ffffff;--bt-text-disabled: #9ca3af;--bt-color-border: #e5e5e5;--bt-color-border-light: rgba(0, 0, 0, 0.08);--bt-color-success: #10b981;--bt-color-error: #ef4444;--bt-color-warning: #f59e0b;--bt-color-info: #3b82f6;--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-spacing-xs: 0.25rem;--bt-spacing-sm: 0.5rem;--bt-spacing-md: 0.75rem;--bt-spacing-lg: 1rem;--bt-spacing-xl: 1.25rem;--bt-spacing-2xl: 1.5rem;--bt-spacing-3xl: 1.75rem;--bt-font-family: Pretendard, sans-serif;--bt-font-size-xs: 0.75rem;--bt-font-size-sm: 0.875rem;--bt-font-size-base: 0.9375rem;--bt-font-size-md: 1rem;--bt-font-size-lg: 1.125rem;--bt-font-size-xl: 1.25rem;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-font-weight-bold: 700;--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);--bt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 10000;--bt-z-toast: 10001}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-primary);border-color:var(--bt-color-primary)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-background);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-md);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;inset:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-shadow-lg);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;inset:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-shadow-xl);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;inset:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-lg)}.bt-hidden{display:none !important}.bt-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}/*# sourceMappingURL=bigtablet.min.css.map */

package/dist/vanilla/bigtablet.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/vanilla/bigtablet.scss"],"names":[],"mappings":"AAWA,MAEE,4BACA,kCAGA,+BACA,yCACA,uCACA,qCAGA,iCACA,mCACA,kCACA,2BACA,4BAGA,2BACA,6CAGA,4BACA,0BACA,4BACA,yBAGA,uCAGA,yBACA,wBACA,yBACA,sBACA,yBACA,yBACA,0BAGA,yCACA,2BACA,4BACA,+BACA,wBACA,4BACA,2BACA,8BACA,6BACA,+BACA,2BACA,6BAGA,oBACA,oBACA,qBACA,yBAGA,8CACA,8EACA,8EACA,0FAGA,uCACA,uCACA,uCAGA,oBACA,oBAMF,WACE,oBACA,mBACA,uBACA,yBACA,kCACA,YACA,eACA,kCACA,yCACA,yJAKA,oBACE,mBACA,WAIF,eACE,kDACA,iCAGF,eACE,kDACA,mCAGF,eACE,mDACA,iCAIF,oBACE,mCACA,iCAEA,yCACE,yCAGF,0CACE,sBAIJ,sBACE,yBACA,wCACA,mCAEA,2CACE,gDAGF,4CACE,sBAIJ,kBACE,yBACA,mCAEA,uCACE,2BAGF,wCACE,sBAIJ,mBACE,iCACA,iCAEA,wCACE,6DAGF,yCACE,sBAIJ,uBACE,WAOJ,eACE,aACA,sBAEA,2BACE,WAGF,sBACE,mCACA,mCACA,iCACA,yCACA,yCAGF,qBACE,kBACA,oBACA,WACA,mBAGF,sBACE,WACA,kCACA,kCACA,mCACA,yCACA,mCACA,sCACA,4HAIA,mCACE,oCAGF,+BACE,mBACA,gDACA,oCACA,WAIF,+BACE,wCAEA,oDACE,0CAGF,6CACE,aACA,qCACA,qCAIJ,8BACE,gDACA,+BAEA,4CACE,aACA,qCACA,sCACA,qCAKJ,0BACE,kDACA,iCAGF,0BACE,kDACA,mCAGF,0BACE,mDACA,iCAIF,6BACE,8CACA,oDAGF,+BACE,gDACA,qDAIJ,uBACE,gCACA,iCACA,qCAEA,8BACE,4BAGF,gCACE,8BAIJ,qBACE,kBACA,oBACA,mBACA,uBACA,cACA,eACA,qCAEA,2BACE,0BAGF,4BACE,2BAQN,aACE,oBACA,mBACA,yBACA,eACA,iBACA,kBAEA,oBACE,kBACA,UACA,WACA,gBACA,mBACA,qBACA,mBAGF,kBACE,eACA,gBACA,sBACA,wCACA,kCACA,sCACA,4HAGA,qBACA,kBAGF,oBACE,kCACA,mCACA,yCACA,mCAKA,mCACE,WACA,YAEF,qCACE,iCAKF,mCACE,cACA,eAEF,qCACE,iCAKJ,oDACE,kDACA,qCAGF,gGAEE,WACA,mBAGF,8CACE,mCACA,qCAGF,qDACE,WACA,kBACA,SACA,QACA,aACA,cACA,4CACA,aACA,cACA,8CAOJ,UACE,kBACA,oBACA,mBACA,yBACA,eACA,iBAEA,iBACE,kBACA,QACA,UACA,eACA,SAGF,eACE,eACA,gBACA,sBACA,wCACA,oCACA,sCACA,4HAGA,kBACA,qBAGF,iBACE,kCACA,mCACA,yCACA,mCAKA,6BACE,WACA,YAEF,+BACE,iCAKF,6BACE,cACA,eAEF,+BACE,iCAKJ,8CACE,kDACA,qCAGF,wCACE,qCAGF,+CACE,WACA,kBACA,SACA,QACA,UACA,WACA,gCACA,mCACA,qBAGF,oFAEE,WACA,mBAOJ,WACE,kBACA,oBACA,mBACA,WACA,YACA,YACA,oCACA,kCACA,gDACA,eACA,YAEA,kBACE,WACA,YACA,sCACA,oCACA,+CACA,wBAGF,eACE,mCAEA,iCACE,2BAKJ,eACE,WACA,YAEA,iCACE,WACA,YAGF,+CACE,2BAIJ,eACE,WACA,YAEA,iCACE,WACA,YAGF,+CACE,2BAIJ,qBACE,WACA,mBAOJ,WACE,kBACA,oBACA,sBACA,WACA,yBACA,kCAEA,kBACE,iCACA,yCACA,yCACA,mCAGF,oBACE,WACA,oBACA,mBACA,8BACA,yBACA,eACA,mCACA,sCACA,kCACA,4HAGA,mCACA,yCACA,YACA,gBAEA,6DAEE,mBACA,WACA,gDACA,oCAIF,6BACE,wCAEA,qDACE,0CAGF,qCACE,qCACA,qCAIJ,4BACE,gDACA,+BAEA,oCACE,sCACA,qCACA,qCAKJ,wBACE,kDACA,iCAGF,wBACE,kDACA,mCAGF,wBACE,mDACA,iCAIJ,kBACE,cACA,YACA,gBACA,uBACA,mBAGF,wBACE,cACA,YACA,gBACA,uBACA,mBACA,oCAGF,iBACE,oBACA,mBACA,uBACA,qCACA,+CAEA,yBACE,yBAIJ,iBACE,kBACA,0BACA,SACA,OACA,WACA,eACA,sBACA,gCACA,sCACA,wCACA,kCACA,+BACA,iBACA,gBACA,kBACA,+BACA,gBACA,kCAEA,qBACE,SACA,YACA,aACA,mCAIJ,mBACE,WACA,sBACA,aACA,mBACA,8BACA,yBACA,kDACA,eACA,mCACA,yBACA,kCACA,mCACA,yCAEA,sDAEE,gDAGF,+BACE,yCAGF,+BACE,mBACA,oCAQN,UACE,eACA,QACA,aACA,mBACA,mCACA,0BAEA,kBACE,aAGF,iBACE,sCACA,kCACA,+BACA,4BACA,gBAGF,kBACE,6BACA,+CACA,mCACA,iCACA,2CACA,gBAGF,gBACE,6BAGF,kBACE,6BACA,4CACA,aACA,yBACA,yBAOJ,4BACE,eACA,cAGF,6BACE,0CACA,sCAIA,mBACE,eACA,QACA,mCACA,aACA,mBACA,uBACA,0BACA,qDAEA,2BACE,aAIJ,iBACE,sCACA,kCACA,gBACA,gBACA,+BACA,sDACA,gBAGF,iBACE,iCACA,2CACA,yCACA,2BACA,uEAGF,mBACE,mCACA,qCACA,6BACA,iBAGF,mBACE,aACA,yBACA,mBACA,oDACA,yBAIF,4DACA,kEACA,kEACA,8DAMF,SACE,sCACA,kCAEA,mBACE,wCAGF,mDACA,mDACA,mDAEA,4CACA,4CACA,6CAEA,gBACE,iCACA,2CACA,gBACA,mCACA,mCAOJ,2BACE,6BAGF,YACE,qBACA,sBACA,kBACA,wCACA,yCACA,8CAEA,uCACA,uCACA,uCACA,uCAMF,eACE,aACA,mBACA,uBACA,yBACA,iCAEA,qBACE,wCACA,sCACA,kCACA,iBACA,eACA,kCACA,iCACA,mCACA,eACA,uFAGA,0CACE,gDAGF,8BACE,WACA,mBAIJ,sBACE,aACA,mBACA,QAGF,qBACE,SACA,yBACA,eACA,YACA,kCACA,kCACA,iCACA,qCACA,eACA,gFAGA,2BACE,gDACA,mCAGF,6BACE,mCACA,2CAIJ,yBACE,eACA,kBACA,iCACA,oCAOJ,gBACE,aACA,sBACA,yBAEA,uBACE,mCACA,mCACA,yCACA,iCACA,yCAEA,gCACE,iCACA,4BAIJ,wBACE,aACA,yBAGF,wBACE,eACA,YACA,+BACA,kCACA,mCACA,mCACA,4CACA,wCACA,kCACA,eACA,kIAGA,gBACA,iBACE,yJAEF,oBACE,oEAEF,wBACA,4BAEA,6CACE,qCACA,sDAGF,sCACE,aACA,qCACA,qCAGF,iCACE,mBACA,8BACA,sDACA,0CAIJ,4BACE,WAEA,oDACE,WAGF,oDACE,OACA,YAQN,eACE,kBACA,oBACA,mBAEA,2CACE,0CAGF,wBACE,kBACA,QACA,UACA,eAGF,sBACE,wCACA,kCACA,sCACA,kDACA,kCACA,mCACA,mCACA,4HAKF,4DACE,kDACA,qCAGF,yBACE,mBAEA,iDACE,mBAGF,+CACE,WACA,mBAGF,qDACE,oCAQN,UACE,kCACA,mCACA,kCACA,+BAMF,mCACA,YACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,mBACA","file":"bigtablet.min.css"}

package/dist/vanilla/bigtablet.min.js

@@ -0,0 +1,35 @@
+(function(){'use strict';(function(k,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(k=k||self,k.Bigtablet=g());})(void 0,function(){function k(n="bt"){return `${n}_${Math.random().toString(36).substring(2,9)}`}function g(n,a,o,e){return n.addEventListener(a,o,e),()=>n.removeEventListener(a,o,e)}function C(n,a=document){return a.querySelector(n)}function _(n,a=document){return Array.from(a.querySelectorAll(n))}function x(n,a={}){let o=typeof n=="string"?C(n):n;if(!o)return null;let e={placeholder:"Select...",disabled:false,onChange:null,...a},t={isOpen:false,value:e.defaultValue||null,activeIndex:-1,options:[]},y=o.dataset.options?JSON.parse(o.dataset.options):e.options||[];t.options=y;`${o.id||k("select")}_listbox`;let r=o.querySelector(".bt-select__control"),c=o.querySelector(".bt-select__list");if(!r||!c)return console.warn("Select: Missing required elements (.bt-select__control, .bt-select__list)"),null;function f(s){t.value=s;let l=t.options.find(m=>m.value===s),u=r.querySelector(".bt-select__value, .bt-select__placeholder");u&&(l?(u.textContent=l.label,u.classList.remove("bt-select__placeholder"),u.classList.add("bt-select__value")):(u.textContent=e.placeholder,u.classList.remove("bt-select__value"),u.classList.add("bt-select__placeholder"))),_(".bt-select__option",c).forEach((m,L)=>{m.classList.toggle("is-selected",t.options[L]?.value===s);}),e.onChange&&e.onChange(s,l);}function i(){if(e.disabled)return;t.isOpen=true,r.classList.add("is-open"),c.style.display="block";let s=r.getBoundingClientRect(),l=Math.min(t.options.length*40,288),u=window.innerHeight-s.bottom,m=s.top;u<l&&m>u?c.classList.add("bt-select__list--up"):c.classList.remove("bt-select__list--up");let L=t.options.findIndex(K=>K.value===t.value);t.activeIndex=L>=0?L:0,h();let D=r.querySelector(".bt-select__icon");D&&D.classList.add("is-open");}function d(){t.isOpen=false,r.classList.remove("is-open"),c.style.display="none";let s=r.querySelector(".bt-select__icon");s&&s.classList.remove("is-open");}function b(){t.isOpen?d():i();}function h(){_(".bt-select__option",c).forEach((s,l)=>{s.classList.toggle("is-active",l===t.activeIndex);});}function E(s){let l=t.options.length,u=t.activeIndex;for(let m=0;m<l;m++)if(u=(u+s+l)%l,!t.options[u].disabled){t.activeIndex=u,h();break}}function A(){let s=t.options[t.activeIndex];s&&!s.disabled&&(f(s.value),d());}function M(s){s.preventDefault(),b();}function P(s){if(!e.disabled)switch(s.key){case " ":case "Enter":s.preventDefault(),t.isOpen?A():i();break;case "ArrowDown":s.preventDefault(),t.isOpen?E(1):i();break;case "ArrowUp":s.preventDefault(),t.isOpen?E(-1):i();break;case "Home":s.preventDefault(),i(),t.activeIndex=t.options.findIndex(l=>!l.disabled),h();break;case "End":s.preventDefault(),i();for(let l=t.options.length-1;l>=0;l--)if(!t.options[l].disabled){t.activeIndex=l,h();break}break;case "Escape":s.preventDefault(),d();break}}function T(s){o.contains(s.target)||d();}function B(s){return function(l){l.preventDefault();let u=t.options[s];u&&!u.disabled&&(f(u.value),d());}}function H(s){return function(){t.options[s].disabled||(t.activeIndex=s,h());}}let O=[g(r,"click",M),g(r,"keydown",P),g(document,"mousedown",T)];return _(".bt-select__option",c).forEach((s,l)=>{O.push(g(s,"click",B(l))),O.push(g(s,"mouseenter",H(l)));}),c.style.display="none",e.defaultValue&&f(e.defaultValue),{getValue:()=>t.value,setValue:f,open:i,close:d,toggle:b,setDisabled:s=>{e.disabled=s,r.classList.toggle("is-disabled",s);},destroy:()=>{O.forEach(s=>s());}}}function S(n,a={}){let o=typeof n=="string"?C(n):n;if(!o)return null;let e={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...a},t={isOpen:false};o.querySelector(".bt-modal__panel");function v(){t.isOpen=true,o.classList.add("is-open"),document.body.style.overflow="hidden",e.onOpen&&e.onOpen();}function p(){t.isOpen=false,o.classList.remove("is-open"),document.body.style.overflow="",e.onClose&&e.onClose();}function r(i){e.closeOnOverlay&&i.target===o&&p();}function c(i){e.closeOnEscape&&i.key==="Escape"&&t.isOpen&&p();}let f=[g(o,"click",r),g(document,"keydown",c)];return _("[data-modal-close]",o).forEach(i=>{f.push(g(i,"click",p));}),{isOpen:()=>t.isOpen,open:v,close:p,toggle:()=>t.isOpen?p():v(),destroy:()=>{f.forEach(i=>i()),document.body.style.overflow="";}}}function q(n={}){let a={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,actionsAlign:"right",onConfirm:null,onCancel:null,...n},o=document.createElement("div");o.className=`bt-alert__overlay bt-alert--${a.variant} is-open`,o.innerHTML=`
+      <div class="bt-alert__modal">
+        ${a.title?`<div class="bt-alert__title">${a.title}</div>`:""}
+        <div class="bt-alert__message">${a.message}</div>
+        <div class="bt-alert__actions" style="justify-content: ${a.actionsAlign==="left"?"flex-start":a.actionsAlign==="center"?"center":"flex-end"}">
+          ${a.showCancel?`<button class="bt-button bt-button--md bt-button--secondary" data-alert-cancel>${a.cancelText}</button>`:""}
+          <button class="bt-button bt-button--md bt-button--primary" data-alert-confirm>${a.confirmText}</button>
+        </div>
+      </div>
+    `,document.body.appendChild(o),document.body.style.overflow="hidden";function e(){o.classList.remove("is-open"),setTimeout(()=>{o.remove(),document.body.style.overflow="";},200);}let t=o.querySelector("[data-alert-confirm]"),y=o.querySelector("[data-alert-cancel]");t&&t.addEventListener("click",()=>{a.onConfirm&&a.onConfirm(),e();}),y&&y.addEventListener("click",()=>{a.onCancel&&a.onCancel(),e();}),o.addEventListener("click",p=>{p.target===o&&e();});let v=p=>{p.key==="Escape"&&(e(),document.removeEventListener("keydown",v));};return document.addEventListener("keydown",v),{close:e}}function I(n,a={}){let o=typeof n=="string"?C(n):n;if(!o)return null;let e={defaultChecked:false,disabled:false,onChange:null,...a},t={checked:e.defaultChecked||o.classList.contains("bt-switch--on")};function y(r){t.checked=r,o.classList.toggle("bt-switch--on",r),e.onChange&&e.onChange(r);}function v(){!e.disabled&&!o.classList.contains("bt-switch--disabled")&&y(!t.checked);}let p=g(o,"click",v);return e.defaultChecked&&y(true),{isChecked:()=>t.checked,setChecked:y,toggle:v,setDisabled:r=>{e.disabled=r,o.classList.toggle("bt-switch--disabled",r);},destroy:()=>p()}}function $(n,a={}){let o=typeof n=="string"?C(n):n;if(!o)return null;let e={page:1,totalPages:1,sibling:2,onChange:null,...a};function t(c,f){let i=[];for(let d=c;d<=f;d++)i.push(d);return i}function y(c,f){if(f<=7)return t(1,f);let i=[],d=f,b=e.sibling;if(c<=b+2){for(let h of t(1,b+3))i.push(h);return i.push("ellipsis"),i.push(d),i}if(c>=d-b-1){i.push(1),i.push("ellipsis");for(let h of t(d-b-2,d))i.push(h);return i}i.push(1),i.push("ellipsis");for(let h of t(c-b,c+b))i.push(h);return i.push("ellipsis"),i.push(d),i}function v(){let c=y(e.page,e.totalPages),f=`
+        <button class="bt-pagination__item" ${e.page<=1?"disabled":""} data-action="prev" aria-label="Previous page">
+          \u2039
+        </button>
+        <div class="bt-pagination__pages">
+      `;c.forEach((b,h)=>{if(b==="ellipsis")f+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let E=b===e.page;f+=`
+            <button
+              class="bt-pagination__page${E?" bt-pagination__page--active":""}"
+              data-page="${b}"
+              ${E?'aria-current="page"':""}
+            >
+              ${b}
+            </button>
+          `;}}),f+=`
+        </div>
+        <button class="bt-pagination__item" ${e.page>=e.totalPages?"disabled":""} data-action="next" aria-label="Next page">
+          \u203A
+        </button>
+      `,o.innerHTML=f,_("[data-page]",o).forEach(b=>{b.addEventListener("click",()=>{let h=parseInt(b.dataset.page,10);p(h);});});let i=o.querySelector('[data-action="prev"]'),d=o.querySelector('[data-action="next"]');i&&i.addEventListener("click",()=>p(e.page-1)),d&&d.addEventListener("click",()=>p(e.page+1));}function p(c){c<1||c>e.totalPages||c===e.page||(e.page=c,v(),e.onChange&&e.onChange(c));}function r(c){e.totalPages=c,e.page>c&&(e.page=c),v();}return v(),{getPage:()=>e.page,setPage:p,setTotalPages:r,render:v}}function w(){_("[data-bt-select]").forEach(n=>{n._btSelect||(n._btSelect=x(n));}),_("[data-bt-modal]").forEach(n=>{n._btModal||(n._btModal=S(n));}),_("[data-bt-modal-open]").forEach(n=>{let a=n.dataset.btModalOpen,o=C(`#${a}`);o&&o._btModal&&n.addEventListener("click",()=>o._btModal.open());}),_("[data-bt-switch]").forEach(n=>{n._btSwitch||(n._btSwitch=I(n));}),_("[data-bt-pagination]").forEach(n=>{if(!n._btPagination){let a=parseInt(n.dataset.page,10)||1,o=parseInt(n.dataset.totalPages,10)||1;n._btPagination=$(n,{page:a,totalPages:o});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",w):w()),{Select:x,Modal:S,Alert:q,Switch:I,Pagination:$,init:w,generateId:k,$:C,$$:_,on:g,version:"1.0.0"}});
+/**
+ * Bigtablet Design System - Vanilla JavaScript
+ * For use with plain HTML/CSS/JS, Thymeleaf, JSP, etc.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */})();

package/dist/vanilla/examples/index.html

@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bigtablet Design System - Vanilla Examples</title>
+
+  <!-- Pretendard Font -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
+
+  <!-- Bigtablet CSS -->
+  <link rel="stylesheet" href="../bigtablet.css">
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--bt-font-family, "Pretendard", sans-serif);
+      background: var(--bt-color-background-secondary, #fafafa);
+      color: var(--bt-color-text-primary, #1a1a1a);
+      line-height: 1.5;
+      padding: 2rem;
+    }
+
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+
+    h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 2rem;
+    }
+
+    h2 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 2rem 0 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--bt-color-border, #e5e5e5);
+    }
+
+    .section {
+      background: var(--bt-color-background, #fff);
+      border-radius: var(--bt-radius-lg, 12px);
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      box-shadow: var(--bt-shadow-sm, 0 2px 4px rgba(0,0,0,0.04));
+    }
+
+    .demo-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .demo-row:last-child {
+      margin-bottom: 0;
+    }
+
+    code {
+      background: var(--bt-color-background-neutral, #f3f3f3);
+      padding: 0.125rem 0.375rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+    }
+
+    pre {
+      background: #1e293b;
+      color: #e2e8f0;
+      padding: 1rem;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-size: 0.875rem;
+      margin-top: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Bigtablet Design System</h1>
+    <p style="margin-bottom: 2rem; color: var(--bt-color-text-secondary);">
+      Vanilla HTML/CSS/JS 환경에서 사용하는 예제입니다.
+    </p>
+
+    <!-- Button -->
+    <div class="section">
+      <h2>Button</h2>
+      <div class="demo-row">
+        <button class="bt-button bt-button--md bt-button--primary">Primary</button>
+        <button class="bt-button bt-button--md bt-button--secondary">Secondary</button>
+        <button class="bt-button bt-button--md bt-button--ghost">Ghost</button>
+        <button class="bt-button bt-button--md bt-button--danger">Danger</button>
+      </div>
+      <div class="demo-row">
+        <button class="bt-button bt-button--sm bt-button--primary">Small</button>
+        <button class="bt-button bt-button--md bt-button--primary">Medium</button>
+        <button class="bt-button bt-button--lg bt-button--primary">Large</button>
+      </div>
+      <div class="demo-row">
+        <button class="bt-button bt-button--md bt-button--primary" disabled>Disabled</button>
+      </div>
+
+      <pre><code>&lt;button class="bt-button bt-button--md bt-button--primary"&gt;Primary&lt;/button&gt;
+&lt;button class="bt-button bt-button--md bt-button--secondary"&gt;Secondary&lt;/button&gt;
+&lt;button class="bt-button bt-button--md bt-button--ghost"&gt;Ghost&lt;/button&gt;
+&lt;button class="bt-button bt-button--md bt-button--danger"&gt;Danger&lt;/button&gt;</code></pre>
+    </div>
+
+    <!-- TextField -->
+    <div class="section">
+      <h2>TextField</h2>
+      <div class="demo-row">
+        <div class="bt-text-field" style="width: 300px;">
+          <label class="bt-text-field__label">Label</label>
+          <div class="bt-text-field__wrap">
+            <input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md" placeholder="Enter text...">
+          </div>
+        </div>
+      </div>
+      <div class="demo-row">
+        <div class="bt-text-field" style="width: 300px;">
+          <label class="bt-text-field__label">Filled Variant</label>
+          <div class="bt-text-field__wrap">
+            <input type="text" class="bt-text-field__input bt-text-field__input--filled bt-text-field__input--md" placeholder="Enter text...">
+          </div>
+        </div>
+      </div>
+      <div class="demo-row">
+        <div class="bt-text-field" style="width: 300px;">
+          <label class="bt-text-field__label">With Error</label>
+          <div class="bt-text-field__wrap">
+            <input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md bt-text-field__input--error" value="Invalid value">
+          </div>
+          <span class="bt-text-field__helper bt-text-field__helper--error">This field is required</span>
+        </div>
+      </div>
+
+      <pre><code>&lt;div class="bt-text-field"&gt;
+  &lt;label class="bt-text-field__label"&gt;Label&lt;/label&gt;
+  &lt;div class="bt-text-field__wrap"&gt;
+    &lt;input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md" placeholder="Enter text..."&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- Checkbox -->
+    <div class="section">
+      <h2>Checkbox</h2>
+      <div class="demo-row">
+        <label class="bt-checkbox">
+          <input type="checkbox" class="bt-checkbox__input">
+          <span class="bt-checkbox__box"></span>
+          <span class="bt-checkbox__label">Checkbox Label</span>
+        </label>
+      </div>
+      <div class="demo-row">
+        <label class="bt-checkbox">
+          <input type="checkbox" class="bt-checkbox__input" checked>
+          <span class="bt-checkbox__box"></span>
+          <span class="bt-checkbox__label">Checked</span>
+        </label>
+      </div>
+      <div class="demo-row">
+        <label class="bt-checkbox">
+          <input type="checkbox" class="bt-checkbox__input" disabled>
+          <span class="bt-checkbox__box"></span>
+          <span class="bt-checkbox__label">Disabled</span>
+        </label>
+      </div>
+
+      <pre><code>&lt;label class="bt-checkbox"&gt;
+  &lt;input type="checkbox" class="bt-checkbox__input"&gt;
+  &lt;span class="bt-checkbox__box"&gt;&lt;/span&gt;
+  &lt;span class="bt-checkbox__label"&gt;Checkbox Label&lt;/span&gt;
+&lt;/label&gt;</code></pre>
+    </div>
+
+    <!-- Radio -->
+    <div class="section">
+      <h2>Radio</h2>
+      <div class="demo-row" style="flex-direction: column; align-items: flex-start;">
+        <label class="bt-radio">
+          <input type="radio" name="demo-radio" class="bt-radio__input" checked>
+          <span class="bt-radio__dot"></span>
+          <span class="bt-radio__label">Option 1</span>
+        </label>
+        <label class="bt-radio">
+          <input type="radio" name="demo-radio" class="bt-radio__input">
+          <span class="bt-radio__dot"></span>
+          <span class="bt-radio__label">Option 2</span>
+        </label>
+        <label class="bt-radio">
+          <input type="radio" name="demo-radio" class="bt-radio__input">
+          <span class="bt-radio__dot"></span>
+          <span class="bt-radio__label">Option 3</span>
+        </label>
+      </div>
+
+      <pre><code>&lt;label class="bt-radio"&gt;
+  &lt;input type="radio" name="group" class="bt-radio__input"&gt;
+  &lt;span class="bt-radio__dot"&gt;&lt;/span&gt;
+  &lt;span class="bt-radio__label"&gt;Option 1&lt;/span&gt;
+&lt;/label&gt;</code></pre>
+    </div>
+
+    <!-- Switch -->
+    <div class="section">
+      <h2>Switch</h2>
+      <div class="demo-row">
+        <button class="bt-switch" data-bt-switch>
+          <span class="bt-switch__thumb"></span>
+        </button>
+        <span>Off</span>
+      </div>
+      <div class="demo-row">
+        <button class="bt-switch bt-switch--on" data-bt-switch>
+          <span class="bt-switch__thumb"></span>
+        </button>
+        <span>On</span>
+      </div>
+      <div class="demo-row">
+        <button class="bt-switch bt-switch--sm" data-bt-switch>
+          <span class="bt-switch__thumb"></span>
+        </button>
+        <span>Small</span>
+      </div>
+      <div class="demo-row">
+        <button class="bt-switch bt-switch--lg" data-bt-switch>
+          <span class="bt-switch__thumb"></span>
+        </button>
+        <span>Large</span>
+      </div>
+
+      <pre><code>&lt;button class="bt-switch" data-bt-switch&gt;
+  &lt;span class="bt-switch__thumb"&gt;&lt;/span&gt;
+&lt;/button&gt;
+
+&lt;!-- On state --&gt;
+&lt;button class="bt-switch bt-switch--on" data-bt-switch&gt;
+  &lt;span class="bt-switch__thumb"&gt;&lt;/span&gt;
+&lt;/button&gt;</code></pre>
+    </div>
+
+    <!-- Select -->
+    <div class="section">
+      <h2>Select</h2>
+      <div class="demo-row">
+        <div class="bt-select" data-bt-select style="width: 300px;">
+          <label class="bt-select__label">Select Option</label>
+          <button type="button" class="bt-select__control bt-select__control--outline bt-select__control--md">
+            <span class="bt-select__placeholder">Select...</span>
+            <span class="bt-select__icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 9l6 6 6-6"/>
+              </svg>
+            </span>
+          </button>
+          <ul class="bt-select__list" style="display: none;">
+            <li class="bt-select__option" data-value="apple">Apple</li>
+            <li class="bt-select__option" data-value="banana">Banana</li>
+            <li class="bt-select__option" data-value="cherry">Cherry</li>
+            <li class="bt-select__option is-disabled" data-value="disabled">Disabled Option</li>
+            <li class="bt-select__option" data-value="elderberry">Elderberry</li>
+          </ul>
+        </div>
+      </div>
+
+      <pre><code>&lt;div class="bt-select" data-bt-select&gt;
+  &lt;label class="bt-select__label"&gt;Select Option&lt;/label&gt;
+  &lt;button type="button" class="bt-select__control bt-select__control--outline bt-select__control--md"&gt;
+    &lt;span class="bt-select__placeholder"&gt;Select...&lt;/span&gt;
+    &lt;span class="bt-select__icon"&gt;▼&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;ul class="bt-select__list"&gt;
+    &lt;li class="bt-select__option" data-value="apple"&gt;Apple&lt;/li&gt;
+    &lt;li class="bt-select__option" data-value="banana"&gt;Banana&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- Card -->
+    <div class="section">
+      <h2>Card</h2>
+      <div class="demo-row">
+        <div class="bt-card bt-card--bordered bt-card--p-md" style="width: 300px;">
+          <div class="bt-card__title">Card Title</div>
+          <p>This is a card component with bordered style and medium padding.</p>
+        </div>
+        <div class="bt-card bt-card--shadow-md bt-card--p-md" style="width: 300px;">
+          <div class="bt-card__title">Shadow Card</div>
+          <p>This card uses shadow instead of border.</p>
+        </div>
+      </div>
+
+      <pre><code>&lt;div class="bt-card bt-card--bordered bt-card--p-md"&gt;
+  &lt;div class="bt-card__title"&gt;Card Title&lt;/div&gt;
+  &lt;p&gt;Card content goes here.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- Spinner -->
+    <div class="section">
+      <h2>Spinner</h2>
+      <div class="demo-row">
+        <div class="bt-spinner bt-spinner--sm"></div>
+        <div class="bt-spinner bt-spinner--md"></div>
+        <div class="bt-spinner bt-spinner--lg"></div>
+        <div class="bt-spinner bt-spinner--xl"></div>
+      </div>
+
+      <pre><code>&lt;div class="bt-spinner bt-spinner--md"&gt;&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- Pagination -->
+    <div class="section">
+      <h2>Pagination</h2>
+      <nav class="bt-pagination" data-bt-pagination data-page="3" data-total-pages="10">
+        <!-- JS가 자동으로 렌더링 -->
+      </nav>
+
+      <pre><code>&lt;nav class="bt-pagination" data-bt-pagination data-page="3" data-total-pages="10"&gt;
+  &lt;!-- JS가 자동으로 렌더링 --&gt;
+&lt;/nav&gt;
+
+&lt;script&gt;
+// 또는 수동 초기화
+const pagination = Bigtablet.Pagination('#my-pagination', {
+  page: 1,
+  totalPages: 10,
+  onChange: (page) => console.log('Page:', page)
+});
+&lt;/script&gt;</code></pre>
+    </div>
+
+    <!-- Modal -->
+    <div class="section">
+      <h2>Modal</h2>
+      <div class="demo-row">
+        <button class="bt-button bt-button--md bt-button--primary" data-bt-modal-open="demo-modal">
+          Open Modal
+        </button>
+      </div>
+
+      <div id="demo-modal" class="bt-modal" data-bt-modal>
+        <div class="bt-modal__panel" style="width: 400px;">
+          <div class="bt-modal__header">Modal Title</div>
+          <div class="bt-modal__body">
+            <p>This is the modal content. You can put any HTML here.</p>
+          </div>
+          <div class="bt-modal__footer">
+            <button class="bt-button bt-button--md bt-button--secondary" data-modal-close>Cancel</button>
+            <button class="bt-button bt-button--md bt-button--primary" data-modal-close>Confirm</button>
+          </div>
+        </div>
+      </div>
+
+      <pre><code>&lt;button data-bt-modal-open="my-modal"&gt;Open Modal&lt;/button&gt;
+
+&lt;div id="my-modal" class="bt-modal" data-bt-modal&gt;
+  &lt;div class="bt-modal__panel"&gt;
+    &lt;div class="bt-modal__header"&gt;Title&lt;/div&gt;
+    &lt;div class="bt-modal__body"&gt;Content&lt;/div&gt;
+    &lt;div class="bt-modal__footer"&gt;
+      &lt;button data-modal-close&gt;Close&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- Alert -->
+    <div class="section">
+      <h2>Alert (JavaScript)</h2>
+      <div class="demo-row">
+        <button class="bt-button bt-button--md bt-button--primary" onclick="showInfoAlert()">Info Alert</button>
+        <button class="bt-button bt-button--md bt-button--secondary" onclick="showConfirmAlert()">Confirm Alert</button>
+        <button class="bt-button bt-button--md bt-button--danger" onclick="showErrorAlert()">Error Alert</button>
+      </div>
+
+      <pre><code>// Info Alert
+Bigtablet.Alert({
+  title: '알림',
+  message: '작업이 완료되었습니다.',
+  variant: 'info'
+});
+
+// Confirm Alert
+Bigtablet.Alert({
+  title: '확인',
+  message: '정말 삭제하시겠습니까?',
+  variant: 'warning',
+  showCancel: true,
+  onConfirm: () => console.log('Confirmed!'),
+  onCancel: () => console.log('Cancelled')
+});</code></pre>
+    </div>
+
+    <!-- DatePicker -->
+    <div class="section">
+      <h2>DatePicker</h2>
+      <div class="demo-row">
+        <div class="bt-date-picker" style="width: 300px;">
+          <label class="bt-date-picker__label">
+            Date
+            <span class="bt-date-picker__label-required">*</span>
+          </label>
+          <div class="bt-date-picker__fields">
+            <select class="bt-date-picker__select">
+              <option value="">Year</option>
+              <option value="2024">2024</option>
+              <option value="2025">2025</option>
+              <option value="2026">2026</option>
+            </select>
+            <select class="bt-date-picker__select">
+              <option value="">Month</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+              <option value="11">11</option>
+              <option value="12">12</option>
+            </select>
+            <select class="bt-date-picker__select">
+              <option value="">Day</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <!-- ... -->
+              <option value="31">31</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <pre><code>&lt;div class="bt-date-picker"&gt;
+  &lt;label class="bt-date-picker__label"&gt;Date&lt;/label&gt;
+  &lt;div class="bt-date-picker__fields"&gt;
+    &lt;select class="bt-date-picker__select"&gt;
+      &lt;option value=""&gt;Year&lt;/option&gt;
+      &lt;option value="2024"&gt;2024&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;select class="bt-date-picker__select"&gt;
+      &lt;option value=""&gt;Month&lt;/option&gt;
+      &lt;option value="1"&gt;1&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;select class="bt-date-picker__select"&gt;
+      &lt;option value=""&gt;Day&lt;/option&gt;
+      &lt;option value="1"&gt;1&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+    <!-- FileInput -->
+    <div class="section">
+      <h2>FileInput</h2>
+      <div class="demo-row">
+        <div class="bt-file-input">
+          <input type="file" class="bt-file-input__control" id="file-input">
+          <label class="bt-file-input__label" for="file-input">Choose File</label>
+        </div>
+      </div>
+
+      <pre><code>&lt;div class="bt-file-input"&gt;
+  &lt;input type="file" class="bt-file-input__control" id="file-input"&gt;
+  &lt;label class="bt-file-input__label" for="file-input"&gt;Choose File&lt;/label&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+
+  </div>
+
+  <!-- Bigtablet JS -->
+  <script src="../bigtablet.js"></script>
+  <script>
+    // Alert examples
+    function showInfoAlert() {
+      Bigtablet.Alert({
+        title: '알림',
+        message: '작업이 성공적으로 완료되었습니다.',
+        variant: 'info'
+      });
+    }
+
+    function showConfirmAlert() {
+      Bigtablet.Alert({
+        title: '확인',
+        message: '이 항목을 삭제하시겠습니까?',
+        variant: 'warning',
+        showCancel: true,
+        confirmText: '삭제',
+        cancelText: '취소',
+        onConfirm: () => console.log('삭제됨'),
+        onCancel: () => console.log('취소됨')
+      });
+    }
+
+    function showErrorAlert() {
+      Bigtablet.Alert({
+        title: '오류',
+        message: '요청을 처리하는 중 오류가 발생했습니다.',
+        variant: 'error'
+      });
+    }
+
+    // Select example with options
+    document.addEventListener('DOMContentLoaded', function() {
+      const selectEl = document.querySelector('[data-bt-select]');
+      if (selectEl && selectEl._btSelect) {
+        // Already initialized by auto-init
+      } else if (selectEl) {
+        const options = [
+          { value: 'apple', label: 'Apple' },
+          { value: 'banana', label: 'Banana' },
+          { value: 'cherry', label: 'Cherry' },
+          { value: 'disabled', label: 'Disabled Option', disabled: true },
+          { value: 'elderberry', label: 'Elderberry' }
+        ];
+
+        Bigtablet.Select(selectEl, {
+          options,
+          placeholder: 'Select a fruit...',
+          onChange: (value, option) => {
+            console.log('Selected:', value, option);
+          }
+        });
+      }
+
+      // Pagination change handler
+      const paginationEl = document.querySelector('[data-bt-pagination]');
+      if (paginationEl && paginationEl._btPagination) {
+        // You can set onChange after init if needed
+      }
+    });
+  </script>
+</body>
+</html>