daisyui 5.0.0-alpha.9 → 5.0.0-beta.2

package/functions/addPrefix.js

@@ -0,0 +1,138 @@
+const defaultExcludedPrefixes = ["color-", "size-", "radius-", "border", "depth", "noise"]
+
+const shouldExcludeVariable = (variableName, excludedPrefixes) => {
+  return excludedPrefixes.some((excludedPrefix) => variableName.startsWith(excludedPrefix))
+}
+
+const prefixVariable = (variableName, prefix, excludedPrefixes) => {
+  if (shouldExcludeVariable(variableName, excludedPrefixes)) {
+    return variableName
+  }
+  return `${prefix}${variableName}`
+}
+
+const getPrefixedSelector = (selector, prefix) => {
+  if (!selector.startsWith(".")) return selector
+  return `.${prefix}${selector.slice(1)}`
+}
+
+const getPrefixedKey = (key, prefix, excludedPrefixes) => {
+  const prefixDot = prefix ? `.${prefix}` : ""
+  const prefixAmpDot = prefix ? `&.${prefix}` : ""
+
+  if (!prefix) return key
+
+  if (key.startsWith("--")) {
+    const variableName = key.slice(2)
+    return `--${prefixVariable(variableName, prefix, excludedPrefixes)}`
+  }
+
+  if (key.startsWith("@") || key.startsWith("[")) {
+    return key
+  }
+
+  if (key.startsWith("&.")) {
+    return `${prefixAmpDot}${key.slice(2)}`
+  }
+
+  if (key.startsWith(":")) {
+    return key.replace(/\.([\w-]+)/g, `.${prefix}$1`)
+  }
+
+  if (
+    key.includes(".") &&
+    !key.includes(" ") &&
+    !key.includes(">") &&
+    !key.includes("+") &&
+    !key.includes("~")
+  ) {
+    return key
+      .split(".")
+      .filter(Boolean)
+      .map((part) => prefix + part)
+      .join(".")
+      .replace(/^/, ".")
+  }
+
+  if (key.includes(">") || key.includes("+") || key.includes("~")) {
+    return key
+      .split(/\s*([>+~])\s*/)
+      .map((part) => {
+        part = part.trim()
+        // Check if part contains any CSS function (like :not(), :is(), :where(), etc)
+        if (part.includes(":(") || part.match(/:[a-z-]+\(/)) {
+          return part.replace(/\.[\w-]+(?=[\s)])/g, (match) => `.${prefix}${match.slice(1)}`)
+        }
+        if (part === ">" || part === "+" || part === "~") return ` ${part} `
+        return part.startsWith(".") ? getPrefixedSelector(part, prefix) : part
+      })
+      .join("")
+  }
+
+  if (key.includes(" ")) {
+    return key
+      .split(/\s+/)
+      .map((part) => {
+        if (part.startsWith(".")) {
+          return getPrefixedSelector(part, prefix)
+        }
+        return part
+      })
+      .join(" ")
+  }
+
+  if (key.includes(":")) {
+    const [selector, ...pseudo] = key.split(":")
+    if (selector.startsWith(".")) {
+      return `${getPrefixedSelector(selector, prefix)}:${pseudo.join(":")}`
+    }
+    return key.replace(/\.([\w-]+)/g, `.${prefix}$1`)
+  }
+
+  if (key.startsWith(".")) {
+    return getPrefixedSelector(key, prefix)
+  }
+
+  return key
+}
+
+const processArrayValue = (value, prefix, excludedPrefixes) => {
+  return value.map((item) => {
+    if (typeof item === "string") {
+      if (item.startsWith(".")) {
+        return prefix ? `.${prefix}${item.slice(1)}` : item
+      }
+      return processStringValue(item, prefix, excludedPrefixes)
+    }
+    return item
+  })
+}
+
+const processStringValue = (value, prefix, excludedPrefixes) => {
+  return value.replace(/var\(--([^)]+)\)/g, (match, variableName) => {
+    if (shouldExcludeVariable(variableName, excludedPrefixes)) {
+      return match
+    }
+    return `var(--${prefix}${variableName})`
+  })
+}
+
+const processValue = (value, prefix, excludedPrefixes) => {
+  if (Array.isArray(value)) {
+    return processArrayValue(value, prefix, excludedPrefixes)
+  } else if (typeof value === "object" && value !== null) {
+    return addPrefix(value, prefix, excludedPrefixes)
+  } else if (typeof value === "string") {
+    return processStringValue(value, prefix, excludedPrefixes)
+  } else {
+    return value
+  }
+}
+
+export const addPrefix = (obj, prefix, excludedPrefixes = defaultExcludedPrefixes) => {
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    const newKey = getPrefixedKey(key, prefix, excludedPrefixes)
+    result[newKey] = processValue(value, prefix, excludedPrefixes)
+    return result
+  }, {})
+}

