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

package/src/web/input/manifest.json

@@ -0,0 +1,465 @@
+{
+  "name": "@ttdk-design-system/input",
+  "component": "Input",
+  "folder": "input",
+  "description": "Komponen Input TTDK sesuai spesifikasi Anatomy Desain: 1. Field title (14px Semibold, #141313) 2. (Opsional) label (12px Regular, #9698A2) 3. Border radius 8px 4. Icon left / right (24px) 5. Field content (14px Regular, #141313, placeholder #9698A2) 6. Additional information / Helper text (12px Regular, #3C4245)",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "input.css",
+      "importPath": "web/input/input.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label judul field yang ditampilkan di atas input (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
+    },
+    "wrapperStyle": {
+      "name": "wrapperStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen kontainer input wrapper (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "wrapperClass": {
+      "name": "wrapperClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen kontainer input wrapper.",
+      "example": null,
+      "param": null
+    },
+    "inputStyle": {
+      "name": "inputStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen input control HTML (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "inputClass": {
+      "name": "inputClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen input control HTML.",
+      "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": null,
+      "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": null,
+      "description": "Nilai teks placeholder saat input kosong (#9698A2).",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Nilai terkontrol (controlled value) pada input.",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Nilai awal tidak terkontrol (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "type": {
+      "name": "type",
+      "type": "string",
+      "optional": true,
+      "default": "text",
+      "description": "Tipe field input HTML standar.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nama form field HTML untuk integrasi formulir.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen input.",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah input 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 input field. - `'sm'`: 36px - `'md'`: 48px (standar) - `'lg'`: 56px",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan input. - `'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 input memenuhi kontainer penuh (full-width 100%).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah field dinonaktifkan (disabled).",
+      "example": null,
+      "param": null
+    },
+    "readOnly": {
+      "name": "readOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah field bersifat hanya-baca (readonly).",
+      "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
+    },
+    "iconLeft": {
+      "name": "iconLeft",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Calendar, Search, User).",
+      "example": null,
+      "param": null
+    },
+    "iconRight": {
+      "name": "iconRight",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon di sebelah kanan dalam input (ukuran 20-24px, misal: Chevron-down, Eye, Close).",
+      "example": null,
+      "param": null
+    },
+    "addonLeft": {
+      "name": "addonLeft",
+      "type": "string | any",
+      "optional": true,
+      "default": null,
+      "description": "Addon / teks prefix di sebelah kiri luar input (misal: 'Text', '+62 (IDN)').",
+      "example": null,
+      "param": null
+    },
+    "addonRight": {
+      "name": "addonRight",
+      "type": "string | any",
+      "optional": true,
+      "default": null,
+      "description": "Addon / teks suffix di sebelah kanan luar input (misal: 'Text', '.com', 'kg').",
+      "example": null,
+      "param": null
+    },
+    "autoComplete": {
+      "name": "autoComplete",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Konfigurasi atribut autocomplete HTML.",
+      "example": null,
+      "param": null
+    },
+    "maxLength": {
+      "name": "maxLength",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Batas maksimum panjang karakter.",
+      "example": null,
+      "param": null
+    },
+    "minLength": {
+      "name": "minLength",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Batas minimum panjang karakter.",
+      "example": null,
+      "param": null
+    },
+    "min": {
+      "name": "min",
+      "type": "number | string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai minimum untuk input bertipe number atau date.",
+      "example": null,
+      "param": null
+    },
+    "max": {
+      "name": "max",
+      "type": "number | string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai maksimum untuk input bertipe number atau date.",
+      "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": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat nilai input berubah.",
+      "example": null,
+      "param": null
+    },
+    "onInput": {
+      "name": "onInput",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengetik (input event).",
+      "example": null,
+      "param": null
+    },
+    "onBlur": {
+      "name": "onBlur",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat field input kehilangan fokus.",
+      "example": null,
+      "param": null
+    },
+    "onFocus": {
+      "name": "onFocus",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat field input mendapatkan fokus.",
+      "example": null,
+      "param": null
+    },
+    "inputRef": {
+      "name": "inputRef",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ref instance elemen input HTML untuk akses kontrol DOM langsung (focus, blur, select).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "onKeyDown": {
+      "name": "onKeyDown",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event tombol keyboard ditekan.",
+      "example": null,
+      "param": null
+    },
+    "onKeyUp": {
+      "name": "onKeyUp",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event tombol keyboard dilepaskan.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/input-number/AI_GUIDE.md

@@ -0,0 +1,164 @@
+# <InputNumber /> — TTDK Component Reference
+
+Komponen InputNumber TTDK sesuai spesifikasi Anatomy Desain Form & Input: 1. Field title / label (14px Semibold, #141313) 2. (Opsional) label (12px Regular, #9698A2) 3. Border radius 8px default (rounded) 4. Stepper controls (+/- spin buttons) dengan mode right-stacked atau split-counter 5. Input control numerik terproteksi min, max, step, & precision 6. Additional information / Helper text & error message
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/input-number/input-number.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import InputNumber from "@ttdk-design-system/library-react/web/input-number";
+
+// Vue 3
+import InputNumber from "@ttdk-design-system/library-vue/web/input-number";
+
+// Svelte
+import InputNumber from "@ttdk-design-system/library-svelte/web/input-number";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+
+### Sub-interface: `InputNumberProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label judul field yang ditampilkan di atas input (14px Semibold, #141313). |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk elemen label judul field (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk elemen label judul field. |
+| `wrapperStyle?` | `UiProps` | `-` | Style kustom untuk elemen kontainer input wrapper (UiProps). |
+| `wrapperClass?` | `string` | `-` | Class CSS kustom untuk elemen kontainer input wrapper. |
+| `inputStyle?` | `UiProps` | `-` | Style kustom untuk elemen input control HTML (UiProps). |
+| `inputClass?` | `string` | `-` | Class CSS kustom untuk elemen input control HTML. |
+| `controlsStyle?` | `UiProps` | `-` | Style kustom untuk elemen stepper kontrol tombol (UiProps). |
+| `controlsClass?` | `string` | `-` | Class CSS kustom untuk elemen stepper kontrol tombol. |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk elemen pesan error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk elemen pesan error validasi. |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk elemen helper text (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk elemen helper text. |
+| `optional?` | `boolean` | `-` | Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2). |
+| `optionalText?` | `string` | `(Opsional)` | Kustomisasi teks keterangan opsional. |
+| `placeholder?` | `string` | `-` | Nilai teks placeholder saat input kosong (#9698A2). |
+| `value?` | `number | string` | `-` | Nilai terkontrol (controlled value) pada input number. |
+| `defaultValue?` | `number | string` | `-` | Nilai awal tidak terkontrol (uncontrolled initial value). |
+| `name?` | `string` | `-` | Nama form field HTML untuk integrasi formulir. |
+| `id?` | `string` | `-` | Identifier unik elemen input. |
+| `error?` | `boolean` | `false` | Status apakah input sedang dalam kondisi error / tidak valid. |
+| `errorMessage?` | `string` | `-` | Pesan teks penjelasan kesalahan validasi di bawah field. |
+| `helperText?` | `string` | `-` | Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245). |
+| `helperTextPosition?` | `'top' | 'bottom'` | `-` | Posisi teks helper |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran input field. - `'sm'`: 38px - `'md'`: 48px (standar) - `'lg'`: 56px |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan input. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul) |
+| `block?` | `boolean` | `false` | Menjadikan lebar field input memenuhi kontainer penuh (full-width 100%). |
+| `disabled?` | `boolean` | `false` | Status apakah field dinonaktifkan (disabled). |
+| `readOnly?` | `boolean` | `false` | Status apakah field bersifat hanya-baca (readonly). |
+| `required?` | `boolean` | `false` | Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *). |
+| `iconLeft?` | `any` | `-` | Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Hash, Calculator, Currency). |
+| `iconRight?` | `any` | `-` | Ikon di sebelah kanan dalam input (ukuran 20-24px). |
+| `addonLeft?` | `string | any` | `-` | Addon / teks prefix di sebelah kiri luar input (misal: 'Rp', '+62'). |
+| `addonRight?` | `string | any` | `-` | Addon / teks suffix di sebelah kanan luar input (misal: 'kg', 'pcs', '%'). |
+| `autoComplete?` | `string` | `-` | Konfigurasi atribut autocomplete HTML. |
+| `min?` | `number` | `-` | Nilai minimum yang diizinkan untuk input number. |
+| `max?` | `number` | `-` | Nilai maksimum yang diizinkan untuk input number. |
+| `step?` | `number` | `1` | Nilai selisih kenaikan atau penurunan setiap kali stepper ditekan. |
+| `precision?` | `number` | `-` | Jumlah angka di belakang koma (presisi desimal). |
+| `thousandSeparator?` | `boolean` | `false` | Mengaktifkan format pemisah ribuan otomatis dengan titik '.' (contoh: 1.000 atau 10.000). Nilai yang diteruskan ke callback form (onChange / onValueChange) tetap berupa number murni standar (contoh: 1000). |
+| `allowExponential?` | `boolean` | `false` | Mengizinkan tanda eksponensial ilmiah 'e' / 'E'. |
+| `type?` | `string` | `text` | Tipe input HTML. Secara default 'text' dengan inputMode 'numeric'/'decimal' agar mendukung formatting dan pembatasan karakter tanpa bug bawaan browser. |
+| `controls?` | `boolean` | `true` | Menampilkan tombol stepper panah kontrol atas/bawah. |
+| `withoutButton?` | `boolean` | `false` | Menghilangkan tombol kontrol increment dan decrement sehingga tampil seperti input teks biasa. |
+| `controlsPosition?` | `'right' | 'split'` | `right` | Posisi letak tombol kontrol stepper: - `'right'`: tombol stepper ditumpuk di sisi kanan (standar) - `'split'`: tombol minus di sisi kiri dan tombol plus di sisi kanan (mode counter) |
+| `maxLength?` | `number` | `-` | Batas maksimum panjang karakter. |
+| `minLength?` | `number` | `-` | Batas minimum panjang karakter. |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root / form-item (UiProps). |
+| `onChange?` | `(event: any) => void` | `-` | Callback event saat nilai input berubah (SyntheticEvent standar HTML). |
+| `onValueChange?` | `(value: number | undefined) => void` | `-` | Callback event saat nilai numerik angka berubah. |
+| `onInput?` | `(event: any) => void` | `-` | Callback event saat pengguna mengetik (input event). |
+| `onBlur?` | `(event: any) => void` | `-` | Callback event saat field input kehilangan fokus. |
+| `onFocus?` | `(event: any) => void` | `-` | Callback event saat field input mendapatkan fokus. |
+| `inputRef?` | `any` | `-` | Ref instance elemen input HTML untuk akses kontrol DOM langsung (focus, blur, select). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `onKeyDown?` | `(event: any) => void` | `-` | Callback event tombol keyboard ditekan. |
+| `onKeyUp?` | `(event: any) => void` | `-` | Callback event tombol keyboard dilepaskan. |
+| `onCopy?` | `(event: any) => void` | `-` | Callback event saat teks di-copy. |
+| `onCut?` | `(event: any) => void` | `-` | Callback event saat teks di-cut. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import InputNumber from "@ttdk-design-system/library-react/web/input-number";
+import "@ttdk-design-system/library-react/web/input-number/input-number.css";
+
+export function Example() {
+  const [dosage, setDosage] = useState(500);
+
+  return (
+    <div style={{ maxWidth: '300px' }}>
+      <InputNumber
+        label="Dosis Obat (mg)"
+        value={dosage}
+        min={50}
+        max={2000}
+        step={50}
+        helperText="Dosis paracetamol standar dewasa: 500 mg per dosis."
+        onChange={(val) => setDosage(val)}
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import InputNumber from "@ttdk-design-system/library-vue/web/input-number";
+import "@ttdk-design-system/library-vue/web/input-number/input-number.css";
+
+const dosage = ref(500);
+</script>
+
+<template>
+  <div style="max-width: 300px;">
+    <InputNumber
+      label="Dosis Obat (mg)"
+      :value="dosage"
+      :min="50"
+      :max="2000"
+      :step="50"
+      helper-text="Dosis paracetamol standar dewasa: 500 mg per dosis."
+      @change="(val: any) => (dosage = val)"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import InputNumber from "@ttdk-design-system/library-svelte/web/input-number";
+  import "@ttdk-design-system/library-svelte/web/input-number/input-number.css";
+
+  let dosage = 500;
+</script>
+
+<div style="max-width: 300px;">
+  <InputNumber
+    label="Dosis Obat (mg)"
+    value={dosage}
+    min={50}
+    max={2000}
+    step={50}
+    helperText="Dosis paracetamol standar dewasa: 500 mg per dosis."
+    on:change={(e) => (dosage = e.detail)}
+  />
+</div>
+```

package/src/web/input-number/index.ts

@@ -0,0 +1,3 @@
+export { default as InputNumber } from './input-number';
+export { default } from './input-number';
+export type { InputNumberProps, InputNumberUiProps } from './input-number'

package/src/web/input-number/input-number.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}.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);line-height:var(--ttdk-font-size-18);color:var(--ttdk-text-icon-disabled);margin-left:var(--ttdk-spacing-none)}.dark .ttdk-form-optional{color:var(--ttdk-text-icon-disabled)}.ttdk-input-wrapper{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;align-items:stretch;width:100%;height:48px;transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;overflow:hidden}.dark .ttdk-input-wrapper{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle)}.ttdk-input-wrapper[data-filled=true],.dark .ttdk-input-wrapper[data-filled=true]{border-color:var(--ttdk-stroke-strong)}.ttdk-input-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 15%, transparent);border-color:var(--ttdk-stroke-border-focus)!important}.dark .ttdk-input-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 25%, transparent);border-color:var(--ttdk-stroke-border-focus)!important}.ttdk-input-wrapper[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-input-wrapper[data-error=true]:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-status-error) 15%, transparent);border-color:var(--ttdk-stroke-status-error)!important}.dark .ttdk-input-wrapper[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)}.ttdk-input-wrapper[data-disabled=true],.ttdk-form-item[data-disabled=true] .ttdk-input-wrapper{cursor:not-allowed;opacity:.85;background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important}.dark .ttdk-input-wrapper[data-disabled=true],.dark .ttdk-form-item[data-disabled=true] .ttdk-input-wrapper{opacity:.75;background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important}.ttdk-input-inner{align-items:center;gap:var(--ttdk-spacing-sm);min-width:0;height:100%;padding:0 var(--ttdk-spacing-sm);flex:1;display:flex;position:relative}.ttdk-input-icon{width:var(--ttdk-font-size-24);height:var(--ttdk-font-size-24);color:var(--ttdk-text-icon-disabled);user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.dark .ttdk-input-icon{color:var(--ttdk-text-icon-disabled)}.ttdk-input-icon svg{width:var(--ttdk-font-size-24);height:var(--ttdk-font-size-24)}.ttdk-input-icon-left{margin-left:var(--ttdk-spacing-none);margin-right:var(--ttdk-spacing-none)}.ttdk-input-icon-right{margin-right:var(--ttdk-spacing-none);margin-left:var(--ttdk-spacing-none)}.ttdk-input-spinner{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-input-spinner svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;width:20px;height:20px;animation:1.2s steps(12,end) infinite ttdk-input-spin}@keyframes ttdk-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ttdk-input-control{width:100%;min-width:0;font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-regular);line-height:var(--ttdk-line-height-body);height:100%;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));box-sizing:border-box;font-family:var(--ttdk-font-sans);background:0 0;border:none;outline:none;flex:1;padding:0}.dark .ttdk-input-control{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-input-number-control::-webkit-outer-spin-button,.ttdk-input-number-control::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ttdk-input-number-control[type=number]{-moz-appearance:textfield}.ttdk-input-number-wrapper[data-split=true] .ttdk-input-number-control{text-align:center}.ttdk-input-control::placeholder{color:var(--ttdk-text-icon-disabled);opacity:1}.dark .ttdk-input-control::placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-input-control:disabled{cursor:not-allowed;color:var(--ttdk-text-icon-disabled)}.dark .ttdk-input-control:disabled{color:var(--ttdk-text-icon-disabled)}.ttdk-input-wrapper[data-size=sm]{height:36px}.ttdk-input-wrapper[data-size=sm] .ttdk-input-control{font-size:var(--ttdk-font-size-12)}.ttdk-input-wrapper[data-size=sm] .ttdk-input-icon,.ttdk-input-wrapper[data-size=sm] .ttdk-input-icon svg{width:var(--ttdk-font-size-20);height:var(--ttdk-font-size-20)}.ttdk-input-wrapper[data-size=sm] .ttdk-input-icon.ttdk-input-spinner,.ttdk-input-wrapper[data-size=sm] .ttdk-input-icon.ttdk-input-spinner svg,.ttdk-input-wrapper[data-size=sm] .ttdk-input-spinner,.ttdk-input-wrapper[data-size=sm] .ttdk-input-spinner svg{width:16px;height:16px}.ttdk-input-wrapper[data-size=md]{height:48px}.ttdk-input-wrapper[data-size=md] .ttdk-input-control{font-size:var(--ttdk-font-size-14)}.ttdk-input-wrapper[data-size=md] .ttdk-input-icon.ttdk-input-spinner,.ttdk-input-wrapper[data-size=md] .ttdk-input-icon.ttdk-input-spinner svg,.ttdk-input-wrapper[data-size=md] .ttdk-input-spinner,.ttdk-input-wrapper[data-size=md] .ttdk-input-spinner svg{width:20px;height:20px}.ttdk-input-wrapper[data-size=lg]{height:56px}.ttdk-input-wrapper[data-size=lg] .ttdk-input-control{font-size:var(--ttdk-font-size-16)}.ttdk-input-wrapper[data-size=lg] .ttdk-input-icon.ttdk-input-spinner,.ttdk-input-wrapper[data-size=lg] .ttdk-input-icon.ttdk-input-spinner svg,.ttdk-input-wrapper[data-size=lg] .ttdk-input-spinner,.ttdk-input-wrapper[data-size=lg] .ttdk-input-spinner svg{width:24px;height:24px}.ttdk-input-wrapper[data-rounded=none]{border-radius:var(--ttdk-radius-input-none)}.ttdk-input-wrapper[data-rounded=xs]{border-radius:var(--ttdk-radius-input-xs)}.ttdk-input-wrapper[data-rounded=sm]{border-radius:var(--ttdk-radius-input-sm)}.ttdk-input-wrapper[data-rounded=md]{border-radius:var(--ttdk-radius-input-md)}.ttdk-input-wrapper[data-rounded=lg]{border-radius:var(--ttdk-radius-input-lg)}.ttdk-input-wrapper[data-rounded=xl]{border-radius:var(--ttdk-radius-input-xl)}.ttdk-input-wrapper[data-rounded=full]{border-radius:var(--ttdk-radius-input-full)}.ttdk-input-addon{padding:0 var(--ttdk-spacing-md);font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-secondary);background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);user-select:none;white-space:nowrap;box-sizing:border-box;justify-content:center;align-items:center;display:flex}.dark .ttdk-input-addon{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-secondary);border-color:var(--ttdk-stroke-subtle)}.ttdk-input-addon-left{border-right:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-input-addon-left{border-right-color:var(--ttdk-stroke-subtle)}.ttdk-input-addon-right{border-left:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-input-addon-right{border-left-color:var(--ttdk-stroke-subtle)}.ttdk-input-wrapper[data-disabled=true] .ttdk-input-addon,.dark .ttdk-input-wrapper[data-disabled=true] .ttdk-input-addon{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-disabled)}.ttdk-input-number-stepper{border-left:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);width:26px;height:100%;margin-right:calc(-1 * var(--ttdk-spacing-sm));box-sizing:border-box;user-select:none;background:var(--ttdk-bg-secondary-disabled);flex-direction:column;flex-shrink:0;transition:border-color .15s,background-color .15s;display:flex}.dark .ttdk-input-number-stepper{border-left-color:var(--ttdk-stroke-subtle);background:var(--ttdk-bg-secondary-disabled)}.ttdk-input-wrapper[data-size=sm] .ttdk-input-number-stepper{width:22px}.ttdk-input-wrapper[data-size=lg] .ttdk-input-number-stepper{width:30px}.ttdk-input-number-btn{width:100%;color:var(--ttdk-text-icon-disabled);cursor:pointer;box-sizing:border-box;background:0 0;border:none;outline:none;flex:1;justify-content:center;align-items:center;margin:0;padding:0;transition:background-color .15s,color .15s;display:flex}.dark .ttdk-input-number-btn{color:var(--ttdk-text-icon-disabled)}.ttdk-input-number-btn:hover:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 12%, transparent);color:var(--ttdk-brand-default)}.ttdk-input-number-btn:active:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 22%, transparent);color:var(--ttdk-brand-default)}.dark .ttdk-input-number-btn:hover:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 20%, transparent);color:var(--ttdk-stroke-border-focus)}.ttdk-input-number-btn-up{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-input-number-btn-up{border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-input-number-btn:disabled,.ttdk-input-number-btn[data-disabled=true]{cursor:not-allowed;opacity:.35;color:var(--ttdk-text-icon-disabled)}.ttdk-input-number-split-btn{background:var(--ttdk-bg-secondary-disabled);width:44px;height:100%;color:var(--ttdk-text-icon-primary);cursor:pointer;user-select:none;box-sizing:border-box;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.dark .ttdk-input-number-split-btn{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary)}.ttdk-input-wrapper[data-size=sm] .ttdk-input-number-split-btn{width:36px}.ttdk-input-wrapper[data-size=lg] .ttdk-input-number-split-btn{width:52px}.ttdk-input-number-split-down{border-right:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-input-number-split-down{border-right-color:var(--ttdk-stroke-subtle)}.ttdk-input-number-split-up{border-left:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-input-number-split-up{border-left-color:var(--ttdk-stroke-subtle)}.ttdk-input-number-split-btn:hover:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 12%, transparent);color:var(--ttdk-brand-default)}.ttdk-input-number-split-btn:active:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 22%, transparent);color:var(--ttdk-brand-default)}.dark .ttdk-input-number-split-btn:hover:not(:disabled){background:color-mix(in srgb, var(--ttdk-brand-default) 20%, transparent);color:var(--ttdk-stroke-border-focus)}.ttdk-input-number-split-btn:disabled,.ttdk-input-number-split-btn[data-disabled=true]{cursor:not-allowed;opacity:.35;color:var(--ttdk-text-icon-disabled);background:var(--ttdk-bg-secondary-disabled)}.ttdk-input-wrapper[data-disabled=true] .ttdk-input-number-stepper,.ttdk-input-wrapper[data-disabled=true] .ttdk-input-number-split-btn{cursor:not-allowed;background:var(--ttdk-bg-secondary-disabled)!important;color:var(--ttdk-text-icon-disabled)!important}.ttdk-form-helper-text{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-regular);color:var(--ttdk-text-icon-secondary);line-height:var(--ttdk-font-size-18);min-height:var(--ttdk-font-size-18)}.dark .ttdk-form-helper-text{color:var(--ttdk-text-icon-secondary)}.ttdk-form-error-msg{align-items:center;gap:var(--ttdk-spacing-xxs);font-size:var(--ttdk-font-size-12);color:var(--ttdk-text-icon-status-error);font-weight:var(--ttdk-font-weight-medium);line-height:var(--ttdk-font-size-18);min-height:var(--ttdk-font-size-18);display:flex}.dark .ttdk-form-error-msg{color:var(--ttdk-text-icon-status-error)}.ttdk-form-error-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14);flex-shrink:0}.ttdk-form-error-icon path{fill-rule:evenodd;clip-rule:evenodd}.ttdk-input-number-btn:before,.ttdk-input-number-split-btn:before{content:"";background-color:currentColor;flex-shrink:0;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.ttdk-input-number-btn:before{width:12px;height:12px}.ttdk-input-wrapper[data-size=sm] .ttdk-input-number-btn:before{width:10px;height:10px}.ttdk-input-wrapper[data-size=lg] .ttdk-input-number-btn:before{width:14px;height:14px}.ttdk-input-number-split-btn:before{width:16px;height:16px}.ttdk-input-wrapper[data-size=sm] .ttdk-input-number-split-btn:before{width:14px;height:14px}.ttdk-input-wrapper[data-size=lg] .ttdk-input-number-split-btn:before{width:18px;height:18px}.ttdk-input-number-btn-up:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E")}.ttdk-input-number-btn-down:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.ttdk-input-number-split-down:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}.ttdk-input-number-split-up:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}