daisyui 5.0.0-alpha.3 → 5.0.0-alpha.5

package/components/tooltip/index.js

@@ -0,0 +1,135 @@
+export default {
+  ".tooltip": {
+    "@apply relative inline-block": {},
+    "--tooltip-color": "theme(colors.neutral)",
+    "--tooltip-tail": "0.1875rem",
+    "--tooltip-text-color": "theme(colors.neutral-content)",
+    "--tooltip-offset": "calc(100% + 1px + var(--tooltip-tail, 0px))",
+    "--tooltip-tail-offset": "calc(100% + 0.0625rem - var(--tooltip-tail))",
+    "&:before": {
+      "@apply absolute max-w-xs rounded px-2 py-1 text-sm whitespace-normal opacity-0 transition delay-100 duration-200 ease-in-out text-center": {},
+      "backgroundColor": "var(--tooltip-color)",
+      "color": "var(--tooltip-text-color)",
+      "width": "max-content",
+      "pointerEvents": "none",
+      "zIndex": 1,
+      "content": "var(--tw-content)",
+      "--tw-content": "attr(data-tip)"
+    },
+    "&:after": {
+      "@apply absolute opacity-0 transition delay-100 duration-200 ease-in-out": {},
+      "content": "\"\"",
+      "borderStyle": "solid",
+      "borderWidth": "var(--tooltip-tail, 0)",
+      "width": "0",
+      "height": "0",
+      "display": "block",
+      "position": "absolute"
+    },
+    "&.tooltip-open,\n  &:hover,\n  &:has(:focus-visible)": {
+      "&:before,\n    &:after": {
+        "@apply opacity-100 delay-75": {}
+      }
+    }
+  },
+  ".tooltip,\n.tooltip-top": {
+    "&:before": {
+      "transform": "translateX(-50%)",
+      "top": "auto",
+      "left": "50%",
+      "right": "auto",
+      "bottom": "var(--tooltip-offset)"
+    },
+    "&:after": {
+      "transform": "translateX(-50%)",
+      "borderColor": "var(--tooltip-color) transparent transparent transparent",
+      "top": "auto",
+      "left": "50%",
+      "right": "auto",
+      "bottom": "var(--tooltip-tail-offset)"
+    }
+  },
+  ".tooltip-bottom": {
+    "&:before": {
+      "transform": "translateX(-50%)",
+      "top": "var(--tooltip-offset)",
+      "left": "50%",
+      "right": "auto",
+      "bottom": "auto"
+    },
+    "&:after": {
+      "transform": "translateX(-50%)",
+      "borderColor": "transparent transparent var(--tooltip-color) transparent",
+      "top": "var(--tooltip-tail-offset)",
+      "left": "50%",
+      "right": "auto",
+      "bottom": "auto"
+    }
+  },
+  ".tooltip-left": {
+    "&:before": {
+      "transform": "translateY(-50%)",
+      "top": "50%",
+      "left": "auto",
+      "right": "var(--tooltip-offset)",
+      "bottom": "auto"
+    },
+    "&:after": {
+      "transform": "translateY(-50%)",
+      "borderColor": "transparent transparent transparent var(--tooltip-color)",
+      "top": "50%",
+      "left": "auto",
+      "right": "calc(var(--tooltip-tail-offset) + 0.0625rem)",
+      "bottom": "auto"
+    }
+  },
+  ".tooltip-right": {
+    "&:before": {
+      "transform": "translateY(-50%)",
+      "top": "50%",
+      "left": "var(--tooltip-offset)",
+      "right": "auto",
+      "bottom": "auto"
+    },
+    "&:after": {
+      "transform": "translateY(-50%)",
+      "borderColor": "transparent var(--tooltip-color) transparent transparent",
+      "top": "50%",
+      "left": "calc(var(--tooltip-tail-offset) + 0.0625rem)",
+      "right": "auto",
+      "bottom": "auto"
+    }
+  },
+  ".tooltip:not([data-tip]):hover:before,\n.tooltip:not([data-tip]):hover:after": {
+    "visibility": "hidden",
+    "opacity": 0
+  },
+  ".tooltip-primary": {
+    "--tooltip-color": "theme(colors.primary)",
+    "--tooltip-text-color": "theme(colors.primary-content)"
+  },
+  ".tooltip-secondary": {
+    "--tooltip-color": "theme(colors.secondary)",
+    "--tooltip-text-color": "theme(colors.secondary-content)"
+  },
+  ".tooltip-accent": {
+    "--tooltip-color": "theme(colors.accent)",
+    "--tooltip-text-color": "theme(colors.accent-content)"
+  },
+  ".tooltip-info": {
+    "--tooltip-color": "theme(colors.info)",
+    "--tooltip-text-color": "theme(colors.info-content)"
+  },
+  ".tooltip-success": {
+    "--tooltip-color": "theme(colors.success)",
+    "--tooltip-text-color": "theme(colors.success-content)"
+  },
+  ".tooltip-warning": {
+    "--tooltip-color": "theme(colors.warning)",
+    "--tooltip-text-color": "theme(colors.warning-content)"
+  },
+  ".tooltip-error": {
+    "--tooltip-color": "theme(colors.error)",
+    "--tooltip-text-color": "theme(colors.error-content)"
+  }
+};