package/functions/plugin.js

@@ -0,0 +1,11 @@
+export const plugin = {
+  withOptions: (pluginFunction, configFunction = () => ({})) => {
+    const optionsFunction = (options) => {
+      const handler = pluginFunction(options)
+      const config = configFunction(options)
+      return { handler, config }
+    }
+    optionsFunction.__isOptionsFunction = true
+    return optionsFunction
+  },
+}

package/functions/pluginOptionsHandler.js

@@ -0,0 +1,79 @@
+import themeOrder from "./themeOrder.js"
+
+export const pluginOptionsHandler = (() => {
+  let firstRun = true
+  return (options, addBase, themesObject, packageVersion) => {
+    const {
+      logs = true,
+      root = ":root",
+      themes = ["light --default", "dark --prefersdark"],
+      include,
+      exclude,
+      prefix = "",
+    } = options || {}
+
+    if (logs !== false && firstRun) {
+      console.log(
+        `${atob("Lyoh")} ${decodeURIComponent("%F0%9F%8C%BC")} ${atob("ZGFpc3lVSQ==")} ${packageVersion} ${atob("Ki8=")}`,
+      )
+      firstRun = false
+    }
+
+    const applyTheme = (themeName, flags) => {
+      const theme = themesObject[themeName]
+      if (theme) {
+        let selector = `${root}:has(input.theme-controller[value=${themeName}]:checked),[data-theme=${themeName}]`
+        if (flags.includes("--default")) {
+          selector = `:where(${root}),${selector}`
+        }
+        addBase({ [selector]: theme })
+
+        if (flags.includes("--prefersdark")) {
+          addBase({ "@media (prefers-color-scheme: dark)": { [root]: theme } })
+        }
+      }
+    }
+
+    if (themes === "all") {
+      if (themesObject["light"]) {
+        applyTheme("light", ["--default"])
+      }
+
+      if (themesObject["dark"]) {
+        addBase({ "@media (prefers-color-scheme: dark)": { [root]: themesObject["dark"] } })
+      }
+
+      themeOrder.forEach((themeName) => {
+        if (themesObject[themeName]) {
+          applyTheme(themeName, [])
+        }
+      })
+    } else if (themes) {
+      const themeArray = Array.isArray(themes) ? themes : [themes]
+
+      // default theme
+      themeArray.forEach((themeOption) => {
+        const [themeName, ...flags] = themeOption.split(" ")
+        if (flags.includes("--default")) {
+          applyTheme(themeName, ["--default"])
+        }
+      })
+
+      // prefers dark theme
+      themeArray.forEach((themeOption) => {
+        const [themeName, ...flags] = themeOption.split(" ")
+        if (flags.includes("--prefersdark")) {
+          addBase({ "@media (prefers-color-scheme: dark)": { [root]: themesObject[themeName] } })
+        }
+      })
+
+      // other themes
+      themeArray.forEach((themeOption) => {
+        const [themeName] = themeOption.split(" ")
+        applyTheme(themeName, [])
+      })
+    }
+
+    return { include, exclude, prefix }
+  }
+})()

package/functions/themeOrder.js

