@sentropic/design-system-svelte 0.7.0 → 0.9.0

package/dist/FileUploader.svelte

@@ -11,6 +11,14 @@
 
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
+  import {
+    Upload,
+    File as FileIcon,
+    LoaderCircle,
+    CircleCheck,
+    CircleAlert,
+    X
+  } from "@lucide/svelte";
 
   type FileUploaderProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
     label?: string;
@@ -22,6 +30,7 @@
     maxSizeBytes?: number;
     disabled?: boolean;
     files?: File[];
+    items?: FileUploadItem[];
     onfiles?: (files: File[]) => void;
     triggerLabel?: string;
     dropzoneLabel?: string;
@@ -41,6 +50,7 @@
     maxSizeBytes,
     disabled = false,
     files = $bindable([]),
+    items,
     onfiles,
     triggerLabel,
     dropzoneLabel = "Drag and drop files here",
@@ -179,6 +189,9 @@
       onchange={onChange}
     />
     <div class="st-fileUploader__content">
+      <span class="st-fileUploader__affordance" aria-hidden="true">
+        <Upload size={18} strokeWidth={2} aria-hidden="true" />
+      </span>
       <button
         type="button"
         class="st-fileUploader__trigger"
@@ -198,7 +211,50 @@
     <span class="st-field__help" id={helperId}>{helperText}</span>
   {/if}
 
