plasma-svelte 0.0.1

package/dist/emptystate/EmptyState.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type EmptyStateVariant = "default" | "card" | "dashed" | "subtle";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    variant?: EmptyStateVariant;
+    compact?: boolean;
+    icon?: Snippet;
+    actions?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    title = "No items found",
+    description = "",
+    variant = "default",
+    compact = false,
+    icon,
+    actions,
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  class="plasma-empty-state plasma-empty-state--{variant} {customClass}"
+  class:plasma-empty-state--compact={compact}
+  {...restProps}
+>
+  <div class="plasma-empty-state-icon">
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        width="48"
+        height="48"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect width="7" height="9" x="3" y="3" rx="1" />
+        <rect width="7" height="5" x="14" y="3" rx="1" />
+        <rect width="7" height="9" x="14" y="12" rx="1" />
+        <rect width="7" height="5" x="3" y="16" rx="1" />
+      </svg>
+    {/if}
+  </div>
+
+  {#if title}
+    <h3 class="plasma-empty-state-title">{title}</h3>
+  {/if}
+
+  {#if description}
+    <p class="plasma-empty-state-desc">{description}</p>
+  {/if}
+
+  {#if children}
+    <div class="plasma-empty-state-content">
+      {@render children()}
+    </div>
+  {/if}
+
+  {#if actions}
+    <div class="plasma-empty-state-actions">
+      {@render actions()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .plasma-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--plasma-space-xl) var(--plasma-space-lg);
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+    color: var(--plasma-color-text);
+    width: 100%;
+  }
+
+  .plasma-empty-state--compact {
+    padding: var(--plasma-space-lg) var(--plasma-space-md);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variants
+     -------------------------------------------------------------------------- */
+  .plasma-empty-state--card {
+    background-color: var(--plasma-color-surface);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-xl);
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  .plasma-empty-state--dashed {
+    background-color: var(--plasma-color-surface-sunken);
+    border: 2px dashed var(--plasma-color-border);
+    border-radius: var(--plasma-radius-xl);
+  }
+
+  .plasma-empty-state--subtle {
+    background-color: transparent;
+  }
+
+  /* --------------------------------------------------------------------------
+     Sections
+     -------------------------------------------------------------------------- */
+  .plasma-empty-state-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--plasma-space-md);
+    color: var(--plasma-color-text-muted);
+    opacity: 0.75;
+  }
+
+  .plasma-empty-state--compact .plasma-empty-state-icon {
+    margin-bottom: var(--plasma-space-sm);
+  }
+
+  .plasma-empty-state-title {
+    margin: 0 0 var(--plasma-space-xs) 0;
+    font-size: var(--plasma-font-size-lg);
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-empty-state--compact .plasma-empty-state-title {
+    font-size: var(--plasma-font-size-base);
+  }
+
+  .plasma-empty-state-desc {
+    margin: 0;
+    max-width: 440px;
+    font-size: var(--plasma-font-size-sm);
+    color: var(--plasma-color-text-muted);
+    line-height: var(--plasma-line-height-base);
+  }
+
+  .plasma-empty-state-content {
+    margin-top: var(--plasma-space-md);
+    width: 100%;
+  }
+
+  .plasma-empty-state-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--plasma-space-sm);
+    margin-top: var(--plasma-space-lg);
+    flex-wrap: wrap;
+  }
+
+  .plasma-empty-state--compact .plasma-empty-state-actions {
+    margin-top: var(--plasma-space-md);
+  }
+</style>

package/dist/emptystate/EmptyState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type EmptyStateVariant = "default" | "card" | "dashed" | "subtle";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    variant?: EmptyStateVariant;
+    compact?: boolean;
+    icon?: Snippet;
+    actions?: Snippet;
+    children?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/headerbar/HeaderBar.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    subtitle?: string;
+    windowControls?: boolean;
+    icon?: Snippet;
+    left?: Snippet;
+    center?: Snippet;
+    right?: Snippet;
+    onminimize?: () => void;
+    onmaximize?: () => void;
+    onclose?: () => void;
+  }
+
+  let {
+    title = "",
+    subtitle = "",
+    windowControls = false,
+    icon,
+    left,
+    center,
+    right,
+    onminimize,
+    onmaximize,
+    onclose,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<header class="plasma-headerbar {customClass}" {...restProps}>
+  <!-- Left section -->
+  <div class="plasma-headerbar-section plasma-headerbar-left">
+    {#if left}
+      {@render left()}
+    {:else}
+      {#if icon}
+        <span class="plasma-headerbar-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      {#if title || subtitle}
+        <div class="plasma-headerbar-titles">
+          {#if title}
+            <span class="plasma-headerbar-title">{title}</span>
+          {/if}
+          {#if subtitle}
+            <span class="plasma-headerbar-subtitle">{subtitle}</span>
+          {/if}
+        </div>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- Center section -->
+  {#if center}
+    <div class="plasma-headerbar-section plasma-headerbar-center">
+      {@render center()}
+    </div>
+  {/if}
+
+  <!-- Right section -->
+  <div class="plasma-headerbar-section plasma-headerbar-right">
+    {#if right}
+      {@render right()}
+    {/if}
+
+    {#if windowControls}
+      <div class="plasma-headerbar-controls">
+        <button
+          type="button"
+          aria-label="Minimize"
+          onclick={onminimize}
+          class="plasma-win-btn plasma-win-btn--minimize"
+        >
+          <svg aria-hidden="true" viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
+            <path d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8z" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          aria-label="Maximize"
+          onclick={onmaximize}
+          class="plasma-win-btn plasma-win-btn--maximize"
+        >
+          <svg aria-hidden="true" viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
+            <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v7A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 13.5 3h-11zm0 1h11a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5z" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          aria-label="Close window"
+          onclick={onclose}
+          class="plasma-win-btn plasma-win-btn--close"
+        >
+          <svg aria-hidden="true" viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </button>
+      </div>
+    {/if}
+  </div>
+</header>
+
+<style>
+  .plasma-headerbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 44px;
+    padding: 0 var(--plasma-space-md);
+    background-color: var(--plasma-color-surface);
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+    font-family: var(--plasma-font-sans);
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  .plasma-headerbar-section {
+    display: flex;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+  }
+
+  .plasma-headerbar-left {
+    flex: 1;
+    justify-content: flex-start;
+  }
+
+  .plasma-headerbar-center {
+    flex: 2;
+    justify-content: center;
+  }
+
+  .plasma-headerbar-right {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .plasma-headerbar-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--plasma-color-highlight);
+    flex-shrink: 0;
+  }
+
+  .plasma-headerbar-titles {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .plasma-headerbar-title {
+    font-size: var(--plasma-font-size-base);
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .plasma-headerbar-subtitle {
+    font-size: 11px;
+    color: var(--plasma-color-text-muted);
+  }
+
+  /* --------------------------------------------------------------------------
+     KDE Breeze Window Controls (─, □, ✕)
+     -------------------------------------------------------------------------- */
+  .plasma-headerbar-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: var(--plasma-space-md);
+    padding-left: var(--plasma-space-sm);
+    border-left: 1px solid var(--plasma-color-border-subtle);
+  }
+
+  .plasma-win-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border: none;
+    border-radius: var(--plasma-radius-full);
+    background: transparent;
+    color: var(--plasma-color-text-muted);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-win-btn:hover {
+    background-color: var(--plasma-color-surface-hover);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-win-btn--close:hover {
+    background-color: var(--plasma-color-negative);
+    color: #ffffff;
+  }
+
+  .plasma-win-btn:focus-visible {
+    outline: 2px solid var(--plasma-color-highlight);
+  }
+</style>

package/dist/headerbar/HeaderBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    subtitle?: string;
+    windowControls?: boolean;
+    icon?: Snippet;
+    left?: Snippet;
+    center?: Snippet;
+    right?: Snippet;
+    onminimize?: () => void;
+    onmaximize?: () => void;
+    onclose?: () => void;
+}
+declare const HeaderBar: import("svelte").Component<Props, {}, "">;
+type HeaderBar = ReturnType<typeof HeaderBar>;
+export default HeaderBar;

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+export { default as Accordion } from "./accordion/Accordion.svelte";
+export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
+export { default as Avatar } from "./avatar/Avatar.svelte";
+export { default as Badge } from "./badge/Badge.svelte";
+export { default as Breadcrumb } from "./breadcrumb/Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./breadcrumb/BreadcrumbItem.svelte";
+export { default as Button } from "./button/Button.svelte";
+export { default as ButtonGroup } from "./button/ButtonGroup.svelte";
+export { default as Card } from "./card/Card.svelte";
+export { default as Checkbox } from "./checkbox/Checkbox.svelte";
+export { default as ConfirmDialog } from "./modal/ConfirmDialog.svelte";
+export { default as DatePicker } from "./datepicker/DatePicker.svelte";
+export { default as Divider } from "./divider/Divider.svelte";
+export { default as Drawer, default as Sheet } from "./drawer/Drawer.svelte";
+export { default as DropZone, default as FileUpload } from "./dropzone/DropZone.svelte";
+export { default as EmptyState, default as Placeholder } from "./emptystate/EmptyState.svelte";
+export { default as Flex } from "./layout/Flex.svelte";
+export { default as Grid } from "./layout/Grid.svelte";
+export { default as HeaderBar, default as ToolBar, } from "./headerbar/HeaderBar.svelte";
+export { default as Input, default as TextField } from "./input/Input.svelte";
+export { default as Menu } from "./menu/Menu.svelte";
+export { default as MenuDivider } from "./menu/MenuDivider.svelte";
+export { default as MenuItem } from "./menu/MenuItem.svelte";
+export { default as InlineMessage, default as Alert, } from "./message/InlineMessage.svelte";
+export { default as Modal, default as Dialog } from "./modal/Modal.svelte";
+export { default as Pagination } from "./pagination/Pagination.svelte";
+export { default as ProgressBar } from "./progress/ProgressBar.svelte";
+export { default as Radio } from "./radio/Radio.svelte";
+export { default as SearchField } from "./searchfield/SearchField.svelte";
+export { default as Select, default as ComboBox } from "./select/Select.svelte";
+export { default as Sidebar } from "./sidebar/Sidebar.svelte";
+export { default as SidebarGroup } from "./sidebar/SidebarGroup.svelte";
+export { default as SidebarItem } from "./sidebar/SidebarItem.svelte";
+export { default as Slider } from "./slider/Slider.svelte";
+export { default as Space } from "./layout/Space.svelte";
+export { default as SpinBox } from "./spinbox/SpinBox.svelte";
+export { default as Spinner, default as Loading } from "./spinner/Spinner.svelte";
+export { default as Switch } from "./switch/Switch.svelte";
+export { default as Table, type TableColumn } from "./table/Table.svelte";
+export { default as Tabs } from "./tabs/Tabs.svelte";
+export { default as TextArea } from "./textarea/TextArea.svelte";
+export { default as TimePicker } from "./timepicker/TimePicker.svelte";
+export { default as Tooltip } from "./tooltip/Tooltip.svelte";
+export * from "./layout/utils.js";

package/dist/index.js

@@ -0,0 +1,44 @@
+export { default as Accordion } from "./accordion/Accordion.svelte";
+export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
+export { default as Avatar } from "./avatar/Avatar.svelte";
+export { default as Badge } from "./badge/Badge.svelte";
+export { default as Breadcrumb } from "./breadcrumb/Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./breadcrumb/BreadcrumbItem.svelte";
+export { default as Button } from "./button/Button.svelte";
+export { default as ButtonGroup } from "./button/ButtonGroup.svelte";
+export { default as Card } from "./card/Card.svelte";
+export { default as Checkbox } from "./checkbox/Checkbox.svelte";
+export { default as ConfirmDialog } from "./modal/ConfirmDialog.svelte";
+export { default as DatePicker } from "./datepicker/DatePicker.svelte";
+export { default as Divider } from "./divider/Divider.svelte";
+export { default as Drawer, default as Sheet } from "./drawer/Drawer.svelte";
+export { default as DropZone, default as FileUpload } from "./dropzone/DropZone.svelte";
+export { default as EmptyState, default as Placeholder } from "./emptystate/EmptyState.svelte";
+export { default as Flex } from "./layout/Flex.svelte";
+export { default as Grid } from "./layout/Grid.svelte";
+export { default as HeaderBar, default as ToolBar, } from "./headerbar/HeaderBar.svelte";
+export { default as Input, default as TextField } from "./input/Input.svelte";
+export { default as Menu } from "./menu/Menu.svelte";
+export { default as MenuDivider } from "./menu/MenuDivider.svelte";
+export { default as MenuItem } from "./menu/MenuItem.svelte";
+export { default as InlineMessage, default as Alert, } from "./message/InlineMessage.svelte";
+export { default as Modal, default as Dialog } from "./modal/Modal.svelte";
+export { default as Pagination } from "./pagination/Pagination.svelte";
+export { default as ProgressBar } from "./progress/ProgressBar.svelte";
+export { default as Radio } from "./radio/Radio.svelte";
+export { default as SearchField } from "./searchfield/SearchField.svelte";
+export { default as Select, default as ComboBox } from "./select/Select.svelte";
+export { default as Sidebar } from "./sidebar/Sidebar.svelte";
+export { default as SidebarGroup } from "./sidebar/SidebarGroup.svelte";
+export { default as SidebarItem } from "./sidebar/SidebarItem.svelte";
+export { default as Slider } from "./slider/Slider.svelte";
+export { default as Space } from "./layout/Space.svelte";
+export { default as SpinBox } from "./spinbox/SpinBox.svelte";
+export { default as Spinner, default as Loading } from "./spinner/Spinner.svelte";
+export { default as Switch } from "./switch/Switch.svelte";
+export { default as Table } from "./table/Table.svelte";
+export { default as Tabs } from "./tabs/Tabs.svelte";
+export { default as TextArea } from "./textarea/TextArea.svelte";
+export { default as TimePicker } from "./timepicker/TimePicker.svelte";
+export { default as Tooltip } from "./tooltip/Tooltip.svelte";
+export * from "./layout/utils.js";