@@ -0,0 +1,37 @@
+export default [
+  "light",
+  "dark",
+  "cupcake",
+  "bumblebee",
+  "emerald",
+  "corporate",
+  "synthwave",
+  "retro",
+  "cyberpunk",
+  "valentine",
+  "halloween",
+  "garden",
+  "forest",
+  "aqua",
+  "lofi",
+  "pastel",
+  "fantasy",
+  "wireframe",
+  "black",
+  "luxury",
+  "dracula",
+  "cmyk",
+  "autumn",
+  "business",
+  "acid",
+  "lemonade",
+  "night",
+  "coffee",
+  "winter",
+  "dim",
+  "nord",
+  "sunset",
+  "caramellatte",
+  "abyss",
+  "silk",
+]

package/functions/variables.js

@@ -0,0 +1,29 @@
+export default {
+  colors: {
+    "base-100": "var(--color-base-100)",
+    "base-200": "var(--color-base-200)",
+    "base-300": "var(--color-base-300)",
+    "base-content": "var(--color-base-content)",
+    primary: "var(--color-primary)",
+    "primary-content": "var(--color-primary-content)",
+    secondary: "var(--color-secondary)",
+    "secondary-content": "var(--color-secondary-content)",
+    accent: "var(--color-accent)",
+    "accent-content": "var(--color-accent-content)",
+    neutral: "var(--color-neutral)",
+    "neutral-content": "var(--color-neutral-content)",
+    info: "var(--color-info)",
+    "info-content": "var(--color-info-content)",
+    success: "var(--color-success)",
+    "success-content": "var(--color-success-content)",
+    warning: "var(--color-warning)",
+    "warning-content": "var(--color-warning-content)",
+    error: "var(--color-error)",
+    "error-content": "var(--color-error-content)",
+  },
+  borderRadius: {
+    selector: "var(--radius-selector)",
+    field: "var(--radius-field)",
+    box: "var(--radius-box)",
+  },
+}

package/imports.js

@@ -0,0 +1,68 @@
+import rootcolor from './base/rootcolor/index.js';
+import reset from './base/reset/index.js';
+import rootscrollgutter from './base/rootscrollgutter/index.js';
+import properties from './base/properties/index.js';
+import rootscrolllock from './base/rootscrolllock/index.js';
+import scrollbar from './base/scrollbar/index.js';
+import kbd from './components/kbd/index.js';
+import dropdown from './components/dropdown/index.js';
+import navbar from './components/navbar/index.js';
+import drawer from './components/drawer/index.js';
+import footer from './components/footer/index.js';
+import tooltip from './components/tooltip/index.js';
+import rating from './components/rating/index.js';
+import calendar from './components/calendar/index.js';
+import radio from './components/radio/index.js';
+import card from './components/card/index.js';
+import validator from './components/validator/index.js';
+import loading from './components/loading/index.js';
+import indicator from './components/indicator/index.js';
+import radialprogress from './components/radialprogress/index.js';
+import progress from './components/progress/index.js';
+import chat from './components/chat/index.js';
+import countdown from './components/countdown/index.js';
+import input from './components/input/index.js';
+import alert from './components/alert/index.js';
+import skeleton from './components/skeleton/index.js';
+import toast from './components/toast/index.js';
+import swap from './components/swap/index.js';
+import checkbox from './components/checkbox/index.js';
+import label from './components/label/index.js';
+import diff from './components/diff/index.js';
+import collapse from './components/collapse/index.js';
+import status from './components/status/index.js';
+import tab from './components/tab/index.js';
+import carousel from './components/carousel/index.js';
+import toggle from './components/toggle/index.js';
+import mask from './components/mask/index.js';
+import textarea from './components/textarea/index.js';
+import button from './components/button/index.js';
+import steps from './components/steps/index.js';
+import stat from './components/stat/index.js';
+import link from './components/link/index.js';
+import table from './components/table/index.js';
+import list from './components/list/index.js';
+import divider from './components/divider/index.js';
+import menu from './components/menu/index.js';
+import avatar from './components/avatar/index.js';
+import fieldset from './components/fieldset/index.js';
+import select from './components/select/index.js';
+import stack from './components/stack/index.js';
+import filter from './components/filter/index.js';
+import hero from './components/hero/index.js';
+import mockup from './components/mockup/index.js';
+import range from './components/range/index.js';
+import modal from './components/modal/index.js';
+import timeline from './components/timeline/index.js';
+import breadcrumbs from './components/breadcrumbs/index.js';
+import fileinput from './components/fileinput/index.js';
+import dock from './components/dock/index.js';
+import badge from './components/badge/index.js';
+import join from './utilities/join/index.js';
+import radius from './utilities/radius/index.js';
+import glass from './utilities/glass/index.js';
+import typography from './utilities/typography/index.js';
+
+export const base = {rootcolor,reset,rootscrollgutter,properties,rootscrolllock,scrollbar};
+export const components = {kbd,dropdown,navbar,drawer,footer,tooltip,rating,calendar,radio,card,validator,loading,indicator,radialprogress,progress,chat,countdown,input,alert,skeleton,toast,swap,checkbox,label,diff,collapse,status,tab,carousel,toggle,mask,textarea,button,steps,stat,link,table,list,divider,menu,avatar,fieldset,select,stack,filter,hero,mockup,range,modal,timeline,breadcrumbs,fileinput,dock,badge};
+export const utilities = {join,radius,glass,typography};

