svelte-comp 1.2.5 → 1.2.6

package/dist/lib/Carousel.svelte

@@ -1,293 +0,0 @@
-<!-- src/lib/Carousel.svelte -->
-<script lang="ts">
-  /**
-   * @component Carousel
-   * @description A responsive carousel component to display a sequence of items with optional autoplay, navigation arrows, and dots.
-   *
-   * @prop items {CarouselItem[]} - Array of carousel items
-   * @default []
-   *
-   * @prop sz {SizeKey} - Size variant controlling text scale and rounding
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop autoplay {boolean} - Enables automatic slide rotation
-   * @default false
-   *
-   * @prop interval {number} - Interval between slides in milliseconds
-   * @default 5000
-   *
-   * @prop showDots {boolean} - Shows navigation dots
-   * @default true
-   *
-   * @prop showArrows {boolean} - Shows navigation arrows
-   * @default true
-   *
-   * @prop class {string} - Additional classes for the carousel container
-   * @default ""
-   *
-   * @note Supports touch gestures (swipe left/right).
-   * @note Autoplay pauses automatically when unmounted.
-   * @note Uses `Card.svelte` internally for slide structure.
-   * @note Navigation dots and arrows appear only if there’s more than one item.
-   * @note Accessible via `aria-label`, `aria-current`, and keyboard focus on controls.
-   */
-  import Card from "./Card.svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import type { SizeKey, CarouselItem } from "./types";
-  import { cx } from "../utils";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    items?: CarouselItem[];
-    sz?: SizeKey;
-    autoplay?: boolean;
-    interval?: number;
-    showDots?: boolean;
-    showArrows?: boolean;
-  };
-
-  let {
-    items = [],
-    sz = "md",
-    autoplay = false,
-    interval = 5000,
-    showDots = true,
-    showArrows = true,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  let current = $state(0);
-  let autoplayTimer = $state<ReturnType<typeof setInterval> | null>(null);
-
-  const hasItems = $derived(items.length > 0);
-
-  const base =
-    "relative w-full overflow-hidden rounded-[var(--radius-lg)] bg-[var(--color-bg-surface)]";
-
-  const sizes: Record<SizeKey, string> = {
-    xs: "rounded-[var(--radius-md)] text-sm",
-    sm: "rounded-[var(--radius-md)] text-base",
-    md: "rounded-[var(--radius-lg)] text-lg",
-    lg: "rounded-[var(--radius-lg)] text-xl",
-    xl: "rounded-[var(--radius-xl)] text-2xl",
-  };
-
-  const contentSize: Record<SizeKey, string> = {
-    xs: "p-3 gap-2",
-    sm: "p-4 gap-2.5",
-    md: "p-5 gap-3",
-    lg: "p-6 gap-4",
-    xl: "p-8 gap-5",
-  };
-
-  const arrowSize: Record<SizeKey, string> = {
-    xs: "w-7 h-7",
-    sm: "w-8 h-8",
-    md: "w-9 h-9",
-    lg: "w-10 h-10",
-    xl: "w-11 h-11",
-  };
-
-  const dotSize: Record<SizeKey, string> = {
-    xs: "w-1.5 h-1.5",
-    sm: "w-2 h-2",
-    md: "w-[10px] h-[10px]",
-    lg: "w-3 h-3",
-    xl: "w-[14px] h-[14px]",
-  };
-
-  const componentClass = $derived(cx(base, sizes[sz], externalClass));
-
-  const minH: Record<SizeKey, string> = {
-    xs: "min-h-[200px]",
-    sm: "min-h-[240px]",
-    md: "min-h-[300px]",
-    lg: "min-h-[360px]",
-    xl: "min-h-[420px]",
-  };
-
-  const viewportClass = $derived(cx("relative w-full", minH[sz]));
-  const bodyClass = $derived(cx("flex flex-col", contentSize[sz]));
-
-  const imgMax: Record<SizeKey, string> = {
-    xs: "max-h-28",
-    sm: "max-h-32",
-    md: "max-h-40",
-    lg: "max-h-48",
-    xl: "max-h-56",
-  };
-
-  const imgClass = $derived(cx("w-full object-cover", imgMax[sz]));
-
-  const arrowClass = $derived(
-    cx(
-      arrowSize[sz],
-      "rounded-full bg-[var(--color-bg-surface)] shadow-lg flex items-center justify-center [color:var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
-    )
-  );
-
-  const dotClass = $derived(
-    cx(
-      dotSize[sz],
-      "rounded-full transition-all duration-200 focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
-    )
-  );
-
-  $effect(() => {
-    if (!hasItems) current = 0;
-    else if (current >= items.length) current = items.length - 1;
-    else if (current < 0) current = 0;
-  });
-
-  const next = () => {
-    if (!hasItems) return;
-    current = (current + 1) % items.length;
-  };
-
-  const prev = () => {
-    if (!hasItems) return;
-    current = (current - 1 + items.length) % items.length;
-  };
-
-  const goTo = (index: number) => {
-    if (index >= 0 && index < items.length) current = index;
-  };
-
-  $effect(() => {
-    if (autoplay && hasItems && items.length > 1) {
-      autoplayTimer = setInterval(next, interval);
-    }
-    return () => {
-      if (autoplayTimer) {
-        clearInterval(autoplayTimer);
-        autoplayTimer = null;
-      }
-    };
-  });
-
-  let touchStartX = 0;
-  let touchEndX = 0;
-
-  function handleTouchStart(event: TouchEvent) {
-    touchStartX = event.touches[0].clientX;
-  }
-
-  function handleTouchEnd(event: TouchEvent) {
-    touchEndX = event.changedTouches[0].clientX;
-    const diff = touchStartX - touchEndX;
-    if (Math.abs(diff) <= 50) return;
-    if (diff > 0) next();
-    else prev();
-  }
-</script>
-
-<div
-  aria-label="Carousel"
-  class={componentClass}
-  ontouchstart={handleTouchStart}
-  ontouchend={handleTouchEnd}
-  {...rest}
->
-  <div class="relative">
-    <div class={viewportClass}>
-      {#each items as item, i (item.id ?? i)}
-        {#snippet header()}
-          {#if item.image}
-            <img
-              src={item.image}
-              alt={item.title || `Slide ${i + 1}`}
-              class={imgClass}
-            />
-          {/if}
-        {/snippet}
-
-        <div
-          class="transition-opacity duration-300 ease-in-out"
-          class:opacity-100={i === current}
-          class:opacity-0={i !== current}
-          class:block={i === current}
-          class:hidden={i !== current}
-        >
-          <Card {sz} {header} flushHeader={true} class="h-auto flex flex-col">
-            <div class={cx(bodyClass, "flex-1 overflow-auto min-h-0")}>
-              {#if item.title}
-                <h3 class="font-semibold [color:var(--color-text-default)]">
-                  {item.title}
-                </h3>
-              {/if}
-              {#if item.content}
-                <p class="[color:var(--color-text-muted)]">
-                  {item.content}
-                </p>
-              {/if}
-              {@render item.children?.()}
-            </div>
-          </Card>
-        </div>
-      {/each}
-
-      {#if !hasItems}
-        <div
-          class="flex items-center justify-center h-full [color:var(--color-text-muted)]"
-        >
-          No items to display
-        </div>
-      {/if}
-    </div>
-
-    {#if showArrows && hasItems && items.length > 1}
-      <button
-        type="button"
-        onclick={prev}
-        class={cx("absolute left-2 top-1/2 -translate-y-1/2", arrowClass)}
-        aria-label="Previous slide"
-      >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <path d="M10 12L6 8L10 4" />
-        </svg>
-      </button>
-      <button
-        type="button"
-        onclick={next}
-        class={cx("absolute right-2 top-1/2 -translate-y-1/2", arrowClass)}
-        aria-label="Next slide"
-      >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <path d="M6 4L10 8L6 12" />
-        </svg>
-      </button>
-    {/if}
-  </div>
-
-  {#if showDots && hasItems && items.length > 1}
-    <div class="flex justify-center gap-2 p-4">
-      {#each items as item, i (item.id ?? i)}
-        <button
-          type="button"
-          onclick={() => goTo(i)}
-          class={dotClass}
-          class:bg-[var(--color-bg-primary)]={i === current}
-          class:bg-[var(--color-bg-secondary)]={i !== current}
-          class:hover:bg-[var(--color-bg-primary)]={i !== current}
-          aria-label={`Go to slide ${item.title ?? `#${i + 1}`}`}
-          aria-current={i === current ? "true" : undefined}
-        ></button>
-      {/each}
-    </div>
-  {/if}
-</div>

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

@@ -1,13 +0,0 @@
-import type { HTMLAttributes } from "svelte/elements";
-import type { SizeKey, CarouselItem } from "./types";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    items?: CarouselItem[];
-    sz?: SizeKey;
-    autoplay?: boolean;
-    interval?: number;
-    showDots?: boolean;
-    showArrows?: boolean;
-};
-declare const Carousel: import("svelte").Component<Props, {}, "">;
-type Carousel = ReturnType<typeof Carousel>;
-export default Carousel;

package/dist/lib/CheckBox.svelte

@@ -1,210 +0,0 @@
-<!-- src/lib/CheckBox.svelte -->
-<script lang="ts">
-  /**
-   * @component CheckBox
-   * @description Accessible custom checkbox with `indeterminate` support.
-   *
-   * @prop label {string} - Text label shown next to the checkbox
-   *
-   * @prop sz {SizeKey} - Size option
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style preset
-   * @options default|neutral
-   * @default default
-   *
-   * @prop indeterminate {boolean} - Enables the mixed state
-   * @default false
-   *
-   * @prop checked {boolean} - Controlled checked state (bindable)
-   * @default false
-   *
-   * @prop onChange {(checked: boolean) => void} - Fired when the checkbox toggles
-   *
-   * @prop class {string} - Extra classes applied to the root container
-   * @default ""
-   *
-   * @prop invalid {boolean} - Marks the field invalid and sets `aria-invalid`
-   * @default false
-   *
-   * @prop describedBy {string} - ID of helper or error text for accessibility
-   *
-   * @note Fully bindable via `bind:checked`; `onChange` receives the final boolean.
-   * @note `indeterminate` is applied to the underlying input and reported as `aria-checked="mixed"`.
-   * @note Clicking the custom box while `indeterminate` clears it and sets `checked=true`.
-   * @note `invalid` maps to `aria-invalid`; `describedBy` maps to `aria-describedby`.
-   * @note SVG check and dash are inline; colors adapt per `variant` (`neutral` uses border color).
-   * @note Sizes scale the control box (`xs → xl`).
-   */
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
-  import { cx, uid } from "../utils";
-
-  type Props = HTMLInputAttributes & {
-    label?: string;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    indeterminate?: boolean;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    class?: string;
-    invalid?: boolean;
-    describedBy?: string;
-  };
-
-  let {
-    label,
-    sz = "md",
-    variant = "default",
-    indeterminate = false,
-    checked = $bindable(false),
-    onChange,
-    class: externalClass = "",
-    invalid = false,
-    describedBy,
-    ...rest
-  }: Props = $props();
-
-  const inputId = $derived(rest.id ?? uid("chk-"));
-
-  const sizeClasses = {
-    xs: "w-3 h-3",
-    sm: "w-3.5 h-3.5",
-    md: "w-4 h-4",
-    lg: "w-[18px] h-[18px]",
-    xl: "w-5 h-5",
-  } as const;
-
-  const gapBySize: Record<SizeKey, string> = {
-    xs: "gap-1.5",
-    sm: "gap-2",
-    md: "gap-2.5",
-    lg: "gap-3",
-    xl: "gap-3.5",
-  };
-
-  const variants = $derived(
-    variant === "neutral"
-      ? {
-          checked: "bg-transparent border-[var(--border-color-strong)]",
-          unchecked: "bg-transparent border-[var(--border-color-default)]",
-          mixed: "bg-transparent border-[var(--border-color-strong)]",
-        }
-      : {
-          checked:
-            "bg-[var(--color-bg-primary)] border-[var(--color-bg-primary)]",
-          unchecked:
-            "bg-[var(--color-bg-surface)] border-[var(--border-color-default)]",
-          mixed:
-            "bg-[var(--color-bg-secondary)] border-[var(--border-color-default)]",
-        }
-  );
-  
-  const boxBase =
-    "rounded-[var(--radius-sm)] border border-solid cursor-pointer transition-all duration-[var(--transition-fast)] ease-[var(--timing-default)] flex items-center justify-center";
-
-  const focusFromPeer =
-    "peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--border-color-focus)] peer-focus-visible:border-[var(--border-color-focus)]";
-
-  const state = $derived(
-    indeterminate ? "mixed" : checked ? "checked" : "unchecked"
-  );
-
-  const strokeColor = $derived(
-    variant === "neutral"
-      ? state === "checked" || state === "mixed"
-        ? "var(--border-color-strong)"
-        : "var(--border-color-default)"
-      : "white"
-  );
-
-  const rootClass = $derived(
-    cx(
-      "inline-flex items-center cursor-pointer select-none",
-      gapBySize[sz],
-      externalClass
-    )
-  );
-
-  const checkboxClass = $derived(
-    cx(
-      boxBase,
-      focusFromPeer,
-      sizeClasses[sz],
-      state === "checked" && variants.checked,
-      state === "mixed" && variants.mixed,
-      state === "unchecked" && variants.unchecked,
-      "peer-disabled:opacity-[var(--opacity-disabled)] peer-disabled:cursor-not-allowed"
-    )
-  );
-
-  const labelClass = $derived(
-    cx(
-      TEXT[sz],
-      "[color:var(--color-text-muted)] font-medium peer-disabled:cursor-not-allowed"
-    )
-  );
-
-  function handleClick(e: MouseEvent) {
-    if (indeterminate) {
-      e.preventDefault();
-      checked = true;
-      indeterminate = false;
-      onChange?.(true);
-    }
-  }
-</script>
-
-<label class={rootClass} for={inputId}>
-  <input
-    id={inputId}
-    type="checkbox"
-    bind:checked
-    {...rest}
-    class="sr-only peer"
-    aria-checked={indeterminate ? "mixed" : checked}
-    aria-invalid={invalid || undefined}
-    aria-describedby={describedBy}
-    onchange={() => {
-      if (indeterminate) indeterminate = false;
-      onChange?.(checked);
-    }}
-  />
-
-  <span
-    data-state={state}
-    class={checkboxClass}
-    onclick={handleClick}
-    aria-hidden="true"
-  >
-    {#if indeterminate}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke={strokeColor}
-        stroke-width="3"
-        stroke-linecap="round"
-      >
-        <line x1="4" y1="12" x2="20" y2="12" />
-      </svg>
-    {:else if checked}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke={strokeColor}
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="20 6 9 17 4 12" />
-      </svg>
-    {/if}
-  </span>
-
-  {#if label}
-    <span class={labelClass}>{label}</span>
-  {/if}
-</label>

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

@@ -1,53 +0,0 @@
-/**
-   * @component CheckBox
-   * @description Accessible custom checkbox with `indeterminate` support.
-   *
-   * @prop label {string} - Text label shown next to the checkbox
-   *
-   * @prop sz {SizeKey} - Size option
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style preset
-   * @options default|neutral
-   * @default default
-   *
-   * @prop indeterminate {boolean} - Enables the mixed state
-   * @default false
-   *
-   * @prop checked {boolean} - Controlled checked state (bindable)
-   * @default false
-   *
-   * @prop onChange {(checked: boolean) => void} - Fired when the checkbox toggles
-   *
-   * @prop class {string} - Extra classes applied to the root container
-   * @default ""
-   *
-   * @prop invalid {boolean} - Marks the field invalid and sets `aria-invalid`
-   * @default false
-   *
-   * @prop describedBy {string} - ID of helper or error text for accessibility
-   *
-   * @note Fully bindable via `bind:checked`; `onChange` receives the final boolean.
-   * @note `indeterminate` is applied to the underlying input and reported as `aria-checked="mixed"`.
-   * @note Clicking the custom box while `indeterminate` clears it and sets `checked=true`.
-   * @note `invalid` maps to `aria-invalid`; `describedBy` maps to `aria-describedby`.
-   * @note SVG check and dash are inline; colors adapt per `variant` (`neutral` uses border color).
-   * @note Sizes scale the control box (`xs → xl`).
-   */
-import type { HTMLInputAttributes } from "svelte/elements";
-import { type SizeKey, type ComponentVariant } from "./types";
-type Props = HTMLInputAttributes & {
-    label?: string;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    indeterminate?: boolean;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    class?: string;
-    invalid?: boolean;
-    describedBy?: string;
-};
-declare const CheckBox: import("svelte").Component<Props, {}, "checked">;
-type CheckBox = ReturnType<typeof CheckBox>;
-export default CheckBox;