kitzo 2.3.6 → 2.3.8

package/dist/react/components/toast/partials/ToastContainer.js

@@ -0,0 +1,59 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as d, useLayoutEffect as b } from "react";
+import h from "./Toast.js";
+function v({
+  t,
+  animateTransformOrigin: f,
+  containerPosition: l,
+  updateOffsets: r
+}) {
+  const s = d(null);
+  b(() => {
+    const e = s.current;
+    if (!e) return;
+    const a = new ResizeObserver(() => {
+      const p = e.offsetHeight;
+      e.style.setProperty("--toast-height", `${p}px`), r();
+    });
+    return a.observe(e), () => a.disconnect();
+  }, [r]);
+  const m = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right"
+  ], i = t.position || l, o = m.includes(i) ? i : "top-center", n = o.includes("bottom"), u = typeof t.animateTransformOrigin == "boolean" ? t.animateTransformOrigin : f;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: s,
+      "data-toast-container": !0,
+      "data-toast-position": o,
+      style: {
+        position: "absolute",
+        zIndex: t.zIndex,
+        left: 0,
+        right: 0,
+        transition: "transform 180ms",
+        display: "flex",
+        justifyContent: o.includes("left") ? "flex-start" : o.includes("center") ? "center" : "flex-end",
+        top: n ? "auto" : 0,
+        bottom: n ? 0 : "auto",
+        transform: `translateY(calc(var(--toast-offset-y, 0px) * ${n ? -1 : 1}))`
+      },
+      children: /* @__PURE__ */ c(
+        h,
+        {
+          t,
+          position: o,
+          shouldAnimateTransformOrigin: u
+        }
+      )
+    }
+  );
+}
+export {
+  v as default
+};

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

