daisyui 5.0.0-alpha.2 → 5.0.0-alpha.4

package/components/badge/class.json

@@ -0,0 +1,18 @@
+[
+  "badge",
+  "badge-outline",
+  "badge-faded",
+  "badge-primary",
+  "badge-secondary",
+  "badge-accent",
+  "badge-neutral",
+  "badge-info",
+  "badge-success",
+  "badge-warning",
+  "badge-error",
+  "badge-ghost",
+  "badge-xs",
+  "badge-sm",
+  "badge-md",
+  "badge-lg"
+]

package/components/button/class.json

@@ -0,0 +1,24 @@
+[
+  "btn",
+  "btn-active",
+  "btn-primary",
+  "btn-secondary",
+  "btn-accent",
+  "btn-neutral",
+  "btn-info",
+  "btn-success",
+  "btn-warning",
+  "btn-error",
+  "glass",
+  "btn-ghost",
+  "btn-link",
+  "btn-outline",
+  "btn-xs",
+  "btn-sm",
+  "btn-md",
+  "btn-lg",
+  "btn-square",
+  "btn-circle",
+  "btn-wide",
+  "btn-block"
+]

package/components/button/index.js

@@ -6,16 +6,17 @@ export default {
     "borderWidth": "var(--spacing-button-border)",
     "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 2%)",
     "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 4%)",
-    "boxShadow": "0 1px 0 0 color-mix(in oklch, white 3%, transparent) inset,\n    0 1px 1px 0 oklch(0% 0 0/0.07)",
+    "boxShadow": "0 1px 1px 0 oklch(0% 0 0/0.07)",
     "&:hover": {
-      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
-      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
-      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)"
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%)"
     },
     "&.btn-active": {
-      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
-      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
-      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)"
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+      "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%)",
+      "boxShadow": "0 0 0 0 oklch(0% 0 0/0.07)"
     },
     "&:focus-visible": {
       "@apply outline outline-2": {}
@@ -24,9 +25,10 @@ export default {
       "&:focus": {
         "transform": "scale(var(--btn-focus-scale, 0.98))",
         "@apply animate-[button-pop_0s_ease-out]": {},
-        "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
-        "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
-        "boxShadow": "0 1px 0 0 oklch(0% 0 0/0.07) inset,\n        0 0 0 0 oklch(0% 0 0/0.1)"
+        "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%)",
+        "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%)",
+        "borderBottomColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%)",
+        "boxShadow": "0 0 0 0 oklch(0% 0 0/0.07)"
       },
       "&:hover": {
         "transform": "scale(var(--btn-focus-scale, 0.97))",

package/components/button.css

@@ -31,16 +31,17 @@
     border-width: var(--spacing-button-border);
     border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 2%);
     border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 4%);
-    box-shadow: 0 1px 0 0 color-mix(in oklch, white 3%, transparent) inset, 0 1px 1px 0 oklch(0% 0 0/0.07);
+    box-shadow: 0 1px 1px 0 oklch(0% 0 0/0.07);
     &:hover {
-      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
-      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
       background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%);
     }
     &.btn-active {
-      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
-      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
       background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%);
