daisyui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/components/range/config.js

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

package/components/range/index.js

@@ -3,7 +3,7 @@ export default {
     "appearance": "none",
     "WebkitAppearance": "none",
     "--range-shdw": "currentColor",
-    "@apply rounded-box overflow-hidden bg-transparent h-6 w-full cursor-pointer border-none": {},
+    "@apply rounded-box h-6 w-full cursor-pointer overflow-hidden border-none bg-transparent align-middle": {},
     "&:focus": {
       "outline": "none"
     },
@@ -22,7 +22,11 @@ export default {
       "transform": "translateY(-50%)",
       "--filler-size": "100rem",
       "--filler-offset": "0.6rem",
-      "boxShadow": "0 0 0 3px var(--range-shdw) inset,\n        var(--focus-shadow, 0 0),\n        calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size)"
+      "--track-shdw": "calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size)",
+      "boxShadow": "0 0 0 3px var(--range-shdw) inset,\n      var(--focus-shadow, 0 0),\n      var(--track-shdw)"
+    },
+    "[dir=rtl] &::-webkit-slider-thumb": {
+      "--track-shdw": "calc(var(--filler-size) * 1 + var(--filler-offset)) 0 0 var(--filler-size)"
     },
     "&::-moz-range-track": {
       "@apply rounded-box bg-base-content/10 h-2 w-full": {}
@@ -33,7 +37,7 @@ export default {
       "color": "var(--range-shdw)",
       "--filler-size": "100rem",
       "--filler-offset": "0.5rem",
-      "boxShadow": "0 0 0 3px var(--range-shdw) inset,\n        var(--focus-shadow, 0 0),\n        calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size)"
+      "boxShadow": "0 0 0 3px var(--range-shdw) inset,\n      var(--focus-shadow, 0 0),\n      calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size)"
     }
   },
   ".range-primary": {

package/components/range.css

@@ -0,0 +1,164 @@
+.range {
+    appearance: none;
+    -webkit-appearance: none;
+    --range-shdw: currentColor;
+    height: var(--spacing-6, 1.5rem);
+    width: 100%;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: var(--radius-box, 1rem);
+    --tw-border-style: none;
+    border-style: none;
+    background-color: transparent;
+    vertical-align: middle;
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      --focus-shadow: 0 0 0 6px var(--color-base-100) inset, 0 0 0 2rem var(--range-shdw) inset;
+    }
+    &::-webkit-slider-runnable-track {
+      height: var(--spacing-2, 0.5rem);
+      width: 100%;
+      border-radius: var(--radius-box, 1rem);
+      background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 10%, transparent);
+    }
+    &::-webkit-slider-thumb {
+      position: relative;
+      height: var(--spacing-6, 1.5rem);
+      width: var(--spacing-6, 1.5rem);
+      border-radius: var(--radius-box, 1rem);
+      --tw-border-style: none;
+      border-style: none;
+      background-color: var(--color-base-100, oklch(100% 0 0));
+      appearance: none;
+      -webkit-appearance: none;
+      top: 50%;
+      color: var(--range-shdw);
+      transform: translateY(-50%);
+      --filler-size: 100rem;
+      --filler-offset: 0.6rem;
+      --track-shdw: calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
+      box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), var(--track-shdw);
+    }
+    [dir=rtl] &::-webkit-slider-thumb {
+      --track-shdw: calc(var(--filler-size) * 1 + var(--filler-offset)) 0 0 var(--filler-size);
+    }
+    &::-moz-range-track {
+      height: var(--spacing-2, 0.5rem);
+      width: 100%;
+      border-radius: var(--radius-box, 1rem);
+      background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 10%, transparent);
+    }
+    &::-moz-range-thumb {
+      position: relative;
+      height: var(--spacing-6, 1.5rem);
+      width: var(--spacing-6, 1.5rem);
+      border-radius: var(--radius-box, 1rem);
+      --tw-border-style: none;
+      border-style: none;
+      background-color: var(--color-base-100, oklch(100% 0 0));
+      top: 50%;
+      color: var(--range-shdw);
+      --filler-size: 100rem;
+      --filler-offset: 0.5rem;
+      box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
+    }
+  }
+  .range-primary {
+    color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+  }
+  .range-secondary {
+    color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+  }
+  .range-accent {
+    color: var(--color-accent, oklch(76.76% 0.184 183.61));
+  }
+  .range-success {
+    color: var(--color-success, oklch(64.8% 0.15 160));
+  }
+  .range-warning {
+    color: var(--color-warning, oklch(84.71% 0.199 83.87));
+  }
+  .range-info {
+    color: var(--color-info, oklch(72.06% 0.191 231.6));
+  }
+  .range-error {
+    color: var(--color-error, oklch(71.76% 0.221 22.18));
+  }
+  .range-xs {
+    height: var(--spacing-4, 1rem);
+    &::-webkit-slider-runnable-track {
+      height: var(--spacing-1, 0.25rem);
+    }
+    &::-webkit-slider-thumb {
+      width: var(--spacing-4, 1rem);
+      height: var(--spacing-4, 1rem);
+      --filler-offset: 0.4rem;
+    }
+    &::-moz-range-track {
+      height: var(--spacing-1, 0.25rem);
+    }
+    &::-moz-range-thumb {
+      width: var(--spacing-4, 1rem);
+      height: var(--spacing-4, 1rem);
+      --filler-offset: 0.4rem;
+    }
+  }
+  .range-sm {
+    height: var(--spacing-5, 1.25rem);
+    &::-webkit-slider-runnable-track {
+      height: var(--spacing-1, 0.25rem);
+    }
+    &::-webkit-slider-thumb {
+      width: var(--spacing-5, 1.25rem);
+      height: var(--spacing-5, 1.25rem);
+      --filler-offset: 0.5rem;
+    }
+    &::-moz-range-track {
+      height: var(--spacing-1, 0.25rem);
+    }
+    &::-moz-range-thumb {
+      width: var(--spacing-5, 1.25rem);
+      height: var(--spacing-5, 1.25rem);
+      --filler-offset: 0.5rem;
+    }
+  }
+  .range-md {
+    height: var(--spacing-6, 1.5rem);
+    &::-webkit-slider-runnable-track {
+      height: var(--spacing-2, 0.5rem);
+    }
+    &::-webkit-slider-thumb {
+      width: var(--spacing-6, 1.5rem);
+      height: var(--spacing-6, 1.5rem);
+      --filler-offset: 0.6rem;
+    }
+    &::-moz-range-track {
+      height: var(--spacing-2, 0.5rem);
+    }
+    &::-moz-range-thumb {
+      width: var(--spacing-6, 1.5rem);
+      height: var(--spacing-6, 1.5rem);
+      --filler-offset: 0.6rem;
+    }
+  }
+  .range-lg {
+    height: var(--spacing-8, 2rem);
+    &::-webkit-slider-runnable-track {
+      height: var(--spacing-4, 1rem);
+    }
+    &::-webkit-slider-thumb {
+      width: var(--spacing-8, 2rem);
+      height: var(--spacing-8, 2rem);
+      --filler-offset: 1rem;
+    }
+    &::-moz-range-track {
+      height: var(--spacing-4, 1rem);
+    }
+    &::-moz-range-thumb {
+      width: var(--spacing-8, 2rem);
+      height: var(--spacing-8, 2rem);
+      --filler-offset: 1rem;
+    }
+  }

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

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

