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

package/dist/web/sonner/sonner.svelte

@@ -0,0 +1,85 @@
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import toast from "sonner-js";
+export let theme = void 0;
+export let expand = void 0;
+export let visibleToasts = void 0;
+export let gap = void 0;
+export let offset = void 0;
+export let mobileOffset = void 0;
+export let dir = void 0;
+export let position = void 0;
+export let closeButton = void 0;
+export let richColors = void 0;
+export let duration = void 0;
+export let className = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+onMount(() => {
+  toast.config({
+    theme: theme === "dark" ? "dark" : "light",
+    expand: expand ?? false,
+    visibleToasts: visibleToasts ?? 3,
+    gap: gap ?? 14,
+    offset: offset ?? 24,
+    mobileOffset: mobileOffset ?? 16,
+    dir: dir ?? "ltr",
+    toastOptions: {
+      position: position ?? "bottom-right",
+      closeButton: closeButton ?? true,
+      richColors: richColors ?? true,
+      duration: duration ?? 4e3
+    }
+  });
+});
+function onUpdateFn_0(..._args) {
+  toast.config({
+    theme: theme === "dark" ? "dark" : "light",
+    expand: expand ?? false,
+    visibleToasts: visibleToasts ?? 3,
+    gap: gap ?? 14,
+    offset: offset ?? 24,
+    mobileOffset: mobileOffset ?? 16,
+    dir: dir ?? "ltr",
+    toastOptions: {
+      position: position ?? "bottom-right",
+      closeButton: closeButton ?? true,
+      richColors: richColors ?? true,
+      duration: duration ?? 4e3
+    }
+  });
+}
+$:
+  onUpdateFn_0(
+    ...[
+      position,
+      richColors,
+      closeButton,
+      theme,
+      expand,
+      duration,
+      visibleToasts,
+      gap,
+      offset,
+      mobileOffset,
+      dir
+    ]
+  );
+</script>
+
+<div
+  style={stringifyStyles({
+    display: "none",
+  })}
+  aria-hidden="true"
+  class={`ttdk-sonner-wrapper ${className || ""}`}
+/>

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

