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

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

@@ -0,0 +1,268 @@
+import { SvelteComponent } from "svelte";
+export type CalendarUiProps = UiProps;
+export interface DateRange {
+    start: string | Date | null;
+    end: string | Date | null;
+}
+export interface DateMarker {
+    date: string;
+    color?: string;
+    tooltip?: string;
+    dot?: boolean;
+}
+export interface CalendarProps {
+    /**
+     * 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[]
+     */
+    value?: any;
+    /**
+     * Nilai awal tanggal terpilih pada mode uncontrolled.
+     */
+    defaultValue?: any;
+    /**
+     * Atribut ID unik untuk elemen root kalender.
+     */
+    id?: string;
+    /**
+     * Mengaktifkan mode pemilihan rentang tanggal (start date - end date).
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Mengaktifkan mode pemilihan banyak tanggal sekaligus.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Batas tanggal paling awal yang dapat dipilih.
+     */
+    min?: string | Date;
+    /**
+     * Alias untuk min (kompatibel Nuxt UI: min-value).
+     */
+    minValue?: string | Date;
+    /**
+     * Batas tanggal paling akhir yang dapat dipilih.
+     */
+    max?: string | Date;
+    /**
+     * Alias untuk max (kompatibel Nuxt UI: max-value).
+     */
+    maxValue?: string | Date;
+    /**
+     * Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan).
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough).
+     */
+    isDateUnavailable?: (date: Date) => boolean;
+    /**
+     * Jumlah bulan yang ditampilkan secara berdampingan.
+     * @default 1
+     */
+    numberOfMonths?: number;
+    /**
+     * Hari awal dalam seminggu:
+     * - 0 = Minggu (Sunday)
+     * - 1 = Senin (Monday)
+     * @default 1
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Kode lokal bahasa kalender (misal: 'id-ID', 'en-US').
+     * @default 'id-ID'
+     */
+    locale?: string;
+    /**
+     * Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled.
+     */
+    month?: number;
+    /**
+     * Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled.
+     */
+    year?: number;
+    /**
+     * Bulan awal yang sedang ditampilkan (1 - 12).
+     */
+    defaultMonth?: number;
+    /**
+     * Tahun awal yang sedang ditampilkan.
+     */
+    defaultYear?: number;
+    /**
+     * Menampilkan tombol navigasi lompat tahun (<< dan >>).
+     * @default true
+     */
+    yearControls?: boolean;
+    /**
+     * Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days).
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan.
+     * @default true
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Daftar penanda agenda / jadwal faskes pada tanggal tertentu.
+     */
+    dateMarkers?: DateMarker[];
+    /**
+     * Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px).
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Radius sudut kelengkungan container kalender.
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    /**
+     * 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.
+     * @default 'bordered'
+     */
+    variant?: "default" | "bordered" | "card" | "flat";
+    /**
+     * Menonaktifkan seluruh kalender dari interaksi.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Mode hanya-baca (read-only).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Callback event saat nilai tanggal berubah.
+     */
+    onValueChange?: (value: any) => void;
+    /**
+     * Callback event native saat nilai berubah.
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Callback saat navigasi bulan atau tahun berubah.
+     */
+    onMonthChange?: (month: number, year: number) => void;
+    /**
+     * Callback saat tahun tampilan kalender berubah.
+     */
+    onYearChange?: (month: number, year: number) => void;
+    /**
+     * Mode tampilan awal kalender ('day', 'month', 'year').
+     * @default 'day'
+     */
+    defaultViewMode?: "day" | "month" | "year";
+    /**
+     * Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled.
+     */
+    viewMode?: "day" | "month" | "year";
+    /**
+     * Callback saat mode tampilan kalender berubah ('day', 'month', 'year').
+     */
+    onViewModeChange?: (mode: "day" | "month" | "year") => void;
+    /**
+     * Class CSS kustom untuk container utama.
+     */
+    className?: string;
+    /**
+     * Inline style CSS kustom untuk container utama.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom untuk header kalender.
+     */
+    headerClass?: string;
+    /**
+     * Inline style kustom untuk header kalender.
+     */
+    headerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk tombol navigasi.
+     */
+    navBtnClass?: string;
+    /**
+     * Inline style kustom untuk tombol navigasi.
+     */
+    navBtnStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk cell tanggal.
+     */
+    cellClass?: string;
+    /**
+     * Inline style kustom untuk cell tanggal.
+     */
+    cellStyle?: UiProps;
+    /**
+     * Kustomisasi visual granular UiProps.
+     */
+    ui?: UiProps;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        value?: CalendarProps["value"];
+        defaultValue?: CalendarProps["defaultValue"];
+        range?: CalendarProps["range"];
+        multiple?: CalendarProps["multiple"];
+        year?: CalendarProps["year"];
+        month?: CalendarProps["month"];
+        defaultYear?: CalendarProps["defaultYear"];
+        defaultMonth?: CalendarProps["defaultMonth"];
+        viewMode?: CalendarProps["viewMode"];
+        defaultViewMode?: CalendarProps["defaultViewMode"];
+        locale?: CalendarProps["locale"];
+        onViewModeChange?: CalendarProps["onViewModeChange"];
+        disabled?: CalendarProps["disabled"];
+        onYearChange?: CalendarProps["onYearChange"];
+        onMonthChange?: CalendarProps["onMonthChange"];
+        weekStartsOn?: CalendarProps["weekStartsOn"];
+        min?: CalendarProps["min"];
+        minValue?: CalendarProps["minValue"];
+        max?: CalendarProps["max"];
+        maxValue?: CalendarProps["maxValue"];
+        isDateDisabled?: CalendarProps["isDateDisabled"];
+        isDateUnavailable?: CalendarProps["isDateUnavailable"];
+        dateMarkers?: CalendarProps["dateMarkers"];
+        readOnly?: CalendarProps["readOnly"];
+        onValueChange?: CalendarProps["onValueChange"];
+        onChange?: CalendarProps["onChange"];
+        showOutsideDays?: CalendarProps["showOutsideDays"];
+        fixedWeeks?: CalendarProps["fixedWeeks"];
+        numberOfMonths?: CalendarProps["numberOfMonths"];
+        id?: CalendarProps["id"];
+        variant?: CalendarProps["variant"];
+        size?: CalendarProps["size"];
+        rounded?: CalendarProps["rounded"];
+        className?: CalendarProps["className"];
+        ui?: CalendarProps["ui"];
+        headerClass?: CalendarProps["headerClass"];
+        headerStyle?: CalendarProps["headerStyle"];
+        yearControls?: CalendarProps["yearControls"];
+        navBtnClass?: CalendarProps["navBtnClass"];
+        navBtnStyle?: CalendarProps["navBtnStyle"];
+        cellClass?: CalendarProps["cellClass"];
+        cellStyle?: CalendarProps["cellStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type CalendarProps_ = typeof __propDef.props;
+export type CalendarEvents = typeof __propDef.events;
+export type CalendarSlots = typeof __propDef.slots;
+export default class Calendar extends SvelteComponent<CalendarProps_, CalendarEvents, CalendarSlots> {
+}
+export {};

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

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

package/dist/web/calendar/index.js

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