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

package/dist/web/accordion/accordion.svelte

@@ -0,0 +1,217 @@
+<script context="module"></script>
+
+<script>import {
+  buildUiStyle,
+  buildUiVars,
+  cleanUiValue,
+  UiProps
+} from "../../core/types";
+export let value = void 0;
+export let defaultValue = void 0;
+export let disabled = void 0;
+export let multiple = void 0;
+export let collapsible = true;
+export let onChange = void 0;
+export let className = void 0;
+export let variant = void 0;
+export let size = void 0;
+export let iconPosition = void 0;
+export let rounded = void 0;
+export let ui = void 0;
+export let items;
+export let itemClass = void 0;
+export let itemStyle = void 0;
+export let triggerClass = void 0;
+export let triggerStyle = void 0;
+export let iconClass = void 0;
+export let iconStyle = void 0;
+export let icon = void 0;
+export let titleClass = void 0;
+export let titleStyle = void 0;
+export let subtitleClass = void 0;
+export let subtitleStyle = void 0;
+export let contentClass = void 0;
+export let contentStyle = 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;
+}
+$:
+  openList = (value !== void 0 ? Array.isArray(value) ? value : [value] : openItems) || [];
+function getOpenList() {
+  const val = value !== void 0 ? value : openItems;
+  if (!val)
+    return [];
+  return Array.isArray(val) ? val : [val];
+}
+function isOpen(itemVal, list) {
+  const active = list !== void 0 ? list : openList;
+  return active.indexOf(itemVal) !== -1;
+}
+function handleToggle(itemVal, itemDisabled) {
+  if (disabled || itemDisabled)
+    return;
+  const list = getOpenList();
+  const isCurrentlyOpen = list.indexOf(itemVal) !== -1;
+  let next;
+  if (multiple) {
+    if (isCurrentlyOpen) {
+      next = list.filter((v) => v !== itemVal);
+    } else {
+      next = [...list, itemVal];
+    }
+  } else {
+    if (isCurrentlyOpen) {
+      if (collapsible === false) {
+        return;
+      }
+      next = [];
+    } else {
+      next = [itemVal];
+    }
+  }
+  openItems = next;
+  if (onChange) {
+    onChange(multiple ? next : next[0] || "");
+  }
+}
+let openItems = value !== void 0 ? Array.isArray(value) ? value : [value] : defaultValue !== void 0 ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : [];
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-accordion ${className || ""}`.trim()}
+  data-variant={variant || "default"}
+  data-size={size || "md"}
+  data-icon-position={iconPosition || "right"}
+  data-rounded={rounded || "md"}
+  data-disabled={disabled ? "true" : "false"}
+>
+  {#each items as item, index (item.value || index)}
+    <div
+      style={stringifyStyles({
+        ...buildUiStyle(itemStyle),
+      })}
+      class={`ttdk-accordion-item ${itemClass || ""}`.trim()}
+      data-state={isOpen(item.value, openList) ? "open" : "closed"}
+      data-disabled={disabled || item.disabled ? "true" : "false"}
+    >
+      <h3 class="ttdk-accordion-header">
+        <button
+          style={stringifyStyles({
+            ...buildUiStyle(triggerStyle),
+          })}
+          type="button"
+          class={`ttdk-accordion-trigger ${triggerClass || ""}`.trim()}
+          data-state={isOpen(item.value, openList) ? "open" : "closed"}
+          data-disabled={disabled || item.disabled ? "true" : "false"}
+          disabled={disabled || item.disabled}
+          aria-expanded={isOpen(item.value, openList)}
+          on:click={(event) => {
+            handleToggle(item.value, item.disabled);
+          }}
+        >
+          {#if iconPosition === "left"}
+            <span
+              style={stringifyStyles({
+                ...buildUiStyle(iconStyle),
+              })}
+              aria-hidden="true"
+              class={`ttdk-accordion-arrow ttdk-accordion-arrow-left ${
+                iconClass || ""
+              }`.trim()}
+              data-state={isOpen(item.value, openList) ? "open" : "closed"}
+            >
+              {#if icon}
+                {icon}
+              {/if}
+              {#if !icon}
+                <svg
+                  class="ttdk-accordion-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  ><polyline points="6 9 12 15 18 9" /></svg
+                >
+              {/if}</span
+            >
+          {/if}
+          {#if item.icon}
+            <span class="ttdk-accordion-leading-icon">{item.icon}</span>
+          {/if}<span class="ttdk-accordion-label-group"
+            ><span
+              style={stringifyStyles({
+                ...buildUiStyle(titleStyle),
+              })}
+              class={`ttdk-accordion-title ${titleClass || ""}`.trim()}
+              >{item.title}</span
+            >
+            {#if item.subtitle}
+              <span
+                style={stringifyStyles({
+                  ...buildUiStyle(subtitleStyle),
+                })}
+                class={`ttdk-accordion-subtitle ${subtitleClass || ""}`.trim()}
+                >{item.subtitle}</span
+              >
+            {/if}</span
+          >
+          {#if item.badge !== undefined && item.badge !== null}
+            <span class="ttdk-accordion-badge">{item.badge}</span>
+          {/if}
+          {#if iconPosition !== "left"}
+            <span
+              style={stringifyStyles({
+                ...buildUiStyle(iconStyle),
+              })}
+              aria-hidden="true"
+              class={`ttdk-accordion-arrow ttdk-accordion-arrow-right ${
+                iconClass || ""
+              }`.trim()}
+              data-state={isOpen(item.value, openList) ? "open" : "closed"}
+            >
+              {#if icon}
+                {icon}
+              {/if}
+              {#if !item.customIcon && !icon}
+                <svg
+                  class="ttdk-accordion-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  ><polyline points="6 9 12 15 18 9" /></svg
+                >
+              {/if}</span
+            >
+          {/if}</button
+        >
+      </h3>
+      <div
+        class="ttdk-accordion-panel"
+        role="region"
+        data-state={isOpen(item.value, openList) ? "open" : "closed"}
+      >
+        <div
+          style={stringifyStyles({
+            ...buildUiStyle(contentStyle),
+          })}
+          class={`ttdk-accordion-content ${contentClass || ""}`.trim()}
+        >
+          {item.content}
+        </div>
+      </div>
+    </div>
+  {/each}
+
+  {#if $$slots.default}
+    <div class="ttdk-accordion-children"><slot /></div>
+  {/if}
+</div>

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

@@ -0,0 +1,224 @@
+import { SvelteComponent } from "svelte";
+export type AccordionUiProps = UiProps;
+export interface AccordionItem {
+    /**
+     * Nilai identifikasi unik untuk item accordion.
+     */
+    value: string;
+    /**
+     * Judul teks yang ditampilkan pada header trigger accordion.
+     */
+    title: string;
+    /**
+     * Subtitle atau deskripsi singkat sekunder di bawah judul.
+     */
+    subtitle?: string;
+    /**
+     * Konten isi panel yang terbuka saat accordion di-expand.
+     */
+    content?: any;
+    /**
+     * Ikon atau elemen visual opsional di samping judul.
+     */
+    icon?: any;
+    /**
+     * Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib').
+     */
+    badge?: string | number;
+    /**
+     * Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini.
+     */
+    customIcon?: any;
+    /**
+     * Menonaktifkan item ini dari interaksi buka/tutup.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    /**
+     * Daftar item accordion yang akan dirender.
+     */
+    items: AccordionItem[];
+    /**
+     * Nilai item yang sedang terbuka (controlled value).
+     * Bisa berupa string tunggal atau array string jika multiple={true}.
+     */
+    value?: string | string[];
+    /**
+     * Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value).
+     */
+    defaultValue?: string | string[];
+    /**
+     * Mengizinkan lebih dari satu item terbuka secara bersamaan.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Mengizinkan item yang terbuka untuk ditutup kembali saat diklik.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Varian tampilan visual accordion:
+     * - `'default'`: Garis pembatas (divider) minimalis antar-item.
+     * - `'bordered'`: Pembungkus border luar dengan sudut melengkung.
+     * - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap).
+     * - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut.
+     *
+     * @default 'default'
+     */
+    variant?: "default" | "bordered" | "separated" | "ghost";
+    /**
+     * Skala ukuran proporsional accordion (padding, font, icon):
+     * - `'sm'`: Kompak (13px font, padding rapat).
+     * - `'md'`: Standar (14px font, padding normal).
+     * - `'lg'`: Besar (16px font, padding lapang).
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Posisi indikator ikon panah / chevron:
+     * - `'right'`: Di ujung kanan (standar desain).
+     * - `'left'`: Di sebelah kiri sebelum judul.
+     *
+     * @default 'right'
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'):
+     * - `'none'`: Sudut 0px.
+     * - `'sm'`: Sudut 6px.
+     * - `'md'`: Sudut 10px.
+     * - `'lg'`: Sudut 14px.
+     * - `'full'`: Sudut 20px.
+     *
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menonaktifkan seluruh interaksi accordion.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Kustomisasi visual granular root container (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom untuk root accordion.
+     */
+    className?: string;
+    /**
+     * Style kustom untuk tiap elemen item accordion (UiProps).
+     */
+    itemStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk tiap elemen item accordion.
+     */
+    itemClass?: string;
+    /**
+     * Style kustom untuk tombol trigger accordion (UiProps).
+     */
+    triggerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk tombol trigger accordion.
+     */
+    triggerClass?: string;
+    /**
+     * Style kustom untuk teks judul trigger accordion (UiProps).
+     */
+    titleStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks judul trigger accordion.
+     */
+    titleClass?: string;
+    /**
+     * Style kustom untuk teks subtitle trigger accordion (UiProps).
+     */
+    subtitleStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks subtitle trigger accordion.
+     */
+    subtitleClass?: string;
+    /**
+     * Style kustom untuk indikator ikon panah / chevron (UiProps).
+     */
+    iconStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk indikator ikon panah / chevron.
+     */
+    iconClass?: string;
+    /**
+     * Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global.
+     */
+    icon?: any;
+    /**
+     * Style kustom untuk panel konten accordion (UiProps).
+     * Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi).
+     */
+    contentStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk panel konten accordion.
+     */
+    contentClass?: string;
+    /**
+     * Callback event saat status item yang terbuka berubah.
+     * Mengembalikan string atau array string sesuai mode `multiple`.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Konten anak atau slot kustom.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        value?: AccordionProps["value"];
+        defaultValue?: AccordionProps["defaultValue"];
+        disabled?: AccordionProps["disabled"];
+        multiple?: AccordionProps["multiple"];
+        collapsible?: AccordionProps["collapsible"];
+        onChange?: AccordionProps["onChange"];
+        className?: AccordionProps["className"];
+        variant?: AccordionProps["variant"];
+        size?: AccordionProps["size"];
+        iconPosition?: AccordionProps["iconPosition"];
+        rounded?: AccordionProps["rounded"];
+        ui?: AccordionProps["ui"];
+        items: AccordionProps["items"];
+        itemClass?: AccordionProps["itemClass"];
+        itemStyle?: AccordionProps["itemStyle"];
+        triggerClass?: AccordionProps["triggerClass"];
+        triggerStyle?: AccordionProps["triggerStyle"];
+        iconClass?: AccordionProps["iconClass"];
+        iconStyle?: AccordionProps["iconStyle"];
+        icon?: AccordionProps["icon"];
+        titleClass?: AccordionProps["titleClass"];
+        titleStyle?: AccordionProps["titleStyle"];
+        subtitleClass?: AccordionProps["subtitleClass"];
+        subtitleStyle?: AccordionProps["subtitleStyle"];
+        contentClass?: AccordionProps["contentClass"];
+        contentStyle?: AccordionProps["contentStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type AccordionProps_ = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps_, AccordionEvents, AccordionSlots> {
+}
+export {};

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

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

package/dist/web/accordion/index.js

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