-  {#if files.length > 0}
+  {#if items && items.length > 0}
+    <ul class="st-fileUploader__list">
+      {#each items as item, index (item.file.name + index)}
+        <li
+          class={[
+            "st-fileUploader__item",
+            `st-fileUploader__item--${item.status}`
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          <span class="st-fileUploader__itemIcon" aria-hidden="true">
+            {#if item.status === "uploading"}
+              <span class="st-fileUploader__spinner">
+                <LoaderCircle size={16} strokeWidth={2} aria-hidden="true" />
+              </span>
+            {:else if item.status === "complete"}
+              <CircleCheck size={16} strokeWidth={2} aria-hidden="true" />
+            {:else if item.status === "error"}
+              <CircleAlert size={16} strokeWidth={2} aria-hidden="true" />
+            {:else}
+              <FileIcon size={16} strokeWidth={2} aria-hidden="true" />
+            {/if}
+          </span>
+          <span class="st-fileUploader__itemMeta">
+            <span class="st-fileUploader__itemName">{item.file.name}</span>
+            <span class="st-fileUploader__itemSize">{formatSize(item.file.size)}</span>
+            {#if item.status === "error" && item.error}
+              <span class="st-fileUploader__itemError">{item.error}</span>
+            {/if}
+          </span>
+          <button
+            type="button"
+            class="st-fileUploader__remove"
+            aria-label={removeLabel(item.file.name)}
+            {disabled}
+            onclick={() => removeAt(index)}
+          >
+            <X size={16} strokeWidth={2} aria-hidden="true" />
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {:else if files.length > 0}
     <ul class="st-fileUploader__list">
       {#each files as file, index (file.name + index)}
         {@const itemError = fileError(file)}
@@ -210,6 +266,13 @@
             .filter(Boolean)
             .join(" ")}
         >
+          <span class="st-fileUploader__itemIcon" aria-hidden="true">
+            {#if itemError}
+              <CircleAlert size={16} strokeWidth={2} aria-hidden="true" />
+            {:else}
+              <FileIcon size={16} strokeWidth={2} aria-hidden="true" />
+            {/if}
+          </span>
           <span class="st-fileUploader__itemMeta">
             <span class="st-fileUploader__itemName">{file.name}</span>
             <span class="st-fileUploader__itemSize">{formatSize(file.size)}</span>
@@ -224,7 +287,7 @@
             {disabled}
             onclick={() => removeAt(index)}
           >
-            <span aria-hidden="true">×</span>
+            <X size={16} strokeWidth={2} aria-hidden="true" />
           </button>
         </li>
       {/each}
@@ -313,6 +376,18 @@
     gap: var(--st-spacing-3, 0.75rem);
   }
 
+  .st-fileUploader__affordance {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .st-fileUploader__dropzone--dragover .st-fileUploader__affordance {
+    color: var(--st-semantic-action-primary);
+  }
+
   .st-fileUploader__trigger {
     align-items: center;
     background: var(--st-semantic-action-primary);
@@ -373,6 +448,47 @@
     border-color: var(--st-semantic-feedback-error);
   }
 
+  .st-fileUploader__itemIcon {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .st-fileUploader__item--uploading .st-fileUploader__itemIcon {
+    color: var(--st-semantic-action-primary);
+  }
+
+  .st-fileUploader__item--complete .st-fileUploader__itemIcon {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-fileUploader__item--error .st-fileUploader__itemIcon {
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-fileUploader__spinner {
+    align-items: center;
+    animation: st-fileUploader-spin 0.9s linear infinite;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  @keyframes st-fileUploader-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-fileUploader__spinner {
+      animation: none;
+    }
+  }
+
   .st-fileUploader__itemMeta {
     display: grid;
     gap: 0.125rem;
@@ -406,10 +522,9 @@
     display: inline-flex;
     flex: 0 0 auto;
     font: inherit;
-    font-size: 1.125rem;
     height: 1.75rem;
     justify-content: center;
-    line-height: 1;
+    line-height: 0;
     padding: 0;
     transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: 1.75rem;

package/dist/FileUploader.svelte.d.ts

@@ -16,6 +16,7 @@ type FileUploaderProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
     maxSizeBytes?: number;
     disabled?: boolean;
     files?: File[];
+    items?: FileUploadItem[];
     onfiles?: (files: File[]) => void;
     triggerLabel?: string;
     dropzoneLabel?: string;

package/dist/FileUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FileUploader.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoLJ,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FileUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FileUploader.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAWpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmOJ,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/IconButton.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  type IconButtonProps = Omit<HTMLButtonAttributes, "class" | "type" | "aria-label"> & {
+    "aria-label": string;
+    size?: "sm" | "md" | "lg";
+    variant?: "ghost" | "secondary" | "danger";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+  };
+
+  let {
+    "aria-label": ariaLabel,
+    size = "md",
+    variant = "ghost",
+    type = "button",
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: IconButtonProps = $props();
+
+  const classes = () =>
+    ["st-iconButton", `st-iconButton--${size}`, `st-iconButton--${variant}`, className]
+      .filter(Boolean)
+      .join(" ");
+</script>
+
+<button
+  {...rest}
+  class={classes()}
+  {type}
+  {disabled}
+  aria-label={ariaLabel}
+>
+  {@render children()}
+</button>
+
+<style>
+  .st-iconButton {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-component-iconButton-radius, 0.375rem);
+    color: var(--st-component-iconButton-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-iconButton--sm {
+    height: var(--st-component-iconButton-smSize, 2rem);
+    width: var(--st-component-iconButton-smSize, 2rem);
+  }
+
+  .st-iconButton--md {
+    height: var(--st-component-iconButton-mdSize, 2.25rem);
+    width: var(--st-component-iconButton-mdSize, 2.25rem);
+  }
+
+  .st-iconButton--lg {
+    height: var(--st-component-iconButton-lgSize, 2.5rem);
+    width: var(--st-component-iconButton-lgSize, 2.5rem);
+  }
+
+  .st-iconButton--secondary {
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border-color: var(--st-component-control-border, var(--st-semantic-border-subtle));
+  }
+
+  .st-iconButton--danger {
+    color: var(--st-semantic-feedback-danger, #b91c1c);
+  }
+
+  .st-iconButton:hover:not(:disabled) {
+    background: var(--st-component-iconButton-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-iconButton--secondary:hover:not(:disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-iconButton:focus-visible {
+    border-color: var(--st-component-iconButton-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-iconButton-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-iconButton:disabled {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+</style>

package/dist/IconButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type IconButtonProps = Omit<HTMLButtonAttributes, "class" | "type" | "aria-label"> & {
+    "aria-label": string;
+    size?: "sm" | "md" | "lg";
+    variant?: "ghost" | "secondary" | "danger";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;
+//# sourceMappingURL=IconButton.svelte.d.ts.map

package/dist/IconButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AA+BJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/InlineLoading.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
+  import { LoaderCircle, CircleCheck, CircleAlert } from "@lucide/svelte";
 
   type InlineLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
     label?: string;
@@ -23,20 +24,13 @@
 <div {...rest} class={classes()} role={role()} aria-live="polite">
   <span class="st-inlineLoading__icon" aria-hidden="true">
     {#if status === "active"}
-      <svg viewBox="0 0 16 16" width="16" height="16">
-        <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-opacity="0.2" />
-        <path d="M14 8a6 6 0 0 0-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-          <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="0.9s" repeatCount="indefinite" />
-        </path>
-      </svg>
+      <span class="st-inlineLoading__spinner">
+        <LoaderCircle size={16} strokeWidth={2} aria-hidden="true" />
+      </span>
     {:else if status === "success"}
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
-        <path d="m3 8 3.5 3.5L13 5" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
+      <CircleCheck size={16} strokeWidth={2} aria-hidden="true" />
     {:else if status === "error"}
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
-        <path d="M4 4l8 8M12 4l-8 8" stroke-linecap="round" />
-      </svg>
+      <CircleAlert size={16} strokeWidth={2} aria-hidden="true" />
     {/if}
   </span>
   {#if label}<span class="st-inlineLoading__label">{label}</span>{/if}
@@ -57,6 +51,14 @@
     justify-content: center;
   }
 
+  .st-inlineLoading__spinner {
+    align-items: center;
+    animation: st-inlineLoading-spin 0.9s linear infinite;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+  }
+
   .st-inlineLoading--active .st-inlineLoading__icon {
     color: var(--st-semantic-action-primary);
   }
@@ -73,9 +75,15 @@
     color: var(--st-semantic-text-muted);
   }
 
+  @keyframes st-inlineLoading-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .st-inlineLoading__icon svg path animateTransform {
-      display: none;
+    .st-inlineLoading__spinner {
+      animation: none;
     }
   }
 </style>

package/dist/InlineLoading.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4CJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsCJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}