svelte-comp 1.2.2 → 1.2.6

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

@@ -1,42 +0,0 @@
-/**
-   * @component Switch
-   * @description A compact toggle switch component built on top of a native `<input type="checkbox">`. Supports optional labels around the control and works naturally with `bind:checked`.
-   *
-   * @prop sz {SizeKey} - Size preset for the control
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop checked {boolean} - Current state (bindable)
-   * @default false
-   *
-   * @prop leftLabel {string} - Optional label rendered on the left side
-   *
-   * @prop rightLabel {string} - Optional label rendered on the right side
-   *
-   * @prop topLabel {string} - Optional label placed above the switch
-   *
-   * @prop onChange {(v: boolean) => void} - Fired on toggle with the new value
-   *
-   * @prop class {string} - External wrapper classes
-   * @default ""
-   *
-   * @note Built over a real checkbox so browser accessibility comes for free: keyboard (Space/Enter), focus ring, and screen reader semantics.
-   * @note Labels do not affect the actual checkbox hitbox, but the whole area is clickable if wrapped correctly.
-   * @note Size preset adjusts track width, knob size, and spacing.
-   * @note Reflects `disabled` by dimming visuals and removing pointer events.
-   * @note The component keeps no internal state besides the bound `checked` value, so it's predictable in forms and controlled UI.
-   */
-import type { HTMLInputAttributes } from "svelte/elements";
-import type { SizeKey } from "./types";
-type Props = HTMLInputAttributes & {
-    sz?: SizeKey;
-    checked?: boolean;
-    leftLabel?: string;
-    rightLabel?: string;
-    topLabel?: string;
-    onChange?: (v: boolean) => void;
-    class?: string;
-};
-declare const Switch: import("svelte").Component<Props, {}, "checked">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

package/dist/lib/Table.svelte