@@ -0,0 +1,67 @@
+import { jsxs as d, jsx as h } from "react/jsx-runtime";
+import y from "./helpers/addTooltipStyles.js";
+import D from "./helpers/getPositionClass.js";
+import b from "./partials/TooltipWrapper.js";
+import T from "./helpers/getAnimationProperties.js";
+const x = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+function H(n) {
+  const {
+    content: r,
+    children: t,
+    position: c = "top",
+    // arrowStyle = {},
+    animation: i = !0,
+    isHidden: s = !1,
+    offset: m = 8,
+    // arrow = false,
+    smartHover: l = !0,
+    hideOnTouch: f = !0
+  } = n;
+  let { isDark: o } = n;
+  if (typeof s == "boolean" && s || r == null)
+    return t;
+  const e = {
+    offset: isNaN(Number(m)) ? 8 : Number(m),
+    // arrow: typeof arrow === 'boolean' ? arrow : false,
+    smartHover: typeof l == "boolean" ? l : !0,
+    hideOnTouch: typeof f == "boolean" ? f : !0
+  };
+  if (window.matchMedia("(pointer: coarse)").matches && e.hideOnTouch) return t;
+  const p = D(c), u = !!i, a = T(
+    i === !0 ? {} : i
+  );
+  return o = typeof o == "boolean" ? o : x(), y(), /* @__PURE__ */ d(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "fit-content",
+        "--offset": Math.max(0, e.offset),
+        "--startDuration": Math.max(
+          0,
+          a.startDuration
+        ),
+        "--endDuration": Math.max(0, a.endDuration),
+        "--startDelay": Math.max(0, a.startDelay),
+        "--endDelay": Math.max(0, a.endDelay)
+        // '--arrow-color': arrowStyle?.['--arrow-color'],
+        // '--arrow-size': arrowStyle?.['--arrow-size'],
+      },
+      className: `kitzo-tooltip-root ${o ? "tooltip-theme-dark" : ""} ${e.smartHover ? "smart-hover" : ""} ${u ? "animate-tooltip" : ""}`,
+      children: [
+        t,
+        /* @__PURE__ */ h(
+          b,
+          {
+            content: r,
+            positionClass: p,
+            finalOptions: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as default
+};

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

@@ -0,0 +1,230 @@
+const o = `/* Default styling */
+.kitzo-tooltip-root {
+  --bg-clr: hsl(0, 0%, 15%);
+  --text-clr: hsl(0, 0%, 95%);
+
+  --transition-startDuration: calc(var(--startDuration) * 1ms);
+  --transition-endDuration: calc(var(--endDuration) * 1ms);
+  --transition-startDelay: calc(var(--startDelay) * 1ms);
+  --transition-endDelay: calc(var(--endDelay) * 1ms);
+}
+
+.kitzo-tooltip-root.tooltip-theme-dark {
+  --bg-clr: hsl(0, 0%, 95%);
+  --text-clr: hsl(0, 0%, 15%);
+}
+
+.kitzo-tooltip-content-default-style {
+  font-family:
+    inherit,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 0.875rem;
+  background-color: var(--bg-clr);
+  color: var(--text-clr);
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  border-radius: 0.325rem;
+}
+
+/* Tooltip positioning */
+.kitzo-tooltip-wrapper {
+  --tooltip-offset: calc(var(--offset) * 1px + 1px);
+  opacity: 0;
+  transition-property: opacity;
+  transition-delay: calc(
+    var(--transition-endDuration) + var(--transition-endDelay)
+  );
+}
+
+.kitzo-tooltip-root:hover .kitzo-tooltip-wrapper {
+  opacity: 1;
+  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 {
+  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;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    backface-visibility: hidden;
+    contain: layout paint;
+
+    transition:
+      transform var(--transition-endDuration) var(--transition-endDelay),
+      opacity var(--transition-endDuration) var(--transition-endDelay);
+  }
+}
+
+.kitzo-tooltip-content {
+  transform: scale(0.8);
+  opacity: 0;
+}
+
+.kitzo-tooltip-content.top {
+  transform-origin: bottom;
+}
+.kitzo-tooltip-content.right {
+  transform-origin: left;
+}
+.kitzo-tooltip-content.bottom {
+  transform-origin: top;
+}
+.kitzo-tooltip-content.left {
+  transform-origin: right;
+}
+
+.kitzo-tooltip-root.animate-tooltip:hover {
+  .kitzo-tooltip-content {
+    transition:
+      transform var(--transition-startDuration) var(--transition-startDelay),
+      opacity var(--transition-startDuration) var(--transition-startDelay);
+  }
+}
+.kitzo-tooltip-root:hover {
+  .kitzo-tooltip-content {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* smart hover persistence feature */
+.kitzo-tooltip-root {
+  .kitzo-tooltip-wrapper {
+    pointer-events: none;
+  }
+}
+.kitzo-tooltip-root.smart-hover:hover {
+  .kitzo-tooltip-wrapper {
+    pointer-events: all;
+  }
+}
+
+/* Arrow */
+.kitzo-tooltip-content.tooltip-arrow {
+  --effective-size: calc(var(--arrow-size, 6) * 1px);
+  --effective-color: var(--arrow-color, var(--bg-clr));
+
+  position: relative;
+}
+.kitzo-tooltip-content.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  border: var(--effective-size) solid transparent;
+}
+.kitzo-tooltip-content.tooltip-arrow.top::before {
+  left: 50%;
+  translate: -50% 0;
+  top: calc(100% - 1px);
+  border-top: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-tooltip-content.tooltip-arrow.right::before {
+  top: 50%;
+  translate: 0 -50%;
+  right: calc(100% - 1px);
+  border-right: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-tooltip-content.tooltip-arrow.bottom::before {
+  left: 50%;
+  translate: -50% 0;
+  bottom: calc(100% - 1px);
+  border-bottom: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-tooltip-content.tooltip-arrow.left::before {
+  top: 50%;
+  translate: 0 -50%;
+  left: calc(100% - 1px);
+  border-left: var(--effective-size) solid var(--effective-color);
+}`;
+function i() {
+  if (!document.getElementById("kitzo-tooltip-styles")) {
+    const t = document.createElement("style");
+    t.id = "kitzo-tooltip-styles", t.textContent = o, document.head.appendChild(t);
+  }
+}
+export {
+  i as default
+};

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

@@ -0,0 +1,12 @@
+function c(e) {
+  const a = e?.startDelay, n = e?.endDelay, t = e?.delay ?? 0, f = e?.startDuration, D = e?.endDuration, r = e?.duration ?? 110;
+  return {
+    startDelay: a ?? t,
+    endDelay: n ?? t,
+    startDuration: f ?? r,
+    endDuration: D ?? r
+  };
+}
+export {
+  c as default
+};

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

@@ -0,0 +1,27 @@
+const s = [
+  "top-start",
+  "top",
+  "top-end",
+  "right-start",
+  "right",
+  "right-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end",
+  "left-start",
+  "left",
+  "left-end"
+];
+function n(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;
+}
+export {
+  n as default
+};

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

@@ -0,0 +1,29 @@
+import { jsx as e, Fragment as i } from "react/jsx-runtime";
+function l({
+  content: t,
+  positionClass: o,
+  finalOptions: r
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        whiteSpace: "pre-wrap",
+        width: "max-content"
+      },
+      tabIndex: -1,
+      className: `kitzo-tooltip-wrapper ${o}`,
+      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 })
+        }
+      )
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/react/hooks/useCopy.js

