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

package/src/web/card/manifest.json

@@ -0,0 +1,357 @@
+{
+  "name": "@ttdk-design-system/card",
+  "component": "Card",
+  "folder": "card",
+  "description": "TTDK Card component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "card.css",
+      "importPath": "web/card/card.css"
+    }
+  ],
+  "props": {
+    "variant": {
+      "name": "variant",
+      "type": "'bordered' | 'elevated' | 'flat' | 'ghost'",
+      "optional": true,
+      "default": "default",
+      "description": "Gaya varian visual kartu. - 'bordered': Kartu dengan border halus dan background card standar. - 'elevated': Kartu dengan bayangan elevasi bertingkat (shadow). - 'flat': Kartu dengan latar netral subtle tanpa bayangan. - 'ghost': Kartu transparan minimalis tanpa border atau bayangan.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Kepadatan padding internal kartu. - 'sm': Padding kompak (12px / 16px). - 'md': Padding proporsional standar (20px / 24px). - 'lg': Padding lapang / hero (28px / 32px).",
+      "example": null,
+      "param": null
+    },
+    "cardWidth": {
+      "name": "cardWidth",
+      "type": "'auto' | 'full' | '1-1' | '1-2' | '1-3' | '1-4' | 'mobile'",
+      "optional": true,
+      "default": "auto",
+      "description": "Preset batas lebar kartu sesuai standar token TTDK. - 'auto': Fleksibel mengikuti lebar kontainer parent. - 'full': Lebar penuh 100%. - '1-1': 1128px (Grid Desktop Maksimal). - '1-2': 552px (Grid 1/2). - '1-3': 360px (Grid 1/3). - '1-4': 264px (Grid 1/4). - 'mobile': 328px (Optimal Layar Seluler).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan radius kartu.",
+      "example": null,
+      "param": null
+    },
+    "hoverable": {
+      "name": "hoverable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor).",
+      "example": null,
+      "param": null
+    },
+    "clickable": {
+      "name": "clickable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan kartu sebagai elemen interaktif yang dapat diklik.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi kartu dan meredupkan opacity.",
+      "example": null,
+      "param": null
+    },
+    "title": {
+      "name": "title",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Judul kartu pada area header.",
+      "example": null,
+      "param": null
+    },
+    "subtitle": {
+      "name": "subtitle",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Subjudul atau teks deskripsi singkat di bawah judul.",
+      "example": null,
+      "param": null
+    },
+    "extra": {
+      "name": "extra",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi).",
+      "example": null,
+      "param": null
+    },
+    "cover": {
+      "name": "cover",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom).",
+      "example": null,
+      "param": null
+    },
+    "coverAlt": {
+      "name": "coverAlt",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Alt text untuk gambar cover jika `cover` berupa URL string.",
+      "example": null,
+      "param": null
+    },
+    "coverPosition": {
+      "name": "coverPosition",
+      "type": "'top' | 'bottom'",
+      "optional": true,
+      "default": "top",
+      "description": "Posisi media cover pada kartu ('top' atau 'bottom').",
+      "example": null,
+      "param": null
+    },
+    "actions": {
+      "name": "actions",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Grup tombol aksi terstruktur di area footer kartu.",
+      "example": null,
+      "param": null
+    },
+    "footer": {
+      "name": "footer",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom untuk area footer kartu.",
+      "example": null,
+      "param": null
+    },
+    "headerBorder": {
+      "name": "headerBorder",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan garis pembatas divider di bawah header kartu.",
+      "example": null,
+      "param": null
+    },
+    "footerBorder": {
+      "name": "footerBorder",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan garis pembatas divider di atas footer kartu.",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat kartu diklik.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk root kontainer kartu.",
+      "example": null,
+      "param": null
+    },
+    "headerStyle": {
+      "name": "headerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk area header kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "headerClass": {
+      "name": "headerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk area header kartu.",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks judul kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks judul kartu.",
+      "example": null,
+      "param": null
+    },
+    "subtitleStyle": {
+      "name": "subtitleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks subjudul / deskripsi header (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "subtitleClass": {
+      "name": "subtitleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks subjudul / deskripsi header.",
+      "example": null,
+      "param": null
+    },
+    "extraStyle": {
+      "name": "extraStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen extra di sudut kanan header (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "extraClass": {
+      "name": "extraClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen extra di sudut kanan header.",
+      "example": null,
+      "param": null
+    },
+    "bodyStyle": {
+      "name": "bodyStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk area body / konten utama kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "bodyClass": {
+      "name": "bodyClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk area body / konten utama kartu.",
+      "example": null,
+      "param": null
+    },
+    "footerStyle": {
+      "name": "footerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk area footer kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "footerClass": {
+      "name": "footerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk area footer kartu.",
+      "example": null,
+      "param": null
+    },
+    "coverStyle": {
+      "name": "coverStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk area media cover kartu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "coverClass": {
+      "name": "coverClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk area media cover kartu.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak atau slot kustom (children).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/checkbox/AI_GUIDE.md

@@ -0,0 +1,146 @@
+# <Checkbox /> — TTDK Component Reference
+
+TTDK Checkbox component with multi-theme support.
+
+## 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/checkbox/checkbox.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Checkbox from "@ttdk-design-system/library-react/web/checkbox";
+
+// Vue 3
+import Checkbox from "@ttdk-design-system/library-vue/web/checkbox";
+
+// Svelte
+import Checkbox from "@ttdk-design-system/library-svelte/web/checkbox";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `checked?` | `boolean` | `false` | Status apakah checkbox sedang dalam kondisi terpilih (checked). |
+| `indeterminate?` | `boolean` | `false` | Status apakah checkbox dalam kondisi parsial / indeterminate (menampilkan tanda strip '-'). |
+| `label?` | `string` | `-` | Teks label utama yang ditampilkan di samping kotak checkbox. |
+| `description?` | `string` | `-` | Deskripsi atau teks bantuan yang ditampilkan di bawah label. |
+| `helperText?` | `string` | `-` | Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description). |
+| `error?` | `boolean | string` | `-` | Status error visual atau string pesan error. |
+| `errorMessage?` | `string` | `-` | Pesan error yang ditampilkan jika validasi form gagal. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran checkbox: - `'sm'`: Kotak 16px, font 12px. - `'md'`: Kotak 18px, font 14px (standar). - `'lg'`: Kotak 22px, font 16px. |
+| `variant?` | `'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'` | `primary` | Varian warna semantik saat checkbox dicentang: - `'primary'`: Aksen toska aksi (#16b3ac, standar). - `'info'`: Aksen biru informasi (#2196f3). - `'success'`: Warna hijau sukses (#047b5d). - `'warning'`: Warna peringatan kuning/oranye (#fb8c00). - `'danger'`: Warna bahaya merah (#c50a24). - `'neutral'`: Warna abu-abu netral (#4a4f53). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'full'` | `md` | Sudut kelengkungan kotak checkbox: - `'none'`: Kotak tajam 0px. - `'sm'`: Radius halus 2px. - `'md'`: Radius sedang 4px (standar). - `'full'`: Lingkaran penuh 9999px. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi pada checkbox. |
+| `required?` | `boolean` | `false` | Menandakan bahwa field checkbox wajib diisi (required) pada formulir. |
+| `name?` | `string` | `-` | Name atribut untuk elemen HTML `<input type="checkbox">`. |
+| `value?` | `string` | `-` | Value atribut untuk elemen HTML input. |
+| `id?` | `string` | `-` | Identifier unik elemen checkbox (untuk kaitan dengan label form). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `controlStyle?` | `UiProps` | `-` | Style kustom untuk kotak kontrol checkbox (UiProps). |
+| `controlClass?` | `string` | `-` | Class CSS kustom untuk kotak kontrol checkbox (Tailwind / class kustom). |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk teks label checkbox (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk teks label checkbox (Tailwind / class kustom). |
+| `descStyle?` | `UiProps` | `-` | Style kustom untuk teks deskripsi bantuan (UiProps). |
+| `descClass?` | `string` | `-` | Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom). |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk elemen helper text (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk elemen helper text. |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk teks pesan error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom). |
+| `onChange?` | `(checked: boolean, event?: any) => void` | `-` | Event handler yang dipanggil saat nilai checkbox berubah. Mengembalikan `(checked: boolean, event: Event)`. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Slot konten label kustom yang menggantikan prop `label`. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Checkbox from "@ttdk-design-system/library-react/web/checkbox";
+import "@ttdk-design-system/library-react/web/checkbox/checkbox.css";
+
+export function Example() {
+  const [agreed, setAgreed] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Checkbox
+        checked={agreed}
+        label="Saya menyetujui syarat & ketentuan data"
+        description="Data akan diproses sesuai standar kepatuhan SATUSEHAT."
+        onChange={(val) => setAgreed(val)}
+      />
+      <Checkbox
+        checked={true}
+        variant="success"
+        label="Aktifkan sinkronisasi otomatis"
+      />
+      <Checkbox
+        indeterminate={true}
+        label="Pilih sebagian fasilitas kesehatan"
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Checkbox from "@ttdk-design-system/library-vue/web/checkbox";
+import "@ttdk-design-system/library-vue/web/checkbox/checkbox.css";
+
+const agreed = ref(false);
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <Checkbox
+      :checked="agreed"
+      label="Saya menyetujui syarat & ketentuan data"
+      description="Data akan diproses sesuai standar kepatuhan SATUSEHAT."
+      @change="(val: boolean) => (agreed = val)"
+    />
+    <Checkbox
+      :checked="true"
+      variant="success"
+      label="Aktifkan sinkronisasi otomatis"
+    />
+    <Checkbox
+      :indeterminate="true"
+      label="Pilih sebagian fasilitas kesehatan"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Checkbox from "@ttdk-design-system/library-svelte/web/checkbox";
+  import "@ttdk-design-system/library-svelte/web/checkbox/checkbox.css";
+
+  let agreed = false;
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <Checkbox
+    checked={agreed}
+    label="Saya menyetujui syarat & ketentuan data"
+    description="Data akan diproses sesuai standar kepatuhan SATUSEHAT."
+    on:change={(e) => (agreed = e.detail)}
+  />
+  <Checkbox
+    checked={true}
+    variant="success"
+    label="Aktifkan sinkronisasi otomatis"
+  />
+  <Checkbox
+    indeterminate={true}
+    label="Pilih sebagian fasilitas kesehatan"
+  />
+</div>
+```

package/src/web/checkbox/checkbox.css

@@ -0,0 +1 @@
+:root,.dark,[data-mode=dark],[data-theme=dark],.ttdk-checkbox-wrapper,.ttdk-checkbox-root{--ttdk-checkbox-radius-none:var(--ttdk-radius-input-none);--ttdk-checkbox-radius-sm:var(--ttdk-radius-input-sm);--ttdk-checkbox-radius-md:var(--ttdk-radius-input-md);--ttdk-checkbox-radius-lg:var(--ttdk-radius-input-lg);--ttdk-checkbox-radius-full:var(--ttdk-radius-input-full);--ttdk-checkbox-bg:var(--ttdk-bg-base-primary);--ttdk-checkbox-border:var(--ttdk-stroke-subtle);--ttdk-checkbox-border-hover:var(--ttdk-stroke-strong);--ttdk-checkbox-color-check:var(--ttdk-color-white);--ttdk-checkbox-ring:color-mix(in oklab, var(--ttdk-brand-default) 25%, transparent);--ttdk-checkbox-primary:var(--ttdk-brand-default);--ttdk-checkbox-primary-hover:var(--ttdk-brand-strong);--ttdk-checkbox-neutral:var(--ttdk-stroke-strong);--ttdk-checkbox-neutral-hover:var(--ttdk-color-neutral-700);--ttdk-checkbox-danger:var(--ttdk-bg-status-error);--ttdk-checkbox-danger-hover:var(--ttdk-bg-status-error-strong);--ttdk-checkbox-success:var(--ttdk-bg-status-success);--ttdk-checkbox-success-hover:var(--ttdk-color-green-700);--ttdk-checkbox-warning:var(--ttdk-bg-status-warning);--ttdk-checkbox-warning-hover:var(--ttdk-color-orange-600);--ttdk-checkbox-info:var(--ttdk-bg-status-info);--ttdk-checkbox-info-hover:var(--ttdk-color-blue-600);--ttdk-checkbox-text-title:var(--ttdk-text-icon-primary);--ttdk-checkbox-text-subtitle:var(--ttdk-text-icon-primary);--ttdk-checkbox-text-disabled:var(--ttdk-text-icon-disabled);--ttdk-checkbox-text-error:var(--ttdk-text-icon-status-error);--ttdk-checkbox-disabled-bg:var(--ttdk-bg-secondary-disabled);--ttdk-checkbox-disabled-border:var(--ttdk-stroke-subtle)}.dark,[data-mode=dark],[data-theme=dark]{--ttdk-checkbox-neutral-hover:var(--ttdk-color-neutral-600)}.ttdk-checkbox-wrapper,.ttdk-checkbox-root{cursor:default;user-select:none;font-family:var(--ttdk-font-sans);box-sizing:border-box;pointer-events:none;align-items:center;gap:10px;display:inline-flex;position:relative}.ttdk-checkbox-wrapper[data-has-description=true],.ttdk-checkbox-root[data-has-description=true]{align-items:flex-start}.ttdk-checkbox-native,.ttdk-checkbox-input{opacity:0;pointer-events:none;width:0;height:0;margin:0;padding:0;position:absolute}.ttdk-checkbox-control{background-color:var(--ttdk-checkbox-bg);border:1px solid var(--ttdk-checkbox-border);border-radius:var(--ttdk-checkbox-radius-sm);box-sizing:border-box;cursor:pointer;pointer-events:auto;flex-shrink:0;justify-content:center;align-items:center;margin-top:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex}.ttdk-checkbox-wrapper[data-has-description=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-has-description=true] .ttdk-checkbox-control{margin-top:2px}.ttdk-checkbox-wrapper:not([data-disabled=true]) .ttdk-checkbox-control:hover,.ttdk-checkbox-root:not([data-disabled=true]) .ttdk-checkbox-control:hover{border-color:var(--ttdk-checkbox-border-hover)}.ttdk-checkbox-native:focus-visible+.ttdk-checkbox-control,.ttdk-checkbox-input:focus-visible+.ttdk-checkbox-control{box-shadow:0 0 0 3px var(--ttdk-checkbox-ring)}.ttdk-checkbox-wrapper[data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-primary);border-color:var(--ttdk-checkbox-primary);color:var(--ttdk-checkbox-color-check)}.ttdk-checkbox-wrapper:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-primary-hover);border-color:var(--ttdk-checkbox-primary-hover)}.ttdk-checkbox-wrapper[data-variant=danger][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-variant=danger][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=danger][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=danger][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=danger][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=danger][data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=danger][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=danger][data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-danger);border-color:var(--ttdk-checkbox-danger)}.ttdk-checkbox-wrapper[data-variant=danger]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-variant=danger]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=danger]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=danger]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=danger]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=danger]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=danger]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=danger]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-danger-hover);border-color:var(--ttdk-checkbox-danger-hover)}.ttdk-checkbox-wrapper[data-variant=success][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-variant=success][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=success][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=success][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=success][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=success][data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=success][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=success][data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-success);border-color:var(--ttdk-checkbox-success)}.ttdk-checkbox-wrapper[data-variant=success]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-variant=success]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=success]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=success]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=success]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=success]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=success]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=success]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-success-hover);border-color:var(--ttdk-checkbox-success-hover)}.ttdk-checkbox-wrapper[data-variant=warning][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-variant=warning][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=warning][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=warning][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=warning][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=warning][data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=warning][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=warning][data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-warning);border-color:var(--ttdk-checkbox-warning);color:var(--ttdk-color-black)}.ttdk-checkbox-wrapper[data-variant=warning]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-variant=warning]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=warning]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=warning]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=warning]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=warning]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=warning]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=warning]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-warning-hover);border-color:var(--ttdk-checkbox-warning-hover)}.ttdk-checkbox-wrapper[data-variant=info][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-variant=info][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=info][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=info][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=info][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=info][data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=info][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=info][data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-info);border-color:var(--ttdk-checkbox-info)}.ttdk-checkbox-wrapper[data-variant=info]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-variant=info]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=info]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=info]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=info]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=info]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=info]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=info]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-info-hover);border-color:var(--ttdk-checkbox-info-hover)}.ttdk-checkbox-wrapper[data-variant=neutral][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-variant=neutral][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=neutral][data-checked=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-color=neutral][data-indeterminate=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=neutral][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-variant=neutral][data-state=indeterminate] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=neutral][data-state=checked] .ttdk-checkbox-control,.ttdk-checkbox-root[data-color=neutral][data-state=indeterminate] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-neutral);border-color:var(--ttdk-checkbox-neutral)}.ttdk-checkbox-wrapper[data-variant=neutral]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-variant=neutral]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=neutral]:not([data-disabled=true])[data-checked=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-wrapper[data-color=neutral]:not([data-disabled=true])[data-indeterminate=true] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=neutral]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-variant=neutral]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=neutral]:not([data-disabled=true])[data-state=checked] .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-color=neutral]:not([data-disabled=true])[data-state=indeterminate] .ttdk-checkbox-control:hover{background-color:var(--ttdk-checkbox-neutral-hover);border-color:var(--ttdk-checkbox-neutral-hover)}.ttdk-checkbox-wrapper[data-disabled=true],.ttdk-checkbox-root[data-disabled=true]{pointer-events:none;cursor:not-allowed!important}.ttdk-checkbox-wrapper[data-disabled=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-disabled=true] .ttdk-checkbox-control{background-color:var(--ttdk-checkbox-disabled-bg)!important;border:1px solid var(--ttdk-checkbox-border)!important;color:var(--ttdk-checkbox-text-disabled)!important;box-shadow:none!important}.ttdk-checkbox-wrapper[data-disabled=true] .ttdk-checkbox-label,.ttdk-checkbox-root[data-disabled=true] .ttdk-checkbox-label,.ttdk-checkbox-wrapper[data-disabled=true] .ttdk-checkbox-desc,.ttdk-checkbox-root[data-disabled=true] .ttdk-checkbox-desc{color:var(--ttdk-checkbox-text-disabled)!important}.ttdk-checkbox-wrapper[data-error=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-error=true] .ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-error=true]:not([data-disabled=true]) .ttdk-checkbox-control:hover,.ttdk-checkbox-root[data-error=true]:not([data-disabled=true]) .ttdk-checkbox-control:hover{border-color:var(--ttdk-checkbox-text-error)}.ttdk-checkbox-wrapper[data-error=true] .ttdk-checkbox-native:focus-visible+.ttdk-checkbox-control,.ttdk-checkbox-wrapper[data-error=true] .ttdk-checkbox-input:focus-visible+.ttdk-checkbox-control,.ttdk-checkbox-root[data-error=true] .ttdk-checkbox-native:focus-visible+.ttdk-checkbox-control,.ttdk-checkbox-root[data-error=true] .ttdk-checkbox-input:focus-visible+.ttdk-checkbox-control{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-checkbox-danger) 25%, transparent)}.ttdk-checkbox-wrapper[data-error=true] .ttdk-checkbox-label,.ttdk-checkbox-root[data-error=true] .ttdk-checkbox-label{color:var(--ttdk-checkbox-text-error)}.ttdk-checkbox-label-wrapper{pointer-events:auto;flex-direction:column;gap:2px;display:flex}.ttdk-checkbox-label{color:var(--ttdk-ui-color,var(--ttdk-checkbox-text-title));letter-spacing:.5px;cursor:pointer;pointer-events:auto;font-size:14px;font-weight:600;line-height:1.25;transition:color .15s}.ttdk-checkbox-desc,.ttdk-checkbox-helper-text{color:var(--ttdk-ui-color,var(--ttdk-checkbox-text-subtitle));letter-spacing:.25px;cursor:default;pointer-events:auto;font-size:14px;font-weight:400;line-height:1.5;transition:color .15s}.ttdk-checkbox-error-msg{color:var(--ttdk-checkbox-text-error);cursor:default;pointer-events:auto;margin-top:2px;font-size:12px;font-weight:500;line-height:1.4}.ttdk-checkbox-wrapper[data-size=sm] .ttdk-checkbox-control,.ttdk-checkbox-root[data-size=sm] .ttdk-checkbox-control{width:16px;height:16px}.ttdk-checkbox-wrapper[data-size=sm] .ttdk-checkbox-icon,.ttdk-checkbox-root[data-size=sm] .ttdk-checkbox-icon{width:11px;height:11px}.ttdk-checkbox-wrapper[data-size=sm] .ttdk-checkbox-label,.ttdk-checkbox-root[data-size=sm] .ttdk-checkbox-label{font-size:13px;line-height:1.25}.ttdk-checkbox-wrapper[data-size=sm] .ttdk-checkbox-desc,.ttdk-checkbox-root[data-size=sm] .ttdk-checkbox-desc{font-size:12px;line-height:1.4}.ttdk-checkbox-wrapper[data-size=md] .ttdk-checkbox-control,.ttdk-checkbox-root[data-size=md] .ttdk-checkbox-control{width:18px;height:18px}.ttdk-checkbox-wrapper[data-size=md] .ttdk-checkbox-icon,.ttdk-checkbox-root[data-size=md] .ttdk-checkbox-icon{width:13px;height:13px}.ttdk-checkbox-wrapper[data-size=md] .ttdk-checkbox-label,.ttdk-checkbox-root[data-size=md] .ttdk-checkbox-label{letter-spacing:.5px;font-size:14px;font-weight:600;line-height:1.25}.ttdk-checkbox-wrapper[data-size=md] .ttdk-checkbox-desc,.ttdk-checkbox-root[data-size=md] .ttdk-checkbox-desc{letter-spacing:.25px;font-size:14px;font-weight:400;line-height:1.5}.ttdk-checkbox-wrapper[data-size=lg] .ttdk-checkbox-control,.ttdk-checkbox-root[data-size=lg] .ttdk-checkbox-control{width:22px;height:22px}.ttdk-checkbox-wrapper[data-size=lg][data-has-description=true] .ttdk-checkbox-control,.ttdk-checkbox-root[data-size=lg][data-has-description=true] .ttdk-checkbox-control{margin-top:2px}.ttdk-checkbox-wrapper[data-size=lg] .ttdk-checkbox-icon,.ttdk-checkbox-root[data-size=lg] .ttdk-checkbox-icon{width:15px;height:15px}.ttdk-checkbox-wrapper[data-size=lg] .ttdk-checkbox-label,.ttdk-checkbox-root[data-size=lg] .ttdk-checkbox-label{font-size:16px;line-height:1.3}.ttdk-checkbox-wrapper[data-size=lg] .ttdk-checkbox-desc,.ttdk-checkbox-root[data-size=lg] .ttdk-checkbox-desc{font-size:15px;line-height:1.5}.ttdk-checkbox-wrapper[data-rounded=none] .ttdk-checkbox-control,.ttdk-checkbox-root[data-rounded=none] .ttdk-checkbox-control{border-radius:var(--ttdk-checkbox-radius-none)}.ttdk-checkbox-wrapper[data-rounded=sm] .ttdk-checkbox-control,.ttdk-checkbox-root[data-rounded=sm] .ttdk-checkbox-control{border-radius:var(--ttdk-checkbox-radius-sm)}.ttdk-checkbox-wrapper[data-rounded=md] .ttdk-checkbox-control,.ttdk-checkbox-root[data-rounded=md] .ttdk-checkbox-control{border-radius:var(--ttdk-checkbox-radius-md)}.ttdk-checkbox-wrapper[data-rounded=lg] .ttdk-checkbox-control,.ttdk-checkbox-root[data-rounded=lg] .ttdk-checkbox-control{border-radius:var(--ttdk-checkbox-radius-lg)}.ttdk-checkbox-wrapper[data-rounded=full] .ttdk-checkbox-control,.ttdk-checkbox-root[data-rounded=full] .ttdk-checkbox-control{border-radius:var(--ttdk-checkbox-radius-full)}.ttdk-checkbox-icon{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;animation:.12s ease-out forwards ttdk-check-pop;display:block}[data-variant=warning] .ttdk-checkbox-icon,[data-color=warning] .ttdk-checkbox-icon{stroke:var(--ttdk-color-black)}[data-variant=warning] .ttdk-checkbox-control,[data-color=warning] .ttdk-checkbox-control{color:var(--ttdk-color-black)}@keyframes ttdk-check-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}