plasma-svelte 0.0.1

package/dist/table/Table.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLTableAttributes } from "svelte/elements";
+
+  export interface TableColumn<T = any> {
+    key: string;
+    title: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    render?: Snippet<[T, number]>;
+  }
+
+  type TableDensity = "compact" | "default" | "spacious";
+
+  interface Props<T = any> extends HTMLTableAttributes {
+    columns?: TableColumn<T>[];
+    data?: T[];
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    density?: TableDensity;
+    selectedKey?: string;
+    selectedId?: string | number;
+    sortKey?: string;
+    sortOrder?: "asc" | "desc";
+    children?: Snippet;
+    headerSnippet?: Snippet;
+    rowSnippet?: Snippet<[T, number]>;
+    emptySnippet?: Snippet;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (key: string, order: "asc" | "desc") => void;
+  }
+
+  let {
+    columns = [],
+    data = [],
+    striped = true,
+    bordered = false,
+    hoverable = true,
+    density = "default",
+    selectedKey = "id",
+    selectedId = $bindable(undefined),
+    sortKey = $bindable(""),
+    sortOrder = $bindable("asc"),
+    children,
+    headerSnippet,
+    rowSnippet,
+    emptySnippet,
+    onrowclick,
+    onsort,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  function handleSort(key: string, sortable?: boolean) {
+    if (!sortable) return;
+    if (sortKey === key) {
+      sortOrder = sortOrder === "asc" ? "desc" : "asc";
+    } else {
+      sortKey = key;
+      sortOrder = "asc";
+    }
+    onsort?.(sortKey, sortOrder);
+  }
+
+  function handleRowClick(row: any, index: number) {
+    if (selectedKey && row && row[selectedKey] !== undefined) {
+      selectedId = row[selectedKey];
+    }
+    onrowclick?.(row, index);
+  }
+</script>
+
+<div
+  class="plasma-table-container"
+  class:plasma-table-container--bordered={bordered}
+>
+  <table
+    class="plasma-table plasma-table--{density} {customClass}"
+    class:plasma-table--striped={striped}
+    class:plasma-table--hoverable={hoverable}
+    class:plasma-table--bordered={bordered}
+    {...restProps}
+  >
+    {#if headerSnippet}
+      <thead>
+        {@render headerSnippet()}
+      </thead>
+    {:else if columns.length > 0}
+      <thead>
+        <tr>
+          {#each columns as col}
+            <th
+              style="{col.width
+                ? `width: ${col.width};`
+                : ''} text-align: {col.align || 'left'};"
+              class:plasma-th--sortable={col.sortable}
+              class:plasma-th--sorted={sortKey === col.key}
+              onclick={() => handleSort(col.key, col.sortable)}
+            >
+              <div
+                class="plasma-th-content"
+                style="justify-content: {col.align === 'right'
+                  ? 'flex-end'
+                  : col.align === 'center'
+                    ? 'center'
+                    : 'flex-start'};"
+              >
+                <span>{col.title}</span>
+                {#if col.sortable}
+                  <span class="plasma-sort-indicator">
+                    {#if sortKey === col.key}
+                      {sortOrder === "asc" ? "▲" : "▼"}
+                    {:else}
+                      <span class="plasma-sort-indicator--idle">▲</span>
+                    {/if}
+                  </span>
+                {/if}
+              </div>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+    {/if}
+
+    <tbody>
+      {#if children}
+        {@render children()}
+      {:else if data.length > 0}
+        {#each data as row, idx}
+          {@const isSelected =
+            selectedId !== undefined && row[selectedKey] === selectedId}
+          <tr
+            class:plasma-tr--selected={isSelected}
+            onclick={() => handleRowClick(row, idx)}
+          >
+            {#if rowSnippet}
+              {@render rowSnippet(row, idx)}
+            {:else}
+              {#each columns as col}
+                <td style="text-align: {col.align || 'left'};">
+                  {#if col.render}
+                    {@render col.render(row, idx)}
+                  {:else}
+                    {row[col.key] ?? ""}
+                  {/if}
+                </td>
+              {/each}
+            {/if}
+          </tr>
+        {/each}
+      {:else}
+        <tr>
+          <td colspan={columns.length || 1} class="plasma-table-empty">
+            {#if emptySnippet}
+              {@render emptySnippet()}
+            {:else}
+              No data available
+            {/if}
+          </td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .plasma-table-container {
+    width: 100%;
+    overflow-x: auto;
+    background-color: var(--plasma-color-view-bg);
+    border: 1px solid var(--plasma-color-border-subtle);
+    border-radius: var(--plasma-radius-md);
+    box-sizing: border-box;
+    scrollbar-width: thin;
+    scrollbar-color: var(--plasma-color-border) transparent;
+  }
+
+  .plasma-table-container--bordered {
+    border-color: var(--plasma-color-border);
+  }
+
+  .plasma-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+    text-align: left;
+    box-sizing: border-box;
+  }
+
+  /* --------------------------------------------------------------------------
+     Header Styling (QHeaderView)
+     -------------------------------------------------------------------------- */
+  .plasma-table thead {
+    background-color: var(--plasma-color-surface);
+    border-bottom: 1px solid var(--plasma-color-border);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  .plasma-table th {
+    padding: var(--plasma-space-sm) var(--plasma-space-md);
+    font-size: var(--plasma-font-size-sm);
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text);
+    user-select: none;
+    border-bottom: 1px solid var(--plasma-color-border);
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-th--sortable {
+    cursor: pointer;
+  }
+
+  .plasma-th--sortable:hover {
+    background-color: var(--plasma-color-surface-hover);
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-th-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+  }
+
+  .plasma-sort-indicator {
+    font-size: 10px;
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-sort-indicator--idle {
+    color: var(--plasma-color-text-muted);
+    opacity: 0.3;
+  }
+
+  /* --------------------------------------------------------------------------
+     Body & Cell Rows
+     -------------------------------------------------------------------------- */
+  .plasma-table td {
+    padding: var(--plasma-space-sm) var(--plasma-space-md);
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+    transition: var(--plasma-transition-fast);
+  }
+
+  /* Density */
+  .plasma-table--compact td,
+  .plasma-table--compact th {
+    padding: 4px var(--plasma-space-sm);
+    font-size: var(--plasma-font-size-xs);
+  }
+
+  .plasma-table--default td,
+  .plasma-table--default th {
+    padding: 8px var(--plasma-space-md);
+  }
+
+  .plasma-table--spacious td,
+  .plasma-table--spacious th {
+    padding: 12px var(--plasma-space-lg);
+  }
+
+  /* Zebra Striping */
+  .plasma-table--striped tbody tr:nth-child(even):not(.plasma-tr--selected) {
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  /* Hover */
+  .plasma-table--hoverable tbody tr:hover:not(.plasma-tr--selected) {
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  /* KDE Active Row Selection */
+  .plasma-tr--selected {
+    position: relative;
+    background-color: var(--plasma-color-highlight-soft) !important;
+    color: var(--plasma-color-highlight);
+    font-weight: var(--plasma-font-weight-medium);
+  }
+
+  .plasma-tr--selected td:first-child {
+    box-shadow: inset 2px 0 0 var(--plasma-color-highlight);
+  }
+
+  /* Bordered table lines */
+  .plasma-table--bordered th,
+  .plasma-table--bordered td {
+    border-right: 1px solid var(--plasma-color-border-subtle);
+  }
+
+  .plasma-table--bordered th:last-child,
+  .plasma-table--bordered td:last-child {
+    border-right: none;
+  }
+
+  .plasma-table-empty {
+    text-align: center;
+    padding: var(--plasma-space-xl) !important;
+    color: var(--plasma-color-text-muted);
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from "svelte";
+import type { HTMLTableAttributes } from "svelte/elements";
+export interface TableColumn<T = any> {
+    key: string;
+    title: string;
+    width?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    render?: Snippet<[T, number]>;
+}
+type TableDensity = "compact" | "default" | "spacious";
+interface Props<T = any> extends HTMLTableAttributes {
+    columns?: TableColumn<T>[];
+    data?: T[];
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    density?: TableDensity;
+    selectedKey?: string;
+    selectedId?: string | number;
+    sortKey?: string;
+    sortOrder?: "asc" | "desc";
+    children?: Snippet;
+    headerSnippet?: Snippet;
+    rowSnippet?: Snippet<[T, number]>;
+    emptySnippet?: Snippet;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (key: string, order: "asc" | "desc") => void;
+}
+declare const Table: import("svelte").Component<Props<any>, {}, "selectedId" | "sortKey" | "sortOrder">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/tabs/Tabs.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export interface TabItem {
+    id: string;
+    label: string;
+    badge?: string | number;
+    disabled?: boolean;
+    icon?: Snippet;
+  }
+
+  type TabsVariant = "line" | "pill";
+  type TabsSize = "sm" | "md" | "lg";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onchange"> {
+    items: TabItem[];
+    activeId?: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    onchange?: (id: string) => void;
+  }
+
+
+  let {
+    items,
+    activeId = $bindable(items[0]?.id ?? ""),
+    variant = "line",
+    size = "md",
+    onchange,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  function selectTab(id: string, disabled?: boolean) {
+    if (disabled) return;
+    activeId = id;
+    onchange?.(id);
+  }
+</script>
+
+<div
+  class="plasma-tabs plasma-tabs--{variant} plasma-tabs--{size} {customClass}"
+  role="tablist"
+  {...restProps}
+>
+  {#each items as item}
+    {@const isActive = activeId === item.id}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isActive}
+      disabled={item.disabled}
+      class="plasma-tab"
+      class:plasma-tab--active={isActive}
+      class:plasma-tab--disabled={item.disabled}
+      onclick={() => selectTab(item.id, item.disabled)}
+    >
+      {#if item.icon}
+        <span class="plasma-tab-icon">
+          {@render item.icon()}
+        </span>
+      {/if}
+
+      <span class="plasma-tab-label">{item.label}</span>
+
+      {#if item.badge !== undefined}
+        <span class="plasma-tab-badge">{item.badge}</span>
+      {/if}
+
+      {#if variant === "line" && isActive}
+        <span class="plasma-tab-indicator"></span>
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .plasma-tabs {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+  }
+
+  /* --------------------------------------------------------------------------
+     Line Variant (Classic KDE Breeze Tab Bar)
+     -------------------------------------------------------------------------- */
+  .plasma-tabs--line {
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+    gap: var(--plasma-space-xs);
+    width: 100%;
+  }
+
+  .plasma-tabs--line .plasma-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--plasma-space-xs);
+    background: transparent;
+    border: none;
+    color: var(--plasma-color-text-muted);
+    font-weight: var(--plasma-font-weight-medium);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+    padding: 0 var(--plasma-space-md);
+  }
+
+  .plasma-tabs--line .plasma-tab:hover:not(.plasma-tab--disabled) {
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-tabs--line .plasma-tab--active {
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-tabs--line .plasma-tab-indicator {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--plasma-color-highlight);
+    border-radius: 1px;
+  }
+
+  /* --------------------------------------------------------------------------
+     Pill / Segmented Variant (Toolbar Switcher)
+     -------------------------------------------------------------------------- */
+  .plasma-tabs--pill {
+    background-color: var(--plasma-color-surface-sunken);
+    border: 1px solid var(--plasma-color-border-subtle);
+    border-radius: var(--plasma-radius-md);
+    padding: 2px;
+    gap: 2px;
+  }
+
+  .plasma-tabs--pill .plasma-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--plasma-space-xs);
+    background: transparent;
+    border: none;
+    border-radius: calc(var(--plasma-radius-md) - 2px);
+    color: var(--plasma-color-text-muted);
+    font-weight: var(--plasma-font-weight-medium);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-tabs--pill .plasma-tab:hover:not(.plasma-tab--disabled) {
+    color: var(--plasma-color-text);
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  .plasma-tabs--pill .plasma-tab--active {
+    background-color: var(--plasma-color-surface);
+    color: var(--plasma-color-text);
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-tabs--sm .plasma-tab {
+    height: var(--plasma-control-height-sm);
+    font-size: var(--plasma-font-size-xs);
+    padding: 0 var(--plasma-space-sm);
+  }
+
+  .plasma-tabs--md .plasma-tab {
+    height: var(--plasma-control-height-md);
+    font-size: var(--plasma-font-size-base);
+    padding: 0 var(--plasma-space-md);
+  }
+
+  .plasma-tabs--lg .plasma-tab {
+    height: var(--plasma-control-height-lg);
+    font-size: var(--plasma-font-size-md);
+    padding: 0 var(--plasma-space-lg);
+  }
+
+  /* Disabled & Focus */
+  .plasma-tab--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .plasma-tab:focus-visible {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 1px;
+  }
+
+  /* Badge */
+  .plasma-tab-badge {
+    font-size: 11px;
+    line-height: 1;
+    padding: 2px 6px;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-surface-sunken);
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-tab--active .plasma-tab-badge {
+    background-color: var(--plasma-color-highlight-soft);
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-tab-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface TabItem {
+    id: string;
+    label: string;
+    badge?: string | number;
+    disabled?: boolean;
+    icon?: Snippet;
+}
+type TabsVariant = "line" | "pill";
+type TabsSize = "sm" | "md" | "lg";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onchange"> {
+    items: TabItem[];
+    activeId?: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    onchange?: (id: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "activeId">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/textarea/TextArea.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+
+  type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+
+  interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    resize?: TextAreaResize;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+  }
+
+  let {
+    value = $bindable(""),
+    placeholder = "",
+    rows = 4,
+    resize = "vertical",
+    disabled = false,
+    readonly = false,
+    invalid = false,
+    class: customClass = "",
+    id,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  class="plasma-textarea-container {customClass}"
+  class:plasma-textarea--disabled={disabled}
+  class:plasma-textarea--readonly={readonly}
+  class:plasma-textarea--invalid={invalid}
+>
+  <textarea
+    {id}
+    bind:value
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    style="resize: {resize};"
+    class="plasma-textarea-field"
+    {...restProps}
+  ></textarea>
+</div>
+
+<style>
+  .plasma-textarea-container {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+    background-color: var(--plasma-color-view-bg);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-md);
+    color: var(--plasma-color-text);
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-textarea-container:hover:not(.plasma-textarea--disabled):not(:focus-within) {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-textarea-container:focus-within:not(.plasma-textarea--disabled) {
+    border-color: var(--plasma-color-highlight);
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  .plasma-textarea--invalid {
+    border-color: var(--plasma-color-negative);
+  }
+
+  .plasma-textarea--invalid:focus-within {
+    box-shadow: 0 0 0 2px rgba(218, 68, 83, 0.35);
+  }
+
+  .plasma-textarea--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  .plasma-textarea--disabled .plasma-textarea-field {
+    cursor: not-allowed;
+  }
+
+  .plasma-textarea--readonly {
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  .plasma-textarea-field {
+    width: 100%;
+    min-height: 80px;
+    padding: var(--plasma-space-sm) var(--plasma-space-md);
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--plasma-font-size-base);
+    line-height: var(--plasma-line-height-base);
+    box-sizing: border-box;
+    scrollbar-width: thin;
+    scrollbar-color: var(--plasma-color-border) transparent;
+  }
+
+  .plasma-textarea-field::placeholder {
+    color: var(--plasma-color-text-muted);
+    opacity: 0.75;
+  }
+</style>

package/dist/textarea/TextArea.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    resize?: TextAreaResize;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;