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

package/dist/web/textarea/textarea.svelte

@@ -0,0 +1,224 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let value = void 0;
+export let defaultValue = void 0;
+export let onInput = void 0;
+export let onChange = void 0;
+export let className = void 0;
+export let disabled = void 0;
+export let error = void 0;
+export let errorMessage = void 0;
+export let size = void 0;
+export let block = void 0;
+export let ui = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let id = void 0;
+export let labelStyle = void 0;
+export let required = void 0;
+export let optional = void 0;
+export let optionalText = void 0;
+export let helperText = void 0;
+export let helperTextPosition = void 0;
+export let helperTextClass = void 0;
+export let helperTextStyle = void 0;
+export let wrapperClass = void 0;
+export let rounded = void 0;
+export let wrapperStyle = void 0;
+export let inputRef = void 0;
+export let textareaClass = void 0;
+export let name = void 0;
+export let placeholder = void 0;
+export let rows = void 0;
+export let readOnly = void 0;
+export let autoComplete = void 0;
+export let maxLength = void 0;
+export let minLength = void 0;
+export let resize = void 0;
+export let textareaStyle = void 0;
+export let onBlur = void 0;
+export let onFocus = void 0;
+export let onKeyDown = void 0;
+export let onKeyUp = void 0;
+export let showCount = void 0;
+export let errorMessageClass = void 0;
+export let errorMessageStyle = void 0;
+export let charCountClass = void 0;
+export let charCountStyle = 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;
+}
+function handleInput(e) {
+  if (value === void 0) {
+    innerValue = e.target.value;
+  }
+  if (onInput) {
+    onInput(e);
+  }
+}
+function handleChange(e) {
+  if (value === void 0) {
+    innerValue = e.target.value;
+  }
+  if (onChange) {
+    onChange(e);
+  }
+}
+$:
+  currentLength = () => {
+    if (value !== void 0) {
+      return String(value).length;
+    }
+    return innerValue.length;
+  };
+let innerValue = value !== void 0 ? String(value) : defaultValue !== void 0 ? String(defaultValue) : "";
+function onUpdateFn_0(..._args) {
+  if (value !== void 0) {
+    innerValue = String(value);
+  }
+}
+$:
+  onUpdateFn_0(...[value]);
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui || {}),
+    })}
+  class={`ttdk-form-item ${className || ""}`.trim()}
+  data-disabled={disabled}
+  data-error={Boolean(error || errorMessage)}
+  data-size={size || "md"}
+  data-block={block ? "true" : undefined}
+>
+  {#if label}
+    <label
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+      })}
+      class={`ttdk-form-label ${labelClass || ""}`.trim()}
+      for={id}
+      ><span>{label}</span>
+      {#if required}
+        <span class="ttdk-form-required" aria-hidden="true"> * </span>
+      {/if}
+      {#if optional}
+        <span class="ttdk-form-optional">{optionalText || "(Opsional)"}</span>
+      {/if}</label
+    >
+  {/if}
+  {#if helperText && helperTextPosition === "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(wrapperStyle),
+    })}
+    class={`ttdk-textarea-wrapper ${wrapperClass || ""}`.trim()}
+    data-filled={Boolean(value !== undefined ? value : innerValue)}
+    data-error={Boolean(error || errorMessage)}
+    data-disabled={Boolean(disabled)}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+  >
+    <textarea
+      style={stringifyStyles({
+        resize: resize || "vertical",
+        ...buildUiVars(textareaStyle),
+      })}
+      bind:this={inputRef}
+      class={`ttdk-textarea-control ${textareaClass || ""}`.trim()}
+      {name}
+      {id}
+      value={value !== undefined ? value : innerValue}
+      {placeholder}
+      rows={rows || 4}
+      {disabled}
+      {readOnly}
+      {required}
+      autocomplete={autoComplete}
+      {maxLength}
+      {minLength}
+      aria-invalid={Boolean(error || errorMessage)}
+      on:change={(e) => {
+        handleChange(e);
+      }}
+      on:input={(e) => {
+        handleInput(e);
+      }}
+      on:blur={(e) => {
+        onBlur && onBlur(e);
+      }}
+      on:focus={(e) => {
+        onFocus && onFocus(e);
+      }}
+      on:keydown={(e) => {
+        onKeyDown && onKeyDown(e);
+      }}
+      on:keyup={(e) => {
+        onKeyUp && onKeyUp(e);
+      }}
+    />
+  </div>
+  {#if (helperText && helperTextPosition !== "top") || (errorMessage && (error || errorMessage)) || showCount}
+    <div class="ttdk-form-footer">
+      {#if (helperText && helperTextPosition !== "top") || (errorMessage && (error || errorMessage))}
+        <div class="ttdk-form-footer-message">
+          {#if helperText && helperTextPosition !== "top"}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(helperTextStyle),
+              })}
+              class={`ttdk-form-helper-text ${helperTextClass || ""}`.trim()}
+            >
+              {helperText}
+            </div>
+          {/if}
+          {#if errorMessage && (error || errorMessage)}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(errorMessageStyle),
+              })}
+              role="alert"
+              class={`ttdk-form-error-msg ${errorMessageClass || ""}`.trim()}
+            >
+              <span>{errorMessage}</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if showCount}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(charCountStyle),
+          })}
+          aria-live="polite"
+          class={`ttdk-form-char-count ${charCountClass || ""}`.trim()}
+        >
+          {currentLength()}
+          {#if maxLength}
+            {` / ${maxLength}`}
+          {:else}
+            <div _text="" />
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,274 @@
+import { SvelteComponent } from "svelte";
+export type TextareaUiProps = UiProps;
+export interface TextareaProps {
+    /**
+     * Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313).
+     */
+    label?: string;
+    /**
+     * Style kustom untuk elemen label judul field (UiProps).
+     */
+    labelStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen label judul field.
+     */
+    labelClass?: string;
+    /**
+     * Style kustom untuk elemen kontainer textarea wrapper (UiProps).
+     */
+    wrapperStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen kontainer textarea wrapper.
+     */
+    wrapperClass?: string;
+    /**
+     * Style kustom untuk elemen textarea control HTML (UiProps).
+     */
+    textareaStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen textarea control HTML.
+     */
+    textareaClass?: string;
+    /**
+     * Style kustom untuk elemen pesan error validasi (UiProps).
+     */
+    errorMessageStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen pesan error validasi.
+     */
+    errorMessageClass?: string;
+    /**
+     * Style kustom untuk elemen helper text (UiProps).
+     */
+    helperTextStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen helper text.
+     */
+    helperTextClass?: string;
+    /**
+     * Style kustom untuk elemen penghitung karakter (UiProps).
+     */
+    charCountStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen penghitung karakter.
+     */
+    charCountClass?: string;
+    /**
+     * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+     */
+    optional?: boolean;
+    /**
+     * Kustomisasi teks keterangan opsional.
+     * @default '(Opsional)'
+     */
+    optionalText?: string;
+    /**
+     * Nilai teks placeholder saat textarea kosong (#9698A2).
+     */
+    placeholder?: string;
+    /**
+     * Nilai terkontrol (controlled value) pada textarea.
+     */
+    value?: string;
+    /**
+     * Nilai awal tidak terkontrol (uncontrolled initial value).
+     */
+    defaultValue?: string;
+    /**
+     * Jumlah baris default yang ditampilkan.
+     * @default 4
+     */
+    rows?: number;
+    /**
+     * Nama form field HTML untuk integrasi formulir.
+     */
+    name?: string;
+    /**
+     * Identifier unik elemen textarea.
+     */
+    id?: string;
+    /**
+     * Kontrol orientasi resize oleh pengguna.
+     * - `'none'`: Tidak dapat di-resize
+     * - `'vertical'`: Hanya dapat di-resize vertikal (standar)
+     * - `'horizontal'`: Hanya dapat di-resize horizontal
+     * - `'both'`: Bebas di-resize kedua arah
+     * @default 'vertical'
+     */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    /**
+     * Status apakah textarea sedang dalam kondisi error / tidak valid.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Pesan teks penjelasan kesalahan validasi di bawah field.
+     */
+    errorMessage?: string;
+    /**
+     * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+     */
+    helperText?: string;
+    /**
+     * Posisi teks helper
+     */
+    helperTextPosition?: "top" | "bottom";
+    /**
+     * Skala ukuran textarea.
+     * - `'sm'`: Padding rapat
+     * - `'md'`: Standar
+     * - `'lg'`: Padding lapang
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Bentuk sudut kelengkungan textarea.
+     * - `'none'`: 0px
+     * - `'sm'`: 4px
+     * - `'md'`: 8px (standar desain)
+     * - `'lg'`: 12px
+     * - `'full'`: 16px
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%).
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Status apakah field dinonaktifkan (disabled).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Status apakah field bersifat hanya-baca (readonly).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Konfigurasi atribut autocomplete HTML.
+     */
+    autoComplete?: string;
+    /**
+     * Batas maksimum panjang karakter.
+     */
+    maxLength?: number;
+    /**
+     * Batas minimum panjang karakter.
+     */
+    minLength?: number;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Kustomisasi visual granular root / form-item (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback event saat nilai textarea berubah.
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Callback event saat pengguna mengetik (input event).
+     */
+    onInput?: (event: any) => void;
+    /**
+     * Callback event saat textarea kehilangan fokus (blur).
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Callback event saat textarea mendapatkan fokus.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select).
+     */
+    inputRef?: any;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Callback event tombol keyboard ditekan.
+     */
+    onKeyDown?: (event: any) => void;
+    /**
+     * Callback event tombol keyboard dilepaskan.
+     */
+    onKeyUp?: (event: any) => void;
+    /**
+     * Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`).
+     * Memerlukan prop `maxLength` untuk berfungsi.
+     * @default false
+     */
+    showCount?: boolean;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        value?: TextareaProps["value"];
+        defaultValue?: TextareaProps["defaultValue"];
+        onInput?: TextareaProps["onInput"];
+        onChange?: TextareaProps["onChange"];
+        className?: TextareaProps["className"];
+        disabled?: TextareaProps["disabled"];
+        error?: TextareaProps["error"];
+        errorMessage?: TextareaProps["errorMessage"];
+        size?: TextareaProps["size"];
+        block?: TextareaProps["block"];
+        ui?: TextareaProps["ui"];
+        label?: TextareaProps["label"];
+        labelClass?: TextareaProps["labelClass"];
+        id?: TextareaProps["id"];
+        labelStyle?: TextareaProps["labelStyle"];
+        required?: TextareaProps["required"];
+        optional?: TextareaProps["optional"];
+        optionalText?: TextareaProps["optionalText"];
+        helperText?: TextareaProps["helperText"];
+        helperTextPosition?: TextareaProps["helperTextPosition"];
+        helperTextClass?: TextareaProps["helperTextClass"];
+        helperTextStyle?: TextareaProps["helperTextStyle"];
+        wrapperClass?: TextareaProps["wrapperClass"];
+        rounded?: TextareaProps["rounded"];
+        wrapperStyle?: TextareaProps["wrapperStyle"];
+        inputRef?: TextareaProps["inputRef"];
+        textareaClass?: TextareaProps["textareaClass"];
+        name?: TextareaProps["name"];
+        placeholder?: TextareaProps["placeholder"];
+        rows?: TextareaProps["rows"];
+        readOnly?: TextareaProps["readOnly"];
+        autoComplete?: TextareaProps["autoComplete"];
+        maxLength?: TextareaProps["maxLength"];
+        minLength?: TextareaProps["minLength"];
+        resize?: TextareaProps["resize"];
+        textareaStyle?: TextareaProps["textareaStyle"];
+        onBlur?: TextareaProps["onBlur"];
+        onFocus?: TextareaProps["onFocus"];
+        onKeyDown?: TextareaProps["onKeyDown"];
+        onKeyUp?: TextareaProps["onKeyUp"];
+        showCount?: TextareaProps["showCount"];
+        errorMessageClass?: TextareaProps["errorMessageClass"];
+        errorMessageStyle?: TextareaProps["errorMessageStyle"];
+        charCountClass?: TextareaProps["charCountClass"];
+        charCountStyle?: TextareaProps["charCountStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TextareaProps_ = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponent<TextareaProps_, TextareaEvents, TextareaSlots> {
+}
+export {};

package/dist/web/tooltip/AI_GUIDE.md

@@ -0,0 +1,110 @@
+# <Tooltip /> — TTDK Component Reference
+
+Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/tooltip/tooltip.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+
+// Vue 3
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+
+// Svelte
+import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `text?` | `string` | `-` | Teks konten tooltip yang ditampilkan. |
+| `content?` | `any` | `-` | Konten kustom tooltip (JSX / VNode atau renderable content). |
+| `kbd?` | `string | string[]` | `-` | Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']). |
+| `placement?` | `TooltipPlacement` | `top` | Posisi penempatan tooltip terhadap elemen pemicu. |
+| `offsetDistance?` | `number` | `8` | Jarak offset dalam pixel dari elemen pemicu (trigger). |
+| `arrow?` | `boolean` | `true` | Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu. |
+| `openDelay?` | `number` | `150` | Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter). |
+| `closeDelay?` | `number` | `100` | Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave). |
+| `open?` | `boolean` | `-` | Status visibilitas tooltip terkontrol (controlled mode). |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal (uncontrolled initial state). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus. |
+| `ui?` | `TooltipUiProps` | `-` | Kustomisasi visual granular container utama (UiProps). |
+| `style?` | `any` | `-` | Style inline CSS native untuk wrapper luar. |
+| `className?` | `string` | `-` | Class CSS kustom untuk wrapper luar. |
+| `triggerClass?` | `string` | `-` | Class CSS kustom untuk pemicu (trigger container). |
+| `triggerStyle?` | `UiProps` | `-` | Style kustom untuk pemicu (trigger container) (UiProps). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk panel tooltip konten. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk panel tooltip konten (UiProps). |
+| `arrowClass?` | `string` | `-` | Class CSS kustom untuk elemen panah (arrow). |
+| `arrowStyle?` | `UiProps` | `-` | Style kustom untuk elemen panah (arrow) (UiProps). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback saat status open berubah. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger) yang dibungkus oleh tooltip. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import React from "react";
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+        <Button variant="outline">Salin</Button>
+      </Tooltip>
+      <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+        <Button variant="primary">Kirim Resep</Button>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-vue/button/button.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+      <Button variant="outline">Salin</Button>
+    </Tooltip>
+    <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+      <Button variant="primary">Kirim Resep</Button>
+    </Tooltip>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/web/tooltip/tooltip.css";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+</script>
+
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+    <Button variant="outline">Salin</Button>
+  </Tooltip>
+  <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+    <Button variant="primary">Kirim Resep</Button>
+  </Tooltip>
+</div>
+```

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

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

package/dist/web/tooltip/index.js

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