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

package/src/webview/button/button-ios.vue.d.ts

@@ -0,0 +1,102 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+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;
+}
+
+declare const component: DefineComponent<ButtonIosProps>;
+export default component;

package/src/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/src/webview/button/button-material.vue

@@ -0,0 +1,138 @@
+<template>
+  <button
+    :id="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 : '')
+    "
+    :style="{
+      ...buildUiVars(ui?.style),
+        ...(typeof style === 'object' ? style : {}),
+    }"
+    @click="
+      async (e) => {
+        if (!disabled && !loading && onClick) {
+          onClick(e);
+        }
+      }
+    "
+  >
+    <template v-if="loading">
+      <span class="ttdk-btn-m3__spinner" aria-hidden="true"></span>
+    </template>
+
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+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;
+}
+
+const props = defineProps<ButtonMaterialProps>();
+</script>

package/src/webview/button/button-material.vue.d.ts

@@ -0,0 +1,102 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+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;
+}
+
+declare const component: DefineComponent<ButtonMaterialProps>;
+export default component;

package/src/webview/button/index.ts

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

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

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

package/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/tailwind-preset.js

@@ -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"],
+      },
+    },
+  },
+};