package/components/rating/index.js

@@ -0,0 +1,82 @@
+export default {
+  ".rating": {
+    "@apply relative inline-flex align-middle": {},
+    "& input": {
+      "@apply appearance-none border-none": {},
+      "WebkitAppearance": "none"
+    },
+    ":where(input)": {
+      "animation": "rating-pop var(--animation-input, 0.25s) ease-out",
+      "@apply bg-base-content h-6 w-6 cursor-pointer rounded-none opacity-100": {}
+    },
+    "& .rating-hidden": {
+      "@apply w-2 bg-transparent": {}
+    },
+    "input[type=\"radio\"]:checked": {
+      "backgroundImage": "none"
+    },
+    "input": {
+      "&:checked,\n    &[aria-checked=\"true\"]": {
+        "&~input": {
+          "@apply opacity-20": {}
+        }
+      },
+      "&:focus-visible": {
+        "@apply transition-transform duration-300 ease-out": {},
+        "transform": "translateY(-0.125em)"
+      }
+    },
+    "& input:active:focus": {
+      "animation": "none",
+      "transform": "translateY(-0.125em)"
+    },
+    "&:is(.rating-xs)": {
+      "input": {
+        "@apply size-3": {}
+      }
+    },
+    "&:is(.rating-sm)": {
+      "input": {
+        "@apply size-4": {}
+      }
+    },
+    "&:is(.rating-md)": {
+      "input": {
+        "@apply size-6": {}
+      }
+    },
+    "&:is(.rating-lg)": {
+      "input": {
+        "@apply size-10": {}
+      }
+    }
+  },
+  ".rating-half": {
+    ":where(input:not(.rating-hidden))": {
+      "@apply w-3": {}
+    },
+    "&.rating-xs input:not(.rating-hidden)": {
+      "@apply w-1.5": {}
+    },
+    "&.rating-sm input:not(.rating-hidden)": {
+      "@apply w-2": {}
+    },
+    "&.rating-md input:not(.rating-hidden)": {
+      "@apply w-3": {}
+    },
+    "&.rating-lg input:not(.rating-hidden)": {
+      "@apply w-5": {}
+    }
+  },
+  "@keyframes rating-pop": {
+    "0%": {
+      "transform": "translateY(-0.125em)"
+    },
+    "40%": {
+      "transform": "translateY(-0.125em)"
+    },
+    "100%": {
+      "transform": "translateY(0)"
+    }
+  }
+};

