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

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

@@ -0,0 +1,296 @@
+import { SvelteComponent } from "svelte";
+export type SelectboxUiProps = UiProps;
+export interface SelectboxOption {
+    /**
+     * Teks label tampilan pilihan dropdown.
+     */
+    label: string;
+    /**
+     * Nilai unik (value) dari opsi pilihan.
+     */
+    value: string | number;
+    /**
+     * Status apakah opsi ini dinonaktifkan dari pemilihan.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface SelectboxProps {
+    /**
+     * Teks label judul field yang ditampilkan di atas selectbox (14px Semibold, #141313).
+     */
+    label?: string;
+    /**
+     * Style kustom untuk elemen label judul field (UiProps).
+     */
+    labelStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen label judul field.
+     */
+    labelClass?: string;
+    /**
+     * Style kustom untuk elemen trigger kontrol selectbox (UiProps).
+     */
+    controlStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen trigger kontrol selectbox.
+     */
+    controlClass?: string;
+    /**
+     * Style kustom untuk elemen menu dropdown popover (UiProps).
+     */
+    menuStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen menu dropdown popover.
+     */
+    menuClass?: string;
+    /**
+     * Alias untuk menuStyle (konsistensi dengan Dropdown listStyle).
+     */
+    listStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk opsi list dropdown (atau alias menuClass).
+     */
+    listClass?: string;
+    /**
+     * Style kustom untuk elemen pesan error validasi (UiProps).
+     */
+    errorMessageStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen pesan error validasi.
+     */
+    errorMessageClass?: string;
+    /**
+     * Style kustom untuk elemen helper text (UiProps).
+     */
+    helperTextStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen helper text.
+     */
+    helperTextClass?: string;
+    /**
+     * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+     * @default false
+     */
+    optional?: boolean;
+    /**
+     * Kustomisasi teks keterangan opsional.
+     * @default '(Opsional)'
+     */
+    optionalText?: string;
+    /**
+     * Teks petunjuk saat belum ada opsi yang dipilih.
+     * @default 'Pilih dropdown menu'
+     */
+    placeholder?: string;
+    /**
+     * Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple).
+     */
+    value?: any;
+    /**
+     * Nilai awal tidak terkontrol (uncontrolled initial value).
+     */
+    defaultValue?: any;
+    /**
+     * Daftar pilihan opsi dropdown. Dapat berupa array of object `{ label, value }` atau array of string.
+     */
+    options?: Array<SelectboxOption | string>;
+    /**
+     * Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Mengaktifkan kotak pencarian (search input) di dalam menu dropdown.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder pada kotak pencarian di dalam dropdown.
+     * @default 'Cari'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Teks tombol terapkan pada footer multi-select.
+     * @default 'Terapkan'
+     */
+    applyText?: string;
+    /**
+     * Teks tombol reset pada footer multi-select.
+     * @default 'Reset'
+     */
+    resetText?: string;
+    /**
+     * Nama form field HTML.
+     */
+    name?: string;
+    /**
+     * Identifier unik elemen selectbox.
+     */
+    id?: string;
+    /**
+     * Status apakah selectbox sedang dalam kondisi error / tidak valid.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Pesan teks penjelasan kesalahan validasi di bawah field.
+     */
+    errorMessage?: string;
+    /**
+     * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+     */
+    helperText?: string;
+    /**
+     * Posisi teks helper
+     */
+    helperTextPosition?: "top" | "bottom";
+    /**
+     * Skala ukuran selectbox.
+     * - `'sm'`: 36px
+     * - `'md'`: 48px (standar desain)
+     * - `'lg'`: 56px
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Bentuk sudut kelengkungan selectbox.
+     * - `'none'`: 0px
+     * - `'sm'`: 4px
+     * - `'md'`: 8px (standar desain)
+     * - `'lg'`: 12px
+     * - `'full'`: 9999px (kapsul)
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menjadikan lebar field selectbox memenuhi kontainer penuh (full-width 100%).
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Status apakah selectbox dinonaktifkan (disabled).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Ref instance elemen control selectbox untuk akses DOM langsung.
+     */
+    inputRef?: any;
+    /**
+     * Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Menampilkan spinner loading dan menonaktifkan interaksi selectbox.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Menjadikan selectbox hanya-baca (tidak bisa dibuka/diubah).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Kustomisasi visual granular root / form-item (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback event saat nilai pilihan berubah.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Callback event saat pengguna mengetik di kolom pencarian.
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Callback event saat menu dropdown terbuka.
+     */
+    onOpen?: () => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover
+     * tidak bergeser secara horizontal mengikuti tepi layar.
+     * Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan.
+     * @default false
+     */
+    disableShift?: boolean;
+    /**
+     * Callback event saat menu dropdown ditutup.
+     */
+    onClose?: () => void;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        value?: SelectboxProps["value"];
+        defaultValue?: SelectboxProps["defaultValue"];
+        multiple?: SelectboxProps["multiple"];
+        disableShift?: SelectboxProps["disableShift"];
+        menuStyle?: SelectboxProps["menuStyle"];
+        listStyle?: SelectboxProps["listStyle"];
+        ui?: SelectboxProps["ui"];
+        disabled?: SelectboxProps["disabled"];
+        onOpen?: SelectboxProps["onOpen"];
+        searchable?: SelectboxProps["searchable"];
+        onClose?: SelectboxProps["onClose"];
+        options?: SelectboxProps["options"];
+        onChange?: SelectboxProps["onChange"];
+        onSearch?: SelectboxProps["onSearch"];
+        readOnly?: SelectboxProps["readOnly"];
+        className?: SelectboxProps["className"];
+        error?: SelectboxProps["error"];
+        errorMessage?: SelectboxProps["errorMessage"];
+        size?: SelectboxProps["size"];
+        block?: SelectboxProps["block"];
+        label?: SelectboxProps["label"];
+        labelClass?: SelectboxProps["labelClass"];
+        id?: SelectboxProps["id"];
+        labelStyle?: SelectboxProps["labelStyle"];
+        required?: SelectboxProps["required"];
+        optional?: SelectboxProps["optional"];
+        optionalText?: SelectboxProps["optionalText"];
+        helperText?: SelectboxProps["helperText"];
+        helperTextPosition?: SelectboxProps["helperTextPosition"];
+        helperTextClass?: SelectboxProps["helperTextClass"];
+        helperTextStyle?: SelectboxProps["helperTextStyle"];
+        controlClass?: SelectboxProps["controlClass"];
+        rounded?: SelectboxProps["rounded"];
+        controlStyle?: SelectboxProps["controlStyle"];
+        loading?: SelectboxProps["loading"];
+        placeholder?: SelectboxProps["placeholder"];
+        clearable?: SelectboxProps["clearable"];
+        menuClass?: SelectboxProps["menuClass"];
+        searchPlaceholder?: SelectboxProps["searchPlaceholder"];
+        listClass?: SelectboxProps["listClass"];
+        resetText?: SelectboxProps["resetText"];
+        applyText?: SelectboxProps["applyText"];
+        errorMessageClass?: SelectboxProps["errorMessageClass"];
+        errorMessageStyle?: SelectboxProps["errorMessageStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type SelectboxProps_ = typeof __propDef.props;
+export type SelectboxEvents = typeof __propDef.events;
+export type SelectboxSlots = typeof __propDef.slots;
+export default class Selectbox extends SvelteComponent<SelectboxProps_, SelectboxEvents, SelectboxSlots> {
+}
+export {};

package/dist/web/sonner/AI_GUIDE.md

@@ -0,0 +1,98 @@
+# <Sonner /> — TTDK Component Reference
+
+Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.
+
+## 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/sonner/sonner.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Sonner from "@ttdk-design-system/library-react/web/sonner";
+
+// Vue 3
+import Sonner from "@ttdk-design-system/library-vue/web/sonner";
+
+// Svelte
+import Sonner from "@ttdk-design-system/library-svelte/web/sonner";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `position?` | `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'` | `bottom-right` | Posisi penempatan toast pada layar. - `'top-left'`, `'top-center'`, `'top-right'` - `'bottom-left'`, `'bottom-center'`, `'bottom-right'` |
+| `richColors?` | `boolean` | `true` | Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning). |
+| `closeButton?` | `boolean` | `true` | Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast. |
+| `theme?` | `'light' | 'dark' | 'system'` | `light` | Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`). |
+| `expand?` | `boolean` | `false` | Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul. |
+| `duration?` | `number` | `4000` | Durasi tampilan toast dalam milidetik sebelum otomatis menghilang. |
+| `visibleToasts?` | `number` | `3` | Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar. |
+| `gap?` | `number` | `14` | Jarak vertikal antar kartu toast dalam piksel. |
+| `offset?` | `number` | `24` | Jarak offset tepi layar dalam piksel. |
+| `mobileOffset?` | `number` | `16` | Jarak offset pada perangkat seluler / mobile dalam piksel. |
+| `dir?` | `'ltr' | 'rtl'` | `ltr` | Arah teks layout tata letak (`'ltr'` atau `'rtl'`). |
+| `className?` | `string` | `-` | Kelas CSS kustom tambahan untuk wadah toaster. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Sonner from "@ttdk-design-system/library-react/web/sonner";
+import "@ttdk-design-system/library-react/web/sonner/sonner.css";
+import toast from "sonner-js";
+
+export function Example() {
+  return (
+    <div>
+      <Sonner position="bottom-right" richColors />
+      <button onClick={() => toast.success("Data pasien berhasil disimpan!")}>
+        Tampilkan Toast Sukses
+      </button>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Sonner from "@ttdk-design-system/library-vue/web/sonner";
+import "@ttdk-design-system/library-vue/web/sonner/sonner.css";
+import toast from "sonner-js";
+
+const showToast = () => {
+  toast.success("Data pasien berhasil disimpan!");
+};
+</script>
+
+<template>
+  <div>
+    <Sonner position="bottom-right" :rich-colors="true" />
+    <button @click="showToast">
+      Tampilkan Toast Sukses
+    </button>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Sonner from "@ttdk-design-system/library-svelte/web/sonner";
+  import "@ttdk-design-system/library-svelte/web/sonner/sonner.css";
+  import toast from "sonner-js";
+
+  const showToast = () => {
+    toast.success("Data pasien berhasil disimpan!");
+  };
+</script>
+
+<div>
+  <Sonner position="bottom-right" richColors={true} />
+  <button on:click={showToast}>
+    Tampilkan Toast Sukses
+  </button>
+</div>
+```

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

@@ -0,0 +1,46 @@
+import SonnerComponent from './sonner.svelte';
+export interface ToastAction {
+    label: string;
+    onClick: (event: MouseEvent) => void;
+    cancel?: boolean;
+}
+export interface ToastOptions {
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    closeButton?: boolean;
+    richColors?: boolean;
+    duration?: number;
+    invert?: boolean;
+    description?: string;
+    action?: ToastAction;
+    onDismiss?: (toast?: any) => void;
+    onAutoClose?: (toast?: any) => void;
+    [key: string]: any;
+}
+export interface ToastPromiseOptions<T = any> {
+    loading?: string;
+    success?: string | ((data: T) => string);
+    error?: string | ((err: any) => string);
+    description?: string | ((data: any) => string);
+    finally?: () => void | Promise<void>;
+}
+export interface ToastInterface {
+    (message: string, options?: ToastOptions): string | number;
+    /**
+     * Compatibility property for Vue template unref / Volar __VLS_withDotValue closure.
+     */
+    readonly value: ToastInterface;
+    message: (message: string, options?: ToastOptions) => string | number;
+    success: (message: string, options?: ToastOptions) => string | number;
+    error: (message: string, options?: ToastOptions) => string | number;
+    danger: (message: string, options?: ToastOptions) => string | number;
+    info: (message: string, options?: ToastOptions) => string | number;
+    warning: (message: string, options?: ToastOptions) => string | number;
+    loading: (message: string, options?: ToastOptions) => string | number;
+    dismiss: (id?: number | string, exitTime?: number) => void;
+    promise: <T = any>(promise: Promise<T> | (() => Promise<T>), data?: ToastPromiseOptions<T>) => void;
+    config: (userConfig: any) => void;
+}
+export declare const toast: ToastInterface;
+export { SonnerComponent as Sonner, SonnerComponent as Toaster };
+export default SonnerComponent;
+export type { SonnerProps, SonnerPosition, SonnerTheme } from './sonner.svelte';

package/dist/web/sonner/index.js

@@ -0,0 +1,64 @@
+import sonnerJsToast from 'sonner-js';
+import SonnerComponent from './sonner.svelte';
+function getRawToast() {
+    const t = sonnerJsToast;
+    if (t && typeof t.default === 'function') {
+        return t.default;
+    }
+    if (typeof t === 'function') {
+        return t;
+    }
+    return t?.default || t;
+}
+const toastFunction = (message, options) => {
+    const raw = getRawToast();
+    return typeof raw === 'function' ? raw(message, options) : undefined;
+};
+export const toast = Object.assign(toastFunction, {
+    message: (message, options) => {
+        const raw = getRawToast();
+        return raw?.message ? raw.message(message, options) : raw?.(message, options);
+    },
+    success: (message, options) => getRawToast()?.success?.(message, options),
+    error: (message, options) => getRawToast()?.error?.(message, options),
+    danger: (message, options) => {
+        const raw = getRawToast();
+        return (raw?.danger || raw?.error)?.(message, options);
+    },
+    info: (message, options) => getRawToast()?.info?.(message, options),
+    warning: (message, options) => getRawToast()?.warning?.(message, options),
+    loading: (message, options) => getRawToast()?.loading?.(message, options),
+    dismiss: (id, exitTime) => getRawToast()?.dismiss?.(id, exitTime),
+    promise: (promise, data) => getRawToast()?.promise?.(promise, data),
+    config: (userConfig) => getRawToast()?.config?.(userConfig),
+});
+try {
+    Object.defineProperty(toast, 'value', {
+        get() {
+            return toast;
+        },
+        enumerable: true,
+        configurable: true,
+    });
+}
+catch (_) { }
+if (typeof window !== 'undefined') {
+    try {
+        const raw = getRawToast();
+        if (raw && typeof raw.config === 'function') {
+            raw.config({
+                toastOptions: {
+                    position: 'bottom-right',
+                    closeButton: true,
+                    richColors: true,
+                    duration: 4000,
+                },
+            });
+        }
+    }
+    catch (e) {
+        // Abaikan jika dieksekusi di lingkungan SSR / non-DOM
+    }
+}
+export { SonnerComponent as Sonner, SonnerComponent as Toaster };
+export default SonnerComponent;

package/dist/web/sonner/manifest.json

@@ -0,0 +1,132 @@
+{
+  "name": "@ttdk-design-system/sonner",
+  "component": "Sonner",
+  "folder": "sonner",
+  "description": "Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "sonner.css",
+      "importPath": "web/sonner/sonner.css"
+    }
+  ],
+  "props": {
+    "position": {
+      "name": "position",
+      "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
+      "optional": true,
+      "default": "bottom-right",
+      "description": "Posisi penempatan toast pada layar. - `'top-left'`, `'top-center'`, `'top-right'` - `'bottom-left'`, `'bottom-center'`, `'bottom-right'`",
+      "example": null,
+      "param": null
+    },
+    "richColors": {
+      "name": "richColors",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).",
+      "example": null,
+      "param": null
+    },
+    "closeButton": {
+      "name": "closeButton",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast.",
+      "example": null,
+      "param": null
+    },
+    "theme": {
+      "name": "theme",
+      "type": "'light' | 'dark' | 'system'",
+      "optional": true,
+      "default": "light",
+      "description": "Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`).",
+      "example": null,
+      "param": null
+    },
+    "expand": {
+      "name": "expand",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul.",
+      "example": null,
+      "param": null
+    },
+    "duration": {
+      "name": "duration",
+      "type": "number",
+      "optional": true,
+      "default": "4000",
+      "description": "Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.",
+      "example": null,
+      "param": null
+    },
+    "visibleToasts": {
+      "name": "visibleToasts",
+      "type": "number",
+      "optional": true,
+      "default": "3",
+      "description": "Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.",
+      "example": null,
+      "param": null
+    },
+    "gap": {
+      "name": "gap",
+      "type": "number",
+      "optional": true,
+      "default": "14",
+      "description": "Jarak vertikal antar kartu toast dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "offset": {
+      "name": "offset",
+      "type": "number",
+      "optional": true,
+      "default": "24",
+      "description": "Jarak offset tepi layar dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "mobileOffset": {
+      "name": "mobileOffset",
+      "type": "number",
+      "optional": true,
+      "default": "16",
+      "description": "Jarak offset pada perangkat seluler / mobile dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "dir": {
+      "name": "dir",
+      "type": "'ltr' | 'rtl'",
+      "optional": true,
+      "default": "ltr",
+      "description": "Arah teks layout tata letak (`'ltr'` atau `'rtl'`).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Kelas CSS kustom tambahan untuk wadah toaster.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/sonner/sonner.css

@@ -0,0 +1 @@
+[data-sonner-toasters]{font-family:var(--ttdk-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-sonner-toaster]{--width:360px;--border-radius:10px;--gap:12px;--offset:24px;--mobile-offset:16px;z-index:999999}[data-sonner-toaster][data-sonner-theme=light],:root:not(.dark) [data-sonner-toaster]{--normal-bg:var(--ttdk-bg-card);--normal-border:var(--ttdk-stroke-subtle);--normal-text:var(--ttdk-text-icon-primary);--normal-text2:var(--ttdk-text-icon-secondary);--normal-cancel-bg:var(--ttdk-bg-secondary-disabled);--success-bg:var(--ttdk-bg-status-success-subtle);--success-border:var(--ttdk-stroke-status-success);--success-text:var(--ttdk-text-icon-status-success);--info-bg:var(--ttdk-bg-status-info-subtle);--info-border:var(--ttdk-stroke-status-info);--info-text:var(--ttdk-text-icon-status-info);--warning-bg:var(--ttdk-bg-status-warning-subtle);--warning-border:var(--ttdk-stroke-status-warning);--warning-text:var(--ttdk-text-icon-status-warning);--error-bg:var(--ttdk-bg-status-error-subtle);--error-border:var(--ttdk-stroke-status-error);--error-text:var(--ttdk-text-icon-status-error)}[data-sonner-toaster][data-sonner-theme=dark],.dark [data-sonner-toaster]{--normal-bg:var(--ttdk-bg-card);--normal-border:var(--ttdk-stroke-subtle);--normal-text:var(--ttdk-text-icon-primary);--normal-text2:var(--ttdk-text-icon-secondary);--normal-cancel-bg:var(--ttdk-bg-secondary-disabled);--success-bg:var(--ttdk-color-green-900);--success-border:var(--ttdk-color-green-700);--success-text:var(--ttdk-color-green-300);--info-bg:var(--ttdk-color-blue-900);--info-border:var(--ttdk-color-blue-700);--info-text:var(--ttdk-color-blue-300);--warning-bg:var(--ttdk-color-orange-900);--warning-border:var(--ttdk-color-orange-700);--warning-text:var(--ttdk-color-orange-300);--error-bg:var(--ttdk-color-red-900);--error-border:var(--ttdk-color-red-700);--error-text:var(--ttdk-color-red-300)}[data-sonner-toast]{border-radius:var(--border-radius);border:1px solid var(--normal-border);background-color:var(--normal-bg);color:var(--normal-text);box-shadow:var(--ttdk-shadow-lg);gap:10px;padding:14px 16px;font-size:13px;line-height:1.4;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.16,1,.3,1),height .3s}.dark [data-sonner-toast]{box-shadow:var(--ttdk-shadow-lg)}[data-sonner-toast] [data-content]{flex-direction:column;gap:3px;display:flex}[data-sonner-toast] [data-title]{color:inherit;letter-spacing:-.01em;font-size:13px;font-weight:600}[data-sonner-toast] [data-description]{color:var(--normal-text2);font-size:12px;font-weight:400;line-height:1.4}[data-sonner-toast] [data-button]{background:var(--normal-text);height:28px;color:var(--normal-bg);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 10px;font-family:inherit;font-size:12px;font-weight:600;transition:opacity .15s,transform .1s;display:inline-flex}[data-sonner-toast] [data-button]:hover{opacity:.9}[data-sonner-toast] [data-button]:active{transform:scale(.97)}[data-sonner-toast] [data-button][data-cancel]{background:var(--normal-cancel-bg);color:var(--normal-text)}[data-sonner-toast] [data-close-button=true]{background:var(--normal-bg);border:1px solid var(--normal-border);width:20px;height:20px;color:var(--normal-text2);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}[data-sonner-toast] [data-close-button=true]:hover{background:var(--normal-cancel-bg);color:var(--normal-text)}[data-sonner-toast][data-rich-colors][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-sonner-toast][data-rich-colors][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-sonner-toast][data-rich-colors][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-sonner-toast][data-rich-colors][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}