plasma-svelte 0.0.1

package/dist/drawer/Drawer.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type DrawerPlacement = "left" | "right" | "top" | "bottom";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    inline?: boolean;
+    placement?: DrawerPlacement;
+    title?: string;
+    subtitle?: string;
+    width?: string;
+    height?: string;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+  }
+
+  let {
+    open = $bindable(false),
+    inline = false,
+    placement = "right",
+    title = "",
+    subtitle = "",
+    width = "360px",
+    height = "320px",
+    closeOnEsc = true,
+    closeOnBackdrop = true,
+    header,
+    footer,
+    children,
+    onclose,
+    class: customClass = "",
+    style = "",
+    ...restProps
+  }: Props = $props();
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (!inline && closeOnBackdrop && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (open && !inline && closeOnEsc && e.key === "Escape") {
+      e.stopPropagation();
+      close();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open || inline}
+  <div
+    class="plasma-drawer-backdrop"
+    class:plasma-drawer-backdrop--inline={inline}
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      role="dialog"
+      aria-modal={!inline}
+      aria-labelledby={title ? "plasma-drawer-title" : undefined}
+      class="plasma-drawer plasma-drawer--{placement} {customClass}"
+      class:plasma-drawer--inline={inline}
+      style="{placement === 'left' || placement === 'right' ? `width: ${width};` : `height: ${height};`} {style}"
+      {...restProps}
+    >
+      <!-- Header -->
+      <div class="plasma-drawer-header">
+        {#if header}
+          {@render header()}
+        {:else}
+          <div class="plasma-drawer-titles">
+            {#if title}
+              <h2 id="plasma-drawer-title" class="plasma-drawer-title">{title}</h2>
+            {/if}
+            {#if subtitle}
+              <span class="plasma-drawer-subtitle">{subtitle}</span>
+            {/if}
+          </div>
+        {/if}
+
+        {#if !inline}
+          <button
+            type="button"
+            class="plasma-drawer-close-btn"
+            onclick={close}
+            aria-label="Close drawer"
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 16 16"
+              width="12"
+              height="12"
+              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>
+        {/if}
+      </div>
+
+      <!-- Body -->
+      {#if children}
+        <div class="plasma-drawer-body">
+          {@render children()}
+        </div>
+      {/if}
+
+      <!-- Footer -->
+      {#if footer}
+        <div class="plasma-drawer-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* --------------------------------------------------------------------------
+     Backdrop Overlay
+     -------------------------------------------------------------------------- */
+  .plasma-drawer-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9998;
+    background-color: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    animation: plasma-drawer-fade var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-drawer-backdrop--inline {
+    position: relative;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    z-index: auto;
+    width: 100%;
+    min-height: 100%;
+    background-color: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    animation: none;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* --------------------------------------------------------------------------
+     Drawer Sheet Panel (Kirigami.OverlaySheet)
+     -------------------------------------------------------------------------- */
+  .plasma-drawer {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--plasma-color-surface);
+    color: var(--plasma-color-text);
+    font-family: var(--plasma-font-sans);
+    box-shadow: var(--plasma-shadow-lg);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .plasma-drawer--inline {
+    position: relative;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    z-index: auto;
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-lg);
+    max-height: 480px;
+    animation: none !important;
+  }
+
+  /* Placements */
+  .plasma-drawer--right:not(.plasma-drawer--inline) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-left: 1px solid var(--plasma-color-border);
+    animation: plasma-slide-left var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-drawer--left:not(.plasma-drawer--inline) {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    border-right: 1px solid var(--plasma-color-border);
+    animation: plasma-slide-right var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-drawer--bottom:not(.plasma-drawer--inline) {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-top: 1px solid var(--plasma-color-border);
+    border-top-left-radius: var(--plasma-radius-xl);
+    border-top-right-radius: var(--plasma-radius-xl);
+    animation: plasma-slide-up var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-drawer--top:not(.plasma-drawer--inline) {
+    top: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid var(--plasma-color-border);
+    border-bottom-left-radius: var(--plasma-radius-xl);
+    border-bottom-right-radius: var(--plasma-radius-xl);
+    animation: plasma-slide-down var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  /* --------------------------------------------------------------------------
+     Header, Body, Footer
+     -------------------------------------------------------------------------- */
+  .plasma-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--plasma-space-md) var(--plasma-space-lg);
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface);
+    flex-shrink: 0;
+  }
+
+  .plasma-drawer-titles {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .plasma-drawer-title {
+    margin: 0;
+    font-size: var(--plasma-font-size-md);
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-drawer-subtitle {
+    font-size: 11px;
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-drawer-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--plasma-radius-full);
+    border: none;
+    background: transparent;
+    color: var(--plasma-color-text-muted);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-drawer-close-btn:hover {
+    color: #ffffff;
+    background-color: var(--plasma-color-negative);
+  }
+
+  .plasma-drawer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--plasma-space-lg);
+    font-size: var(--plasma-font-size-base);
+    line-height: var(--plasma-line-height-base);
+    scrollbar-width: thin;
+    scrollbar-color: var(--plasma-color-border) transparent;
+  }
+
+  .plasma-drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--plasma-space-sm);
+    padding: var(--plasma-space-md) var(--plasma-space-lg);
+    border-top: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface-sunken);
+    flex-shrink: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+     Slide Animations
+     -------------------------------------------------------------------------- */
+  @keyframes plasma-drawer-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes plasma-slide-left {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes plasma-slide-right {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes plasma-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes plasma-slide-down {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+</style>

package/dist/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type DrawerPlacement = "left" | "right" | "top" | "bottom";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    inline?: boolean;
+    placement?: DrawerPlacement;
+    title?: string;
+    subtitle?: string;
+    width?: string;
+    height?: string;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/dropzone/DropZone.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onerror"> {
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    title?: string;
+    subtitle?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    onfiles?: (files: File[]) => void;
+    onerror?: (message: string) => void;
+  }
+
+  let {
+    accept = "*",
+    multiple = false,
+    disabled = false,
+    loading = false,
+    title = "Drop files here, or browse",
+    subtitle = "Supports file uploads",
+    icon,
+    children,
+    onfiles,
+    onerror,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  let isDragOver = $state(false);
+  let fileInput = $state<HTMLInputElement | null>(null);
+
+  function isAccepted(file: File): boolean {
+    if (!accept || accept === "*") return true;
+    const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+
+    return acceptedTypes.some((pattern) => {
+      if (pattern.startsWith(".")) {
+        return fileName.endsWith(pattern);
+      }
+      if (pattern.endsWith("/*")) {
+        const baseType = pattern.replace("/*", "");
+        return fileType.startsWith(baseType);
+      }
+      return fileType === pattern;
+    });
+  }
+
+  function handleFiles(fileList: FileList | null) {
+    if (!fileList || fileList.length === 0 || disabled || loading) return;
+
+    const filesArray = Array.from(fileList);
+    const validFiles: File[] = [];
+    const invalidFiles: File[] = [];
+
+    for (const f of filesArray) {
+      if (isAccepted(f)) {
+        validFiles.push(f);
+      } else {
+        invalidFiles.push(f);
+      }
+    }
+
+    if (invalidFiles.length > 0) {
+      const msg = `Unsupported file type: ${invalidFiles.map((f) => f.name).join(", ")}. Accepted: ${accept}`;
+      onerror?.(msg);
+    }
+
+    if (validFiles.length > 0) {
+      onfiles?.(multiple ? validFiles : [validFiles[0]]);
+    }
+
+    if (fileInput) {
+      fileInput.value = "";
+    }
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (disabled || loading) return;
+    isDragOver = true;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = false;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = false;
+    if (disabled || loading) return;
+    if (e.dataTransfer?.files) {
+      handleFiles(e.dataTransfer.files);
+    }
+  }
+
+  function handleClick() {
+    if (!disabled && !loading) {
+      fileInput?.click();
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if ((e.key === "Enter" || e.key === " ") && !disabled && !loading) {
+      e.preventDefault();
+      fileInput?.click();
+    }
+  }
+</script>
+
+<div
+  role="button"
+  tabindex={disabled || loading ? -1 : 0}
+  class="plasma-dropzone {customClass}"
+  class:plasma-dropzone--dragover={isDragOver}
+  class:plasma-dropzone--disabled={disabled}
+  class:plasma-dropzone--loading={loading}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  {...restProps}
+>
+  <input
+    bind:this={fileInput}
+    type="file"
+    {accept}
+    {multiple}
+    {disabled}
+    onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+    class="plasma-dropzone-input"
+    tabindex="-1"
+  />
+
+  {#if loading}
+    <div class="plasma-dropzone-loading">
+      <span class="plasma-dropzone-spinner"></span>
+      <span class="plasma-dropzone-title">Uploading...</span>
+    </div>
+  {:else if children}
+    {@render children()}
+  {:else}
+    <div class="plasma-dropzone-icon">
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          width="40"
+          height="40"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+      {/if}
+    </div>
+
+    <div class="plasma-dropzone-text">
+      <span class="plasma-dropzone-title">{title}</span>
+      {#if subtitle}
+        <span class="plasma-dropzone-subtitle">{subtitle}</span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .plasma-dropzone {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--plasma-space-xl) var(--plasma-space-lg);
+    border: 2px dashed var(--plasma-color-border);
+    border-radius: var(--plasma-radius-lg);
+    background-color: var(--plasma-color-surface-sunken);
+    color: var(--plasma-color-text);
+    font-family: var(--plasma-font-sans);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    transition: var(--plasma-transition-fast);
+    width: 100%;
+    min-height: 160px;
+    gap: var(--plasma-space-sm);
+  }
+
+  .plasma-dropzone:hover:not(.plasma-dropzone--disabled):not(.plasma-dropzone--loading) {
+    border-color: var(--plasma-color-highlight);
+    background-color: var(--plasma-color-highlight-soft);
+  }
+
+  .plasma-dropzone--dragover {
+    border-color: var(--plasma-color-highlight) !important;
+    background-color: var(--plasma-color-highlight-soft) !important;
+    transform: scale(1.008);
+  }
+
+  .plasma-dropzone--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .plasma-dropzone--loading {
+    cursor: wait;
+  }
+
+  .plasma-dropzone:focus-visible {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 2px;
+  }
+
+  .plasma-dropzone-input {
+    display: none;
+  }
+
+  .plasma-dropzone-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--plasma-color-highlight);
+    transition: transform var(--plasma-transition-fast);
+  }
+
+  .plasma-dropzone:hover:not(.plasma-dropzone--disabled) .plasma-dropzone-icon {
+    transform: translateY(-2px);
+  }
+
+  .plasma-dropzone-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .plasma-dropzone-title {
+    font-weight: var(--plasma-font-weight-bold);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-dropzone-subtitle {
+    font-size: var(--plasma-font-size-xs);
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-dropzone-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+  }
+
+  .plasma-dropzone-spinner {
+    width: 28px;
+    height: 28px;
+    border: 3px solid var(--plasma-color-border-subtle);
+    border-top-color: var(--plasma-color-highlight);
+    border-radius: var(--plasma-radius-full);
+    animation: plasma-spin 0.8s linear infinite;
+  }
+
+  @keyframes plasma-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+</style>

package/dist/dropzone/DropZone.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onerror"> {
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    title?: string;
+    subtitle?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    onfiles?: (files: File[]) => void;
+    onerror?: (message: string) => void;
+}
+declare const DropZone: import("svelte").Component<Props, {}, "">;
+type DropZone = ReturnType<typeof DropZone>;
+export default DropZone;