svelte-comp 1.2.5 → 1.2.6

package/dist/lib/DatePicker.svelte

@@ -1,170 +0,0 @@
-<!-- src/lib/DatePicker.svelte -->
-<script lang="ts">
-  /**
-   * @component DatePicker
-   * @description Button-driven date selector that formats the chosen value and supports min/max limits.
-   *
-   * @prop value {string | null} - Selected date value (ISO `YYYY-MM-DD`)
-   * @default null
-   *
-   * @prop min {string} - Minimum selectable date (ISO `YYYY-MM-DD`)
-   *
-   * @prop max {string} - Maximum selectable date (ISO `YYYY-MM-DD`)
-   *
-   * @prop label {string} - Label text displayed above the picker
-   *
-   * @prop placeholder {string} - Placeholder shown when no date is selected
-   *
-   * @prop locale {string} - Locale used for formatting
-   *
-   * @prop formatOptions {Intl.DateTimeFormatOptions} - Custom date formatting options
-   *
-   * @prop disabled {boolean} - Disables all interactions
-   * @default false
-   *
-   * @prop clearable {boolean} - Shows a clear button to reset the value
-   * @default true
-   *
-   * @prop onChange {(value: string | null) => void} - Fired when the date changes
-   *
-   * @prop class {string} - Additional classes for the wrapper element
-   * @default ""
-   *
-   * @note Wraps a hidden `<input type="date">` so native date-pickers, keyboard, and validation work automatically.
-   * @note `showPicker()` is used when available for a consistent trigger; fallback is focus + click.
-   * @note Formatter uses `Intl.DateTimeFormat` (with `locale`/`formatOptions`) and gracefully falls back to `toLocaleDateString()`.
-   * @note `clearable` resets the underlying input value and dispatches `onChange(null)`.
-   * @note Preview card includes `aria-live="polite"` to announce updated dates.
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import { getContext } from "svelte";
-  import Button from "./Button.svelte";
-  import { cx, formatDate } from "../utils";
-  import { TEXTS } from "./lang";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: string | null;
-    min?: string;
-    max?: string;
-    label?: string;
-    placeholder?: string;
-    locale?: string;
-    formatOptions?: Intl.DateTimeFormatOptions;
-    disabled?: boolean;
-    clearable?: boolean;
-    onChange?: (value: string | null) => void;
-    class?: string;
-  };
-
-  let {
-    value = $bindable<string | null>(null),
-    min,
-    max,
-    label,
-    placeholder,
-    locale,
-    formatOptions,
-    disabled = false,
-    clearable = true,
-    onChange,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const langCtx =
-    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
-  const langKey = $derived(langCtx?.value ?? "en");
-  const L = $derived(TEXTS[langKey].components.datePicker);
-
-  const labelFinal = $derived(label ?? L.text);
-  const placeholderFinal = $derived(placeholder ?? L.placeholder);
-
-  let inputEl: HTMLInputElement;
-
-  const base = "inline-block w-full";
-  const pickerClass = $derived(cx(base, externalClass));
-
-  const hasValue = $derived(Boolean(value));
-  const formattedValue = $derived(formatDate(value, locale, formatOptions));
-
-  $effect(() => {
-    if (inputEl) {
-      inputEl.value = value ?? "";
-    }
-  });
-
-  function openPicker() {
-    if (disabled) return;
-    if (typeof inputEl?.showPicker === "function") {
-      inputEl.showPicker();
-    } else {
-      inputEl?.focus();
-      inputEl?.click();
-    }
-  }
-
-  function handleInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const nextValue = target.value || null;
-    value = nextValue;
-    onChange?.(nextValue);
-  }
-
-  function clearSelection() {
-    if (!clearable) return;
-    value = null;
-    if (inputEl) {
-      inputEl.value = "";
-    }
-    onChange?.(null);
-  }
-</script>
-
-<div class={pickerClass} {...rest}>
-  <div class="text-md font-medium mb-2 [color:var(--color-text-default)]">
-    {labelFinal}:
-  </div>
-  <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
-    <Button onClick={openPicker} {disabled} sz="xs">
-      {L.date}
-    </Button>
-
-    {#if clearable}
-      <Button
-        onClick={clearSelection}
-        variant="danger"
-        disabled={!hasValue || disabled}
-        sz="xs"
-      >
-        {L.clear}
-      </Button>
-    {/if}
-  </div>
-
-  <input
-    bind:this={inputEl}
-    type="date"
-    {min}
-    {max}
-    {disabled}
-    class="invisible absolute w-px h-px"
-    onchange={handleInput}
-  />
-
-  <div
-    class="mt-3 p-4 bg-[var(--color-bg-surface)] text-center"
-    aria-live="polite"
-  >
-    <p class="text-xs uppercase tracking-wide [color:var(--color-text-muted)]">
-      {L.selectedDate}
-    </p>
-
-    <p class="text-sm font-semibold mt-1 [color:var(--color-text-default)]">
-      {#if hasValue}
-        {formattedValue}
-      {:else}
-        {placeholderFinal}
-      {/if}
-    </p>
-  </div>
-</div>

package/dist/lib/DatePicker.svelte.d.ts

@@ -1,53 +0,0 @@
-/**
-   * @component DatePicker
-   * @description Button-driven date selector that formats the chosen value and supports min/max limits.
-   *
-   * @prop value {string | null} - Selected date value (ISO `YYYY-MM-DD`)
-   * @default null
-   *
-   * @prop min {string} - Minimum selectable date (ISO `YYYY-MM-DD`)
-   *
-   * @prop max {string} - Maximum selectable date (ISO `YYYY-MM-DD`)
-   *
-   * @prop label {string} - Label text displayed above the picker
-   *
-   * @prop placeholder {string} - Placeholder shown when no date is selected
-   *
-   * @prop locale {string} - Locale used for formatting
-   *
-   * @prop formatOptions {Intl.DateTimeFormatOptions} - Custom date formatting options
-   *
-   * @prop disabled {boolean} - Disables all interactions
-   * @default false
-   *
-   * @prop clearable {boolean} - Shows a clear button to reset the value
-   * @default true
-   *
-   * @prop onChange {(value: string | null) => void} - Fired when the date changes
-   *
-   * @prop class {string} - Additional classes for the wrapper element
-   * @default ""
-   *
-   * @note Wraps a hidden `<input type="date">` so native date-pickers, keyboard, and validation work automatically.
-   * @note `showPicker()` is used when available for a consistent trigger; fallback is focus + click.
-   * @note Formatter uses `Intl.DateTimeFormat` (with `locale`/`formatOptions`) and gracefully falls back to `toLocaleDateString()`.
-   * @note `clearable` resets the underlying input value and dispatches `onChange(null)`.
-   * @note Preview card includes `aria-live="polite"` to announce updated dates.
-   */
-import type { HTMLAttributes } from "svelte/elements";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: string | null;
-    min?: string;
-    max?: string;
-    label?: string;
-    placeholder?: string;
-    locale?: string;
-    formatOptions?: Intl.DateTimeFormatOptions;
-    disabled?: boolean;
-    clearable?: boolean;
-    onChange?: (value: string | null) => void;
-    class?: string;
-};
-declare const DatePicker: import("svelte").Component<Props, {}, "value">;
-type DatePicker = ReturnType<typeof DatePicker>;
-export default DatePicker;

