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

package/src/web/text/text.tsx

@@ -0,0 +1,689 @@
+import * as React from "react";
+
+export type TextUiProps = UiProps;
+export interface TextProps {
+  /**
+   * Tag elemen HTML semantik yang digunakan untuk me-render teks.
+   * - `'span'`: Inline span (default).
+   * - `'p'`: Paragraf teks.
+   * - `'div'`: Blok generik.
+   * - `'h1'` s/d `'h6'`: Heading level 1 sampai 6.
+   * - `'label'`: Elemen label formulir.
+   * - `'small'`: Teks berukuran kecil / disclaimer.
+   * - `'strong'`: Teks tebal berpenekanan penting.
+   * - `'em'`: Teks berpenekanan miring.
+   * - `'code'`: Format kode inline monospace.
+   * - `'blockquote'`: Kutipan blok.
+   * - `'a'`: Tautan / link teks.
+   *
+   * @default 'span'
+   */
+  as?:
+    | "span"
+    | "p"
+    | "div"
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "label"
+    | "small"
+    | "strong"
+    | "em"
+    | "code"
+    | "blockquote"
+    | "a";
+
+  /**
+   * Varian warna semantik teks (disesuaikan dengan Chip / Badge TTDK).
+   * - `'primary'`: Warna utama tema penekanan aksi (brand teal).
+   * - `'success'`: Warna status sukses (hijau).
+   * - `'info'`: Warna status informasi (biru).
+   * - `'warning'`: Warna status peringatan (kuning).
+   * - `'danger'`: Warna status bahaya / kesalahan (merah).
+   * - `'neutral'`: Warna teks dasar foreground (standar).
+   *
+   * @default 'neutral'
+   */
+  variant?: "primary" | "success" | "info" | "warning" | "danger" | "neutral";
+
+  /**
+   * Ukuran tipografi teks yang memengaruhi font-size dan line-height.
+   * - `'xs'`: 12px (line-height: 16px)
+   * - `'sm'`: 14px (line-height: 20px)
+   * - `'md'`: 16px (line-height: 24px)
+   * - `'lg'`: 18px (line-height: 28px)
+   * - `'xl'`: 20px (line-height: 28px)
+   * - `'2xl'`: 24px (line-height: 32px)
+   * - `'3xl'`: 30px (line-height: 36px)
+   * - `'4xl'`: 36px (line-height: 40px)
+   * - `'5xl'`: 48px (line-height: 1.1)
+   * - `'6xl'`: 60px (line-height: 1.05)
+   */
+  size?:
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl";
+
+  /**
+   * Ketebalan font teks.
+   * - `'normal'`: 400
+   * - `'medium'`: 500
+   * - `'semibold'`: 600
+   * - `'bold'`: 700
+   * - `'extrabold'`: 800
+   */
+  weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold";
+
+  /**
+   * Perataan horizontal teks.
+   * - `'left'`: Rata kiri.
+   * - `'center'`: Rata tengah.
+   * - `'right'`: Rata kanan.
+   * - `'justify'`: Rata kiri-kanan.
+   */
+  align?: "left" | "center" | "right" | "justify";
+
+  /**
+   * Transformasi huruf kapital/kecil pada teks.
+   * - `'uppercase'`: SEMUA HURUF BESAR.
+   * - `'lowercase'`: semua huruf kecil.
+   * - `'capitalize'`: Huruf Pertama Besar Setiap Kata.
+   * - `'normal'`: Normal sesuai aslinya.
+   */
+  transform?: "uppercase" | "lowercase" | "capitalize" | "normal";
+
+  /**
+   * Memotong teks satu baris yang melebihi batas dengan elipsis (...).
+   *
+   * @default false
+   */
+  truncate?: boolean;
+
+  /**
+   * Memotong teks multi-baris pada jumlah baris tertentu menggunakan CSS line-clamp.
+   */
+  lineClamp?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Mencegah teks dari wrapping (white-space: nowrap).
+   *
+   * @default false
+   */
+  noWrap?: boolean;
+
+  /**
+   * Menampilkan teks dalam gaya miring (italic).
+   *
+   * @default false
+   */
+  italic?: boolean;
+
+  /**
+   * Menampilkan garis bawah pada teks (underline).
+   *
+   * @default false
+   */
+  underline?: boolean;
+
+  /**
+   * Margin kustom pada elemen teks (misal: '0 0 16px 0', '8px', '1rem').
+   */
+  margin?: string;
+
+  /**
+   * Padding kustom pada elemen teks (misal: '8px 12px', '4px 8px').
+   */
+  padding?: string;
+
+  /**
+   * URL tujuan jika `as="a"`.
+   */
+  href?: string;
+
+  /**
+   * Target link jika `as="a"`.
+   */
+  target?: string;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular ala Nuxt UI / Universal UI System (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Konten teks atau elemen anak di dalam komponen Text.
+   */
+  children?: any;
+}
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Text(props: TextProps) {
+  return (
+    <>
+      {props.as === "p" ? (
+        <p
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+              ...props.style,
+          }}
+        >
+          <>{props.children}</>
+        </p>
+      ) : null}
+      {props.as === "h1" ? (
+        <h1
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h1>
+      ) : null}
+      {props.as === "h2" ? (
+        <h2
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h2>
+      ) : null}
+      {props.as === "h3" ? (
+        <h3
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h3>
+      ) : null}
+      {props.as === "h4" ? (
+        <h4
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h4>
+      ) : null}
+      {props.as === "h5" ? (
+        <h5
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h5>
+      ) : null}
+      {props.as === "h6" ? (
+        <h6
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </h6>
+      ) : null}
+      {props.as === "div" ? (
+        <div
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </div>
+      ) : null}
+      {props.as === "label" ? (
+        <label
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </label>
+      ) : null}
+      {props.as === "small" ? (
+        <small
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </small>
+      ) : null}
+      {props.as === "strong" ? (
+        <strong
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight || "bold"}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </strong>
+      ) : null}
+      {props.as === "em" ? (
+        <em
+          data-italic="true"
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </em>
+      ) : null}
+      {props.as === "code" ? (
+        <code
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </code>
+      ) : null}
+      {props.as === "blockquote" ? (
+        <blockquote
+          data-italic="true"
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </blockquote>
+      ) : null}
+      {props.as === "a" ? (
+        <a
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          href={props.href}
+          target={props.target}
+          data-variant={props.variant || "info"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </a>
+      ) : null}
+      {!props.as || props.as === "span" ? (
+        <span
+          className={`ttdk-text ${props.className || ""}`.trim()}
+          data-variant={props.variant || "neutral"}
+          data-size={props.size}
+          data-weight={props.weight}
+          data-align={props.align}
+          data-transform={props.transform}
+          data-truncate={props.truncate}
+          data-line-clamp={props.lineClamp}
+          data-no-wrap={props.noWrap}
+          data-italic={props.italic}
+          data-underline={props.underline}
+          style={{
+            ...(props.margin
+              ? {
+                  margin: props.margin,
+                }
+              : {}),
+            ...(props.padding
+              ? {
+                  padding: props.padding,
+                }
+              : {}),
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+        >
+          <>{props.children}</>
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+export default Text;
+
+export { Text };