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

package/dist/web/button/button.svelte.d.ts

@@ -0,0 +1,159 @@
+import { SvelteComponent } from "svelte";
+export type ButtonUiProps = UiProps;
+export interface ButtonProps {
+    /**
+     * Inline CSS style kustom.
+     */
+    style?: any;
+    /**
+     * Varian warna semantik tombol:
+     * - `'primary'`: Teal utama.
+     * - `'info'`: Biru informasi.
+     * - `'warning'`: Kuning peringatan.
+     * - `'danger'`: Merah bahaya.
+     * - `'neutral'`: Abu-abu netral.
+     * - `'disabled'`: Tombol non-aktif.
+     *
+     * @default 'primary'
+     */
+    variant?: "primary" | "info" | "warning" | "danger" | "neutral" | "disabled";
+    /**
+     * Gaya tampilan visual tombol:
+     * - `'solid'`: Latar belakang warna solid pekat (default).
+     * - `'soft'`: Latar belakang warna transparan lembut.
+     * - `'outline'`: Garis tepi dengan latar belakang transparan.
+     * - `'link'`: Teks tautan tanpa border/latar, dengan garis bawah saat hover.
+     * - `'ghost'`: Transparan tanpa outline/border, dengan latar lembut saat hover.
+     *
+     * @default 'solid'
+     */
+    appearance?: "solid" | "soft" | "outline" | "link" | "ghost";
+    /**
+     * Tipe tombol HTML native.
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Skala ukuran tombol:
+     * - `'sm'`: 36px
+     * - `'md'`: 48px (standar)
+     * - `'lg'`: 56px
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Mode negatif — kontras tinggi di atas latar gelap.
+     * @default false
+     */
+    negative?: boolean;
+    /**
+     * Radius sudut tombol.
+     * - `'none'`: 0px
+     * - `'sm'`: 4px
+     * - `'md'`: 8px (standar)
+     * - `'lg'`: 12px
+     * - `'full'`: 9999px (pill)
+     *
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Mode tombol ikon persegi (aspek rasio 1:1).
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Full-width — melebar 100% dari container.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Tampilkan spinner & nonaktifkan tombol saat proses async.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Nonaktifkan tombol dari interaksi pengguna.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').
+     */
+    iconColor?: string;
+    /**
+     * Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').
+     */
+    iconSize?: string;
+    /**
+     * Kustomisasi visual — seperti style object tapi dengan support pseudo-class.
+     *
+     * @example
+     * ```tsx
+     * <Button
+     *   ui={{
+     *     background: '#7c3aed',
+     *     color: 'white',
+     *     borderRadius: '99px',
+     *     hover: {
+     *       background: '#6d28d9',
+     *       transform: 'scale(1.02)',
+     *     },
+     *     active: {
+     *       opacity: '0.9',
+     *     }
+     *   }}
+     * />
+     * ```
+     */
+    ui?: UiProps;
+    /**
+     * Event handler saat tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten tombol — teks, ikon, atau JSX.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: ButtonProps["className"];
+        type?: ButtonProps["type"];
+        variant?: ButtonProps["variant"];
+        appearance?: ButtonProps["appearance"];
+        size?: ButtonProps["size"];
+        negative?: ButtonProps["negative"];
+        rounded?: ButtonProps["rounded"];
+        iconOnly?: ButtonProps["iconOnly"];
+        block?: ButtonProps["block"];
+        loading?: ButtonProps["loading"];
+        disabled?: ButtonProps["disabled"];
+        ui?: ButtonProps["ui"];
+        iconColor?: ButtonProps["iconColor"];
+        iconSize?: ButtonProps["iconSize"];
+        onClick?: ButtonProps["onClick"];
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type ButtonProps_ = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps_, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/web/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './button.svelte';
+export { default as Button } from './button.svelte';

package/dist/web/button/index.js

@@ -0,0 +1,2 @@
+export { default } from './button.svelte';
+export { default as Button } from './button.svelte';

package/dist/web/button/manifest.json

@@ -0,0 +1,177 @@
+{
+  "name": "@ttdk-design-system/button",
+  "component": "Button",
+  "folder": "button",
+  "description": "TTDK Button component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "button.css",
+      "importPath": "web/button/button.css"
+    }
+  ],
+  "props": {
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style kustom.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'neutral'\n  | 'disabled'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik tombol: - `'primary'`: Teal utama. - `'info'`: Biru informasi. - `'warning'`: Kuning peringatan. - `'danger'`: Merah bahaya. - `'neutral'`: Abu-abu netral. - `'disabled'`: Tombol non-aktif.",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'solid' | 'soft' | 'outline' | 'link' | 'ghost'",
+      "optional": true,
+      "default": "solid",
+      "description": "Gaya tampilan visual tombol: - `'solid'`: Latar belakang warna solid pekat (default). - `'soft'`: Latar belakang warna transparan lembut. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'link'`: Teks tautan tanpa border/latar, dengan garis bawah saat hover. - `'ghost'`: Transparan tanpa outline/border, dengan latar lembut saat hover.",
+      "example": null,
+      "param": null
+    },
+    "type": {
+      "name": "type",
+      "type": "'button' | 'submit' | 'reset'",
+      "optional": true,
+      "default": "button",
+      "description": "Tipe tombol HTML native.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tombol: - `'sm'`: 36px - `'md'`: 48px (standar) - `'lg'`: 56px",
+      "example": null,
+      "param": null
+    },
+    "negative": {
+      "name": "negative",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode negatif — kontras tinggi di atas latar gelap.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Radius sudut tombol. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar) - `'lg'`: 12px - `'full'`: 9999px (pill)",
+      "example": null,
+      "param": null
+    },
+    "iconOnly": {
+      "name": "iconOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode tombol ikon persegi (aspek rasio 1:1).",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Full-width — melebar 100% dari container.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Tampilkan spinner & nonaktifkan tombol saat proses async.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Nonaktifkan tombol dari interaksi pengguna.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual — seperti style object tapi dengan support pseudo-class. ```tsx <Button ui={{ background: '#7c3aed', color: 'white', borderRadius: '99px', hover: { background: '#6d28d9', transform: 'scale(1.02)', }, active: { opacity: '0.9', } }} /> ```",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat tombol diklik.",
+      "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": "Konten tombol — teks, ikon, atau JSX.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/calendar/AI_GUIDE.md

@@ -0,0 +1,151 @@
+# <Calendar /> — TTDK Component Reference
+
+TTDK Calendar 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/calendar/calendar.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Calendar from "@ttdk-design-system/library-react/web/calendar";
+
+// Vue 3
+import Calendar from "@ttdk-design-system/library-vue/web/calendar";
+
+// Svelte
+import Calendar from "@ttdk-design-system/library-svelte/web/calendar";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value?` | `any` | `-` | 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[] |
+| `defaultValue?` | `any` | `-` | Nilai awal tanggal terpilih pada mode uncontrolled. |
+| `id?` | `string` | `-` | Atribut ID unik untuk elemen root kalender. |
+| `range?` | `boolean` | `false` | Mengaktifkan mode pemilihan rentang tanggal (start date - end date). |
+| `multiple?` | `boolean` | `false` | Mengaktifkan mode pemilihan banyak tanggal sekaligus. |
+| `min?` | `string | Date` | `-` | Batas tanggal paling awal yang dapat dipilih. |
+| `minValue?` | `string | Date` | `-` | Alias untuk min (kompatibel Nuxt UI: min-value). |
+| `max?` | `string | Date` | `-` | Batas tanggal paling akhir yang dapat dipilih. |
+| `maxValue?` | `string | Date` | `-` | Alias untuk max (kompatibel Nuxt UI: max-value). |
+| `isDateDisabled?` | `(date: Date) => boolean` | `-` | Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan). |
+| `isDateUnavailable?` | `(date: Date) => boolean` | `-` | Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough). |
+| `numberOfMonths?` | `number` | `1` | Jumlah bulan yang ditampilkan secara berdampingan. |
+| `weekStartsOn?` | `0 | 1 | 2 | 3 | 4 | 5 | 6` | `1` | Hari awal dalam seminggu: - 0 = Minggu (Sunday) - 1 = Senin (Monday) |
+| `locale?` | `string` | `id-ID` | Kode lokal bahasa kalender (misal: 'id-ID', 'en-US'). |
+| `month?` | `number` | `-` | Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled. |
+| `year?` | `number` | `-` | Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled. |
+| `defaultMonth?` | `number` | `-` | Bulan awal yang sedang ditampilkan (1 - 12). |
+| `defaultYear?` | `number` | `-` | Tahun awal yang sedang ditampilkan. |
+| `yearControls?` | `boolean` | `true` | Menampilkan tombol navigasi lompat tahun (<< dan >>). |
+| `showOutsideDays?` | `boolean` | `true` | Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days). |
+| `fixedWeeks?` | `boolean` | `true` | Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan. |
+| `dateMarkers?` | `DateMarker[]` | `-` | Daftar penanda agenda / jadwal faskes pada tanggal tertentu. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` | `md` | Radius sudut kelengkungan container kalender. |
+| `variant?` | `'default' | 'bordered' | 'card' | 'flat'` | `bordered` | 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. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan seluruh kalender dari interaksi. |
+| `readOnly?` | `boolean` | `false` | Mode hanya-baca (read-only). |
+| `onValueChange?` | `(value: any) => void` | `-` | Callback event saat nilai tanggal berubah. |
+| `onChange?` | `(event: any) => void` | `-` | Callback event native saat nilai berubah. |
+| `onMonthChange?` | `(month: number, year: number) => void` | `-` | Callback saat navigasi bulan atau tahun berubah. |
+| `onYearChange?` | `(month: number, year: number) => void` | `-` | Callback saat tahun tampilan kalender berubah. |
+| `defaultViewMode?` | `'day' | 'month' | 'year'` | `day` | Mode tampilan awal kalender ('day', 'month', 'year'). |
+| `viewMode?` | `'day' | 'month' | 'year'` | `-` | Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled. |
+| `onViewModeChange?` | `(mode: 'day' | 'month' | 'year') => void` | `-` | Callback saat mode tampilan kalender berubah ('day', 'month', 'year'). |
+| `className?` | `string` | `-` | Class CSS kustom untuk container utama. |
+| `style?` | `any` | `-` | Inline style CSS kustom untuk container utama. |
+| `headerClass?` | `string` | `-` | Class CSS kustom untuk header kalender. |
+| `headerStyle?` | `UiProps` | `-` | Inline style kustom untuk header kalender. |
+| `navBtnClass?` | `string` | `-` | Class CSS kustom untuk tombol navigasi. |
+| `navBtnStyle?` | `UiProps` | `-` | Inline style kustom untuk tombol navigasi. |
+| `cellClass?` | `string` | `-` | Class CSS kustom untuk cell tanggal. |
+| `cellStyle?` | `UiProps` | `-` | Inline style kustom untuk cell tanggal. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular UiProps. |
+
+### Sub-interface: `DateRange`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `start` | `string | Date | null` | `-` |  |
+| `end` | `string | Date | null` | `-` |  |
+
+### Sub-interface: `DateMarker`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `date` | `string` | `-` |  |
+| `color?` | `string` | `-` |  |
+| `tooltip?` | `string` | `-` |  |
+| `dot?` | `boolean` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Calendar from "@ttdk-design-system/library-react/web/calendar";
+import "@ttdk-design-system/library-react/web/calendar/calendar.css";
+
+export function Example() {
+  const [selectedDate, setSelectedDate] = useState("2026-10-13");
+
+  return (
+    <div style={{ maxWidth: '320px' }}>
+      <Calendar
+        value={selectedDate}
+        onChange={(date) => setSelectedDate(date)}
+      />
+      <div style={{ marginTop: '12px', fontSize: '14px' }}>
+        Tanggal terpilih: <strong>{selectedDate}</strong>
+      </div>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Calendar from "@ttdk-design-system/library-vue/web/calendar";
+import "@ttdk-design-system/library-vue/web/calendar/calendar.css";
+
+const selectedDate = ref("2026-10-13");
+</script>
+
+<template>
+  <div style="max-width: 320px;">
+    <Calendar
+      :value="selectedDate"
+      @change="(date: any) => (selectedDate = date)"
+    />
+    <div style="margin-top: 12px; font-size: 14px;">
+      Tanggal terpilih: <strong>{{ selectedDate }}</strong>
+    </div>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Calendar from "@ttdk-design-system/library-svelte/web/calendar";
+  import "@ttdk-design-system/library-svelte/web/calendar/calendar.css";
+
+  let selectedDate = "2026-10-13";
+</script>
+
+<div style="max-width: 320px;">
+  <Calendar
+    value={selectedDate}
+    on:change={(e) => (selectedDate = e.detail)}
+  />
+  <div style="margin-top: 12px; font-size: 14px;">
+    Tanggal terpilih: <strong>{selectedDate}</strong>
+  </div>
+</div>
+```

package/dist/web/calendar/calendar.css

@@ -0,0 +1 @@
+:root{--ttdk-cal-font-family:var(--ttdk-font-sans);--ttdk-cal-bg:var(--ttdk-bg-base-primary);--ttdk-cal-border:var(--ttdk-stroke-subtle);--ttdk-cal-text-primary:var(--ttdk-text-icon-primary);--ttdk-cal-text-secondary:var(--ttdk-text-icon-secondary);--ttdk-cal-text-muted:var(--ttdk-text-icon-disabled);--ttdk-cal-brand:var(--ttdk-brand-default);--ttdk-cal-brand-hover:var(--ttdk-brand-strong);--ttdk-cal-brand-light:var(--ttdk-brand-subtle);--ttdk-cal-brand-range:color-mix(in srgb, var(--ttdk-brand-strong) 15%, transparent);--ttdk-cal-brand-text-inv:var(--ttdk-color-neutral-white);--ttdk-cal-today-border:var(--ttdk-stroke-border-focus);--ttdk-cal-hover-bg:var(--ttdk-bg-secondary-disabled);--ttdk-cal-radius:8px;--ttdk-cal-cell-size:38px;--ttdk-cal-font-size:14px}.dark,[data-theme=dark]{--ttdk-cal-bg:var(--ttdk-bg-base-primary);--ttdk-cal-border:var(--ttdk-stroke-subtle);--ttdk-cal-text-primary:var(--ttdk-text-icon-primary);--ttdk-cal-text-secondary:var(--ttdk-text-icon-secondary);--ttdk-cal-text-muted:var(--ttdk-text-icon-disabled);--ttdk-cal-brand:var(--ttdk-brand-default);--ttdk-cal-brand-hover:var(--ttdk-brand-strong);--ttdk-cal-brand-light:color-mix(in srgb, var(--ttdk-brand-strong) 20%, transparent);--ttdk-cal-brand-range:color-mix(in srgb, var(--ttdk-brand-strong) 25%, transparent);--ttdk-cal-brand-text-inv:var(--ttdk-bg-secondary-disabled);--ttdk-cal-today-border:var(--ttdk-stroke-border-focus);--ttdk-cal-hover-bg:var(--ttdk-bg-secondary-disabled)}.ttdk-calendar{background-color:var(--ttdk-cal-bg);border-radius:var(--ttdk-cal-radius);font-family:var(--ttdk-cal-font-family);font-size:var(--ttdk-cal-font-size);color:var(--ttdk-ui-color,var(--ttdk-cal-text-primary));user-select:none;box-sizing:border-box;flex-direction:column;width:fit-content;max-width:100%;padding:16px;transition:border-color .2s,box-shadow .2s;display:inline-flex}@media screen and (width<=600px){.ttdk-calendar{box-sizing:border-box;width:100%;max-width:100%;padding:12px 6px}}.ttdk-calendar *,.ttdk-calendar :before,.ttdk-calendar :after{box-sizing:border-box}.ttdk-calendar-bordered{border:1px solid var(--ttdk-cal-border)}.ttdk-calendar-card{border:1px solid var(--ttdk-cal-border);box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -2px #0000000d}.ttdk-calendar-flat{box-shadow:none;background:0 0;border:none;padding:0}.ttdk-calendar-sm{--ttdk-cal-cell-size:32px;--ttdk-cal-font-size:12.5px;padding:12px}.ttdk-calendar-md{--ttdk-cal-cell-size:38px;--ttdk-cal-font-size:14px}.ttdk-calendar-lg{--ttdk-cal-cell-size:44px;--ttdk-cal-font-size:15.5px;padding:20px}.ttdk-calendar-rounded-none{--ttdk-cal-radius:0px}.ttdk-calendar-rounded-sm{--ttdk-cal-radius:4px}.ttdk-calendar-rounded-md{--ttdk-cal-radius:8px}.ttdk-calendar-rounded-lg{--ttdk-cal-radius:12px}.ttdk-calendar-rounded-xl{--ttdk-cal-radius:16px}.ttdk-calendar-rounded-full{--ttdk-cal-radius:20px}.ttdk-calendar-months{flex-flow:wrap;align-items:flex-start;gap:24px;width:100%;max-width:100%;display:flex}.ttdk-calendar-month{width:calc(var(--ttdk-cal-cell-size) * 7);box-sizing:border-box;flex-direction:column;flex:none;max-width:100%;display:flex}@media screen and (width<=600px){.ttdk-calendar-months{flex-direction:column;gap:20px;width:100%}.ttdk-calendar-month{width:100%;min-width:0;max-width:100%}.ttdk-calendar-header{gap:2px}.ttdk-calendar-nav-btn{width:24px;height:24px}.ttdk-calendar-nav-btn svg{width:14px;height:14px}.ttdk-calendar-title-btn{padding:3px 4px;font-size:.95em}.ttdk-calendar-cell{aspect-ratio:1;height:auto}.ttdk-calendar-day{aspect-ratio:1;width:calc(100% - 2px);height:calc(100% - 2px)}}.ttdk-calendar-header{justify-content:space-between;align-items:center;gap:0;margin-bottom:12px;display:flex;position:relative}.ttdk-calendar-title-group{flex:1;justify-content:center;align-items:center;gap:0;display:flex}.ttdk-calendar-title{color:var(--ttdk-cal-text-primary);cursor:default;background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:1em;font-weight:600;line-height:1.2;display:inline-flex}.ttdk-calendar-title-btn{color:var(--ttdk-cal-text-primary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:4px;padding:4px;font-family:inherit;font-size:1em;font-weight:600;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s;display:inline-flex}.ttdk-calendar-title-btn:hover:not(:disabled){background-color:var(--ttdk-cal-hover-bg);color:var(--ttdk-cal-brand)}.ttdk-calendar-title-btn:focus-visible{outline:2px solid var(--ttdk-cal-brand);outline-offset:1px}.ttdk-calendar-title-btn:disabled{opacity:.5;cursor:not-allowed}.ttdk-calendar-nav-group{align-items:center;gap:4px;display:flex}.ttdk-calendar-nav-btn{width:28px;height:28px;color:var(--ttdk-cal-text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s,border-color .15s;display:inline-flex}.ttdk-calendar-nav-btn:hover:not(:disabled){background-color:var(--ttdk-cal-hover-bg);color:var(--ttdk-cal-text-primary)}.ttdk-calendar-nav-btn:focus-visible{outline:2px solid var(--ttdk-cal-brand);outline-offset:1px}.ttdk-calendar-nav-btn:disabled{opacity:.35;cursor:not-allowed}.ttdk-calendar-nav-btn svg{stroke-width:2px;flex-shrink:0;width:16px;height:16px}.ttdk-calendar-month-picker-view,.ttdk-calendar-year-picker-view{width:100%;max-width:100%;min-width:calc(var(--ttdk-cal-cell-size) * 7);box-sizing:border-box;flex-direction:column;display:flex}@media screen and (width<=600px){.ttdk-calendar-month-picker-view,.ttdk-calendar-year-picker-view{min-width:0}}.ttdk-calendar-grid-picker{box-sizing:border-box;grid-template-columns:repeat(4,1fr);gap:10px 8px;width:100%;padding:12px 4px;display:grid}.ttdk-calendar-picker-item{min-height:38px;color:var(--ttdk-cal-text-primary);border-radius:var(--ttdk-cal-radius);cursor:pointer;user-select:none;box-sizing:border-box;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:10px 4px;font-family:inherit;font-size:.9em;font-weight:500;transition:all .15s;display:inline-flex}.ttdk-calendar-picker-item:hover:not(:disabled){background-color:var(--ttdk-cal-hover-bg);color:var(--ttdk-cal-text-primary)}.ttdk-calendar-picker-item:disabled{opacity:.35;cursor:not-allowed}.ttdk-calendar-picker-item-selected{font-weight:600;background-color:var(--ttdk-cal-brand)!important;color:var(--ttdk-cal-brand-text-inv)!important}.ttdk-calendar-picker-item-selected:hover:not(:disabled){background-color:var(--ttdk-cal-brand-hover)!important}.ttdk-calendar-picker-item-current:not(.ttdk-calendar-picker-item-selected){color:var(--ttdk-cal-brand);border-color:var(--ttdk-cal-brand);font-weight:700}.ttdk-calendar-picker-item:focus-visible{outline:2px solid var(--ttdk-cal-brand);outline-offset:1px}.ttdk-calendar-sm .ttdk-calendar-picker-item{min-height:32px;padding:6px 2px;font-size:.82em}.ttdk-calendar-lg .ttdk-calendar-picker-item{min-height:44px;padding:12px 6px;font-size:.95em}.ttdk-calendar-table{border-collapse:collapse;table-layout:fixed;border-spacing:0;width:100%}.ttdk-calendar-thead-row{grid-template-columns:repeat(7,1fr);margin-bottom:6px;display:grid}.ttdk-calendar-head-cell{text-transform:uppercase;letter-spacing:.04em;color:var(--ttdk-cal-text-muted);justify-content:center;align-items:center;height:28px;font-size:.8em;font-weight:600;display:flex}.ttdk-calendar-tbody{flex-direction:column;gap:4px;margin:0;padding:0;display:flex}.ttdk-calendar-row{grid-template-columns:repeat(7,1fr);width:100%;margin:0;padding:0;display:grid}.ttdk-calendar-cell{width:100%;height:var(--ttdk-cal-cell-size);justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.ttdk-calendar-cell-range{background-color:var(--ttdk-cal-brand-range)}.ttdk-calendar-cell-range:first-child{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ttdk-calendar-cell-range:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.ttdk-calendar-cell-range-start{background-color:var(--ttdk-cal-brand-range);border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ttdk-calendar-cell-range-start:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.ttdk-calendar-cell-range-end{background-color:var(--ttdk-cal-brand-range);border-top-right-radius:9999px;border-bottom-right-radius:9999px}.ttdk-calendar-cell-range-end:first-child{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ttdk-calendar-cell-range-single{background-color:#0000!important;border-radius:0!important}.ttdk-calendar-day{width:calc(var(--ttdk-cal-cell-size) - 4px);height:calc(var(--ttdk-cal-cell-size) - 4px);color:var(--ttdk-cal-text-primary);font-size:inherit;cursor:pointer;z-index:1;background:0 0;border:1px solid #0000;border-radius:9999px;outline:none;flex-direction:column;justify-content:center;align-items:center;font-weight:400;transition:background-color .15s,color .15s,border-color .15s,transform .1s;display:inline-flex;position:relative}.ttdk-calendar-day:hover:not(:disabled):not(.ttdk-calendar-day-selected):not(.ttdk-calendar-day-range-start):not(.ttdk-calendar-day-range-end){background-color:var(--ttdk-cal-hover-bg);color:var(--ttdk-cal-text-primary)}.ttdk-calendar-day:active:not(:disabled){transform:scale(.95)}.ttdk-calendar-day:focus-visible{outline:2px solid var(--ttdk-cal-brand);outline-offset:2px}.ttdk-calendar-day-today{border-color:var(--ttdk-cal-today-border);color:var(--ttdk-cal-brand);font-weight:600}.ttdk-calendar-day-selected,.ttdk-calendar-day-range-start,.ttdk-calendar-day-range-end{width:100%;height:100%;max-width:var(--ttdk-cal-cell-size);max-height:var(--ttdk-cal-cell-size);border-color:var(--ttdk-cal-brand);font-weight:600;box-shadow:0 1px 3px #00000026;background-color:var(--ttdk-cal-brand)!important;color:var(--ttdk-cal-brand-text-inv)!important}.ttdk-calendar-day-in-range{color:var(--ttdk-cal-brand);border-radius:100%;width:100%;height:100%;font-weight:500}.ttdk-calendar-day-outside{color:var(--ttdk-cal-text-muted);opacity:.45}.ttdk-calendar-day-outside:hover:not(:disabled){opacity:.8}.ttdk-calendar-day-disabled{opacity:.25;pointer-events:none;cursor:not-allowed!important}.ttdk-calendar-day-unavailable{color:var(--ttdk-cal-text-muted);opacity:.55;text-decoration:line-through;cursor:not-allowed!important}.ttdk-calendar-marker-dot{background-color:var(--ttdk-cal-brand);border-radius:50%;width:4px;height:4px;transition:transform .15s;position:absolute;bottom:3px}.ttdk-calendar-day-selected .ttdk-calendar-marker-dot,.ttdk-calendar-day-range-start .ttdk-calendar-marker-dot,.ttdk-calendar-day-range-end .ttdk-calendar-marker-dot{background-color:#fff}