package/components/tooltip.css

@@ -0,0 +1 @@
+.tooltip{--tooltip-color:oklch(32.1785% .02476 255.702);--tooltip-tail:.1875rem;--tooltip-text-color:oklch(89.4994% .011585 252.096);--tooltip-offset:calc(100% + 1px + var(--tooltip-tail,0px));--tooltip-tail-offset:calc(100% + .0625rem - var(--tooltip-tail));display:inline-block;position:relative;&:before{max-width:var(--width-xs,20rem);white-space:normal;border-radius:var(--radius,.25rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);text-align:center;font-size:var(--font-size-sm,.875rem);line-height:var(--tw-leading,var(--font-size-sm--line-height,1.25rem));opacity:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));transition-duration:.2s;transition-delay:.1s;transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--tooltip-color);color:var(--tooltip-text-color);pointer-events:none;z-index:1;content:var(--tw-content);--tw-content:attr(data-tip);width:max-content;position:absolute}&:after{opacity:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));transition-duration:.2s;transition-delay:.1s;transition-timing-function:var(--transition-timing-function-in-out,cubic-bezier(.4,0,.2,1));content:"";border-style:solid;border-width:var(--tooltip-tail,0);width:0;height:0;display:block;position:absolute}}.tooltip,.tooltip-top{&:before{top:auto;left:50%;right:auto;bottom:var(--tooltip-offset);transform:translate(-50%)}}.tooltip-bottom{&:before{top:var(--tooltip-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:before{top:50%;left:auto;right:var(--tooltip-offset);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:before{top:50%;left:var(--tooltip-offset);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip{&.tooltip-open,&:hover,&:has(:focus-visible){&:before,&:after{opacity:1;transition-delay:75ms}}}.tooltip:not([data-tip]):hover:before,.tooltip:not([data-tip]):hover:after{visibility:hidden;opacity:0}.tooltip,.tooltip-top{&:after{border-color:var(--tooltip-color)transparent transparent transparent;top:auto;left:50%;right:auto;bottom:var(--tooltip-tail-offset);transform:translate(-50%)}}.tooltip-bottom{&:after{border-color:transparent transparent var(--tooltip-color)transparent;top:var(--tooltip-tail-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:after{border-color:transparent transparent transparent var(--tooltip-color);top:50%;left:auto;right:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:after{border-color:transparent var(--tooltip-color)transparent transparent;top:50%;left:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip-primary{--tooltip-color:oklch(49.12% .3096 275.75);--tooltip-text-color:oklch(89.824% .06192 275.75)}.tooltip-secondary{--tooltip-color:oklch(69.71% .329 342.55);--tooltip-text-color:oklch(98.71% .0106 342.55)}.tooltip-accent{--tooltip-color:oklch(76.76% .184 183.61);--tooltip-text-color:oklch(15.352% .0368 183.61)}.tooltip-info{--tooltip-color:oklch(72.06% .191 231.6);--tooltip-text-color:oklch(0% 0 0)}.tooltip-success{--tooltip-color:oklch(64.8% .15 160);--tooltip-text-color:oklch(0% 0 0)}.tooltip-warning{--tooltip-color:oklch(84.71% .199 83.87);--tooltip-text-color:oklch(0% 0 0)}.tooltip-error{--tooltip-color:oklch(71.76% .221 22.18);--tooltip-text-color:oklch(0% 0 0)}

package/full.css

@@ -2,14 +2,26 @@
 @import url(themes/default/index.css) layer(themes);
 @import url(themes/light/index.css) layer(themes);
 @import url(themes/dark/index.css) layer(themes);
+@import url(base/tap-color.css) layer(base);
+@import url(base/root-color.css) layer(base);
+@import url(base/scrollbar.css) layer(base);
+@import url(components/tooltip.css) layer(components);
+@import url(components/tab.css) layer(components);
 @import url(components/radio.css) layer(components);
 @import url(components/select.css) layer(components);
 @import url(components/input.css) layer(components);
 @import url(components/checkbox.css) layer(components);
 @import url(components/range.css) layer(components);
 @import url(components/badge.css) layer(components);
+@import url(components/loading.css) layer(components);
 @import url(components/rating.css) layer(components);
 @import url(components/mask.css) layer(components);
 @import url(components/button.css) layer(components);
 @import url(components/toggle.css) layer(components);
+@import url(components/avatar.css) layer(components);
 @import url(components/kbd.css) layer(components);
+@import url(components/menu.css) layer(components);
+@import url(components/dropdown.css) layer(components);
+@import url(colors/properties.css) layer(utilities);
+@import url(colors/states.css) layer(utilities);
+@import url(colors/responsive.css) layer(utilities);

package/functions/plugin.js

@@ -1,10 +1,10 @@
-function u(n, i) {
-	return { handler: n, config: i }
+const createPlugin = (handler, config) => {
+  return { handler: handler, config: config }
 }
-u.withOptions = function (n, i = () => ({})) {
-	function t(o) {
-		return { handler: n(o), config: i(o) }
-	}
-	return (t.__isOptionsFunction = !0), t
+createPlugin.withOptions = (handlerFn, configFn = () => ({})) => {
+  const optionsFunction = (options) => {
+    return { handler: handlerFn(options), config: configFn(options) }
+  }
+  return (optionsFunction.__isOptionsFunction = true), optionsFunction
 }
-export const plugin = u
+export const plugin = createPlugin

package/index.css

@@ -1,14 +1,23 @@
 @import "./themes";
 @import "./themes/light";
 @import "./themes/dark";
+@config "./base/tap-color/config.js";
+@config "./base/root-color/config.js";
+@config "./base/scrollbar/config.js";
 @config "./components/kbd/config.js";
+@config "./components/dropdown/config.js";
+@config "./components/tooltip/config.js";
 @config "./components/rating/config.js";
 @config "./components/radio/config.js";
+@config "./components/loading/config.js";
 @config "./components/input/config.js";
 @config "./components/checkbox/config.js";
+@config "./components/tab/config.js";
 @config "./components/toggle/config.js";
 @config "./components/mask/config.js";
 @config "./components/button/config.js";
+@config "./components/menu/config.js";
+@config "./components/avatar/config.js";
 @config "./components/select/config.js";
 @config "./components/range/config.js";
 @config "./components/badge/config.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "daisyui",
-	"version": "5.0.0-alpha.3",
+	"version": "5.0.0-alpha.5",
 	"description": "daisyUI - Tailwind CSS Components",
 	"author": "Pouya Saadeghi",
 	"license": "MIT",
@@ -35,7 +35,10 @@
 	"main": "index.css",
 	"files": [
 		"themes",
+		"colors",
+		"base",
 		"components",
+		"utilities",
 		"index.css",
 		"full.css",
 		"functions/plugin.js"
@@ -67,6 +70,7 @@
 		"@biomejs/biome": "^1.9.2",
 		"@tailwindcss/cli": "^4.0.0-alpha.25",
 		"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",

package/themes/dark/index.css

@@ -23,4 +23,5 @@
   --radius-btn: 0.5rem;
   --radius-box: 1rem;
   --spacing-button-border: 1px;
+  --spacing-tab-border: 1px;
 }

package/themes/default/index.css

@@ -23,4 +23,5 @@
   --radius-btn: 0.5rem;
   --radius-box: 1rem;
   --spacing-button-border: 1px;
+  --spacing-tab-border: 1px;
 }

package/themes/index.css

@@ -23,4 +23,5 @@
   --radius-btn: 0.5rem;
   --radius-box: 1rem;
   --spacing-button-border: 1px;
+  --spacing-tab-border: 1px;
 }

package/themes/light/index.css

@@ -23,4 +23,5 @@
   --radius-btn: 0.5rem;
   --radius-box: 1rem;
   --spacing-button-border: 1px;
+  --spacing-tab-border: 1px;
 }