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

package/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ * TTDK Design System — Root Package Entry (REACT)
+ * Modular v3 subpaths:
+ * - @ttdk-design-system/library-react/web
+ * - @ttdk-design-system/library-react/webview
+ * - @ttdk-design-system/library-react/core
+ */
+
+export * from './core';
+export * from './web';
+export * as web from './web';
+export * as webview from './webview';
+export * as core from './core';
+
+// Backward-compatibility direct exports
+export * from './types';
+export { default as tailwindPreset, ttdkTailwindPreset } from './core/tailwind-preset';

package/src/tailwind-preset.cjs

@@ -0,0 +1,62 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset (CommonJS)
+ */
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        "0": "var(--ttdk-spacing-0, 0px)",
+        "2": "var(--ttdk-spacing-2, 2px)",
+        "4": "var(--ttdk-spacing-4, 4px)",
+        "6": "var(--ttdk-spacing-6, 6px)",
+        "8": "var(--ttdk-spacing-8, 8px)",
+        "12": "var(--ttdk-spacing-12, 12px)",
+        "16": "var(--ttdk-spacing-16, 16px)",
+        "20": "var(--ttdk-spacing-20, 20px)",
+        "24": "var(--ttdk-spacing-24, 24px)",
+        "32": "var(--ttdk-spacing-32, 32px)",
+        "48": "var(--ttdk-spacing-48, 48px)",
+        "64": "var(--ttdk-spacing-64, 64px)",
+        "96": "var(--ttdk-spacing-96, 96px)",
+      },
+      boxShadow: {
+        "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+        "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+      },
+      maxWidth: {
+        "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+        "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+      },
+      colors: {
+        ttdk: {
+          primary: {
+            DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+            hover: "var(--ttdk-brand-strong, #128f8a)",
+            subtle: "var(--ttdk-brand-subtle, #b8edea)",
+          },
+          accent: {
+            DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+            hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+          },
+          surface: {
+            DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+            subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+            dark: "var(--ttdk-color-neutral-black, #141313)",
+          },
+          border: {
+            DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+            dark: "var(--ttdk-stroke-subtle, #313336)",
+          },
+        },
+      },
+      fontFamily: {
+        sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+      },
+    },
+  },
+};

package/src/tailwind-preset.ts

@@ -0,0 +1,85 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset
+ * 
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
+ * to standard Tailwind CSS theme configuration.
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ * ```js
+ * module.exports = {
+ *   presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
+ *   content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
+ * }
+ * ```
+ */
+
+export const ttdkTailwindPreset = {
+  theme: {
+    extend: {
+      // 1. Spacing Scale TTDK (0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96)
+      spacing: {
+        "0": "var(--ttdk-spacing-0, 0px)",
+        "2": "var(--ttdk-spacing-2, 2px)",
+        "4": "var(--ttdk-spacing-4, 4px)",
+        "6": "var(--ttdk-spacing-6, 6px)",
+        "8": "var(--ttdk-spacing-8, 8px)",
+        "12": "var(--ttdk-spacing-12, 12px)",
+        "16": "var(--ttdk-spacing-16, 16px)",
+        "20": "var(--ttdk-spacing-20, 20px)",
+        "24": "var(--ttdk-spacing-24, 24px)",
+        "32": "var(--ttdk-spacing-32, 32px)",
+        "48": "var(--ttdk-spacing-48, 48px)",
+        "64": "var(--ttdk-spacing-64, 64px)",
+        "96": "var(--ttdk-spacing-96, 96px)",
+      },
+
+      // 2. Shadows & Elevation TTDK
+      boxShadow: {
+        "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+        "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+      },
+
+      // 3. Responsive Container Widths
+      maxWidth: {
+        "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+        "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+      },
+
+      // 4. Semantic & Brand Colors
+      colors: {
+        ttdk: {
+          primary: {
+            DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+            hover: "var(--ttdk-brand-strong, #128f8a)",
+            subtle: "var(--ttdk-brand-subtle, #b8edea)",
+          },
+          accent: {
+            DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+            hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+          },
+          surface: {
+            DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+            subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+            dark: "var(--ttdk-color-neutral-black, #141313)",
+          },
+          border: {
+            DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+            dark: "var(--ttdk-stroke-subtle, #313336)",
+          },
+        },
+      },
+
+      // 5. Typography
+      fontFamily: {
+        sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+      },
+    },
+  },
+};
+
+export default ttdkTailwindPreset;

