svelte-comp 1.2.5 → 1.2.6

package/dist/lib/PaginatedCard.svelte

@@ -1,73 +0,0 @@
-<!-- src/lib/PaginatedCard.svelte -->
-<script lang="ts">
-  /**
-   * @component PaginatedCard
-   * @description A card component with built-in pagination. Renders items page by page inside a `Card` and appends `Pagination` in the footer.
-   *
-   * @prop items {Snippet[]} - Array of renderable snippets for each item
-   * @default []
-   *
-   * @prop itemsPerPage {number} - Items per page (must be >= 1)
-   * @default 1
-   *
-   * @prop header {Snippet} - Optional `Card` header content
-   *
-   * @prop footer {Snippet} - Custom footer content shown above pagination
-   *
-   * @prop class {string} - Extra classes passed to the underlying `Card`
-   * @default ""
-   *
-   * @note Maintains internal `currentPage` state (starts at `1`).
-   * @note `totalPages` is clamped to at least `1`; empty `items` still yields one page.
-   * @note Pagination is always visible; your `footer` snippet renders before it.
-   * @note Uses `Pagination.svelte` internally with `{ currentPage, totalPages, onPageChange }`.
-   * @note `itemsPerPage` must be `>= 1`; smaller values are not supported.
-   */
-  import Card from "./Card.svelte";
-  import Pagination from "./Pagination.svelte";
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    items?: Snippet[];
-    itemsPerPage?: number;
-    header?: Snippet;
-    footer?: Snippet;
-    class?: string;
-  };
-
-  let {
-    items = [],
-    itemsPerPage = 1,
-    header,
-    footer,
-    class: externalClass = "",
-  }: Props = $props();
-
-  let currentPage = $state(1);
-
-  const totalPages = $derived(
-    Math.max(1, Math.ceil(items.length / itemsPerPage))
-  );
-
-  const pageItems = $derived(
-    items.slice(
-      (currentPage - 1) * itemsPerPage,
-      (currentPage - 1) * itemsPerPage + itemsPerPage
-    )
-  );
-
-  function handlePageChange(p: number) {
-    currentPage = p;
-  }
-</script>
-
-{#snippet composedFooter()}
-  {#if footer}{@render footer?.()}{/if}
-  <Pagination {currentPage} {totalPages} onPageChange={handlePageChange} />
-{/snippet}
-
-<Card class={externalClass} {header} footer={composedFooter}>
-  {#each pageItems as it, idx (idx)}
-    {@render it?.()}
-  {/each}
-</Card>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from "svelte";
-type Props = {
-    items?: Snippet[];
-    itemsPerPage?: number;
-    header?: Snippet;
-    footer?: Snippet;
-    class?: string;
-};
-declare const PaginatedCard: import("svelte").Component<Props, {}, "">;
-type PaginatedCard = ReturnType<typeof PaginatedCard>;
-export default PaginatedCard;

package/dist/lib/Pagination.svelte

@@ -1,119 +0,0 @@
-<!-- src/lib/Pagination.svelte -->
-<script lang="ts">
-  /**
-   * @component Pagination
-   * @description Compact pagination component for table or list navigation.
-   *
-   * @prop currentPage {number} - The active page number (1-based)
-   *
-   * @prop totalPages {number} - Total number of pages available
-   *
-   * @prop onPageChange {(page: number) => void} - Fired when a page button is clicked
-   *
-   * @prop class {string} - Custom classes applied to the pagination wrapper
-   * @default ""
-   *
-   * @note Displays “Page X of Y” and numbered page buttons.
-   * @note Prev/next buttons are disabled at the edges.
-   * @note Shows up to 3 numbered buttons centered around the current page.
-   * @note Uses `aria-current=\"page\"` on the active page for accessibility.
-   * @note Buttons are native `<button>` elements for keyboard support.
-   */
-  import { cx, times } from "../utils";
-  import Button from "./Button.svelte";
-
-  type Props = {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    class?: string;
-  };
-
-  let {
-    currentPage,
-    totalPages,
-    onPageChange,
-    class: externalClass = "",
-  }: Props = $props();
-
-  const wrapperClass = $derived(
-    cx(
-      "flex flex-wrap items-center justify-center gap-2 text-xs text-[var(--color-text-muted)] py-0.5 overflow-visible",
-      externalClass
-    )
-  );
-
-  function nextPage() {
-    if (currentPage < totalPages) onPageChange(currentPage + 1);
-  }
-
-  function prevPage() {
-    if (currentPage > 1) onPageChange(currentPage - 1);
-  }
-
-  function getVisiblePages(): number[] {
-    const maxVisible = 3;
-    if (totalPages <= maxVisible) return times(totalPages, (i) => i + 1);
-
-    let start = currentPage - 1;
-    if (start < 1) start = 1;
-    if (start + maxVisible - 1 > totalPages)
-      start = totalPages - maxVisible + 1;
-
-    return times(maxVisible, (i) => start + i);
-  }
-</script>
-
-<div class={wrapperClass}>
-  <span class="pagination-count">Page {currentPage} of {totalPages}</span>
-
-  <Button
-    onClick={prevPage}
-    disabled={currentPage === 1}
-    sz="xs"
-    variant="secondary"
-    class="pagination-btn"
-  >
-    &lt;
-  </Button>
-
-  {#each getVisiblePages() as page (page)}
-    <Button
-      onClick={() => onPageChange(page)}
-      sz="xs"
-      variant={currentPage === page ? "primary" : "secondary"}
-      aria-current={currentPage === page ? "page" : undefined}
-      class="pagination-btn"
-    >
-      {page}
-    </Button>
-  {/each}
-
-  <Button
-    onClick={nextPage}
-    disabled={currentPage === totalPages}
-    sz="xs"
-    variant="secondary"
-    class="pagination-btn"
-  >
-    &gt;
-  </Button>
-</div>
-
-<style>
-  @media (max-width: 640px) {
-    :global(.pagination-btn) {
-      font-size: 10px;
-      line-height: 1;
-      height: 20px;
-      padding: 0 6px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    :global(.pagination-count) {
-      display: none;
-    }
-  }
-</style>
-

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

@@ -1,9 +0,0 @@
-type Props = {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    class?: string;
-};
-declare const Pagination: import("svelte").Component<Props, {}, "">;
-type Pagination = ReturnType<typeof Pagination>;
-export default Pagination;

package/dist/lib/PrimaryColorSelect.svelte

@@ -1,113 +0,0 @@
-<!-- src/lib/PrimaryColorSelect.svelte -->
-<script lang="ts">
-  /**
-   * @component PrimaryColorSelect
-   * @description Theme primary-color selector built on top of Select. Provides a fixed palette,
-   * handles persistence, and updates the global <html> attribute.
-   *
-   * @prop sz {SizeKey} - Sizing preset passed directly to Select
-   * @options xs|sm|md|lg|xl
-   * @default sm
-   *
-   * @prop label {string} - Custom label text. Falls back to localized copy when omitted.
-   *
-   * @prop class {string} - Extra classes forwarded to the underlying Select component
-   * @default ""
-   *
-   * @note The palette is predefined internally (`{ value, label, swatch }`).
-   * @note Selected value is stored in localStorage under "primary".
-   * @note The `html` element receives `data-primary="{value}"` for theme styling.
-   * @note Uses the same onChange contract as Select and forwards palette options as-is.
-   */
-  import { getContext } from "svelte";
-  import Select from "./Select.svelte";
-  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
-  import { TEXTS } from "./lang";
-
-  type Props = {
-    sz?: SizeKey;
-    label?: string;
-    class?: string;
-  };
-
-  let { sz = "sm", label, class: externalClass = "" }: Props = $props();
-
-  const langCtx =
-    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
-  const langKey = $derived(langCtx?.value ?? "en");
-  const L = $derived(TEXTS[langKey].components.primaryColorSelect);
-
-  const labelFinal = $derived(label ?? L.text);
-
-  const palette: PaletteOption[] = [
-    {
-      value: "default",
-      label: "Indigo",
-      swatch: "oklch(62.3% 0.214 259.8deg)",
-    },
-    { value: "cyan", label: "Cyan", swatch: "oklch(71.5% 0.143 215.221)" },
-    { value: "red", label: "Red", swatch: "oklch(58% 0.24 30deg)" },
-    { value: "green", label: "Green", swatch: "oklch(65% 0.22 140deg)" },
-    { value: "yellow", label: "Yellow", swatch: "oklch(75% 0.18 90deg)" },
-    { value: "pink", label: "Pink", swatch: "oklch(70% 0.25 350deg)" },
-    { value: "orange", label: "Orange", swatch: "oklch(72% 0.22 60deg)" },
-    { value: "purple", label: "Purple", swatch: "oklch(55% 0.22 290deg)" },
-  ];
-
-  const paletteMap = palette.reduce<Record<PrimaryKey, PaletteOption>>(
-    (acc, option) => {
-      acc[option.value] = option;
-      return acc;
-    },
-    {} as Record<PrimaryKey, PaletteOption>
-  );
-
-  let selected = $state<PrimaryKey>("default");
-  let mounted = $state(false);
-
-  function isPrimaryKey(value: unknown): value is PrimaryKey {
-    return typeof value === "string" && value in paletteMap;
-  }
-
-  $effect(() => {
-    if (!mounted) {
-      try {
-        if (typeof window !== "undefined") {
-          const saved = localStorage.getItem("primary");
-          if (isPrimaryKey(saved)) {
-            selected = saved;
-          }
-        }
-      } catch {
-        // ignore unavailable storage/environment
-      }
-      mounted = true;
-    }
-  });
-
-  $effect(() => {
-    if (mounted) {
-      try {
-        if (typeof document !== "undefined") {
-          document.documentElement.setAttribute("data-primary", selected);
-        }
-        if (typeof window !== "undefined") {
-          localStorage.setItem("primary", selected);
-        }
-      } catch {
-        // ignore unavailable storage/environment
-      }
-    }
-  });
-</script>
-
-<Select
-  {sz}
-  label={labelFinal}
-  options={palette}
-  value={selected}
-  onChange={(v) => {
-    if (isPrimaryKey(v)) selected = v;
-  }}
-  class={externalClass}
-/>

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

@@ -1,9 +0,0 @@
-import type { SizeKey } from "./types";
-type Props = {
-    sz?: SizeKey;
-    label?: string;
-    class?: string;
-};
-declare const PrimaryColorSelect: import("svelte").Component<Props, {}, "">;
-type PrimaryColorSelect = ReturnType<typeof PrimaryColorSelect>;
-export default PrimaryColorSelect;

package/dist/lib/ProgressBar.svelte

@@ -1,141 +0,0 @@
-<!-- src/lib/ProgressBar.svelte -->
-<script lang="ts">
-  /**
-   * @component ProgressBar
-   * @description A simple and accessible progress bar component that visually represents task completion.
-   *
-   * @prop value {number} - Current progress value from 0 to 100
-   * @default 0
-   *
-   * @prop indeterminate {boolean} - Enables the animated indeterminate state
-   * @default false
-   *
-   * @prop sz {SizeKey} - Controls the bar height
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style of the progress bar
-   * @options default|neutral
-   * @default default
-   *
-   * @prop class {string} - Additional CSS classes for the wrapper element
-   * @default ""
-   *
-   * @prop label {string} - Optional text label displayed above the bar
-   * @default ""
-   *
-   * @prop disabled {boolean} - Applies a muted inactive visual style
-   * @default false
-   *
-   * @note Indeterminate animation for unknown progress.
-   * @note Auto-clamping between 0 and 100.
-   * @note Adaptive height based on size.
-   * @note Theming support via CSS variables.
-   * @note Fully accessible with proper `aria` roles.
-   * @note No invalid ARIA attributes.
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
-  import { cx, clamp } from "../utils";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    indeterminate?: boolean;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-  };
-
-  let {
-    value = 0,
-    indeterminate = false,
-    sz = "md",
-    variant = "default",
-    class: externalClass = "",
-    label = "",
-    disabled = false,
-    ...rest
-  }: Props = $props();
-
-  const pct = $derived(`${clamp(value, 0, 100)}%`);
-
-  const sizeTrack = $derived(
-    {
-      xs: "h-[4px]",
-      sm: "h-[5px]",
-      md: "h-[6px]",
-      lg: "h-[7px]",
-      xl: "h-[8px]",
-    }[sz]
-  );
-
-  const bar = $derived(
-    variant === "neutral"
-      ? "bg-[var(--color-bg-secondary)]"
-      : "bg-[var(--color-bg-primary)]"
-  );
-
-  const rootClass = $derived(
-    cx(
-      "relative flex flex-col gap-1 w-full data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
-      externalClass
-    )
-  );
-
-  const trackClass = $derived(
-    cx(
-      "absolute top-1/2 -translate-y-1/2 w-full bg-[var(--border-color-default)] rounded overflow-hidden",
-      sizeTrack
-    )
-  );
-
-  const barClass = $derived(cx("h-full", bar));
-</script>
-
-<div
-  class={rootClass}
-  role="progressbar"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  aria-valuenow={indeterminate ? undefined : Math.round(clamp(value, 0, 100))}
-  data-disabled={disabled ? "true" : undefined}
-  {...rest}
->
-  {#if label}
-    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
-      {label}
-    </span>
-  {/if}
-
-  <div class="relative w-full h-10">
-    <div class={trackClass}>
-      {#if indeterminate}
-        <div class={cx(barClass, "pb-indet")}></div>
-      {:else}
-        <div
-          class={cx(barClass, "transition-[width]")}
-          style={`width:${pct}`}
-        ></div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  :global {
-    @keyframes pb-indeterminate {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(250%);
-      }
-    }
-  }
-  .pb-indet {
-    width: 40%;
-    animation: pb-indeterminate 2s linear infinite;
-  }
-</style>

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

@@ -1,48 +0,0 @@
-/**
-   * @component ProgressBar
-   * @description A simple and accessible progress bar component that visually represents task completion.
-   *
-   * @prop value {number} - Current progress value from 0 to 100
-   * @default 0
-   *
-   * @prop indeterminate {boolean} - Enables the animated indeterminate state
-   * @default false
-   *
-   * @prop sz {SizeKey} - Controls the bar height
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style of the progress bar
-   * @options default|neutral
-   * @default default
-   *
-   * @prop class {string} - Additional CSS classes for the wrapper element
-   * @default ""
-   *
-   * @prop label {string} - Optional text label displayed above the bar
-   * @default ""
-   *
-   * @prop disabled {boolean} - Applies a muted inactive visual style
-   * @default false
-   *
-   * @note Indeterminate animation for unknown progress.
-   * @note Auto-clamping between 0 and 100.
-   * @note Adaptive height based on size.
-   * @note Theming support via CSS variables.
-   * @note Fully accessible with proper `aria` roles.
-   * @note No invalid ARIA attributes.
-   */
-import type { HTMLAttributes } from "svelte/elements";
-import { type SizeKey, type ComponentVariant } from "./types";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    indeterminate?: boolean;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-};
-declare const ProgressBar: import("svelte").Component<Props, {}, "">;
-type ProgressBar = ReturnType<typeof ProgressBar>;
-export default ProgressBar;