daisyui 5.0.0-alpha.3 → 5.0.0-alpha.5

package/components/button.css

@@ -1,293 +1 @@
-.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);
-    }
-  }
+.btn{height:var(--spacing-10,2.5rem);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2,.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,.875rem);line-height:var(--line-height-none,1);--tw-font-weight:600;color:var(--color-base-content,oklch(27.8078% .029596 256.848));outline-offset:2px;outline-color:var(--color-base-content,oklch(27.8078% .029596 256.848));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));transition-duration:.2s;transition-timing-function:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));-webkit-user-select:none;user-select:none;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%);flex-wrap:wrap;flex-shrink:0;font-weight:600;text-decoration-line:none;transition-property:color,background-color,border-color,opacity,box-shadow,transform;display:inline-flex;box-shadow:0 1px 1px oklch(0% 0 0/.07);&:hover{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{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 oklch(0% 0 0/.07)}&: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,.98));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%);animation:ease-out button-pop;box-shadow:0 0 oklch(0% 0 0/.07)}&:hover{transform:scale(var(--btn-focus-scale,.97));animation:ease-out button-pop}}}.btn-primary{--btn-bg:var(--color-primary);color:var(--color-primary-content,oklch(89.824% .06192 275.75));outline-color:var(--color-primary,oklch(49.12% .3096 275.75))}.btn-secondary{--btn-bg:var(--color-secondary);color:var(--color-secondary-content,oklch(98.71% .0106 342.55));outline-color:var(--color-secondary,oklch(69.71% .329 342.55))}.btn-accent{--btn-bg:var(--color-accent);color:var(--color-accent-content,oklch(15.352% .0368 183.61));outline-color:var(--color-accent,oklch(76.76% .184 183.61))}.btn-neutral{--btn-bg:var(--color-neutral);color:var(--color-neutral-content,oklch(89.4994% .011585 252.096));outline-color:var(--color-neutral,oklch(32.1785% .02476 255.702))}.btn-info{--btn-bg:var(--color-info);color:var(--color-info-content,oklch(0% 0 0));outline-color:var(--color-info,oklch(72.06% .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% .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% .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% .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);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);background-color:#0000;border-width:1px;border-color:#0000;outline-color:currentColor;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:color-mix(in srgb,var(--color-base-content,oklch(27.8078% .029596 256.848))20%,transparent)}}}&.btn-active{background-color:color-mix(in srgb,var(--color-base-content,oklch(27.8078% .029596 256.848))20%,transparent);border-color:#0000}}.btn-link{color:var(--color-primary,oklch(49.12% .3096 275.75));--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);background-color:#0000;border-color:#0000;outline-color:currentColor;text-decoration-line:underline;&:hover{@media (hover:hover){&{border-color:#0000}}}&:hover{@media (hover:hover){&{background-color:#0000}}}&:hover{@media (hover:hover){&{text-decoration-line:underline}}}&.btn-active{background-color:#0000;border-color:#0000;text-decoration-line:underline}}.btn-outline{&:not(.btn-active):not(:hover){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);background-color:#0000}&.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;background-color:color-mix(in srgb,var(--color-neutral,oklch(32.1785% .02476 255.702))20%,transparent);color:color-mix(in srgb,var(--color-base-content,oklch(27.8078% .029596 256.848))20%,transparent);border-color:#0000;&:hover{pointer-events:none;background-color:color-mix(in srgb,var(--color-neutral,oklch(32.1785% .02476 255.702))20%,transparent);color:color-mix(in srgb,var(--color-base-content,oklch(27.8078% .029596 256.848))20%,transparent);border-color:#0000}}}.btn{&:is(input[type=checkbox]),&:is(input[type=radio]){appearance:none;width:auto;&:after{--tw-content:attr(aria-label);content:var(--tw-content)}&:checked{border-color:var(--color-primary,oklch(49.12% .3096 275.75));background-color:var(--color-primary,oklch(49.12% .3096 275.75));color:var(--color-primary-content,oklch(89.824% .06192 275.75));&:focus-visible{outline-color:var(--color-primary,oklch(49.12% .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,.5rem);padding-right:var(--spacing-2,.5rem);font-size:var(--font-size-xs)}.btn-sm{height:var(--spacing-8,2rem);padding-left:var(--spacing-3,.75rem);padding-right:var(--spacing-3,.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;padding-left:var(--spacing-0,0px);padding-right:var(--spacing-0,0px);border-radius:3.40282e38px}.btn-wide{width:var(--spacing-64,16rem)}.btn-block{width:100%}@keyframes button-pop{0%{transform:scale(var(--btn-focus-scale,.98))}40%{transform:scale(1.02)}to{transform:scale(1)}}

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/checkbox/config.js

@@ -4,7 +4,7 @@ import index from './index.js';
 export default {
 	plugins: [
 		plugin(({ addComponents }) => {
-			addComponents({
+		addComponents({
 				...index
 			});
 		})

package/components/checkbox.css

@@ -1,144 +1 @@
-.checkbox {
-    position: relative;
-    width: var(--spacing-6, 1.5rem);
-    height: var(--spacing-6, 1.5rem);
-    flex-shrink: 0;
-    cursor: pointer;
-    appearance: none;
-    border-radius: var(--radius-btn);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
-    padding: var(--spacing-1, 0.25rem);
-    vertical-align: middle;
-    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
-    box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset;
-    transition: background-color 0.2s, box-shadow 0.2s;
-    &:before {
-      display: block;
-      width: 100%;
-      height: 100%;
-      rotate: 45deg;
-      background-color: currentColor;
-      opacity: 0%;
-      --tw-content: '';
-      content: var(--tw-content);
-      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 / 0.1) inset;
-    }
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-offset: 2px;
-      outline-color: currentColor;
-    }
-    &:checked, &[aria-checked="true"] {
-      box-shadow: 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1);
-      &:before {
-        opacity: 100%;
-        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
-      }
-    }
-    &:indeterminate {
-      &:before {
-        --tw-translate-y: -35%;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-        rotate: 0deg;
-        opacity: 100%;
-        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
-      }
-    }
-  }
-  .checkbox-primary {
-    border-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));
-    }
-    &:checked {
-      background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
-    }
-  }
-  .checkbox-secondary {
-    border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
-    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
-    &:focus-visible {
-      outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
-    }
-    &:checked {
-      background-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
-    }
-  }
-  .checkbox-accent {
-    border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
-    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
-    &:focus-visible {
-      outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
-    }
-    &:checked {
-      background-color: var(--color-accent, oklch(76.76% 0.184 183.61));
-    }
-  }
-  .checkbox-success {
-    border-color: var(--color-success, oklch(64.8% 0.15 160));
-    color: var(--color-success-content, oklch(0% 0 0));
-    &:focus-visible {
-      outline-color: var(--color-success, oklch(64.8% 0.15 160));
-    }
-    &:checked {
-      background-color: var(--color-success, oklch(64.8% 0.15 160));
-    }
-  }
-  .checkbox-warning {
-    border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
-    color: var(--color-warning-content, oklch(0% 0 0));
-    &:focus-visible {
-      outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
-    }
-    &:checked {
-      background-color: var(--color-warning, oklch(84.71% 0.199 83.87));
-    }
-  }
-  .checkbox-info {
-    border-color: var(--color-info, oklch(72.06% 0.191 231.6));
-    color: var(--color-info-content, oklch(0% 0 0));
-    &:focus-visible {
-      outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
-    }
-    &:checked {
-      background-color: var(--color-info, oklch(72.06% 0.191 231.6));
-    }
-  }
-  .checkbox-error {
-    border-color: var(--color-error, oklch(71.76% 0.221 22.18));
-    color: var(--color-error-content, oklch(0% 0 0));
-    &:focus-visible {
-      outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
-    }
-    &:checked {
-      background-color: var(--color-error, oklch(71.76% 0.221 22.18));
-    }
-  }
-  .checkbox:disabled {
-    cursor: not-allowed;
-    opacity: 20%;
-  }
-  .checkbox-xs {
-    width: var(--spacing-4, 1rem);
-    height: var(--spacing-4, 1rem);
-    padding: var(--spacing-0_5, 0.125rem);
-  }
-  .checkbox-sm {
-    width: var(--spacing-5, 1.25rem);
-    height: var(--spacing-5, 1.25rem);
-  }
-  .checkbox-md {
-    width: var(--spacing-6, 1.5rem);
-    height: var(--spacing-6, 1.5rem);
-  }
-  .checkbox-lg {
-    width: var(--spacing-8, 2rem);
-    height: var(--spacing-8, 2rem);
-  }
+.checkbox{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem);cursor:pointer;appearance:none;border-radius:var(--radius-btn);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,var(--color-base-content,oklch(27.8078% .029596 256.848))20%,transparent);padding:var(--spacing-1,.25rem);vertical-align:middle;color:var(--color-base-content,oklch(27.8078% .029596 256.848));flex-shrink:0;transition:background-color .2s,box-shadow .2s;position:relative;box-shadow:inset 0 1px oklch(0% 0 0/.1);&:before{opacity:0;--tw-content:"";content:var(--tw-content);clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);background-color:currentColor;width:100%;height:100%;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg;box-shadow:inset 0 3px oklch(100% 0 0/.1)}&:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:currentColor}&:checked,&[aria-checked=true]{box-shadow:inset 0 8px 0 -4px oklch(100% 0 0/.1),0 1px oklch(0% 0 0/.1);&:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%)}}&:indeterminate{&:before{--tw-translate-y:-35%;translate:var(--tw-translate-x)var(--tw-translate-y);opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);rotate:none}}}.checkbox-primary{border-color:var(--color-primary,oklch(49.12% .3096 275.75));color:var(--color-primary-content,oklch(89.824% .06192 275.75));&:focus-visible{outline-color:var(--color-primary,oklch(49.12% .3096 275.75))}&:checked{background-color:var(--color-primary,oklch(49.12% .3096 275.75))}}.checkbox-secondary{border-color:var(--color-secondary,oklch(69.71% .329 342.55));color:var(--color-secondary-content,oklch(98.71% .0106 342.55));&:focus-visible{outline-color:var(--color-secondary,oklch(69.71% .329 342.55))}&:checked{background-color:var(--color-secondary,oklch(69.71% .329 342.55))}}.checkbox-accent{border-color:var(--color-accent,oklch(76.76% .184 183.61));color:var(--color-accent-content,oklch(15.352% .0368 183.61));&:focus-visible{outline-color:var(--color-accent,oklch(76.76% .184 183.61))}&:checked{background-color:var(--color-accent,oklch(76.76% .184 183.61))}}.checkbox-success{border-color:var(--color-success,oklch(64.8% .15 160));color:var(--color-success-content,oklch(0% 0 0));&:focus-visible{outline-color:var(--color-success,oklch(64.8% .15 160))}&:checked{background-color:var(--color-success,oklch(64.8% .15 160))}}.checkbox-warning{border-color:var(--color-warning,oklch(84.71% .199 83.87));color:var(--color-warning-content,oklch(0% 0 0));&:focus-visible{outline-color:var(--color-warning,oklch(84.71% .199 83.87))}&:checked{background-color:var(--color-warning,oklch(84.71% .199 83.87))}}.checkbox-info{border-color:var(--color-info,oklch(72.06% .191 231.6));color:var(--color-info-content,oklch(0% 0 0));&:focus-visible{outline-color:var(--color-info,oklch(72.06% .191 231.6))}&:checked{background-color:var(--color-info,oklch(72.06% .191 231.6))}}.checkbox-error{border-color:var(--color-error,oklch(71.76% .221 22.18));color:var(--color-error-content,oklch(0% 0 0));&:focus-visible{outline-color:var(--color-error,oklch(71.76% .221 22.18))}&:checked{background-color:var(--color-error,oklch(71.76% .221 22.18))}}.checkbox:disabled{cursor:not-allowed;opacity:.2}.checkbox-xs{width:var(--spacing-4,1rem);height:var(--spacing-4,1rem);padding:var(--spacing-0_5,.125rem)}.checkbox-sm{width:var(--spacing-5,1.25rem);height:var(--spacing-5,1.25rem)}.checkbox-md{width:var(--spacing-6,1.5rem);height:var(--spacing-6,1.5rem)}.checkbox-lg{width:var(--spacing-8,2rem);height:var(--spacing-8,2rem)}