package/src/types.ts

@@ -0,0 +1 @@
+export * from "./core/types";

package/src/web/accordion/AI_GUIDE.md

@@ -0,0 +1,149 @@
+# <Accordion /> — TTDK Component Reference
+
+Komponen Accordion untuk menyusun informasi berlapis yang dapat dibuka-tutup (collapse/expand) dengan dukungan multiple open, berbagai varian visual (default, bordered, separated, ghost), serta animasi transisi grid CSS yang sangat halus.
+
+## 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/accordion/accordion.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Accordion from "@ttdk-design-system/library-react/web/accordion";
+
+// Vue 3
+import Accordion from "@ttdk-design-system/library-vue/web/accordion";
+
+// Svelte
+import Accordion from "@ttdk-design-system/library-svelte/web/accordion";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `AccordionItem[]` | `-` | Daftar item accordion yang akan dirender. |
+| `value?` | `string | string[]` | `-` | Nilai item yang sedang terbuka (controlled value). Bisa berupa string tunggal atau array string jika multiple={true}. |
+| `defaultValue?` | `string | string[]` | `-` | Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value). |
+| `multiple?` | `boolean` | `false` | Mengizinkan lebih dari satu item terbuka secara bersamaan. |
+| `collapsible?` | `boolean` | `true` | Mengizinkan item yang terbuka untuk ditutup kembali saat diklik. |
+| `variant?` | `'default' | 'bordered' | 'separated' | 'ghost'` | `default` | Varian tampilan visual accordion: - `'default'`: Garis pembatas (divider) minimalis antar-item. - `'bordered'`: Pembungkus border luar dengan sudut melengkung. - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap). - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran proporsional accordion (padding, font, icon): - `'sm'`: Kompak (13px font, padding rapat). - `'md'`: Standar (14px font, padding normal). - `'lg'`: Besar (16px font, padding lapang). |
+| `iconPosition?` | `'left' | 'right'` | `right` | Posisi indikator ikon panah / chevron: - `'right'`: Di ujung kanan (standar desain). - `'left'`: Di sebelah kiri sebelum judul. |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'): - `'none'`: Sudut 0px. - `'sm'`: Sudut 6px. - `'md'`: Sudut 10px. - `'lg'`: Sudut 14px. - `'full'`: Sudut 20px. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan seluruh interaksi accordion. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root container (UiProps). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `className?` | `string` | `-` | Class CSS kustom untuk root accordion. |
+| `itemStyle?` | `UiProps` | `-` | Style kustom untuk tiap elemen item accordion (UiProps). |
+| `itemClass?` | `string` | `-` | Class CSS kustom untuk tiap elemen item accordion. |
+| `triggerStyle?` | `UiProps` | `-` | Style kustom untuk tombol trigger accordion (UiProps). |
+| `triggerClass?` | `string` | `-` | Class CSS kustom untuk tombol trigger accordion. |
+| `titleStyle?` | `UiProps` | `-` | Style kustom untuk teks judul trigger accordion (UiProps). |
+| `titleClass?` | `string` | `-` | Class CSS kustom untuk teks judul trigger accordion. |
+| `subtitleStyle?` | `UiProps` | `-` | Style kustom untuk teks subtitle trigger accordion (UiProps). |
+| `subtitleClass?` | `string` | `-` | Class CSS kustom untuk teks subtitle trigger accordion. |
+| `iconStyle?` | `UiProps` | `-` | Style kustom untuk indikator ikon panah / chevron (UiProps). |
+| `iconClass?` | `string` | `-` | Class CSS kustom untuk indikator ikon panah / chevron. |
+| `icon?` | `any` | `-` | Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk panel konten accordion (UiProps). Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk panel konten accordion. |
+| `onChange?` | `(value: any) => void` | `-` | Callback event saat status item yang terbuka berubah. Mengembalikan string atau array string sesuai mode `multiple`. |
+| `children?` | `any` | `-` | Konten anak atau slot kustom. |
+
+### Sub-interface: `AccordionItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | `-` | Nilai identifikasi unik untuk item accordion. |
+| `title` | `string` | `-` | Judul teks yang ditampilkan pada header trigger accordion. |
+| `subtitle?` | `string` | `-` | Subtitle atau deskripsi singkat sekunder di bawah judul. |
+| `content?` | `any` | `-` | Konten isi panel yang terbuka saat accordion di-expand. |
+| `icon?` | `any` | `-` | Ikon atau elemen visual opsional di samping judul. |
+| `badge?` | `string | number` | `-` | Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib'). |
+| `customIcon?` | `any` | `-` | Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan item ini dari interaksi buka/tutup. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Accordion from "@ttdk-design-system/library-react/web/accordion";
+import "@ttdk-design-system/library-react/web/accordion/accordion.css";
+
+export function Example() {
+  const items = [
+    {
+      value: "fhir",
+      title: "Standarisasi FHIR R4",
+      subtitle: "Pedoman interoperabilitas data klinis",
+      content: "Format data rekam medis terintegrasi mengikuti spesifikasi HL7 FHIR R4 Kementerian Kesehatan.",
+      badge: "Wajib"
+    },
+    {
+      value: "oauth",
+      title: "Autentikasi OAuth2 SATUSEHAT",
+      subtitle: "Kunci API dan token akses faskes",
+      content: "Setiap permintaan API wajib menyertakan Bearer token dari portal pengembang SATUSEHAT."
+    }
+  ];
+
+  return (
+    <Accordion items={items} defaultValue="fhir" variant="bordered" />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Accordion from "@ttdk-design-system/library-vue/web/accordion";
+import "@ttdk-design-system/library-vue/web/accordion/accordion.css";
+
+const items = [
+  {
+    value: "fhir",
+    title: "Standarisasi FHIR R4",
+    subtitle: "Pedoman interoperabilitas data klinis",
+    content: "Format data rekam medis terintegrasi mengikuti spesifikasi HL7 FHIR R4 Kementerian Kesehatan.",
+    badge: "Wajib"
+  },
+  {
+    value: "oauth",
+    title: "Autentikasi OAuth2 SATUSEHAT",
+    subtitle: "Kunci API dan token akses faskes",
+    content: "Setiap permintaan API wajib menyertakan Bearer token dari portal pengembang SATUSEHAT."
+  }
+];
+</script>
+
+<template>
+  <Accordion :items="items" default-value="fhir" variant="bordered" />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Accordion from "@ttdk-design-system/library-svelte/web/accordion";
+  import "@ttdk-design-system/library-svelte/web/accordion/accordion.css";
+
+  const items = [
+    {
+      value: "fhir",
+      title: "Standarisasi FHIR R4",
+      subtitle: "Pedoman interoperabilitas data klinis",
+      content: "Format data rekam medis terintegrasi mengikuti spesifikasi HL7 FHIR R4 Kementerian Kesehatan.",
+      badge: "Wajib"
+    },
+    {
+      value: "oauth",
+      title: "Autentikasi OAuth2 SATUSEHAT",
+      subtitle: "Kunci API dan token akses faskes",
+      content: "Setiap permintaan API wajib menyertakan Bearer token dari portal pengembang SATUSEHAT."
+    }
+  ];
+</script>
+
+<Accordion {items} defaultValue="fhir" variant="bordered" />
+```

package/src/web/accordion/accordion.css

@@ -0,0 +1 @@
+.ttdk-accordion{box-sizing:border-box;width:100%;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#232323));flex-direction:column;font-family:inherit;display:flex}.ttdk-accordion *,.ttdk-accordion :before,.ttdk-accordion :after{box-sizing:border-box}.ttdk-accordion[data-disabled=true]{pointer-events:none;opacity:.55}.ttdk-accordion-item{width:100%;transition:border-color .2s,background-color .2s,box-shadow .2s}.ttdk-accordion-item[data-disabled=true]{pointer-events:none;opacity:.5}.ttdk-accordion-header{font-size:inherit;font-weight:inherit;line-height:inherit;width:100%;margin:0;padding:0;display:flex}.ttdk-accordion-trigger{all:unset;cursor:pointer;box-sizing:border-box;user-select:none;width:100%;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#141313));text-align:left;border-radius:inherit;justify-content:space-between;align-items:center;font-family:inherit;font-weight:600;transition:background-color .15s,color .15s;display:flex}.ttdk-accordion-trigger:disabled,.ttdk-accordion-trigger[data-disabled=true]{cursor:not-allowed}.ttdk-accordion-trigger:focus-visible{outline:2px solid var(--ttdk-stroke-border-focus,#128f8a);outline-offset:-2px}.ttdk-accordion-label-group{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ttdk-accordion-title{color:inherit;font-weight:600;font-size:inherit;line-height:inherit;transition:color .15s}.ttdk-accordion-trigger:hover{color:var(--ttdk-brand-default,#128f8a)}.ttdk-accordion-subtitle{color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary,#7b828a));font-size:.8125rem;font-weight:400;line-height:1.4}.ttdk-accordion-leading-icon{margin-right:var(--ttdk-spacing-12,12px);color:var(--ttdk-brand-default,#128f8a);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-accordion-badge{border-radius:var(--ttdk-radius-full,9999px);background-color:var(--ttdk-brand-subtle,#e1fbfa);color:var(--ttdk-color-brand-green-700,#0d6b67);white-space:nowrap;margin-left:auto;margin-right:var(--ttdk-spacing-12,12px);flex-shrink:0;justify-content:center;align-items:center;padding:2px 8px;font-size:.75rem;font-weight:500;line-height:1;display:inline-flex}.ttdk-accordion-arrow{color:var(--ttdk-color-neutral-400,#969ba2);flex-shrink:0;justify-content:center;align-items:center;transition:transform .25s cubic-bezier(.4,0,.2,1),color .2s;display:inline-flex}.ttdk-accordion-arrow-icon,.ttdk-accordion-icon{stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;display:block}.ttdk-accordion-arrow[data-state=open]{color:var(--ttdk-brand-default,#128f8a);transform:rotate(180deg)}.ttdk-accordion[data-icon-position=left] .ttdk-accordion-trigger{justify-content:flex-start}.ttdk-accordion-arrow-left{margin-right:var(--ttdk-spacing-12,12px)}.ttdk-accordion[data-icon-position=left] .ttdk-accordion-badge{margin-right:0}.ttdk-accordion-panel{grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1);display:grid;overflow:hidden}.ttdk-accordion-panel[data-state=open]{visibility:visible;grid-template-rows:1fr}.ttdk-accordion-panel[data-state=closed]{visibility:hidden;grid-template-rows:0fr}.ttdk-accordion-panel[data-state=closed]>.ttdk-accordion-content{visibility:hidden;padding-top:0!important;padding-bottom:0!important}.ttdk-accordion-content{min-height:0;color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary,#62686f));line-height:1.6;transition:padding .24s cubic-bezier(.4,0,.2,1);overflow:hidden}.ttdk-accordion[data-variant=default] .ttdk-accordion-item{border-bottom:1px solid var(--ttdk-stroke-divider,#cacccf)}.ttdk-accordion[data-variant=default] .ttdk-accordion-item:last-child{border-bottom:none}.ttdk-accordion[data-variant=bordered]{border:1px solid var(--ttdk-stroke-subtle,#e4e5e7);background-color:var(--ttdk-bg-card,#fff);overflow:hidden}.ttdk-accordion[data-variant=bordered] .ttdk-accordion-item{border-bottom:1px solid var(--ttdk-stroke-subtle,#e4e5e7)}.ttdk-accordion[data-variant=bordered] .ttdk-accordion-item:last-child{border-bottom:none}.ttdk-accordion[data-variant=bordered] .ttdk-accordion-trigger:hover{background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3)}.ttdk-accordion[data-variant=bordered] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger{background-color:var(--ttdk-bg-status-info-subtle,#ebf3ff)}.ttdk-accordion[data-variant=separated]{gap:var(--ttdk-spacing-8,8px)}.ttdk-accordion[data-variant=separated] .ttdk-accordion-item{border:1px solid var(--ttdk-stroke-subtle,#e4e5e7);background-color:var(--ttdk-bg-card,#fff);overflow:hidden;box-shadow:0 1px 3px #1413130a}.ttdk-accordion[data-variant=separated] .ttdk-accordion-item:hover{border-color:var(--ttdk-color-neutral-300,#b1b5b9)}.ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]{border-color:var(--ttdk-stroke-border-focus,#128f8a);box-shadow:0 4px 12px #128f8a14}.ttdk-accordion[data-variant=separated] .ttdk-accordion-trigger:hover{background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3)}.ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger{background-color:var(--ttdk-brand-subtle,#e1fbfa)}.ttdk-accordion[data-variant=ghost] .ttdk-accordion-item{border:none}.ttdk-accordion[data-variant=ghost] .ttdk-accordion-trigger{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-accordion[data-variant=ghost] .ttdk-accordion-trigger:hover{background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3)}.ttdk-accordion[data-variant=ghost] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger{background-color:var(--ttdk-brand-subtle,#e1fbfa)}.ttdk-accordion[data-size=sm] .ttdk-accordion-trigger{padding:8px 12px;font-size:.8125rem}.ttdk-accordion[data-size=sm] .ttdk-accordion-arrow{width:14px;height:14px}.ttdk-accordion[data-size=sm] .ttdk-accordion-leading-icon{width:16px;height:16px}.ttdk-accordion[data-size=sm] .ttdk-accordion-content{padding:8px 12px 12px;font-size:.8125rem}.ttdk-accordion[data-size=md] .ttdk-accordion-trigger{padding:14px 16px;font-size:.875rem}.ttdk-accordion[data-size=md] .ttdk-accordion-arrow,.ttdk-accordion[data-size=md] .ttdk-accordion-leading-icon{width:18px;height:18px}.ttdk-accordion[data-size=md] .ttdk-accordion-content{padding:12px 16px 16px;font-size:.875rem}.ttdk-accordion[data-size=lg] .ttdk-accordion-trigger{padding:18px 20px;font-size:1rem}.ttdk-accordion[data-size=lg] .ttdk-accordion-arrow{width:20px;height:20px}.ttdk-accordion[data-size=lg] .ttdk-accordion-leading-icon{width:22px;height:22px}.ttdk-accordion[data-size=lg] .ttdk-accordion-content{padding:16px 20px 20px;font-size:.9375rem}.ttdk-accordion[data-variant=default],.ttdk-accordion[data-variant=default] .ttdk-accordion-item,.ttdk-accordion[data-variant=bordered] .ttdk-accordion-item{border-radius:0}.ttdk-accordion[data-variant=bordered][data-rounded=none],.ttdk-accordion[data-variant=separated][data-rounded=none] .ttdk-accordion-item{border-radius:var(--ttdk-radius-none,0px)}.ttdk-accordion[data-variant=bordered][data-rounded=sm],.ttdk-accordion[data-variant=separated][data-rounded=sm] .ttdk-accordion-item{border-radius:var(--ttdk-radius-xs,6px)}.ttdk-accordion[data-variant=bordered][data-rounded=md],.ttdk-accordion[data-variant=separated][data-rounded=md] .ttdk-accordion-item{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-accordion[data-variant=bordered][data-rounded=lg],.ttdk-accordion[data-variant=separated][data-rounded=lg] .ttdk-accordion-item{border-radius:var(--ttdk-radius-md,12px)}.ttdk-accordion[data-variant=bordered][data-rounded=full],.ttdk-accordion[data-variant=separated][data-rounded=full] .ttdk-accordion-item{border-radius:var(--ttdk-radius-xl,20px)}.dark .ttdk-accordion,:root.dark .ttdk-accordion,[data-theme=dark] .ttdk-accordion{color:var(--ttdk-text-icon-primary,#cacccf)}.dark .ttdk-accordion-trigger,:root.dark .ttdk-accordion-trigger,[data-theme=dark] .ttdk-accordion-trigger{color:var(--ttdk-text-icon-primary,#fff)}.dark .ttdk-accordion-trigger:hover,:root.dark .ttdk-accordion-trigger:hover,[data-theme=dark] .ttdk-accordion-trigger:hover{color:var(--ttdk-color-brand-green-300,#48d5ce)}.dark .ttdk-accordion .ttdk-accordion-subtitle,:root.dark .ttdk-accordion .ttdk-accordion-subtitle,[data-theme=dark] .ttdk-accordion .ttdk-accordion-subtitle{color:var(--ttdk-text-icon-secondary,#969ba2)}.dark .ttdk-accordion .ttdk-accordion-content,:root.dark .ttdk-accordion .ttdk-accordion-content,[data-theme=dark] .ttdk-accordion .ttdk-accordion-content{color:var(--ttdk-text-icon-secondary,#cacccf)}.dark .ttdk-accordion .ttdk-accordion-arrow,:root.dark .ttdk-accordion .ttdk-accordion-arrow,[data-theme=dark] .ttdk-accordion .ttdk-accordion-arrow{color:var(--ttdk-color-neutral-400,#969ba2)}.dark .ttdk-accordion .ttdk-accordion-arrow[data-state=open],:root.dark .ttdk-accordion .ttdk-accordion-arrow[data-state=open],[data-theme=dark] .ttdk-accordion .ttdk-accordion-arrow[data-state=open]{color:var(--ttdk-color-brand-green-300,#48d5ce)}.dark .ttdk-accordion .ttdk-accordion-badge,:root.dark .ttdk-accordion .ttdk-accordion-badge,[data-theme=dark] .ttdk-accordion .ttdk-accordion-badge{color:var(--ttdk-color-brand-green-200,#80dcd8);background-color:#128f8a33}.dark .ttdk-accordion[data-variant=default] .ttdk-accordion-item,:root.dark .ttdk-accordion[data-variant=default] .ttdk-accordion-item,[data-theme=dark] .ttdk-accordion[data-variant=default] .ttdk-accordion-item{border-bottom-color:var(--ttdk-stroke-divider,#4a4f53)}.dark .ttdk-accordion[data-variant=bordered],:root.dark .ttdk-accordion[data-variant=bordered],[data-theme=dark] .ttdk-accordion[data-variant=bordered]{border-color:var(--ttdk-stroke-subtle,#313336);background-color:var(--ttdk-bg-card,#232323)}.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item,:root.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item,[data-theme=dark] .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item{border-bottom-color:var(--ttdk-stroke-divider,#313336)}.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-trigger:hover,:root.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-trigger:hover,[data-theme=dark] .ttdk-accordion[data-variant=bordered] .ttdk-accordion-trigger:hover{background-color:#ffffff0a}.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger,:root.dark .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger,[data-theme=dark] .ttdk-accordion[data-variant=bordered] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger{background-color:#128f8a1f}.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item,:root.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item,[data-theme=dark] .ttdk-accordion[data-variant=separated] .ttdk-accordion-item{border-color:var(--ttdk-stroke-subtle,#313336);background-color:var(--ttdk-bg-card,#232323);box-shadow:0 1px 3px #0000004d}.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item:hover,:root.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item:hover,[data-theme=dark] .ttdk-accordion[data-variant=separated] .ttdk-accordion-item:hover{border-color:var(--ttdk-color-neutral-600,#62686f)}.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open],:root.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open],[data-theme=dark] .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]{border-color:var(--ttdk-brand-default,#16b3ac);box-shadow:0 4px 16px #128f8a29}.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-trigger:hover,:root.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-trigger:hover,[data-theme=dark] .ttdk-accordion[data-variant=separated] .ttdk-accordion-trigger:hover{background-color:#ffffff0a}.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger,:root.dark .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger,[data-theme=dark] .ttdk-accordion[data-variant=separated] .ttdk-accordion-item[data-state=open]>.ttdk-accordion-header>.ttdk-accordion-trigger{background-color:#128f8a1f}.dark .ttdk-accordion[data-variant=ghost] .ttdk-accordion-trigger:hover,:root.dark .ttdk-accordion[data-variant=ghost] .ttdk-accordion-trigger:hover,[data-theme=dark] .ttdk-accordion[data-variant=ghost] .ttdk-accordion-trigger:hover{background-color:#ffffff0d}