daisyui 4.12.9 → 5.0.0-alpha.0

package/components/range/index.js

@@ -0,0 +1,128 @@
+export default {
+  ".range": {
+    "appearance": "none",
+    "WebkitAppearance": "none",
+    "--range-shdw": "currentColor",
+    "@apply rounded-box overflow-hidden bg-transparent h-6 w-full cursor-pointer border-none": {},
+    "&: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": {
+      "@apply rounded-box bg-base-content/10 h-2 w-full": {}
+    },
+    "&::-webkit-slider-thumb": {
+      "@apply rounded-box bg-base-100 relative h-6 w-6 border-none": {},
+      "appearance": "none",
+      "WebkitAppearance": "none",
+      "top": "50%",
+      "color": "var(--range-shdw)",
+      "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)"
+    },
+    "&::-moz-range-track": {
+      "@apply rounded-box bg-base-content/10 h-2 w-full": {}
+    },
+    "&::-moz-range-thumb": {
+      "@apply rounded-box bg-base-100 relative h-6 w-6 border-none": {},
+      "top": "50%",
+      "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)"
+    }
+  },
+  ".range-primary": {
+    "@apply text-primary": {}
+  },
+  ".range-secondary": {
+    "@apply text-secondary": {}
+  },
+  ".range-accent": {
+    "@apply text-accent": {}
+  },
+  ".range-success": {
+    "@apply text-success": {}
+  },
+  ".range-warning": {
+    "@apply text-warning": {}
+  },
+  ".range-info": {
+    "@apply text-info": {}
+  },
+  ".range-error": {
+    "@apply text-error": {}
+  },
+  ".range-xs": {
+    "@apply h-4": {},
+    "&::-webkit-slider-runnable-track": {
+      "@apply h-1": {}
+    },
+    "&::-webkit-slider-thumb": {
+      "@apply size-4": {},
+      "--filler-offset": "0.4rem"
+    },
+    "&::-moz-range-track": {
+      "@apply h-1": {}
+    },
+    "&::-moz-range-thumb": {
+      "@apply size-4": {},
+      "--filler-offset": "0.4rem"
+    }
+  },
+  ".range-sm": {
+    "@apply h-5": {},
+    "&::-webkit-slider-runnable-track": {
+      "@apply h-1": {}
+    },
+    "&::-webkit-slider-thumb": {
+      "@apply size-5": {},
+      "--filler-offset": "0.5rem"
+    },
+    "&::-moz-range-track": {
+      "@apply h-1": {}
+    },
+    "&::-moz-range-thumb": {
+      "@apply size-5": {},
+      "--filler-offset": "0.5rem"
+    }
+  },
+  ".range-md": {
+    "@apply h-6": {},
+    "&::-webkit-slider-runnable-track": {
+      "@apply h-2": {}
+    },
+    "&::-webkit-slider-thumb": {
+      "@apply size-6": {},
+      "--filler-offset": "0.6rem"
+    },
+    "&::-moz-range-track": {
+      "@apply h-2": {}
+    },
+    "&::-moz-range-thumb": {
+      "@apply size-6": {},
+      "--filler-offset": "0.6rem"
+    }
+  },
+  ".range-lg": {
+    "@apply h-8": {},
+    "&::-webkit-slider-runnable-track": {
+      "@apply h-4": {}
+    },
+    "&::-webkit-slider-thumb": {
+      "@apply size-8": {},
+      "--filler-offset": "1rem"
+    },
+    "&::-moz-range-track": {
+      "@apply h-4": {}
+    },
+    "&::-moz-range-thumb": {
+      "@apply size-8": {},
+      "--filler-offset": "1rem"
+    }
+  }
+};

package/components/toggle/config.js

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

package/components/toggle/index.css

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

package/components/toggle/index.js

