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

package/src/web/radio/AI_GUIDE.md

@@ -0,0 +1,155 @@
+# <Radio /> — TTDK Component Reference
+
+TTDK Radio 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/radio/radio.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Radio from "@ttdk-design-system/library-react/web/radio";
+
+// Vue 3
+import Radio from "@ttdk-design-system/library-vue/web/radio";
+
+// Svelte
+import Radio from "@ttdk-design-system/library-svelte/web/radio";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `checked?` | `boolean` | `false` | Status apakah radio button sedang dalam kondisi terpilih (checked). |
+| `label?` | `string` | `-` | Teks label utama yang ditampilkan di samping lingkaran radio. |
+| `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 radio button: - `'sm'`: Lingkaran 16px, font 13px. - `'md'`: Lingkaran 18px, font 14px (standar). - `'lg'`: Lingkaran 22px, font 16px. |
+| `variant?` | `'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'` | `primary` | Varian warna semantik saat radio button dipilih: - `'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). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi pada radio button. |
+| `required?` | `boolean` | `false` | Menandakan bahwa field radio wajib diisi (required) pada formulir. |
+| `name?` | `string` | `-` | Name atribut untuk elemen HTML `<input type="radio">`. Digunakan untuk mengelompokkan radio button dalam satu grup. |
+| `value?` | `string` | `-` | Value atribut untuk elemen HTML input. |
+| `id?` | `string` | `-` | Identifier unik elemen radio button (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 lingkaran kontrol radio (UiProps). |
+| `controlClass?` | `string` | `-` | Class CSS kustom untuk lingkaran kontrol radio (Tailwind / class kustom). |
+| `dotStyle?` | `UiProps` | `-` | Style kustom untuk titik (dot) di dalam radio button saat checked (UiProps). |
+| `dotClass?` | `string` | `-` | Class CSS kustom untuk titik (dot) di dalam radio button saat checked (Tailwind / class kustom). |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk teks label radio (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk teks label radio (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 radio button 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 Radio from "@ttdk-design-system/library-react/web/radio";
+import "@ttdk-design-system/library-react/web/radio/radio.css";
+
+export function Example() {
+  const [selected, setSelected] = useState("bpjs");
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Radio
+        checked={selected === "bpjs"}
+        label="BPJS Kesehatan"
+        description="Jaminan kesehatan nasional terdaftar."
+        onChange={() => setSelected("bpjs")}
+      />
+      <Radio
+        checked={selected === "umum"}
+        label="Pasien Umum / Mandiri"
+        description="Pembayaran biaya perawatan mandiri."
+        onChange={() => setSelected("umum")}
+      />
+      <Radio
+        checked={selected === "asuransi"}
+        label="Asuransi Swasta"
+        description="Klaim penjaminan asuransi rekanan faskes."
+        onChange={() => setSelected("asuransi")}
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Radio from "@ttdk-design-system/library-vue/web/radio";
+import "@ttdk-design-system/library-vue/web/radio/radio.css";
+
+const selected = ref("bpjs");
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <Radio
+      :checked="selected === 'bpjs'"
+      label="BPJS Kesehatan"
+      description="Jaminan kesehatan nasional terdaftar."
+      @change="() => (selected = 'bpjs')"
+    />
+    <Radio
+      :checked="selected === 'umum'"
+      label="Pasien Umum / Mandiri"
+      description="Pembayaran biaya perawatan mandiri."
+      @change="() => (selected = 'umum')"
+    />
+    <Radio
+      :checked="selected === 'asuransi'"
+      label="Asuransi Swasta"
+      description="Klaim penjaminan asuransi rekanan faskes."
+      @change="() => (selected = 'asuransi')"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Radio from "@ttdk-design-system/library-svelte/web/radio";
+  import "@ttdk-design-system/library-svelte/web/radio/radio.css";
+
+  let selected = "bpjs";
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <Radio
+    checked={selected === "bpjs"}
+    label="BPJS Kesehatan"
+    description="Jaminan kesehatan nasional terdaftar."
+    on:change={() => (selected = "bpjs")}
+  />
+  <Radio
+    checked={selected === "umum"}
+    label="Pasien Umum / Mandiri"
+    description="Pembayaran biaya perawatan mandiri."
+    on:change={() => (selected = "umum")}
+  />
+  <Radio
+    checked={selected === "asuransi"}
+    label="Asuransi Swasta"
+    description="Klaim penjaminan asuransi rekanan faskes."
+    on:change={() => (selected = "asuransi")}
+  />
+</div>
+```

package/src/web/radio/index.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './radio';
+export { default } from "./radio"

package/src/web/radio/manifest.json

@@ -0,0 +1,294 @@
+{
+  "name": "@ttdk-design-system/radio",
+  "component": "Radio",
+  "folder": "radio",
+  "description": "TTDK Radio component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "radio.css",
+      "importPath": "web/radio/radio.css"
+    }
+  ],
+  "props": {
+    "checked": {
+      "name": "checked",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah radio button sedang dalam kondisi terpilih (checked).",
+      "example": null,
+      "param": null
+    },
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label utama yang ditampilkan di samping lingkaran radio.",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau teks bantuan yang ditampilkan di bawah label.",
+      "example": null,
+      "param": null
+    },
+    "helperText": {
+      "name": "helperText",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description).",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean | string",
+      "optional": true,
+      "default": null,
+      "description": "Status error visual atau string pesan error.",
+      "example": null,
+      "param": null
+    },
+    "errorMessage": {
+      "name": "errorMessage",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Pesan error yang ditampilkan jika validasi form gagal.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran radio button: - `'sm'`: Lingkaran 16px, font 13px. - `'md'`: Lingkaran 18px, font 14px (standar). - `'lg'`: Lingkaran 22px, font 16px.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik saat radio button dipilih: - `'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).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi pada radio button.",
+      "example": null,
+      "param": null
+    },
+    "required": {
+      "name": "required",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandakan bahwa field radio wajib diisi (required) pada formulir.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Name atribut untuk elemen HTML `<input type=\"radio\">`. Digunakan untuk mengelompokkan radio button dalam satu grup.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Value atribut untuk elemen HTML input.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen radio button (untuk kaitan dengan label form).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "controlStyle": {
+      "name": "controlStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk lingkaran kontrol radio (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "controlClass": {
+      "name": "controlClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk lingkaran kontrol radio (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "dotStyle": {
+      "name": "dotStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk titik (dot) di dalam radio button saat checked (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "dotClass": {
+      "name": "dotClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk titik (dot) di dalam radio button saat checked (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks label radio (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks label radio (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks deskripsi bantuan (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "helperTextStyle": {
+      "name": "helperTextStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen helper text (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "helperTextClass": {
+      "name": "helperTextClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen helper text.",
+      "example": null,
+      "param": null
+    },
+    "errorMessageStyle": {
+      "name": "errorMessageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks pesan error validasi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageClass": {
+      "name": "errorMessageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(checked: boolean, event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler yang dipanggil saat nilai radio button berubah. Mengembalikan `(checked: boolean, event: Event)`.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Slot konten label kustom yang menggantikan prop `label`.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/radio/radio.css

@@ -0,0 +1 @@
+:root,.dark,[data-mode=dark],[data-theme=dark],.ttdk-radio-wrapper,.ttdk-radio-root{--ttdk-radio-bg:var(--ttdk-bg-base-primary);--ttdk-radio-border:var(--ttdk-stroke-subtle);--ttdk-radio-border-hover:var(--ttdk-stroke-strong);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-brand-default) 25%, transparent);--ttdk-radio-active:var(--ttdk-brand-default);--ttdk-radio-active-hover:var(--ttdk-brand-strong);--ttdk-radio-primary:var(--ttdk-brand-default);--ttdk-radio-primary-hover:var(--ttdk-brand-strong);--ttdk-radio-neutral:var(--ttdk-stroke-strong);--ttdk-radio-neutral-hover:var(--ttdk-color-neutral-700);--ttdk-radio-danger:var(--ttdk-bg-status-error);--ttdk-radio-danger-hover:var(--ttdk-bg-status-error-strong);--ttdk-radio-success:var(--ttdk-bg-status-success);--ttdk-radio-success-hover:var(--ttdk-color-green-700);--ttdk-radio-warning:var(--ttdk-bg-status-warning);--ttdk-radio-warning-hover:var(--ttdk-color-orange-600);--ttdk-radio-info:var(--ttdk-bg-status-info);--ttdk-radio-info-hover:var(--ttdk-color-blue-600);--ttdk-radio-text-title:var(--ttdk-text-icon-primary);--ttdk-radio-text-subtitle:var(--ttdk-text-icon-primary);--ttdk-radio-text-disabled:var(--ttdk-text-icon-disabled);--ttdk-radio-text-error:var(--ttdk-text-icon-status-error);--ttdk-radio-disabled-bg:var(--ttdk-bg-secondary-disabled)}.dark,[data-mode=dark],[data-theme=dark]{--ttdk-radio-neutral-hover:var(--ttdk-color-neutral-600)}.ttdk-radio-wrapper,.ttdk-radio-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-radio-wrapper[data-has-description=true],.ttdk-radio-root[data-has-description=true]{align-items:flex-start}.ttdk-radio-native,.ttdk-radio-input{opacity:0;pointer-events:none;width:0;height:0;margin:0;padding:0;position:absolute}.ttdk-radio-control{background-color:var(--ttdk-radio-bg);border:1.5px solid var(--ttdk-radio-border);box-sizing:border-box;cursor:pointer;pointer-events:auto;border-radius:9999px;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-radio-wrapper[data-has-description=true] .ttdk-radio-control,.ttdk-radio-root[data-has-description=true] .ttdk-radio-control{margin-top:2px}.ttdk-radio-wrapper:not([data-disabled=true]) .ttdk-radio-control:hover,.ttdk-radio-root:not([data-disabled=true]) .ttdk-radio-control:hover{border-color:var(--ttdk-radio-active)}.ttdk-radio-native:focus-visible+.ttdk-radio-control,.ttdk-radio-input:focus-visible+.ttdk-radio-control{box-shadow:0 0 0 3px var(--ttdk-radio-ring)}.ttdk-radio-wrapper[data-checked=true] .ttdk-radio-control,.ttdk-radio-wrapper[data-state=checked] .ttdk-radio-control,.ttdk-radio-root[data-checked=true] .ttdk-radio-control,.ttdk-radio-root[data-state=checked] .ttdk-radio-control{background-color:var(--ttdk-radio-bg);border-color:var(--ttdk-radio-active);border-width:1.5px}.ttdk-radio-wrapper:not([data-disabled=true])[data-checked=true] .ttdk-radio-control:hover,.ttdk-radio-wrapper:not([data-disabled=true])[data-state=checked] .ttdk-radio-control:hover,.ttdk-radio-root:not([data-disabled=true])[data-checked=true] .ttdk-radio-control:hover,.ttdk-radio-root:not([data-disabled=true])[data-state=checked] .ttdk-radio-control:hover{border-color:var(--ttdk-radio-active-hover)}.ttdk-radio-dot{background-color:var(--ttdk-radio-active);border-radius:9999px;flex-shrink:0;animation:.12s ease-out forwards ttdk-radio-pop;display:block}@keyframes ttdk-radio-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.ttdk-radio-wrapper[data-variant=danger],.ttdk-radio-wrapper[data-color=danger],.ttdk-radio-root[data-variant=danger],.ttdk-radio-root[data-color=danger]{--ttdk-radio-active:var(--ttdk-radio-danger);--ttdk-radio-active-hover:var(--ttdk-radio-danger-hover);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-radio-danger) 25%, transparent)}.ttdk-radio-wrapper[data-variant=success],.ttdk-radio-wrapper[data-color=success],.ttdk-radio-root[data-variant=success],.ttdk-radio-root[data-color=success]{--ttdk-radio-active:var(--ttdk-radio-success);--ttdk-radio-active-hover:var(--ttdk-radio-success-hover);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-radio-success) 25%, transparent)}.ttdk-radio-wrapper[data-variant=warning],.ttdk-radio-wrapper[data-color=warning],.ttdk-radio-root[data-variant=warning],.ttdk-radio-root[data-color=warning]{--ttdk-radio-active:var(--ttdk-radio-warning);--ttdk-radio-active-hover:var(--ttdk-radio-warning-hover);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-radio-warning) 25%, transparent)}.ttdk-radio-wrapper[data-variant=info],.ttdk-radio-wrapper[data-color=info],.ttdk-radio-root[data-variant=info],.ttdk-radio-root[data-color=info]{--ttdk-radio-active:var(--ttdk-radio-info);--ttdk-radio-active-hover:var(--ttdk-radio-info-hover);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-radio-info) 25%, transparent)}.ttdk-radio-wrapper[data-variant=neutral],.ttdk-radio-wrapper[data-color=neutral],.ttdk-radio-root[data-variant=neutral],.ttdk-radio-root[data-color=neutral]{--ttdk-radio-active:var(--ttdk-radio-neutral);--ttdk-radio-active-hover:var(--ttdk-radio-neutral-hover);--ttdk-radio-ring:color-mix(in oklab, var(--ttdk-radio-neutral) 25%, transparent)}.ttdk-radio-wrapper[data-disabled=true],.ttdk-radio-root[data-disabled=true]{pointer-events:none;cursor:not-allowed!important}.ttdk-radio-wrapper[data-disabled=true] .ttdk-radio-control,.ttdk-radio-root[data-disabled=true] .ttdk-radio-control{background-color:var(--ttdk-radio-disabled-bg)!important;border:1.5px solid var(--ttdk-radio-border)!important;box-shadow:none!important}.ttdk-radio-wrapper[data-disabled=true] .ttdk-radio-dot,.ttdk-radio-root[data-disabled=true] .ttdk-radio-dot{background-color:var(--ttdk-radio-text-disabled)!important}.ttdk-radio-wrapper[data-disabled=true] .ttdk-radio-label,.ttdk-radio-root[data-disabled=true] .ttdk-radio-label,.ttdk-radio-wrapper[data-disabled=true] .ttdk-radio-desc,.ttdk-radio-root[data-disabled=true] .ttdk-radio-desc{color:var(--ttdk-radio-text-disabled)!important}.ttdk-radio-wrapper[data-error=true] .ttdk-radio-control,.ttdk-radio-root[data-error=true] .ttdk-radio-control,.ttdk-radio-wrapper[data-error=true]:not([data-disabled=true]) .ttdk-radio-control:hover,.ttdk-radio-root[data-error=true]:not([data-disabled=true]) .ttdk-radio-control:hover{border-color:var(--ttdk-radio-text-error)}.ttdk-radio-wrapper[data-error=true] .ttdk-radio-native:focus-visible+.ttdk-radio-control,.ttdk-radio-wrapper[data-error=true] .ttdk-radio-input:focus-visible+.ttdk-radio-control,.ttdk-radio-root[data-error=true] .ttdk-radio-native:focus-visible+.ttdk-radio-control,.ttdk-radio-root[data-error=true] .ttdk-radio-input:focus-visible+.ttdk-radio-control{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-radio-danger) 25%, transparent)}.ttdk-radio-wrapper[data-error=true] .ttdk-radio-label,.ttdk-radio-root[data-error=true] .ttdk-radio-label{color:var(--ttdk-radio-text-error)}.ttdk-radio-label-wrapper{pointer-events:auto;flex-direction:column;gap:2px;display:flex}.ttdk-radio-label{color:var(--ttdk-ui-color,var(--ttdk-radio-text-title));letter-spacing:.5px;cursor:pointer;pointer-events:auto;font-size:14px;font-weight:600;line-height:1.25;transition:color .15s}.ttdk-radio-desc,.ttdk-radio-helper-text{color:var(--ttdk-ui-color,var(--ttdk-radio-text-subtitle));letter-spacing:.25px;cursor:default;pointer-events:auto;font-size:14px;font-weight:400;line-height:1.5;transition:color .15s}.ttdk-radio-error-msg{color:var(--ttdk-radio-text-error);cursor:default;pointer-events:auto;margin-top:2px;font-size:12px;font-weight:500;line-height:1.4}.ttdk-radio-wrapper[data-size=sm] .ttdk-radio-control,.ttdk-radio-root[data-size=sm] .ttdk-radio-control{width:16px;height:16px}.ttdk-radio-wrapper[data-size=sm] .ttdk-radio-dot,.ttdk-radio-root[data-size=sm] .ttdk-radio-dot{width:6px;height:6px}.ttdk-radio-wrapper[data-size=sm] .ttdk-radio-label,.ttdk-radio-root[data-size=sm] .ttdk-radio-label{font-size:13px;line-height:1.25}.ttdk-radio-wrapper[data-size=sm] .ttdk-radio-desc,.ttdk-radio-root[data-size=sm] .ttdk-radio-desc{font-size:12px;line-height:1.4}.ttdk-radio-wrapper[data-size=md] .ttdk-radio-control,.ttdk-radio-root[data-size=md] .ttdk-radio-control{width:18px;height:18px}.ttdk-radio-wrapper[data-size=md] .ttdk-radio-dot,.ttdk-radio-root[data-size=md] .ttdk-radio-dot{width:8px;height:8px}.ttdk-radio-wrapper[data-size=md] .ttdk-radio-label,.ttdk-radio-root[data-size=md] .ttdk-radio-label{letter-spacing:.5px;font-size:14px;font-weight:600;line-height:1.25}.ttdk-radio-wrapper[data-size=md] .ttdk-radio-desc,.ttdk-radio-root[data-size=md] .ttdk-radio-desc{letter-spacing:.25px;font-size:14px;font-weight:400;line-height:1.5}.ttdk-radio-wrapper[data-size=lg] .ttdk-radio-control,.ttdk-radio-root[data-size=lg] .ttdk-radio-control{width:22px;height:22px}.ttdk-radio-wrapper[data-size=lg][data-has-description=true] .ttdk-radio-control,.ttdk-radio-root[data-size=lg][data-has-description=true] .ttdk-radio-control{margin-top:2px}.ttdk-radio-wrapper[data-size=lg] .ttdk-radio-dot,.ttdk-radio-root[data-size=lg] .ttdk-radio-dot{width:10px;height:10px}.ttdk-radio-wrapper[data-size=lg] .ttdk-radio-label,.ttdk-radio-root[data-size=lg] .ttdk-radio-label{font-size:16px;line-height:1.3}.ttdk-radio-wrapper[data-size=lg] .ttdk-radio-desc,.ttdk-radio-root[data-size=lg] .ttdk-radio-desc{font-size:15px;line-height:1.5}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-background]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-background]:hover{background:var(--ttdk-ui-hover-background)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-color]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-color]:hover,.ttdk-radio-wrapper[style*=--ttdk-ui-hover-color]:hover .ttdk-radio-label,.ttdk-radio-root[style*=--ttdk-ui-hover-color]:hover .ttdk-radio-label{color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-color]:hover .ttdk-radio-control,.ttdk-radio-root[style*=--ttdk-ui-hover-color]:hover .ttdk-radio-control{border-color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-border-color]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-border-color]:hover{border-color:var(--ttdk-ui-hover-border-color)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-border\:]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-border\:]:hover{border:var(--ttdk-ui-hover-border)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-box-shadow]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-box-shadow]:hover{box-shadow:var(--ttdk-ui-hover-box-shadow)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-opacity]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-opacity]:hover{opacity:var(--ttdk-ui-hover-opacity)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-hover-transform]:hover,.ttdk-radio-root[style*=--ttdk-ui-hover-transform]:hover{transform:var(--ttdk-ui-hover-transform)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-active-background]:active,.ttdk-radio-root[style*=--ttdk-ui-active-background]:active{background:var(--ttdk-ui-active-background)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-active-color]:active,.ttdk-radio-root[style*=--ttdk-ui-active-color]:active{color:var(--ttdk-ui-active-color)!important}.ttdk-radio-wrapper[style*=--ttdk-ui-active-opacity]:active,.ttdk-radio-root[style*=--ttdk-ui-active-opacity]:active{opacity:var(--ttdk-ui-active-opacity)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-background]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-background],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-background]{background:var(--ttdk-ui-hover-background)!important;background-color:var(--ttdk-ui-hover-background)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-border-color]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-border-color],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-border-color]{border-color:var(--ttdk-ui-hover-border-color)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-border\:]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-border\:],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-border\:]{border:var(--ttdk-ui-hover-border)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-box-shadow]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-box-shadow],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-box-shadow]{box-shadow:var(--ttdk-ui-hover-box-shadow)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-opacity]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-opacity],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-opacity]{opacity:var(--ttdk-ui-hover-opacity)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-transform]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-transform],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-transform]{transform:var(--ttdk-ui-hover-transform)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-color]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-color],.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-color]{color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-control[style*=--ttdk-ui-hover-color]:hover .ttdk-radio-dot,.ttdk-radio-wrapper:hover .ttdk-radio-control[style*=--ttdk-ui-hover-color] .ttdk-radio-dot,.ttdk-radio-root:hover .ttdk-radio-control[style*=--ttdk-ui-hover-color] .ttdk-radio-dot{background-color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-control:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-background],.ttdk-radio-wrapper:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-background],.ttdk-radio-root:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-background]{background-color:var(--ttdk-ui-hover-background)!important}.ttdk-radio-control:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-color],.ttdk-radio-wrapper:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-color],.ttdk-radio-root:hover .ttdk-radio-dot[style*=--ttdk-ui-hover-color]{background-color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-label[style*=--ttdk-ui-hover-color]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-label[style*=--ttdk-ui-hover-color],.ttdk-radio-root:hover .ttdk-radio-label[style*=--ttdk-ui-hover-color]{color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-label[style*=--ttdk-ui-hover-opacity]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-label[style*=--ttdk-ui-hover-opacity],.ttdk-radio-root:hover .ttdk-radio-label[style*=--ttdk-ui-hover-opacity]{opacity:var(--ttdk-ui-hover-opacity)!important}.ttdk-radio-label[style*=--ttdk-ui-active-color]:active,.ttdk-radio-wrapper:active .ttdk-radio-label[style*=--ttdk-ui-active-color],.ttdk-radio-root:active .ttdk-radio-label[style*=--ttdk-ui-active-color]{color:var(--ttdk-ui-active-color)!important}.ttdk-radio-desc[style*=--ttdk-ui-hover-color],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-color]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-desc[style*=--ttdk-ui-hover-color],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-color],.ttdk-radio-root:hover .ttdk-radio-desc[style*=--ttdk-ui-hover-color],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-color]{color:var(--ttdk-ui-hover-color)!important}.ttdk-radio-desc[style*=--ttdk-ui-hover-opacity],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-opacity]:hover,.ttdk-radio-wrapper:hover .ttdk-radio-desc[style*=--ttdk-ui-hover-opacity],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-opacity],.ttdk-radio-root:hover .ttdk-radio-desc[style*=--ttdk-ui-hover-opacity],.ttdk-radio-helper-text[style*=--ttdk-ui-hover-opacity]{opacity:var(--ttdk-ui-hover-opacity)!important}