craft-library 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sara Lobo
+
+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,79 @@
-# Temporary Holding Version
+# Craft Library
 
-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.
+Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart and a magnetic icon. Each one is the exact piece from the library, with its own CSS and motion, no dependencies, for React 18+ or plain HTML.
+
+```bash
+npm install craft-library
+```
+
+## Liquid glass nav bar
+
+A 291×60 liquid glass bar for a dark app, the Figma glass layer by layer. The white capsule stretches as it travels to the chosen item, the neighbours step aside and each icon has its own gesture.
+
+```jsx
+import { GlassNav } from 'craft-library';
+
+const [tab, setTab] = useState(0);
+<GlassNav active={tab} onSelect={setTab} />
+```
+
+| Prop | | |
+|---|---|---|
+| `active` | `0–4` | The chosen item: Home, Search, Ask AI, Messages, Settings. Changing it moves the capsule there. Default `2`. |
+| `onSelect` | `(index) => void` | Every choice, by tap, drag or arrow keys. |
+| `labels` | `string[5]` | The five accessible names, in order. |
+| `label` | `string` | The bar's own name. Default `"Main navigation"`. |
+
+The glass blends with what is behind it, so put the bar on a solid background and keep `transform`, `opacity`, `filter` and `isolation` off the bar and its wrapper.
+
+## Bursting heart
+
+A 40px round like button, black at 60%, made to sit over photos and mid-tone backgrounds. Liking: the heart vanishes, a pink disc grows into a lilac ring, 14 dots and 2 or 3 small hearts burst out, and the heart springs back filled. Unliking only takes the colour away.
+
+```jsx
+import { LikeButton } from 'craft-library';
+
+<LikeButton onChange={(liked) => saveLike(liked)} />
+```
+
+| Prop | | |
+|---|---|---|
+| `defaultLiked` | `boolean` | Starts liked, with no animation. |
+| `onChange` | `(liked) => void` | After every tap. |
+| `label` | `string` | The accessible name. Default `"Like"`. |
+
+## Magnetic icon
+
+A round search button with a brushed-metal rim, for dark backgrounds. Near the cursor the rim acts like metal near a strong magnet: the disc is drawn toward the pointer, the rim creases and trembles, its tip cracks into shards and small voxels fly off to the pointer.
+
+```jsx
+import { MagneticIcon } from 'craft-library';
+
+<MagneticIcon onClick={openSearch} />
+```
+
+| Prop | | |
+|---|---|---|
+| `size` | `number \| string` | px or any CSS length; the whole effect scales with it. Default `40`. |
+| `label` | `string` | The accessible name. Default `"Search"`. |
+| `onClick` | `(event) => void` | |
+
+## Plain HTML
+
+One script registers three tags. Same pieces, same props as attributes.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/craft-library@0.1/dist/craft.js"></script>
+
+<glass-nav active="0"></glass-nav>        <!-- "select" event: e.detail.index -->
+<like-button></like-button>               <!-- "change" event: e.detail.liked -->
+<magnetic-icon size="40"></magnetic-icon>
+```
+
+With a bundler and no React: `import 'craft-library/elements'`.
+
+## Motion and access
+
+Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides and the magnet stays still.
+
+MIT · [Craft Library](https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR)

package/dist/cdn.js

@@ -0,0 +1,3 @@
+// the one-file build for a <script> tag: registers the three tags and exposes the mount functions
+import { mountLike, mountMagnet, mountGlassNav } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };