phoenix_duskmoon 6.1.3 → 6.3.2

package/CHANGELOG.md

@@ -1,3 +1,198 @@
+## [6.3.2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.3.1...v6.3.2) (2025-05-29)
+
+
+### Bug Fixes
+
+* Remove tailwind.config.js, use directive instead. ([5726376](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/57263769b83c6698595ac6ce68f6968539d795c6))
+
+## [6.3.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.3.0...v6.3.1) (2025-05-29)
+
+
+### Bug Fixes
+
+* Fix. ([0b9f4aa](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/0b9f4aaaeb3b3163194140c1f67db53adae7b486))
+* Fix. ([6d109ef](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/6d109ef3cf06c3c282fbe03b5414b4a04aaba5a4))
+* Fix. ([88ba112](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/88ba1124c1930c0b0cc3191f6b737b26b4010619))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-08)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix neumorphic table. ([139b524](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/139b524f7147a346e3ef1e69943d873946dc5c19))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([f2a7f0e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f2a7f0ebdbe27eb32381dc54a45260d7cc432d46))
+* Fix. ([481f6d5](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/481f6d517438f5bb280c1368dbf2abde8060ee79))
+* Fix. ([765d62a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/765d62a98e4580cd303a5cec4785c902fb67c41f))
+* Fix. ([01f271d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/01f271dd9335cae55b6eb76046ac7089ccaa1616))
+* Fix. ([8549218](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8549218454639fa42f21a1897ec848c9332fc5fd))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-08)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix neumorphic table. ([139b524](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/139b524f7147a346e3ef1e69943d873946dc5c19))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([f2a7f0e](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f2a7f0ebdbe27eb32381dc54a45260d7cc432d46))
+* Fix. ([481f6d5](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/481f6d517438f5bb280c1368dbf2abde8060ee79))
+* Fix. ([765d62a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/765d62a98e4580cd303a5cec4785c902fb67c41f))
+* Fix. ([01f271d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/01f271dd9335cae55b6eb76046ac7089ccaa1616))
+* Fix. ([8549218](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8549218454639fa42f21a1897ec848c9332fc5fd))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-08)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix neumorphic table. ([139b524](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/139b524f7147a346e3ef1e69943d873946dc5c19))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([765d62a](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/765d62a98e4580cd303a5cec4785c902fb67c41f))
+* Fix. ([01f271d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/01f271dd9335cae55b6eb76046ac7089ccaa1616))
+* Fix. ([8549218](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8549218454639fa42f21a1897ec848c9332fc5fd))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix neumorphic table. ([139b524](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/139b524f7147a346e3ef1e69943d873946dc5c19))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([8549218](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8549218454639fa42f21a1897ec848c9332fc5fd))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix neumorphic table. ([139b524](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/139b524f7147a346e3ef1e69943d873946dc5c19))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* Fix neumorphic form. ([a02cfb2](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a02cfb2ecad7342779fcd13895693bcb74d45c0c))
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix tasks. ([719b3ea](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/719b3ead86f1bcaba7aabba147082d1b928fdc3e))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-06)
+
+
+### Bug Fixes
+
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+* Fix. ([9db4a9f](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/9db4a9fb074c8f900d861ff4b5b7fb86f904881b))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+# [6.3.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.3.0) (2025-03-06)
+
+
+### Bug Fixes
+
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+
+
+### Features
+
+* Add neumorphic design. ([8b1c697](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/8b1c697d1689560873a357a1b5bd512dcd153ac0))
+
+## [6.2.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.2.1) (2025-02-22)
+
+
+### Bug Fixes
+
+* Fix pagination. ([3920dcb](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/3920dcbdd50e38ae6026d045c107235988cfff6f))
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+
+## [6.2.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.2.0...v6.2.1) (2025-02-22)
+
+
+### Bug Fixes
+
+* Fix simple_app_bar. ([63108a1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/63108a1d86223be7f44e680d37ebfb4e5b2bca84))
+
+# [6.2.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.1.3...v6.2.0) (2025-02-12)
+
+
+### Features
+
+* Add dm_navbar. ([a2f525d](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/a2f525dafafc9f9b0b0262ea2ade213c7307d0a7))
+
 ## [6.1.3](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v6.1.2...v6.1.3) (2025-02-10)
 
 

package/assets/css/neumorphic/button.css

