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

package/src/web/selectbox/selectbox.vue.d.ts

@@ -0,0 +1,300 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+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;
+}
+
+declare const component: DefineComponent<SelectboxProps>;
+export default component;

package/src/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/src/web/sonner/index.ts

@@ -0,0 +1,114 @@
+import sonnerJsToast from 'sonner-js';
+import SonnerComponent from './sonner.vue';
+
+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;
+}
+
+function getRawToast(): any {
+  const t = sonnerJsToast as any;
+  if (t && typeof t.default === 'function') {
+    return t.default;
+  }
+  if (typeof t === 'function') {
+    return t;
+  }
+  return t?.default || t;
+}
+
+const toastFunction = (message: string, options?: ToastOptions) => {
+  const raw = getRawToast();
+  return typeof raw === 'function' ? raw(message, options) : undefined;
+};
+
+export const toast: ToastInterface = Object.assign(toastFunction, {
+  message: (message: string, options?: ToastOptions) => {
+    const raw = getRawToast();
+    return raw?.message ? raw.message(message, options) : raw?.(message, options);
+  },
+  success: (message: string, options?: ToastOptions) => getRawToast()?.success?.(message, options),
+  error: (message: string, options?: ToastOptions) => getRawToast()?.error?.(message, options),
+  danger: (message: string, options?: ToastOptions) => {
+    const raw = getRawToast();
+    return (raw?.danger || raw?.error)?.(message, options);
+  },
+  info: (message: string, options?: ToastOptions) => getRawToast()?.info?.(message, options),
+  warning: (message: string, options?: ToastOptions) => getRawToast()?.warning?.(message, options),
+  loading: (message: string, options?: ToastOptions) => getRawToast()?.loading?.(message, options),
+  dismiss: (id?: number | string, exitTime?: number) => getRawToast()?.dismiss?.(id, exitTime),
+  promise: <T = any>(promise: Promise<T> | (() => Promise<T>), data?: ToastPromiseOptions<T>) => getRawToast()?.promise?.(promise, data),
+  config: (userConfig: any) => getRawToast()?.config?.(userConfig),
+}) as ToastInterface;
+
+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;
+export type { SonnerProps, SonnerPosition, SonnerTheme } from './sonner.vue';

package/src/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/src/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)}