daisyui 4.12.10 → 5.0.0-alpha.2

package/components/badge/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/badge/index.css

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

package/components/badge/index.js

@@ -0,0 +1,74 @@
+export default {
+  ".badge": {
+    "@apply inline-flex items-center justify-center transition duration-200 ease-out h-5 text-sm leading-5 rounded-badge border text-base-content": {},
+    "width": "fit-content",
+    "paddingLeft": "0.563rem",
+    "paddingRight": "0.563rem",
+    "background": "var(--badge-color, var(--color-base-100))",
+    "borderColor": "var(--badge-color, var(--color-base-200))",
+    "&.badge-outline": {
+      "@apply border-current/50 bg-transparent": {},
+      "color": "var(--badge-color, var(--color-base-content))"
+    }
+  },
+  ".badge-faded": {
+    "color": "color-mix(in xyz, var(--badge-color) 80%, var(--color-base-content))",
+    "background": "color-mix(in xyz, var(--badge-color) 10%, var(--color-base-100))",
+    "borderColor": "color-mix(in xyz, var(--badge-color) 7%, transparent)"
+  },
+  ".badge-primary": {
+    "--badge-color": "var(--color-primary)",
+    "@apply text-primary-content": {}
+  },
+  ".badge-secondary": {
+    "--badge-color": "var(--color-secondary)",
+    "@apply text-secondary-content": {}
+  },
+  ".badge-accent": {
+    "--badge-color": "var(--color-accent)",
+    "@apply text-accent-content": {}
+  },
+  ".badge-neutral": {
+    "--badge-color": "var(--color-neutral)",
+    "@apply text-neutral-content": {}
+  },
+  ".badge-info": {
+    "--badge-color": "var(--color-info)",
+    "@apply text-info-content": {}
+  },
+  ".badge-success": {
+    "--badge-color": "var(--color-success)",
+    "@apply text-success-content": {}
+  },
+  ".badge-warning": {
+    "--badge-color": "var(--color-warning)",
+    "@apply text-warning-content": {}
+  },
+  ".badge-error": {
+    "--badge-color": "var(--color-error)",
+    "@apply text-error-content": {}
+  },
+  ".badge-ghost": {
+    "@apply border-base-200 bg-base-200 text-base-content": {}
+  },
+  ".badge-xs": {
+    "@apply h-3 text-xs leading-3": {},
+    "paddingLeft": "0.313rem",
+    "paddingRight": "0.313rem"
+  },
+  ".badge-sm": {
+    "@apply h-4 text-xs leading-4": {},
+    "paddingLeft": "0.438rem",
+    "paddingRight": "0.438rem"
+  },
+  ".badge-md": {
+    "@apply h-5 text-sm leading-5": {},
+    "paddingLeft": "0.563rem",
+    "paddingRight": "0.563rem"
+  },
+  ".badge-lg": {
+    "@apply h-6 text-base leading-6": {},
+    "paddingLeft": "0.688rem",
+    "paddingRight": "0.688rem"
+  }
+};

package/components/badge.css

