@saitec/ui 0.1.0

package/lib/core/tokens/components/multiselect.css

@@ -0,0 +1,25 @@
+/* SUI MultiSelect Tokens */
+
+:root {
+    --sui-multiselect-height: var(--sui-control-height-md);
+    --sui-multiselect-padding-x: var(--sui-control-padding-x-md);
+    --sui-multiselect-radius: var(--sui-control-radius);
+    --sui-multiselect-border-width: var(--sui-border-width);
+    --sui-multiselect-background: var(--sui-color-surface);
+    --sui-multiselect-text: var(--sui-color-content);
+    --sui-multiselect-placeholder: var(--sui-color-content-muted);
+    --sui-multiselect-border: var(--sui-color-border);
+    --sui-multiselect-border-hover: var(--sui-color-border-strong);
+    --sui-multiselect-border-focus: var(--sui-color-primary);
+    --sui-multiselect-focus-color: var(--sui-color-focus);
+
+    --sui-multiselect-panel-background: var(--sui-color-surface);
+    --sui-multiselect-panel-border: var(--sui-color-border);
+    --sui-multiselect-panel-radius: var(--sui-control-radius);
+    --sui-multiselect-panel-shadow: var(--sui-shadow-lg);
+    --sui-multiselect-panel-z-index: var(--sui-z-dropdown);
+    --sui-multiselect-option-text: var(--sui-color-content);
+    --sui-multiselect-option-background-hover: var(--sui-color-surface-hover);
+    --sui-multiselect-option-background-selected: var(--sui-color-selection-background);
+    --sui-multiselect-empty-text: var(--sui-color-content-muted);
+}

package/lib/core/tokens/components/panel.css

@@ -0,0 +1,18 @@
+/* SUI Panel Tokens */
+
+:root {
+    --sui-panel-background: var(--sui-color-surface);
+    --sui-panel-text: var(--sui-color-content);
+    --sui-panel-border: var(--sui-color-border);
+    --sui-panel-border-width: var(--sui-border-width);
+    --sui-panel-radius: var(--sui-container-radius);
+    --sui-panel-header-background: var(--sui-color-surface-alt);
+    --sui-panel-header-text: var(--sui-color-content);
+    --sui-panel-header-padding: var(--sui-container-padding-md);
+    --sui-panel-header-border: var(--sui-color-border);
+    --sui-panel-header-font-weight: var(--sui-font-weight-semibold);
+    --sui-panel-content-background: var(--sui-color-surface);
+    --sui-panel-content-padding: var(--sui-container-padding-lg);
+    --sui-panel-footer-border: var(--sui-color-border);
+    --sui-panel-footer-padding: var(--sui-container-padding-md);
+}

package/lib/core/tokens/components/progress-spinner.css

@@ -0,0 +1,10 @@
+/* SUI Progress Spinner Tokens */
+
+:root {
+    --sui-progress-spinner-size-sm: 1rem;
+    --sui-progress-spinner-size-md: 2rem;
+    --sui-progress-spinner-size-lg: 3rem;
+    --sui-progress-spinner-color: var(--sui-color-primary);
+    --sui-progress-spinner-track: var(--sui-color-border);
+    --sui-progress-spinner-duration: 700ms;
+}

package/lib/core/tokens/components/select.css

