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

package/README.md

@@ -1,3 +1,103 @@
-# Temporary Holding Version
+# @ttdk-design-system/library-svelte
+
+Official Svelte component library for **TTDK Design System**, developed for the Digital Transformation Office (DTO) Kementerian Kesehatan Republik Indonesia (SATUSEHAT ecosystem).
+
+Built with Mitosis for seamless cross-framework consistency, strong TypeScript typings, and mobile webview readiness.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @ttdk-design-system/library-svelte
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Design Tokens (CSS)
+
+Import the base design tokens (colors, typography, radii, spacing) in your root layout or entry file (e.g., `+layout.svelte` or `App.svelte`):
+
+```typescript
+import "@ttdk-design-system/library-svelte/theme/tokens.css";
+```
+
+### 2. Import Component Stylesheets & Components
+
+Each component comes with modular styling for optimal bundle sizes:
+
+```svelte
+<script lang="ts">
+  import Button from "@ttdk-design-system/library-svelte/web/button";
+  import "@ttdk-design-system/library-svelte/web/button/button.css";
+
+  import Input from "@ttdk-design-system/library-svelte/web/input";
+  import "@ttdk-design-system/library-svelte/web/input/input.css";
+
+  import BottomSheet from "@ttdk-design-system/library-svelte/webview/bottomsheet";
+  import "@ttdk-design-system/library-svelte/webview/bottomsheet/bottomsheet.css";
+
+  let sheetOpen = false;
+  let name = "";
+</script>
+
+<div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
+  <Input
+    bind:value={name}
+    label="Nama Pasien"
+    placeholder="Masukkan nama lengkap"
+  />
+
+  <Button variant="primary" on:click={() => (sheetOpen = true)}>
+    Buka Detail (BottomSheet)
+  </Button>
+
+  <BottomSheet
+    open={sheetOpen}
+    mode="auto"
+    height="md"
+    title="Detail Rekam Medis"
+    description="Hasil pemeriksaan laboratorium pasien"
+    close={true}
+    onClose={() => (sheetOpen = false)}
+  >
+    <p>Halo, {name || "Pasien"}! Data medis Anda telah terverifikasi di SATUSEHAT.</p>
+  </BottomSheet>
+</div>
+```
+
+---
+
+## 📱 Modules
+
+TTDK Design System is split into two specialized modules:
+
+1. **`web`**: Components designed for desktop & mobile responsive web applications (Accordion, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, Chip, Dropdown, Modal, Pagination, Popover, Selectbox, Sonner, Table, Tabs, Text, Textarea, Tooltip).
+2. **`webview`**: Components optimized for mobile in-app webviews (e.g., SATUSEHAT Mobile), featuring native Apple HIG & Material 3 aesthetics, notch safe-area insets, swipe gestures, and pull-to-dismiss behavior (BottomSheet, ButtonIos, ButtonMaterial).
+
+---
+
+## 🎨 Tailwind CSS Integration
+
+Include the TTDK preset in your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  presets: [
+    require("@ttdk-design-system/library-svelte/tailwind-preset.cjs")
+  ],
+  content: [
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+    "./node_modules/@ttdk-design-system/library-svelte/**/*.{svelte,js,ts,jsx,tsx}"
+  ]
+};
+```
+
+---
+
+## 📄 License
+
+MIT &copy; DTO Kementerian Kesehatan Republik Indonesia.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./tailwind-preset";

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./tailwind-preset";

package/dist/core/tailwind-preset.cjs

@@ -0,0 +1,62 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset (CommonJS)
+ */
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        "0": "var(--ttdk-spacing-0, 0px)",
+        "2": "var(--ttdk-spacing-2, 2px)",
+        "4": "var(--ttdk-spacing-4, 4px)",
+        "6": "var(--ttdk-spacing-6, 6px)",
+        "8": "var(--ttdk-spacing-8, 8px)",
+        "12": "var(--ttdk-spacing-12, 12px)",
+        "16": "var(--ttdk-spacing-16, 16px)",
+        "20": "var(--ttdk-spacing-20, 20px)",
+        "24": "var(--ttdk-spacing-24, 24px)",
+        "32": "var(--ttdk-spacing-32, 32px)",
+        "48": "var(--ttdk-spacing-48, 48px)",
+        "64": "var(--ttdk-spacing-64, 64px)",
+        "96": "var(--ttdk-spacing-96, 96px)",
+      },
+      boxShadow: {
+        "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+        "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+        "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+        "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+      },
+      maxWidth: {
+        "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+        "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+      },
+      colors: {
+        ttdk: {
+          primary: {
+            DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+            hover: "var(--ttdk-brand-strong, #128f8a)",
+            subtle: "var(--ttdk-brand-subtle, #b8edea)",
+          },
+          accent: {
+            DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+            hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+          },
+          surface: {
+            DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+            subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+            dark: "var(--ttdk-color-neutral-black, #141313)",
+          },
+          border: {
+            DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+            dark: "var(--ttdk-stroke-subtle, #313336)",
+          },
+        },
+      },
+      fontFamily: {
+        sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+      },
+    },
+  },
+};

package/dist/core/tailwind-preset.d.cts

@@ -0,0 +1,63 @@
+export namespace theme {
+    namespace extend {
+        let spacing: {
+            "0": string;
+            "2": string;
+            "4": string;
+            "6": string;
+            "8": string;
+            "12": string;
+            "16": string;
+            "20": string;
+            "24": string;
+            "32": string;
+            "48": string;
+            "64": string;
+            "96": string;
+        };
+        let boxShadow: {
+            "ttdk-sm": string;
+            "ttdk-md": string;
+            "ttdk-lg": string;
+            "ttdk-top": string;
+            "ttdk-bottom": string;
+            "ttdk-right": string;
+            "ttdk-left": string;
+        };
+        let maxWidth: {
+            "ttdk-mobile": string;
+            "ttdk-desktop": string;
+        };
+        namespace colors {
+            namespace ttdk {
+                namespace primary {
+                    let DEFAULT: string;
+                    let hover: string;
+                    let subtle: string;
+                }
+                namespace accent {
+                    let DEFAULT_1: string;
+                    export { DEFAULT_1 as DEFAULT };
+                    let hover_1: string;
+                    export { hover_1 as hover };
+                }
+                namespace surface {
+                    let DEFAULT_2: string;
+                    export { DEFAULT_2 as DEFAULT };
+                    let subtle_1: string;
+                    export { subtle_1 as subtle };
+                    export let dark: string;
+                }
+                namespace border {
+                    let DEFAULT_3: string;
+                    export { DEFAULT_3 as DEFAULT };
+                    let dark_1: string;
+                    export { dark_1 as dark };
+                }
+            }
+        }
+        namespace fontFamily {
+            let sans: string[];
+        }
+    }
+}

package/dist/core/tailwind-preset.d.ts

@@ -0,0 +1,74 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset
+ *
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
+ * to standard Tailwind CSS theme configuration.
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ * ```js
+ * module.exports = {
+ *   presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
+ *   content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
+ * }
+ * ```
+ */
+export declare const ttdkTailwindPreset: {
+    theme: {
+        extend: {
+            spacing: {
+                "0": string;
+                "2": string;
+                "4": string;
+                "6": string;
+                "8": string;
+                "12": string;
+                "16": string;
+                "20": string;
+                "24": string;
+                "32": string;
+                "48": string;
+                "64": string;
+                "96": string;
+            };
+            boxShadow: {
+                "ttdk-sm": string;
+                "ttdk-md": string;
+                "ttdk-lg": string;
+                "ttdk-top": string;
+                "ttdk-bottom": string;
+                "ttdk-right": string;
+                "ttdk-left": string;
+            };
+            maxWidth: {
+                "ttdk-mobile": string;
+                "ttdk-desktop": string;
+            };
+            colors: {
+                ttdk: {
+                    primary: {
+                        DEFAULT: string;
+                        hover: string;
+                        subtle: string;
+                    };
+                    accent: {
+                        DEFAULT: string;
+                        hover: string;
+                    };
+                    surface: {
+                        DEFAULT: string;
+                        subtle: string;
+                        dark: string;
+                    };
+                    border: {
+                        DEFAULT: string;
+                        dark: string;
+                    };
+                };
+            };
+            fontFamily: {
+                sans: string[];
+            };
+        };
+    };
+};
+export default ttdkTailwindPreset;

package/dist/core/tailwind-preset.js

@@ -0,0 +1,79 @@
+/**
+ * TTDK Design System — Official Tailwind CSS Preset
+ *
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
+ * to standard Tailwind CSS theme configuration.
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ * ```js
+ * module.exports = {
+ *   presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
+ *   content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
+ * }
+ * ```
+ */
+export const ttdkTailwindPreset = {
+    theme: {
+        extend: {
+            // 1. Spacing Scale TTDK (0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96)
+            spacing: {
+                "0": "var(--ttdk-spacing-0, 0px)",
+                "2": "var(--ttdk-spacing-2, 2px)",
+                "4": "var(--ttdk-spacing-4, 4px)",
+                "6": "var(--ttdk-spacing-6, 6px)",
+                "8": "var(--ttdk-spacing-8, 8px)",
+                "12": "var(--ttdk-spacing-12, 12px)",
+                "16": "var(--ttdk-spacing-16, 16px)",
+                "20": "var(--ttdk-spacing-20, 20px)",
+                "24": "var(--ttdk-spacing-24, 24px)",
+                "32": "var(--ttdk-spacing-32, 32px)",
+                "48": "var(--ttdk-spacing-48, 48px)",
+                "64": "var(--ttdk-spacing-64, 64px)",
+                "96": "var(--ttdk-spacing-96, 96px)",
+            },
+            // 2. Shadows & Elevation TTDK
+            boxShadow: {
+                "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
+                "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+                "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
+                "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+                "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
+            },
+            // 3. Responsive Container Widths
+            maxWidth: {
+                "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
+                "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
+            },
+            // 4. Semantic & Brand Colors
+            colors: {
+                ttdk: {
+                    primary: {
+                        DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
+                        hover: "var(--ttdk-brand-strong, #128f8a)",
+                        subtle: "var(--ttdk-brand-subtle, #b8edea)",
+                    },
+                    accent: {
+                        DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
+                        hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
+                    },
+                    surface: {
+                        DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
+                        subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
+                        dark: "var(--ttdk-color-neutral-black, #141313)",
+                    },
+                    border: {
+                        DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
+                        dark: "var(--ttdk-stroke-subtle, #313336)",
+                    },
+                },
+            },
+            // 5. Typography
+            fontFamily: {
+                sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
+            },
+        },
+    },
+};
+export default ttdkTailwindPreset;