@@ -0,0 +1,101 @@
+export default {
+  ".toggle": {
+    "@apply h-6 w-12 inline-flex cursor-pointer rounded-[--radius-badge] rounded-badge border-current appearance-none border shrink-0 text-base-content/50 p-[.1875rem]": {},
+    "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
+    "&:before": {
+      "@apply block h-full grow-0": {},
+      "content": "\"\"",
+      "transition": "flex-grow 0.2s"
+    },
+    "&:after": {
+      "@apply [border-radius:calc(var(--radius-badge)-3px)] aspect-square h-full block bg-current relative translate-x-0 start-0": {},
+      "content": "\"\"",
+      "transition": "background-color 0.1s, translate 0.2s, inset-inline-start 0.2s",
+      "boxShadow": "0 -1px oklch(0% 0 0 / 0.1) inset,\n      0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)"
+    },
+    "&:focus-visible": {
+      "@apply outline outline-2 outline-offset-2 outline-current": {}
+    },
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply bg-base-100 text-base-content": {},
+      "&:before": {
+        "@apply grow": {}
+      },
+      "&:after": {
+        "@apply bg-current": {},
+        "@starting-style": {
+          "opacity": 0
+        }
+      }
+    },
+    "&:indeterminate": {
+      "&:before": {
+        "@apply grow-0": {}
+      },
+      "&:after": {
+        "@apply -translate-x-1/2 start-1/2": {}
+      }
+    },
+    "&:disabled": {
+      "@apply cursor-not-allowed opacity-30": {},
+      "&:after": {
+        "@apply border border-current bg-transparent": {}
+      }
+    }
+  },
+  ".toggle-primary": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-primary": {}
+    }
+  },
+  ".toggle-secondary": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-secondary": {}
+    }
+  },
+  ".toggle-accent": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-accent": {}
+    }
+  },
+  ".toggle-success": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-success": {}
+    }
+  },
+  ".toggle-warning": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-warning": {}
+    }
+  },
+  ".toggle-info": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-info": {}
+    }
+  },
+  ".toggle-error": {
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "@apply text-error": {}
+    }
+  },
+  ".toggle-xs": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply h-4 w-6": {}
+    }
+  },
+  ".toggle-sm": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply h-5 w-8": {}
+    }
+  },
+  ".toggle-md": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply h-6 w-12": {}
+    }
+  },
+  ".toggle-lg": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply h-8 w-16": {}
+    }
+  }
+};

package/index.css

@@ -0,0 +1,12 @@
+/* themes */
+@import "./themes";
+@import "./themes/light";
+@import "./themes/dark";
+
+/* components */
+@config "./components/button/config.js";
+@config "./components/toggle/config.js";
+@config "./components/radio/config.js";
+@config "./components/checkbox/config.js";
+@config "./components/range/config.js";
+@config "./components/input/config.js";

package/package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "daisyui",
-  "version": "4.12.9",
+  "version": "5.0.0-alpha.0",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -19,29 +20,24 @@
   "keywords": [
     "design-system",
     "tailwindcss",
+    "css-library",
     "components",
     "ui-library",
     "component",
     "framework",
     "tailwind",
     "daisyui",
-    "theming",
-    "postcss",
+    "themes",
     "design",
     "css",
     "ui"
   ],
