daisyui 4.3.0-alpha.11 → 4.3.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "4.3.0-alpha.11",
+  "version": "4.3.0-alpha.2",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -16,6 +16,7 @@
   "bugs": {
     "url": "https://github.com/saadeghi/daisyui/issues"
   },
+  "type": "module",
   "keywords": [
     "design-system",
     "tailwindcss",
@@ -32,16 +33,16 @@
     "ui"
   ],
   "main": "src/index.js",
-  "typings": "src/index.d.ts",
+  "module": "src/index.js",
   "types": "src/index.d.ts",
   "files": [
+    "themes.js",
     "src/lib/**/*.js",
-    "dist/*.js",
+    "dist/*.cjs",
     "dist/{themes,styled,unstyled,full}.css",
     "src/index.js",
     "src/theming/*.js",
-    "src/theming/*.d.ts",
-    "src/index.d.ts"
+    "src/**/*.d.ts"
   ],
   "engines": {
     "node": ">=16.9.0"
@@ -63,8 +64,7 @@
     "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"
+    "publish:alpha": "npm publish --tag=alpha"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",

package/src/docs/src/lib/data/themes.js

@@ -0,0 +1,34 @@
+export const themes = [
+  "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",
+]

package/src/experiments/playground/src/components/Demo.astro

@@ -0,0 +1,160 @@
+<div class="rounded-box bg-base-100 border-base-content/5 text-base-content not-prose grid gap-3 border p-6 max-w-2xl mx-auto my-6">
+  <div class="grid grid-cols-2 gap-2 md:grid-cols-4">
+    <button class="btn">Default</button>
+    <button class="btn btn-primary">Primary</button>
+    <button class="btn btn-secondary">Secondary</button>
+    <button class="btn btn-accent">Accent</button>
+    <button class="btn btn-info">Info</button>
+    <button class="btn btn-success">Success</button>
+    <button class="btn btn-warning">Warning</button>
+    <button class="btn btn-error">Error</button>
+  </div>
+  <div class="grid grid-cols-2 place-items-center gap-2 md:grid-cols-4">
+    <span class="badge">Default</span>
+    <span class="badge badge-primary">Primary</span>
+    <span class="badge badge-secondary">Secondary</span>
+    <span class="badge badge-accent">Accent</span>
+    <span class="badge badge-info">Info</span>
+    <span class="badge badge-success">Success</span>
+    <span class="badge badge-warning">Warning</span>
+    <span class="badge badge-error">Error</span>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-3 md:flex-row">
+      <div class="md:w-1/2">
+        <div class="tabs tabs-lifted">
+          <button class="tab ">Tab</button>
+          <button class="tab tab-active">Tab</button>
+          <button class="tab">Tab</button>
+        </div>
+        <div class="flex flex-col">
+          <span class="link">I'm a simple link</span>
+          <span class="link link-primary">I'm a simple link</span>
+          <span class="link link-secondary">I'm a simple link</span>
+          <span class="link link-accent">I'm a simple link</span>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3 md:w-1/2">
+        <progress value="20" max="100" class="progress">Default</progress>
+        <progress value="25" max="100" class="progress progress-primary">Primary</progress>
+        <progress value="30" max="100" class="progress progress-secondary">Secondary</progress>
+        <progress value="40" max="100" class="progress progress-accent">Accent</progress>
+        <progress value="45" max="100" class="progress progress-info">Info</progress>
+        <progress value="55" max="100" class="progress progress-success">Success</progress>
+        <progress value="70" max="100" class="progress progress-warning">Warning</progress>
+        <progress value="90" max="100" class="progress progress-error">Error</progress>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3 md:flex-row">
+      <div class="stats bg-base-300 border-base-300 border md:w-1/2">
+        <div class="stat">
+          <div class="stat-title">Total Page Views</div>
+          <div class="stat-value">89,400</div>
+          <div class="stat-desc">21% more than last month</div>
+        </div>
+      </div>
+      <div class="flex flex-wrap items-center justify-center gap-3 md:w-1/2">
+        <div class="radial-progress" style="--value:60; --size:3.5rem;">60%</div>
+        <div class="radial-progress" style="--value:75; --size:3.5rem;">75%</div>
+        <div class="radial-progress" style="--value:90; --size:3.5rem;">90%</div>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-3 md:flex-row">
+      <div class="md:w-1/2">
+        <div>
+          <input type="checkbox" class="toggle" />
+          <input type="checkbox" class="toggle toggle-primary" />
+          <input type="checkbox" class="toggle toggle-secondary" />
+          <input type="checkbox" class="toggle toggle-accent" />
+        </div>
+        <div>
+          <input type="checkbox" class="checkbox" />
+          <input type="checkbox" class="checkbox checkbox-primary" />
+          <input type="checkbox" class="checkbox checkbox-secondary" />
+          <input type="checkbox" class="checkbox checkbox-accent" />
+        </div>
+        <div>
+          <input type="radio" name="radio-1" class="radio" />
+          <input type="radio" name="radio-1" class="radio radio-primary" />
+          <input type="radio" name="radio-1" class="radio radio-secondary" />
+          <input type="radio" name="radio-1" class="radio radio-accent" />
+        </div>
+      </div>
+      <div class="md:w-1/2">
+        <input type="range" min="0" max="100" class="range range-xs" />
+        <input type="range" min="0" max="100" class="range range-xs range-primary" />
+        <input type="range" min="0" max="100" class="range range-xs range-secondary" />
+        <input type="range" min="0" max="100" class="range range-xs range-accent" />
+      </div>
+    </div>
+    <div class="flex flex-col gap-3 md:flex-row">
+      <div class="flex flex-col gap-3 md:w-1/2">
+        <input type="text" placeholder="Default" class="input input-bordered w-full" />
+        <input type="text" placeholder="Primary" class="input input-primary input-bordered w-full" />
+        <input type="text" placeholder="Secondary" class="input input-secondary input-bordered w-full" />
+        <input type="text" placeholder="Accent" class="input input-accent input-bordered w-full" />
+      </div>
+      <div class="flex flex-col gap-3 md:w-1/2">
+        <input type="text" placeholder="Info" class="input input-info input-bordered w-full" />
+        <input type="text" placeholder="Success" class="input input-success input-bordered w-full" />
+        <input type="text" placeholder="Warning" class="input input-warning input-bordered w-full" />
+        <input type="text" placeholder="Error" class="input input-error input-bordered w-full" />
+      </div>
+    </div>
+    <div class="navbar bg-neutral text-neutral-content rounded-box">
+      <div class="flex-none"><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div>
+      <div class="flex-1"><button class="btn btn-ghost text-xl normal-case">daisyUI</button></div>
+    </div>
+    <div class="flex gap-3">
+      <div class="flex flex-grow flex-col gap-3">
+        <div class="text-4xl font-bold">Text Size 1</div>
+        <div class="text-3xl font-bold">Text Size 2</div>
+        <div class="text-2xl font-bold">Text Size 3</div>
+        <div class="text-xl font-bold">Text Size 4</div>
+        <div class="text-lg font-bold">Text Size 5</div>
+        <div class="text-sm font-bold">Text Size 6</div>
+        <div class="text-xs font-bold">Text Size 7</div>
+      </div>
+      <ul class="steps steps-vertical">
+        <li class="step step-primary">Step 1</li>
+        <li class="step step-primary">Step 2</li>
+        <li class="step">Step 3</li>
+        <li class="step">Step 4</li>
+      </ul>
+    </div>
+  </div>
+  <div class="flex flex-col gap-3">
+    <div class="alert">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <span>12 unread messages. Tap to see.</span>
+      </div>
+    </div>
+    <div class="alert alert-info">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 flex-shrink-0 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <span>New software update available.</span>
+      </div>
+    </div>
+    <div class="alert alert-success">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <span>Your purchase has been confirmed!</span>
+      </div>
+    </div>
+    <div class="alert alert-warning">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+        <span>Warning: Invalid email address!</span>
+      </div>
+    </div>
+    <div class="alert alert-error">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <span>Error! Task failed successfully.</span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/experiments/playground/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/src/experiments/playground/src/layouts/Main.astro

@@ -0,0 +1,15 @@
+---
+import 'tailwindcss/tailwind.css'
+const { dir } = Astro.props
+const { theme } = Astro.props
+
+---
+<html lang="en" dir={dir} data-theme={theme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/src/experiments/playground/src/pages/LTR.astro

@@ -0,0 +1,8 @@
+---
+import Main from "../layouts/Main.astro"
+import Component from "../components/Component.astro"
+---
+
+<Main dir="ltr">
+  <Component/>
+</Main>

package/src/experiments/playground/src/pages/RTL.astro

@@ -0,0 +1,8 @@
+---
+import Main from "../layouts/Main.astro"
+import Component from "../components/Component.astro"
+---
+
+<Main dir="rtl">
+  <Component />
+</Main>

package/src/experiments/playground/src/pages/dark.astro

@@ -0,0 +1,8 @@
+---
+import Main from "../layouts/Main.astro"
+import Component from "../components/Component.astro"
+---
+
+<Main theme="dark">
+  <Component />
+</Main>

package/src/experiments/playground/src/pages/demo.astro

@@ -0,0 +1,8 @@
+---
+import Main from "../layouts/Main.astro"
+import Demo from "../components/Demo.astro"
+---
+
+<Main theme="light">
+  <Demo />
+</Main>

package/src/experiments/playground/src/pages/index.astro

@@ -0,0 +1,32 @@
+---
+import Main from "../layouts/Main.astro"
+const pages = await Astro.glob("./*.astro")
+---
+
+<Main>
+  <div class="flex flex-col gap-10 min-h-screen justify-center items-center p-4">
+    <div class="w-full max-w-lg flex flex-col gap-4">
+      <h1 class="font-bold text-lg">Welcome to daisyUI playground</h1>
+      <div class="text-base-content/50 flex flex-col gap-4">
+        <p>This is a Astro project where you can test daisyUI components from the source style (not the NPM package)</p>
+        <p>
+          Start by editing this file:
+          <pre class="font-mono text-sm bg-base-200 px-1 rounded break-all whitespace-pre-wrap">/src/experiments/playground/src/components/Component.astro</pre>
+        </p>
+        <p>You can see the result and test the components in the following pages:</p>
+      </div>
+    </div>
+    <ul class="menu w-full max-w-lg border border-base-content/10 rounded-box">
+      <li class="menu-title">Pages</li>
+      {
+        pages.map((page) => (
+          <li>
+            <a class="font-mono" href={page.url}>
+              {page.url}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</Main>

package/src/experiments/playground/src/pages/light.astro

@@ -0,0 +1,8 @@
+---
+import Main from "../layouts/Main.astro"
+import Component from "../components/Component.astro"
+---
+
+<Main theme="light">
+  <Component />
+</Main>

package/src/index.js

@@ -1,22 +1,22 @@
 // const tailwindColors = require("tailwindcss/colors")
 // const tailwindPlugin = require("tailwindcss/plugin")
-const tailwindPlugin = require("./lib/createPlugin")
+import tailwindPlugin from "./lib/createPlugin"
 
-const postcssJs = require("postcss-js")
-const pc = require("picocolors")
-const postcssPrefix = require("./lib/addPrefix")
+import { sync } from "postcss-js"
+import { magenta, dim, yellow, blue, reset, green } from "picocolors"
+import postcssPrefix from "./lib/addPrefix"
 
-const daisyuiInfo = require("../package.json")
-const utilities = require("../dist/utilities")
-const base = require("../dist/base")
-const unstyled = require("../dist/unstyled")
-const styled = require("../dist/styled")
-const utilitiesUnstyled = require("../dist/utilities-unstyled")
-const utilitiesStyled = require("../dist/utilities-styled")
-const themes = require("./theming/themes")
-const colorFunctions = require("./theming/functions")
-const utilityClasses = require("./lib/utility-classes")
-let colorObject = require("./theming/index")
+import { version, funding } from "../package.json"
+import utilities from "../dist/utilities.cjs"
+import base from "../dist/base.cjs"
+import unstyled from "../dist/unstyled.cjs"
+import styled from "../dist/styled.cjs"
+import utilitiesUnstyled from "../dist/utilities-unstyled.cjs"
+import utilitiesStyled from "../dist/utilities-styled.cjs"
+import { themes } from "./theming/themes"
+import { injectThemes } from "./theming/functions"
+import { utilityClasses } from "./lib/utility-classes"
+import colorObject from "./theming/index"
 
 const mainFunction = ({ addBase, addComponents, config }) => {
   let logs = false
@@ -25,7 +25,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   }
   if (logs) {
     console.log()
-    console.log(`🌼   ${pc.magenta("daisyUI")} ${pc.dim(daisyuiInfo.version)}`)
+    console.log(`🌼   ${magenta("daisyUI")} ${dim(version)}`)
   }
 
   // inject @base style
@@ -44,7 +44,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   let postcssJsProcess
   if (prefix) {
     try {
-      postcssJsProcess = postcssJs.sync(postcssPrefix({ prefix, ignore: [] }))
+      postcssJsProcess = sync(postcssPrefix({ prefix, ignore: [] }))
     } catch (error) {
       logs && console.error(`Error occurred and prevent applying the "prefix" option:`, error)
     }
@@ -56,7 +56,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
 
   addComponents(file)
 
-  const themeInjector = colorFunctions.injectThemes(addBase, config, themes)
+  const themeInjector = injectThemes(addBase, config, themes)
   themeInjector
 
   // inject @utilities style needed by components
@@ -79,44 +79,42 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   if (logs) {
     if (config("daisyui.styled") == false) {
       console.log(
-        `├─ ${pc.yellow("ℹ︎")} ${pc.blue("styled")} ${pc.reset("config is")} ${pc.blue(
-          "false"
-        )} ${pc.dim("\tcomponents won't have design decisions")}`
+        `├─ ${yellow("ℹ︎")} ${blue("styled")} ${reset("config is")} ${blue("false")} ${dim(
+          "\tcomponents won't have design decisions"
+        )}`
       )
     }
     if (config("daisyui.utils") == false) {
       console.log(
-        `├─ ${pc.yellow("ℹ︎")} ${pc.blue("utils")} ${pc.reset("config is")} ${pc.blue(
-          "false"
-        )} ${pc.dim("\tdaisyUI utility classes are disabled")}`
+        `├─ ${yellow("ℹ︎")} ${blue("utils")} ${reset("config is")} ${blue("false")} ${dim(
+          "\tdaisyUI utility classes are disabled"
+        )}`
       )
     }
     if (config("daisyui.prefix") && config("daisyui.prefix") !== "") {
       console.log(
-        `├─ ${pc.green("✔︎")} ${pc.blue("prefix")} is enabled${pc.dim(
+        `├─ ${green("✔︎")} ${blue("prefix")} is enabled${dim(
           "\t\tdaisyUI classnames must use"
-        )} ${pc.blue(config("daisyui.prefix"))} ${pc.dim("prefix")}`
+        )} ${blue(config("daisyui.prefix"))} ${dim("prefix")}`
       )
     }
     if (themeInjector.themeOrder.length > 0) {
       console.log(
-        `├─ ${pc.green("✔︎")} ${themeInjector.themeOrder.length} ${
+        `├─ ${green("✔︎")} ${themeInjector.themeOrder.length} ${
           themeInjector.themeOrder.length > 1 ? "themes" : "theme"
-        } added${pc.dim("\t\thttps://daisyui.com/docs/themes")}`
+        } added${dim("\t\thttps://daisyui.com/docs/themes")}`
       )
     }
     if (themeInjector.themeOrder.length === 0) {
       console.log(
-        `├─ ${pc.yellow("ℹ︎")} All themes are disabled in config${pc.dim(
+        `├─ ${yellow("ℹ︎")} All themes are disabled in config${dim(
           "\t\thttps://daisyui.com/docs/themes"
         )}`
       )
     }
     let messages = [
-      `${pc.green("❤︎")} ${pc.reset("Support daisyUI project:")}\t${pc.dim(
-        daisyuiInfo.funding.url
-      )}`,
-      `${pc.green("★")} ${pc.reset("Star daisyUI on GitHub")}\t${pc.dim(
+      `${green("❤︎")} ${reset("Support daisyUI project:")}\t${dim(funding.url)}`,
+      `${green("★")} ${reset("Star daisyUI on GitHub")}\t${dim(
         "https://github.com/saadeghi/daisyui"
       )}`,
     ]
@@ -125,7 +123,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   }
 }
 
-module.exports = tailwindPlugin(mainFunction, {
+export default tailwindPlugin(mainFunction, {
   theme: {
     extend: {
       colors: {

package/src/lib/addPrefix.js

@@ -1,4 +1,4 @@
-const Tokenizer = require("css-selector-tokenizer")
+import { stringify, parse } from "css-selector-tokenizer"
 
 function itMatchesOne(arr, term) {
   return arr.some((i) => term.search(i) >= 0)
@@ -61,7 +61,7 @@ function iterateSelectorNodes(selector, options) {
         return iterateSelectorNodes(node, options)
       }
 
-      if (itMatchesOne(ignore, Tokenizer.stringify(node))) return node
+      if (itMatchesOne(ignore, stringify(node))) return node
 
       return prefixNode(node, prefix)
     }),
@@ -71,7 +71,7 @@ function iterateSelectorNodes(selector, options) {
 /**
  * @type {import('postcss').PluginCreator}
  */
-module.exports = (opts = {}) => {
+export default (opts = {}) => {
   const { prefix, ignore } = {
     prefix: "",
     ignore: [],
@@ -92,13 +92,13 @@ module.exports = (opts = {}) => {
     postcssPlugin: "addprefix",
     Root(root, postcss) {
       root.walkRules((rule) => {
-        const parsed = Tokenizer.parse(rule.selector)
+        const parsed = parse(rule.selector)
         const selector = iterateSelectorNodes(parsed, { prefix, ignore })
 
-        rule.selector = Tokenizer.stringify(selector)
+        rule.selector = stringify(selector)
       })
     },
   }
 }
 
-module.exports.postcss = true
+export const postcss = true

package/src/lib/responsiveRegex.js

@@ -4,7 +4,7 @@
 // regex for all Tailwind CSS color utilities
 // (bg|to|via|from|text|ring|fill|caret|stroke|border|divide|accent|shadow|outline|decoration|placeholder|ring-offset)
 
-module.exports = [
+export const responsiveRegex = [
   {
     pattern: /.*/,
   },

package/src/lib/utility-classes.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const utilityClasses = {
   borderRadius: {
     badge: "var(--rounded-badge, 1.9rem)",
     btn: "var(--rounded-btn, 0.5rem)",

package/src/theming/colorNames.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const colorNames = {
   "primary": "--p",
   "primary-content": "--pc",