@@ -1,299 +0,0 @@
-<!-- src/lib/Table.svelte -->
-<script lang="ts">
-  /**
-   * @component Table
-   * @description Sortable table with optional zebra striping, sticky header, and external pagination. Compact variants (`dense`, `list`) shrink horizontally to fit content.
-   *
-   * @prop columns {readonly Column<T>[]} - Column definitions with labels and keys
-   * @default []
-   *
-   * @prop rows {readonly T[]} - Row data objects
-   * @default []
-   *
-   * @prop class {string} - Custom classes for the table container
-   * @default ""
-   *
-   * @prop variant {TableVariant} - Visual style variant
-   * @options default|dense|list|noBorder|noTitle|zebra
-   * @default default
-   *
-   * @prop stickyHeader {boolean} - Makes the header row sticky
-   * @default false
-   *
-   * @prop sz {SizeKey} - Size preset for spacing and text
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop pagination {{ currentPage: number; totalPages: number; onPageChange: (p: number) => void }} - External pagination controls
-   *
-   * @note Click a column header to toggle ascending or descending.
-   * @note In `dense` and `list` the table uses content width (`inline-table` + `w-fit`).
-   * @note Column `width` is applied only in non-compact variants (`default`, `zebra`, `noBorder`, `noTitle`).
-   * @note `list` hides the header row.
-   * @note Integrates with `Pagination.svelte` via the `pagination` prop.
-   * @note Works in dark mode and supports keyboard sorting (Enter or Space on headers).
-   */
-  import Pagination from "./Pagination.svelte";
-  import type {
-    CellAlign,
-    Column,
-    SizeKey,
-    TableRow,
-    TableVariant,
-  } from "./types";
-  import { TEXT } from "./types";
-  import { cx } from "../utils";
-
-  type Props<T extends TableRow> = {
-    columns: readonly Column<T>[];
-    rows: readonly T[];
-    class?: string;
-    variant?: TableVariant;
-    stickyHeader?: boolean;
-    sz?: SizeKey;
-    pagination?: {
-      currentPage: number;
-      totalPages: number;
-      onPageChange: (page: number) => void;
-    };
-  };
-
-  let {
-    columns = [],
-    rows = [],
-    class: externalClass = "",
-    variant = "default",
-    stickyHeader = false,
-    sz = "md",
-    pagination,
-  }: Props<TableRow> = $props();
-
-  let sortKey = $state<keyof TableRow | null>(null);
-  let sortDir = $state<"asc" | "desc" | null>(null);
-
-  function toggleSort(col: Column<TableRow>) {
-    const key = col.key;
-    if (sortKey !== key) {
-      sortKey = key;
-      sortDir = "asc";
-    } else {
-      sortDir = sortDir === "asc" ? "desc" : "asc";
-    }
-  }
-
-  function cmp(a: unknown, b: unknown): number {
-    const an = a == null || a === "";
-    const bn = b == null || b === "";
-    if (an && bn) return 0;
-    if (an) return 1;
-    if (bn) return -1;
-
-    const na = Number(a);
-    const nb = Number(b);
-    const aNum = !Number.isNaN(na);
-    const bNum = !Number.isNaN(nb);
-
-    if (aNum && bNum) return na - nb;
-
-    return String(a).localeCompare(String(b), undefined, {
-      numeric: true,
-      sensitivity: "base",
-    });
-  }
-
-  const variants = {
-    default: {
-      table: "border border-[var(--border-color-default)]",
-      header:
-        "bg-[var(--color-bg-secondary)] border border-[var(--border-color-default)]",
-      body: "",
-      cell: "border-t border-r last:border-r-0 border-[var(--border-color-default)]",
-      row: "hover:bg-[var(--color-bg-hover)]",
-      padY: "py-2",
-    },
-    dense: {
-      table: "border border-[var(--border-color-default)]",
-      header:
-        "bg-[var(--color-bg-secondary)] border border-[var(--border-color-default)]",
-      body: "",
-      cell: "border-t border-r last:border-r-0 border-[var(--border-color-default)]",
-      row: "hover:bg-[var(--color-bg-hover)]",
-      padY: "py-1.5",
-    },
-    list: {
-      table: "border-none",
-      header: "hidden",
-      body: "",
-      cell: "border-none",
-      row: "hover:bg-[var(--color-bg-hover)]",
-      padY: "py-1.5",
-    },
-    noBorder: {
-      table: "border-none",
-      header: "bg-transparent border-none",
-      body: "",
-      cell: "border-none",
-      row: "hover:bg-[var(--color-bg-hover)]",
-      padY: "py-2",
-    },
-    zebra: {
-      table: "border border-[var(--border-color-default)]",
-      header:
-        "bg-[var(--color-bg-secondary)] border border-[var(--border-color-default)]",
-      body: "",
-      cell: "border-t border-r last:border-r-0 border-[var(--border-color-default)]",
-      row: "even:bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)]",
-      padY: "py-2",
-    },
-    noTitle: {
-      table: "border border-[var(--border-color-default)]",
-      header: "hidden",
-      body: "",
-      cell: "border-t border-r last:border-r-0 border-[var(--border-color-default)]",
-      row: "hover:bg-[var(--color-bg-hover)]",
-      padY: "py-2",
-    },
-  };
-
-  const displayRows = $derived.by(() => {
-    const base = Array.isArray(rows) ? rows : [];
-    if (!sortKey || !sortDir) return base as TableRow[];
-    const key = sortKey;
-    const withIdx = base.map((r, i) => [r as TableRow, i] as const);
-    withIdx.sort(([r1, i1], [r2, i2]) => {
-      const res = cmp(r1[key], r2[key]);
-      if (res !== 0) return sortDir === "asc" ? res : -res;
-      return i1 - i2;
-    });
-    return withIdx.map(([r]) => r);
-  });
-
-  const alignTd = (a?: CellAlign) =>
-    a === "end" ? "text-right" : a === "start" ? "text-left" : "text-center";
-
-  const alignTh = (a?: CellAlign) =>
-    a === "end"
-      ? "justify-end"
-      : a === "center"
-        ? "justify-center"
-        : "justify-start";
-
-  const wrapperClass = $derived(cx("overflow-x-auto", externalClass));
-  const tableTextSize = $derived(TEXT[sz]);
-  const currentVariant = $derived(variant);
-  const isCompact = $derived(
-    currentVariant === "list" || currentVariant === "dense"
-  );
-  const variantStyles = $derived(variants[currentVariant] ?? variants.default);
-
-  const tableClass = $derived(
-    cx(
-      isCompact ? "inline-table w-fit" : "min-w-full",
-      "border-collapse",
-      variantStyles.table,
-      tableTextSize,
-      "text-[var(--color-text-default)]"
-    )
-  );
-
-  const getRowKey = (row: TableRow, idx: number) => {
-    const candidate =
-      typeof row.id === "string" || typeof row.id === "number"
-        ? row.id
-        : typeof row.key === "string" || typeof row.key === "number"
-          ? row.key
-          : idx;
-    return String(candidate);
-  };
-
-  const getColumnKey = (col: Column<TableRow>, idx: number) =>
-    String(col.key ?? idx);
-</script>
-
-<div class={wrapperClass} tabindex="-1">
-  <table class={tableClass}>
-    <thead class={variantStyles.header}>
-      {#if currentVariant !== "noTitle" && currentVariant !== "list"}
-        <tr class={cx(stickyHeader && "sticky top-0 z-10")}>
-          {#each columns as col, idx (getColumnKey(col, idx))}
-            <th
-              style={!isCompact && col.width ? `width:${col.width}` : undefined}
-              class={cx(
-                "px-3 font-semibold",
-                variantStyles.padY,
-                alignTd(col.align)
-              )}
-              aria-sort={sortKey === col.key
-                ? sortDir === "asc"
-                  ? "ascending"
-                  : "descending"
-                : "none"}
-              scope="col"
-            >
-              <button
-                type="button"
-                class={cx(
-                  "flex w-full items-center gap-2 select-none hover:bg-[var(--color-bg-hover)] rounded-none px-1 py-0.5 border border-transparent focus-visible:border-[var(--border-color-focus)] focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:outline-none",
-                  alignTh(col.align)
-                )}
-                onclick={() => toggleSort(col)}
-                onkeydown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    toggleSort(col);
-                  }
-                }}
-                aria-label={`Sort by ${col.label}`}
-              >
-                <span class={cx("truncate min-w-0", alignTd(col.align))}>
-                  {col.label}
-                </span>
-                <svg
-                  class={cx(
-                    "h-4 w-4 opacity-60 transition-transform",
-                    sortKey === col.key && sortDir === "desc" && "rotate-180"
-                  )}
-                  viewBox="0 0 20 20"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M5.23 11.77a.75.75 0 0 1 0-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 1 1-1.06 1.06L10 8.31l-3.77 3.46a.75.75 0 0 1-1 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </th>
-          {/each}
-        </tr>
-      {/if}
-    </thead>
-
-    <tbody class={variantStyles.body}>
-      {#each displayRows as row, rowIdx (getRowKey(row, rowIdx))}
-        <tr class={cx("first:[&>td]:border-t-0", variantStyles.row)}>
-          {#each columns as col, idx (getColumnKey(col, idx))}
-            <td
-              style={!isCompact && col.width ? `width:${col.width}` : undefined}
-              class={cx(
-                "px-3",
-                variantStyles.padY,
-                alignTd(col.align),
-                variantStyles.cell
-              )}
-            >
-              <div class={cx(isCompact && "break-words whitespace-normal")}>
-                {row[col.key]}
-              </div>
-            </td>
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  {#if pagination && pagination.totalPages > 0}
-    <div class="mt-3 flex justify-between items-center">
-      <Pagination {...pagination} />
-    </div>
-  {/if}
-</div>

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

@@ -1,17 +0,0 @@
-import type { Column, SizeKey, TableRow, TableVariant } from "./types";
-type Props<T extends TableRow> = {
-    columns: readonly Column<T>[];
-    rows: readonly T[];
-    class?: string;
-    variant?: TableVariant;
-    stickyHeader?: boolean;
-    sz?: SizeKey;
-    pagination?: {
-        currentPage: number;
-        totalPages: number;
-        onPageChange: (page: number) => void;
-    };
-};
-declare const Table: import("svelte").Component<Props<TableRow>, {}, "">;
-type Table = ReturnType<typeof Table>;
-export default Table;

package/dist/lib/Tabs.svelte

@@ -1,213 +0,0 @@
-<!-- src/lib/Tabs.svelte -->
-<script lang="ts">
-  /**
-   * @component Tabs
-   * @description A tab navigation component for switching between sections of content.
-   *
-   * @prop tabs {TabItem[]} - Array of tab items with `id` and `label`
-   * @default []
-   *
-   * @prop activeTab {string} - The currently active tab id
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Size preset for tabs and content
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {TabsVariant} - Visual style of the tabs
-   * @options default|pills|underline
-   * @default default
-   *
-   * @prop fitted {boolean} - Stretches tabs to fill available width
-   * @default false
-   *
-   * @prop onChange {(tabId: string) => void} - Callback when the active tab changes
-   *
-   * @prop class {string} - Custom class for the container
-   * @default ""
-   *
-   * @prop children {Snippet} - Content panel rendered below the tabs
-   *
-   * @note Supports multiple visual styles (`default`, `pills`, `underline`).
-   * @note Fully accessible with keyboard navigation (Arrow keys, Home, End, Enter).
-   * @note Automatically adapts to container width.
-   * @note The panel content (`children`) scales visually with the selected tab size.
-   */
-  import type { Snippet } from "svelte";
-  import type { SizeKey, TabsVariant, TabItem } from "./types";
-  import { TEXT } from "./types";
-  import { cx } from "../utils";
-
-  type Props = {
-    tabs?: TabItem[];
-    activeTab?: string;
-    sz?: SizeKey;
-    variant?: TabsVariant;
-    fitted?: boolean;
-    onChange?: (tabId: string) => void;
-    class?: string;
-    children?: Snippet;
-  };
-
-  let {
-    tabs = [],
-    activeTab = "",
-    sz = "md",
-    variant = "default",
-    fitted = false,
-    onChange,
-    class: externalClass = "",
-    children,
-    ...rest
-  }: Props = $props();
-
-  $effect(() => {
-    if (!activeTab && tabs.length) activeTab = tabs[0].id;
-    if (activeTab && !tabs.find((t) => t.id === activeTab) && tabs.length) {
-      activeTab = tabs[0].id;
-    }
-  });
-  
-  function focusActiveButton() {
-    if (!activeTab) return;
-    const btn = document.getElementById(
-      `tab-${activeTab}`
-    ) as HTMLButtonElement | null;
-    btn?.focus();
-  }
-
-  function handleTabClick(tab: TabItem) {
-    if (tab.disabled) return;
-    activeTab = tab.id;
-    onChange?.(tab.id);
-  }
-
-  function handleKeyDown(e: KeyboardEvent) {
-    const enabled = tabs.filter((t) => !t.disabled);
-    if (!enabled.length) return;
-
-    const idx = Math.max(
-      0,
-      enabled.findIndex((t) => t.id === activeTab)
-    );
-    let next = idx;
-
-    if (e.key === "ArrowRight") next = (idx + 1) % enabled.length;
-    else if (e.key === "ArrowLeft")
-      next = (idx - 1 + enabled.length) % enabled.length;
-    else if (e.key === "Home") next = 0;
-    else if (e.key === "End") next = enabled.length - 1;
-    else return;
-
-    e.preventDefault();
-    const nextId = enabled[next].id;
-    activeTab = nextId;
-    onChange?.(nextId);
-    queueMicrotask(focusActiveButton);
-  }
-
-  const sizes: Record<SizeKey, string> = {
-    xs: "px-2 py-1",
-    sm: "px-3 py-1.5",
-    md: "px-4 py-2",
-    lg: "px-5 py-2.5",
-    xl: "px-6 py-3",
-  };
-
-  const base =
-    "inline-flex items-center justify-center font-medium transition-colors duration-150 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:ring-offset-0 focus:outline-none disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
-
-  const variants = $derived({
-    default: {
-      base: "border-b-2 border-transparent text-[var(--color-text-muted)]",
-      active:
-        "bg-[var(--color-bg-secondary)] !text-[var(--color-text-default)] border-[var(--border-color-strong)]",
-      hover:
-        "hover:text-[var(--color-text-default)] hover:bg-[var(--color-bg-muted)]",
-    },
-    underline: {
-      base: "border-b-2 border-transparent text-[var(--color-text-muted)]",
-      active:
-        "border-[var(--border-color-focus)] !text-[var(--color-text-default)]",
-      hover:
-        "hover:text-[var(--color-text-default)] hover:border-[var(--border-color-strong)]",
-    },
-    pills: {
-      base: "text-[var(--color-text-muted)] border border-transparent font-medium",
-      active:
-        "bg-[var(--color-bg-primary)] text-white border-[var(--color-bg-primary)]",
-      hover:
-        "hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text-default)]",
-    },
-  });
-
-  const rootClass = $derived(
-    cx("w-full self-stretch flex flex-col", TEXT[sz], externalClass)
-  );
-
-  const tablistClass = $derived(
-    cx(
-      "flex w-full flex-nowrap overflow-x-auto whitespace-nowrap relative z-10 bg-[var(--color-bg-surface)]",
-      TEXT[sz],
-      variant === "pills" && "gap-1",
-      variant === "underline" && "gap-6",
-      fitted ? "justify-between" : "justify-start"
-    )
-  );
-</script>
-
-<div class={rootClass} {...rest}>
-  <div
-    role="tablist"
-    tabindex="0"
-    aria-orientation="horizontal"
-    class={tablistClass}
-    onkeydown={handleKeyDown}
-    onfocus={focusActiveButton}
-  >
-    {#each tabs as tab (tab.id)}
-      <button
-        id={`tab-${tab.id}`}
-        type="button"
-        role="tab"
-        aria-selected={tab.id === activeTab ? "true" : "false"}
-        aria-controls={`panel-${tab.id}`}
-        aria-disabled={tab.disabled ? "true" : "false"}
-        tabindex={tab.id === activeTab ? 0 : -1}
-        disabled={tab.disabled}
-        class={cx(
-          "relative z-20",
-          base,
-          sizes[sz],
-          TEXT[sz],
-          fitted ? "basis-0 grow flex-1 min-w-0 text-center" : "shrink-0",
-          variants[variant]?.base,
-          tab.id === activeTab
-            ? variants[variant]?.active
-            : !tab.disabled
-              ? variants[variant]?.hover
-              : ""
-        )}
-        onclick={() => handleTabClick(tab)}
-        onkeydown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleTabClick(tab);
-          }
-        }}
-      >
-        <span>{tab.label}</span>
-      </button>
-    {/each}
-  </div>
-
-  <div
-    id={`panel-${activeTab}`}
-    role="tabpanel"
-    tabindex="-1"
-    aria-labelledby={`tab-${activeTab}`}
-    class="w-full min-w-0 relative z-0 border-t border-[var(--border-color-default)] bg-[var(--color-bg-surface)] p-[var(--spacing-md)] rounded-b-[var(--radius-sm)] shadow-[0_1px_2px_0_var(--shadow-color)]"
-  >
-    {@render children?.()}
-  </div>
-</div>

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

@@ -1,48 +0,0 @@
-/**
-   * @component Tabs
-   * @description A tab navigation component for switching between sections of content.
-   *
-   * @prop tabs {TabItem[]} - Array of tab items with `id` and `label`
-   * @default []
-   *
-   * @prop activeTab {string} - The currently active tab id
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Size preset for tabs and content
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {TabsVariant} - Visual style of the tabs
-   * @options default|pills|underline
-   * @default default
-   *
-   * @prop fitted {boolean} - Stretches tabs to fill available width
-   * @default false
-   *
-   * @prop onChange {(tabId: string) => void} - Callback when the active tab changes
-   *
-   * @prop class {string} - Custom class for the container
-   * @default ""
-   *
-   * @prop children {Snippet} - Content panel rendered below the tabs
-   *
-   * @note Supports multiple visual styles (`default`, `pills`, `underline`).
-   * @note Fully accessible with keyboard navigation (Arrow keys, Home, End, Enter).
-   * @note Automatically adapts to container width.
-   * @note The panel content (`children`) scales visually with the selected tab size.
-   */
-import type { Snippet } from "svelte";
-import type { SizeKey, TabsVariant, TabItem } from "./types";
-type Props = {
-    tabs?: TabItem[];
-    activeTab?: string;
-    sz?: SizeKey;
-    variant?: TabsVariant;
-    fitted?: boolean;
-    onChange?: (tabId: string) => void;
-    class?: string;
-    children?: Snippet;
-};
-declare const Tabs: import("svelte").Component<Props, {}, "">;
-type Tabs = ReturnType<typeof Tabs>;
-export default Tabs;