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

package/src/webview/button/button-material.tsx

@@ -0,0 +1,138 @@
+"use client";
+import * as React from "react";
+
+export type ButtonMaterialUiProps = UiProps;
+export interface ButtonMaterialProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * 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 { buildUiVars, UiProps } from "../../core/types";
+
+function ButtonMaterial(props: ButtonMaterialProps) {
+  return (
+    <button
+      id={props.id}
+      type={props.type || "button"}
+      disabled={props.disabled || props.loading}
+      className={
+        "ttdk-btn-m3" +
+        " ttdk-btn-m3--" +
+        (props.variant || "filled") +
+        " ttdk-btn-m3--" +
+        (props.color || "primary") +
+        " ttdk-btn-m3--" +
+        (props.size || "md") +
+        (props.shape === "rounded" ? " ttdk-btn-m3--rounded" : "") +
+        (props.block ? " ttdk-btn-m3--block" : "") +
+        (props.loading ? " ttdk-btn-m3--loading" : "") +
+        (props.disabled ? " ttdk-btn-m3--disabled" : "") +
+        (props.ui?.class ? " " + props.ui.class : "")
+      }
+      style={{
+        ...buildUiVars(props.ui?.style),
+              ...props.style,
+      }}
+      onClick={(e) => {
+        if (!props.disabled && !props.loading && props.onClick) {
+          props.onClick(e);
+        }
+      }}
+    >
+      {props.loading ? (
+        <span className="ttdk-btn-m3__spinner" aria-hidden="true" />
+      ) : null}
+      <>{props.children}</>
+    </button>
+  );
+}
+
+export default ButtonMaterial;

package/src/webview/button/index.ts

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

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 (REACT)
+ */
+
+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"],
+      },
+    },
+  },
+};