package/components/dropdown/class.json

@@ -0,0 +1,13 @@
+[
+  "dropdown",
+  "dropdown-content",
+  "dropdown-open",
+  "dropdown-hover",
+  "dropdown-start",
+  "dropdown-left",
+  "dropdown-right",
+  "dropdown-center",
+  "dropdown-end",
+  "dropdown-bottom",
+  "dropdown-top"
+]

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

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

package/components/dropdown/index.js

@@ -0,0 +1,146 @@
+export default {
+  ".dropdown": {
+    "@apply relative inline-block": {},
+    "positionArea": "var(--anchor-v, bottom) var(--anchor-h, span-right)",
+    "&>*:not(summary):focus": {
+      "@apply outline-none": {}
+    },
+    ".dropdown-content": {
+      "@apply absolute transition duration-200 ease-out": {}
+    },
+    "&:not(details)": {
+      ".dropdown-content": {
+        "@apply invisible opacity-0 origin-top scale-95": {}
+      }
+    },
+    "&.dropdown-open,\n  &:not(.dropdown-hover):focus,\n  &:focus-within": {
+      ".dropdown-content": {
+        "@apply visible opacity-100": {}
+      }
+    },
+    "&.dropdown-hover:hover": {
+      ".dropdown-content": {
+        "@apply visible opacity-100 scale-100": {}
+      }
+    },
+    "&:is(details)": {
+      "summary": {
+        "&::-webkit-details-marker": {
+          "@apply hidden": {}
+        }
+      }
+    },
+    "&.dropdown-open,\n  &:focus,\n  &:focus-within": {
+      ".dropdown-content": {
+        "@apply scale-100": {}
+      }
+    },
+    "&[popover]": {
+      "@apply fixed transition duration-200 ease-out z-[1000]": {},
+      "@supports not (position-area: bottom)": {
+        "@apply m-auto": {},
+        "&.dropdown-open": {
+          "@apply invisible opacity-0 origin-top scale-95": {},
+          "&:popover-open": {
+            "@apply visible opacity-100 scale-100": {}
+          }
+        },
+        "&::backdrop": {
+          "@apply bg-black/30": {}
+        }
+      },
+      "&:not(.dropdown-open, :popover-open)": {
+        "@apply invisible opacity-0 origin-top scale-95": {}
+      }
+    }
+  },
+  ".dropdown-start": {
+    "--anchor-h": "span-right",
+    ":where(.dropdown-content)": {
+      "@apply end-auto": {}
+    },
+    "&.dropdown-left": {
+      "--anchor-h": "left",
+      "--anchor-v": "span-bottom",
+      ".dropdown-content": {
+        "@apply bottom-auto top-0": {}
+      }
+    },
+    "&.dropdown-right": {
+      "--anchor-h": "right",
+      "--anchor-v": "span-bottom",
+      ".dropdown-content": {
+        "@apply bottom-auto top-0": {}
+      }
+    }
+  },
+  ".dropdown-center": {
+    "--anchor-h": "center",
+    ":where(.dropdown-content)": {
+      "@apply end-1/2": {},
+      "translate": "50% 0"
+    },
+    "&.dropdown-left": {
+      "--anchor-h": "left",
+      "--anchor-v": "center",
+      ".dropdown-content": {
+        "@apply bottom-1/2 top-auto": {},
+        "translate": "0 50%"
+      }
+    },
+    "&.dropdown-right": {
+      "--anchor-h": "right",
+      "--anchor-v": "center",
+      ".dropdown-content": {
+        "@apply bottom-1/2 top-auto": {},
+        "translate": "0 50%"
+      }
+    }
+  },
+  ".dropdown-end": {
+    "--anchor-h": "span-left",
+    ":where(.dropdown-content)": {
+      "@apply end-0": {}
+    },
+    "&.dropdown-left": {
+      "--anchor-h": "left",
+      "--anchor-v": "span-top",
+      ".dropdown-content": {
+        "@apply bottom-0 top-auto": {}
+      }
+    },
+    "&.dropdown-right": {
+      "--anchor-h": "right",
+      "--anchor-v": "span-top",
+      ".dropdown-content": {
+        "@apply bottom-0 top-auto": {}
+      }
+    }
+  },
+  ".dropdown-left": {
+    "--anchor-h": "left",
+    "--anchor-v": "span-bottom",
+    ".dropdown-content": {
+      "@apply bottom-auto end-full top-0 origin-right": {}
+    }
+  },
+  ".dropdown-right": {
+    "--anchor-h": "right",
+    "--anchor-v": "span-bottom",
+    ".dropdown-content": {
+      "@apply bottom-auto start-full top-0 origin-left": {}
+    }
+  },
+  ".dropdown-bottom": {
+    "--anchor-v": "bottom",
+    ".dropdown-content": {
+      "@apply bottom-auto top-full origin-top": {}
+    }
+  },
+  ".dropdown-top": {
+    "--anchor-v": "top",
+    ".dropdown-content": {
+      "@apply bottom-full top-auto origin-bottom": {}
+    }
+  }
+};