@@ -0,0 +1,270 @@
+@layer components {
+  .neumorphic-button {
+    @apply inline-flex shrink-0 cursor-pointer flex-nowrap
+      items-center justify-center gap-1.5 text-center
+      align-middle no-underline select-none;
+    padding-inline: var(--btn-p);
+    height: var(--size);
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-duration: 0.2s;
+    border-start-start-radius: var(--join-ss, var(--radius-field));
+    border-start-end-radius: var(--join-se, var(--radius-field));
+    border-end-start-radius: var(--join-es, var(--radius-field));
+    border-end-end-radius: var(--join-ee, var(--radius-field));
+
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    --btn-bg: var(--btn-color, var(--neumorphic-color));
+    --btn-fg: var(--neumorphic-text-color);
+    --btn-p: 1rem;
+    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
+    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
+      0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
+    --btn-noise: var(--fx-noise);
+    --btn-color: var(--neumorphic-color);
+    
+    color: var(--btn-fg);
+    background-color: var(--btn-bg);
+
+    @apply neumorphic-shadow-16 neumorphic-text-4;
+  
+    @media (hover: hover) {
+      &:hover {
+        --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
+        @apply neumorphic-shadow-12 neumorphic-text-inset-4;
+      }
+    }
+  
+    &.btn-active {
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+      isolation: isolate;
+      @apply neumorphic-shadow-inset-12;
+    }
+  
+    &:focus-visible {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+  
+    &:active:not(.btn-active) {
+      @apply neumorphic-shadow-inset-12;
+      translate: 0 0.5px;
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 5%);
+      --btn-border: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+    }
+  
+    &:is(:disabled, [disabled], .btn-disabled) {
+      &:not(.btn-link, .btn-ghost) {
+        @apply bg-base-content/10;
+        box-shadow: none;
+      }
+  
+      @apply pointer-events-none;
+      --btn-border: #0000;
+      --btn-noise: none;
+      --btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
+  
+      @media (hover: hover) {
+        &:hover {
+          @apply bg-neutral/20 pointer-events-none;
+          --btn-border: #0000;
+          --btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
+        }
+      }
+    }
+  
+    &:is(input[type="checkbox"], input[type="radio"]) {
+      @apply appearance-none;
+  
+      /* &:not(.btn-square, .btn-circle) {
+        @apply w-auto;
+      } */
+  
+      &::after {
+        content: attr(aria-label);
+      }
+  
+      &:checked {
+        outline-width: 2px;
+        outline-style: solid;
+        --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
+        --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+        isolation: isolate;
+      }
+    }
+  }
+  
+  .btn-primary {
+    --btn-color: var(--color-primary);
+    --btn-fg: var(--color-primary-content);
+  }
+  
+  .btn-secondary {
+    --btn-color: var(--color-secondary);
+    --btn-fg: var(--color-secondary-content);
+  }
+  
+  .btn-accent {
+    --btn-color: var(--color-accent);
+    --btn-fg: var(--color-accent-content);
+  }
+  
+  .btn-neutral {
+    --btn-color: var(--color-neutral);
+    --btn-fg: var(--color-neutral-content);
+  }
+  
+  .btn-info {
+    --btn-color: var(--color-info);
+    --btn-fg: var(--color-info-content);
+  }
+  
+  .btn-success {
+    --btn-color: var(--color-success);
+    --btn-fg: var(--color-success-content);
+  }
+  
+  .btn-warning {
+    --btn-color: var(--color-warning);
+    --btn-fg: var(--color-warning-content);
+  }
+  
+  .btn-error {
+    --btn-color: var(--color-error);
+    --btn-fg: var(--color-error-content);
+  }
+  
+  .btn-ghost {
+    &:not(.btn-active, :hover, :active:focus, :focus-visible) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-border: #0000;
+      --btn-noise: none;
+      &:not(:disabled, [disabled], .btn-disabled) {
+        @apply outline-current;
+        --btn-fg: currentColor;
+      }
+    }
+  }
+  .neumorphic-btn-ghost {
+    &:not(.btn-active, :active:focus, :focus-visible) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-border: #0000;
+      --btn-noise: none;
+      box-shadow: none;
+      &:not(:disabled, [disabled], .btn-disabled) {
+        @apply outline-current;
+        --btn-fg: currentColor;
+      }
+    }
+  }
+  
+  .btn-link {
+    @apply underline outline-current;
+    --btn-border: #0000;
+    --btn-bg: #0000;
+    --btn-fg: var(--color-primary);
+    --btn-noise: none;
+    --btn-shadow: "";
+  
+    &:is(.btn-active, :hover, :active:focus, :focus-visible) {
+      @apply underline;
+      --btn-border: #0000;
+      --btn-bg: #0000;
+    }
+  }
+  
+  .btn-outline {
+    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked, [checked]) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+  }
+  
+  .btn-dash {
+    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
+      --btn-shadow: "";
+      border-style: dashed;
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+  }
+  
+  .btn-soft {
+    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
+      --btn-shadow: "";
+      --btn-fg: var(--btn-color, var(--neumorphic-text-color));
+      --btn-bg: color-mix(
+        in oklab,
+        var(--btn-color, var(--neumorphic-text-color)) 8%,
+        var(--color-base-100)
+      );
+      --btn-border: color-mix(
+        in oklab,
+        var(--btn-color, var(--neumorphic-text-color)) 10%,
+        var(--color-base-100)
+      );
+      --btn-noise: none;
+    }
+  }
+  
+  .btn-xs {
+    font-size: 0.6875rem;
+    --btn-p: 0.5rem;
+    --size: calc(var(--size-field, 0.25rem) * 6);
+  }
+  
+  .btn-sm {
+    font-size: 0.75rem;
+    --btn-p: 0.75rem;
+    --size: calc(var(--size-field, 0.25rem) * 8);
+  }
+  
+  .btn-md {
+    font-size: 0.875rem;
+    --btn-p: 1rem;
+    --size: calc(var(--size-field, 0.25rem) * 10);
+  }
+  
+  .btn-lg {
+    font-size: 1.125rem;
+    --btn-p: 1.25rem;
+    --size: calc(var(--size-field, 0.25rem) * 12);
+  }
+  
+  .btn-xl {
+    font-size: 1.375rem;
+    --btn-p: 1.5rem;
+    --size: calc(var(--size-field, 0.25rem) * 14);
+  }
+  
+  .btn-square {
+    @apply px-0;
+    width: var(--size);
+    height: var(--size);
+  }
+  
+  .btn-circle {
+    @apply rounded-full px-0;
+    width: var(--size);
+    height: var(--size);
+  }
+  
+  .btn-wide {
+    @apply w-full max-w-64;
+  }
+  
+  .btn-block {
+    @apply w-full;
+  }
+}

