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

package/src/web/calendar/index.ts

@@ -0,0 +1,3 @@
+export { default } from './calendar';
+export { default as Calendar } from './calendar';
+export * from './calendar'

package/src/web/calendar/manifest.json

@@ -0,0 +1,470 @@
+{
+  "name": "@ttdk-design-system/calendar",
+  "component": "Calendar",
+  "folder": "calendar",
+  "description": "TTDK Calendar component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "calendar.css",
+      "importPath": "web/calendar/calendar.css"
+    }
+  ],
+  "props": {
+    "value": {
+      "name": "value",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai tanggal terpilih pada mode controlled. - Single: string ('YYYY-MM-DD') atau Date - Range: { start: string | Date | null, end: string | Date | null } - Multiple: string[] atau Date[]",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai awal tanggal terpilih pada mode uncontrolled.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Atribut ID unik untuk elemen root kalender.",
+      "example": null,
+      "param": null
+    },
+    "range": {
+      "name": "range",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengaktifkan mode pemilihan rentang tanggal (start date - end date).",
+      "example": null,
+      "param": null
+    },
+    "multiple": {
+      "name": "multiple",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengaktifkan mode pemilihan banyak tanggal sekaligus.",
+      "example": null,
+      "param": null
+    },
+    "min": {
+      "name": "min",
+      "type": "string | Date",
+      "optional": true,
+      "default": null,
+      "description": "Batas tanggal paling awal yang dapat dipilih.",
+      "example": null,
+      "param": null
+    },
+    "minValue": {
+      "name": "minValue",
+      "type": "string | Date",
+      "optional": true,
+      "default": null,
+      "description": "Alias untuk min (kompatibel Nuxt UI: min-value).",
+      "example": null,
+      "param": null
+    },
+    "max": {
+      "name": "max",
+      "type": "string | Date",
+      "optional": true,
+      "default": null,
+      "description": "Batas tanggal paling akhir yang dapat dipilih.",
+      "example": null,
+      "param": null
+    },
+    "maxValue": {
+      "name": "maxValue",
+      "type": "string | Date",
+      "optional": true,
+      "default": null,
+      "description": "Alias untuk max (kompatibel Nuxt UI: max-value).",
+      "example": null,
+      "param": null
+    },
+    "isDateDisabled": {
+      "name": "isDateDisabled",
+      "type": "(date: Date) => boolean",
+      "optional": true,
+      "default": null,
+      "description": "Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan).",
+      "example": null,
+      "param": null
+    },
+    "isDateUnavailable": {
+      "name": "isDateUnavailable",
+      "type": "(date: Date) => boolean",
+      "optional": true,
+      "default": null,
+      "description": "Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough).",
+      "example": null,
+      "param": null
+    },
+    "numberOfMonths": {
+      "name": "numberOfMonths",
+      "type": "number",
+      "optional": true,
+      "default": "1",
+      "description": "Jumlah bulan yang ditampilkan secara berdampingan.",
+      "example": null,
+      "param": null
+    },
+    "weekStartsOn": {
+      "name": "weekStartsOn",
+      "type": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+      "optional": true,
+      "default": "1",
+      "description": "Hari awal dalam seminggu: - 0 = Minggu (Sunday) - 1 = Senin (Monday)",
+      "example": null,
+      "param": null
+    },
+    "locale": {
+      "name": "locale",
+      "type": "string",
+      "optional": true,
+      "default": "id-ID",
+      "description": "Kode lokal bahasa kalender (misal: 'id-ID', 'en-US').",
+      "example": null,
+      "param": null
+    },
+    "month": {
+      "name": "month",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled.",
+      "example": null,
+      "param": null
+    },
+    "year": {
+      "name": "year",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled.",
+      "example": null,
+      "param": null
+    },
+    "defaultMonth": {
+      "name": "defaultMonth",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Bulan awal yang sedang ditampilkan (1 - 12).",
+      "example": null,
+      "param": null
+    },
+    "defaultYear": {
+      "name": "defaultYear",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Tahun awal yang sedang ditampilkan.",
+      "example": null,
+      "param": null
+    },
+    "yearControls": {
+      "name": "yearControls",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan tombol navigasi lompat tahun (<< dan >>).",
+      "example": null,
+      "param": null
+    },
+    "showOutsideDays": {
+      "name": "showOutsideDays",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days).",
+      "example": null,
+      "param": null
+    },
+    "fixedWeeks": {
+      "name": "fixedWeeks",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan.",
+      "example": null,
+      "param": null
+    },
+    "dateMarkers": {
+      "name": "dateMarkers",
+      "type": "DateMarker[]",
+      "optional": true,
+      "default": null,
+      "description": "Daftar penanda agenda / jadwal faskes pada tanggal tertentu.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Radius sudut kelengkungan container kalender.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'default' | 'bordered' | 'card' | 'flat'",
+      "optional": true,
+      "default": "bordered",
+      "description": "Varian visual tampilan kalender: - 'default': Bersih dengan background putih/gelap. - 'bordered': Dengan bingkai border solid luar. - 'card': Dengan elevasi bayangan halus kartu. - 'flat': Minimalis tanpa border dan tanpa shadow.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan seluruh kalender dari interaksi.",
+      "example": null,
+      "param": null
+    },
+    "readOnly": {
+      "name": "readOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode hanya-baca (read-only).",
+      "example": null,
+      "param": null
+    },
+    "onValueChange": {
+      "name": "onValueChange",
+      "type": "(value: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat nilai tanggal berubah.",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event native saat nilai berubah.",
+      "example": null,
+      "param": null
+    },
+    "onMonthChange": {
+      "name": "onMonthChange",
+      "type": "(month: number, year: number) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat navigasi bulan atau tahun berubah.",
+      "example": null,
+      "param": null
+    },
+    "onYearChange": {
+      "name": "onYearChange",
+      "type": "(month: number, year: number) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tahun tampilan kalender berubah.",
+      "example": null,
+      "param": null
+    },
+    "defaultViewMode": {
+      "name": "defaultViewMode",
+      "type": "'day' | 'month' | 'year'",
+      "optional": true,
+      "default": "day",
+      "description": "Mode tampilan awal kalender ('day', 'month', 'year').",
+      "example": null,
+      "param": null
+    },
+    "viewMode": {
+      "name": "viewMode",
+      "type": "'day' | 'month' | 'year'",
+      "optional": true,
+      "default": null,
+      "description": "Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled.",
+      "example": null,
+      "param": null
+    },
+    "onViewModeChange": {
+      "name": "onViewModeChange",
+      "type": "(mode: 'day' | 'month' | 'year') => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat mode tampilan kalender berubah ('day', 'month', 'year').",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk container utama.",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline style CSS kustom untuk container utama.",
+      "example": null,
+      "param": null
+    },
+    "headerClass": {
+      "name": "headerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk header kalender.",
+      "example": null,
+      "param": null
+    },
+    "headerStyle": {
+      "name": "headerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Inline style kustom untuk header kalender.",
+      "example": null,
+      "param": null
+    },
+    "navBtnClass": {
+      "name": "navBtnClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol navigasi.",
+      "example": null,
+      "param": null
+    },
+    "navBtnStyle": {
+      "name": "navBtnStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Inline style kustom untuk tombol navigasi.",
+      "example": null,
+      "param": null
+    },
+    "cellClass": {
+      "name": "cellClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk cell tanggal.",
+      "example": null,
+      "param": null
+    },
+    "cellStyle": {
+      "name": "cellStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Inline style kustom untuk cell tanggal.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular UiProps.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "DateRange": {
+      "start": {
+        "name": "start",
+        "type": "string | Date | null",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "end": {
+        "name": "end",
+        "type": "string | Date | null",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      }
+    },
+    "DateMarker": {
+      "date": {
+        "name": "date",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "color": {
+        "name": "color",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "tooltip": {
+        "name": "tooltip",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "dot": {
+        "name": "dot",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/card/AI_GUIDE.md

@@ -0,0 +1,133 @@
+# <Card /> — TTDK Component Reference
+
+TTDK Card 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/card/card.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Card from "@ttdk-design-system/library-react/web/card";
+
+// Vue 3
+import Card from "@ttdk-design-system/library-vue/web/card";
+
+// Svelte
+import Card from "@ttdk-design-system/library-svelte/web/card";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant?` | `'bordered' | 'elevated' | 'flat' | 'ghost'` | `default` | 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. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Kepadatan padding internal kartu. - 'sm': Padding kompak (12px / 16px). - 'md': Padding proporsional standar (20px / 24px). - 'lg': Padding lapang / hero (28px / 32px). |
+| `cardWidth?` | `'auto' | 'full' | '1-1' | '1-2' | '1-3' | '1-4' | 'mobile'` | `auto` | 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). |
+| `rounded?` | `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` | `md` | Sudut kelengkungan radius kartu. |
+| `hoverable?` | `boolean` | `false` | Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor). |
+| `clickable?` | `boolean` | `false` | Menjadikan kartu sebagai elemen interaktif yang dapat diklik. |
+| `loading?` | `boolean` | `false` | Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi kartu dan meredupkan opacity. |
+| `title?` | `any` | `-` | Judul kartu pada area header. |
+| `subtitle?` | `any` | `-` | Subjudul atau teks deskripsi singkat di bawah judul. |
+| `extra?` | `any` | `-` | Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi). |
+| `cover?` | `any` | `-` | Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom). |
+| `coverAlt?` | `string` | `-` | Alt text untuk gambar cover jika `cover` berupa URL string. |
+| `coverPosition?` | `'top' | 'bottom'` | `top` | Posisi media cover pada kartu ('top' atau 'bottom'). |
+| `actions?` | `any` | `-` | Grup tombol aksi terstruktur di area footer kartu. |
+| `footer?` | `any` | `-` | Konten kustom untuk area footer kartu. |
+| `headerBorder?` | `boolean` | `true` | Menampilkan garis pembatas divider di bawah header kartu. |
+| `footerBorder?` | `boolean` | `true` | Menampilkan garis pembatas divider di atas footer kartu. |
+| `onClick?` | `(event: any) => void` | `-` | Callback event saat kartu diklik. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer kartu (UiProps). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `className?` | `string` | `-` | Class CSS kustom untuk root kontainer kartu. |
+| `headerStyle?` | `UiProps` | `-` | Style kustom untuk area header kartu (UiProps). |
+| `headerClass?` | `string` | `-` | Class CSS kustom untuk area header kartu. |
+| `titleStyle?` | `UiProps` | `-` | Style kustom untuk teks judul kartu (UiProps). |
+| `titleClass?` | `string` | `-` | Class CSS kustom untuk teks judul kartu. |
+| `subtitleStyle?` | `UiProps` | `-` | Style kustom untuk teks subjudul / deskripsi header (UiProps). |
+| `subtitleClass?` | `string` | `-` | Class CSS kustom untuk teks subjudul / deskripsi header. |
+| `extraStyle?` | `UiProps` | `-` | Style kustom untuk elemen extra di sudut kanan header (UiProps). |
+| `extraClass?` | `string` | `-` | Class CSS kustom untuk elemen extra di sudut kanan header. |
+| `bodyStyle?` | `UiProps` | `-` | Style kustom untuk area body / konten utama kartu (UiProps). |
+| `bodyClass?` | `string` | `-` | Class CSS kustom untuk area body / konten utama kartu. |
+| `footerStyle?` | `UiProps` | `-` | Style kustom untuk area footer kartu (UiProps). |
+| `footerClass?` | `string` | `-` | Class CSS kustom untuk area footer kartu. |
+| `coverStyle?` | `UiProps` | `-` | Style kustom untuk area media cover kartu (UiProps). |
+| `coverClass?` | `string` | `-` | Class CSS kustom untuk area media cover kartu. |
+| `children?` | `any` | `-` | Konten anak atau slot kustom (children). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Card from "@ttdk-design-system/library-react/web/card";
+import "@ttdk-design-system/library-react/web/card/card.css";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  return (
+    <Card variant="bordered" hoverable size="md">
+      <h3 style={{ margin: '0 0 8px 0', fontSize: '18px', fontWeight: 600 }}>
+        Puskesmas Kecamatan Gambir
+      </h3>
+      <p style={{ margin: '0 0 16px 0', color: '#71717a', fontSize: '14px' }}>
+        Terdaftar di SATUSEHAT dengan status integrasi aktif dan 12 modul operasional.
+      </p>
+      <Button variant="outline" size="sm">
+        Lihat Rekam Medis
+      </Button>
+    </Card>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Card from "@ttdk-design-system/library-vue/web/card";
+import "@ttdk-design-system/library-vue/web/card/card.css";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/button/button.css";
+</script>
+
+<template>
+  <Card variant="bordered" :hoverable="true" size="md">
+    <h3 style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600;">
+      Puskesmas Kecamatan Gambir
+    </h3>
+    <p style="margin: 0 0 16px 0; color: #71717a; font-size: 14px;">
+      Terdaftar di SATUSEHAT dengan status integrasi aktif dan 12 modul operasional.
+    </p>
+    <Button variant="outline" size="sm">
+      Lihat Rekam Medis
+    </Button>
+  </Card>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Card from "@ttdk-design-system/library-svelte/web/card";
+  import "@ttdk-design-system/library-svelte/web/card/card.css";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+</script>
+
+<Card variant="bordered" hoverable={true} size="md">
+  <h3 style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600;">
+    Puskesmas Kecamatan Gambir
+  </h3>
+  <p style="margin: 0 0 16px 0; color: #71717a; font-size: 14px;">
+    Terdaftar di SATUSEHAT dengan status integrasi aktif dan 12 modul operasional.
+  </p>
+  <Button variant="outline" size="sm">
+    Lihat Rekam Medis
+  </Button>
+</Card>
+```

package/src/web/card/card.css

@@ -0,0 +1 @@
+.ttdk-card{box-sizing:border-box;background-color:var(--ttdk-bg-card,#fff);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#232323));border:1px solid var(--ttdk-stroke-subtle,#e4e5e7);flex-direction:column;font-family:inherit;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),background-color .2s;display:flex;position:relative;overflow:hidden}.ttdk-card *,.ttdk-card :before,.ttdk-card :after{box-sizing:border-box}.ttdk-card[data-variant=bordered]{background-color:var(--ttdk-bg-card,#fff);border:1px solid var(--ttdk-stroke-subtle,#e4e5e7);box-shadow:0 1px 3px #1413130a}.ttdk-card[data-variant=elevated]{background-color:var(--ttdk-bg-card,#fff);box-shadow:var(--ttdk-shadow-md,0px 4px 16px #00000014);border:1px solid #1413130f}.ttdk-card[data-variant=flat]{background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3);box-shadow:none;border:1px solid #0000}.ttdk-card[data-variant=ghost]{border:1px dashed var(--ttdk-stroke-divider,#cacccf);box-shadow:none;background-color:#0000}.ttdk-card[data-width=auto]{width:auto}.ttdk-card[data-width=full]{width:100%}.ttdk-card[data-width="1-1"]{width:100%;max-width:var(--ttdk-card-size-1-1,1128px)}.ttdk-card[data-width="1-2"]{width:100%;max-width:var(--ttdk-card-size-1-2,552px)}.ttdk-card[data-width="1-3"]{width:100%;max-width:var(--ttdk-card-size-1-3,360px)}.ttdk-card[data-width="1-4"]{width:100%;max-width:var(--ttdk-card-size-1-4,264px)}.ttdk-card[data-width=mobile]{width:100%;max-width:var(--ttdk-card-size-mobile,328px)}.ttdk-card[data-rounded=none]{border-radius:var(--ttdk-radius-none,0px)}.ttdk-card[data-rounded=xs]{border-radius:var(--ttdk-radius-xs,6px)}.ttdk-card[data-rounded=sm]{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-card[data-rounded=md]{border-radius:var(--ttdk-radius-md,12px)}.ttdk-card[data-rounded=lg]{border-radius:var(--ttdk-radius-lg,16px)}.ttdk-card[data-rounded=xl],.ttdk-card[data-rounded=full]{border-radius:var(--ttdk-radius-xl,24px)}.ttdk-card[data-clickable=true]{cursor:pointer;user-select:none}.ttdk-card[data-hoverable=true]:hover,.ttdk-card[data-clickable=true]:hover{border-color:var(--ttdk-stroke-border-focus,#128f8a);transform:translateY(-2px);box-shadow:0 8px 24px #128f8a1f,0 2px 8px #0000000f}.ttdk-card[data-clickable=true]:active{transform:translateY(0)scale(.995)}.ttdk-card[data-clickable=true]:focus-visible{outline:2px solid var(--ttdk-stroke-border-focus,#128f8a);outline-offset:2px}.ttdk-card[data-disabled=true]{opacity:.55;pointer-events:none;cursor:not-allowed}.ttdk-card-header{justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-12,12px);box-sizing:border-box;width:100%;display:flex}.ttdk-card-header-bordered{border-bottom:1px solid var(--ttdk-stroke-subtle,#e4e5e7)}.ttdk-card-header-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ttdk-card-title{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#141313));margin:0;font-weight:600;line-height:1.35}.ttdk-card-subtitle{color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary,#7b828a));margin:0;font-size:.8125rem;font-weight:400;line-height:1.4}.ttdk-card-extra{align-items:center;gap:var(--ttdk-spacing-8,8px);flex-shrink:0;display:flex}.ttdk-card-body{width:100%;color:inherit;box-sizing:border-box;flex:1;line-height:1.6}.ttdk-card-footer{justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-12,12px);box-sizing:border-box;width:100%;display:flex}.ttdk-card-footer-bordered{border-top:1px solid var(--ttdk-stroke-subtle,#e4e5e7)}.ttdk-card-footer-content{flex:1;align-items:center;min-width:0;display:flex}.ttdk-card-actions{align-items:center;gap:var(--ttdk-spacing-8,8px);flex-shrink:0;margin-left:auto;display:flex}.ttdk-card-cover{aspect-ratio:16/9;background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3);width:100%;display:block;position:relative;overflow:hidden}.ttdk-card-cover img,.ttdk-card-cover video,.ttdk-card-cover svg{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.ttdk-card[data-hoverable=true]:hover .ttdk-card-cover img,.ttdk-card[data-clickable=true]:hover .ttdk-card-cover img{transform:scale(1.03)}.ttdk-card[data-size=sm] .ttdk-card-header{padding:10px 14px}.ttdk-card[data-size=sm] .ttdk-card-title{font-size:.875rem}.ttdk-card[data-size=sm] .ttdk-card-subtitle{font-size:.75rem}.ttdk-card[data-size=sm] .ttdk-card-body{padding:14px;font-size:.8125rem}.ttdk-card[data-size=sm] .ttdk-card-footer{padding:10px 14px;font-size:.8125rem}.ttdk-card[data-size=md] .ttdk-card-header{padding:16px 20px}.ttdk-card[data-size=md] .ttdk-card-title{font-size:1rem}.ttdk-card[data-size=md] .ttdk-card-subtitle{font-size:.8125rem}.ttdk-card[data-size=md] .ttdk-card-body{padding:20px;font-size:.875rem}.ttdk-card[data-size=md] .ttdk-card-footer{padding:14px 20px;font-size:.875rem}.ttdk-card[data-size=lg] .ttdk-card-header{padding:20px 28px}.ttdk-card[data-size=lg] .ttdk-card-title{font-size:1.125rem}.ttdk-card[data-size=lg] .ttdk-card-subtitle{font-size:.875rem}.ttdk-card[data-size=lg] .ttdk-card-body{padding:28px;font-size:.9375rem}.ttdk-card[data-size=lg] .ttdk-card-footer{padding:18px 28px;font-size:.9375rem}@keyframes ttdk-card-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.ttdk-card-skeleton{flex-direction:column;gap:16px;width:100%;padding:20px;display:flex}.ttdk-card-skeleton-header{align-items:center;gap:12px;display:flex}.ttdk-card-skeleton-avatar{background:linear-gradient(90deg,#f1f2f3 25%,#e4e5e7 50%,#f1f2f3 75%) 0 0/200% 100%;border-radius:50%;flex-shrink:0;width:40px;height:40px;animation:1.5s infinite ttdk-card-shimmer}.ttdk-card-skeleton-title-group{flex-direction:column;flex:1;gap:6px;display:flex}.ttdk-card-skeleton-line{background:linear-gradient(90deg,#f1f2f3 25%,#e4e5e7 50%,#f1f2f3 75%) 0 0/200% 100%;border-radius:4px;height:12px;animation:1.5s infinite ttdk-card-shimmer}.ttdk-card-skeleton-line-title{width:45%;height:16px}.ttdk-card-skeleton-line-subtitle{width:65%;height:10px}.ttdk-card-skeleton-body{flex-direction:column;gap:10px;margin-top:4px;display:flex}.dark .ttdk-card,:root.dark .ttdk-card,[data-theme=dark] .ttdk-card{background-color:var(--ttdk-bg-card,#232323);color:var(--ttdk-text-icon-primary,#cacccf);border-color:var(--ttdk-stroke-subtle,#313336)}.dark .ttdk-card[data-variant=bordered],:root.dark .ttdk-card[data-variant=bordered],[data-theme=dark] .ttdk-card[data-variant=bordered]{background-color:var(--ttdk-bg-card,#232323);border-color:var(--ttdk-stroke-subtle,#313336);box-shadow:0 1px 4px #00000059}.dark .ttdk-card[data-variant=elevated],:root.dark .ttdk-card[data-variant=elevated],[data-theme=dark] .ttdk-card[data-variant=elevated]{background-color:var(--ttdk-bg-card,#232323);border-color:var(--ttdk-stroke-subtle,#313336);box-shadow:0 4px 20px #00000080}.dark .ttdk-card[data-variant=flat],:root.dark .ttdk-card[data-variant=flat],[data-theme=dark] .ttdk-card[data-variant=flat]{background-color:var(--ttdk-bg-secondary-disabled,#1a1c1e);border-color:#0000}.dark .ttdk-card[data-variant=ghost],:root.dark .ttdk-card[data-variant=ghost],[data-theme=dark] .ttdk-card[data-variant=ghost]{border-color:var(--ttdk-stroke-divider,#4a4f53);background-color:#0000}.dark .ttdk-card-title,:root.dark .ttdk-card-title,[data-theme=dark] .ttdk-card-title{color:var(--ttdk-text-icon-primary,#fff)}.dark .ttdk-card-subtitle,:root.dark .ttdk-card-subtitle,[data-theme=dark] .ttdk-card-subtitle{color:var(--ttdk-text-icon-secondary,#969ba2)}.dark .ttdk-card-header-bordered,:root.dark .ttdk-card-header-bordered,[data-theme=dark] .ttdk-card-header-bordered{border-bottom-color:var(--ttdk-stroke-divider,#313336)}.dark .ttdk-card-footer-bordered,:root.dark .ttdk-card-footer-bordered,[data-theme=dark] .ttdk-card-footer-bordered{border-top-color:var(--ttdk-stroke-divider,#313336)}.dark .ttdk-card-cover,:root.dark .ttdk-card-cover,[data-theme=dark] .ttdk-card-cover{background-color:#1a1c1e}.dark .ttdk-card[data-hoverable=true]:hover,:root.dark .ttdk-card[data-hoverable=true]:hover,[data-theme=dark] .ttdk-card[data-hoverable=true]:hover,.dark .ttdk-card[data-clickable=true]:hover,:root.dark .ttdk-card[data-clickable=true]:hover,[data-theme=dark] .ttdk-card[data-clickable=true]:hover{border-color:var(--ttdk-brand-default,#16b3ac);box-shadow:0 8px 28px #128f8a38,0 2px 10px #0006}.dark .ttdk-card-skeleton-avatar,:root.dark .ttdk-card-skeleton-avatar,[data-theme=dark] .ttdk-card-skeleton-avatar,.dark .ttdk-card-skeleton-line,:root.dark .ttdk-card-skeleton-line,[data-theme=dark] .ttdk-card-skeleton-line{background:linear-gradient(90deg,#2d3034 25%,#393d43 50%,#2d3034 75%) 0 0/200% 100%}