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

package/dist/web/text/text.svelte

@@ -0,0 +1,515 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let as = void 0;
+export let className = void 0;
+export let variant = void 0;
+export let size = void 0;
+export let weight = void 0;
+export let align = void 0;
+export let transform = void 0;
+export let truncate = void 0;
+export let lineClamp = void 0;
+export let noWrap = void 0;
+export let italic = void 0;
+export let underline = void 0;
+export let margin = void 0;
+export let padding = void 0;
+export let ui = void 0;
+export let href = void 0;
+export let target = 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>
+
+{#if as === "p"}
+  <p
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </p>
+{/if}
+
+{#if as === "h1"}
+  <h1
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h1>
+{/if}
+
+{#if as === "h2"}
+  <h2
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h2>
+{/if}
+
+{#if as === "h3"}
+  <h3
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h3>
+{/if}
+
+{#if as === "h4"}
+  <h4
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h4>
+{/if}
+
+{#if as === "h5"}
+  <h5
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h5>
+{/if}
+
+{#if as === "h6"}
+  <h6
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </h6>
+{/if}
+
+{#if as === "div"}
+  <div
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}
+  >
+    <slot />
+  </div>
+{/if}
+
+{#if as === "label"}
+  <label
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></label
+  >
+{/if}
+
+{#if as === "small"}
+  <small
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></small
+  >
+{/if}
+
+{#if as === "strong"}
+  <strong
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight || "bold"}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></strong
+  >
+{/if}
+
+{#if as === "em"}
+  <em
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    data-italic="true"
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-underline={underline}><slot /></em
+  >
+{/if}
+
+{#if as === "code"}
+  <code
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></code
+  >
+{/if}
+
+{#if as === "blockquote"}
+  <blockquote
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    data-italic="true"
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-underline={underline}
+  >
+    <slot />
+  </blockquote>
+{/if}
+
+{#if as === "a"}
+  <a
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    {href}
+    {target}
+    data-variant={variant || "info"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></a
+  >
+{/if}
+
+{#if !as || as === "span"}
+  <span
+    style={stringifyStyles({
+      ...(margin
+        ? {
+            margin: margin,
+          }
+        : {}),
+      ...(padding
+        ? {
+            padding: padding,
+          }
+        : {}),
+      ...buildUiVars(ui),
+    })}
+    class={`ttdk-text ${className || ""}`.trim()}
+    data-variant={variant || "neutral"}
+    data-size={size}
+    data-weight={weight}
+    data-align={align}
+    data-transform={transform}
+    data-truncate={truncate}
+    data-line-clamp={lineClamp}
+    data-no-wrap={noWrap}
+    data-italic={italic}
+    data-underline={underline}><slot /></span
+  >
+{/if}

package/dist/web/text/text.svelte.d.ts

@@ -0,0 +1,168 @@
+import { SvelteComponent } from "svelte";
+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?: any;
+    /**
+     * Kustomisasi visual granular ala Nuxt UI / Universal UI System (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Konten teks atau elemen anak di dalam komponen Text.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        as?: TextProps["as"];
+        className?: TextProps["className"];
+        variant?: TextProps["variant"];
+        size?: TextProps["size"];
+        weight?: TextProps["weight"];
+        align?: TextProps["align"];
+        transform?: TextProps["transform"];
+        truncate?: TextProps["truncate"];
+        lineClamp?: TextProps["lineClamp"];
+        noWrap?: TextProps["noWrap"];
+        italic?: TextProps["italic"];
+        underline?: TextProps["underline"];
+        margin?: TextProps["margin"];
+        padding?: TextProps["padding"];
+        ui?: TextProps["ui"];
+        href?: TextProps["href"];
+        target?: TextProps["target"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TextProps_ = typeof __propDef.props;
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponent<TextProps_, TextEvents, TextSlots> {
+}
+export {};