package/assets/css/neumorphic/checkbox.css

@@ -0,0 +1,80 @@
+@layer components {
+
+  .neumorphic-checkbox {
+    display: inline-grid;
+    place-items: center;
+    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    border-radius: var(--radius-selector);
+    padding: calc(0.25rem * 1);
+    vertical-align: middle;
+    color: var(--color-base-content);
+    box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    width: var(--size);
+    height: var(--size);
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    &:before {
+      --tw-content: "";
+      content: var(--tw-content);
+      display: block;
+      width: 100%;
+      height: 100%;
+      rotate: 45deg;
+      background-color: currentColor;
+      opacity: 0%;
+      transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
+      transition-delay: 0.1s;
+      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      font-size: 1rem;
+      line-height: 0.75;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--input-color, currentColor);
+      outline-offset: 2px;
+    }
+    &:checked, &[aria-checked="true"] {
+      background-color: var(--input-color, #0000);
+      box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+      &:before {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+        opacity: 100%;
+        @media print {
+          rotate: 0deg;
+        }
+        @media print {
+          background-color: transparent;
+        }
+        @media print {
+          --tw-content: "✔︎";
+        }
+        @media print {
+          clip-path: none;
+        }
+        @media (forced-colors: active) {
+          rotate: 0deg;
+          background-color: transparent;
+          --tw-content: "✔︎";
+          clip-path: none;
+        }
+      }
+    }
+    &:indeterminate {
+      &:before {
+        rotate: 0deg;
+        opacity: 100%;
+        translate: 0 -35%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+      }
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 20%;
+    }
+  }
+}

package/assets/css/neumorphic/radio.css

@@ -0,0 +1,56 @@
+@layer components {
+  
+  .neumorphic-radio {
+    display: inline-grid;
+    place-items: center;
+    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    border-radius: calc(infinity * 1px);
+    padding: calc(0.25rem * 1);
+    vertical-align: middle;
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    width: var(--size);
+    height: var(--size);
+    color: var(--input-color, currentColor);
+    &:before {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      border-radius: calc(infinity * 1px);
+      --tw-content: "";
+      content: var(--tw-content);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+    &:focus-visible {
+      outline: 2px solid currentColor;
+    }
+    &:checked, &[aria-checked="true"] {
+      animation: radio 0.2s ease-out;
+      border-color: currentColor;
+      background-color: var(--neumorphic-text-color);
+      &:before {
+        background-color: currentColor;
+        @media print {
+          outline: .25rem solid;
+        }
+        @media print {
+          outline-offset: -1rem;
+        }
+        box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+        @media (forced-colors: active) {
+          outline-style: var(--tw-outline-style);
+          outline-width: 1px;
+          outline-offset: calc(1px * -1);
+        }
+      }
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 20%;
+    }
+  }
+
+}

package/assets/css/neumorphic/range.css

@@ -0,0 +1,87 @@
+@layer components {
+  .neumorphic-range {
+    appearance: none;
+    -webkit-appearance: none;
+    --range-thumb: var(--neumorphic-color);
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+    --range-progress: currentColor;
+    --range-fill: 1;
+    --range-p: 0.25rem;
+    --range-bg: color-mix(in oklab, currentColor 20%, #0000);
+    cursor: pointer;
+    overflow: hidden;
+    background-color: transparent;
+    vertical-align: middle;
+    width: clamp(3rem, 20rem, 100%);
+    --radius-selector-max: calc(
+      var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+    );
+    border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+    border: none;
+    height: var(--range-thumb-size);
+    [dir="rtl"] & {
+      --range-dir: -1;
+    }
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+      @media (forced-colors: active) {
+        border: 1px solid;
+      }
+    }
+    &::-webkit-slider-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: currentColor;
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      appearance: none;
+      -webkit-appearance: none;
+      top: 50%;
+      color: var(--range-progress);
+      transform: translateY(-50%);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
+    }
+    &::-moz-range-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+      @media (forced-colors: active) {
+        border: 1px solid;
+      }
+    }
+    &::-moz-range-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: currentColor;
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      top: 50%;
+      color: var(--range-progress);
+      box-shadow:
+        0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
+        0 0 0 2rem var(--range-thumb) inset,
+        calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 30%;
+    }
+  }
+}