package/dist/lib/Dialog.svelte

@@ -1,235 +0,0 @@
-<!-- src/lib/Dialog.svelte -->
-<script lang="ts">
-  /**
-   * @component Dialog
-   * @description Modal dialog for confirmations or alerts.
-   *
-   * @prop open {boolean} - Controls dialog visibility
-   * @default false
-   *
-   * @prop title {string} - Dialog title used for labeling
-   * @default ""
-   *
-   * @prop message {string} - Simple message content
-   * @default ""
-   *
-   * @prop onConfirm {() => void} - Fired when the confirm action is triggered
-   * @default () => {}
-   *
-   * @prop onCancel {() => void} - Fired when the cancel action is triggered
-   * @default () => {}
-   *
-   * @prop onClose {() => void} - Fired after confirm or cancel to centralize cleanup
-   * @default () => {}
-   *
-   * @prop modal {boolean} - Enables modal mode with overlay and focus trap
-   * @default true
-   *
-   * @prop class {string} - Extra classes applied to the dialog container
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Size preset for padding and text
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop children {Snippet} - Custom dialog body content
-   *
-   * @note In modal mode the first interactive element is focused automatically and focus is trapped inside the dialog; `Escape` triggers cancel.
-   * @note `onClose` runs after `onConfirm`/`onCancel`, so you can centralize cleanup.
-   * @note Non-modal mode (`modal=false`) renders a floating panel without overlay or focus trap.
-   * @note Buttons are labeled "OK" and "Cancel" and aren't customizable via props; provide `children` for full custom UI.
-   * @note Set a meaningful `title` for accessibility; it's used as the dialog's `aria-label`.
-   * @note `sz` adjusts both dialog padding and text sizes to match the rest of the system tokens.
-   */
-  import type { Snippet } from "svelte";
-  import { getContext } from "svelte";
-  import { TEXTS } from "./lang";
-  import Button from "./Button.svelte";
-  import { type SizeKey, TEXT } from "./types";
-  import { cx, focusFirstInteractive, trapFocus } from "../utils";
-
-  type Props = {
-    open?: boolean;
-    title?: string;
-    message?: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    onClose?: () => void;
-    modal?: boolean;
-    class?: string;
-    sz?: SizeKey;
-    children?: Snippet<[SizeKey]>;
-  };
-
-  let {
-    open = false,
-    title = "",
-    message = "",
-    onConfirm = () => {},
-    onCancel = () => {},
-    onClose = () => {},
-    modal = true,
-    class: externalClass = "",
-    sz = "md",
-    children,
-  }: Props = $props();
-
-  const langCtx =
-    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
-  const langKey = $derived(langCtx?.value ?? "en");
-  const L = $derived(TEXTS[langKey].components.dialog);
-
-  let panelEl = $state<HTMLDivElement | null>(null);
-  let releaseFocus: (() => void) | null = null;
-
-  function handleConfirm() {
-    onConfirm();
-    onClose();
-  }
-
-  function handleCancel() {
-    onCancel();
-    onClose();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      handleCancel();
-    }
-  }
-
-  const panelBase =
-    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-lg min-w-80 max-w-md w-full border border-[var(--border-color-default)]";
-
-  const paddingBySize: Record<SizeKey, string> = {
-    xs: "p-[var(--spacing-sm)]",
-    sm: "p-[var(--spacing-md)]",
-    md: "p-[var(--spacing-lg)]",
-    lg: "p-[var(--spacing-xl)]",
-    xl: "p-[var(--spacing-xl)]",
-  };
-
-  const titleTextBySize: Record<SizeKey, string> = {
-    xs: TEXT.md,
-    sm: TEXT.md,
-    md: TEXT.xl,
-    lg: TEXT.xl,
-    xl: "text-2xl",
-  };
-
-  const panelClass = $derived(cx(panelBase, externalClass));
-  const paddingCls = $derived(paddingBySize[sz]);
-  const footerPaddingCls = $derived(cx(paddingCls, "pt-0"));
-  const titleTextCls = $derived(titleTextBySize[sz]);
-  const bodyTextCls = $derived(TEXT[sz]);
-
-  $effect(() => {
-    releaseFocus?.();
-    if (open && panelEl) {
-      queueMicrotask(() => {
-        focusFirstInteractive(panelEl!);
-        if (modal) {
-          releaseFocus = trapFocus(panelEl!);
-        }
-      });
-    } else {
-      releaseFocus = null;
-    }
-
-    return () => {
-      releaseFocus?.();
-      releaseFocus = null;
-    };
-  });
-</script>
-
-{#snippet titleBlock()}
-  <h3
-    class={cx(
-      "mb-2 font-[var(--font-weight-semibold)] color-[var(--color-text-default)]",
-      titleTextCls
-    )}
-  >
-    {title}
-  </h3>
-  <p
-    class={cx(
-      "leading-[var(--line-height-normal)] color-[var(--color-text-muted)]",
-      bodyTextCls
-    )}
-  >
-    {message}
-  </p>
-{/snippet}
-
-{#if open}
-  {#if modal}
-    <div
-      class="fixed inset-0 z-[var(--z-modal)] bg-oklch(0_0_0/var(--opacity-overlay)) flex items-center justify-center p-4"
-      role="presentation"
-      tabindex="-1"
-      onkeydown={handleKeydown}
-    >
-      <div
-        class={panelClass}
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        bind:this={panelEl}
-      >
-        <div class={paddingCls}>
-          {@render titleBlock()}
-
-          {#if children}
-            <div class="mt-3">
-              {@render children?.(sz)}
-            </div>
-          {/if}
-        </div>
-
-        <div class={cx("flex gap-2 justify-end", footerPaddingCls)}>
-          <Button {sz} variant="primary" onClick={handleConfirm}>{L.ok}</Button>
-          <Button {sz} variant="secondary" onClick={handleCancel}>{L.cancel}</Button
-          >
-        </div>
-      </div>
-    </div>
-  {:else}
-    <div
-      class="fixed top-4 right-4 z-[var(--z-modal)]"
-      role="dialog"
-      aria-modal="false"
-      aria-label={title}
-      tabindex="-1"
-      onkeydown={handleKeydown}
-    >
-      <div class={panelClass} bind:this={panelEl}>
-        <div class={paddingCls}>
-          {@render titleBlock()}
-
-          {#if children}
-            <div class={cx("mt-3", bodyTextCls)}>
-              {@render children?.(sz)}
-            </div>
-          {/if}
-        </div>
-
-        <div class={cx("flex gap-2 justify-end", footerPaddingCls)}>
-          <Button {sz} variant="primary" onClick={handleConfirm}>{L.ok}</Button>
-          <Button {sz} variant="secondary" onClick={handleCancel}>{L.cancel}</Button
-          >
-        </div>
-      </div>
-    </div>
-  {/if}
-{/if}
-<style>
-  :global(.fusion-dialog h3) {
-    color: var(--color-text-default);
-  }
-
-  :global(.fusion-dialog p) {
-    color: var(--color-text-muted);
-  }
-</style>

package/dist/lib/Dialog.svelte.d.ts

@@ -1,58 +0,0 @@
-/**
-   * @component Dialog
-   * @description Modal dialog for confirmations or alerts.
-   *
-   * @prop open {boolean} - Controls dialog visibility
-   * @default false
-   *
-   * @prop title {string} - Dialog title used for labeling
-   * @default ""
-   *
-   * @prop message {string} - Simple message content
-   * @default ""
-   *
-   * @prop onConfirm {() => void} - Fired when the confirm action is triggered
-   * @default () => {}
-   *
-   * @prop onCancel {() => void} - Fired when the cancel action is triggered
-   * @default () => {}
-   *
-   * @prop onClose {() => void} - Fired after confirm or cancel to centralize cleanup
-   * @default () => {}
-   *
-   * @prop modal {boolean} - Enables modal mode with overlay and focus trap
-   * @default true
-   *
-   * @prop class {string} - Extra classes applied to the dialog container
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Size preset for padding and text
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop children {Snippet} - Custom dialog body content
-   *
-   * @note In modal mode the first interactive element is focused automatically and focus is trapped inside the dialog; `Escape` triggers cancel.
-   * @note `onClose` runs after `onConfirm`/`onCancel`, so you can centralize cleanup.
-   * @note Non-modal mode (`modal=false`) renders a floating panel without overlay or focus trap.
-   * @note Buttons are labeled "OK" and "Cancel" and aren't customizable via props; provide `children` for full custom UI.
-   * @note Set a meaningful `title` for accessibility; it's used as the dialog's `aria-label`.
-   * @note `sz` adjusts both dialog padding and text sizes to match the rest of the system tokens.
-   */
-import type { Snippet } from "svelte";
-import { type SizeKey } from "./types";
-type Props = {
-    open?: boolean;
-    title?: string;
-    message?: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    onClose?: () => void;
-    modal?: boolean;
-    class?: string;
-    sz?: SizeKey;
-    children?: Snippet<[SizeKey]>;
-};
-declare const Dialog: import("svelte").Component<Props, {}, "">;
-type Dialog = ReturnType<typeof Dialog>;
-export default Dialog;