juxscript 1.0.55 → 1.0.57

package/lib/components/alert.ts

@@ -185,8 +185,6 @@ export class Alert extends BaseComponent<AlertState> {
         container.appendChild(alert);
         this._alert = alert;
 
-        this._injectAlertStyles();
-
         requestAnimationFrame(() => {
             if ((window as any).lucide) {
                 (window as any).lucide.createIcons();
@@ -195,91 +193,6 @@ export class Alert extends BaseComponent<AlertState> {
 
         return this;
     }
-
-    private _injectAlertStyles(): void {
-        const styleId = 'jux-alert-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            .jux-alert {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 16px;
-                border-radius: 8px;
-                margin-bottom: 12px;
-                position: relative;
-                animation: slideIn 0.3s ease-out;
-            }
-            
-            @keyframes slideIn {
-                from {
-                    opacity: 0;
-                    transform: translateX(-20px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateX(0);
-                }
-            }
-            
-            .jux-alert-info {
-                background: #dbeafe;
-                border-left: 4px solid #3b82f6;
-                color: #1e40af;
-            }
-            
-            .jux-alert-success {
-                background: #d1fae5;
-                border-left: 4px solid #10b981;
-                color: #065f46;
-            }
-            
-            .jux-alert-warning {
-                background: #fef3c7;
-                border-left: 4px solid #f59e0b;
-                color: #92400e;
-            }
-            
-            .jux-alert-error {
-                background: #fee2e2;
-                border-left: 4px solid #ef4444;
-                color: #991b1b;
-            }
-            
-            .jux-alert-icon {
-                flex-shrink: 0;
-            }
-            
-            .jux-alert-content {
-                flex: 1;
-                font-size: 14px;
-            }
-            
-            .jux-alert-close {
-                flex-shrink: 0;
-                background: transparent;
-                border: none;
-                font-size: 24px;
-                cursor: pointer;
-                opacity: 0.6;
-                transition: opacity 0.2s;
-                padding: 0;
-                width: 24px;
-                height: 24px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            
-            .jux-alert-close:hover {
-                opacity: 1;
-            }
-        `;
-        document.head.appendChild(style);
-    }
 }
 
 export function alert(id: string, options: AlertOptions = {}): Alert {

package/lib/components/badge.ts

@@ -91,62 +91,9 @@ export class Badge extends BaseComponent<BadgeState> {
         });
 
         container.appendChild(badge);
-        this._injectBadgeStyles();
 
         return this;
     }
-
-    private _injectBadgeStyles(): void {
-        const styleId = 'jux-badge-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-badge {
-        display: inline-block;
-        padding: 0.25rem 0.75rem;
-        font-size: 0.75rem;
-        font-weight: 600;
-        line-height: 1;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        border-radius: 0.25rem;
-        transition: all 0.2s;
-      }
-
-      .jux-badge-pill {
-        border-radius: 10rem;
-      }
-
-      .jux-badge-default {
-        color: #374151;
-        background-color: #e5e7eb;
-      }
-
-      .jux-badge-success {
-        color: #065f46;
-        background-color: #d1fae5;
-      }
-
-      .jux-badge-warning {
-        color: #92400e;
-        background-color: #fef3c7;
-      }
-
-      .jux-badge-error {
-        color: #991b1b;
-        background-color: #fee2e2;
-      }
-
-      .jux-badge-info {
-        color: #1e40af;
-        background-color: #dbeafe;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function badge(id: string, options: BadgeOptions = {}): Badge {

package/lib/components/base/FormInput.ts

@@ -224,99 +224,4 @@ export abstract class FormInput<TState extends FormInputState> extends BaseCompo
             }
         });
     }
-
-    /**
-     * Inject default form input styles
-     */
-    protected _injectFormStyles(): void {
-        const styleId = 'jux-form-input-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            .jux-input {
-                margin-bottom: 16px;
-            }
-
-            .jux-input-container {
-                position: relative;
-            }
-
-            .jux-input-with-icon .jux-input-element {
-                padding-left: 40px;
-            }
-
-            .jux-input-icon {
-                position: absolute;
-                left: 12px;
-                top: 50%;
-                transform: translateY(-50%);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #6b7280;
-                pointer-events: none;
-            }
-
-            .jux-input-icon svg {
-                width: 18px;
-                height: 18px;
-            }
-
-            .jux-input-label {
-                display: block;
-                margin-bottom: 6px;
-                font-weight: 500;
-                color: #374151;
-            }
-
-            .jux-input-required {
-                color: #ef4444;
-            }
-
-            .jux-input-element {
-                width: 100%;
-                padding: 8px 12px;
-                border: 1px solid #d1d5db;
-                border-radius: 6px;
-                font-size: 14px;
-                transition: border-color 0.2s;
-                box-sizing: border-box;
-            }
-
-            .jux-input-element:focus {
-                outline: none;
-                border-color: #3b82f6;
-                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-            }
-
-            .jux-input-element:disabled {
-                background-color: #f3f4f6;
-                cursor: not-allowed;
-            }
-
-            .jux-input-element.jux-input-invalid {
-                border-color: #ef4444;
-            }
-
-            .jux-input-element.jux-input-invalid:focus {
-                box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-            }
-
-            .jux-input-error {
-                color: #ef4444;
-                font-size: 12px;
-                margin-top: 4px;
-            }
-
-            .jux-input-counter {
-                text-align: right;
-                font-size: 12px;
-                color: #6b7280;
-                margin-top: 4px;
-            }
-        `;
-        document.head.appendChild(style);
-    }
 }

package/lib/components/charts/lib/BaseChart.ts

@@ -381,22 +381,9 @@ export abstract class BaseChart<TState extends BaseChartState> extends BaseCompo
             wrapper.setAttribute('style', style);
         }
 
-        // Inject styles
-        this._injectStyles();
-
         container.appendChild(wrapper);
         this._buildChart(wrapper);
 
         return this;
     }
-
-    private _injectStyles(): void {
-        const styleId = `${this._getChartClassName()}-styles`;
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = this._getBaseStyles();
-        document.head.appendChild(style);
-    }
 }

package/lib/components/checkbox.ts

@@ -233,102 +233,8 @@ export class Checkbox extends FormInput<CheckboxState> {
         }
 
         container.appendChild(wrapper);
-        this._injectCheckboxStyles();
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
         return this;
     }