@@ -0,0 +1,105 @@
+import { SvelteComponent } from "svelte";
+export type SonnerPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type SonnerTheme = "light" | "dark" | "system";
+export interface SonnerProps {
+    /**
+     * Posisi penempatan toast pada layar.
+     * - `'top-left'`, `'top-center'`, `'top-right'`
+     * - `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
+     *
+     * @default 'bottom-right'
+     */
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /**
+     * Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).
+     *
+     * @default true
+     */
+    richColors?: boolean;
+    /**
+     * Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast.
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`).
+     *
+     * @default 'light'
+     */
+    theme?: "light" | "dark" | "system";
+    /**
+     * Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul.
+     *
+     * @default false
+     */
+    expand?: boolean;
+    /**
+     * Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.
+     *
+     * @default 4000
+     */
+    duration?: number;
+    /**
+     * Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.
+     *
+     * @default 3
+     */
+    visibleToasts?: number;
+    /**
+     * Jarak vertikal antar kartu toast dalam piksel.
+     *
+     * @default 14
+     */
+    gap?: number;
+    /**
+     * Jarak offset tepi layar dalam piksel.
+     *
+     * @default 24
+     */
+    offset?: number;
+    /**
+     * Jarak offset pada perangkat seluler / mobile dalam piksel.
+     *
+     * @default 16
+     */
+    mobileOffset?: number;
+    /**
+     * Arah teks layout tata letak (`'ltr'` atau `'rtl'`).
+     *
+     * @default 'ltr'
+     */
+    dir?: "ltr" | "rtl";
+    /**
+     * Kelas CSS kustom tambahan untuk wadah toaster.
+     */
+    className?: string;
+}
+declare const __propDef: {
+    props: {
+        theme?: SonnerProps["theme"];
+        expand?: SonnerProps["expand"];
+        visibleToasts?: SonnerProps["visibleToasts"];
+        gap?: SonnerProps["gap"];
+        offset?: SonnerProps["offset"];
+        mobileOffset?: SonnerProps["mobileOffset"];
+        dir?: SonnerProps["dir"];
+        position?: SonnerProps["position"];
+        closeButton?: SonnerProps["closeButton"];
+        richColors?: SonnerProps["richColors"];
+        duration?: SonnerProps["duration"];
+        className?: SonnerProps["className"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type SonnerProps_ = typeof __propDef.props;
+export type SonnerEvents = typeof __propDef.events;
+export type SonnerSlots = typeof __propDef.slots;
+export default class Sonner extends SvelteComponent<SonnerProps_, SonnerEvents, SonnerSlots> {
+}
+export {};

package/dist/web/table/AI_GUIDE.md

@@ -0,0 +1,145 @@
+# <Table /> — TTDK Component Reference
+
+Komponen kontainer utama tabel (Compound Table ala Shadcn UI).
+
+## 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/table/table.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Table from "@ttdk-design-system/library-react/web/table";
+
+// Vue 3
+import Table from "@ttdk-design-system/library-vue/web/table";
+
+// Svelte
+import Table from "@ttdk-design-system/library-svelte/web/table";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant?` | `'default' | 'striped' | 'clean'` | `default` | Varian tampilan visual tabel. - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu. - `'striped'`: Tampilan selang-seling (zebra). - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega. |
+| `rounded?` | `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number` | `sm` | Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12` |
+| `shadow?` | `'none' | 'sm' | 'md' | 'lg' | (string & {})` | `sm` | Bayangan elevasi kontainer tabel. - Preset: `'none'` | `'sm'` | `'md'` | `'lg'` - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`) |
+| `minWidth?` | `string | number` | `-` | Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'` |
+| `maxHeight?` | `string | number` | `-` | Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'` |
+| `hoverable?` | `boolean` | `true` | Efek hover saat kursor melayang di atas baris tabel. |
+| `stickyHeader?` | `boolean` | `false` | Membuat header tabel menempel di atas (sticky) saat konten di-scroll. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading overlay di atas tabel. |
+| `caption?` | `string` | `-` | Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps. |
+| `tableStyle?` | `UiProps` | `-` | Style kustom untuk elemen table (table.ttdk-table) melalui UiProps. |
+| `tableClass?` | `string` | `-` | Class CSS kustom untuk elemen table (table.ttdk-table). |
+| `className?` | `string` | `-` | Class CSS kustom untuk kontainer wrapper luar. |
+| `children?` | `any` | `-` | Konten anak (TableHeader, TableBody, TableFooter, TableCaption). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Table from "@ttdk-design-system/library-react/table";
+import "@ttdk-design-system/library-react/table/table.css";
+
+export function Example() {
+  return (
+    <Table variant="striped" size="md">
+      <thead>
+        <tr>
+          <th>Kode Faskes</th>
+          <th>Nama Fasilitas</th>
+          <th>Jenis</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>P320101</td>
+          <td>Puskesmas Cibinong</td>
+          <td>Puskesmas</td>
+          <td>Aktif</td>
+        </tr>
+        <tr>
+          <td>RS320102</td>
+          <td>RSUD Ciawi</td>
+          <td>Rumah Sakit</td>
+          <td>Aktif</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Table from "@ttdk-design-system/library-vue/table";
+import "@ttdk-design-system/library-vue/table/table.css";
+</script>
+
+<template>
+  <Table variant="striped" size="md">
+    <thead>
+      <tr>
+        <th>Kode Faskes</th>
+        <th>Nama Fasilitas</th>
+        <th>Jenis</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>P320101</td>
+        <td>Puskesmas Cibinong</td>
+        <td>Puskesmas</td>
+        <td>Aktif</td>
+      </tr>
+      <tr>
+        <td>RS320102</td>
+        <td>RSUD Ciawi</td>
+        <td>Rumah Sakit</td>
+        <td>Aktif</td>
+      </tr>
+    </tbody>
+  </Table>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Table from "@ttdk-design-system/library-svelte/table";
+  import "@ttdk-design-system/library-svelte/table/table.css";
+</script>
+
+<Table variant="striped" size="md">
+  <thead>
+    <tr>
+      <th>Kode Faskes</th>
+      <th>Nama Fasilitas</th>
+      <th>Jenis</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>P320101</td>
+      <td>Puskesmas Cibinong</td>
+      <td>Puskesmas</td>
+      <td>Aktif</td>
+    </tr>
+    <tr>
+      <td>RS320102</td>
+      <td>RSUD Ciawi</td>
+      <td>Rumah Sakit</td>
+      <td>Aktif</td>
+    </tr>
+  </tbody>
+</Table>
+```

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

@@ -0,0 +1,21 @@
+export { default as Table } from './table.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableBody } from './table-body.svelte';
+export { default as TableFooter } from './table-footer.svelte';
+export { default as TableRow } from './table-row.svelte';
+export { default as TableHead } from './table-head.svelte';
+export { default as TableCell } from './table-cell.svelte';
+export { default as TableCaption } from './table-caption.svelte';
+export { default as TableEmpty } from './table-empty.svelte';
+export * from './table.svelte';
+export * from './table-header.svelte';
+export * from './table-body.svelte';
+export * from './table-footer.svelte';
+export * from './table-row.svelte';
+export * from './table-head.svelte';
+export * from './table-cell.svelte';
+export * from './table-caption.svelte';
+export * from './table-empty.svelte';
+export { createTable, createColumnHelper, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getExpandedRowModel, getGroupedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, } from '@tanstack/table-core';
+export * from '@tanstack/table-core';
+export { default } from './table.svelte';

package/dist/web/table/index.js

@@ -0,0 +1,22 @@
+export { default as Table } from './table.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableBody } from './table-body.svelte';
+export { default as TableFooter } from './table-footer.svelte';
+export { default as TableRow } from './table-row.svelte';
+export { default as TableHead } from './table-head.svelte';
+export { default as TableCell } from './table-cell.svelte';
+export { default as TableCaption } from './table-caption.svelte';
+export { default as TableEmpty } from './table-empty.svelte';
+export * from './table.svelte';
+export * from './table-header.svelte';
+export * from './table-body.svelte';
+export * from './table-footer.svelte';
+export * from './table-row.svelte';
+export * from './table-head.svelte';
+export * from './table-cell.svelte';
+export * from './table-caption.svelte';
+export * from './table-empty.svelte';
+// Re-export TanStack SVELTE Table (All core + framework adapter hooks & renderers)
+export { createTable, createColumnHelper, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getExpandedRowModel, getGroupedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, } from '@tanstack/table-core';
+export * from '@tanstack/table-core';
+export { default } from './table.svelte';

package/dist/web/table/manifest.json

@@ -0,0 +1,168 @@
+{
+  "name": "@ttdk-design-system/table",
+  "component": "Table",
+  "folder": "table",
+  "description": "Komponen kontainer utama tabel (Compound Table ala Shadcn UI).",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "table.css",
+      "importPath": "web/table/table.css"
+    }
+  ],
+  "props": {
+    "variant": {
+      "name": "variant",
+      "type": "'default' | 'striped' | 'clean'",
+      "optional": true,
+      "default": "default",
+      "description": "Varian tampilan visual tabel. - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu. - `'striped'`: Tampilan selang-seling (zebra). - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number",
+      "optional": true,
+      "default": "sm",
+      "description": "Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12`",
+      "example": null,
+      "param": null
+    },
+    "shadow": {
+      "name": "shadow",
+      "type": "'none' | 'sm' | 'md' | 'lg' | (string & {})",
+      "optional": true,
+      "default": "sm",
+      "description": "Bayangan elevasi kontainer tabel. - Preset: `'none'` | `'sm'` | `'md'` | `'lg'` - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`)",
+      "example": null,
+      "param": null
+    },
+    "minWidth": {
+      "name": "minWidth",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'`",
+      "example": null,
+      "param": null
+    },
+    "maxHeight": {
+      "name": "maxHeight",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'`",
+      "example": null,
+      "param": null
+    },
+    "hoverable": {
+      "name": "hoverable",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Efek hover saat kursor melayang di atas baris tabel.",
+      "example": null,
+      "param": null
+    },
+    "stickyHeader": {
+      "name": "stickyHeader",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat header tabel menempel di atas (sticky) saat konten di-scroll.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner loading overlay di atas tabel.",
+      "example": null,
+      "param": null
+    },
+    "caption": {
+      "name": "caption",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableStyle": {
+      "name": "tableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen table (table.ttdk-table) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableClass": {
+      "name": "tableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen table (table.ttdk-table).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kontainer wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak (TableHeader, TableBody, TableFooter, TableCaption).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/table/table-body.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<tbody
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-body ${className || ""}`.trim()}><slot /></tbody
+>

package/dist/web/table/table-body.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface TableBodyProps {
+    /**
+     * Kustomisasi visual granular tbody (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten baris data (TableRow).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableBodyProps["className"];
+        ui?: TableBodyProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableBodyProps_ = typeof __propDef.props;
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = typeof __propDef.slots;
+export default class TableBody extends SvelteComponent<TableBodyProps_, TableBodyEvents, TableBodySlots> {
+}
+export {};

package/dist/web/table/table-caption.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<caption
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-caption ${className || ""}`.trim()}><slot /></caption
+>

package/dist/web/table/table-caption.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface TableCaptionProps {
+    /**
+     * Kustomisasi visual granular caption (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten caption tabel.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableCaptionProps["className"];
+        ui?: TableCaptionProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableCaptionProps_ = typeof __propDef.props;
+export type TableCaptionEvents = typeof __propDef.events;
+export type TableCaptionSlots = typeof __propDef.slots;
+export default class TableCaption extends SvelteComponent<TableCaptionProps_, TableCaptionEvents, TableCaptionSlots> {
+}
+export {};