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

package/dist/web/input/AI_GUIDE.md

@@ -0,0 +1,159 @@
+# <Input /> — TTDK Component Reference
+
+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)
+
+## 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/input.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Input from "@ttdk-design-system/library-react/web/input";
+
+// Vue 3
+import Input from "@ttdk-design-system/library-vue/web/input";
+
+// Svelte
+import Input from "@ttdk-design-system/library-svelte/web/input";
+```
+
+## 3. Props & API Reference
+
+| Prop | 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. |
+| `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?` | `string | number` | `-` | Nilai terkontrol (controlled value) pada input. |
+| `defaultValue?` | `string | number` | `-` | Nilai awal tidak terkontrol (uncontrolled initial value). |
+| `type?` | `string` | `text` | Tipe field input HTML standar. |
+| `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'`: 36px - `'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: Calendar, Search, User). |
+| `iconRight?` | `any` | `-` | Ikon di sebelah kanan dalam input (ukuran 20-24px, misal: Chevron-down, Eye, Close). |
+| `addonLeft?` | `string | any` | `-` | Addon / teks prefix di sebelah kiri luar input (misal: 'Text', '+62 (IDN)'). |
+| `addonRight?` | `string | any` | `-` | Addon / teks suffix di sebelah kanan luar input (misal: 'Text', '.com', 'kg'). |
+| `autoComplete?` | `string` | `-` | Konfigurasi atribut autocomplete HTML. |
+| `maxLength?` | `number` | `-` | Batas maksimum panjang karakter. |
+| `minLength?` | `number` | `-` | Batas minimum panjang karakter. |
+| `min?` | `number | string` | `-` | Nilai minimum untuk input bertipe number atau date. |
+| `max?` | `number | string` | `-` | Nilai maksimum untuk input bertipe number atau date. |
+| `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. |
+| `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. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Input from "@ttdk-design-system/library-react/web/input";
+import "@ttdk-design-system/library-react/web/input/input.css";
+
+export function Example() {
+  const [email, setEmail] = useState("");
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px' }}>
+      <Input
+        label="Alamat Email"
+        placeholder="nama@kemkes.go.id"
+        value={email}
+        required
+        helperText="Gunakan email kedinasan terdaftar."
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <Input
+        label="Nomor STR"
+        placeholder="Masukkan nomor STR tenaga kesehatan"
+        optional
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Input from "@ttdk-design-system/library-vue/web/input";
+import "@ttdk-design-system/library-vue/web/input/input.css";
+
+const email = ref("");
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+    <Input
+      label="Alamat Email"
+      placeholder="nama@kemkes.go.id"
+      :value="email"
+      :required="true"
+      helper-text="Gunakan email kedinasan terdaftar."
+      @input="(e: any) => (email = e.target.value)"
+    />
+    <Input
+      label="Nomor STR"
+      placeholder="Masukkan nomor STR tenaga kesehatan"
+      :optional="true"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Input from "@ttdk-design-system/library-svelte/web/input";
+  import "@ttdk-design-system/library-svelte/web/input/input.css";
+
+  let email = "";
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+  <Input
+    label="Alamat Email"
+    placeholder="nama@kemkes.go.id"
+    value={email}
+    required={true}
+    helperText="Gunakan email kedinasan terdaftar."
+    on:input={(e) => (email = e.target.value)}
+  />
+  <Input
+    label="Nomor STR"
+    placeholder="Masukkan nomor STR tenaga kesehatan"
+    optional={true}
+  />
+</div>
+```

package/dist/web/input/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './input.svelte';
+export { default as Input } from './input.svelte';

package/dist/web/input/index.js

@@ -0,0 +1,2 @@
+export { default } from './input.svelte';
+export { default as Input } from './input.svelte';

package/dist/web/input/input.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-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=sm] .ttdk-input-addon{padding:0 var(--ttdk-spacing-sm);font-size:var(--ttdk-font-size-12)}.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-addon-btn,.ttdk-input-addon-select{align-items:center;gap:var(--ttdk-spacing-xs);font-family:inherit;font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-primary);cursor:pointer;user-select:none;background:0 0;border:none;outline:none;height:100%;margin:0;padding:0;display:inline-flex}.dark .ttdk-input-addon-btn,.dark .ttdk-input-addon-select{color:var(--ttdk-text-icon-primary)}.ttdk-input-addon-btn:hover,.ttdk-input-addon-select:hover{color:var(--ttdk-brand-default)}.ttdk-input-addon-btn svg,.ttdk-input-addon-select svg{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);color:var(--ttdk-text-icon-disabled);transition:transform .2s}.ttdk-input-addon-btn[aria-expanded=true] svg,.ttdk-input-addon-btn.active svg{transform:rotate(180deg)}.ttdk-input-addon select{font-family:inherit;font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-primary);cursor:pointer;padding-right:var(--ttdk-spacing-xxs);background:0 0;border:none;outline:none}.dark .ttdk-input-addon select{color:var(--ttdk-text-icon-primary);background:var(--ttdk-bg-base-primary)}.ttdk-input-addon-dropdown{align-items:center;height:100%;display:flex;position:relative}.ttdk-input-dropdown-menu{top:calc(100% + var(--ttdk-spacing-xs));left:calc(-1 * var(--ttdk-spacing-md));z-index:50;background:var(--ttdk-bg-base-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);min-width:220px;box-shadow:var(--ttdk-shadow-md);padding:var(--ttdk-spacing-xs);gap:var(--ttdk-spacing-xxxs);box-sizing:border-box;flex-direction:column;max-height:240px;display:flex;position:absolute;overflow-y:auto}.dark .ttdk-input-dropdown-menu{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);box-shadow:var(--ttdk-shadow-md)}.ttdk-input-dropdown-item{justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-xs);padding:var(--ttdk-spacing-xs) var(--ttdk-spacing-sm);font-size:var(--ttdk-font-size-14);color:var(--ttdk-text-icon-primary);border-radius:var(--ttdk-radius-input-md);cursor:pointer;text-align:left;box-sizing:border-box;background:0 0;border:none;width:100%;transition:background-color .15s,color .15s;display:flex}.dark .ttdk-input-dropdown-item{color:var(--ttdk-text-icon-primary)}.ttdk-input-dropdown-item:hover,.ttdk-input-dropdown-item[data-selected=true]{background:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-medium)}.dark .ttdk-input-dropdown-item:hover,.dark .ttdk-input-dropdown-item[data-selected=true]{background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-stroke-border-focus)}.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}

package/dist/web/input/input.svelte

@@ -0,0 +1,283 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let disabled = void 0;
+export let error = void 0;
+export let errorMessage = void 0;
+export let size = void 0;
+export let block = void 0;
+export let ui = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let id = void 0;
+export let labelStyle = void 0;
+export let required = void 0;
+export let optional = void 0;
+export let optionalText = void 0;
+export let helperText = void 0;
+export let helperTextPosition = void 0;
+export let helperTextClass = void 0;
+export let helperTextStyle = void 0;
+export let wrapperClass = void 0;
+export let value = void 0;
+export let defaultValue = void 0;
+export let rounded = void 0;
+export let wrapperStyle = void 0;
+export let addonLeft = void 0;
+export let iconLeft = void 0;
+export let inputRef = void 0;
+export let inputClass = void 0;
+export let type = void 0;
+export let name = void 0;
+export let placeholder = void 0;
+export let readOnly = void 0;
+export let autoComplete = void 0;
+export let maxLength = void 0;
+export let minLength = void 0;
+export let min = void 0;
+export let max = void 0;
+export let inputStyle = void 0;
+export let onChange = void 0;
+export let onInput = void 0;
+export let onBlur = void 0;
+export let onFocus = void 0;
+export let onKeyDown = void 0;
+export let onKeyUp = void 0;
+export let loading = void 0;
+export let iconRight = void 0;
+export let addonRight = void 0;
+export let errorMessageClass = void 0;
+export let errorMessageStyle = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui || {}),
+    })}
+  class={`ttdk-form-item ${className || ""}`.trim()}
+  data-disabled={disabled}
+  data-error={Boolean(error || errorMessage)}
+  data-size={size || "md"}
+  data-block={block ? "true" : undefined}
+>
+  {#if label}
+    <label
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+      })}
+      class={`ttdk-form-label ${labelClass || ""}`.trim()}
+      for={id}
+      ><span>{label}</span>
+      {#if required}
+        <span class="ttdk-form-required" aria-hidden="true"> * </span>
+      {/if}
+      {#if optional}
+        <span class="ttdk-form-optional">{optionalText || "(Opsional)"}</span>
+      {/if}</label
+    >
+  {/if}
+  {#if helperText && helperTextPosition === "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(wrapperStyle),
+    })}
+    class={`ttdk-input-wrapper ${wrapperClass || ""}`.trim()}
+    data-filled={Boolean(value || defaultValue)}
+    data-error={Boolean(error || errorMessage)}
+    data-disabled={Boolean(disabled)}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+  >
+    {#if addonLeft}
+      <div class="ttdk-input-addon ttdk-input-addon-left">{addonLeft}</div>
+    {/if}
+    <div class="ttdk-input-inner">
+      {#if iconLeft}
+        <span class="ttdk-input-icon ttdk-input-icon-left" aria-hidden="true"
+          >{iconLeft}</span
+        >
+      {/if}<input
+        style={stringifyStyles({
+          ...buildUiVars(inputStyle),
+        })}
+        bind:this={inputRef}
+        class={`ttdk-input-control ${inputClass || ""}`.trim()}
+        type={type || "text"}
+        {name}
+        {id}
+        value={value !== undefined ? value : defaultValue}
+        {placeholder}
+        {disabled}
+        {readOnly}
+        {required}
+        autocomplete={autoComplete}
+        {maxLength}
+        {minLength}
+        {min}
+        {max}
+        aria-invalid={Boolean(error || errorMessage)}
+        on:change={(e) => {
+          onChange && onChange(e);
+        }}
+        on:input={(e) => {
+          onInput && onInput(e);
+        }}
+        on:blur={(e) => {
+          onBlur && onBlur(e);
+        }}
+        on:focus={(e) => {
+          onFocus && onFocus(e);
+        }}
+        on:keydown={(e) => {
+          onKeyDown && onKeyDown(e);
+        }}
+        on:keyup={(e) => {
+          onKeyUp && onKeyUp(e);
+        }}
+      />
+      {#if loading}
+        <span
+          class="ttdk-input-icon ttdk-input-icon-right ttdk-input-spinner"
+          aria-hidden="true"
+          ><svg viewBox="0 0 24 24"
+            ><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.175"
+              transform="rotate(0 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.25"
+              transform="rotate(30 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.325"
+              transform="rotate(60 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.4"
+              transform="rotate(90 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.475"
+              transform="rotate(120 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.55"
+              transform="rotate(150 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.625"
+              transform="rotate(180 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.7"
+              transform="rotate(210 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.775"
+              transform="rotate(240 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.85"
+              transform="rotate(270 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.925"
+              transform="rotate(300 12 12)"
+            /><line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="1"
+              transform="rotate(330 12 12)"
+            /></svg
+          ></span
+        >
+      {/if}
+      {#if !loading && iconRight}
+        <span class="ttdk-input-icon ttdk-input-icon-right" aria-hidden="true"
+          >{iconRight}</span
+        >
+      {/if}
+    </div>
+    {#if addonRight}
+      <div class="ttdk-input-addon ttdk-input-addon-right">{addonRight}</div>
+    {/if}
+  </div>
+  {#if helperText && helperTextPosition !== "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  {#if errorMessage && (error || errorMessage)}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(errorMessageStyle),
+      })}
+      role="alert"
+      class={`ttdk-form-error-msg ${errorMessageClass || ""}`.trim()}
+    >
+      <span>{errorMessage}</span>
+    </div>
+  {/if}
+</div>