@macroui/macroui 4.0.2 → 4.0.3

package/index.d.ts

@@ -0,0 +1,122 @@
+import type plugin from "tailwindcss/plugin"
+
+declare const daisyui: ReturnType<typeof plugin>
+
+export default daisyui
+
+// todo - the keys of a theme could be typed here? see: https://daisyui.com/docs/themes/#-5
+/**
+ * @link https://daisyui.com/docs/themes/#-4
+ */
+type CustomTheme = Record<string, Record<string, string>>
+
+/**
+ * https://daisyui.com/docs/themes/#
+ */
+type Theme =
+  | "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"
+
+interface DaisyUIConfig {
+  /**
+   * If it's true, all themes will be included. If it's false, only light and dark themes will be available.
+   * If it's an array, only themes in the array will be included and the first theme will be the default theme.
+   * Read more about [themes](https://daisyui.com/docs/themes/).
+   *
+   * @default false
+   */
+  themes?: boolean | (Theme | CustomTheme)[]
+  /**
+   * Allows us to pick another theme for the system's auto dark mode. By default, dark theme
+   * (or a custom theme named dark) will be the default theme if no theme is specified and
+   * the user is using dark mode on their system.
+   * With this config, you can set another theme to be the default dark mode theme.
+   *
+   * @default 'dark'
+   */
+  darkTheme?: string
+  /**
+   * If it's true, a [few base styles](https://github.com/saadeghi/daisyui/blob/master/src/base) will be added.
+   *
+   * @default true
+   */
+  base?: boolean
+  /**
+   * If it's true, components will have colors and style, so you won't need to design anything.
+   * If it's false, components will have no color and no visual style, so you can design your own style
+   * on a basic skeleton.
+   *
+   * @default true
+   */
+  styled?: boolean
+  /**
+   * If it's true, [responsive and utility classes](https://github.com/saadeghi/daisyui/tree/master/src/utilities) will be added.
+   *
+   * @default true
+   */
+  utils?: boolean
+  /**
+   * If it's true, your theme will be right-to-left. You need to add `dir='rtl'` to your body tag.
+   * If you're using daisyUI with RTL option, I suggest using [tailwindcss-flip](https://github.com/cvrajeesh/tailwindcss-flip)
+   * plugin to flip all your Tailwind utilities automatically.
+   *
+   * @default false
+   */
+  rtl?: boolean
+  /**
+   * Adds a prefix to class name for all daisyUI classes (including component classes, modifier classes and responsive
+   * classes). For example, `btn` will become `prefix-btn`. If you're using a second CSS library that has similar
+   * class names, you can use this config to avoid conflicts. Utility classes like color names (e.g. `bg-primary`)
+   * or border-radius (e.g. `rounded-box`) will not be affected by this config because they're being added
+   * as extensions to Tailwind CSS classes. If you use daisyUI `prefix` option (like `daisy-`) and
+   * Tailwind CSS `prefix` option (like `tw-`) together, classnames will be prefixed like
+   * this: `tw-daisy-btn`.
+   *
+   * @default ''
+   */
+  prefix?: string
+  /**
+   * If it's true, daisyUI shows logs in the terminal while CSS is building.
+   *
+   * @default true
+   */
+  logs?: boolean
+  /**
+   * The element that receives theme color CSS variables
+   *
+   * @default ':root'
+   */
+  themeRoot?: string
+}
+
+export type { DaisyUIConfig as Config, Theme, CustomTheme }

package/index.js

