@yusufceng1z/ding-svelte 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yusuf Cengiz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# @yusufceng1z/ding-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Toasts with real spring physics for Svelte 5. One toast that morphs in place. No stylesheet to import.
+
+## Install
+
+```bash
+npm i @yusufceng1z/ding-svelte
+```
+
+## Use
+
+Render the toaster once, then call `toast` from anywhere.
+
+```svelte
+<script>
+  import { Toaster, toast } from '@yusufceng1z/ding-svelte';
+</script>
+
+<Toaster position="top-center" theme="system" />
+<button onclick={() => toast.success('Saved')}>Save</button>
+```
+
+Options, actions, progress, sound and accessibility are covered in the [docs](https://ding.yusufcengiz.dev/docs.html).
+
+## Links
+
+- [Live demo and docs](https://ding.yusufcengiz.dev)
+- [Source on GitHub](https://github.com/YusufCeng1z/ding)
+
+## License
+
+[MIT](LICENSE)

package/dist/Toaster.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { toast, injectStyles, bindToast, onToastKey, ICONS, type Position, type Theme } from '@yusufceng1z/ding';
+
+  let { position, theme }: { position?: Position; theme?: Theme } = $props();
+
+  let state = $state(toast.getState());
+
+  $effect(() => {
+    injectStyles();
+    state = toast.getState();
+    return toast.subscribe(() => (state = toast.getState()));
+  });
+  $effect(() => toast.configure({ position, theme }));
+
+  function bind(node: HTMLElement, id: string) {
+    return { destroy: bindToast(node, id) };
+  }
+</script>
+
+<svelte:document onkeydown={onToastKey} />
+
+<div
+  class="tst-viewport"
+  role="region"
+  aria-label="Notifications"
+  data-position={state.position}
+  data-theme={state.theme}
+  onpointerenter={() => toast.pause()}
+  onpointerleave={() => toast.resume()}
+  onfocusin={(e) => (e.target as Element).matches(':focus-visible') && toast.pause()}
+  onfocusout={() => toast.resume()}
+>
+  <div class="tst-sr" role="status">{state.status}</div>
+  <div class="tst-sr" role="alert">{state.alert}</div>
+  {#each state.toasts as t, idx (t.id)}
+    {@const i = state.toasts.length - 1 - idx}
+    <div class="tst-slot" style:--tst-i={i} use:bind={t.id}>
+      <!-- Announced through the viewport's persistent live regions, not here. -->
+      <div
+        class="tst"
+        data-phase={t.phase}
+        data-type={t.type}
+        style:--tst-life="{t.duration}ms"
+      >
+        {#if (t.action || t.secondary) && t.duration > 0}{#key t.duration}<div class="tst-timer"></div>{/key}{/if}
+        {#if t.progress !== undefined}<div class="tst-progress" style:--pg={t.progress}></div>{/if}
+        <div class="tst-icon">
+          {#if t.image}
+            <img class="tst-media" src={t.image} alt="" />
+          {:else}
+            <div class="tst-badge">
+              <svg class="tst-svg" viewBox="0 0 24 24" aria-hidden="true">
+                {#each ICONS[t.type] as d (d)}
+                  <path {d} pathLength="1" />
+                {/each}
+              </svg>
+            </div>
+          {/if}
+        </div>
+        <div class="tst-body">
+          <div class="tst-copy">
+            <div class="tst-title">{t.title}{#if t.count > 1}<span class="tst-count">×{t.count}</span>{/if}{#if t.meta}<span class="tst-meta">{t.meta}</span>{/if}</div>
+            {#if t.description}<div class="tst-desc">{t.description}</div>{/if}
+          </div>
+          {#if t.secondary}
+            <button type="button" class="tst-action tst-secondary" tabindex={t.phase === 'open' ? 0 : -1} onclick={() => toast.act(t.id, 'secondary')}>{t.secondary.label}</button>
+          {/if}
+          {#if t.action}
+            <button
+              type="button"
+              class="tst-action"
+              tabindex={t.phase === 'open' ? 0 : -1}
+              onclick={() => {
+                toast.act(t.id);
+              }}
+            >
+              {t.action.label}
+            </button>
+          {/if}
+          {#if t.duration === 0 && t.type !== 'loading' && !t.secondary}
+            <button type="button" class="tst-close" aria-label="Dismiss notification" tabindex={t.phase === 'open' ? 0 : -1} onclick={() => toast.dismiss(t.id)}>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
+            </button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>

package/dist/Toaster.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Position, type Theme } from '@yusufceng1z/ding';
+type $$ComponentProps = {
+    position?: Position;
+    theme?: Theme;
+};
+declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { toast, type Position, type Theme } from '@yusufceng1z/ding';
+export { default as Toaster } from './Toaster.svelte';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { toast } from '@yusufceng1z/ding';
+export { default as Toaster } from './Toaster.svelte';

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@yusufceng1z/ding-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.2",
+  "type": "module",
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@yusufceng1z/ding": "0.0.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.7.8"
+  },
+  "description": "Svelte 5 renderer for Ding spring-physics toasts.",
+  "homepage": "https://ding.yusufcengiz.dev",
+  "bugs": {
+    "url": "https://github.com/YusufCeng1z/ding/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YusufCeng1z/ding.git",
+    "directory": "packages/svelte"
+  },
+  "keywords": [
+    "toast",
+    "notification",
+    "spring",
+    "animation",
+    "svelte"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT",
+  "author": "Yusuf Cengiz",
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  }
 }