package/index.js

@@ -1,87 +1,51 @@
-import rootColor from './base/root-color/index.js';
-import properties from './base/properties/index.js';
-import scrollbar from './base/scrollbar/index.js';
-import kbd from './components/kbd/index.js';
-import dropdown from './components/dropdown/index.js';
-import navbar from './components/navbar/index.js';
-import footer from './components/footer/index.js';
-import tooltip from './components/tooltip/index.js';
-import rating from './components/rating/index.js';
-import radio from './components/radio/index.js';
-import card from './components/card/index.js';
-import loading from './components/loading/index.js';
-import progress from './components/progress/index.js';
-import chat from './components/chat/index.js';
-import countdown from './components/countdown/index.js';
-import input from './components/input/index.js';
-import alert from './components/alert/index.js';
-import skeleton from './components/skeleton/index.js';
-import swap from './components/swap/index.js';
-import checkbox from './components/checkbox/index.js';
-import collapse from './components/collapse/index.js';
-import status from './components/status/index.js';
-import tab from './components/tab/index.js';
-import toggle from './components/toggle/index.js';
-import mask from './components/mask/index.js';
-import button from './components/button/index.js';
-import steps from './components/steps/index.js';
-import link from './components/link/index.js';
-import table from './components/table/index.js';
-import radialProgress from './components/radial-progress/index.js';
-import divider from './components/divider/index.js';
-import menu from './components/menu/index.js';
-import avatar from './components/avatar/index.js';
-import select from './components/select/index.js';
-import stack from './components/stack/index.js';
-import hero from './components/hero/index.js';
-import range from './components/range/index.js';
-import timeline from './components/timeline/index.js';
-import badge from './components/badge/index.js';
-import join from './utilities/join/index.js';
+import { version } from "./package.json"
+import { pluginOptionsHandler } from "./functions/pluginOptionsHandler.js"
+import { plugin } from "./functions/plugin.js"
+import variables from "./functions/variables.js"
+import themesObject from "./theme/object.js"
+import { base, components, utilities } from "./imports.js"
 