package/components/rating.css

@@ -0,0 +1,104 @@
+.rating {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    & input {
+      appearance: none;
+      --tw-border-style: none;
+      border-style: none;
+      -webkit-appearance: none;
+    }
+    :where(input) {
+      animation: rating-pop var(--animation-input, 0.25s) ease-out;
+      height: var(--spacing-6, 1.5rem);
+      width: var(--spacing-6, 1.5rem);
+      cursor: pointer;
+      border-radius: 0;
+      background-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+      opacity: 100%;
+    }
+    & .rating-hidden {
+      width: var(--spacing-2, 0.5rem);
+      background-color: transparent;
+    }
+    input[type="radio"]:checked {
+      background-image: none;
+    }
+    input {
+      &:checked, &[aria-checked="true"] {
+        &~input {
+          opacity: 20%;
+        }
+      }
+      &:focus-visible {
+        transition-property: transform, translate, scale, rotate;
+        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: 300ms;
+        transition-duration: 300ms;
+        --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));
+        transform: translateY(-0.125em);
+      }
+    }
+    & input:active:focus {
+      animation: none;
+    }
+    & input:active:focus {
+      transform: translateY(-0.125em);
+    }
+    &:is(.rating-xs) {
+      input {
+        width: var(--spacing-3, 0.75rem);
+        height: var(--spacing-3, 0.75rem);
+      }
+    }
+    &:is(.rating-sm) {
+      input {
+        width: var(--spacing-4, 1rem);
+        height: var(--spacing-4, 1rem);
+      }
+    }
+    &:is(.rating-md) {
+      input {
+        width: var(--spacing-6, 1.5rem);
+        height: var(--spacing-6, 1.5rem);
+      }
+    }
+    &:is(.rating-lg) {
+      input {
+        width: var(--spacing-10, 2.5rem);
+        height: var(--spacing-10, 2.5rem);
+      }
+    }
+  }
+  .rating-half {
+    :where(input:not(.rating-hidden)) {
+      width: var(--spacing-3, 0.75rem);
+    }
+  }
+  @keyframes rating-pop {
+    0% {
+      transform: translateY(-0.125em);
+    }
+    40% {
+      transform: translateY(-0.125em);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .rating-half {
+    &.rating-xs input:not(.rating-hidden) {
+      width: var(--spacing-1_5, 0.375rem);
+    }
+    &.rating-sm input:not(.rating-hidden) {
+      width: var(--spacing-2, 0.5rem);
+    }
+    &.rating-md input:not(.rating-hidden) {
+      width: var(--spacing-3, 0.75rem);
+    }
+    &.rating-lg input:not(.rating-hidden) {
+      width: var(--spacing-5, 1.25rem);
+    }
+  }

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

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

package/components/select/index.js

@@ -0,0 +1,99 @@
+export default {
+  ".select": {
+    "@apply relative bg-base-100 rounded-btn h-10 shrink appearance-none border border-transparent px-4 text-base text-sm leading-loose align-middle": {},
+    "backgroundImage": "linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%)",
+    "backgroundPosition": "calc(100% - 20px) calc(1px + 50%),\n    calc(100% - 16.1px) calc(1px + 50%)",
+    "backgroundSize": "4px 4px,\n    4px 4px",
+    "backgroundRepeat": "no-repeat",
+    "input": {
+      "@apply border-none bg-transparent": {},
+      "&:focus": {
+        "@apply outline-none": {}
+      }
+    },
+    "&:focus,\n  &:focus-within": {
+      "@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2": {}
+    },
+    "&:has(> select[disabled]),\n  &:is(:disabled, [disabled])": {
+      "@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed": {}
+    },
+    "&:has(> select[disabled])>select[disabled]": {
+      "@apply cursor-not-allowed": {}
+    },
+    "&.select-bordered": {
+      "@apply border-base-content/20": {},
+      "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset,\n      0 -1px oklch(100% 0 0 / 0.1) inset",
+      "&:focus": {
+        "boxShadow": "0 1px oklch(0% 0 0 / 0.1)"
+      }
+    },
+    "&.select-ghost": {
+      "@apply bg-base-100/5 shadow-none": {},
+      "&:focus,\n    &:focus-within": {
+        "@apply text-base-content bg-base-100": {},
+        "boxShadow": "none"
+      }
+    },
+    "&.select-primary": {
+      "@apply border-primary": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-primary) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-primary border-primary": {}
+      }
+    },
+    "&.select-secondary": {
+      "@apply border-secondary": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-secondary) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-secondary border-secondary": {}
+      }
+    },
+    "&.select-accent": {
+      "@apply border-accent": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-accent) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-accent border-accent": {}
+      }
+    },
+    "&.select-info": {
+      "@apply border-info": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-info) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-info border-info": {}
+      }
+    },
+    "&.select-success": {
+      "@apply border-success": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-success) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-success border-success": {}
+      }
+    },
+    "&.select-warning": {
+      "@apply border-warning": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-warning) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-warning border-warning": {}
+      }
+    },
+    "&.select-error": {
+      "@apply border-error": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-error) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-error border-error": {}
+      }
+    },
+    "&.select-xs": {
+      "@apply h-6 px-2 text-xs leading-relaxed": {}
+    },
+    "&.select-sm": {
+      "@apply h-8 px-3 text-sm leading-8": {}
+    },
+    "&.select-md": {
+      "@apply h-10 px-4 text-sm leading-loose": {}
+    },
+    "&.select-lg": {
+      "@apply h-14 px-6 text-lg leading-loose": {}
+    }
+  }
+};