svelte-comp 1.2.5 → 1.2.6

package/dist/lib/Accordion.svelte

@@ -1,155 +0,0 @@
-<!-- src/lib/Accordion.svelte -->
-<script lang="ts">
-  /**
-   * @component Accordion
-   * @description Collapsible content container with flexible sizing and optional multi-open behavior.
-   *
-   * @prop items {AccordionItem[]} - Array of sections `{ id?, title, content }`
-   * @default []
-   *
-   * @prop multiple {boolean} - Allow more than one section to be open at the same time
-   * @default false
-   *
-   * @prop defaultOpen {number[]} - Indexes of initially opened sections
-   * @default []
-   *
-   * @prop onToggle {(index: number, open: boolean) => void} - Callback fired when a section is toggled
-   *
-   * @prop sz {SizeKey} - Size variant
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop class {string} - Additional classes for the outer container
-   * @default ""
-   *
-   * @note Smooth expand/collapse via CSS grid transitions
-   * @note Accessible triggers (button + aria-expanded)
-   * @note For full ARIA compliance, pair triggers with aria-controls and hide collapsed panels using aria-hidden or inert
-   * @note State is index-based; reordering items will change which panels start open
-   * @note AccordionItem.content is a plain string; wrap HTML inside the string or fork the component if you need custom nodes
-   */
-
-  import { type AccordionItem, type SizeKey, TEXT } from "./types";
-  import { cx } from "../utils";
-
-  type Props = {
-    items?: AccordionItem[];
-    multiple?: boolean;
-    defaultOpen?: number[];
-    onToggle?: (index: number, open: boolean) => void;
-    sz?: SizeKey;
-    class?: string;
-  };
-
-  let {
-    items = [],
-    multiple = false,
-    defaultOpen = [],
-    onToggle,
-    sz = "md",
-    class: externalClass = "",
-  }: Props = $props();
-
-  const base =
-    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] shadow-sm";
-
-  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: "px-4 pb-4 mt-1",
-    sm: "px-5 pb-5 mt-2",
-    md: "px-6 pb-6 mt-3",
-    lg: "px-8 pb-8 mt-4",
-    xl: "px-10 pb-10 mt-5",
-  };
-
-  const iconSize: Record<SizeKey, string> = {
-    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",
-  };
-
-  const componentClass = $derived(cx(base, sizes[sz], externalClass));
-
-  const iconClass = $derived(iconSize[sz]);
-
-  const contentClass = $derived(cx(contentSize[sz], TEXT[sz]));
-
-  let open = $derived(defaultOpen);
-
-  const isOpen = (i: number) => open.includes(i);
-
-  const toggle = (i: number) => {
-    const opened = isOpen(i);
-    open = multiple
-      ? opened
-        ? open.filter((x) => x !== i)
-        : [...open, i]
-      : opened
-        ? []
-        : [i];
-    onToggle?.(i, !opened);
-  };
-</script>
-
-<div class={componentClass}>
-  {#each items as item, i (item.id ?? i)}
-    <section
-      class="group border-b border-[var(--border-color-default)] last:border-b-0 overflow-hidden"
-      class:first-of-type:rounded-t={items.length > 1}
-      class:last-of-type:rounded-b={items.length > 1}
-    >
-      <h3>
-        <button
-          type="button"
-          class="flex w-full items-center justify-between gap-3 p-2 text-left font-medium text-[var(--color-text-default)] bg-transparent transition-colors hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)] focus:ring-inset"
-          aria-expanded={isOpen(i)}
-          onclick={() => toggle(i)}
-        >
-          <span>{item.title}</span>
-          <svg
-            class={cx(
-              "shrink-0 transition-transform duration-200 text-[var(--color-text-muted)]",
-              iconClass
-            )}
-            class:rotate-180={isOpen(i)}
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5.23 7.21a.75.75 0 011.06.02L10 11.135l3.71-3.904a.75.75 0 111.08 1.04l-4.24 4.46a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </h3>
-
-      <div
-        class="grid overflow-hidden transition-[grid-template-rows] duration-200"
-        class:grid-rows-[1fr]={isOpen(i)}
-        class:grid-rows-[0fr]={!isOpen(i)}
-      >
-        <div class="min-h-0">
-          <div
-            class={cx(
-              "leading-relaxed text-[var(--color-text-default)]",
-              contentClass
-            )}
-          >
-            {item.content}
-          </div>
-        </div>
-      </div>
-    </section>
-  {/each}
-</div>

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

@@ -1,40 +0,0 @@
-/**
-   * @component Accordion
-   * @description Collapsible content container with flexible sizing and optional multi-open behavior.
-   *
-   * @prop items {AccordionItem[]} - Array of sections `{ id?, title, content }`
-   * @default []
-   *
-   * @prop multiple {boolean} - Allow more than one section to be open at the same time
-   * @default false
-   *
-   * @prop defaultOpen {number[]} - Indexes of initially opened sections
-   * @default []
-   *
-   * @prop onToggle {(index: number, open: boolean) => void} - Callback fired when a section is toggled
-   *
-   * @prop sz {SizeKey} - Size variant
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop class {string} - Additional classes for the outer container
-   * @default ""
-   *
-   * @note Smooth expand/collapse via CSS grid transitions
-   * @note Accessible triggers (button + aria-expanded)
-   * @note For full ARIA compliance, pair triggers with aria-controls and hide collapsed panels using aria-hidden or inert
-   * @note State is index-based; reordering items will change which panels start open
-   * @note AccordionItem.content is a plain string; wrap HTML inside the string or fork the component if you need custom nodes
-   */
-import { type AccordionItem, type SizeKey } from "./types";
-type Props = {
-    items?: AccordionItem[];
-    multiple?: boolean;
-    defaultOpen?: number[];
-    onToggle?: (index: number, open: boolean) => void;
-    sz?: SizeKey;
-    class?: string;
-};
-declare const Accordion: import("svelte").Component<Props, {}, "">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;

package/dist/lib/Button.svelte

@@ -1,170 +0,0 @@
-<!-- src/lib/Button.svelte -->
-<script lang="ts">
-  /**
-   * @component Button
-   * @description Versatile button supporting multiple variants, sizes, loading state, and link behavior.
-   *
-   * @prop disabled {boolean} - Disables interaction
-   * @default false
-   *
-   * @prop children {Snippet} - Content rendered inside the button
-   *
-   * @prop onClick {(e: MouseEvent) => void} - Click handler
-   *
-   * @prop sz {SizeKey} - Button size variant
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ButtonVariant} - Visual style preset
-   * @options primary|secondary|pill|danger|success|warning|ghost|link|info
-   * @default primary
-   *
-   * @prop type {"button" | "submit" | "reset"} - Button type attribute
-   * @default "button"
-   *
-   * @prop loaded {boolean} - Shows loading spinner and blocks clicks
-   * @default false
-   *
-   * @prop link {string} - Navigates to a URL when clicked
-   *
-   * @prop class {string} - Additional classes for the button
-   * @default ""
-   *
-   * @note `disabled` and `loaded` both prevent click events.
-   * @note Automatically shows a centered spinner when `loaded` is `true`.
-   * @note Link navigation supports `target` and `rel` attributes.
-   * @note Accessible with `aria-disabled` and `aria-busy` states.
-   * @note The component uses CSS variables for colors, spacing, and transitions.
-   */
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import type { Snippet } from "svelte";
-  import { type SizeKey, type ButtonVariant, TEXT } from "./types";
-  import { cx } from "../utils";
-
-  type Props = HTMLButtonAttributes & {
-    disabled?: boolean;
-    children?: Snippet;
-    onClick?: (e: MouseEvent) => void;
-    sz?: SizeKey;
-    variant?: ButtonVariant;
-    type?: "button" | "submit" | "reset";
-    loaded?: boolean;
-    link?: string;
-    class?: string;
-  };
-
-  let {
-    disabled,
-    children,
-    onClick,
-    sz = "md",
-    variant = "primary",
-    type = "button",
-    loaded = false,
-    link,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const base = `
-    relative inline-flex items-center justify-center gap-2 rounded-[var(--radius-md)] border font-medium
-    transition-all duration-[var(--transition-fast)] ease-[var(--timing-default)] whitespace-nowrap select-none
-    focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)]
-    disabled:opacity-[var(--opacity-disabled)]
-    disabled:cursor-not-allowed
-    disabled:brightness-100
-    disabled:active:scale-100
-    disabled:hover:brightness-100
-  `;
-
-  const sizes: Record<SizeKey, string> = {
-    xs: "px-2 py-0.5 h-6",
-    sm: "px-3 py-1 h-7",
-    md: "px-4 py-2 h-8",
-    lg: "px-5 py-2.5 h-9",
-    xl: "px-6 py-3 h-10",
-  };
-
-  const variants: Record<ButtonVariant, string> = {
-    primary:
-      "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] hover:brightness-110 active:scale-95",
-    secondary:
-      "bg-[var(--color-bg-secondary)] [color:var(--color-text-default)] border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
-    pill: "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] rounded-full hover:brightness-110 active:scale-95",
-    danger:
-      "bg-[var(--color-bg-danger)] text-white border-[var(--color-bg-danger)] hover:brightness-110 active:scale-95",
-    success:
-      "bg-[var(--color-bg-success)] text-white border-[var(--color-bg-success)] hover:brightness-110 active:scale-95",
-    warning:
-      "bg-[var(--color-bg-warning)] text-white border-[var(--color-bg-warning)] hover:brightness-110 active:scale-95",
-    ghost:
-      "bg-transparent [color:var(--color-text-default)] border-transparent hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] active:scale-95",
-    link: "bg-transparent underline border-transparent [color:var(--color-text-link)] hover:brightness-110 active:scale-95 transition-transform ",
-    info: "bg-[var(--color-bg-secondary)] text-white border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
-  };
-
-  const buttonClass = $derived(
-    cx(base, sizes[sz], TEXT[sz], variants[variant], externalClass)
-  );
-
-  const state = $derived(loaded ? "loading" : disabled ? "disabled" : "idle");
-
-  function handleClick(e: MouseEvent) {
-    if (disabled || loaded) {
-      e.preventDefault();
-      return;
-    }
-
-    if (type === "submit" || type === "reset") {
-      onClick?.(e);
-      return;
-    }
-
-    onClick?.(e);
-    if (!link || e.defaultPrevented) return;
-
-    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-      return;
-    }
-
-    navigateToLink();
-  }
-
-  function navigateToLink() {
-    if (!link || typeof window === "undefined") return;
-
-    const restAttrs = rest as Record<string, unknown>;
-    const target =
-      typeof restAttrs.target === "string" ? restAttrs.target : undefined;
-
-    if (target === "_blank") {
-      window.open(link, "_blank", "noopener,noreferrer");
-    } else {
-      window.location.assign(link);
-    }
-  }
-</script>
-
-<button
-  {type}
-  {disabled}
-  data-state={state}
-  aria-disabled={disabled || loaded || undefined}
-  aria-busy={loaded || undefined}
-  onclick={handleClick}
-  class={buttonClass}
-  {...rest}
->
-  <span class={cx({ "opacity-0 pointer-events-none": loaded })}>
-    {@render children?.()}
-  </span>
-
-  {#if loaded}
-    <span
-      class={cx(
-        "absolute inset-0 m-auto w-[1em] h-[1em] border-2 [border-color:var(--color-spinner,currentColor)] border-r-transparent rounded-full motion-safe:[animation:spin_0.6s_linear_infinite]"
-      )}
-      aria-hidden="true"
-    ></span>
-  {/if}
-</button>

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

@@ -1,53 +0,0 @@
-/**
-   * @component Button
-   * @description Versatile button supporting multiple variants, sizes, loading state, and link behavior.
-   *
-   * @prop disabled {boolean} - Disables interaction
-   * @default false
-   *
-   * @prop children {Snippet} - Content rendered inside the button
-   *
-   * @prop onClick {(e: MouseEvent) => void} - Click handler
-   *
-   * @prop sz {SizeKey} - Button size variant
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ButtonVariant} - Visual style preset
-   * @options primary|secondary|pill|danger|success|warning|ghost|link|info
-   * @default primary
-   *
-   * @prop type {"button" | "submit" | "reset"} - Button type attribute
-   * @default "button"
-   *
-   * @prop loaded {boolean} - Shows loading spinner and blocks clicks
-   * @default false
-   *
-   * @prop link {string} - Navigates to a URL when clicked
-   *
-   * @prop class {string} - Additional classes for the button
-   * @default ""
-   *
-   * @note `disabled` and `loaded` both prevent click events.
-   * @note Automatically shows a centered spinner when `loaded` is `true`.
-   * @note Link navigation supports `target` and `rel` attributes.
-   * @note Accessible with `aria-disabled` and `aria-busy` states.
-   * @note The component uses CSS variables for colors, spacing, and transitions.
-   */
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type { Snippet } from "svelte";
-import { type SizeKey, type ButtonVariant } from "./types";
-type Props = HTMLButtonAttributes & {
-    disabled?: boolean;
-    children?: Snippet;
-    onClick?: (e: MouseEvent) => void;
-    sz?: SizeKey;
-    variant?: ButtonVariant;
-    type?: "button" | "submit" | "reset";
-    loaded?: boolean;
-    link?: string;
-    class?: string;
-};
-declare const Button: import("svelte").Component<Props, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/lib/Card.svelte

@@ -1,103 +0,0 @@
-<!-- src/lib/Card.svelte -->
-<script lang="ts">
-  /**
-   * @component Card
-   * @description Flexible layout component with optional `header` and `footer` sections. Supports predefined size variants (xs to xl) through the `sz` prop.
-   *
-   * @prop header {Snippet} - Content rendered in the card header
-   *
-   * @prop footer {Snippet} - Content rendered in the card footer
-   *
-   * @prop children {Snippet} - Main body content of the card
-   *
-   * @prop class {string} - Additional CSS classes for the card
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Padding and typography preset
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop flushHeader {boolean} - Removes padding and border from the header
-   * @default false
-   *
-   * @prop flushFooter {boolean} - Removes padding and border from the footer
-   * @default false
-   *
-   * @note Theme-aware: uses CSS variables (`--color-bg-surface`, `--border-color-default`).
-   * @note Rounded corners, subtle shadow, and border for a clean visual hierarchy.
-   * @note Padding and typography scale automatically with `sz`.
-   * @note Uses `{@render}` snippets instead of legacy `slots`.
-   */
-  import type { Snippet } from "svelte";
-  import { type SizeKey, TEXT } from "./types";
-  import { cx } from "../utils";
-
-  type Props = {
-    header?: Snippet;
-    footer?: Snippet;
-    children?: Snippet;
-    class?: string;
-    sz?: SizeKey;
-    flushHeader?: boolean;
-    flushFooter?: boolean;
-  };
-
-  let {
-    header,
-    footer,
-    children,
-    class: externalClass = "",
-    sz = "md",
-    flushHeader = false,
-    flushFooter = false,
-  }: Props = $props();
-
-  const paddingSizes: Record<SizeKey, string> = {
-    xs: "px-3 py-2",
-    sm: "px-4 py-2",
-    md: "px-5 py-3",
-    lg: "px-6 py-4",
-    xl: "px-7 py-5",
-  };
-
-  const cardClass = $derived(
-    cx(
-      "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-xl shadow-sm overflow-hidden",
-      TEXT[sz],
-      "flex flex-col",
-      externalClass
-    )
-  );
-
-  const headerClass = $derived(
-    flushHeader
-      ? ""
-      : cx("border-b border-[var(--border-color-default)]", paddingSizes[sz])
-  );
-
-  const contentClass = $derived(cx(paddingSizes[sz], "flex-1 min-h-0"));
-
-  const footerClass = $derived(
-    flushFooter
-      ? ""
-      : cx("border-t border-[var(--border-color-default)]", paddingSizes[sz])
-  );
-</script>
-
-<div class={cardClass}>
-  {#if header}
-    <div class={headerClass}>
-      {@render header?.()}
-    </div>
-  {/if}
-
-  <div class={contentClass}>
-    {@render children?.()}
-  </div>
-
-  {#if footer}
-    <div class={footerClass}>
-      {@render footer?.()}
-    </div>
-  {/if}
-</div>

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

@@ -1,42 +0,0 @@
-/**
-   * @component Card
-   * @description Flexible layout component with optional `header` and `footer` sections. Supports predefined size variants (xs to xl) through the `sz` prop.
-   *
-   * @prop header {Snippet} - Content rendered in the card header
-   *
-   * @prop footer {Snippet} - Content rendered in the card footer
-   *
-   * @prop children {Snippet} - Main body content of the card
-   *
-   * @prop class {string} - Additional CSS classes for the card
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Padding and typography preset
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop flushHeader {boolean} - Removes padding and border from the header
-   * @default false
-   *
-   * @prop flushFooter {boolean} - Removes padding and border from the footer
-   * @default false
-   *
-   * @note Theme-aware: uses CSS variables (`--color-bg-surface`, `--border-color-default`).
-   * @note Rounded corners, subtle shadow, and border for a clean visual hierarchy.
-   * @note Padding and typography scale automatically with `sz`.
-   * @note Uses `{@render}` snippets instead of legacy `slots`.
-   */
-import type { Snippet } from "svelte";
-import { type SizeKey } from "./types";
-type Props = {
-    header?: Snippet;
-    footer?: Snippet;
-    children?: Snippet;
-    class?: string;
-    sz?: SizeKey;
-    flushHeader?: boolean;
-    flushFooter?: boolean;
-};
-declare const Card: import("svelte").Component<Props, {}, "">;
-type Card = ReturnType<typeof Card>;
-export default Card;