phoenix_duskmoon 9.0.0-rc.3 → 9.0.0

package/README.md

@@ -2,9 +2,9 @@
 
 [![release](https://github.com/duskmoon-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml/badge.svg)](https://github.com/duskmoon-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml)
 
-Provides Duskmoon UI for Phoenix project.
+Duskmoon UI component library for Phoenix LiveView applications.
 
-**v9**: Uses `@duskmoon-dev/core` CSS design system and HTML Custom Elements (`duskmoon-elements`).
+**v9**: Uses `@duskmoon-dev/core` CSS design system, HTML Custom Elements (`@duskmoon-dev/elements`), and Art Custom Elements (`@duskmoon-dev/art-elements`).
 
 Requires `tailwindcss >= 4.0`
 
@@ -13,41 +13,138 @@ See the [docs](https://hexdocs.pm/phoenix_duskmoon/) for more information.
 
 ## Install
 
-Add deps in `mix.exs`
+Add to `mix.exs`:
+
 ```elixir
-    {:phoenix_duskmoon, "~> 9.0"},
+{:phoenix_duskmoon, "~> 9.0"},
 ```
 
 Install frontend packages:
+
 ```bash
 bun add @duskmoon-dev/core @duskmoon-dev/elements
 ```
 
-Include in phoenix view helpers
+Optionally, add CSS Art and Art Custom Elements support:
+
+```bash
+bun add @duskmoon-dev/css-art @duskmoon-dev/art-elements
+```
+
+### View Helpers
+
+Add to your Phoenix view helpers (e.g. `lib/my_app_web.ex`):
 
 ```elixir
 defp html_helpers do
   quote do
-    # import all duskmoon ui component
+    # Standard UI components (buttons, cards, forms, navigation, etc.)
     use PhoenixDuskmoon.Component
-    # import all duskmoon ui fun component
-    use PhoenixDuskmoon.Fun
+    # CSS Art decorative components (snow, plasma ball, eclipse, etc.)
+    use PhoenixDuskmoon.CssArt
   end
 end
 ```
 
-Import `css`
+### CSS Setup
 
-```css
-@source "../js/**/*.js";
-@source '../../lib/**/*.exs';
-@source '../../lib/**/*.ex';
+In your CSS entry file (e.g. `assets/css/app.css`):
 
+```css
 @import "tailwindcss";
-@import "@duskmoon-dev/core";
+@plugin "@duskmoon-dev/core/plugin";
 @import "phoenix_duskmoon/components";
 ```
 
+### JavaScript Setup
+
+Register the custom elements in `assets/js/app.js`:
+
+```javascript
+import "@duskmoon-dev/elements/register";
+// Optionally, register art custom elements
+import "@duskmoon-dev/art-elements/register";
+```
+
+### Hooks Setup
+
+Some components require LiveView hooks. Add them when creating your `LiveSocket`:
+
+```javascript
+import {LiveSocket} from "phoenix_live_view"
+import * as DuskmoonHooks from "phoenix_duskmoon/hooks"
+
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: {_csrf_token: csrfToken},
+  hooks: DuskmoonHooks
+})
+```
+
+Components that require hooks:
+- `<.dm_theme_switcher>` — theme switching with localStorage
+- `<.dmf_spotlight>` — keyboard shortcut handling (Cmd/Ctrl+K)
+- `<.dm_page_header>` — scroll-based intersection observer
+
+
+## Usage
+
+### Buttons
+
+```heex
+<.dm_btn variant="primary">Click me</.dm_btn>
+<.dm_btn variant="secondary" loading={@loading}>Loading</.dm_btn>
+<.dm_btn variant="error" shape="circle">×</.dm_btn>
+```
+
+### Cards
+
+```heex
+<.dm_card class="p-6">
+  <:title><h3>Title</h3></:title>
+  <p>Content here</p>
+  <:footer><.dm_btn>Action</.dm_btn></:footer>
+</.dm_card>
+```
+
+### Icons
+
+```heex
+<.dm_mdi name="home" />
+<.dm_bsi name="house" />
+```
+
+### Forms
+
+```heex
+<.dm_form for={@form} phx-submit="save">
+  <.dmf_input field={@form[:email]} label="Email" />
+  <.dm_btn variant="primary" type="submit">Save</.dm_btn>
+</.dm_form>
+```
+
+### Common Attributes
+
+| Attribute | Values |
+|-----------|--------|
+| `variant` | `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `error`, `ghost`, `link`, `outline` |
+| `size`    | `xs`, `sm`, `md`, `lg` |
+| `shape`   | `square`, `circle` |
+| `loading` | boolean |
+| `disabled`| boolean |
+| `class`   | additional CSS classes |
+
+
+## Available Components
+
+- **Action**: buttons, dropdowns, links, menus, toggles
+- **Data Display**: accordion, avatar, badge, card, chip, collapse, flash, list, markdown, pagination, popover, progress, skeleton, stat, table, timeline, tooltip
+- **Data Entry**: autocomplete, cascader, checkbox, compact input, file upload, form, input, multi-select, OTP input, PIN input, radio, rating, segment control, select, slider, switch, textarea, time input, tree select
+- **Feedback**: dialog, loading, snackbar, toast
+- **Navigation**: actionbar, appbar, bottom nav, breadcrumb, left menu, navbar, nested menu, page footer, page header, stepper, steps, tabs
+- **Layout**: bottom sheet, divider, drawer, theme switcher
+- **CSS Art**: button noise, eclipse, plasma ball, signature, snow, spotlight search
+
+
 ## Live Storybook
 
 [Live Storybook](https://duskmoon-storybook.gsmlg.dev)

package/assets/css/element-theme-bridge.css

@@ -13,6 +13,18 @@
 
 el-dm-accordion,
 el-dm-alert,
+el-dm-art-atom,
+el-dm-art-cat-stargazer,
+el-dm-art-circular-gallery,
+el-dm-art-color-spin,
+el-dm-art-eclipse,
+el-dm-art-flower-animation,
+el-dm-art-moon,
+el-dm-art-mountain,
+el-dm-art-plasma-ball,
+el-dm-art-snow,
+el-dm-art-sun,
+el-dm-art-synthwave-starfield,
 el-dm-autocomplete,
 el-dm-badge,
 el-dm-bottom-navigation,

package/assets/css/phoenix_duskmoon.css

@@ -11,10 +11,17 @@
 @import "@duskmoon-dev/core/components";
 @import "./element-theme-bridge.css";
 
-/* CSS Art — decorative/animated visual effects */
-@import "./css_art/button-noise.css";
-@import "./css_art/eclipse.css";
-@import "./css_art/plasma-ball.css";
-@import "./css_art/signature.css";
-@import "./css_art/snow.css";
-@import "./css_art/spotlight-search.css";
+/* CSS Art — decorative/animated visual effects from @duskmoon-dev/css-art */
+@import "@duskmoon-dev/css-art/dist/art/atom.css";
+@import "@duskmoon-dev/css-art/dist/art/cat-stargazer.css";
+@import "@duskmoon-dev/css-art/dist/art/circular-gallery.css";
+@import "@duskmoon-dev/css-art/dist/art/color-spin.css";
+@import "@duskmoon-dev/css-art/dist/art/eclipse.css";
+@import "@duskmoon-dev/css-art/dist/art/flower-animation.css";
+@import "@duskmoon-dev/css-art/dist/art/gemini-input.css";
+@import "@duskmoon-dev/css-art/dist/art/moon.css";
+@import "@duskmoon-dev/css-art/dist/art/mountain.css";
+@import "@duskmoon-dev/css-art/dist/art/plasma-ball.css";
+@import "@duskmoon-dev/css-art/dist/art/snow.css";
+@import "@duskmoon-dev/css-art/dist/art/sun.css";
+@import "@duskmoon-dev/css-art/dist/art/synthwave-starfield.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0",
   "type": "module",
   "exports": {
     ".": "./priv/static/phoenix_duskmoon.js",
@@ -30,7 +30,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@duskmoon-dev/art-elements": ">=0.9.0",
     "@duskmoon-dev/core": ">=1.11.0",
+    "@duskmoon-dev/css-art": ">=1.12.0",
     "@duskmoon-dev/elements": ">=0.5.0"
   },
   "devDependencies": {