package/components/dropdown.css

@@ -0,0 +1 @@
+.dropdown{position-area:var(--anchor-v,bottom)var(--anchor-h,span-right);display:inline-block;position:relative;&>:not(summary):focus{outline-offset:2px;outline:2px solid #0000}& .dropdown-content{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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));transition-duration:.2s;transition-timing-function:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));position:absolute}&:not(details){& .dropdown-content{visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0}}&.dropdown-open,&:not(.dropdown-hover):focus,&:focus-within{& .dropdown-content{visibility:visible;opacity:1}}&.dropdown-hover:hover{& .dropdown-content{visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:1}}&:is(details){& summary{&::-webkit-details-marker{display:none}}}&.dropdown-open,&:focus,&:focus-within{& .dropdown-content{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}}&[popover]{z-index:1000;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(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));transition-duration:.2s;transition-timing-function:var(--transition-timing-function-out,cubic-bezier(0,0,.2,1));position:fixed;@supports not (position-area:bottom){&{margin:auto}&.dropdown-open{visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0;&:popover-open{visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:1}}&::backdrop{background-color:color-mix(in srgb,var(--color-black,#000)30%,transparent)}}&:not(.dropdown-open,:popover-open){visibility:hidden;transform-origin:top;--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y);opacity:0}}}.dropdown-start{--anchor-h:span-right;& :where(.dropdown-content){inset-inline-end:auto}&.dropdown-left{--anchor-h:left;--anchor-v:span-bottom;& .dropdown-content{top:var(--spacing-0,0px);bottom:auto}}&.dropdown-right{--anchor-h:right;--anchor-v:span-bottom;& .dropdown-content{top:var(--spacing-0,0px);bottom:auto}}}.dropdown-center{--anchor-h:center;& :where(.dropdown-content){inset-inline-end:50%;translate:50%}&.dropdown-left{--anchor-h:left;--anchor-v:center;& .dropdown-content{top:auto;bottom:50%;translate:0 50%}}&.dropdown-right{--anchor-h:right;--anchor-v:center;& .dropdown-content{top:auto;bottom:50%;translate:0 50%}}}.dropdown-end{--anchor-h:span-left;& :where(.dropdown-content){inset-inline-end:var(--spacing-0,0px)}&.dropdown-left{--anchor-h:left;--anchor-v:span-top;& .dropdown-content{top:auto;bottom:var(--spacing-0,0px)}}&.dropdown-right{--anchor-h:right;--anchor-v:span-top;& .dropdown-content{top:auto;bottom:var(--spacing-0,0px)}}}.dropdown-left{--anchor-h:left;--anchor-v:span-bottom;& .dropdown-content{inset-inline-end:100%;top:var(--spacing-0,0px);transform-origin:100%;bottom:auto}}.dropdown-right{--anchor-h:right;--anchor-v:span-bottom;& .dropdown-content{inset-inline-start:100%;top:var(--spacing-0,0px);transform-origin:0;bottom:auto}}.dropdown-bottom{--anchor-v:bottom;& .dropdown-content{transform-origin:top;top:100%;bottom:auto}}.dropdown-top{--anchor-v:top;& .dropdown-content{transform-origin:bottom;top:auto;bottom:100%}}