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

package/src/web/grid/grid.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+
+export interface GridBreakpointProps {
+  /**
+   * Jumlah atau pola template kolom pada grid (grid-template-columns).
+   * Nilai angka (misal: 3 atau 12) otomatis dikonversi ke repeat(N, minmax(0, 1fr)).
+   * Nilai string (misal: "200px 1fr 2fr", "repeat(4, 1fr)").
+   */
+  templateColumns?: string | number;
+
+  /**
+   * Jumlah atau pola template baris pada grid (grid-template-rows).
+   */
+  templateRows?: string | number;
+
+  /**
+   * Jarak celah antar baris dan kolom (gap).
+   * Nilai angka (misal: 16) atau string (misal: "16px", "1rem", "var(--ttdk-spacing-16)").
+   */
+  gap?: string | number;
+
+  /**
+   * Distribusi horizontal keseluruhan grid container (justify-content).
+   */
+  justifyContent?: "start" | "center" | "end" | "around" | "between" | "evenly";
+
+  /**
+   * Distribusi vertikal baris di dalam grid container (align-content).
+   */
+  alignContent?: "evenly" | "around" | "between" | "center" | "start" | "end";
+}
+export interface GridProps extends GridBreakpointProps {
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: GridBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Konten anak di dalam Grid (<GridItem>).
+   */
+  children?: any;
+}
+
+import { buildGridVars, buildUiVars, UiProps } from "../../core/types";
+
+function Grid(props: GridProps) {
+  return (
+    <div
+      className={`ttdk-grid ${props.className || ""}`.trim()}
+      style={{
+        ...buildGridVars(props),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </div>
+  );
+}
+
+export default Grid;
+
+export { Grid };

package/src/web/grid/index.ts

@@ -0,0 +1,5 @@
+export { default } from './grid';
+export { default as Grid } from './grid';
+export type { GridProps, GridBreakpointProps } from './grid';
+export { default as GridItem } from './grid-item';
+export type { GridItemProps, GridItemBreakpointProps } from './grid-item'

package/src/web/grid/manifest.json

@@ -0,0 +1,153 @@
+{
+  "name": "@ttdk-design-system/grid",
+  "component": "Grid",
+  "folder": "grid",
+  "description": "TTDK Grid component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "grid.css",
+      "importPath": "web/grid/grid.css"
+    }
+  ],
+  "props": {
+    "sm": {
+      "name": "sm",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint sm (min-width: 640px).",
+      "example": null,
+      "param": null
+    },
+    "md": {
+      "name": "md",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint md (min-width: 768px).",
+      "example": null,
+      "param": null
+    },
+    "lg": {
+      "name": "lg",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint lg (min-width: 1024px).",
+      "example": null,
+      "param": null
+    },
+    "xl": {
+      "name": "xl",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint xl (min-width: 1280px).",
+      "example": null,
+      "param": null
+    },
+    "xxl": {
+      "name": "xxl",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint xxl / 2xl (min-width: 1536px).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom inline.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak di dalam Grid (<GridItem>).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "GridBreakpointProps": {
+      "templateColumns": {
+        "name": "templateColumns",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jumlah atau pola template kolom pada grid (grid-template-columns). Nilai angka (misal: 3 atau 12) otomatis dikonversi ke repeat(N, minmax(0, 1fr)). Nilai string (misal: \"200px 1fr 2fr\", \"repeat(4, 1fr)\").",
+        "example": null,
+        "param": null
+      },
+      "templateRows": {
+        "name": "templateRows",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jumlah atau pola template baris pada grid (grid-template-rows).",
+        "example": null,
+        "param": null
+      },
+      "gap": {
+        "name": "gap",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jarak celah antar baris dan kolom (gap). Nilai angka (misal: 16) atau string (misal: \"16px\", \"1rem\", \"var(--ttdk-spacing-16)\").",
+        "example": null,
+        "param": null
+      },
+      "justifyContent": {
+        "name": "justifyContent",
+        "type": "'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'",
+        "optional": true,
+        "default": null,
+        "description": "Distribusi horizontal keseluruhan grid container (justify-content).",
+        "example": null,
+        "param": null
+      },
+      "alignContent": {
+        "name": "alignContent",
+        "type": "'evenly' | 'around' | 'between' | 'center' | 'start' | 'end'",
+        "optional": true,
+        "default": null,
+        "description": "Distribusi vertikal baris di dalam grid container (align-content).",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/index.ts

@@ -0,0 +1,86 @@
+/**
+ * TTDK Design System — Web Module (REACT)
+ */
+
+export { default as Accordion } from './accordion/accordion';
+export * from './accordion';
+
+export { default as Alert } from './alert/alert';
+export * from './alert';
+
+export { default as Avatar } from './avatar/avatar';
+export * from './avatar';
+
+export { default as Badge } from './badge/badge';
+export * from './badge';
+
+export { default as Banner } from './banner/banner';
+export * from './banner';
+
+export { default as Breadcrumb } from './breadcrumb/breadcrumb';
+export * from './breadcrumb';
+
+export { default as Button } from './button/button';
+export * from './button';
+
+export { default as Calendar } from './calendar/calendar';
+export * from './calendar';
+
+export { default as Card } from './card/card';
+export * from './card';
+
+export { default as Checkbox } from './checkbox/checkbox';
+export * from './checkbox';
+
+export { default as Chip } from './chip/chip';
+export * from './chip';
+
+export { default as Dropdown } from './dropdown/dropdown';
+export * from './dropdown';
+
+export { default as Flex } from './flex/flex';
+export * from './flex';
+
+export { default as Grid } from './grid/grid';
+export * from './grid';
+
+export { default as Input } from './input/input';
+export * from './input';
+
+export { default as InputNumber } from './input-number/input-number';
+export * from './input-number';
+
+export { default as Modal } from './modal/modal';
+export * from './modal';
+
+export { default as Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast, PaginationEllipsis } from './pagination';
+export * from './pagination';
+
+export { default as Popover } from './popover/popover';
+export * from './popover';
+
+export { default as Radio } from './radio/radio';
+export * from './radio';
+
+export { default as Selectbox } from './selectbox/selectbox';
+export * from './selectbox';
+
+export { default as Sonner, default as Toaster, toast } from './sonner';
+export * from './sonner';
+
+export { default as Table, default as DataTable, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, TableEmpty } from './table';
+export type { TableProps, TableUiProps } from './table/table';
+export * from './table';
+
+export { default as Tabs } from './tabs/tabs';
+export * from './tabs';
+
+export { default as Text } from './text/text';
+export * from './text';
+
+export { default as Textarea } from './textarea/textarea';
+export * from './textarea';
+
+export { default as Tooltip } from './tooltip/tooltip';
+export * from './tooltip';
+

package/src/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/src/web/input/index.ts

@@ -0,0 +1,3 @@
+export { default as Input } from './input';
+export { default } from './input';
+export type { InputProps, InputUiProps } from './input'

package/src/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}