daisyui 4.12.10 → 5.0.0-alpha.2

package/components/toggle/index.js

@@ -0,0 +1,102 @@
+export default {
+  ".toggle": {
+    "@apply rounded-badge text-base-content/50 inline-flex h-6 w-12 shrink-0 cursor-pointer appearance-none rounded-[var(--radius-badge)] border border-current p-[.1875rem] align-middle": {},
+    "boxShadow": "0 1px color-mix(in oklab, currentColor, transparent 90%) inset",
+    "transition": "color .3s",
+    "&:before": {
+      "@apply block h-full grow-0": {},
+      "content": "\"\"",
+      "transition": "flex-grow 0.2s"
+    },
+    "&:after": {
+      "@apply relative start-0 block aspect-square h-full translate-x-0 [border-radius:calc(var(--radius-badge)-3px)] bg-current": {},
+      "content": "\"\"",
+      "transition": "background-color 0.1s,\n      translate 0.2s,\n      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,\n      0 1px color-mix(in oklab, currentColor, transparent 90%)"
+    },
+    "&: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 start-1/2 -translate-x-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 p-[.0625rem] h-4 w-6": {}
+    }
+  },
+  ".toggle-sm": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply p-[.125rem] h-5 w-8": {}
+    }
+  },
+  ".toggle-md": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply p-[.1875rem] h-6 w-12": {}
+    }
+  },
+  ".toggle-lg": {
+    "&:is([type=\"checkbox\"])": {
+      "@apply p-[.25rem] h-8 w-16": {}
+    }
+  }
+};

package/components/toggle.css

@@ -0,0 +1,143 @@
+.toggle {
+    display: inline-flex;
+    height: var(--spacing-6, 1.5rem);
+    width: var(--spacing-12, 3rem);
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    border-radius: var(--radius-badge);
+    border-radius: var(--radius-badge, 1.9rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: currentColor;
+    padding: .1875rem;
+    vertical-align: middle;
+    color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 50%, transparent);
+    box-shadow: 0 1px color-mix(in oklab, currentColor, transparent 90%) inset;
+    transition: color .3s;
+    &:before {
+      display: block;
+      height: 100%;
+      flex-grow: 0;
+      content: "";
+      transition: flex-grow 0.2s;
+    }
+    &:after {
+      position: relative;
+      inset-inline-start: var(--spacing-0, 0px);
+      display: block;
+      aspect-ratio: 1 / 1;
+      height: 100%;
+      --tw-translate-x: var(--spacing-0, 0px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      border-radius: calc(var(--radius-badge) - 3px);
+      background-color: currentColor;
+      content: "";
+      transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
+      box-shadow: 0 -1px oklch(0% 0 0 / 0.1) inset, 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px color-mix(in oklab, currentColor, transparent 90%);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+    &:checked, &[aria-checked="true"] {
+      background-color: var(--color-base-100, oklch(100% 0 0));
+      color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+      &:before {
+        flex-grow: 1;
+      }
+      &:after {
+        background-color: currentColor;
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+    &:indeterminate {
+      &:before {
+        flex-grow: 0;
+      }
+      &:after {
+        inset-inline-start: calc(1/2 * 100%);
+        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 30%;
+      &:after {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: currentColor;
+        background-color: transparent;
+      }
+    }
+  }
+  .toggle-primary {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    }
+  }
+  .toggle-secondary {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    }
+  }
+  .toggle-accent {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    }
+  }
+  .toggle-success {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-success, oklch(64.8% 0.15 160));
+    }
+  }
+  .toggle-warning {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    }
+  }
+  .toggle-info {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-info, oklch(72.06% 0.191 231.6));
+    }
+  }
+  .toggle-error {
+    &:checked, &[aria-checked="true"] {
+      color: var(--color-error, oklch(71.76% 0.221 22.18));
+    }
+  }
+  .toggle-xs {
+    &:is([type="checkbox"]) {
+      height: var(--spacing-4, 1rem);
+      width: var(--spacing-6, 1.5rem);
+      padding: .0625rem;
+    }
+  }
+  .toggle-sm {
+    &:is([type="checkbox"]) {
+      height: var(--spacing-5, 1.25rem);
+      width: var(--spacing-8, 2rem);
+      padding: .125rem;
+    }
+  }
+  .toggle-md {
+    &:is([type="checkbox"]) {
+      height: var(--spacing-6, 1.5rem);
+      width: var(--spacing-12, 3rem);
+      padding: .1875rem;
+    }
+  }
+  .toggle-lg {
+    &:is([type="checkbox"]) {
+      height: var(--spacing-8, 2rem);
+      width: var(--spacing-16, 4rem);
+      padding: .25rem;
+    }
+  }