@@ -0,0 +1,18 @@
+/* SUI Select Tokens */
+
+:root {
+    --sui-select-height: var(--sui-control-height-md);
+    --sui-select-padding-x: var(--sui-control-padding-x-md);
+    --sui-select-radius: var(--sui-control-radius);
+    --sui-select-border-width: var(--sui-border-width);
+    --sui-select-background: var(--sui-color-surface);
+    --sui-select-text: var(--sui-color-content);
+    --sui-select-placeholder: var(--sui-color-content-muted);
+    --sui-select-border: var(--sui-color-border);
+    --sui-select-border-hover: var(--sui-color-border-strong);
+    --sui-select-border-focus: var(--sui-color-primary);
+    --sui-select-focus-color: var(--sui-color-focus);
+    --sui-select-disabled-background: var(--sui-color-surface-alt);
+    --sui-select-disabled-text: var(--sui-color-content-disabled);
+    --sui-select-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/table.css

@@ -0,0 +1,32 @@
+/* SUI Table Tokens */
+
+:root {
+    --sui-table-background: var(--sui-color-surface);
+    --sui-table-color: var(--sui-color-content);
+    --sui-table-text: var(--sui-color-content);
+    --sui-table-border: var(--sui-color-border);
+    --sui-table-border-color: var(--sui-color-border);
+    --sui-table-border-width: var(--sui-border-width);
+    --sui-table-border-radius: var(--sui-container-radius);
+    --sui-table-font-size: var(--sui-control-font-size-sm);
+
+    --sui-table-header-background: var(--sui-color-surface-alt);
+    --sui-table-header-text: var(--sui-color-content);
+    --sui-table-header-font-weight: var(--sui-font-weight-semibold);
+    --sui-table-sort-icon-color: var(--sui-color-content-muted);
+    --sui-table-focus-color: var(--sui-color-focus);
+
+    --sui-table-row-background: var(--sui-color-surface);
+    --sui-table-row-hover-background: var(--sui-color-surface-hover);
+    --sui-table-row-background-selected: var(--sui-color-selection-background);
+    --sui-table-row-border: var(--sui-color-border);
+    --sui-table-striped-background: var(--sui-color-surface-alt);
+
+    --sui-table-cell-padding-x: var(--sui-space-4);
+    --sui-table-cell-padding-y: var(--sui-space-3);
+    --sui-table-compact-padding-x: var(--sui-space-3);
+    --sui-table-compact-padding-y: var(--sui-space-1);
+
+    --sui-table-state-color: var(--sui-color-content-muted);
+    --sui-table-empty-text: var(--sui-color-content-muted);
+}

package/lib/core/tokens/components/tabs.css

@@ -0,0 +1,18 @@
+/* SUI Tabs Tokens */
+
+:root {
+    --sui-tabs-text: var(--sui-color-content);
+    --sui-tabs-border: var(--sui-color-border);
+    --sui-tabs-gap: var(--sui-space-1);
+    --sui-tab-padding-x: var(--sui-space-4);
+    --sui-tab-padding-y: var(--sui-space-3);
+    --sui-tab-text: var(--sui-color-content-muted);
+    --sui-tab-text-hover: var(--sui-color-content);
+    --sui-tab-text-active: var(--sui-color-primary);
+    --sui-tab-background-hover: var(--sui-color-surface-hover);
+    --sui-tab-active-border: var(--sui-color-primary);
+    --sui-tab-focus-color: var(--sui-color-focus);
+    --sui-tab-disabled-text: var(--sui-color-content-disabled);
+    --sui-tabpanel-padding: var(--sui-container-padding-md);
+    --sui-tabpanel-border: var(--sui-color-border);
+}

package/lib/core/tokens/components/tag.css

@@ -0,0 +1,29 @@
+/* SUI Tag Tokens */
+
+:root {
+    --sui-tag-radius: var(--sui-radius-md);
+    --sui-tag-gap: var(--sui-space-1);
+    --sui-tag-font-weight: var(--sui-font-weight-medium);
+    --sui-tag-padding-x-sm: var(--sui-space-2);
+    --sui-tag-padding-y-sm: var(--sui-space-1);
+    --sui-tag-padding-x-md: var(--sui-space-3);
+    --sui-tag-padding-y-md: var(--sui-space-1);
+    --sui-tag-padding-x-lg: var(--sui-space-3);
+    --sui-tag-padding-y-lg: var(--sui-space-2);
+    --sui-tag-font-size-sm: var(--sui-control-font-size-xs);
+    --sui-tag-font-size-md: var(--sui-control-font-size-sm);
+    --sui-tag-font-size-lg: var(--sui-control-font-size-md);
+
+    --sui-tag-primary-background: var(--sui-color-selection-background);
+    --sui-tag-primary-text: var(--sui-color-selection-text);
+    --sui-tag-secondary-background: var(--sui-color-surface-alt);
+    --sui-tag-secondary-text: var(--sui-color-content-muted);
+    --sui-tag-success-background: var(--sui-color-success-surface);
+    --sui-tag-success-text: var(--sui-color-success-surface-text);
+    --sui-tag-info-background: var(--sui-color-info-surface);
+    --sui-tag-info-text: var(--sui-color-info-surface-text);
+    --sui-tag-warning-background: var(--sui-color-warning-surface);
+    --sui-tag-warning-text: var(--sui-color-warning-surface-text);
+    --sui-tag-danger-background: var(--sui-color-danger-surface);
+    --sui-tag-danger-text: var(--sui-color-danger-surface-text);
+}

package/lib/core/tokens/components/textarea.css

@@ -0,0 +1,19 @@
+/* SUI Textarea Tokens */
+
+:root {
+    --sui-textarea-padding-x: var(--sui-control-padding-x-md);
+    --sui-textarea-padding-y: var(--sui-space-3);
+    --sui-textarea-radius: var(--sui-control-radius);
+    --sui-textarea-border-width: var(--sui-border-width);
+    --sui-textarea-background: var(--sui-color-surface);
+    --sui-textarea-text: var(--sui-color-content);
+    --sui-textarea-placeholder: var(--sui-color-content-muted);
+    --sui-textarea-border: var(--sui-color-border);
+    --sui-textarea-border-hover: var(--sui-color-border-strong);
+    --sui-textarea-border-focus: var(--sui-color-primary);
+    --sui-textarea-focus-color: var(--sui-color-focus);
+    --sui-textarea-border-invalid: var(--sui-color-danger);
+    --sui-textarea-disabled-background: var(--sui-color-surface-alt);
+    --sui-textarea-disabled-text: var(--sui-color-content-disabled);
+    --sui-textarea-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/toast.css

@@ -0,0 +1,22 @@
+/* SUI Toast Tokens */
+
+:root {
+    --sui-toast-width: 24rem;
+    --sui-toast-background: var(--sui-color-surface);
+    --sui-toast-text: var(--sui-color-content);
+    --sui-toast-border-width: var(--sui-border-width);
+    --sui-toast-radius: var(--sui-container-radius);
+    --sui-toast-shadow: var(--sui-shadow-lg);
+    --sui-toast-padding: var(--sui-container-padding-md);
+    --sui-toast-gap: var(--sui-space-3);
+    --sui-toast-z-index: var(--sui-z-toast);
+
+    --sui-toast-success-border: var(--sui-color-success-border);
+    --sui-toast-success-icon: var(--sui-color-success);
+    --sui-toast-info-border: var(--sui-color-info-border);
+    --sui-toast-info-icon: var(--sui-color-info);
+    --sui-toast-warning-border: var(--sui-color-warning-border);
+    --sui-toast-warning-icon: var(--sui-color-warning);
+    --sui-toast-danger-border: var(--sui-color-danger-border);
+    --sui-toast-danger-icon: var(--sui-color-danger);
+}

package/lib/core/tokens/components/toggle-switch.css

@@ -0,0 +1,17 @@
+/* SUI Toggle Switch Tokens */
+
+:root {
+    --sui-toggle-switch-width: 2.5rem;
+    --sui-toggle-switch-height: 1.5rem;
+    --sui-toggle-switch-padding: 0.125rem;
+    --sui-toggle-switch-radius: 9999px;
+    --sui-toggle-switch-background: var(--sui-color-border-strong);
+    --sui-toggle-switch-background-hover: var(--sui-color-content-muted);
+    --sui-toggle-switch-checked-background: var(--sui-color-primary);
+    --sui-toggle-switch-checked-background-hover: var(--sui-color-primary-hover);
+    --sui-toggle-switch-thumb-background: var(--sui-color-content-inverse);
+    --sui-toggle-switch-focus-color: var(--sui-color-focus);
+    --sui-toggle-switch-label-text: var(--sui-color-content);
+    --sui-toggle-switch-gap: var(--sui-space-2);
+    --sui-toggle-switch-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/toolbar.css

@@ -0,0 +1,11 @@
+/* SUI Toolbar Tokens */
+
+:root {
+    --sui-toolbar-background: var(--sui-color-surface);
+    --sui-toolbar-text: var(--sui-color-content);
+    --sui-toolbar-border: var(--sui-color-border);
+    --sui-toolbar-border-width: var(--sui-border-width);
+    --sui-toolbar-radius: var(--sui-container-radius);
+    --sui-toolbar-padding: var(--sui-space-3);
+    --sui-toolbar-gap: var(--sui-space-3);
+}

package/lib/core/tokens/components/tooltip.css

@@ -0,0 +1,12 @@
+/* SUI Tooltip Tokens */
+
+:root {
+    --sui-tooltip-background: var(--sui-color-content);
+    --sui-tooltip-text: var(--sui-color-content-inverse);
+    --sui-tooltip-radius: var(--sui-radius-sm);
+    --sui-tooltip-padding-x: var(--sui-space-2);
+    --sui-tooltip-padding-y: var(--sui-space-1);
+    --sui-tooltip-font-size: var(--sui-control-font-size-xs);
+    --sui-tooltip-shadow: var(--sui-shadow-md);
+    --sui-tooltip-z-index: var(--sui-z-tooltip);
+}

package/lib/core/tokens/components.css

@@ -0,0 +1,50 @@
+/*
+ * SUI Component Tokens
+ *
+ * Aggregate entry point for all component-specific design tokens.
+ *
+ * Individual component token definitions live under:
+ *
+ * ./components/
+ */
+
+@import "./components/form-field.css";
+
+@import "./components/button.css";
+@import "./components/input.css";
+@import "./components/textarea.css";
+@import "./components/checkbox.css";
+@import "./components/toggle-switch.css";
+@import "./components/input-number.css";
+@import "./components/date-picker.css";
+
+@import "./components/select.css";
+@import "./components/autocomplete.css";
+@import "./components/multiselect.css";
+
+@import "./components/badge.css";
+@import "./components/tag.css";
+@import "./components/chip.css";
+@import "./components/message.css";
+
+@import "./components/divider.css";
+@import "./components/card.css";
+@import "./components/panel.css";
+@import "./components/fieldset.css";
+@import "./components/toolbar.css";
+
+@import "./components/progress-spinner.css";
+
+@import "./components/dialog.css";
+@import "./components/drawer.css";
+@import "./components/tooltip.css";
+@import "./components/toast.css";
+@import "./components/confirm.css";
+
+@import "./components/menu.css";
+@import "./components/menubar.css";
+@import "./components/tabs.css";
+
+@import "./components/table.css";
+
+@import "./components/file-upload.css";

package/lib/core/tokens/foundations.css

@@ -0,0 +1,132 @@
+/*
+ * SUI Design System
+ * Global semantic tokens.
+ */
+
+:root {
+    /*
+     * Spacing
+     */
+
+    --sui-space-1: 0.25rem;
+    --sui-space-2: 0.5rem;
+    --sui-space-3: 0.75rem;
+    --sui-space-4: 1rem;
+    --sui-space-5: 1.25rem;
+    --sui-space-6: 1.5rem;
+    --sui-space-8: 2rem;
+
+
+    /*
+     * Control sizes
+     */
+
+    --sui-control-height-xs: 1.5rem;
+    --sui-control-height-sm: 2rem;
+    --sui-control-height-md: 2.5rem;
+    --sui-control-height-lg: 3rem;
+    --sui-control-height-xl: 3.5rem;
+
+    --sui-control-padding-x-xs: var(--sui-space-2);
+    --sui-control-padding-x-sm: var(--sui-space-3);
+    --sui-control-padding-x-md: var(--sui-space-4);
+    --sui-control-padding-x-lg: var(--sui-space-5);
+    --sui-control-padding-x-xl: var(--sui-space-6);
+
+
+    /*
+     * Typography
+     */
+
+    --sui-control-font-size-xs: 0.75rem;
+    --sui-control-font-size-sm: 0.875rem;
+    --sui-control-font-size-md: 0.875rem;
+    --sui-control-font-size-lg: 1rem;
+    --sui-control-font-size-xl: 1.125rem;
+
+    --sui-font-weight-normal: 400;
+    --sui-font-weight-medium: 500;
+    --sui-font-weight-semibold: 600;
+    --sui-font-weight-bold: 700;
+
+
+    /*
+     * Borders
+     */
+
+    --sui-border-width: 1px;
+    --sui-border-width-strong: 2px;
+
+    --sui-control-radius:
+        var(--sui-radius-md);
+
+    --sui-container-radius:
+        var(--sui-radius-lg);
+
+
+    /*
+     * Containers
+     */
+
+    --sui-container-padding-sm:
+        var(--sui-space-3);
+
+    --sui-container-padding-md:
+        var(--sui-space-4);
+
+    --sui-container-padding-lg:
+        var(--sui-space-6);
+
+    --sui-container-shadow:
+        var(--sui-shadow-sm);
+
+
+    /*
+     * Focus
+     */
+
+    --sui-focus-ring-width: 2px;
+    --sui-focus-ring-offset: 2px;
+
+
+    /*
+     * Disabled
+     */
+
+    --sui-disabled-opacity: 0.5;
+
+
+    /*
+     * Motion
+     */
+
+    --sui-duration-fast: 100ms;
+    --sui-duration-normal: 150ms;
+    --sui-duration-slow: 250ms;
+
+    --sui-easing-standard:
+        cubic-bezier(0.2, 0, 0, 1);
+
+
+    /*
+     * Icons
+     */
+
+    --sui-icon-size-sm: 1rem;
+    --sui-icon-size-md: 1.25rem;
+    --sui-icon-size-lg: 1.5rem;
+
+
+    /*
+     * Z-index
+     */
+
+    --sui-z-base: 0;
+    --sui-z-dropdown: 1000;
+    --sui-z-sticky: 1100;
+    --sui-z-overlay: 1200;
+    --sui-z-dialog: 1300;
+    --sui-z-popover: 1400;
+    --sui-z-tooltip: 1500;
+    --sui-z-toast: 1600;
+}

package/lib/core/tokens/primitives.css

@@ -0,0 +1,159 @@
+/*
+ * SUI Design System
+ * Primitive design tokens and Tailwind integration.
+ *
+ * Components should normally NOT use the primitive colors directly.
+ * Prefer semantic tokens such as:
+ *
+ *   --sui-color-primary
+ *   --sui-color-surface
+ *   --sui-color-content
+ *
+ * Or Tailwind utilities generated from them:
+ *
+ *   bg-primary
+ *   bg-surface
+ *   text-content
+ *   border-border
+ */
+
+:root {
+    /*
+     * Typography
+     */
+
+    --sui-font-sans:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    --sui-font-mono:
+        "Cascadia Code",
+        "SFMono-Regular",
+        Consolas,
+        "Liberation Mono",
+        monospace;
+
+
+    /*
+     * Brand
+     */
+
+    --sui-palette-brand-50: #eff6ff;
+    --sui-palette-brand-100: #dbeafe;
+    --sui-palette-brand-200: #bfdbfe;
+    --sui-palette-brand-300: #93c5fd;
+    --sui-palette-brand-400: #60a5fa;
+    --sui-palette-brand-500: #3b82f6;
+    --sui-palette-brand-600: #2563eb;
+    --sui-palette-brand-700: #1d4ed8;
+    --sui-palette-brand-800: #1e40af;
+    --sui-palette-brand-900: #1e3a8a;
+    --sui-palette-brand-950: #172554;
+
+
+    /*
+     * Neutral
+     */
+
+    --sui-palette-neutral-0: #ffffff;
+    --sui-palette-neutral-50: #f9fafb;
+    --sui-palette-neutral-100: #f3f4f6;
+    --sui-palette-neutral-200: #e5e7eb;
+    --sui-palette-neutral-300: #d1d5db;
+    --sui-palette-neutral-400: #9ca3af;
+    --sui-palette-neutral-500: #6b7280;
+    --sui-palette-neutral-600: #4b5563;
+    --sui-palette-neutral-700: #374151;
+    --sui-palette-neutral-800: #1f2937;
+    --sui-palette-neutral-900: #111827;
+    --sui-palette-neutral-950: #030712;
+
+
+    /*
+     * Success
+     */
+
+    --sui-palette-success-50: #f0fdf4;
+    --sui-palette-success-100: #dcfce7;
+    --sui-palette-success-400: #4ade80;
+    --sui-palette-success-500: #22c55e;
+    --sui-palette-success-600: #16a34a;
+    --sui-palette-success-700: #15803d;
+
+
+    /*
+     * Warning
+     */
+
+    --sui-palette-warning-50: #fffbeb;
+    --sui-palette-warning-100: #fef3c7;
+    --sui-palette-warning-400: #fbbf24;
+    --sui-palette-warning-500: #f59e0b;
+    --sui-palette-warning-600: #d97706;
+    --sui-palette-warning-700: #b45309;
+
+
+    /*
+     * Danger
+     */
+
+    --sui-palette-danger-50: #fef2f2;
+    --sui-palette-danger-100: #fee2e2;
+    --sui-palette-danger-400: #f87171;
+    --sui-palette-danger-500: #ef4444;
+    --sui-palette-danger-600: #dc2626;
+    --sui-palette-danger-700: #b91c1c;
+
+
+    /*
+     * Information
+     */
+
+    --sui-palette-info-50: #f0f9ff;
+    --sui-palette-info-100: #e0f2fe;
+    --sui-palette-info-400: #38bdf8;
+    --sui-palette-info-500: #0ea5e9;
+    --sui-palette-info-600: #0284c7;
+    --sui-palette-info-700: #0369a1;
+
+
+    /*
+     * Radius
+     */
+
+    --sui-radius-xs: 0.125rem;
+    --sui-radius-sm: 0.25rem;
+    --sui-radius-md: 0.375rem;
+    --sui-radius-lg: 0.5rem;
+    --sui-radius-xl: 0.75rem;
+    --sui-radius-2xl: 1rem;
+
+
+    /*
+     * Shadows
+     */
+
+    --sui-shadow-xs:
+        0 1px 2px rgb(0 0 0 / 5%);
+
+    --sui-shadow-sm:
+        0 1px 3px rgb(0 0 0 / 10%),
+        0 1px 2px rgb(0 0 0 / 6%);
+
+    --sui-shadow-md:
+        0 4px 6px rgb(0 0 0 / 7%),
+        0 2px 4px rgb(0 0 0 / 6%);
+
+    --sui-shadow-lg:
+        0 10px 15px rgb(0 0 0 / 10%),
+        0 4px 6px rgb(0 0 0 / 5%);
+
+    --sui-shadow-xl:
+        0 20px 25px rgb(0 0 0 / 10%),
+        0 8px 10px rgb(0 0 0 / 4%);
+}