plasma-svelte 0.0.1

package/dist/pagination/Pagination.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type PaginationSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "size" | "onchange"> {
+
+    current?: number;
+    total?: number;
+    pageSize?: number;
+    showTotal?: boolean;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: number[];
+    size?: PaginationSize;
+    disabled?: boolean;
+    onchange?: (page: number, pageSize: number) => void;
+  }
+
+  let {
+    current = $bindable(1),
+    total = 0,
+    pageSize = $bindable(10),
+    showTotal = true,
+    showSizeChanger = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    size = "md",
+    disabled = false,
+    onchange,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  const totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)));
+
+  const resolvedSize = $derived(
+    size === "small"
+      ? "sm"
+      : size === "large"
+        ? "lg"
+        : size === "medium"
+          ? "md"
+          : size
+  );
+
+  // Generate page numbers with ellipses
+  const pageItems = $derived.by(() => {
+    const pages: (number | string)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (current > 3) pages.push("...");
+      const start = Math.max(2, current - 1);
+      const end = Math.min(totalPages - 1, current + 1);
+      for (let i = start; i <= end; i++) {
+        if (!pages.includes(i)) pages.push(i);
+      }
+      if (current < totalPages - 2) pages.push("...");
+      if (!pages.includes(totalPages)) pages.push(totalPages);
+    }
+    return pages;
+  });
+
+  function setPage(p: number) {
+    if (disabled || p < 1 || p > totalPages || p === current) return;
+    current = p;
+    onchange?.(current, pageSize);
+  }
+
+  function handleSizeChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    pageSize = Number(select.value);
+    current = 1;
+    onchange?.(current, pageSize);
+  }
+
+  const startItem = $derived(total === 0 ? 0 : (current - 1) * pageSize + 1);
+  const endItem = $derived(Math.min(total, current * pageSize));
+</script>
+
+<nav
+  aria-label="Pagination"
+  class="plasma-pagination plasma-pagination--{resolvedSize} {customClass}"
+  class:plasma-pagination--disabled={disabled}
+  {...restProps}
+>
+  {#if showTotal}
+    <span class="plasma-pagination-total">
+      Showing {startItem}–{endItem} of {total}
+    </span>
+  {/if}
+
+  <ul class="plasma-pagination-list">
+    <!-- Prev Button -->
+    <li>
+      <button
+        type="button"
+        class="plasma-page-btn plasma-page-nav"
+        disabled={disabled || current <= 1}
+        onclick={() => setPage(current - 1)}
+        aria-label="Previous page"
+      >
+        ‹
+      </button>
+    </li>
+
+    <!-- Page Numbers -->
+    {#each pageItems as item, idx}
+      <li>
+        {#if item === "..."}
+          <span class="plasma-page-ellipsis">…</span>
+        {:else}
+          <button
+            type="button"
+            class="plasma-page-btn"
+            class:plasma-page-btn--active={current === item}
+            {disabled}
+            onclick={() => setPage(Number(item))}
+            aria-current={current === item ? "page" : undefined}
+          >
+            {item}
+          </button>
+        {/if}
+      </li>
+    {/each}
+
+    <!-- Next Button -->
+    <li>
+      <button
+        type="button"
+        class="plasma-page-btn plasma-page-nav"
+        disabled={disabled || current >= totalPages}
+        onclick={() => setPage(current + 1)}
+        aria-label="Next page"
+      >
+        ›
+      </button>
+    </li>
+  </ul>
+
+  {#if showSizeChanger}
+    <div class="plasma-pagination-size-changer">
+      <select
+        value={pageSize}
+        onchange={handleSizeChange}
+        {disabled}
+        class="plasma-page-size-select"
+        aria-label="Items per page"
+      >
+        {#each pageSizeOptions as opt}
+          <option value={opt}>{opt} / page</option>
+        {/each}
+      </select>
+    </div>
+  {/if}
+</nav>
+
+<style>
+  .plasma-pagination {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--plasma-space-md);
+    font-family: var(--plasma-font-sans);
+    color: var(--plasma-color-text);
+    user-select: none;
+    box-sizing: border-box;
+  }
+
+  .plasma-pagination-total {
+    font-size: var(--plasma-font-size-sm);
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-pagination-list {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .plasma-page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-sm);
+    background-color: var(--plasma-color-surface);
+    color: var(--plasma-color-text);
+    font-size: var(--plasma-font-size-sm);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-page-btn:hover:not(:disabled):not(.plasma-page-btn--active) {
+    background-color: var(--plasma-color-surface-hover);
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-page-btn--active {
+    background-color: var(--plasma-color-highlight) !important;
+    border-color: var(--plasma-color-highlight) !important;
+    color: #ffffff !important;
+    font-weight: var(--plasma-font-weight-bold);
+  }
+
+  .plasma-page-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .plasma-page-nav {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .plasma-page-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 28px;
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-page-size-select {
+    padding: 2px 6px;
+    background-color: var(--plasma-color-surface);
+    color: var(--plasma-color-text);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-sm);
+    font-family: inherit;
+    font-size: var(--plasma-font-size-xs);
+    cursor: pointer;
+  }
+
+  /* Sizing */
+  .plasma-pagination--sm .plasma-page-btn {
+    min-width: 22px;
+    height: 22px;
+    font-size: var(--plasma-font-size-xs);
+  }
+
+  .plasma-pagination--lg .plasma-page-btn {
+    min-width: 36px;
+    height: 36px;
+    font-size: var(--plasma-font-size-md);
+  }
+
+  .plasma-pagination--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+type PaginationSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends Omit<HTMLAttributes<HTMLElement>, "size" | "onchange"> {
+    current?: number;
+    total?: number;
+    pageSize?: number;
+    showTotal?: boolean;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: number[];
+    size?: PaginationSize;
+    disabled?: boolean;
+    onchange?: (page: number, pageSize: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "current" | "pageSize">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/progress/ProgressBar.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ProgressVariant =
+    | "default"
+    | "primary"
+    | "positive"
+    | "neutral"
+    | "negative";
+
+  type ProgressSize = "sm" | "md" | "lg";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    showValue?: boolean;
+    label?: string;
+  }
+
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    variant = "primary",
+    size = "md",
+    showValue = false,
+    label,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  const percentage = $derived(
+    Math.min(100, Math.max(0, (value / max) * 100))
+  );
+
+  const resolvedVariant = $derived(
+    variant === "default" ? "primary" : variant
+  );
+</script>
+
+<div
+  class="plasma-progress plasma-progress--{size} {customClass}"
+  {...restProps}
+>
+  {#if label || showValue}
+    <div class="plasma-progress-header">
+      {#if label}
+        <span class="plasma-progress-label">{label}</span>
+      {/if}
+      {#if showValue && !indeterminate}
+        <span class="plasma-progress-value">{Math.round(percentage)}%</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div
+    role="progressbar"
+    aria-valuenow={indeterminate ? undefined : value}
+    aria-valuemin={0}
+    aria-valuemax={max}
+    class="plasma-progress-track"
+    class:plasma-progress-track--indeterminate={indeterminate}
+  >
+    {#if !indeterminate}
+      <div
+        class="plasma-progress-fill plasma-progress-fill--{resolvedVariant}"
+        style="width: {percentage}%;"
+      ></div>
+    {:else}
+      <div
+        class="plasma-progress-indeterminate plasma-progress-fill--{resolvedVariant}"
+      ></div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .plasma-progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--plasma-space-xs);
+    width: 100%;
+    font-family: var(--plasma-font-sans);
+    box-sizing: border-box;
+  }
+
+  .plasma-progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--plasma-font-size-sm);
+  }
+
+  .plasma-progress-label {
+    color: var(--plasma-color-text);
+    font-weight: var(--plasma-font-weight-medium);
+  }
+
+  .plasma-progress-value {
+    font-family: var(--plasma-font-mono);
+    font-size: var(--plasma-font-size-xs);
+    color: var(--plasma-color-text-muted);
+  }
+
+  /* --------------------------------------------------------------------------
+     Track
+     -------------------------------------------------------------------------- */
+  .plasma-progress-track {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--plasma-color-surface-sunken);
+    border: 1px solid var(--plasma-color-border-subtle);
+    border-radius: var(--plasma-radius-full);
+    box-sizing: border-box;
+  }
+
+  /* Sizes */
+  .plasma-progress--sm .plasma-progress-track {
+    height: 4px;
+  }
+  .plasma-progress--md .plasma-progress-track {
+    height: 6px;
+  }
+  .plasma-progress--lg .plasma-progress-track {
+    height: 10px;
+  }
+
+  /* --------------------------------------------------------------------------
+     Fill (Determinate)
+     -------------------------------------------------------------------------- */
+  .plasma-progress-fill {
+    height: 100%;
+    border-radius: var(--plasma-radius-full);
+    transition: width var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-progress-fill--primary {
+    background-color: var(--plasma-color-highlight);
+  }
+  .plasma-progress-fill--positive {
+    background-color: var(--plasma-color-positive);
+  }
+  .plasma-progress-fill--neutral {
+    background-color: var(--plasma-color-neutral);
+  }
+  .plasma-progress-fill--negative {
+    background-color: var(--plasma-color-negative);
+  }
+
+  /* --------------------------------------------------------------------------
+     Indeterminate (KDE Breeze Shimmer Animation)
+     -------------------------------------------------------------------------- */
+  .plasma-progress-indeterminate {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: var(--plasma-radius-full);
+    animation: plasma-progress-shimmer 1.5s infinite ease-in-out;
+  }
+
+  @keyframes plasma-progress-shimmer {
+    0% {
+      left: -35%;
+      width: 35%;
+    }
+    50% {
+      left: 30%;
+      width: 50%;
+    }
+    100% {
+      left: 100%;
+      width: 35%;
+    }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "svelte/elements";
+type ProgressVariant = "default" | "primary" | "positive" | "neutral" | "negative";
+type ProgressSize = "sm" | "md" | "lg";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    showValue?: boolean;
+    label?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/radio/Radio.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "value"> {
+    value?: any;
+    group?: any;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    group = $bindable(),
+    checked = $bindable(false),
+    disabled = false,
+    label,
+    children,
+    class: customClass = "",
+    id,
+    name,
+    ...restProps
+  }: Props = $props();
+
+  // If group is provided, derive checked from whether group === value
+  const isChecked = $derived(group !== undefined ? group === value : checked);
+
+  function handleChange() {
+    if (disabled) return;
+    if (group !== undefined) {
+      group = value;
+    } else {
+      checked = true;
+    }
+  }
+</script>
+
+<!-- biome-ignore lint/a11y/noLabelWithoutControl: id is passed as an attr -->
+<label
+  class="plasma-radio-container {customClass}"
+  class:plasma-radio--disabled={disabled}
+  for={id}
+>
+  <input
+    {id}
+    type="radio"
+    {name}
+    {value}
+    {disabled}
+    checked={isChecked}
+    onchange={handleChange}
+    class="plasma-radio-input"
+    {...restProps}
+  />
+
+  <span
+    class="plasma-radio-circle"
+    class:plasma-radio-circle--checked={isChecked}
+  >
+    <span class="plasma-radio-dot"></span>
+  </span>
+
+  {#if children}
+    <span class="plasma-radio-label">
+      {@render children()}
+    </span>
+  {:else if label}
+    <span class="plasma-radio-label">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .plasma-radio-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+    cursor: pointer;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+    user-select: none;
+    line-height: 1.2;
+  }
+
+  .plasma-radio--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* Visually hide native radio */
+  .plasma-radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Breeze Radio Circle */
+  .plasma-radio-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: var(--plasma-radius-full);
+    border: 1px solid var(--plasma-color-border);
+    background-color: var(--plasma-color-view-bg);
+    flex-shrink: 0;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-radio-container:hover:not(.plasma-radio--disabled)
+    .plasma-radio-circle {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-radio-input:focus-visible + .plasma-radio-circle {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 2px;
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  /* Checked Outer Ring */
+  .plasma-radio-circle--checked {
+    border-color: var(--plasma-color-highlight);
+  }
+
+  .plasma-radio-container:hover:not(.plasma-radio--disabled)
+    .plasma-radio-circle--checked {
+    border-color: var(--plasma-color-highlight-hover);
+  }
+
+  /* Inner Dot */
+  .plasma-radio-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-highlight);
+    transform: scale(0);
+    opacity: 0;
+    transition:
+      transform var(--plasma-duration-fast) var(--plasma-ease-default),
+      opacity var(--plasma-duration-fast) var(--plasma-ease-default);
+  }
+
+  .plasma-radio-circle--checked .plasma-radio-dot {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .plasma-radio-label {
+    display: inline-block;
+  }
+</style>

package/dist/radio/Radio.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "value"> {
+    value?: any;
+    group?: any;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group" | "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;