package/functions/plugin.js

@@ -0,0 +1,10 @@
+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/index.css

@@ -0,0 +1,14 @@
+@import "./themes";
+@import "./themes/light";
+@import "./themes/dark";
+@config "./components/kbd/config.js";
+@config "./components/rating/config.js";
+@config "./components/radio/config.js";
+@config "./components/input/config.js";
+@config "./components/checkbox/config.js";
+@config "./components/toggle/config.js";
+@config "./components/mask/config.js";
+@config "./components/button/config.js";
+@config "./components/select/config.js";
+@config "./components/range/config.js";
+@config "./components/badge/config.js";

package/package.json

@@ -1,85 +1,76 @@
 {
-  "name": "daisyui",
-  "version": "4.12.10",
-  "description": "daisyUI - Tailwind CSS Components",
-  "author": "Pouya Saadeghi",
-  "license": "MIT",
-  "homepage": "https://daisyui.com",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/saadeghi/daisyui.git"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/daisyui"
-  },
-  "bugs": {
-    "url": "https://github.com/saadeghi/daisyui/issues"
-  },
-  "keywords": [
-    "design-system",
-    "tailwindcss",
-    "components",
-    "ui-library",
-    "component",
-    "framework",
-    "tailwind",
-    "daisyui",
-    "theming",
-    "postcss",
-    "design",
-    "css",
-    "ui"
-  ],
-  "main": "src/index.js",
-  "typings": "src/index.d.ts",
-  "types": "src/index.d.ts",
-  "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"
-  ],
-  "engines": {
-    "node": ">=16.9.0"
-  },
-  "browserslist": [
-    "> 7%"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "branches": [
-      "master"
-    ]
-  },
-  "scripts": {
-    "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",
-    "dev": "cd src/docs && npm run dev",
-    "playground": "cd src/experiments/playground && npm run dev",
-    "release": "node src/release",
-    "publish:alpha": "npm publish --tag=alpha",
-    "alpha": "npm run release -- --alpha && npm publish --tag=alpha"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.8.1",
-    "autoprefixer": "10.4.19",
-    "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"
-  }
+	"type": "module",
+	"name": "daisyui",
+	"version": "5.0.0-alpha.2",
+	"description": "daisyUI - Tailwind CSS Components",
+	"author": "Pouya Saadeghi",
+	"license": "MIT",
+	"homepage": "https://daisyui.com",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/saadeghi/daisyui.git"
+	},
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/daisyui"
+	},
+	"bugs": {
+		"url": "https://github.com/saadeghi/daisyui/issues"
+	},
+	"keywords": [
+		"design-system",
+		"tailwindcss",
+		"css-library",
+		"components",
+		"ui-library",
+		"component",
+		"framework",
+		"tailwind",
+		"daisyui",
+		"themes",
+		"design",
+		"css",
+		"ui"
+	],
+	"main": "index.css",
+	"files": [
+		"themes",
+		"components",
+		"index.css",
+		"functions/plugin.js"
+	],
+	"engines": {
+		"node": ">=16.9.0"
+	},
+	"browserslist": [
+		"> 7%"
+	],
+	"publishConfig": {
+		"access": "public",
+		"branches": [
+			"master"
+		]
+	},
+	"scripts": {
+		"init": "npm install && npm run build && cd src/docs && npm install && npm run get-json --silent && cd src/experiments/playground && npm install",
+		"format": "npx prettier 'css/**/*' 'functions/**/*' '*.js' 'themes/**/*' '*.css' '.prettierrc' --write",
+		"lint": "biome lint . --write",
+		"build": "bun build.js",
+		"dev": "cd src/docs && npm run dev",
+		"playground": "cd src/experiments/playground && npm run dev",
+		"release": "node src/release",
+		"publish:alpha": "npm publish --tag=alpha",
+		"alpha": "npm run release -- --alpha && npm publish --tag=alpha"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.2",
+		"@tailwindcss/cli": "^4.0.0-alpha.25",
+		"commit-and-tag-version": "12.4.1",
+		"postcss": "^8.4.45",
+		"postcss-js": "^4.0.1",
+		"postcss-prefixer": "^3.0.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.6",
+		"tailwindcss": "^4.0.0-alpha.25"
+	}
 }

package/themes/dark/index.css

@@ -0,0 +1,26 @@
+[data-theme="dark"] {
+  --color-base-100: oklch(25.33% 0.016 252.42);
+  --color-base-200: oklch(23.26% 0.014 253.1);
+  --color-base-300: oklch(21.15% 0.012 254.09);
+  --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/default/index.css

@@ -0,0 +1,26 @@
+:root {
+  --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/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"}};