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

package/dist/webview/button/button-ios.svelte

@@ -0,0 +1,58 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { buildUiVars, UiProps } from "../../core/types";
+export let id = void 0;
+export let type = void 0;
+export let disabled = void 0;
+export let loading = void 0;
+export let variant = void 0;
+export let color = void 0;
+export let size = void 0;
+export let shape = void 0;
+export let block = void 0;
+export let ui = void 0;
+const dispatch = createEventDispatcher();
+export let onClick = 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>
+
+<button
+  style={stringifyStyles({
+    ...buildUiVars(ui?.style),
+  })}
+  {id}
+  type={type || "button"}
+  disabled={disabled || loading}
+  class={"ttdk-btn-ios" +
+    " ttdk-btn-ios--" +
+    (variant || "filled") +
+    " ttdk-btn-ios--" +
+    (color || "primary") +
+    " ttdk-btn-ios--" +
+    (size || "md") +
+    (shape === "capsule" ? " ttdk-btn-ios--capsule" : "") +
+    (block ? " ttdk-btn-ios--block" : "") +
+    (loading ? " ttdk-btn-ios--loading" : "") +
+    (disabled ? " ttdk-btn-ios--disabled" : "") +
+    (ui?.class ? " " + ui.class : "")}
+  on:click={(e) => {
+    if (!disabled && !loading && onClick) {
+      onClick(e);
+      dispatch("click", e);
+    }
+  }}
+>
+  {#if loading}
+    <span class="ttdk-btn-ios__spinner" aria-hidden="true" />
+  {/if}<slot /></button
+>

package/dist/webview/button/button-ios.svelte.d.ts

@@ -0,0 +1,114 @@
+import { SvelteComponent } from "svelte";
+export type ButtonIosUiProps = UiProps;
+export interface ButtonIosProps {
+    /**
+     * Inline CSS style kustom.
+     */
+    style?: any;
+    /**
+     * Gaya varian tombol berdasarkan Apple Human Interface Guidelines:
+     * - `'filled'`: Tombol solid high-emphasis / prominent (default).
+     * - `'tinted'`: Tombol berlatar belakang transparan lembut dengan aksen warna.
+     * - `'gray'`: Tombol berlatar belakang abu-abu netral khas Apple (systemGray).
+     * - `'plain'`: Tombol teks tanpa latar dan border (link style).
+     *
+     * @default 'filled'
+     */
+    variant?: "filled" | "tinted" | "gray" | "plain";
+    /**
+     * Warna aksen semantik iOS:
+     * - `'primary'`: iOS System Blue (#007aff).
+     * - `'success'`: iOS System Green (#34c759).
+     * - `'warning'`: iOS System Orange (#ff9500).
+     * - `'danger'`: iOS System Red (#ff3b30).
+     * - `'neutral'`: iOS System Gray (#8e8e93).
+     *
+     * @default 'primary'
+     */
+    color?: "primary" | "success" | "warning" | "danger" | "neutral";
+    /**
+     * Skala ukuran tombol:
+     * - `'sm'`: 30px (compact)
+     * - `'md'`: 42px (standar iOS touch target)
+     * - `'lg'`: 50px (large CTA)
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Bentuk sudut tombol:
+     * - `'rounded'`: Continuous curve squircle khas iOS (~10-14px).
+     * - `'capsule'`: Full pill / capsule (border-radius: 9999px).
+     *
+     * @default 'rounded'
+     */
+    shape?: "rounded" | "capsule";
+    /**
+     * Tipe tombol HTML native.
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Kondisi non-aktif tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Menampilkan iOS activity indicator / spinner.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Lebar penuh 100% mengikuti kontainer induk.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * ID unik elemen HTML.
+     */
+    id?: string;
+    /**
+     * Konfigurasi styling kustom UI.
+     */
+    ui?: ButtonIosUiProps;
+    /**
+     * Callback saat tombol ditekan / diklik.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Konten label / elemen di dalam tombol.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        id?: ButtonIosProps["id"];
+        type?: ButtonIosProps["type"];
+        disabled?: ButtonIosProps["disabled"];
+        loading?: ButtonIosProps["loading"];
+        variant?: ButtonIosProps["variant"];
+        color?: ButtonIosProps["color"];
+        size?: ButtonIosProps["size"];
+        shape?: ButtonIosProps["shape"];
+        block?: ButtonIosProps["block"];
+        ui?: ButtonIosProps["ui"];
+        onClick?: ButtonIosProps["onClick"];
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type ButtonIosProps_ = typeof __propDef.props;
+export type ButtonIosEvents = typeof __propDef.events;
+export type ButtonIosSlots = typeof __propDef.slots;
+export default class ButtonIos extends SvelteComponent<ButtonIosProps_, ButtonIosEvents, ButtonIosSlots> {
+}
+export {};

package/dist/webview/button/button-material.css

@@ -0,0 +1 @@
+.ttdk-btn-m3{box-sizing:border-box;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;letter-spacing:.1px;border:none;border-radius:9999px;outline:none;justify-content:center;align-items:center;min-height:40px;font-family:Roboto,Segoe UI,system-ui,-apple-system,sans-serif;font-weight:500;line-height:20px;text-decoration:none;transition:box-shadow .2s cubic-bezier(.2,0,0,1),background-color .2s cubic-bezier(.2,0,0,1),color .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1);display:inline-flex;position:relative;overflow:hidden}.ttdk-btn-m3--block{width:100%;display:flex}.ttdk-btn-m3:before{content:"";border-radius:inherit;opacity:0;pointer-events:none;background-color:currentColor;transition:opacity .2s cubic-bezier(.2,0,0,1);position:absolute;inset:0}.ttdk-btn-m3:hover:not(:disabled):before{opacity:.08}.ttdk-btn-m3:focus-visible:not(:disabled):before{opacity:.12}.ttdk-btn-m3:active:not(:disabled):before{opacity:.16}.ttdk-btn-m3:after{content:"";opacity:0;pointer-events:none;background:radial-gradient(circle,currentColor 10%,#0000 10.01%) 50% no-repeat;width:100%;height:100%;transition:transform .4s cubic-bezier(.2,0,0,1),opacity .8s cubic-bezier(.2,0,0,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(8)}.ttdk-btn-m3:active:not(:disabled):after{opacity:.24;transition:all;transform:translate(-50%,-50%)scale(0)}.ttdk-btn-m3--sm{gap:6px;height:32px;min-height:32px;padding:0 16px;font-size:12px}.ttdk-btn-m3--md{gap:8px;height:40px;min-height:40px;padding:0 24px;font-size:14px}.ttdk-btn-m3--lg{gap:10px;height:48px;min-height:48px;padding:0 28px;font-size:16px}.ttdk-btn-m3--rounded{border-radius:12px!important}.ttdk-btn-m3--filled.ttdk-btn-m3--primary{background-color:var(--md-sys-color-primary,#006a60);color:var(--md-sys-color-on-primary,#fff)}.ttdk-btn-m3--filled.ttdk-btn-m3--secondary{background-color:var(--md-sys-color-secondary,#4a635f);color:#fff}.ttdk-btn-m3--filled.ttdk-btn-m3--tertiary{background-color:var(--md-sys-color-tertiary,#456179);color:#fff}.ttdk-btn-m3--filled.ttdk-btn-m3--error{background-color:var(--md-sys-color-error,#ba1a1a);color:#fff}.ttdk-btn-m3--filled:hover:not(:disabled){box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0003}.ttdk-btn-m3--elevated{background-color:var(--md-sys-color-surface-container-low,#f7fbf8);box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0003}.ttdk-btn-m3--elevated.ttdk-btn-m3--primary{color:var(--md-sys-color-primary,#006a60)}.ttdk-btn-m3--elevated.ttdk-btn-m3--secondary{color:var(--md-sys-color-secondary,#4a635f)}.ttdk-btn-m3--elevated.ttdk-btn-m3--tertiary{color:var(--md-sys-color-tertiary,#456179)}.ttdk-btn-m3--elevated.ttdk-btn-m3--error{color:var(--md-sys-color-error,#ba1a1a)}.ttdk-btn-m3--elevated:hover:not(:disabled){box-shadow:0 2px 6px 2px #00000026,0 1px 2px #00000040}.ttdk-btn-m3--tonal.ttdk-btn-m3--primary{background-color:var(--md-sys-color-secondary-container,#cce8e3);color:var(--md-sys-color-on-secondary-container,#05201d)}.ttdk-btn-m3--tonal.ttdk-btn-m3--secondary{color:#1e2a2e;background-color:#dbe4e6}.ttdk-btn-m3--tonal.ttdk-btn-m3--tertiary{color:#0b1d28;background-color:#d1e5f4}.ttdk-btn-m3--tonal.ttdk-btn-m3--error{color:#410002;background-color:#ffdad6}.ttdk-btn-m3--tonal:hover:not(:disabled){box-shadow:0 1px 3px 1px #0000001f,0 1px 2px #0000002e}.ttdk-btn-m3--outlined{border:1px solid var(--md-sys-color-outline,#707977);background-color:#0000}.ttdk-btn-m3--outlined.ttdk-btn-m3--primary{color:var(--md-sys-color-primary,#006a60)}.ttdk-btn-m3--outlined.ttdk-btn-m3--secondary{color:var(--md-sys-color-secondary,#4a635f)}.ttdk-btn-m3--outlined.ttdk-btn-m3--tertiary{color:var(--md-sys-color-tertiary,#456179)}.ttdk-btn-m3--outlined.ttdk-btn-m3--error{color:var(--md-sys-color-error,#ba1a1a);border-color:#ba1a1a}.ttdk-btn-m3--text{background-color:#0000;padding-left:12px;padding-right:12px}.ttdk-btn-m3--text.ttdk-btn-m3--primary{color:var(--md-sys-color-primary,#006a60)}.ttdk-btn-m3--text.ttdk-btn-m3--secondary{color:var(--md-sys-color-secondary,#4a635f)}.ttdk-btn-m3--text.ttdk-btn-m3--tertiary{color:var(--md-sys-color-tertiary,#456179)}.ttdk-btn-m3--text.ttdk-btn-m3--error{color:var(--md-sys-color-error,#ba1a1a)}.ttdk-btn-m3:disabled,.ttdk-btn-m3--disabled{opacity:.38!important;cursor:not-allowed!important;pointer-events:none!important;box-shadow:none!important}.ttdk-btn-m3--loading{cursor:wait}.ttdk-btn-m3__spinner{border:2.5px solid;border-right-color:#0000;border-radius:50%;width:1.1em;height:1.1em;animation:.75s cubic-bezier(.4,0,.2,1) infinite ttdk-m3-spin;display:inline-block}@keyframes ttdk-m3-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/webview/button/button-material.svelte

@@ -0,0 +1,58 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { buildUiVars, UiProps } from "../../core/types";
+export let id = void 0;
+export let type = void 0;
+export let disabled = void 0;
+export let loading = void 0;
+export let variant = void 0;
+export let color = void 0;
+export let size = void 0;
+export let shape = void 0;
+export let block = void 0;
+export let ui = void 0;
+const dispatch = createEventDispatcher();
+export let onClick = 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>
+
+<button
+  style={stringifyStyles({
+    ...buildUiVars(ui?.style),
+  })}
+  {id}
+  type={type || "button"}
+  disabled={disabled || loading}
+  class={"ttdk-btn-m3" +
+    " ttdk-btn-m3--" +
+    (variant || "filled") +
+    " ttdk-btn-m3--" +
+    (color || "primary") +
+    " ttdk-btn-m3--" +
+    (size || "md") +
+    (shape === "rounded" ? " ttdk-btn-m3--rounded" : "") +
+    (block ? " ttdk-btn-m3--block" : "") +
+    (loading ? " ttdk-btn-m3--loading" : "") +
+    (disabled ? " ttdk-btn-m3--disabled" : "") +
+    (ui?.class ? " " + ui.class : "")}
+  on:click={(e) => {
+    if (!disabled && !loading && onClick) {
+      onClick(e);
+      dispatch("click", e);
+    }
+  }}
+>
+  {#if loading}
+    <span class="ttdk-btn-m3__spinner" aria-hidden="true" />
+  {/if}<slot /></button
+>

package/dist/webview/button/button-material.svelte.d.ts

@@ -0,0 +1,114 @@
+import { SvelteComponent } from "svelte";
+export type ButtonMaterialUiProps = UiProps;
+export interface ButtonMaterialProps {
+    /**
+     * Inline CSS style kustom.
+     */
+    style?: any;
+    /**
+     * 5 Tipe tombol resmi Material Design 3 (M3):
+     * - `'filled'`: Tombol kontainer warna primer pekat (high emphasis, default).
+     * - `'elevated'`: Tombol berlatar surface dengan bayangan elevasi level 1.
+     * - `'tonal'`: Tombol warna kontainer sekunder (medium-high emphasis).
+     * - `'outlined'`: Tombol bergaris tepi 1px dengan latar transparan.
+     * - `'text'`: Tombol teks tanpa latar dan border (low emphasis).
+     *
+     * @default 'filled'
+     */
+    variant?: "filled" | "elevated" | "tonal" | "outlined" | "text";
+    /**
+     * Skema peran warna Material 3:
+     * - `'primary'`: Warna tema primer (M3 Primary).
+     * - `'secondary'`: Warna tema sekunder (M3 Secondary).
+     * - `'tertiary'`: Warna tema tersier (M3 Tertiary).
+     * - `'error'`: Warna peringatan / bahaya (M3 Error).
+     *
+     * @default 'primary'
+     */
+    color?: "primary" | "secondary" | "tertiary" | "error";
+    /**
+     * Skala ukuran tombol M3:
+     * - `'sm'`: 32px (compact)
+     * - `'md'`: 40px (standar M3 spec)
+     * - `'lg'`: 48px (large touch target)
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Bentuk sudut kontainer:
+     * - `'pill'`: Full rounded pill khas Material 3 (border-radius: 9999px).
+     * - `'rounded'`: Sudut membulat medium (~12px).
+     *
+     * @default 'pill'
+     */
+    shape?: "pill" | "rounded";
+    /**
+     * Tipe tombol HTML native.
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Kondisi non-aktif tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Menampilkan spinner loading M3.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Lebar penuh 100% mengikuti kontainer induk.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * ID unik elemen HTML.
+     */
+    id?: string;
+    /**
+     * Konfigurasi styling kustom UI.
+     */
+    ui?: ButtonMaterialUiProps;
+    /**
+     * Callback saat tombol ditekan / diklik.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Konten label / elemen di dalam tombol.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        id?: ButtonMaterialProps["id"];
+        type?: ButtonMaterialProps["type"];
+        disabled?: ButtonMaterialProps["disabled"];
+        loading?: ButtonMaterialProps["loading"];
+        variant?: ButtonMaterialProps["variant"];
+        color?: ButtonMaterialProps["color"];
+        size?: ButtonMaterialProps["size"];
+        shape?: ButtonMaterialProps["shape"];
+        block?: ButtonMaterialProps["block"];
+        ui?: ButtonMaterialProps["ui"];
+        onClick?: ButtonMaterialProps["onClick"];
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type ButtonMaterialProps_ = typeof __propDef.props;
+export type ButtonMaterialEvents = typeof __propDef.events;
+export type ButtonMaterialSlots = typeof __propDef.slots;
+export default class ButtonMaterial extends SvelteComponent<ButtonMaterialProps_, ButtonMaterialEvents, ButtonMaterialSlots> {
+}
+export {};

package/dist/webview/button/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ButtonIos } from './button-ios.svelte';
+export type { ButtonIosProps, ButtonIosUiProps } from './button-ios.svelte';
+export * from './button-ios.svelte';
+export { default as ButtonMaterial } from './button-material.svelte';
+export type { ButtonMaterialProps, ButtonMaterialUiProps } from './button-material.svelte';
+export * from './button-material.svelte';

package/dist/webview/button/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonIos } from './button-ios.svelte';
+export * from './button-ios.svelte';
+export { default as ButtonMaterial } from './button-material.svelte';
+export * from './button-material.svelte';

package/dist/webview/button/manifest.json

@@ -0,0 +1,148 @@
+{
+  "name": "@ttdk-design-system/button",
+  "component": "ButtonMaterial",
+  "folder": "button",
+  "description": "TTDK ButtonMaterial component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "button-ios.css",
+      "importPath": "webview/button/button-ios.css"
+    },
+    {
+      "theme": "common",
+      "file": "button-material.css",
+      "importPath": "webview/button/button-material.css"
+    }
+  ],
+  "props": {},
+  "subInterfaces": {
+    "ButtonMaterialProps": {
+      "style": {
+        "name": "style",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Inline CSS style kustom.",
+        "example": null,
+        "param": null
+      },
+      "variant": {
+        "name": "variant",
+        "type": "'filled' | 'elevated' | 'tonal' | 'outlined' | 'text'",
+        "optional": true,
+        "default": "filled",
+        "description": "5 Tipe tombol resmi Material Design 3 (M3): - `'filled'`: Tombol kontainer warna primer pekat (high emphasis, default). - `'elevated'`: Tombol berlatar surface dengan bayangan elevasi level 1. - `'tonal'`: Tombol warna kontainer sekunder (medium-high emphasis). - `'outlined'`: Tombol bergaris tepi 1px dengan latar transparan. - `'text'`: Tombol teks tanpa latar dan border (low emphasis).",
+        "example": null,
+        "param": null
+      },
+      "color": {
+        "name": "color",
+        "type": "'primary' | 'secondary' | 'tertiary' | 'error'",
+        "optional": true,
+        "default": "primary",
+        "description": "Skema peran warna Material 3: - `'primary'`: Warna tema primer (M3 Primary). - `'secondary'`: Warna tema sekunder (M3 Secondary). - `'tertiary'`: Warna tema tersier (M3 Tertiary). - `'error'`: Warna peringatan / bahaya (M3 Error).",
+        "example": null,
+        "param": null
+      },
+      "size": {
+        "name": "size",
+        "type": "'sm' | 'md' | 'lg'",
+        "optional": true,
+        "default": "md",
+        "description": "Skala ukuran tombol M3: - `'sm'`: 32px (compact) - `'md'`: 40px (standar M3 spec) - `'lg'`: 48px (large touch target)",
+        "example": null,
+        "param": null
+      },
+      "shape": {
+        "name": "shape",
+        "type": "'pill' | 'rounded'",
+        "optional": true,
+        "default": "pill",
+        "description": "Bentuk sudut kontainer: - `'pill'`: Full rounded pill khas Material 3 (border-radius: 9999px). - `'rounded'`: Sudut membulat medium (~12px).",
+        "example": null,
+        "param": null
+      },
+      "type": {
+        "name": "type",
+        "type": "'button' | 'submit' | 'reset'",
+        "optional": true,
+        "default": "button",
+        "description": "Tipe tombol HTML native.",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Kondisi non-aktif tombol.",
+        "example": null,
+        "param": null
+      },
+      "loading": {
+        "name": "loading",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menampilkan spinner loading M3.",
+        "example": null,
+        "param": null
+      },
+      "block": {
+        "name": "block",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Lebar penuh 100% mengikuti kontainer induk.",
+        "example": null,
+        "param": null
+      },
+      "id": {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "ID unik elemen HTML.",
+        "example": null,
+        "param": null
+      },
+      "ui": {
+        "name": "ui",
+        "type": "ButtonMaterialUiProps",
+        "optional": true,
+        "default": null,
+        "description": "Konfigurasi styling kustom UI.",
+        "example": null,
+        "param": null
+      },
+      "onClick": {
+        "name": "onClick",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback saat tombol ditekan / diklik.",
+        "example": null,
+        "param": null
+      },
+      "children": {
+        "name": "children",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten label / elemen di dalam tombol.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/webview/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TTDK Design System — Webview / Mobile-first Module (SVELTE)
+ */
+export * from "../core";
+export * from './bottomsheet';
+export * from './button';

package/dist/webview/index.js

@@ -0,0 +1,6 @@
+/**
+ * TTDK Design System — Webview / Mobile-first Module (SVELTE)
+ */
+export * from "../core";
+export * from './bottomsheet';
+export * from './button';