@@ -0,0 +1,38 @@
+import { useState as u, useRef as i, useCallback as p, useEffect as m } from "react";
+import d from "../../functions/copy/copy.js";
+function g(a = {}) {
+  const { resetDelay: s = 500 } = a, [r, e] = u("standby"), [f, c] = u(null), t = i(null), n = i(!1), l = p(
+    async (y) => {
+      if (!n.current) {
+        t.current && clearTimeout(t.current);
+        try {
+          n.current = !0, c(null), e("copying"), await d(y), e("copied");
+        } catch (o) {
+          c(o instanceof Error ? o : new Error(String(o))), e("error");
+        } finally {
+          t.current = setTimeout(
+            () => {
+              n.current = !1, e("standby");
+            },
+            Math.max(s, 500)
+          );
+        }
+      }
+    },
+    [s]
+  );
+  return m(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), {
+    copy: l,
+    status: r,
+    error: f,
+    isCopying: r === "copying",
+    isCopied: r === "copied",
+    isError: r === "error",
+    isStandby: r === "standby"
+  };
+}
+export {
+  g as default
+};

package/dist/react/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+import { useState as r, useEffect as c } from "react";
+function f(e, t) {
+  t ??= 500;
+  const [u, o] = r(e);
+  return c(() => {
+    const n = setTimeout(() => {
+      o(e);
+    }, t);
+    return () => {
+      clearTimeout(n);
+    };
+  }, [e, t]), u;
+}
+export {
+  f as default
+};

package/dist/react/hooks/useWindowSize.js

@@ -0,0 +1,26 @@
+import { useState as u, useRef as c, useEffect as d } from "react";
+function w(i = {}) {
+  const { updateDelay: n = 30 } = i, [r, o] = u({
+    screenWidth: window.innerWidth,
+    screenHeight: window.innerHeight
+  }), e = c(null);
+  return d(() => {
+    function t() {
+      e.current && clearTimeout(e.current), e.current = setTimeout(
+        () => {
+          o({
+            screenWidth: window.innerWidth,
+            screenHeight: window.innerHeight
+          });
+        },
+        Math.max(0, +n)
+      );
+    }
+    return typeof window < "u" && window.addEventListener("resize", t), () => {
+      e.current && clearTimeout(e.current), window.removeEventListener("resize", t);
+    };
+  }, [n]), r;
+}
+export {
+  w as default
+};

package/package.json

@@ -1,77 +1,73 @@
-{
-  "name": "kitzo",
-  "version": "2.3.6",
-  "description": "A lightweight React micro-utility.",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./dist/react/types.d.ts",
-      "import": "./dist/react/index.js",
-      "default": "./dist/react/index.js"
-    },
-    "./fns": {
-      "types": "./dist/functions/types.d.ts",
-      "import": "./dist/functions/index.js",
-      "default": "./dist/functions/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "rollup -c",
-    "build-test": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "keywords": [
-    "kitzo",
-    "components",
-    "toast",
-    "tooltip",
-    "hooks",
-    "function",
-    "micro-utility",
-    "ui",
-    "react",
-    "reactjs"
-  ],
-  "author": "Riyad",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/riyad-96/kitzo.git"
-  },
-  "homepage": "https://github.com/riyad-96/kitzo#readme",
-  "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@babel/preset-react": "^7.28.5",
-    "@eslint/js": "^9.39.2",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "daisyui": "^5.5.14",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "globals": "^16.5.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-router-dom": "^7.11.0",
-    "tailwindcss": "^4.1.18",
-    "vite": "^7.3.0"
-  },
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
-  }
-}
+{
+  "name": "kitzo",
+  "version": "2.3.8",
+  "description": "A lightweight React micro-utility.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./fns": {
+      "types": "./dist/fns.d.ts",
+      "import": "./dist/fns.js",
+      "default": "./dist/fns.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "kitzo",
+    "components",
+    "toast",
+    "tooltip",
+    "hooks",
+    "function",
+    "micro-utility",
+    "ui",
+    "react",
+    "reactjs"
+  ],
+  "author": "Riyad",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/riyad-96/kitzo.git"
+  },
+  "homepage": "https://github.com/riyad-96/kitzo#readme",
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.0.6",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "daisyui": "^5.5.14",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^17.0.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.52.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}