phoenix_duskmoon 5.1.0 → 6.0.2

package/CHANGELOG.md

@@ -1,3 +1,123 @@
+## [6.0.2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.0.1...v6.0.2) (2025-02-05)
+
+
+### Bug Fixes
+
+* Fix Dockerfile and remove useless. ([f833766](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f833766350b2ee557c77a573b9db54630b95b655))
+
+## [6.0.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.0.0...v6.0.1) (2025-02-05)
+
+
+### Bug Fixes
+
+* Fix docs and ci. ([b98f34d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/b98f34dacfd6f79c58ef1a837678190cddf64225))
+
+# [6.0.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.1.0...v6.0.0) (2025-02-05)
+
+
+### Bug Fixes
+
+* Fix button [@id](https://github.com/id). ([e544f0c](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/e544f0cd5dfc1f340f2bf0877c0532b7391a55d3))
+
+
+### Features
+
+* Update Tailwind CSS to 4.0 ([#11](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/issues/11)) ([b2974a4](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/b2974a4915fd17df8784ef37dbeade1713ca89d3))
+
+
+### BREAKING CHANGES
+
+* * Update tailwindcss to 4.0 and daisyui to 5.0.
+* Remove legacy `use PhoenixDuskmoon`
+
+# [5.2.0-beta.5](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.2.0-beta.4...v5.2.0-beta.5) (2025-02-05)
+
+
+### Bug Fixes
+
+* Remove useless css. ([91d1682](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/91d16827299a23f13cc433e7aba742c3e02c1335))
+
+
+### Features
+
+* Add theme. ([2f46764](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/2f46764a13f2dd49bbe9681a482658ac9a97448a))
+
+# [5.2.0-beta.4](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.2.0-beta.3...v5.2.0-beta.4) (2025-02-05)
+
+
+### Bug Fixes
+
+* Fix docs. ([39d9fb3](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/39d9fb3d24f94b536c517ccf4c1429c7b4cb1c69))
+* Fix README.md. ([81ebcbf](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/81ebcbf5ef62e214def285516be132dc64001393))
+
+# [5.2.0-beta.3](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.2.0-beta.2...v5.2.0-beta.3) (2025-02-04)
+
+
+### Bug Fixes
+
+* Fix storybook name. ([20ef181](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/20ef181df1b9892f5e5886220e23ebed4de0388b))
+* Fix. ([a9bb7b4](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a9bb7b45482ee54c158bf06e046b76c68a77a807))
+* Fix. ([e16f8fd](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/e16f8fd8971be38143873bf901c167b6ac02d6b3))
+
+# [5.2.0-beta.2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.2.0-beta.1...v5.2.0-beta.2) (2025-02-04)
+
+
+### Bug Fixes
+
+* Fix. ([a36d8b4](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a36d8b44d205126774773b4135b65cb07baea9b5))
+
+# [5.2.0-beta.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.1.0...v5.2.0-beta.1) (2025-02-04)
+
+
+### Bug Fixes
+
+* Add fun spotlight. ([8fdd70e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8fdd70e259af9fa39bfd13f18b08a1a75cd8cb15))
+* Add fun spotlight. ([693f6dd](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/693f6dd1bbfd01c89cb18438d010efe98d75c027))
+* Fix atom and snow. ([5a6c85f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/5a6c85fcbdebf4d47b87b212fc017564026e5b1a))
+* Fix atom overflow. ([fc7753a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/fc7753a1ed5df69bbfb3773cb0ff6d8fa1964ecd))
+* Fix build. ([f80a79e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f80a79e5808625291570f73db3d5f55ef91e71fa))
+* Fix build. ([51547e2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/51547e2b68146381fb909da21b34ec203660cfea))
+* Fix button [@id](https://github.com/id). ([1ca0bbc](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/1ca0bbc21da7ce213997fc6daa66e483678ff0ed))
+* Fix button [@id](https://github.com/id). ([e544f0c](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/e544f0cd5dfc1f340f2bf0877c0532b7391a55d3))
+* Fix ci version. ([7f2005e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/7f2005e3c92061ddfe50e6081699ed4706f26a5e))
+* Fix ci. ([75c4bcd](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/75c4bcdb79697279f8e155d750051fdaa003ceee))
+* Fix ci. ([6085fcd](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/6085fcd1220bbba25322d4804fd59a065d8d4f3b))
+* Fix ci. ([bf15d5d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/bf15d5d66c72e62f3bb904adc72b4573704f4c2e))
+* Fix gettext. ([c9a1419](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/c9a1419c53224128abeddd987092595005995301))
+* Fix order. ([79d0b20](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/79d0b208b0535f271056692c5a5e2750ccbf59b0))
+* Fix pagination. ([492b810](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/492b810047db09e420b2e7fa80927e32b163b7b2))
+* Fix spotlight. ([71abaa3](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/71abaa3a7f75404462bb41007d299226ee94e2d0))
+* Fix. ([c7839d7](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/c7839d79533e2aa77a9265c09003637174c3d385))
+* Fix. ([ad83066](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/ad83066583e9513ab2550a8f5e9dc651b936a018))
+* Fix. ([cc3f899](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/cc3f899791ca20b7be501d3b1038094f950d85e7))
+* Fix. ([0617096](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/061709601de8ad750138ee755665135fd0c5ea34))
+* Fix. ([7940600](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/79406000c0b3ab4ce2a7b6b56eb2aaca3417fca6))
+* Fix. ([ab9fbd3](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/ab9fbd34162f8439f9030e576a3f7ec5659e4f86))
+* Fix. ([2f4cfe4](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/2f4cfe4cdc7942326eb752fda9b9dce6845882c6))
+* Fix. ([fc7cb0b](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/fc7cb0b49b7faff5e475cce15b52da0ec3ac5ef1))
+* Fix. ([6e8366c](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/6e8366c21b3b6562137b17827a20d13f82307b11))
+* Fix. ([7f0a6f0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/7f0a6f0812d3f3255539aa28379f8f79daf34315))
+* Fix. ([7edb06e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/7edb06ee7c386cd1e47dd5bfb9bf7a2fec1bd152))
+* Update bsi bootstrap icons. ([cb9354a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/cb9354ad20c4d04303291f07af7319b4d959c059))
+* Update mdi material design icons. ([598222a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/598222a45081989bb9106d6f63ef544819b21203))
+* Update new tailwind css. ([b9253df](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/b9253df07ccafdc87e05eb10dc91da21ba123866))
+* Update tailwind and daisyui. ([5129da5](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/5129da5963bda3fa0047940946a73b62f42a4760))
+* Use npm workspace. ([e5fa0a2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/e5fa0a2254cee3f6071ee5da86692d5968479474))
+
+
+### Features
+
+* add confirm slot to btn. ([c839278](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/c839278b8c61a5bd277dd340717efae65196931e))
+* Add dm_compact_input. ([821849a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/821849a5e5b2cd49e84d7526258e792609173d66))
+* Add fun element. ([db3a22b](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/db3a22bcd881af1e8176b4ed5cc89a5a994befa0))
+
+## [5.1.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.1.0...v5.1.1) (2025-01-25)
+
+
+### Bug Fixes
+
+* Fix button [@id](https://github.com/id). ([e544f0c](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/e544f0cd5dfc1f340f2bf0877c0532b7391a55d3))
+
 # [5.1.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v5.0.6...v5.1.0) (2025-01-21)
 
 

package/README.md

@@ -2,87 +2,50 @@
 
 [![release](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml/badge.svg)](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml)
 
-Collection of helpers to generate and manipulate Web Component.
+Provides Duskmoon UI for Phoenix project.
 
-Although this project was originally extracted from Phoenix,
-it does not depend on Phoenix and can be used with any Plug
-application (or even without Plug).
+Require `tailwindcss >= 4.0` and `daisyui >= 5.0`
 
 See the [docs](https://hexdocs.pm/phoenix_duskmoon/) for more information.
 
-About at [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
 
 ## Install
 
 Add deps in `mix.exs`
 ```elixir
-    {:phoenix_duskmoon, "~> 4.0"},
+    {:phoenix_duskmoon, "~> 6.0"},
 ```
 
 Include in phoenix view helpers
 
 ```elixir
- defp html_helpers do
-    quote do
-        # import all helper functions
-        use PhoenixDuskmoon
-
-        # or 
-        use PhoenixDuskmoon, :alias
-        ...
-    end
+defp html_helpers do
+  quote do
+    # import all duskmoon ui component
+    use PhoenixDuskmoon.Component
+    # import all duskmoon ui fun component
+    use PhoenixDuskmoon.Fun
+  end
 end
 ```
 
-Include `javascript`
-
-```javascript
-import 'phoenix_duskmoon';
-```
-
-Web Componet library is now external
-
-```bash
-npm install @gsmlg/lit
-```
-
 Import `css`
 
 ```css
-@import 'phoenix_duskmoon/priv/static/phoenix_duskmoon.css';
-```
-
-Use custom hook
+@config "../tailwind.config.js";
 
-```javascript
-import "phoenix_duskmoon";
-const WebComponentHook = window.__WebComponentHook__;
-const liveSocket = new LiveSocket("/live", Socket, {hooks: { WebComponentHook }});
-```
-
-Send custom events to live view:
-```html
-<Element darkmoon-send-sync-content="load_content" phx-hook="WebComponentHook" />
-<Element darkmoon-send-sync-content="load_content;loadAccepted" phx-hook="WebComponentHook" />
-```
-- In the first element, when element trigger customEvents `sync-content`, also use `pushEvent` send `load_content` to live view.
-- Second element are same as first, but will call `loadAccepted` on element when receive server send feedback.
-
-Receive live view event:
-```html
-<Element darkmoon-receive-update_content="updateContent" phx-hook="WebComponentHook" />
-<!-- equal  -->
-<Element darkmoon-receive="update_content;updateContent" phx-hook="WebComponentHook" />
-```
-- In this case, when live view fire `update_content` event, also trigger `updateContent` method on elmenet.
-- If value(`updateContent`) is empty, trigger a same event `update_content` on element.
-
-Import CSS
-
-```css
-import "phoenix_duskmoon/priv/static/phoenix_duskmoon.css"
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
+@import "phoenix_duskmoon/theme";
+@import "phoenix_duskmoon/components";
 ```
 
 ## Live Storybook
 
 [Live Storybook](https://duskmoon-storybook.gsmlg.dev)
+
+![](screenshots/1.png)
+![](screenshots/2.png)
+![](screenshots/3.png)
+![](screenshots/4.png)

package/assets/css/components/atom.css

@@ -0,0 +1,168 @@
+
+@layer components {
+  .atom {
+    --atom-size: 360px;
+    --atom-color: #00d8ff;
+    --nucleus-size: calc(var(--atom-size) / 5);
+    --electron-color: #99f8ff;
+    --electron-size : calc(var(--atom-size) / 25);
+    --electron-orbit-size : calc(var(--atom-size) / 2.5);
+    --electron-speed : 1.2s;
+    --electron-speed-alpha : 1s;
+    --electron-speed-omega : .8s;
+    position: relative;
+    width: var(--atom-size);
+    height: var(--atom-size);
+    animation: 8s atom infinite cubic-bezier(1, .25, 0, .75);
+    box-sizing: border-box;
+    overflow: hidden;
+
+    *, *:before, *::after {
+      box-sizing: border-box;
+    }
+  }
+  @keyframes atom {
+    0% {    transform: rotate(0deg) scale(1); }
+    12.5% { transform: rotate(-45deg) scale(.9); }
+    25% {   transform: rotate(-90deg) scale(1); }
+    37.5% { transform: rotate(-135deg) scale(.9); }
+    50% {   transform: rotate(-180deg) scale(1); }
+    62.5% { transform: rotate(-225deg) scale(.9); }
+    75% {   transform: rotate(-270deg) scale(1); }
+    87.5% { transform: rotate(-315deg) scale(.9); }
+    100% {  transform: rotate(-360deg) scale(1); }
+  }
+
+  .atom::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--nucleus-size);
+    height: var(--nucleus-size);
+    margin-top: calc(var(--nucleus-size) / -2);
+    margin-left: calc(var(--nucleus-size) / -2);
+    background: color-mix(in srgb, var(--atom-color) 70%, transparent);
+    border-radius: 100%;
+    box-shadow: 0 0 3px 0 color-mix(in srgb, var(--atom-color) 70%, transparent);
+    animation: 2s nucleus infinite cubic-bezier(.65, 0, .35, 1);
+  }
+  @keyframes nucleus {
+    0% { transform: scale(1); }
+    25% { transform: scale(.9); }
+    50% { transform: scale(1); }
+    75% { transform: scale(.85); }
+    100% { transform: scale(1); }
+  }
+
+  .atom > [class^="electron"] {
+    border-top: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 1px;
+    border-right: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 2px;
+    border-bottom: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 4px;
+    border-left: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 2px;
+    border-radius: 100%;
+    width: 100%;
+    height: var(--electron-orbit-size);
+    position: absolute;
+    top: 50%;
+    margin-top: calc(var(--electron-orbit-size) / -2);
+    animation: var(--electron-speed) electron-orbit infinite linear;
+  }
+  .atom > .electron-alpha {
+    transform: rotate(60deg);
+    animation: var(--electron-speed-alpha) electron-orbit infinite linear;
+  }
+  .atom > .electron-omega {
+    transform: rotate(-60deg);
+    animation: var(--electron-speed-omega) electron-orbit infinite linear;
+  }
+  @keyframes electron-orbit {
+    0% {
+        border-top: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 1px;
+        border-right: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 2px;
+        border-bottom: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 4px;
+        border-left: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 2px;
+    }
+    25% {
+        border-top: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 1px;
+        border-right: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 2px;
+        border-bottom: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 4px;
+        border-left: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 2px;
+    }
+    50% {
+        border-top: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 1px;
+        border-right: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 2px;
+        border-bottom: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 4px;
+        border-left: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 2px;
+    }
+    75% {
+        border-top: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 1px;
+        border-right: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 2px;
+        border-bottom: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 4px;
+        border-left: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 2px;
+    }
+    100% {
+        border-top: solid color-mix(in srgb, var(--atom-color) 50%, transparent) 1px;
+        border-right: solid color-mix(in srgb, var(--atom-color) 35%, transparent) 2px;
+        border-bottom: solid color-mix(in srgb, var(--atom-color) 20%, transparent) 4px;
+        border-left: solid color-mix(in srgb, var(--atom-color) 0%, transparent) 2px;
+    }
+  }
+
+  .atom [class^="electron"]::after {
+    content: '';
+    display: block;
+    width: var(--electron-size);
+    height: var(--electron-size);
+    background: var(--electron-color);
+    border-radius: 50%;
+    margin-top: calc(var(--electron-size) / -2);
+    position: absolute;
+    top: 50%;
+    left: calc(var(--electron-size) / -1);
+    transform: scale(1);
+    animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
+  }
+  .atom .electron-alpha::after { animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out; }
+  .atom .electron-omega::after { animation: calc(var(--electron-speed-omega) * 2) electron infinite ease-in-out; }
+  @keyframes electron {
+    0% {
+        left: calc(var(--electron-size) / -1);
+        transform: scale(1);
+    }
+    12.5% {
+        top: 100%;
+        transform: scale(1.5);
+    }
+    25% {
+        left: 100%;
+        transform: scale(1);
+    }
+    37.5% {
+        top: 0%;
+        transform: scale(.25);
+    }
+    50% {
+        left: calc(var(--electron-size) / -1);
+        transform: scale(1);
+    }
+    62.5% {
+        top: 100%;
+        transform: scale(1.5);
+    }
+    75% {
+        left: 100%;
+        transform: scale(1);
+    }
+    87.5% {
+        top: 0%;
+        transform: scale(.25);
+    }
+    100% {
+        left: calc(var(--electron-size) / -1);
+        transform: scale(1);
+    }
+  }
+
+}