kitzo 2.3.5 → 2.3.7

package/README.md

@@ -1,258 +1,39 @@
-# kitzo
-
-[![npm](https://img.shields.io/npm/v/kitzo)](https://www.npmjs.com/package/kitzo)
-
-### A lightweight React micro-utility.
-
-#### Install
-
-```bash
-npm i kitzo
-```
-
-#### React APIs
-
-```jsx
-import {
-  ToastContainer,
-  toast,
-  Tooltip,
-  useDebounce,
-  useWindowSize,
-} from 'kitzo';
-```
-
-> You can import only what you need.
-
-#### UI
-
-- Toast message
-- Tooltip
-
-##### Toast API usage:
-
-```jsx
-import { toast } from 'kitzo';
-import MyCustomComponent from './MyCustomComponent';
-
-// ---------------------
-// Normal / Success / Error
-// ---------------------
-
-toast('Toast message', {
-  id: 'normat_toast',
-  duration: 2000,
-  showIcon: true,
-  position: 'top-center',
-});
-
-toast.success('Toast message', {
-  id: 'success_toast',
-  duration: 2000,
-  showIcon: true,
-  position: 'top-center',
-});
-
-toast.error('Toast message', {
-  id: 'error_toast',
-  duration: 2000,
-  showIcon: true,
-  position: 'top-center',
-});
-
-// content can be: (dismiss) => (
-// <div>
-//   <span>any thing</span>
-//   <button onClick={dismiss} >❌</button>
-// </div>
-//)
-
-// ---------------------
-// Promise-based toast
-// ---------------------
-
-toast.promise(
-  promise(), // function that returns a promise
-  {
-    loading: 'Saving...',
-    success: (res) => `Saved: ${res}`, // or just 'Saved'
-    error: (err) => `Error occurred: ${err}`, // or just 'Error occurred'
-  },
-  {
-    id: 'promise_toast',
-    duration: 2000,
-    showIcon: true,
-    position: 'top-center',
-  },
-);
-
-// ---------------------
-// Custom toast
-// ---------------------
-
-// JSX element
-toast.custom(<MyCustomComponent />, {
-  id: 'custom_toast',
-  duration: 2000,
-  position: 'top-center',
-});
-
-// Function that receives a dismiss handler
-toast.custom(
-  (dismiss) => (
-    <div>
-      <span>Custom toast message</span>
-      <button onClick={dismiss}>Close</button>
-    </div>
-  ),
-  {
-    id: 'custom_toast',
-    duration: Infinity, // or 3000
-    position: 'top-center',
-  },
-);
-
-// Simple string
-toast.custom('Simple string toast', {
-  id: 'custom_toast',
-  duration: 2000,
-  position: 'top-center',
-});
-
-// ---------------------
-// Update / Dismiss
-// ---------------------
-// ❗ Update is only supported on custom toasts
-
-toast.update('my-toast', 'Updated content!', {
-  duration: 3000,
-});
-
-// Dismiss by id (optional)
-toast.dismiss('my-toast');
-// Or dismiss all toasts
-toast.dismiss();
-```
-
-> Each toast can have its own position. default position is `top-center`.
-
-##### React Tooltip API usage:
-
-```jsx
-import { Tooltip } from 'kitzo';
-
-function App() {
-  return (
-    <div>
-      <h1>Tooltip api</h1>
-
-      <div>
-        <Tooltip
-          content="Tooltip"
-          tooltipOptions={{
-            offset: 10,
-            smartHover: true,
-          }}
-          animate={{
-            duration: 120,
-            startDelay: 400,
-            endDelay: 50,
-          }}
-          style={{
-            '--arrow-size': 6,
-            '--arrow-color': 'red',
-          }}
-        >
-          <button>Hover me</button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-}
-```
-
-> You can provide your own custom jsx element as `content`. e.g. `content={<div>Custom tooltip</div>}`
-
----
-
-### Hooks
-
-- useDebounce
-- useWindowSize
-
-#### useDebounce usage:
-
-```jsx
-import { useDebounce } from 'kitzo';
-
-function App() {
-  const [value, setValue] = useState('');
-  const debouncedValue = useDebounce(value, 500);
-
-  return (
-    <div>
-      <input
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      <p>Debounced value: {debouncedValue}</p>
-    </div>
-  );
-}
-```
-
-#### useWindowSize usage:
-
-```jsx
-import { useWindowSize } from 'kitzo';
-
-function App() {
-  const { screenWidth, screenHeight } = useWindowSize({ delay: 100 });
-
-  return (
-    <div>
-      <p>Window width: {width}</p>
-      <p>Window height: {height}</p>
-    </div>
-  );
-}
-```
-
----
-
-### Functions
-
-- copy _(Copy text to clipboard)_
-
-#### copy usage:
-
-```jsx
-import { copy } from 'kitzo/fns';
-import { ToastContainer, toast } from 'kitzo';
-
-// copy(text: string): Promise<void>;
-
-function App() {
-  async function copyText(text) {
-    try {
-      await copy(text);
-      toast.success('Copied to clipboard');
-    } catch (err) {
-      console.error(err);
-      toast.error('Failed to copy to clipboard');
-    }
-  }
-
-  return (
-    <div>
-      <button onClick={() => copyText('hello world')}>Copy text</button>
-      <ToastContainer />
-    </div>
-  );
-}
-
-// or just
-copy('hello world');
-```
-
-> Use `copy` function to copy text to clipboard.
+# Kitzo
+
+**Lightweight React UI components and essential hooks.**
+
+---
+
+### 📦 Installation
+
+```bash
+npm install kitzo
+```
+
+---
+
+### 🚀 Core Features
+
+#### Components
+
+🍞 **Toast** — Accessible, animated notifications.
+💡 **Tooltip** — Smart-positioned contextual labels.
+
+#### Hooks
+
+⏱️ **useDebounce** — Optimize performance by delaying execution.
+📏 **useWindowSize** — Real-time viewport dimensions.
+📋 **useCopy** — Simple "copy to clipboard" functionality.
+
+---
+
+### 📖 Documentation
+
+For usage guides and live demos, visit documentation:
+[https://kitzo.vercel.app](https://kitzo.vercel.app)
+
+---
+
+### 📄 License
+
+MIT

package/dist/fns.d.ts

@@ -0,0 +1,3 @@
+export declare function copy(doc: string): Promise<void>;
+
+export { }

package/dist/fns.js

@@ -0,0 +1,4 @@
+import { default as e } from "./functions/copy/copy.js";
+export {
+  e as copy
+};

package/dist/functions/copy/copy.js

@@ -0,0 +1,23 @@
+function o(e) {
+  const t = document.createElement("textarea");
+  t.value = e, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
+}
+async function n(e) {
+  if (!navigator.clipboard?.writeText) {
+    o(e);
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(e);
+  } catch (t) {
+    o(e), console.error(t);
+  }
+}
+async function r(e) {
+  if (e == null) throw new Error("[kitzo/copy] expected a value to copy, got null or undefined.");
+  const t = typeof e == "string" || typeof e == "number" ? String(e) : JSON.stringify(e);
+  await n(t);
+}
+export {
+  r as default
+};

package/dist/index.d.ts

@@ -0,0 +1,119 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+declare type AnimationOptions = {
+    duration?: number;
+    startDuration?: number;
+    endDuration?: number;
+    delay?: number;
+    startDelay?: number;
+    endDelay?: number;
+};
+
+declare type CopyStatus = 'standby' | 'copying' | 'copied' | 'error';
+
+declare type Position = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+
+declare type Positions = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+declare type PromiseToastFn = <T, E = unknown>(promise: Promise<T>, msgs: PromiseToastMsgs<T, E>, options?: PromiseToastOptions) => Promise<T>;
+
+declare type PromiseToastMsgs<T, E = unknown> = {
+    loading: ReactNode;
+    success: ReactNode | ((res: T) => ReactNode | Promise<ReactNode>);
+    error: ReactNode | ((err: E) => ReactNode | Promise<ReactNode>);
+};
+
+declare type PromiseToastOptions = Omit<ToastOptions, 'id' | 'type'>;
+
+export declare const toast: ToastFn;
+
+declare type ToastContent = ((dismiss: () => void) => ReactNode) | ReactNode;
+
+export declare function Toaster(props: ToasterProps): JSX.Element;
+
+declare type ToasterProps = {
+    position?: Positions;
+    richColors?: boolean;
+    animateTransformOrigin?: boolean;
+    gap?: number | `${number}`;
+    edgeOffset?: number | `${number}px` | `${number}rem` | `${number}%`;
+    isDark?: boolean;
+};
+
+declare type ToastFn = {
+    (content: ToastContent, options?: ToastOptions): void;
+    info: (content: ToastContent, options?: ToastOptions) => void;
+    success: (content: ToastContent, options?: ToastOptions) => void;
+    warning: (content: ToastContent, options?: ToastOptions) => void;
+    error: (content: ToastContent, options?: ToastOptions) => void;
+    promise: PromiseToastFn;
+    loading: (content: ToastContent, options?: ToastOptions) => void;
+    custom: (content: ToastContent, options?: ToastOptions) => void;
+    dismiss: (id?: string | number) => void;
+    update: (id: string | number, content: ToastContent, options?: ToastUpdateOptions) => void;
+};
+
+declare type ToastOptions = {
+    duration?: number;
+    showIcon?: boolean;
+    icon?: ReactNode;
+    position?: Positions;
+    animateTransformOrigin?: boolean;
+    id?: string | number;
+    type?: ToastType;
+};
+
+declare type ToastType = 'default' | 'success' | 'warning' | 'error' | 'info' | 'custom' | 'loading';
+
+declare type ToastUpdateOptions = Omit<ToastOptions, 'id'>;
+
+export declare function Tooltip(props: TooltipProps): ReactNode;
+
+declare type TooltipAnimation = boolean | AnimationOptions;
+
+declare type TooltipCoreProps = {
+    /**
+     * content is necessary
+     */
+    content: ReactNode;
+    position?: Position;
+    offset?: number;
+    smartHover?: boolean;
+    hideOnTouch?: boolean;
+    animation?: TooltipAnimation;
+    isHidden?: boolean;
+    isDark?: boolean;
+};
+
+declare type TooltipProps = PropsWithChildren<TooltipCoreProps>;
+
+export declare function useCopy(options?: UseCopyOptions): UseCopyReturn;
+
+declare type UseCopyOptions = {
+    resetDelay?: number;
+};
+
+declare type UseCopyReturn = {
+    copy: (doc: string) => Promise<void>;
+    status: CopyStatus;
+    error: Error | null;
+    isCopying: boolean;
+    isCopied: boolean;
+    isError: boolean;
+    isStandby: boolean;
+};
+
+export declare function useDebounce<T>(value: T, delay?: number): T;
+
+export declare function useWindowSize(options?: UseWindowSizeOptions): {
+    screenWidth: number;
+    screenHeight: number;
+};
+
+declare type UseWindowSizeOptions = {
+    updateDelay?: number;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,14 @@
+import { default as t } from "./react/hooks/useWindowSize.js";
+import { default as r } from "./react/hooks/useDebounce.js";
+import { default as s } from "./react/hooks/useCopy.js";
+import { default as p } from "./react/components/tooltip/Tooltip.js";
+import { default as l } from "./react/components/toast/Toaster.js";
+import { default as x } from "./react/components/toast/helpers/triggerToasts.js";
+export {
+  l as Toaster,
+  p as Tooltip,
+  x as toast,
+  s as useCopy,
+  r as useDebounce,
+  t as useWindowSize
+};

package/dist/react/components/toast/Toaster.js

@@ -0,0 +1,71 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as b, useEffect as k, useRef as v, useCallback as x, useLayoutEffect as E } from "react";
+import { subscribe as T } from "./helpers/listenar.js";
+import z from "./helpers/manageToasts/manageToasts.js";
+import O from "./partials/ToastContainer.js";
+function A(p) {
+  const {
+    position: u = "top-center",
+    richColors: l = !0,
+    animateTransformOrigin: m = !0,
+    gap: o = 8,
+    edgeOffset: n = 16,
+    isDark: d = window.matchMedia("(prefers-color-scheme: dark)").matches
+  } = p, [c, h] = b([]);
+  k(() => T((e) => z({ toast: e, setToasts: h })), []);
+  const s = v(null), r = x(() => {
+    if (!s.current) return;
+    const t = s.current.querySelectorAll("[data-toast-container]"), e = {
+      "top-left": 0,
+      "top-center": 0,
+      "top-right": 0,
+      "bottom-left": 0,
+      "bottom-center": 0,
+      "bottom-right": 0
+    };
+    t.forEach((a) => {
+      const f = a.getAttribute("data-toast-position") || "top-center", g = parseFloat(a.style.getPropertyValue("--toast-height")) || 0;
+      a.style.setProperty("--toast-offset-y", `${e[f]}px`);
+      const y = isNaN(+o) ? +o : 8;
+      e[f] += g + y;
+    });
+  }, [o]);
+  return E(() => {
+    r();
+  }, [c, r]), /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483647,
+        pointerEvents: "none",
+        display: "grid",
+        padding: n ?? 16
+      },
+      className: `kitzo-toaster ${l ? "kitzo-toaster-rich-colors" : ""} ${d ? "kitzo-toaster-dark" : ""}`,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            position: "relative"
+          },
+          children: c.map((t) => /* @__PURE__ */ i(
+            O,
+            {
+              t,
+              animateTransformOrigin: m,
+              containerPosition: u,
+              updateOffsets: r
+            },
+            t.id
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  A as default
+};