@@ -0,0 +1,109 @@
+.badge {
+    display: inline-flex;
+    height: var(--spacing-5, 1.25rem);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-badge, 1.9rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-leading: var(--line-height-5, 1.25rem);
+    line-height: var(--line-height-5, 1.25rem);
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    width: fit-content;
+    padding-left: 0.563rem;
+    padding-right: 0.563rem;
+    background: var(--badge-color, var(--color-base-100));
+    border-color: var(--badge-color, var(--color-base-200));
+    &.badge-outline {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
+      background-color: transparent;
+      color: var(--badge-color, var(--color-base-content));
+    }
+  }
+  .badge-faded {
+    color: color-mix(in xyz, var(--badge-color) 80%, var(--color-base-content));
+    background: color-mix(in xyz, var(--badge-color) 10%, var(--color-base-100));
+    border-color: color-mix(in xyz, var(--badge-color) 7%, transparent);
+  }
+  .badge-primary {
+    --badge-color: var(--color-primary);
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+  }
+  .badge-secondary {
+    --badge-color: var(--color-secondary);
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+  }
+  .badge-accent {
+    --badge-color: var(--color-accent);
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+  }
+  .badge-neutral {
+    --badge-color: var(--color-neutral);
+    color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
+  }
+  .badge-info {
+    --badge-color: var(--color-info);
+    color: var(--color-info-content, oklch(0% 0 0));
+  }
+  .badge-success {
+    --badge-color: var(--color-success);
+    color: var(--color-success-content, oklch(0% 0 0));
+  }
+  .badge-warning {
+    --badge-color: var(--color-warning);
+    color: var(--color-warning-content, oklch(0% 0 0));
+  }
+  .badge-error {
+    --badge-color: var(--color-error);
+    color: var(--color-error-content, oklch(0% 0 0));
+  }
+  .badge-ghost {
+    border-color: var(--color-base-200, oklch(96.1151% 0 0));
+    background-color: var(--color-base-200, oklch(96.1151% 0 0));
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+  }
+  .badge-xs {
+    height: var(--spacing-3, 0.75rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    --tw-leading: var(--line-height-3, 0.75rem);
+    line-height: var(--line-height-3, 0.75rem);
+    padding-left: 0.313rem;
+    padding-right: 0.313rem;
+  }
+  .badge-sm {
+    height: var(--spacing-4, 1rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    --tw-leading: var(--line-height-4, 1rem);
+    line-height: var(--line-height-4, 1rem);
+    padding-left: 0.438rem;
+    padding-right: 0.438rem;
+  }
+  .badge-md {
+    height: var(--spacing-5, 1.25rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-leading: var(--line-height-5, 1.25rem);
+    line-height: var(--line-height-5, 1.25rem);
+    padding-left: 0.563rem;
+    padding-right: 0.563rem;
+  }
+  .badge-lg {
+    height: var(--spacing-6, 1.5rem);
+    font-size: var(--font-size-base, 1rem);
+    line-height: var(--tw-leading, var(--font-size-base--line-height, 1.5rem));
+    --tw-leading: var(--line-height-6, 1.5rem);
+    line-height: var(--line-height-6, 1.5rem);
+    padding-left: 0.688rem;
+    padding-right: 0.688rem;
+  }

package/components/button/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/button/index.css

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

package/components/button/index.js

@@ -0,0 +1,170 @@
+export default {
+  ".btn": {
+    "@apply text-base-content outline-base-content inline-flex shrink-0 cursor-pointer flex-wrap items-center justify-center gap-2 rounded-[var(--radius-btn)] text-center text-sm/none font-semibold no-underline outline-offset-2 duration-200 ease-out select-none align-middle h-10 px-4": {},
+    "transitionProperty": "color, background-color, border-color, opacity, box-shadow, transform",
+    "backgroundColor": "var(--btn-bg, var(--color-base-200))",
+    "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)",
+    "&: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%)"
+    },
+    "&.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%)"
+    },
+    "&:focus-visible": {
+      "@apply outline outline-2": {}
+    },
+    "&:active": {
+      "&: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)"
+      },
+      "&:hover": {
+        "transform": "scale(var(--btn-focus-scale, 0.97))",
+        "@apply animate-[button-pop_0s_ease-out]": {}
+      }
+    },
+    "&:is(:disabled, [disabled], .btn-disabled)": {
+      "@apply bg-neutral/20 text-base-content/20 pointer-events-none border-transparent": {},
+      "&:hover": {
+        "@apply bg-neutral/20 text-base-content/20 pointer-events-none border-transparent": {}
+      }
+    },
+    "&:is(input[type=checkbox]),\n  &:is(input[type=radio])": {
+      "@apply w-auto appearance-none": {},
+      "&::after": {
+        "@apply content-[attr(aria-label)]": {}
+      },
+      "&:checked": {
+        "@apply border-primary bg-primary text-primary-content": {},
+        "&:focus-visible": {
+          "@apply outline-primary": {}
+        },
+        "&:hover": {
+          "backgroundColor": "color-mix(in oklab, var(--color-primary) 90%, black)",
+          "borderColor": "color-mix(in oklab, var(--color-primary) 90%, black)"
+        }
+      }
+    }
+  },
+  ".btn-primary": {
+    "--btn-bg": "var(--color-primary)",
+    "@apply text-primary-content outline-primary": {}
+  },
+  ".btn-secondary": {
+    "--btn-bg": "var(--color-secondary)",
+    "@apply text-secondary-content outline-secondary": {}
+  },
+  ".btn-accent": {
+    "--btn-bg": "var(--color-accent)",
+    "@apply text-accent-content outline-accent": {}
+  },
+  ".btn-neutral": {
+    "--btn-bg": "var(--color-neutral)",
+    "@apply text-neutral-content outline-neutral": {}
+  },
+  ".btn-info": {
+    "--btn-bg": "var(--color-info)",
+    "@apply text-info-content outline-info": {}
+  },
+  ".btn-success": {
+    "--btn-bg": "var(--color-success)",
+    "@apply text-success-content outline-success": {}
+  },
+  ".btn-warning": {
+    "--btn-bg": "var(--color-warning)",
+    "@apply text-warning-content outline-warning": {}
+  },
+  ".btn-error": {
+    "--btn-bg": "var(--color-error)",
+    "@apply text-error-content outline-error": {}
+  },
+  ".btn.glass": {
+    "@apply shadow-none outline-current hover:[--glass-border-opacity:15%] hover:[--glass-opacity:25%]": {},
+    "&.btn-active": {
+      "--glass-border-opacity": "15%",
+      "--glass-opacity": "25%"
+    }
+  },
+  ".btn-ghost": {
+    "@apply hover:bg-base-content/20 border border-transparent bg-transparent text-current shadow-none outline-current hover:border-transparent": {},
+    "&.btn-active": {
+      "@apply bg-base-content/20 border-transparent": {}
+    }
+  },
+  ".btn-link": {
+    "@apply text-primary border-transparent bg-transparent underline shadow-none outline-current hover:border-transparent hover:bg-transparent hover:underline": {},
+    "&.btn-active": {
+      "@apply border-transparent bg-transparent underline": {}
+    }
+  },
+  ".btn-outline": {
+    "&:not(.btn-active):not(:hover)": {
+      "@apply bg-transparent text-[var(--btn-bg)] shadow-none": {}
+    },
+    "&.btn-active": {
+      "borderColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black)",
+      "backgroundColor": "color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black)"
+    }
+  },
+  ".btn-xs": {
+    "@apply h-6 px-2": {},
+    "fontSize": "var(--font-size-xs)"
+  },
+  ".btn-sm": {
+    "@apply h-8 px-3": {},
+    "fontSize": "var(--font-size-sm)"
+  },
+  ".btn-md": {
+    "@apply h-10 px-4": {},
+    "fontSize": "var(--font-size-sm)"
+  },
+  ".btn-lg": {
+    "@apply h-14 px-6": {},
+    "fontSize": "var(--font-size-lg)"
+  },
+  ".btn-square": {
+    "@apply px-0 size-12": {},
+    "&.btn-xs": {
+      "@apply size-6": {}
+    },
+    "&.btn-sm": {
+      "@apply size-8": {}
+    },
+    "&.btn-md": {
+      "@apply size-12": {}
+    },
+    "&.btn-lg": {
+      "@apply size-16": {}
+    }
+  },
+  ".btn-circle": {
+    "@apply aspect-square rounded-full px-0": {}
+  },
+  ".btn-wide": {
+    "@apply w-64": {}
+  },
+  ".btn-block": {
+    "@apply w-full": {}
+  },
+  "@keyframes button-pop": {
+    "0%": {
+      "transform": "scale(var(--btn-focus-scale, 0.98))"
+    },
+    "40%": {
+      "transform": "scale(1.02)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  }
+};

package/components/button.css

@@ -0,0 +1,293 @@
+.btn {
+    display: inline-flex;
+    height: var(--spacing-10, 2.5rem);
+    flex-shrink: 0;
+    cursor: pointer;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-2, 0.5rem);
+    border-radius: var(--radius-btn);
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    text-align: center;
+    vertical-align: middle;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--line-height-none, 1);
+    --tw-font-weight: 600;
+    font-weight: 600;
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    text-decoration-line: none;
+    outline-offset: 2px;
+    outline-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
+    background-color: var(--btn-bg, var(--color-base-200));
+    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);
+    &: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%);
+    }
+    &.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%);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:active {
+      &: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);
+      }
+      &:hover {
+        transform: scale(var(--btn-focus-scale, 0.97));
+        animation: button-pop 0s ease-out;
+      }
+    }
+  }
+  .btn-primary {
+    --btn-bg: var(--color-primary);
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+    outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+  }
+  .btn-secondary {
+    --btn-bg: var(--color-secondary);
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+    outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+  }
+  .btn-accent {
+    --btn-bg: var(--color-accent);
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+    outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+  }
+  .btn-neutral {
+    --btn-bg: var(--color-neutral);
+    color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
+    outline-color: var(--color-neutral, oklch(32.1785% 0.02476 255.701624));
+  }
+  .btn-info {
+    --btn-bg: var(--color-info);
+    color: var(--color-info-content, oklch(0% 0 0));
+    outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
+  }
+  .btn-success {
+    --btn-bg: var(--color-success);
+    color: var(--color-success-content, oklch(0% 0 0));
+    outline-color: var(--color-success, oklch(64.8% 0.15 160));
+  }
+  .btn-warning {
+    --btn-bg: var(--color-warning);
+    color: var(--color-warning-content, oklch(0% 0 0));
+    outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+  }
+  .btn-error {
+    --btn-bg: var(--color-error);
+    color: var(--color-error-content, oklch(0% 0 0));
+    outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
+  }
+  .btn.glass {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        --glass-border-opacity: 15%;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        --glass-opacity: 25%;
+      }
+    }
+    &.btn-active {
+      --glass-border-opacity: 15%;
+      --glass-opacity: 25%;
+    }
+  }
+  .btn-ghost {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: transparent;
+    background-color: transparent;
+    color: currentColor;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        border-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      }
+    }
+    &.btn-active {
+      border-color: transparent;
+      background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    }
+  }
+  .btn-link {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    text-decoration-line: underline;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        border-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+    &.btn-active {
+      border-color: transparent;
+      background-color: transparent;
+      text-decoration-line: underline;
+    }
+  }
+  .btn-outline {
+    &:not(.btn-active):not(:hover) {
+      background-color: transparent;
+      color: var(--btn-bg);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &.btn-active {
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
+      background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
+    }
+  }
+  .btn {
+    &:is(:disabled, [disabled], .btn-disabled) {
+      pointer-events: none;
+      border-color: transparent;
+      background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
+      color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      &:hover {
+        pointer-events: none;
+        border-color: transparent;
+        background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
+        color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      }
+    }
+  }
+  .btn {
+    &:is(input[type=checkbox]), &:is(input[type=radio]) {
+      width: auto;
+      appearance: none;
+      &::after {
+        --tw-content: attr(aria-label);
+        content: var(--tw-content);
+      }
+      &:checked {
+        border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+        &:focus-visible {
+          outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        }
+        &:hover {
+          background-color: color-mix(in oklab, var(--color-primary) 90%, black);
+          border-color: color-mix(in oklab, var(--color-primary) 90%, black);
+        }
+      }
+    }
+  }
+  .btn-xs {
+    height: var(--spacing-6, 1.5rem);
+    padding-left: var(--spacing-2, 0.5rem);
+    padding-right: var(--spacing-2, 0.5rem);
+    font-size: var(--font-size-xs);
+  }
+  .btn-sm {
+    height: var(--spacing-8, 2rem);
+    padding-left: var(--spacing-3, 0.75rem);
+    padding-right: var(--spacing-3, 0.75rem);
+    font-size: var(--font-size-sm);
+  }
+  .btn-md {
+    height: var(--spacing-10, 2.5rem);
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    font-size: var(--font-size-sm);
+  }
+  .btn-lg {
+    height: var(--spacing-14, 3.5rem);
+    padding-left: var(--spacing-6, 1.5rem);
+    padding-right: var(--spacing-6, 1.5rem);
+    font-size: var(--font-size-lg);
+  }
+  .btn-square {
+    width: var(--spacing-12, 3rem);
+    height: var(--spacing-12, 3rem);
+    padding-left: var(--spacing-0, 0px);
+    padding-right: var(--spacing-0, 0px);
+    &.btn-xs {
+      width: var(--spacing-6, 1.5rem);
+      height: var(--spacing-6, 1.5rem);
+    }
+    &.btn-sm {
+      width: var(--spacing-8, 2rem);
+      height: var(--spacing-8, 2rem);
+    }
+    &.btn-md {
+      width: var(--spacing-12, 3rem);
+      height: var(--spacing-12, 3rem);
+    }
+    &.btn-lg {
+      width: var(--spacing-16, 4rem);
+      height: var(--spacing-16, 4rem);
+    }
+  }
+  .btn-circle {
+    aspect-ratio: 1 / 1;
+    border-radius: calc(infinity * 1px);
+    padding-left: var(--spacing-0, 0px);
+    padding-right: var(--spacing-0, 0px);
+  }
+  .btn-wide {
+    width: var(--spacing-64, 16rem);
+  }
+  .btn-block {
+    width: 100%;
+  }
+  @keyframes button-pop {
+    0% {
+      transform: scale(var(--btn-focus-scale, 0.98));
+    }
+    40% {
+      transform: scale(1.02);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }

package/components/checkbox/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/checkbox/index.css

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