-
-    private _injectCheckboxStyles(): void {
-        const styleId = 'jux-checkbox-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-checkbox {
-        margin-bottom: 12px;
-      }
-
-      .jux-checkbox-container {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        position: relative;
-      }
-
-      .jux-checkbox-input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-      }
-
-      .jux-checkbox-checkmark {
-        position: relative;
-        height: 20px;
-        width: 20px;
-        border: 2px solid #d1d5db;
-        border-radius: 4px;
-        background-color: white;
-        transition: all 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 8px;
-      }
-
-      .jux-checkbox-checkmark svg {
-        width: 14px;
-        height: 14px;
-        stroke: white;
-        stroke-width: 3;
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
-
-      .jux-checkbox-input:checked ~ .jux-checkbox-checkmark {
-        background-color: #3b82f6;
-        border-color: #3b82f6;
-      }
-
-      .jux-checkbox-input:checked ~ .jux-checkbox-checkmark svg {
-        opacity: 1;
-      }
-
-      .jux-checkbox-input:disabled ~ .jux-checkbox-checkmark {
-        background-color: #f3f4f6;
-        border-color: #d1d5db;
-        cursor: not-allowed;
-      }
-
-      .jux-checkbox-input:disabled ~ .jux-checkbox-label-text {
-        color: #9ca3af;
-        cursor: not-allowed;
-      }
-
-      .jux-checkbox-input:focus ~ .jux-checkbox-checkmark {
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-      }
-
-      .jux-checkbox-input.jux-input-invalid ~ .jux-checkbox-checkmark {
-        border-color: #ef4444;
-      }
-
-      .jux-checkbox-label-text {
-        font-size: 14px;
-        color: #374151;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function checkbox(id: string, options: CheckboxOptions = {}): Checkbox {

package/lib/components/datepicker.ts

@@ -225,48 +225,8 @@ export class DatePicker extends FormInput<DatePickerState> {
         }
 
         container.appendChild(wrapper);
-        this._injectDatePickerStyles();
-        this._injectFormStyles();
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
         return this;
     }
-
-    private _injectDatePickerStyles(): void {
-        const styleId = 'jux-datepicker-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-datepicker-container {
-        position: relative;
-      }
-
-      .jux-datepicker-container .jux-input-icon {
-        pointer-events: none;
-      }
-
-      .jux-datepicker-input {
-        padding-left: 40px;
-      }
-
-      .jux-datepicker-input::-webkit-calendar-picker-indicator {
-        cursor: pointer;
-        opacity: 0;
-        position: absolute;
-        right: 0;
-        width: 100%;
-        height: 100%;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function datepicker(id: string, options: DatePickerOptions = {}): DatePicker {

package/lib/components/dialog.ts

@@ -163,124 +163,8 @@ export class Dialog extends BaseComponent<DialogState> {
         overlay.appendChild(dialog);
         document.body.appendChild(overlay);
 
-        this._injectDialogStyles();
-
         return this;
     }
-
-    private _injectDialogStyles(): void {
-        const styleId = 'jux-dialog-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-dialog-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10000;
-        animation: jux-dialog-fade 0.2s;
-      }
-
-      @keyframes jux-dialog-fade {
-        from { opacity: 0; }
-        to { opacity: 1; }
-      }
-
-      .jux-dialog {
-        background: white;
-        border-radius: 12px;
-        padding: 24px;
-        max-width: 400px;
-        width: 90%;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-        animation: jux-dialog-slide 0.3s;
-      }
-
-      @keyframes jux-dialog-slide {
-        from {
-          opacity: 0;
-          transform: translateY(-20px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .jux-dialog-title {
-        font-size: 20px;
-        font-weight: 600;
-        margin-bottom: 12px;
-        color: #1f2937;
-      }
-
-      .jux-dialog-message {
-        font-size: 14px;
-        color: #6b7280;
-        margin-bottom: 24px;
-        line-height: 1.5;
-      }
-
-      .jux-dialog-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: flex-end;
-      }
-
-      .jux-dialog-button {
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: none;
-      }
-
-      .jux-dialog-button-cancel {
-        background: #f3f4f6;
-        color: #374151;
-      }
-
-      .jux-dialog-button-cancel:hover {
-        background: #e5e7eb;
-      }
-
-      .jux-dialog-button-confirm {
-        background: #3b82f6;
-        color: white;
-      }
-
-      .jux-dialog-button-confirm:hover {
-        background: #2563eb;
-      }
-
-      .jux-dialog-button-danger {
-        background: #ef4444;
-      }
-
-      .jux-dialog-button-danger:hover {
-        background: #dc2626;
-      }
-
-      .jux-dialog-button-warning {
-        background: #f59e0b;
-      }
-
-      .jux-dialog-button-warning:hover {
-        background: #d97706;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function dialog(id: string, options: DialogOptions = {}): Dialog {

package/lib/components/divider.ts

@@ -82,7 +82,6 @@ export class Divider extends BaseComponent<DividerState> {
 
         this._wireStandardEvents(divider);
         container.appendChild(divider);
-        this._injectDividerStyles();
 
         return this;
     }
@@ -93,32 +92,6 @@ export class Divider extends BaseComponent<DividerState> {
         }
         return this.render(`#${juxComponent._id}`);
     }
-
-    private _injectDividerStyles(): void {
-        if (document.getElementById('jux-divider-styles')) return;
-        
-        const style = document.createElement('style');
-        style.id = 'jux-divider-styles';
-        style.textContent = `
-            .jux-divider {
-                display: flex;
-                align-items: center;
-                border-top: 1px solid #e0e0e0;
-            }
-            .jux-divider-dashed {
-                border-top-style: dashed;
-            }
-            .jux-divider-dotted {
-                border-top-style: dotted;
-            }
-            .jux-divider-text {
-                padding: 0 1rem;
-                background: white;
-                position: relative;
-            }
-        `;
-        document.head.appendChild(style);
-    }
 }
 
 // ✅ ID is now optional - auto-generated if not provided

package/lib/components/docs-data.json

@@ -970,6 +970,12 @@
           "returns": "this",
           "description": "Set subtitle"
         },
+        {
+          "name": "content",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set content"
+        },
         {
           "name": "cta",
           "params": "(value)",
@@ -988,12 +994,24 @@
           "returns": "this",
           "description": "Set backgroundImage"
         },
+        {
+          "name": "backgroundOverlay",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set backgroundOverlay"
+        },
         {
           "name": "variant",
           "params": "(value)",
           "returns": "this",
           "description": "Set variant"
         },
+        {
+          "name": "centered",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set centered"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2053,5 +2071,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T20:46:06.367Z"
+  "lastUpdated": "2026-01-29T04:55:18.239Z"
 }