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

package/dist/web/card/card.svelte

@@ -0,0 +1,217 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let variant = void 0;
+export let size = void 0;
+export let rounded = void 0;
+export let cardWidth = void 0;
+export let hoverable = void 0;
+export let clickable = void 0;
+export let onClick = void 0;
+export let disabled = void 0;
+export let loading = void 0;
+export let ui = void 0;
+export let cover = void 0;
+export let coverPosition = void 0;
+export let coverClass = void 0;
+export let coverStyle = void 0;
+export let coverAlt = void 0;
+export let title = void 0;
+export let subtitle = void 0;
+export let extra = void 0;
+export let headerBorder = void 0;
+export let headerClass = void 0;
+export let headerStyle = void 0;
+export let titleClass = void 0;
+export let titleStyle = void 0;
+export let subtitleClass = void 0;
+export let subtitleStyle = void 0;
+export let extraClass = void 0;
+export let extraStyle = void 0;
+export let bodyClass = void 0;
+export let bodyStyle = void 0;
+export let footer = void 0;
+export let actions = void 0;
+export let footerBorder = void 0;
+export let footerClass = void 0;
+export let footerStyle = 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>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-card ${className || ""}`.trim()}
+  data-variant={variant || "default"}
+  data-size={size || "md"}
+  data-rounded={rounded || "md"}
+  data-width={cardWidth || "auto"}
+  data-hoverable={hoverable ? "true" : "false"}
+  data-clickable={clickable || onClick ? "true" : "false"}
+  data-disabled={disabled ? "true" : "false"}
+  data-loading={loading ? "true" : "false"}
+  tabIndex={clickable || onClick ? 0 : undefined}
+  role={clickable || onClick ? "button" : undefined}
+  on:click={(event) => {
+    if (disabled || loading) return;
+    if (onClick) onClick(event);
+  }}
+  on:keydown={(event) => {
+    if (disabled || loading) return;
+    if (
+      (clickable || onClick) &&
+      (event.key === "Enter" || event.key === " ")
+    ) {
+      event.preventDefault();
+      if (onClick) onClick(event);
+    }
+  }}
+>
+  {#if cover && (!coverPosition || coverPosition === "top")}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(coverStyle),
+      })}
+      class={`ttdk-card-cover ttdk-card-cover-top ${coverClass || ""}`.trim()}
+    >
+      {#if typeof cover === "string"}
+        <img src={cover} alt={coverAlt || ""} />
+      {/if}
+      {#if typeof cover !== "string"}
+        {cover}
+      {/if}
+    </div>
+  {/if}
+  {#if loading}
+    <div class="ttdk-card-skeleton">
+      <div class="ttdk-card-skeleton-header">
+        <div class="ttdk-card-skeleton-avatar" />
+        <div class="ttdk-card-skeleton-title-group">
+          <div class="ttdk-card-skeleton-line ttdk-card-skeleton-line-title" />
+          <div
+            class="ttdk-card-skeleton-line ttdk-card-skeleton-line-subtitle"
+          />
+        </div>
+      </div>
+      <div class="ttdk-card-skeleton-body">
+        <div
+          style={stringifyStyles({
+            width: "100%",
+          })}
+          class="ttdk-card-skeleton-line"
+        />
+        <div
+          style={stringifyStyles({
+            width: "85%",
+          })}
+          class="ttdk-card-skeleton-line"
+        />
+        <div
+          style={stringifyStyles({
+            width: "60%",
+          })}
+          class="ttdk-card-skeleton-line"
+        />
+      </div>
+    </div>
+  {/if}
+  {#if !loading}
+    {#if title || subtitle || extra}
+      <div
+        style={stringifyStyles({
+          ...buildUiVars(headerStyle),
+        })}
+        class={`ttdk-card-header ${
+          headerBorder !== false ? "ttdk-card-header-bordered" : ""
+        } ${headerClass || ""}`.trim()}
+      >
+        <div class="ttdk-card-header-main">
+          {#if title}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(titleStyle),
+              })}
+              class={`ttdk-card-title ${titleClass || ""}`.trim()}
+            >
+              {title}
+            </div>
+          {/if}
+          {#if subtitle}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(subtitleStyle),
+              })}
+              class={`ttdk-card-subtitle ${subtitleClass || ""}`.trim()}
+            >
+              {subtitle}
+            </div>
+          {/if}
+        </div>
+        {#if extra}
+          <div
+            style={stringifyStyles({
+              ...buildUiVars(extraStyle),
+            })}
+            class={`ttdk-card-extra ${extraClass || ""}`.trim()}
+          >
+            {extra}
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(bodyStyle),
+      })}
+      class={`ttdk-card-body ${bodyClass || ""}`.trim()}
+    >
+      <slot />
+    </div>
+
+    {#if footer || actions}
+      <div
+        style={stringifyStyles({
+          ...buildUiVars(footerStyle),
+        })}
+        class={`ttdk-card-footer ${
+          footerBorder !== false ? "ttdk-card-footer-bordered" : ""
+        } ${footerClass || ""}`.trim()}
+      >
+        {#if footer}
+          <div class="ttdk-card-footer-content">{footer}</div>
+        {/if}
+        {#if actions}
+          <div class="ttdk-card-actions">{actions}</div>
+        {/if}
+      </div>
+    {/if}
+  {/if}
+  {#if cover && coverPosition === "bottom"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(coverStyle),
+      })}
+      class={`ttdk-card-cover ttdk-card-cover-bottom ${
+        coverClass || ""
+      }`.trim()}
+    >
+      {#if typeof cover === "string"}
+        <img src={cover} alt={coverAlt || ""} />
+      {/if}
+      {#if typeof cover !== "string"}
+        {cover}
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,242 @@
+import { SvelteComponent } from "svelte";
+export type CardUiProps = UiProps;
+export interface CardProps {
+    /**
+     * Gaya varian visual kartu.
+     * - 'bordered': Kartu dengan border halus dan background card standar.
+     * - 'elevated': Kartu dengan bayangan elevasi bertingkat (shadow).
+     * - 'flat': Kartu dengan latar netral subtle tanpa bayangan.
+     * - 'ghost': Kartu transparan minimalis tanpa border atau bayangan.
+     *
+     * @default 'default'
+     */
+    variant?: "bordered" | "elevated" | "flat" | "ghost";
+    /**
+     * Kepadatan padding internal kartu.
+     * - 'sm': Padding kompak (12px / 16px).
+     * - 'md': Padding proporsional standar (20px / 24px).
+     * - 'lg': Padding lapang / hero (28px / 32px).
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Preset batas lebar kartu sesuai standar token TTDK.
+     * - 'auto': Fleksibel mengikuti lebar kontainer parent.
+     * - 'full': Lebar penuh 100%.
+     * - '1-1': 1128px (Grid Desktop Maksimal).
+     * - '1-2': 552px (Grid 1/2).
+     * - '1-3': 360px (Grid 1/3).
+     * - '1-4': 264px (Grid 1/4).
+     * - 'mobile': 328px (Optimal Layar Seluler).
+     *
+     * @default 'auto'
+     */
+    cardWidth?: "auto" | "full" | "1-1" | "1-2" | "1-3" | "1-4" | "mobile";
+    /**
+     * Sudut kelengkungan radius kartu.
+     *
+     * @default 'md'
+     */
+    rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    /**
+     * Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor).
+     *
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Menjadikan kartu sebagai elemen interaktif yang dapat diklik.
+     *
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Menonaktifkan interaksi kartu dan meredupkan opacity.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Judul kartu pada area header.
+     */
+    title?: any;
+    /**
+     * Subjudul atau teks deskripsi singkat di bawah judul.
+     */
+    subtitle?: any;
+    /**
+     * Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi).
+     */
+    extra?: any;
+    /**
+     * Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom).
+     */
+    cover?: any;
+    /**
+     * Alt text untuk gambar cover jika `cover` berupa URL string.
+     */
+    coverAlt?: string;
+    /**
+     * Posisi media cover pada kartu ('top' atau 'bottom').
+     *
+     * @default 'top'
+     */
+    coverPosition?: "top" | "bottom";
+    /**
+     * Grup tombol aksi terstruktur di area footer kartu.
+     */
+    actions?: any;
+    /**
+     * Konten kustom untuk area footer kartu.
+     */
+    footer?: any;
+    /**
+     * Menampilkan garis pembatas divider di bawah header kartu.
+     *
+     * @default true
+     */
+    headerBorder?: boolean;
+    /**
+     * Menampilkan garis pembatas divider di atas footer kartu.
+     *
+     * @default true
+     */
+    footerBorder?: boolean;
+    /**
+     * Callback event saat kartu diklik.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Kustomisasi visual granular root kontainer kartu (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom untuk root kontainer kartu.
+     */
+    className?: string;
+    /**
+     * Style kustom untuk area header kartu (UiProps).
+     */
+    headerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk area header kartu.
+     */
+    headerClass?: string;
+    /**
+     * Style kustom untuk teks judul kartu (UiProps).
+     */
+    titleStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks judul kartu.
+     */
+    titleClass?: string;
+    /**
+     * Style kustom untuk teks subjudul / deskripsi header (UiProps).
+     */
+    subtitleStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks subjudul / deskripsi header.
+     */
+    subtitleClass?: string;
+    /**
+     * Style kustom untuk elemen extra di sudut kanan header (UiProps).
+     */
+    extraStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen extra di sudut kanan header.
+     */
+    extraClass?: string;
+    /**
+     * Style kustom untuk area body / konten utama kartu (UiProps).
+     */
+    bodyStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk area body / konten utama kartu.
+     */
+    bodyClass?: string;
+    /**
+     * Style kustom untuk area footer kartu (UiProps).
+     */
+    footerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk area footer kartu.
+     */
+    footerClass?: string;
+    /**
+     * Style kustom untuk area media cover kartu (UiProps).
+     */
+    coverStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk area media cover kartu.
+     */
+    coverClass?: string;
+    /**
+     * Konten anak atau slot kustom (children).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: CardProps["className"];
+        variant?: CardProps["variant"];
+        size?: CardProps["size"];
+        rounded?: CardProps["rounded"];
+        cardWidth?: CardProps["cardWidth"];
+        hoverable?: CardProps["hoverable"];
+        clickable?: CardProps["clickable"];
+        onClick?: CardProps["onClick"];
+        disabled?: CardProps["disabled"];
+        loading?: CardProps["loading"];
+        ui?: CardProps["ui"];
+        cover?: CardProps["cover"];
+        coverPosition?: CardProps["coverPosition"];
+        coverClass?: CardProps["coverClass"];
+        coverStyle?: CardProps["coverStyle"];
+        coverAlt?: CardProps["coverAlt"];
+        title?: CardProps["title"];
+        subtitle?: CardProps["subtitle"];
+        extra?: CardProps["extra"];
+        headerBorder?: CardProps["headerBorder"];
+        headerClass?: CardProps["headerClass"];
+        headerStyle?: CardProps["headerStyle"];
+        titleClass?: CardProps["titleClass"];
+        titleStyle?: CardProps["titleStyle"];
+        subtitleClass?: CardProps["subtitleClass"];
+        subtitleStyle?: CardProps["subtitleStyle"];
+        extraClass?: CardProps["extraClass"];
+        extraStyle?: CardProps["extraStyle"];
+        bodyClass?: CardProps["bodyClass"];
+        bodyStyle?: CardProps["bodyStyle"];
+        footer?: CardProps["footer"];
+        actions?: CardProps["actions"];
+        footerBorder?: CardProps["footerBorder"];
+        footerClass?: CardProps["footerClass"];
+        footerStyle?: CardProps["footerStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type CardProps_ = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponent<CardProps_, CardEvents, CardSlots> {
+}
+export {};

package/dist/web/card/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './card.svelte';
+export { default as Card } from './card.svelte';

package/dist/web/card/index.js

@@ -0,0 +1,2 @@
+export { default } from './card.svelte';
+export { default as Card } from './card.svelte';