Feature/solid svelte wrappers

README.md

@@ -6,6 +6,8 @@
   <img src="https://img.shields.io/bundlephobia/minzip/slot-text?color=8b5cf6&label=size" alt="bundle size">
   <img src="https://img.shields.io/badge/react-✓-61dafb" alt="react">
   <img src="https://img.shields.io/badge/vue-✓-42b883" alt="vue">
+  <img src="https://img.shields.io/badge/solid-✓-2c4f7c" alt="solid">
+  <img src="https://img.shields.io/badge/svelte-✓-ff3e00" alt="svelte">
   <img src="https://img.shields.io/badge/typescript-✓-3178c6" alt="typescript">
 </p>
 
@@ -85,6 +87,35 @@ import { SlotText } from "slot-text/vue";
 </template>
 ```
 
+## 🔷 Solid
+
+```tsx
+import "slot-text/style.css";
+import { createSignal } from "solid-js";
+import { slotText } from "slot-text/solid";
+
+const [label, setLabel] = createSignal("Copy");
+
+<button aria-label={label()} onClick={() => setLabel("Copied")}>
+  <span use:slotText={{ text: label(), options: { direction: "up" } }} />
+</button>
+```
+
+## 🧡 Svelte
+
+```svelte
+<script lang="ts">
+  import "slot-text/style.css";
+  import { slotText } from "slot-text/svelte";
+
+  let label = "Copy";
+</script>
+
+<button aria-label={label} on:click={() => label = "Copied"}>
+  <span use:slotText={{ text: label, options: { direction: "up" } }}></span>
+</button>
+```
+
 ## ⚙️ Options
 
 | Option | Default | Description |
@@ -132,6 +163,7 @@ essentially any font you'd use for those.
 ## 📝 Notes
 
 - Browser-only DOM utility, zero runtime dependencies.
-- React and Vue are optional peer dependencies — plain JS users don't need them.
+- React, Vue, Solid, and Svelte are optional peer dependencies — plain JS users
+  don't need them.
 - Import the CSS once before using the animation.
 - Low-level helpers also exported: `buildSlotText`, `animateSlotText`, `chromatic`.

examples/env.d.ts

@@ -0,0 +1 @@
+declare module "slot-text/style.css";

examples/solid.tsx

@@ -0,0 +1,30 @@
+import { createSignal } from "solid-js";
+import "slot-text/style.css";
+import { chromatic } from "slot-text";
+import { slotText } from "slot-text/solid";
+
+void slotText;
+
+export function CopyButton() {
+  const [copied, setCopied] = createSignal(false);
+
+  function copy() {
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <button type="button" aria-label={copied() ? "Copied" : "Copy"} onClick={copy}>
+      <span
+        use:slotText={{
+          text: copied() ? "Copied" : "Copy",
+          options: {
+            direction: copied() ? "up" : "down",
+            skipUnchanged: false,
+            color: copied() ? chromatic({ from: 190 }) : undefined,
+          },
+        }}
+      />
+    </button>
+  );
+}

examples/svelte.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import "slot-text/style.css";
+  import { chromatic } from "slot-text";
+  import { slotText } from "slot-text/svelte";
+
+  let copied = false;
+
+  function copy() {
+    copied = true;
+    window.setTimeout(() => {
+      copied = false;
+    }, 1400);
+  }
+</script>
+
+<button type="button" aria-label={copied ? "Copied" : "Copy"} on:click={copy}>
+  <span
+    use:slotText={{
+      text: copied ? "Copied" : "Copy",
+      options: {
+        direction: copied ? "up" : "down",
+        skipUnchanged: false,
+        color: copied ? chromatic({ from: 190 }) : undefined,
+      },
+    }}
+  ></span>
+</button>

examples/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "paths": {
+      "slot-text": ["../src/index.ts"],
+      "slot-text/solid": ["../src/solid.ts"],
+      "slot-text/svelte": ["../src/svelte.ts"]
+    }
+  },
+  "include": ["env.d.ts", "solid.tsx", "*.svelte", "../src/**/*.ts"]
+}