@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/selectbox/manifest.json

@@ -0,0 +1,477 @@
+{
+  "name": "@ttdk-design-system/selectbox",
+  "component": "Selectbox",
+  "folder": "selectbox",
+  "description": "Komponen Selectbox TTDK sesuai spesifikasi Desain: - Single Select dengan Checkmark indicator dan Active Teal border (#00A3A6) - Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan) - Searchable filter bar dengan input Cari 🔍 - Visual States: Default, Active/Open, Filled, Error (#FF3A39), Disabled (#E4E5E7)",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "selectbox.css",
+      "importPath": "web/selectbox/selectbox.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label judul field yang ditampilkan di atas selectbox (14px Semibold, #141313).",
+      "example": null,
+      "param": null
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen label judul field (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen label judul field.",
+      "example": null,
+      "param": null
+    },
+    "controlStyle": {
+      "name": "controlStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen trigger kontrol selectbox (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "controlClass": {
+      "name": "controlClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen trigger kontrol selectbox.",
+      "example": null,
+      "param": null
+    },
+    "menuStyle": {
+      "name": "menuStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen menu dropdown popover (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "menuClass": {
+      "name": "menuClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen menu dropdown popover.",
+      "example": null,
+      "param": null
+    },
+    "listStyle": {
+      "name": "listStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Alias untuk menuStyle (konsistensi dengan Dropdown listStyle).",
+      "example": null,
+      "param": null
+    },
+    "listClass": {
+      "name": "listClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk opsi list dropdown (atau alias menuClass).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageStyle": {
+      "name": "errorMessageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen pesan error validasi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageClass": {
+      "name": "errorMessageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen pesan error validasi.",
+      "example": null,
+      "param": null
+    },
+    "helperTextStyle": {
+      "name": "helperTextStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen helper text (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "helperTextClass": {
+      "name": "helperTextClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen helper text.",
+      "example": null,
+      "param": null
+    },
+    "optional": {
+      "name": "optional",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).",
+      "example": null,
+      "param": null
+    },
+    "optionalText": {
+      "name": "optionalText",
+      "type": "string",
+      "optional": true,
+      "default": "(Opsional)",
+      "description": "Kustomisasi teks keterangan opsional.",
+      "example": null,
+      "param": null
+    },
+    "placeholder": {
+      "name": "placeholder",
+      "type": "string",
+      "optional": true,
+      "default": "Pilih dropdown menu",
+      "description": "Teks petunjuk saat belum ada opsi yang dipilih.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple).",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai awal tidak terkontrol (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "options": {
+      "name": "options",
+      "type": "Array<SelectboxOption | string>",
+      "optional": true,
+      "default": null,
+      "description": "Daftar pilihan opsi dropdown. Dapat berupa array of object `{ label, value }` atau array of string.",
+      "example": null,
+      "param": null
+    },
+    "multiple": {
+      "name": "multiple",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox.",
+      "example": null,
+      "param": null
+    },
+    "searchable": {
+      "name": "searchable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengaktifkan kotak pencarian (search input) di dalam menu dropdown.",
+      "example": null,
+      "param": null
+    },
+    "searchPlaceholder": {
+      "name": "searchPlaceholder",
+      "type": "string",
+      "optional": true,
+      "default": "Cari",
+      "description": "Placeholder pada kotak pencarian di dalam dropdown.",
+      "example": null,
+      "param": null
+    },
+    "applyText": {
+      "name": "applyText",
+      "type": "string",
+      "optional": true,
+      "default": "Terapkan",
+      "description": "Teks tombol terapkan pada footer multi-select.",
+      "example": null,
+      "param": null
+    },
+    "resetText": {
+      "name": "resetText",
+      "type": "string",
+      "optional": true,
+      "default": "Reset",
+      "description": "Teks tombol reset pada footer multi-select.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nama form field HTML.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen selectbox.",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah selectbox sedang dalam kondisi error / tidak valid.",
+      "example": null,
+      "param": null
+    },
+    "errorMessage": {
+      "name": "errorMessage",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Pesan teks penjelasan kesalahan validasi di bawah field.",
+      "example": null,
+      "param": null
+    },
+    "helperText": {
+      "name": "helperText",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).",
+      "example": null,
+      "param": null
+    },
+    "helperTextPosition": {
+      "name": "helperTextPosition",
+      "type": "'top' | 'bottom'",
+      "optional": true,
+      "default": null,
+      "description": "Posisi teks helper",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran selectbox. - `'sm'`: 36px - `'md'`: 48px (standar desain) - `'lg'`: 56px",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan selectbox. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul)",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan lebar field selectbox memenuhi kontainer penuh (full-width 100%).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah selectbox dinonaktifkan (disabled).",
+      "example": null,
+      "param": null
+    },
+    "required": {
+      "name": "required",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).",
+      "example": null,
+      "param": null
+    },
+    "inputRef": {
+      "name": "inputRef",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ref instance elemen control selectbox untuk akses DOM langsung.",
+      "example": null,
+      "param": null
+    },
+    "clearable": {
+      "name": "clearable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner loading dan menonaktifkan interaksi selectbox.",
+      "example": null,
+      "param": null
+    },
+    "readOnly": {
+      "name": "readOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan selectbox hanya-baca (tidak bisa dibuka/diubah).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root / form-item (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(value: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat nilai pilihan berubah.",
+      "example": null,
+      "param": null
+    },
+    "onSearch": {
+      "name": "onSearch",
+      "type": "(query: string) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengetik di kolom pencarian.",
+      "example": null,
+      "param": null
+    },
+    "onOpen": {
+      "name": "onOpen",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat menu dropdown terbuka.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "disableShift": {
+      "name": "disableShift",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover tidak bergeser secara horizontal mengikuti tepi layar. Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat menu dropdown ditutup.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "SelectboxOption": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Teks label tampilan pilihan dropdown.",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "string | number",
+        "optional": false,
+        "default": null,
+        "description": "Nilai unik (value) dari opsi pilihan.",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status apakah opsi ini dinonaktifkan dari pemilihan.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/selectbox/selectbox.css

@@ -0,0 +1 @@
+.ttdk-form-item{gap:var(--ttdk-spacing-xxs);box-sizing:border-box;width:100%;font-family:var(--ttdk-font-sans);flex-direction:column;display:flex;position:relative}.ttdk-form-item:has([data-open=true]),.ttdk-form-item:has(.ttdk-selectbox-dropdown){z-index:50}.ttdk-form-item[data-block=true]{width:100%}.ttdk-form-label{font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-semibold);line-height:var(--ttdk-font-size-20);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));align-items:center;gap:var(--ttdk-spacing-xxs);user-select:none;display:flex}.dark .ttdk-form-label{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-form-required{color:var(--ttdk-stroke-status-error);font-weight:var(--ttdk-font-weight-bold)}.dark .ttdk-form-required{color:var(--ttdk-stroke-status-error)}.ttdk-form-optional{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-regular);color:var(--ttdk-text-icon-disabled)}.dark .ttdk-form-optional{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-control{background:var(--ttdk-bg-base-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);box-sizing:border-box;cursor:pointer;user-select:none;width:100%;height:auto;min-height:48px;font-family:var(--ttdk-font-sans);justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-xs);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));outline:none;padding:6px 12px;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative}.dark .ttdk-selectbox-control{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-selectbox-control[data-size=sm]{height:auto;min-height:36px;font-size:var(--ttdk-font-size-12);padding:3px 10px}.ttdk-selectbox-control[data-size=md]{height:auto;min-height:48px;font-size:var(--ttdk-font-size-14);padding:6px 12px}.ttdk-selectbox-control[data-size=lg]{height:auto;min-height:56px;font-size:var(--ttdk-font-size-16);padding:8px 14px}.ttdk-selectbox-control[data-rounded=none]{border-radius:var(--ttdk-radius-input-none)}.ttdk-selectbox-control[data-rounded=xs]{border-radius:var(--ttdk-radius-input-xs)}.ttdk-selectbox-control[data-rounded=sm]{border-radius:var(--ttdk-radius-input-sm)}.ttdk-selectbox-control[data-rounded=md]{border-radius:var(--ttdk-radius-input-md)}.ttdk-selectbox-control[data-rounded=lg]{border-radius:var(--ttdk-radius-input-lg)}.ttdk-selectbox-control[data-rounded=xl]{border-radius:var(--ttdk-radius-input-xl)}.ttdk-selectbox-control[data-rounded=full]{border-radius:var(--ttdk-radius-input-full)}.ttdk-selectbox-control:focus-visible,.ttdk-selectbox-control[data-open=true]{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 15%, transparent)}.dark .ttdk-selectbox-control:focus-visible,.dark .ttdk-selectbox-control[data-open=true]{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 25%, transparent)}.ttdk-selectbox-control[data-filled=true]:not([data-open=true]):not([data-error=true]),.dark .ttdk-selectbox-control[data-filled=true]:not([data-open=true]):not([data-error=true]){border-color:var(--ttdk-stroke-strong)}.ttdk-selectbox-control[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-selectbox-control[data-error=true]:focus-visible,.ttdk-selectbox-control[data-error=true][data-open=true]{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-status-error) 15%, transparent)}.dark .ttdk-selectbox-control[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-form-item[data-error=true] .ttdk-form-label,.dark .ttdk-form-item[data-error=true] .ttdk-form-label{color:var(--ttdk-text-icon-status-error)!important}.ttdk-selectbox-control[data-disabled=true]{background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;box-shadow:none!important}.dark .ttdk-selectbox-control[data-disabled=true]{background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important}.ttdk-selectbox-display{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-width:0;padding:2px 0;display:flex}.ttdk-selectbox-value{color:inherit;font-size:var(--ttdk-font-size-14);line-height:var(--ttdk-font-size-20);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dark .ttdk-selectbox-value{color:inherit}.ttdk-selectbox-placeholder{color:var(--ttdk-text-icon-disabled);font-size:var(--ttdk-font-size-14);line-height:var(--ttdk-font-size-20);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dark .ttdk-selectbox-placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-chips{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}.ttdk-select-chip{align-items:center;gap:var(--ttdk-spacing-xxs);padding:2px var(--ttdk-spacing-xs);background:var(--ttdk-bg-secondary-disabled);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-full);font-family:var(--ttdk-font-sans);font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-primary);box-sizing:border-box;line-height:16px;display:inline-flex}.ttdk-select-chip-text{white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden}.dark .ttdk-select-chip{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}.ttdk-select-chip-remove{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);color:var(--ttdk-text-icon-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin:0 -2px 0 2px;padding:0;transition:all .15s;display:inline-flex}.ttdk-select-chip-remove:hover{background:color-mix(in srgb, var(--ttdk-stroke-status-error) 12%, transparent);color:var(--ttdk-stroke-status-error)}.dark .ttdk-select-chip-remove{color:var(--ttdk-text-icon-secondary)}.dark .ttdk-select-chip-remove:hover{background:color-mix(in srgb, var(--ttdk-stroke-status-error) 20%, transparent);color:var(--ttdk-stroke-status-error)}.ttdk-selectbox-clear{width:var(--ttdk-font-size-20);height:var(--ttdk-font-size-20);background:var(--ttdk-bg-secondary-disabled);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-secondary);cursor:pointer;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;transition:all .15s;display:inline-flex}.ttdk-selectbox-clear:hover{background:var(--ttdk-stroke-subtle);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary);transform:scale(1.05)}.ttdk-selectbox-clear:active{background:var(--ttdk-stroke-strong);transform:scale(.95)}.ttdk-selectbox-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--ttdk-stroke-border-focus) 40%, transparent)}.dark .ttdk-selectbox-clear{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-secondary)}.dark .ttdk-selectbox-clear:hover{background:var(--ttdk-stroke-subtle);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}.dark .ttdk-selectbox-clear:active{background:var(--ttdk-stroke-strong)}.ttdk-selectbox-arrow{color:var(--ttdk-text-icon-disabled);flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,color .15s;display:inline-flex}.dark .ttdk-selectbox-arrow{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-arrow[data-open=true]{color:var(--ttdk-stroke-border-focus);transform:rotate(180deg)}.ttdk-selectbox-dropdown{background:var(--ttdk-bg-base-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);width:max-content;min-width:100%;box-shadow:var(--ttdk-shadow-lg);box-sizing:border-box;font-family:var(--ttdk-font-sans);color:var(--ttdk-text-icon-primary);z-index:100;flex-direction:column;animation:.15s ease-out ttdk-dropdown-in;display:flex;position:absolute;top:0;left:0;overflow:hidden}.ttdk-selectbox-dropdown[data-placement^=top]{transform-origin:bottom}.ttdk-selectbox-dropdown[data-placement^=bottom]{transform-origin:top}.dark .ttdk-selectbox-dropdown{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);box-shadow:var(--ttdk-shadow-lg);color:var(--ttdk-text-icon-primary)}@keyframes ttdk-dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ttdk-selectbox-search{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);background:var(--ttdk-bg-base-primary);align-items:center;gap:var(--ttdk-spacing-xs);flex-shrink:0;padding:10px 12px;display:flex}.dark .ttdk-selectbox-search{background:var(--ttdk-bg-base-primary);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-selectbox-search-input{font-size:var(--ttdk-font-size-14);color:var(--ttdk-text-icon-primary);font-family:var(--ttdk-font-sans);background:0 0;border:none;outline:none;flex:1}.dark .ttdk-selectbox-search-input{color:var(--ttdk-text-icon-primary)}.ttdk-selectbox-search-input::placeholder,.dark .ttdk-selectbox-search-input::placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-search-icon{color:var(--ttdk-text-icon-disabled);align-items:center;display:inline-flex}.dark .ttdk-selectbox-search-icon{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-options-list{min-height:0;padding:var(--ttdk-spacing-xxs);scrollbar-width:thin;flex:auto;overflow-y:auto}.ttdk-selectbox-options-list::-webkit-scrollbar{width:var(--ttdk-spacing-xxs)}.ttdk-selectbox-options-list::-webkit-scrollbar-thumb{background:var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-sm)}.dark .ttdk-selectbox-options-list::-webkit-scrollbar-thumb{background:var(--ttdk-stroke-subtle)}.ttdk-selectbox-option{border-radius:var(--ttdk-radius-input-md);font-size:var(--ttdk-font-size-14);font-family:var(--ttdk-font-sans);color:inherit;cursor:pointer;user-select:none;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;transition:background-color .12s,color .12s;display:flex}.dark .ttdk-selectbox-option{color:inherit}.ttdk-selectbox-option:hover{background:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default)}.dark .ttdk-selectbox-option:hover{background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-stroke-border-focus)}.ttdk-selectbox-option[data-selected=true]{color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-semibold)}.dark .ttdk-selectbox-option[data-selected=true]{color:var(--ttdk-stroke-border-focus)}.ttdk-selectbox-option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ttdk-selectbox-check-icon{color:currentColor;flex-shrink:0;align-items:center;display:inline-flex}.dark .ttdk-selectbox-check-icon{color:currentColor}.ttdk-selectbox-checkbox{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-sm);background:var(--ttdk-bg-base-primary);flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.dark .ttdk-selectbox-checkbox{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle)}.ttdk-selectbox-checkbox[data-checked=true]{background:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white)}.ttdk-selectbox-empty{text-align:center;font-size:var(--ttdk-font-size-14);color:var(--ttdk-text-icon-disabled);padding:16px 12px}.dark .ttdk-selectbox-empty{color:var(--ttdk-text-icon-disabled)}.ttdk-selectbox-actions{border-top:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);background:var(--ttdk-bg-secondary-disabled);justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-xs);flex-shrink:0;padding:8px 12px;display:flex}.dark .ttdk-selectbox-actions{background:var(--ttdk-bg-secondary-disabled);border-top-color:var(--ttdk-stroke-subtle)}.ttdk-selectbox-btn-reset{color:var(--ttdk-brand-default);font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-semibold);font-family:var(--ttdk-font-sans);cursor:pointer;border-radius:var(--ttdk-radius-input-sm);background:0 0;border:none;align-items:center;gap:6px;padding:6px 8px;transition:color .15s,background-color .15s;display:inline-flex}.ttdk-selectbox-btn-reset:hover{background:color-mix(in srgb, var(--ttdk-brand-default) 8%, transparent);color:var(--ttdk-brand-strong)}.dark .ttdk-selectbox-btn-reset{color:var(--ttdk-stroke-border-focus)}.dark .ttdk-selectbox-btn-reset:hover{background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-stroke-border-focus)}.ttdk-selectbox-btn-apply{background:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white);font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-semibold);font-family:var(--ttdk-font-sans);cursor:pointer;border-radius:var(--ttdk-radius-input-md);border:none;align-items:center;gap:6px;padding:6px 16px;transition:background-color .15s,transform .1s;display:inline-flex}.ttdk-selectbox-btn-apply:hover{background:var(--ttdk-brand-strong)}.ttdk-selectbox-btn-apply:active{transform:scale(.98)}.ttdk-form-helper{font-size:var(--ttdk-font-size-12);line-height:var(--ttdk-font-size-18);color:var(--ttdk-text-icon-secondary);font-family:var(--ttdk-font-sans)}.dark .ttdk-form-helper{color:var(--ttdk-text-icon-secondary)}.ttdk-form-error{font-size:var(--ttdk-font-size-12);line-height:var(--ttdk-font-size-18);color:var(--ttdk-text-icon-status-error);font-weight:var(--ttdk-font-weight-medium);font-family:var(--ttdk-font-sans)}.dark .ttdk-form-error{color:var(--ttdk-text-icon-status-error)}.ttdk-select-chip-remove-icon,.ttdk-selectbox-clear-icon,.ttdk-selectbox-spinner-icon,.ttdk-selectbox-arrow-icon,.ttdk-selectbox-search-svg,.ttdk-selectbox-checkbox-icon,.ttdk-selectbox-check-svg,.ttdk-selectbox-btn-reset-icon,.ttdk-selectbox-btn-apply-icon{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.ttdk-select-chip-remove-icon{width:var(--ttdk-font-size-12);height:var(--ttdk-font-size-12);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-clear-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-spinner{color:var(--ttdk-text-icon-disabled);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-selectbox-spinner-icon{stroke-width:2.2px;width:20px;height:20px;animation:1.2s steps(12,end) infinite ttdk-spin}.ttdk-selectbox-control[data-size=sm] .ttdk-selectbox-spinner,.ttdk-selectbox-control[data-size=sm] .ttdk-selectbox-spinner-icon{width:16px;height:16px}.ttdk-selectbox-control[data-size=md] .ttdk-selectbox-spinner,.ttdk-selectbox-control[data-size=md] .ttdk-selectbox-spinner-icon{width:20px;height:20px}.ttdk-selectbox-control[data-size=lg] .ttdk-selectbox-spinner,.ttdk-selectbox-control[data-size=lg] .ttdk-selectbox-spinner-icon{width:24px;height:24px}.ttdk-selectbox-arrow-icon{width:var(--ttdk-font-size-18);height:var(--ttdk-font-size-18);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-search-svg{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-checkbox-icon{width:var(--ttdk-font-size-12);height:var(--ttdk-font-size-12);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-check-svg{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);stroke-width:var(--ttdk-stroke-width-med)}.ttdk-selectbox-btn-reset-icon,.ttdk-selectbox-btn-apply-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14);stroke-width:var(--ttdk-stroke-width-med)}@keyframes ttdk-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}