+      box-shadow: 0 0 0 0 oklch(0% 0 0/0.07);
     }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -52,9 +53,10 @@
       &:focus {
         transform: scale(var(--btn-focus-scale, 0.98));
         animation: button-pop 0s ease-out;
-        border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
-        border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
-        box-shadow: 0 1px 0 0 oklch(0% 0 0/0.07) inset, 0 0 0 0 oklch(0% 0 0/0.1);
+        background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+        border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+        border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 9%);
+        box-shadow: 0 0 0 0 oklch(0% 0 0/0.07);
       }
       &:hover {
         transform: scale(var(--btn-focus-scale, 0.97));

package/components/checkbox/class.json

@@ -0,0 +1,17 @@
+[
+  "checkbox",
+  "2s",
+  "3s",
+  "1s",
+  "checkbox-primary",
+  "checkbox-secondary",
+  "checkbox-accent",
+  "checkbox-success",
+  "checkbox-warning",
+  "checkbox-info",
+  "checkbox-error",
+  "checkbox-xs",
+  "checkbox-sm",
+  "checkbox-md",
+  "checkbox-lg"
+]

package/components/input/class.json

@@ -0,0 +1,16 @@
+[
+  "input",
+  "input-bordered",
+  "input-ghost",
+  "input-primary",
+  "input-secondary",
+  "input-accent",
+  "input-info",
+  "input-success",
+  "input-warning",
+  "input-error",
+  "input-xs",
+  "input-sm",
+  "input-md",
+  "input-lg"
+]

package/components/kbd/class.json

@@ -0,0 +1,7 @@
+[
+  "kbd",
+  "kbd-xs",
+  "kbd-sm",
+  "kbd-md",
+  "kbd-lg"
+]

package/components/loading/class.json

@@ -0,0 +1,21 @@
+[
+  "loading",
+  "loading-spinner",
+  "loading-dots",
+  "33",
+  "66",
+  "loading-ring",
+  "165",
+  "84",
+  "44",
+  "3",
+  "61",
+  "355",
+  "loading-ball",
+  "loading-bars",
+  "loading-infinity",
+  "loading-xs",
+  "loading-sm",
+  "loading-md",
+  "loading-lg"
+]

package/components/loading/config.js

@@ -0,0 +1,12 @@
+import { plugin } from '../../functions/plugin.js';
+import index from './index.js';
+
+export default {
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
+};

package/components/loading/index.css

@@ -0,0 +1 @@
+@config "./config.js";

package/components/loading/index.js

@@ -0,0 +1,39 @@
+export default {
+  ".loading": {
+    "@apply pointer-events-none inline-block aspect-square w-6 bg-current align-middle": {},
+    "maskSize": "100%",
+    "maskRepeat": "no-repeat",
+    "maskPosition": "center",
+    "maskImage": "url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\")"
+  },
+  ".loading-spinner": {
+    "maskImage": "url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\")"
+  },
+  ".loading-dots": {
+    "maskImage": "url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E\")"
+  },
+  ".loading-ring": {
+    "maskImage": "url(\"data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\")"
+  },
+  ".loading-ball": {
+    "maskImage": "url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E\")"
+  },
+  ".loading-bars": {
+    "maskImage": "url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E\")"
+  },
+  ".loading-infinity": {
+    "maskImage": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E\")"
+  },
+  ".loading-xs": {
+    "@apply w-4": {}
+  },
+  ".loading-sm": {
+    "@apply w-5": {}
+  },
+  ".loading-md": {
+    "@apply w-6": {}
+  },
+  ".loading-lg": {
+    "@apply w-10": {}
+  }
+};

package/components/loading.css

@@ -0,0 +1,42 @@
+.loading {
+    pointer-events: none;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    width: var(--spacing-6, 1.5rem);
+    background-color: currentColor;
+    vertical-align: middle;
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  }
+  .loading-spinner {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  }
+  .loading-dots {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
+  }
+  .loading-ring {
+    mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  }
+  .loading-ball {
+    mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E");
+  }
+  .loading-bars {
+    mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E");
+  }
+  .loading-infinity {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E");
+  }
+  .loading-xs {
+    width: var(--spacing-4, 1rem);
+  }
+  .loading-sm {
+    width: var(--spacing-5, 1.25rem);
+  }
+  .loading-md {
+    width: var(--spacing-6, 1.5rem);
+  }
+  .loading-lg {
+    width: var(--spacing-10, 2.5rem);
+  }

package/components/mask/class.json

@@ -0,0 +1,24 @@
+[
+  "mask",
+  "mask-half-1",
+  "mask-half-2",
+  "mask-squircle",
+  "mask-decagon",
+  "mask-diamond",
+  "mask-heart",
+  "mask-hexagon",
+  "mask-hexagon-2",
+  "mask-circle",
+  "mask-parallelogram",
+  "mask-parallelogram-2",
+  "mask-parallelogram-3",
+  "mask-parallelogram-4",
+  "mask-pentagon",
+  "mask-square",
+  "mask-star",
+  "mask-star-2",
+  "mask-triangle",
+  "mask-triangle-2",
+  "mask-triangle-3",
+  "mask-triangle-4"
+]

package/components/menu/class.json

@@ -0,0 +1,15 @@
+[
+  "menu",
+  "menu-dropdown",
+  "menu-title",
+  "menu-active",
+  "menu-focus",
+  "badge",
+  "menu-disabled",
+  "menu-horizontal",
+  "menu-vertical",
+  "menu-xs",
+  "menu-sm",
+  "menu-md",
+  "menu-lg"
+]

package/components/menu/config.js

@@ -0,0 +1,12 @@
+import { plugin } from '../../functions/plugin.js';
+import index from './index.js';
+
+export default {
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
+};

package/components/menu/index.css

@@ -0,0 +1 @@
+@config "./config.js";

package/components/menu/index.js

@@ -0,0 +1,129 @@
+export default {
+  ".menu": {
+    "@apply inline-flex flex-col flex-wrap text-sm p-2": {},
+    ":where(li ul)": {
+      "@apply relative whitespace-nowrap ms-4 ps-2": {},
+      "&:before": {
+        "@apply bg-base-content absolute bottom-3 start-0 top-3 w-px opacity-10": {},
+        "content": "\"\""
+      }
+    },
+    ":where(li > .menu-dropdown:not(.menu-dropdown-show))": {
+      "@apply hidden": {}
+    },
+    ":where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),\n  :where(li:not(.menu-title) > details > summary:not(.menu-title))": {
+      "@apply rounded-btn px-4 py-2 text-start transition duration-200 ease-out grid grid-flow-col content-start items-center gap-2": {},
+      "gridAutoColumns": "minmax(auto, max-content) auto max-content",
+      "textWrap": "balance",
+      "userSelect": "none"
+    },
+    ":where(li > details > summary)": {
+      "@apply outline-none": {},
+      "&::-webkit-details-marker": {
+        "@apply hidden": {}
+      }
+    },
+    ":where(li > details > summary),\n  :where(li > .menu-dropdown-toggle)": {
+      "&:after": {
+        "@apply justify-self-end": {},
+        "display": "block",
+        "height": "0.375rem",
+        "width": "0.375rem",
+        "rotate": "-135deg",
+        "translate": "0 -1px",
+        "transitionProperty": "rotate, translate",
+        "transitionDuration": "0.2s",
+        "content": "\"\"",
+        "transformOrigin": "50% 50%",
+        "boxShadow": "2px 2px inset",
+        "pointerEvents": "none"
+      }
+    },
+    ":where(li > details[open] > summary):after,\n  :where(li > .menu-dropdown-toggle.menu-dropdown-show):after": {
+      "rotate": "45deg",
+      "translate": "0 1px"
+    },
+    ":where(li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)),\n  :where(li:not(.menu-title, .disabled) > details > summary:not(.menu-title))": {
+      "&:not(.menu-active, :active, .btn)": {
+        "&.menu-focus,\n      &:focus-visible": {
+          "@apply bg-base-content/10 text-base-content cursor-pointer outline-none": {}
+        },
+        "&:hover": {
+          "@apply cursor-pointer outline-none bg-base-content/10": {}
+        }
+      }
+    },
+    ":where(li:empty)": {
+      "@apply bg-base-content opacity-10": {},
+      "margin": "0.5rem 1rem",
+      "height": "1px"
+    },
+    ":where(li)": {
+      "@apply relative flex shrink-0 flex-col flex-wrap items-stretch": {},
+      ".badge": {
+        "@apply justify-self-end": {}
+      },
+      "&>*:not(ul, .menu-title, details, .btn):active,\n    &>*:not(ul, .menu-title, details, .btn).menu-active,\n    &>details>summary:active": {
+        "@apply bg-neutral text-neutral-content bg-neutral text-neutral-content outline-none": {}
+      },
+      "&.menu-disabled": {
+        "@apply text-base-content/30 cursor-not-allowed select-none": {}
+      }
+    }
+  },
+  ".menu-title": {
+    "@apply text-base-content/40 px-4 py-2 text-sm font-bold": {}
+  },
+  ".menu-horizontal": {
+    "@apply inline-flex flex-row": {},
+    "&>li:not(.menu-title)>details>ul": {
+      "@apply absolute ms-0 mt-4 py-2 pe-2": {}
+    },
+    "&>li>details>ul": {
+      "&:before": {
+        "content": "none"
+      }
+    },
+    ":where(&>li:not(.menu-title)>details>ul)": {
+      "@apply bg-base-100 rounded-box shadow": {}
+    }
+  },
+  ".menu-vertical": {
+    "@apply inline-flex flex-col": {},
+    "&>li:not(.menu-title)>details>ul": {
+      "@apply relative ms-4 mt-0 py-0 pe-0": {}
+    }
+  },
+  ".menu-xs": {
+    ":where(li:not(.menu-title) > *:not(ul, details, .menu-title)),\n  :where(li:not(.menu-title) > details > summary:not(.menu-title))": {
+      "@apply rounded px-2 py-1 text-xs": {}
+    },
+    ".menu-title": {
+      "@apply px-2 py-1": {}
+    }
+  },
+  ".menu-sm": {
+    ":where(li:not(.menu-title) > *:not(ul, details, .menu-title)),\n  :where(li:not(.menu-title) > details > summary:not(.menu-title))": {
+      "@apply rounded-btn px-3 py-1 text-sm": {}
+    },
+    ".menu-title": {
+      "@apply px-3 py-2": {}
+    }
+  },
+  ".menu-md": {
+    ":where(li:not(.menu-title) > *:not(ul, details, .menu-title)),\n  :where(li:not(.menu-title) > details > summary:not(.menu-title))": {
+      "@apply rounded-btn px-4 py-2 text-sm": {}
+    },
+    ".menu-title": {
+      "@apply px-4 py-2": {}
+    }
+  },
+  ".menu-lg": {
+    ":where(li:not(.menu-title) > *:not(ul, details, .menu-title)),\n  :where(li:not(.menu-title) > details > summary:not(.menu-title))": {
+      "@apply rounded-btn px-6 py-3 text-lg": {}
+    },
+    ".menu-title": {
+      "@apply px-6 py-3": {}
+    }
+  }
+};