@@ -0,0 +1,149 @@
+// const tailwindColors = require("tailwindcss/colors")
+// const tailwindPlugin = require("tailwindcss/plugin")
+const tailwindPlugin = require("./lib/createPlugin")
+
+const postcssJs = require("postcss-js")
+const pc = require("picocolors")
+const postcssPrefix = require("./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")
+const colorObject = require("./theming/index")
+
+const mainFunction = ({ addBase, addComponents, config }) => {
+  let logs = false
+  if (config("daisyui.logs") !== false) {
+    logs = true
+  }
+  if (logs) {
+    console.log()
+    console.log(`🌼   ${pc.magenta("daisyUI")} ${pc.dim(daisyuiInfo.version)}`)
+  }
+
+  // inject @base style
+  if (config("daisyui.base") !== false) {
+    addBase(base)
+  }
+
+  // inject components
+  let file = styled
+  if (config("daisyui.styled") === false) {
+    file = unstyled
+  }
+
+  // add prefix to class names if specified
+  const prefix = config("daisyui.prefix")
+  let postcssJsProcess
+  if (prefix) {
+    try {
+      postcssJsProcess = postcssJs.sync(postcssPrefix({ prefix, ignore: [] }))
+    } catch (error) {
+      logs && console.error(`Error occurred and prevent applying the "prefix" option:`, error)
+    }
+  }
+  const shouldApplyPrefix = prefix && postcssJsProcess
+  if (shouldApplyPrefix) {
+    file = postcssJsProcess(file)
+  }
+
+  addComponents(file)
+
+  const themeInjector = colorFunctions.injectThemes(addBase, config, themes)
+  themeInjector
+
+  // inject @utilities style needed by components
+  if (config("daisyui.utils") !== false) {
+    addComponents(utilities, { variants: ["responsive"] })
+
+    let toAdd = utilitiesUnstyled // shadow clone here to avoid mutate the original
+    if (shouldApplyPrefix) {
+      toAdd = postcssJsProcess(toAdd)
+    }
+    addComponents(toAdd, { variants: ["responsive"] })
+
+    toAdd = utilitiesStyled
+    if (shouldApplyPrefix) {
+      toAdd = postcssJsProcess(toAdd)
+    }
+    addComponents(toAdd, { variants: ["responsive"] })
+  }
+
+  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")}`
+      )
+    }
+    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")}`
+      )
+    }
+    if (config("daisyui.prefix") && config("daisyui.prefix") !== "") {
+      console.log(
+        `├─ ${pc.green("✔︎")} ${pc.blue("prefix")} is enabled${pc.dim(
+          "\t\tdaisyUI classnames must use"
+        )} ${pc.blue(config("daisyui.prefix"))} ${pc.dim("prefix")}`
+      )
+    }
+    if (themeInjector.themeOrder.length > 0) {
+      console.log(
+        `├─ ${pc.green("✔︎")} ${themeInjector.themeOrder.length} ${
+          themeInjector.themeOrder.length > 1 ? "themes" : "theme"
+        } added${pc.dim("\t\thttps://daisyui.com/docs/themes")}`
+      )
+    }
+    if (themeInjector.themeOrder.length === 0) {
+      console.log(
+        `├─ ${pc.yellow("ℹ︎")} All themes are disabled in config${pc.dim(
+          "\t\thttps://daisyui.com/docs/themes"
+        )}`
+      )
+    }
+    const 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(
+        "https://github.com/saadeghi/daisyui"
+      )}`,
+    ]
+    console.log(`╰─ ${messages[Math.floor(Math.random() * messages.length)]}`)
+    console.log()
+  }
+}
+
+module.exports = tailwindPlugin(mainFunction, {
+  theme: {
+    extend: {
+      colors: {
+        ...colorObject,
+        // adding all Tailwind `neutral` shades here so they don't get overridden by daisyUI `neutral` color
+        "neutral-50": "#fafafa",
+        "neutral-100": "#f5f5f5",
+        "neutral-200": "#e5e5e5",
+        "neutral-300": "#d4d4d4",
+        "neutral-400": "#a3a3a3",
+        "neutral-500": "#737373",
+        "neutral-600": "#525252",
+        "neutral-700": "#404040",
+        "neutral-800": "#262626",
+        "neutral-900": "#171717",
+        "neutral-950": "#0a0a0a",
+      },
+      ...utilityClasses,
+    },
+  },
+})

package/lib/addPrefix.js

@@ -0,0 +1,104 @@
+const Tokenizer = require("css-selector-tokenizer")
+
+function itMatchesOne(arr, term) {
+  return arr.some((i) => term.search(i) >= 0)
+}
+
+function parseAttrSelector(node) {
+  const { content } = node
+  const regex =
+    /(^class|^id)([*^?~|$=]*)+(?:("\s*)([^"\\]*?(?:\\.[^"\\]*)*?)(\s*")|('\s*)([^'\\]*?(?:\\.[^'\\]*)*?)(\s*'))/i
+
+  const [type, operator, head, classes, foot] = content.split(regex).filter((part) => part)
+
+  return {
+    type,
+    operator,
+    head,
+    classes: classes ? classes.split(" ").map((c) => c.replace(/"|'/g, "")) : [],
+    foot,
+  }
+}
+
+function attrStringify({ type, operator, head, classes, foot }) {
+  return `${type}${operator || ""}${head || ""}${classes.join(" ")}${foot || ""}`
+}
+
+function prefixNode(node, prefix) {
+  if (["class", "id"].includes(node.type)) {
+    return {
+      ...node,
+      name: `${prefix}${node.name}`,
+    }
+  }
+
+  if (["attribute"].includes(node.type) && node.content) {
+    const { type, operator, head, classes, foot } = parseAttrSelector(node)
+
+    if (!["class", "id"].includes(type)) return node
+
+    return {
+      ...node,
+      content: attrStringify({
+        type,
+        operator,
+        head,
+        classes: classes.map((cls) => `${prefix}${cls}`),
+        foot,
+      }),
+    }
+  }
+
+  return node
+}
+
+function iterateSelectorNodes(selector, options) {
+  const { prefix, ignore } = options
+  return {
+    ...selector,
+    nodes: selector.nodes.map((node) => {
+      if (["selector", "nested-pseudo-class"].includes(node.type)) {
+        return iterateSelectorNodes(node, options)
+      }
+
+      if (itMatchesOne(ignore, Tokenizer.stringify(node))) return node
+
+      return prefixNode(node, prefix)
+    }),
+  }
+}
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+  const { prefix, ignore } = {
+    prefix: "",
+    ignore: [],
+    ...opts,
+  }
+
+  if (typeof prefix !== "string") {
+    throw new Error("prefix option should be of type string.")
+  }
+
+  if (!Array.isArray(ignore)) {
+    throw new Error("ignore options should be an Array.")
+  }
+
+  if (!prefix.length) return
+
+  return {
+    postcssPlugin: "addprefix",
+    Root(root, postcss) {
+      root.walkRules((rule) => {
+        const parsed = Tokenizer.parse(rule.selector)
+        const selector = iterateSelectorNodes(parsed, { prefix, ignore })
+
+        rule.selector = Tokenizer.stringify(selector)
+      })
+    },
+  }
+}
+
+module.exports.postcss = true

package/lib/createPlugin.js

@@ -0,0 +1,19 @@
+function createPlugin(plugin, config) {
+  return {
+    handler: plugin,
+    config,
+  }
+}
+createPlugin.withOptions = (pluginFunction, configFunction = () => ({})) => {
+  const optionsFunction = (options) => ({
+    __options: options,
+    handler: pluginFunction(options),
+    config: configFunction(options),
+  })
+  optionsFunction.__isOptionsFunction = true
+  optionsFunction.__pluginFunction = pluginFunction
+  optionsFunction.__configFunction = configFunction
+  return optionsFunction
+}
+
+module.exports = createPlugin

package/lib/responsiveRegex.js

@@ -0,0 +1,45 @@
+// regext for all daisyUI colors
+// ((primary|secondary|accent|neutral)(-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)
+
+// 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 = [
+  {
+    pattern: /.*/,
+  },
+  {
+    // responsive utilities for daisyUI responsive modifiers
+    pattern: /.(sm|md|lg|xl)/,
+    variants: ["sm", "md", "lg", "xl"],
+  },
+  {
+    // responsive utilities for daisyUI components
+    pattern:
+      /(drawer-open|modal-(middle|top|bottom)|card-(side|compact|normal)|(stats|divider)-(horizontal|vertical)|dropdown-(end|top|bottom|left|right))/,
+    variants: ["sm", "md", "lg", "xl"],
+  },
+  {
+    // color utilities for daisyUI colors
+    pattern:
+      /(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|accent|neutral)(-content|))|((info|success|warning|error)(-content|))|(base)(-100|-200|-300|-content)/,
+    variants: [
+      // "first",
+      // "last",
+      // "odd",
+      // "even",
+      // "visited",
+      // "checked",
+      // "empty",
+      // "read-only",
+      // "group-hover",
+      // "group-focus",
+      // "focus-within",
+      "hover",
+      "focus",
+      // "focus-visible",
+      // "active",
+      // "disabled",
+    ],
+  },
+]

package/lib/utility-classes.js

@@ -0,0 +1,7 @@
+module.exports = {
+  borderRadius: {
+    badge: "var(--rounded-badge, 1.9rem)",
+    btn: "var(--rounded-btn, 0.5rem)",
+    box: "var(--rounded-box, 1rem)",
+  },
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@macroui/macroui",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Macroui - Tailwind CSS Component Library",
   "author": "Macroui <peng.deyou@gmail.com>",
   "license": "MIT",
@@ -30,17 +30,22 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    "./dist/*": "./dist/*",
-    "./full.css": "./dist/full.css",
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/*": "./dist/*",
+    "./full.css": "./dist/full.css",
+    "./styled.css": "./dist/styled.css"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "lib",
+    "theming",
+    "index.js",
+    "index.d.ts"
   ],
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"

package/src/src/index.d.ts

@@ -0,0 +1,122 @@
+import type plugin from "tailwindcss/plugin"
+
+declare const daisyui: ReturnType<typeof plugin>
+
+export default daisyui
+
+// todo - the keys of a theme could be typed here? see: https://daisyui.com/docs/themes/#-5
+/**
+ * @link https://daisyui.com/docs/themes/#-4
+ */
+type CustomTheme = Record<string, Record<string, string>>
+
+/**
+ * https://daisyui.com/docs/themes/#
+ */
+type Theme =
+  | "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"
+
+interface DaisyUIConfig {
+  /**
+   * If it's true, all themes will be included. If it's false, only light and dark themes will be available.
+   * If it's an array, only themes in the array will be included and the first theme will be the default theme.
+   * Read more about [themes](https://daisyui.com/docs/themes/).
+   *
+   * @default false
+   */
+  themes?: boolean | (Theme | CustomTheme)[]
+  /**
+   * Allows us to pick another theme for the system's auto dark mode. By default, dark theme
+   * (or a custom theme named dark) will be the default theme if no theme is specified and
+   * the user is using dark mode on their system.
+   * With this config, you can set another theme to be the default dark mode theme.
+   *
+   * @default 'dark'
+   */
+  darkTheme?: string
+  /**
+   * If it's true, a [few base styles](https://github.com/saadeghi/daisyui/blob/master/src/base) will be added.
+   *
+   * @default true
+   */
+  base?: boolean
+  /**
+   * If it's true, components will have colors and style, so you won't need to design anything.
+   * If it's false, components will have no color and no visual style, so you can design your own style
+   * on a basic skeleton.
+   *
+   * @default true
+   */
+  styled?: boolean
+  /**
+   * If it's true, [responsive and utility classes](https://github.com/saadeghi/daisyui/tree/master/src/utilities) will be added.
+   *
+   * @default true
+   */
+  utils?: boolean
+  /**
+   * If it's true, your theme will be right-to-left. You need to add `dir='rtl'` to your body tag.
+   * If you're using daisyUI with RTL option, I suggest using [tailwindcss-flip](https://github.com/cvrajeesh/tailwindcss-flip)
+   * plugin to flip all your Tailwind utilities automatically.
+   *
+   * @default false
+   */
+  rtl?: boolean
+  /**
+   * Adds a prefix to class name for all daisyUI classes (including component classes, modifier classes and responsive
+   * classes). For example, `btn` will become `prefix-btn`. If you're using a second CSS library that has similar
+   * class names, you can use this config to avoid conflicts. Utility classes like color names (e.g. `bg-primary`)
+   * or border-radius (e.g. `rounded-box`) will not be affected by this config because they're being added
+   * as extensions to Tailwind CSS classes. If you use daisyUI `prefix` option (like `daisy-`) and
+   * Tailwind CSS `prefix` option (like `tw-`) together, classnames will be prefixed like
+   * this: `tw-daisy-btn`.
+   *
+   * @default ''
+   */
+  prefix?: string
+  /**
+   * If it's true, daisyUI shows logs in the terminal while CSS is building.
+   *
+   * @default true
+   */
+  logs?: boolean
+  /**
+   * The element that receives theme color CSS variables
+   *
+   * @default ':root'
+   */
+  themeRoot?: string
+}
+
+export type { DaisyUIConfig as Config, Theme, CustomTheme }