-  "main": "src/index.js",
-  "typings": "src/index.d.ts",
-  "types": "src/index.d.ts",
+  "main": "index.css",
   "files": [
-    "src/lib/**/*.js",
-    "dist/*.js",
-    "dist/{themes,styled,unstyled,full}.css",
-    "src/index.js",
-    "src/theming/*.js",
-    "src/theming/*.d.ts",
-    "src/index.d.ts"
+    "themes",
+    "components",
+    "index.css",
+    "plugin.js"
   ],
   "engines": {
     "node": ">=16.9.0"
@@ -59,8 +55,7 @@
     "init": "npm install && npm run build && cd src/docs && npm install && npm run get-json --silent && cd src/experiments/playground && npm install",
     "format": "biome format --write .",
     "lint": "biome lint . --write",
-    "build": "node src/build",
-    "build:skipfullcss": "node src/build --skipfullcss",
+    "build": "node build.js",
     "dev": "cd src/docs && npm run dev",
     "playground": "cd src/experiments/playground && npm run dev",
     "release": "node src/release",
@@ -69,17 +64,10 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.1",
-    "autoprefixer": "10.4.19",
+    "@tailwindcss/cli": "^4.0.0-alpha.23",
     "commit-and-tag-version": "12.4.1",
-    "postcss-cli": "11.0.0",
-    "postcss-import": "16.1.0",
-    "prejss-cli": "0.3.3",
-    "tailwindcss": "3.4.4"
-  },
-  "dependencies": {
-    "css-selector-tokenizer": "^0.8",
-    "culori": "^3",
-    "picocolors": "^1",
-    "postcss-js": "^4"
+    "postcss": "^8.4.45",
+    "postcss-js": "^4.0.1",
+    "tailwindcss": "^4.0.0-alpha.23"
   }
 }

package/plugin.js

@@ -0,0 +1,2 @@
+function u(n, i) { return { handler: n, config: i } } u.withOptions = function (n, i = () => ({})) { function t(o) { return { handler: n(o), config: i(o) } } return t.__isOptionsFunction = !0, t };
+export const plugin = u

package/themes/dark/index.css

@@ -0,0 +1,26 @@
+[data-theme=dark] {
+    --color-base-100: oklch(0% 0 0);
+    --color-base-200: oklch(6.1151% 0 0);
+    --color-base-300: oklch(10.4169% 0.00108 197.137559);
+    --color-base-content: oklch(97.8078% 0.029596 256.84795);
+    --color-primary: oklch(49.12% 0.3096 275.75);
+    --color-primary-content: oklch(89.824% 0.06192 275.75);
+    --color-secondary: oklch(69.71% 0.329 342.55);
+    --color-secondary-content: oklch(98.71% 0.0106 342.55);
+    --color-accent: oklch(76.76% 0.184 183.61);
+    --color-accent-content: oklch(15.352% 0.0368 183.61);
+    --color-neutral: oklch(32.1785% 0.02476 255.701624);
+    --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
+    --color-info: oklch(72.06% 0.191 231.6);
+    --color-info-content: oklch(0% 0 0);
+    --color-success: oklch(64.8% 0.15 160);
+    --color-success-content: oklch(0% 0 0);
+    --color-warning: oklch(84.71% 0.199 83.87);
+    --color-warning-content: oklch(0% 0 0);
+    --color-error: oklch(71.76% 0.221 22.18);
+    --color-error-content: oklch(0% 0 0);
+    --radius-badge: 1.9rem;
+    --radius-btn: 0.5rem;
+    --radius-box: 1rem;
+    --spacing-button-border: 1px;
+}

package/themes/index.css

@@ -0,0 +1,26 @@
+@theme {
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(96.1151% 0 0);
+  --color-base-300: oklch(92.4169% 0.00108 197.137559);
+  --color-base-content: oklch(27.8078% 0.029596 256.84795);
+  --color-primary: oklch(49.12% 0.3096 275.75);
+  --color-primary-content: oklch(89.824% 0.06192 275.75);
+  --color-secondary: oklch(69.71% 0.329 342.55);
+  --color-secondary-content: oklch(98.71% 0.0106 342.55);
+  --color-accent: oklch(76.76% 0.184 183.61);
+  --color-accent-content: oklch(15.352% 0.0368 183.61);
+  --color-neutral: oklch(32.1785% 0.02476 255.701624);
+  --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
+  --color-info: oklch(72.06% 0.191 231.6);
+  --color-info-content: oklch(0% 0 0);
+  --color-success: oklch(64.8% 0.15 160);
+  --color-success-content: oklch(0% 0 0);
+  --color-warning: oklch(84.71% 0.199 83.87);
+  --color-warning-content: oklch(0% 0 0);
+  --color-error: oklch(71.76% 0.221 22.18);
+  --color-error-content: oklch(0% 0 0);
+  --radius-badge: 1.9rem;
+  --radius-btn: 0.5rem;
+  --radius-box: 1rem;
+  --spacing-button-border: 1px;
+}

