kitzo 2.5.1 → 2.5.2

package/dist/index.d.ts

@@ -90,8 +90,8 @@ declare type TooltipCoreProps = {
     smartHover?: boolean;
     hideOnTouch?: boolean;
     animation?: TooltipAnimation;
-    isHidden?: boolean;
-    isDark?: boolean;
+    hidden?: boolean;
+    dark?: boolean;
 };
 
 export declare type TooltipPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';

package/dist/react/components/tooltip/Tooltip.js

@@ -1,35 +1,35 @@
 import { jsx as a, Fragment as r, jsxs as T } from "react/jsx-runtime";
-import d from "react";
+import c from "react";
 import v from "./helpers/addTooltipStyles.js";
-import w from "./helpers/getPositionClass.js";
-import O from "./partials/TooltipWrapper.js";
-import k from "./helpers/getAnimationProperties.js";
-function C(h) {
+import k from "./helpers/getPositionClass.js";
+import w from "./partials/TooltipWrapper.js";
+import O from "./helpers/getAnimationProperties.js";
+function z(h) {
   const {
     content: n,
     children: t,
     position: y = "top",
     animation: i = !0,
-    isHidden: s = !1,
+    hidden: s = !1,
     offset: m = 8,
     smartHover: f = !0,
     hideOnTouch: l = !0,
-    isDark: u
-  } = h, [D, b] = d.useState(!1);
-  if (d.useEffect(() => {
-    b(!0), v();
-  }, []), !D) return /* @__PURE__ */ a(r, { children: t });
+    dark: u
+  } = h, [b, x] = c.useState(!1);
+  if (c.useEffect(() => {
+    x(!0), v();
+  }, []), !b) return /* @__PURE__ */ a(r, { children: t });
   if (typeof s == "boolean" && s) return /* @__PURE__ */ a(r, { children: t });
   if (n == null)
     return /* @__PURE__ */ a(r, { children: t });
-  const o = {
+  const e = {
     offset: isNaN(Number(m)) ? 8 : Number(m),
     smartHover: typeof f == "boolean" ? f : !0,
     hideOnTouch: typeof l == "boolean" ? l : !0
   };
-  let p = !1, c = !1;
-  if (typeof window < "u" && (c = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0, p = typeof u == "boolean" ? u : window.matchMedia("(prefers-color-scheme: dark)").matches), c && o.hideOnTouch) return t;
-  const x = w(y), M = !!i, e = k(
+  let p = !1, d = !1;
+  if (typeof window < "u" && (d = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0, p = typeof u == "boolean" ? u : window.matchMedia("(prefers-color-scheme: dark)").matches), d && e.hideOnTouch) return t;
+  const D = k(y), M = !!i, o = O(
     i === !0 ? {} : i
   );
   return /* @__PURE__ */ T(
@@ -37,25 +37,25 @@ function C(h) {
     {
       style: {
         position: "relative",
-        width: "fit-content",
-        "--offset": Math.max(0, o.offset),
+        inlineSize: "fit-content",
+        "--offset": Math.max(0, e.offset),
         "--startDuration": Math.max(
           0,
-          e.startDuration
+          o.startDuration
         ),
-        "--endDuration": Math.max(0, e.endDuration),
-        "--startDelay": Math.max(0, e.startDelay),
-        "--endDelay": Math.max(0, e.endDelay)
+        "--endDuration": Math.max(0, o.endDuration),
+        "--startDelay": Math.max(0, o.startDelay),
+        "--endDelay": Math.max(0, o.endDelay)
       },
-      className: `kitzo-tooltip-root ${p ? "tooltip-theme-dark" : ""} ${o.smartHover ? "smart-hover" : ""} ${M ? "animate-tooltip" : ""}`,
+      className: `kitzo-tooltip-root ${p ? "dark tooltip-theme-dark" : ""} ${e.smartHover ? "smart-hover" : ""} ${M ? "animate-tooltip" : ""}`,
       children: [
         t,
         /* @__PURE__ */ a(
-          O,
+          w,
           {
             content: n,
-            positionClass: x,
-            finalOptions: o
+            positionClass: D,
+            finalOptions: e
           }
         )
       ]
@@ -63,5 +63,5 @@ function C(h) {
   );
 }
 export {
-  C as Tooltip
+  z as Tooltip
 };

package/dist/react/components/tooltip/helpers/addTooltipStyles.js

@@ -1,4 +1,5 @@
-const o = `.kitzo-tooltip-root {
+const o = `/*! Default styling */
+.kitzo-tooltip-root {
   --bg-clr: hsl(0, 0%, 15%);
   --text-clr: hsl(0, 0%, 95%);
 
@@ -6,6 +7,8 @@ const o = `.kitzo-tooltip-root {
   --transition-endDuration: calc(var(--endDuration) * 1ms);
   --transition-startDelay: calc(var(--startDelay) * 1ms);
   --transition-endDelay: calc(var(--endDelay) * 1ms);
+
+  --tooltip-offset: calc(var(--offset) * 1px + 1px);
 }
 
 .kitzo-tooltip-root.tooltip-theme-dark {
@@ -32,12 +35,11 @@ const o = `.kitzo-tooltip-root {
   color: var(--text-clr);
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
-  border-radius: 0.325rem;
+  border-radius: 0.425rem;
 }
 
-/* Tooltip positioning */
+/*! Tooltip transitions */
 .kitzo-tooltip-wrapper {
-  --tooltip-offset: calc(var(--offset) * 1px + 1px);
   opacity: 0;
   transition-property: opacity;
   transition-delay: calc(
@@ -50,80 +52,6 @@ const o = `.kitzo-tooltip-root {
   transition-delay: 0ms;
 }
 
-/* Top */
-.kitzo-tooltip-wrapper.top {
-  bottom: 100%;
-  padding-block-end: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.top {
-  left: 50%;
-  translate: -50% 0;
-}
-.kitzo-tooltip-wrapper.top.start {
-  left: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.top.end {
-  left: auto;
-  right: 0;
-  translate: 0 0;
-}
-
-/* Right */
-.kitzo-tooltip-wrapper.right {
-  left: 100%;
-  padding-inline-start: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.right {
-  top: 50%;
-  translate: 0 -50%;
-}
-.kitzo-tooltip-wrapper.right.start {
-  top: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.right.end {
-  top: 100%;
-  translate: 0 -100%;
-}
-
-/* Bottom */
-.kitzo-tooltip-wrapper.bottom {
-  top: 100%;
-  padding-block-start: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.bottom {
-  left: 50%;
-  translate: -50% 0;
-}
-.kitzo-tooltip-wrapper.bottom.start {
-  left: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.bottom.end {
-  left: 100%;
-  translate: -100% 0;
-}
-
-/* Left */
-.kitzo-tooltip-wrapper.left {
-  right: 100%;
-  padding-inline-end: var(--tooltip-offset);
-}
-.kitzo-tooltip-wrapper.left {
-  top: 50%;
-  translate: 0 -50%;
-}
-.kitzo-tooltip-wrapper.left.start {
-  top: 0;
-  translate: 0 0;
-}
-.kitzo-tooltip-wrapper.left.end {
-  top: 100%;
-  translate: 0 -100%;
-}
-
-/* Tooltip transitions */
 .kitzo-tooltip-root.animate-tooltip {
   .kitzo-tooltip-content {
     text-rendering: optimizeLegibility;
@@ -170,7 +98,7 @@ const o = `.kitzo-tooltip-root {
   }
 }
 
-/* smart hover persistence feature */
+/*! smart hover persistence feature */
 .kitzo-tooltip-root {
   .kitzo-tooltip-wrapper {
     pointer-events: none;
@@ -180,7 +108,73 @@ const o = `.kitzo-tooltip-root {
   .kitzo-tooltip-wrapper {
     pointer-events: all;
   }
-}`;
+}
+
+/*! Tooltip positioning */
+/*? Top */
+.kitzo-tooltip-wrapper[data-position^='top'] {
+  bottom: 100%;
+  padding-block-end: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='top'] {
+  left: 50%;
+  translate: -50% 0;
+}
+.kitzo-tooltip-wrapper[data-position='top-start'] {
+  left: 0;
+}
+.kitzo-tooltip-wrapper[data-position='top-end'] {
+  right: 0;
+}
+
+/*? Right */
+.kitzo-tooltip-wrapper[data-position^='right'] {
+  inset-inline-start: 100%;
+  padding-inline-start: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='right'] {
+  top: 50%;
+  translate: 0 -50%;
+}
+.kitzo-tooltip-wrapper[data-position='right-start'] {
+  top: 0;
+}
+.kitzo-tooltip-wrapper[data-position='right-end'] {
+  bottom: 0;
+}
+
+/*? Bottom */
+.kitzo-tooltip-wrapper[data-position^='bottom'] {
+  top: 100%;
+  padding-block-start: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='bottom'] {
+  left: 50%;
+  translate: -50% 0;
+}
+.kitzo-tooltip-wrapper[data-position='bottom-start'] {
+  left: 0;
+}
+.kitzo-tooltip-wrapper[data-position='bottom-end'] {
+  right: 0;
+}
+
+/*? Left */
+.kitzo-tooltip-wrapper[data-position^='left'] {
+  inset-inline-end: 100%;
+  padding-inline-end: var(--tooltip-offset);
+}
+.kitzo-tooltip-wrapper[data-position='left'] {
+  top: 50%;
+  translate: 0 -50%;
+}
+.kitzo-tooltip-wrapper[data-position='left-start'] {
+  top: 0;
+}
+.kitzo-tooltip-wrapper[data-position='left-end'] {
+  bottom: 0;
+}
+`;
 function i() {
   if (!document.getElementById("kitzo-tooltip-styles")) {
     const t = document.createElement("style");

package/dist/react/components/tooltip/helpers/getPositionClass.js

@@ -1,27 +1,22 @@
-const s = [
-  "top-start",
+const r = [
   "top",
+  "top-start",
   "top-end",
-  "right-start",
   "right",
+  "right-start",
   "right-end",
-  "bottom-start",
   "bottom",
+  "bottom-start",
   "bottom-end",
-  "left-start",
   "left",
+  "left-start",
   "left-end"
 ];
-function n(t = "") {
+function s(t = "") {
   t = typeof t == "string" ? t.trim().toLowerCase() : "top";
-  const e = s.find((o) => o === t);
-  if (!e) return "top";
-  if (e.includes("-")) {
-    const [o, r] = e.split("-");
-    return `${o} ${r}`;
-  } else
-    return e;
+  const o = r.find((e) => e === t);
+  return o || "top";
 }
 export {
-  n as default
+  s as default
 };

package/dist/react/components/tooltip/partials/TooltipWrapper.js

@@ -1,8 +1,8 @@
-import { jsx as e, Fragment as i } from "react/jsx-runtime";
+import { jsx as e, Fragment as r } from "react/jsx-runtime";
 function l({
   content: t,
-  positionClass: o,
-  finalOptions: r
+  positionClass: i,
+  finalOptions: o
 }) {
   return /* @__PURE__ */ e(
     "div",
@@ -10,15 +10,15 @@ function l({
       style: {
         position: "absolute",
         whiteSpace: "pre-wrap",
-        width: "max-content"
+        inlineSize: "max-content"
       },
-      tabIndex: -1,
-      className: `kitzo-tooltip-wrapper ${o}`,
+      className: `kitzo-tooltip-wrapper ${i}`,
+      "data-position": i,
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: `kitzo-tooltip-content ${o} ${r.arrow ? "tooltip-arrow" : ""}`,
-          children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ e("div", { className: "kitzo-tooltip-content-default-style", children: t }) : /* @__PURE__ */ e(i, { children: t })
+          className: `kitzo-tooltip-content ${i} ${o.arrow ? "tooltip-arrow" : ""}`,
+          children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ e("div", { className: "kitzo-tooltip-content-default-style", children: t }) : /* @__PURE__ */ e(r, { children: t })
         }
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "A lightweight React micro-utility.",
   "type": "module",
   "files": [