-export default ({ addBase, addComponents, addUtilities }) => {
-  addBase({
-    ...rootColor,
-    ...properties,
-    ...scrollbar,
-  })
-  addComponents({
-    ...kbd,
-    ...dropdown,
-    ...navbar,
-    ...footer,
-    ...tooltip,
-    ...rating,
-    ...radio,
-    ...card,
-    ...loading,
-    ...progress,
-    ...chat,
-    ...countdown,
-    ...input,
-    ...alert,
-    ...skeleton,
-    ...swap,
-    ...checkbox,
-    ...collapse,
-    ...status,
-    ...tab,
-    ...toggle,
-    ...mask,
-    ...button,
-    ...steps,
-    ...link,
-    ...table,
-    ...radialProgress,
-    ...divider,
-    ...menu,
-    ...avatar,
-    ...select,
-    ...stack,
-    ...hero,
-    ...range,
-    ...timeline,
-    ...badge,
-  })
-  addUtilities({    ...join, })
-}
+export default plugin.withOptions(
+  (options) => {
+    return ({ addBase, addComponents, addUtilities }) => {
+      const {
+        include,
+        exclude,
+        prefix = "",
+      } = pluginOptionsHandler(options, addBase, themesObject, version)
+
+      const shouldIncludeItem = (name) => {
+        if (include && exclude) {
+          return include.includes(name) && !exclude.includes(name)
+        }
+        if (include) {
+          return include.includes(name)
+        }
+        if (exclude) {
+          return !exclude.includes(name)
+        }
+        return true
+      }
+
+      Object.entries(base).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addBase, prefix })
+      })
+
+      Object.entries(components).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addComponents, prefix })
+      })
+
+      Object.entries(utilities).forEach(([name, item]) => {
+        if (!shouldIncludeItem(name)) return
+        item({ addUtilities, prefix })
+      })
+    }
+  },
+  () => ({
+    theme: {
+      extend: variables,
+    },
+  }),
+)

package/package.json

@@ -1,82 +1,70 @@
 {
-	"type": "module",
-	"name": "daisyui",
-	"version": "5.0.0-alpha.9",
-	"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.js",
-	"files": [
-		"themes",
-		"colors",
-		"base",
-		"components",
-		"utilities",
-		"index.css",
-		"index.js",
-		"chunks.css",
-		"full.css"
-	],
-	"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.27",
-		"commit-and-tag-version": "12.4.1",
-		"lightningcss": "^1.27.0",
-		"postcss": "^8.4.45",
-		"postcss-js": "^4.0.1",
-		"postcss-prefixer": "^3.0.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.6",
-		"zlib": "^1.0.5"
-	}
+  "type": "module",
+  "name": "daisyui",
+  "version": "5.0.0-beta.2",
+  "description": "daisyUI 5 - Tailwind CSS Component Library",
+  "author": "Pouya Saadeghi",
+  "license": "MIT",
+  "homepage": "https://daisyui.com",
+  "repository": "github:saadeghi/daisyui",
+  "funding": "https://github.com/saadeghi/daisyui?sponsor=1",
+  "bugs": {
+    "url": "https://github.com/saadeghi/daisyui/issues"
+  },
+  "keywords": [
+    "daisyui",
+    "tailwind",
+    "tailwindcss",
+    "tailwind css",
+    "tailwind react",
+    "tailwind vue",
+    "tailwind plugin",
+    "tailwind component",
+    "tailwind next",
+    "tailwind nuxt",
+    "tailwind svelte",
+    "tailwind css plugin",
+    "tailwind astro",
+    "tailwind laravel",
+    "tailwind rails",
+    "react",
+    "css",
+    "ui",
+    "vue",
+    "component",
+    "framework",
+    "nextjs",
+    "front-end",
+    "laravel",
+    "theme",
+    "nuxt",
+    "svelte",
+    "astro",
+    "component library",
+    "css library"
+  ],
+  "main": "./index.js",
+  "module": "./index.js",
+  "browser": "./daisyui.css",
+  "files": [
+    "base",
+    "colors",
+    "components",
+    "!components/*/class.json",
+    "functions/addPrefix.js",
+    "functions/plugin.js",
+    "functions/pluginOptionsHandler.js",
+    "functions/themeOrder.js",
+    "functions/variables.js",
+    "theme",
+    "utilities",
+    "imports.js",
+    "index.js",
+    "chunks.css",
+    "daisyui.css",
+    "themes.css"
+  ],
+  "scripts": {
+    "build": "bun build.js"
+  }
 }

package/theme/abyss/index.js

@@ -0,0 +1,7 @@
+import abyss from './object.js';
+import { addPrefix } from '../../functions/addPrefix.js';
+
+export default ({ addBase, prefix = '' }) => {
+  const prefixedabyss = addPrefix(abyss, prefix);
+  addBase({ ...prefixedabyss });
+};