package/themes/light/index.css

@@ -0,0 +1,26 @@
+[data-theme=light] {
+    --color-base-100: oklch(100% 0 0);
+    --color-base-200: oklch(96.1151% 0 0);
+    --color-base-300: oklch(92.4169% 0.00108 197.137559);
+    --color-base-content: oklch(27.8078% 0.029596 256.84795);
+    --color-primary: oklch(49.12% 0.3096 275.75);
+    --color-primary-content: oklch(89.824% 0.06192 275.75);
+    --color-secondary: oklch(69.71% 0.329 342.55);
+    --color-secondary-content: oklch(98.71% 0.0106 342.55);
+    --color-accent: oklch(76.76% 0.184 183.61);
+    --color-accent-content: oklch(15.352% 0.0368 183.61);
+    --color-neutral: oklch(32.1785% 0.02476 255.701624);
+    --color-neutral-content: oklch(89.4994% 0.011585 252.096176);
+    --color-info: oklch(72.06% 0.191 231.6);
+    --color-info-content: oklch(0% 0 0);
+    --color-success: oklch(64.8% 0.15 160);
+    --color-success-content: oklch(0% 0 0);
+    --color-warning: oklch(84.71% 0.199 83.87);
+    --color-warning-content: oklch(0% 0 0);
+    --color-error: oklch(71.76% 0.221 22.18);
+    --color-error-content: oklch(0% 0 0);
+    --radius-badge: 1.9rem;
+    --radius-btn: 0.5rem;
+    --radius-box: 1rem;
+    --spacing-button-border: 1px;
+}

package/dist/base.js

@@ -1 +0,0 @@
-module.exports = {":root,\n[data-theme]":{"backgroundColor":"var(--fallback-b1,oklch(var(--b1)/1))","color":"var(--fallback-bc,oklch(var(--bc)/1))"},"@supports not (color: oklch(0% 0 0))":{":root":{"colorScheme":"light","-FallbackP":"#491eff","-FallbackPc":"#d4dbff","-FallbackS":"#ff41c7","-FallbackSc":"#fff9fc","-FallbackA":"#00cfbd","-FallbackAc":"#00100d","-FallbackN":"#2b3440","-FallbackNc":"#d7dde4","-FallbackB1":"#ffffff","-FallbackB2":"#e5e6e6","-FallbackB3":"#e5e6e6","-FallbackBc":"#1f2937","-FallbackIn":"#00b3f0","-FallbackInc":"#000000","-FallbackSu":"#00ca92","-FallbackSuc":"#000000","-FallbackWa":"#ffc22d","-FallbackWac":"#000000","-FallbackEr":"#ff6f70","-FallbackErc":"#000000"},"@media (prefers-color-scheme: dark)":{":root":{"colorScheme":"dark","-FallbackP":"#7582ff","-FallbackPc":"#050617","-FallbackS":"#ff71cf","-FallbackSc":"#190211","-FallbackA":"#00c7b5","-FallbackAc":"#000e0c","-FallbackN":"#2a323c","-FallbackNc":"#a6adbb","-FallbackB1":"#1d232a","-FallbackB2":"#191e24","-FallbackB3":"#15191e","-FallbackBc":"#a6adbb","-FallbackIn":"#00b3f0","-FallbackInc":"#000000","-FallbackSu":"#00ca92","-FallbackSuc":"#000000","-FallbackWa":"#ffc22d","-FallbackWac":"#000000","-FallbackEr":"#ff6f70","-FallbackErc":"#000000"}}},"html":{"WebkitTapHighlightColor":"transparent"},"*":{"scrollbarColor":"color-mix(in oklch, currentColor 35%, transparent) transparent"},"*:hover":{"scrollbarColor":"color-mix(in oklch, currentColor 60%, transparent) transparent"}};