@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,76 @@
+import { AlertProps } from "../Alert/Alert.js";
+import { ReactElement, ReactNode } from "react";
+import { ExternalToast } from "sonner";
+
+//#region src/Toast/Toast.d.ts
+type AlertVariant = NonNullable<AlertProps['variant']>;
+/** Props passed to a custom render function */
+interface ToastRenderProps {
+  /** The toast message */
+  message: ReactNode;
+  /** The color/severity of the toast */
+  variant: AlertVariant;
+  /** Function to close the toast */
+  close: () => void;
+  /** Whether the toast can be closed by the user */
+  closable?: boolean;
+  /** Title displayed above the toast message */
+  title?: ReactNode;
+  /** Content displayed at the end of the toast */
+  endContent?: ReactNode;
+  /** Icon displayed at the start of the toast */
+  icon?: ReactNode;
+}
+/** Options passed to each toast method */
+interface ToastOptions {
+  /** Title displayed above the toast message */
+  title?: ReactNode;
+  /** Whether the toast can be closed by the user */
+  closable?: boolean;
+  /** Duration in milliseconds before the toast auto-closes */
+  duration?: number;
+  /** Position of the toast on the screen */
+  position?: ExternalToast['position'];
+  /** Callback fired when the toast auto-closes */
+  onAutoClose?: ExternalToast['onAutoClose'];
+  /** Callback fired when the toast is closed */
+  onClose?: ExternalToast['onDismiss'];
+  /** Content displayed at the end of the toast */
+  endContent?: ReactNode;
+  /** Icon displayed at the start of the toast */
+  icon?: ReactNode;
+  /** Custom render function to override the default AlertComponent */
+  render?: (props: ToastRenderProps) => ReactElement;
+}
+/** Toast object with convenience methods for different severity levels */
+declare const toast$1: {
+  /**
+   * Show a default toast.
+   * @returns The toast id which can be passed to `toast.close()`
+   */
+  default: (message: ReactNode, options?: ToastOptions) => string | number;
+  /**
+   * Show an info toast.
+   * @returns The toast id which can be passed to `toast.close()`
+   */
+  info: (message: ReactNode, options?: ToastOptions) => string | number;
+  /**
+   * Show a warning toast.
+   * @returns The toast id which can be passed to `toast.close()`
+   */
+  warn: (message: ReactNode, options?: ToastOptions) => string | number;
+  /**
+   * Show a success toast.
+   * @returns The toast id which can be passed to `toast.close()`
+   */
+  success: (message: ReactNode, options?: ToastOptions) => string | number;
+  /**
+   * Show an error toast.
+   * @returns The toast id which can be passed to `toast.close()`
+   */
+  error: (message: ReactNode, options?: ToastOptions) => string | number; /** Close a toast by its id */
+  close: (toastId: string | number) => void;
+};
+//#endregion
+export { ToastOptions, ToastRenderProps, toast$1 as toast };
+//# sourceMappingURL=Toast.d.ts.map

package/dist/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","names":[],"sources":["../../src/Toast/Toast.tsx"],"mappings":";;;;;KAQK,YAAA,GAAe,WAAW,CAAC,UAAA;;UAGf,gBAAA;EAHZ;EAKH,OAAA,EAAS,SAAA;;EAET,OAAA,EAAS,YAAA;EAP+B;EASxC,KAAA;EAN+B;EAQ/B,QAAA;EANS;EAQT,KAAA,GAAQ,SAAA;EAAA;EAER,UAAA,GAAa,SAAA;EAEN;EAAP,IAAA,GAAO,SAAA;AAAA;;UAIQ,YAAA;EAdf;EAgBA,KAAA,GAAQ,SAAA;EAdR;EAgBA,QAAA;EAZA;EAcA,QAAA;EAZA;EAcA,QAAA,GAAW,aAAA;EAZX;EAcA,WAAA,GAAc,aAAA;EAdE;EAgBhB,OAAA,GAAU,aAAA;EAZK;EAcf,UAAA,GAAa,SAAA;;EAEb,IAAA,GAAO,SAAA;EARI;EAUX,MAAA,IAAU,KAAA,EAAO,gBAAA,KAAqB,YAAA;AAAA;;cAuDlC,OAAA;EAvDa;;;;qBA4DE,SAAA,EAAS,OAAA,GAAY,YAAA;EA5EhC;;;;kBAmFQ,SAAA,EAAS,OAAA,GAAY,YAAA;EA3ErC;;;;kBAkFgB,SAAA,EAAS,OAAA,GAAY,YAAA;EA9ExB;;;;qBAyFM,SAAA,EAAS,OAAA,GAAY,YAAA;EArF9B;;;AAAwC;mBA4FjC,SAAA,EAAS,OAAA,GAAY,YAAA,sBAWvC"}

package/dist/Toast/Toast.js

@@ -0,0 +1,89 @@
+import Alert_default from "../Alert/index.js";
+import { jsx } from "react/jsx-runtime";
+import { toast } from "sonner";
+//#region src/Toast/Toast.tsx
+const showToast = (message, variant, options) => {
+	const { onClose, closable, title, endContent, icon, render, ...rest } = options ?? {};
+	const sonnerOptions = {
+		position: "top-center",
+		onDismiss: onClose,
+		...rest
+	};
+	return toast.custom((id) => {
+		const close = () => {
+			return toast.dismiss(id);
+		};
+		if (render) return render({
+			message,
+			variant,
+			close,
+			closable,
+			title,
+			endContent,
+			icon
+		});
+		return /* @__PURE__ */ jsx(Alert_default, {
+			closable,
+			endContent,
+			icon,
+			onClose: closable ? close : void 0,
+			title,
+			variant,
+			children: message
+		});
+	}, sonnerOptions);
+};
+/** Toast object with convenience methods for different severity levels */
+const toast$1 = {
+	/**
+	* Show a default toast.
+	* @returns The toast id which can be passed to `toast.close()`
+	*/
+	default: (message, options) => {
+		return showToast(message, "default", options);
+	},
+	/**
+	* Show an info toast.
+	* @returns The toast id which can be passed to `toast.close()`
+	*/
+	info: (message, options) => {
+		return showToast(message, "info", options);
+	},
+	/**
+	* Show a warning toast.
+	* @returns The toast id which can be passed to `toast.close()`
+	*/
+	warn: (message, options) => {
+		return showToast(message, "warning", {
+			duration: 6e4,
+			closable: true,
+			...options
+		});
+	},
+	/**
+	* Show a success toast.
+	* @returns The toast id which can be passed to `toast.close()`
+	*/
+	success: (message, options) => {
+		return showToast(message, "success", options);
+	},
+	/**
+	* Show an error toast.
+	* @returns The toast id which can be passed to `toast.close()`
+	*/
+	error: (message, options) => {
+		return showToast(message, "danger", {
+			duration: 6e4,
+			closable: true,
+			...options
+		});
+	},
+	/** Close a toast by its id */
+	close: (toastId) => {
+		toast.dismiss(toastId);
+	}
+};
+//#endregion
+export { toast$1 as default };
+
+//# sourceMappingURL=Toast.js.map

package/dist/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":["sonnerToast","AlertComponent","toast"],"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { ExternalToast } from 'sonner';\nimport type { AlertProps } from '../Alert';\n\nimport { toast as sonnerToast } from 'sonner';\n\nimport AlertComponent from '../Alert';\n\ntype AlertVariant = NonNullable<AlertProps['variant']>;\n\n/** Props passed to a custom render function */\nexport interface ToastRenderProps {\n  /** The toast message */\n  message: ReactNode;\n  /** The color/severity of the toast */\n  variant: AlertVariant;\n  /** Function to close the toast */\n  close: () => void;\n  /** Whether the toast can be closed by the user */\n  closable?: boolean;\n  /** Title displayed above the toast message */\n  title?: ReactNode;\n  /** Content displayed at the end of the toast */\n  endContent?: ReactNode;\n  /** Icon displayed at the start of the toast */\n  icon?: ReactNode;\n}\n\n/** Options passed to each toast method */\nexport interface ToastOptions {\n  /** Title displayed above the toast message */\n  title?: ReactNode;\n  /** Whether the toast can be closed by the user */\n  closable?: boolean;\n  /** Duration in milliseconds before the toast auto-closes */\n  duration?: number;\n  /** Position of the toast on the screen */\n  position?: ExternalToast['position'];\n  /** Callback fired when the toast auto-closes */\n  onAutoClose?: ExternalToast['onAutoClose'];\n  /** Callback fired when the toast is closed */\n  onClose?: ExternalToast['onDismiss'];\n  /** Content displayed at the end of the toast */\n  endContent?: ReactNode;\n  /** Icon displayed at the start of the toast */\n  icon?: ReactNode;\n  /** Custom render function to override the default AlertComponent */\n  render?: (props: ToastRenderProps) => ReactElement;\n}\n\nconst showToast = (\n  message: ReactNode,\n  variant: AlertVariant,\n  options?: ToastOptions,\n) => {\n  // Map custom ToastOptions to Sonner's ExternalToast format:\n  // - onClose is mapped to Sonner's onDismiss\n  // - closable is handled separately (not a Sonner option)\n  // - position defaults to 'top-center'\n  const { onClose, closable, title, endContent, icon, render, ...rest } =\n    options ?? {};\n  const sonnerOptions: ExternalToast = {\n    position: 'top-center' as const,\n    onDismiss: onClose,\n    ...rest,\n  };\n  return sonnerToast.custom((id) => {\n    // Close function passed to custom render or AlertComponent\n    const close = () => {\n      return sonnerToast.dismiss(id);\n    };\n\n    // Allow custom rendering via render prop\n    if (render) {\n      return render({\n        message,\n        variant,\n        close,\n        closable,\n        title,\n        endContent,\n        icon,\n      });\n    }\n\n    // Default: render AlertComponent\n    return (\n      <AlertComponent\n        closable={closable}\n        endContent={endContent}\n        icon={icon}\n        onClose={closable ? close : undefined}\n        title={title}\n        variant={variant}\n      >\n        {message}\n      </AlertComponent>\n    );\n  }, sonnerOptions);\n};\n\n/** Toast object with convenience methods for different severity levels */\nconst toast = {\n  /**\n   * Show a default toast.\n   * @returns The toast id which can be passed to `toast.close()`\n   */\n  default: (message: ReactNode, options?: ToastOptions) => {\n    return showToast(message, 'default', options);\n  },\n  /**\n   * Show an info toast.\n   * @returns The toast id which can be passed to `toast.close()`\n   */\n  info: (message: ReactNode, options?: ToastOptions) => {\n    return showToast(message, 'info', options);\n  },\n  /**\n   * Show a warning toast.\n   * @returns The toast id which can be passed to `toast.close()`\n   */\n  warn: (message: ReactNode, options?: ToastOptions) => {\n    return showToast(message, 'warning', {\n      duration: 60000,\n      closable: true,\n      ...options,\n    });\n  },\n  /**\n   * Show a success toast.\n   * @returns The toast id which can be passed to `toast.close()`\n   */\n  success: (message: ReactNode, options?: ToastOptions) => {\n    return showToast(message, 'success', options);\n  },\n  /**\n   * Show an error toast.\n   * @returns The toast id which can be passed to `toast.close()`\n   */\n  error: (message: ReactNode, options?: ToastOptions) => {\n    return showToast(message, 'danger', {\n      duration: 60000,\n      closable: true,\n      ...options,\n    });\n  },\n  /** Close a toast by its id */\n  close: (toastId: string | number) => {\n    sonnerToast.dismiss(toastId);\n  },\n};\n\nexport default toast;\n"],"mappings":";;;;AAkDA,MAAM,aACJ,SACA,SACA,YACG;CAKH,MAAM,EAAE,SAAS,UAAU,OAAO,YAAY,MAAM,QAAQ,GAAG,SAC7D,WAAW,CAAC;CACd,MAAM,gBAA+B;EACnC,UAAU;EACV,WAAW;EACX,GAAG;CACL;CACA,OAAOA,MAAY,QAAQ,OAAO;EAEhC,MAAM,cAAc;GAClB,OAAOA,MAAY,QAAQ,EAAE;EAC/B;EAGA,IAAI,QACF,OAAO,OAAO;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EAIH,OACE,oBAACC,eAAD;GACY;GACE;GACN;GACN,SAAS,WAAW,QAAQ,KAAA;GACrB;GACE;aAER;EACa,CAAA;CAEpB,GAAG,aAAa;AAClB;;AAGA,MAAMC,UAAQ;;;;;CAKZ,UAAU,SAAoB,YAA2B;EACvD,OAAO,UAAU,SAAS,WAAW,OAAO;CAC9C;;;;;CAKA,OAAO,SAAoB,YAA2B;EACpD,OAAO,UAAU,SAAS,QAAQ,OAAO;CAC3C;;;;;CAKA,OAAO,SAAoB,YAA2B;EACpD,OAAO,UAAU,SAAS,WAAW;GACnC,UAAU;GACV,UAAU;GACV,GAAG;EACL,CAAC;CACH;;;;;CAKA,UAAU,SAAoB,YAA2B;EACvD,OAAO,UAAU,SAAS,WAAW,OAAO;CAC9C;;;;;CAKA,QAAQ,SAAoB,YAA2B;EACrD,OAAO,UAAU,SAAS,UAAU;GAClC,UAAU;GACV,UAAU;GACV,GAAG;EACL,CAAC;CACH;;CAEA,QAAQ,YAA6B;EACnC,MAAY,QAAQ,OAAO;CAC7B;AACF"}

package/dist/Toast/Toaster.cjs

@@ -0,0 +1,11 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let sonner = require("sonner");
+//#region src/Toast/Toaster.tsx
+const Toaster = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, { ...props });
+};
+//#endregion
+exports.default = Toaster;
+
+//# sourceMappingURL=Toaster.cjs.map

package/dist/Toast/Toaster.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.cjs","names":["SonnerToaster"],"sources":["../../src/Toast/Toaster.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { Toaster as SonnerToaster } from 'sonner';\n\nexport type ToasterProps = Pick<\n  ComponentProps<typeof SonnerToaster>,\n  'visibleToasts' | 'position'\n>;\n\nconst Toaster = (props: ToasterProps) => {\n  return <SonnerToaster {...props} />;\n};\n\nexport default Toaster;\n"],"mappings":";;;;AASA,MAAM,WAAW,UAAwB;CACvC,OAAO,iBAAA,GAAA,kBAAA,KAACA,OAAAA,SAAD,EAAe,GAAI,MAAQ,CAAA;AACpC"}

package/dist/Toast/Toaster.d.cts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import { Toaster } from "sonner";
+
+//#region src/Toast/Toaster.d.ts
+type ToasterProps = Pick<ComponentProps<typeof Toaster>, 'visibleToasts' | 'position'>;
+declare const Toaster$1: (props: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Toaster$1 as Toaster, ToasterProps };
+//# sourceMappingURL=Toaster.d.cts.map

package/dist/Toast/Toaster.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.cts","names":[],"sources":["../../src/Toast/Toaster.tsx"],"mappings":";;;;KAIY,YAAA,GAAe,IAAA,CACzB,cAAA,QAAsB,OAAA;AAAA,cAIlB,SAAA,GAAW,KAAA,EAAO,YAAY,iCAAA,GAAA,CAAA,OAAA"}

package/dist/Toast/Toaster.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import { Toaster } from "sonner";
+
+//#region src/Toast/Toaster.d.ts
+type ToasterProps = Pick<ComponentProps<typeof Toaster>, 'visibleToasts' | 'position'>;
+declare const Toaster$1: (props: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Toaster$1 as Toaster, ToasterProps };
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/Toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","names":[],"sources":["../../src/Toast/Toaster.tsx"],"mappings":";;;;KAIY,YAAA,GAAe,IAAA,CACzB,cAAA,QAAsB,OAAA;AAAA,cAIlB,SAAA,GAAW,KAAA,EAAO,YAAY,iCAAA,GAAA,CAAA,OAAA"}

package/dist/Toast/Toaster.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+//#region src/Toast/Toaster.tsx
+const Toaster$1 = (props) => {
+	return /* @__PURE__ */ jsx(Toaster, { ...props });
+};
+//#endregion
+export { Toaster$1 as default };
+
+//# sourceMappingURL=Toaster.js.map

package/dist/Toast/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","names":["Toaster","SonnerToaster"],"sources":["../../src/Toast/Toaster.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { Toaster as SonnerToaster } from 'sonner';\n\nexport type ToasterProps = Pick<\n  ComponentProps<typeof SonnerToaster>,\n  'visibleToasts' | 'position'\n>;\n\nconst Toaster = (props: ToasterProps) => {\n  return <SonnerToaster {...props} />;\n};\n\nexport default Toaster;\n"],"mappings":";;;AASA,MAAMA,aAAW,UAAwB;CACvC,OAAO,oBAACC,SAAD,EAAe,GAAI,MAAQ,CAAA;AACpC"}

package/dist/Toast/index.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Toast = require("./Toast.cjs");
+const require_Toaster = require("./Toaster.cjs");
+//#region src/Toast/index.ts
+var Toast_default = require_Toast.default;
+//#endregion
+exports.Toaster = require_Toaster.default;
+exports.default = Toast_default;
+exports.toast = require_Toast.default;
 
-
-
-var _chunkYWEUUA52cjs = require('../chunk-YWEUUA52.cjs');
-require('../chunk-I5QMH3J5.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.Toaster = _chunkYWEUUA52cjs.Toaster_default; exports.default = _chunkYWEUUA52cjs.Toast_default2; exports.toast = _chunkYWEUUA52cjs.Toast_default;
 //# sourceMappingURL=index.cjs.map

package/dist/Toast/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Toast/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,yJAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Toast/index.cjs"}
+{"version":3,"file":"index.cjs","names":["toast"],"sources":["../../src/Toast/index.ts"],"sourcesContent":["import toast from './Toast';\nimport Toaster from './Toaster';\n\nexport type { ToastOptions, ToastRenderProps } from './Toast';\nexport type { ToasterProps } from './Toaster';\n\nexport { Toaster, toast };\nexport default toast;\n"],"mappings":";;;;;;;AAOA,IAAA,gBAAeA,cAAAA"}

package/dist/Toast/index.d.cts

@@ -1,12 +1,3 @@
-import { t as toast } from '../Toaster-D28PKRWz.cjs';
-export { a as ToastOptions, b as ToastRenderProps, T as Toaster, c as ToasterProps } from '../Toaster-D28PKRWz.cjs';
-import 'react';
-import 'sonner';
-import '../Alert-CWjAMyih.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-
-
-
-export { toast as default, toast };
+import { ToastOptions, ToastRenderProps, toast } from "./Toast.cjs";
+import { Toaster, ToasterProps } from "./Toaster.cjs";
+export { type ToastOptions, type ToastRenderProps, Toaster, type ToasterProps, toast as default, toast };

package/dist/Toast/index.d.ts

@@ -1,12 +1,3 @@
-import { t as toast } from '../Toaster-BtcILj3f.js';
-export { a as ToastOptions, b as ToastRenderProps, T as Toaster, c as ToasterProps } from '../Toaster-BtcILj3f.js';
-import 'react';
-import 'sonner';
-import '../Alert-CWjAMyih.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-
-
-
-export { toast as default, toast };
+import { ToastOptions, ToastRenderProps, toast } from "./Toast.js";
+import { Toaster, ToasterProps } from "./Toaster.js";
+export { type ToastOptions, type ToastRenderProps, Toaster, type ToasterProps, toast as default, toast };

package/dist/Toast/index.js

@@ -1,13 +1,8 @@
-import {
-  Toast_default,
-  Toast_default2,
-  Toaster_default
-} from "../chunk-VD7VRLYO.js";
-import "../chunk-SDZX5VJZ.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Toaster_default as Toaster,
-  Toast_default2 as default,
-  Toast_default as toast
-};
+import toast from "./Toast.js";
+import Toaster from "./Toaster.js";
+//#region src/Toast/index.ts
+var Toast_default = toast;
+//#endregion
+export { Toaster, Toast_default as default, toast };
+
 //# sourceMappingURL=index.js.map

package/dist/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Toast/index.ts"],"sourcesContent":["import toast from './Toast';\nimport Toaster from './Toaster';\n\nexport type { ToastOptions, ToastRenderProps } from './Toast';\nexport type { ToasterProps } from './Toaster';\n\nexport { Toaster, toast };\nexport default toast;\n"],"mappings":";;;AAOA,IAAA,gBAAe"}

package/dist/Tooltip/Tooltip.cjs

@@ -0,0 +1,105 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_ScrollShadow = require("../ScrollShadow/ScrollShadow.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_tooltip = require("@heroui/tooltip");
+//#region src/Tooltip/Tooltip.tsx
+const tooltipVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "",
+		body: "w-full px-4 py-2",
+		content: "flex max-h-[80vh] flex-col p-0",
+		divider: "m-0 w-full border-divider p-0",
+		footer: "w-full px-4 py-2",
+		footerWrapper: "w-full",
+		header: "w-full px-4 pb-1 pt-2 font-semibold",
+		headerWrapper: "w-full",
+		trigger: "cursor-pointer"
+	},
+	variants: { size: {
+		xs: {
+			body: "max-w-xs",
+			footer: "max-w-xs",
+			header: "max-w-xs"
+		},
+		sm: {
+			body: "max-w-sm",
+			footer: "max-w-sm",
+			header: "max-w-sm"
+		},
+		md: {
+			body: "max-w-md",
+			footer: "max-w-md",
+			header: "max-w-md"
+		},
+		lg: {
+			body: "max-w-lg",
+			footer: "max-w-lg",
+			header: "max-w-lg"
+		},
+		xl: {
+			body: "max-w-xl",
+			footer: "max-w-xl",
+			header: "max-w-xl"
+		},
+		"2xl": {
+			body: "max-w-2xl",
+			footer: "max-w-2xl",
+			header: "max-w-2xl"
+		},
+		"3xl": {
+			body: "max-w-3xl",
+			footer: "max-w-3xl",
+			header: "max-w-3xl"
+		},
+		full: { base: "" }
+	} }
+});
+/**
+* Tooltip component based on [HeroUI Tooltip](https://www.heroui.com//docs/components/tooltip)
+*/
+const Tooltip = ({ children, className: _className = void 0, closeDelay = 500, containerPadding = 0, content, defaultOpen = false, delay = 0, footer = void 0, header = void 0, onOpenChange = void 0, placement = "top", size = "full" }) => {
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(tooltipVariants({ size }), _className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_tooltip.Tooltip, {
+		shouldFlip: true,
+		showArrow: true,
+		classNames,
+		closeDelay,
+		containerPadding,
+		defaultOpen,
+		delay,
+		onOpenChange,
+		placement,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			header ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classNames.headerWrapper,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.header,
+					children: header
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: classNames.divider })]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollShadow.default, {
+				className: classNames.body,
+				children: content
+			}),
+			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classNames.footerWrapper,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: classNames.divider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.footer,
+					children: footer
+				})]
+			}) : null
+		] }),
+		onClick: (e) => {
+			e.preventDefault();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: classNames.trigger,
+			children
+		})
+	});
+};
+//#endregion
+exports.default = Tooltip;
+
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/Tooltip/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","names":["HeroTooltip","ScrollShadow"],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TooltipPlacement as HeroTooltipPlacement } from '@heroui/tooltip';\nimport type { ReactNode } from 'react';\n\nimport { Tooltip as HeroTooltip } from '@heroui/tooltip';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// tooltip variants\nexport const tooltipVariants = tv({\n  slots: {\n    base: '',\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'm-0 w-full border-divider p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pb-1 pt-2 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: 'cursor-pointer',\n  },\n  variants: {\n    size: {\n      xs: {\n        // base: 'max-w-xs',\n        body: 'max-w-xs',\n        footer: 'max-w-xs',\n        header: 'max-w-xs',\n      },\n      sm: {\n        // base: 'max-w-sm',\n        body: 'max-w-sm',\n        footer: 'max-w-sm',\n        header: 'max-w-sm',\n      },\n      md: {\n        // base: 'max-w-md',\n        body: 'max-w-md',\n        footer: 'max-w-md',\n        header: 'max-w-md',\n      },\n      lg: {\n        // base: 'max-w-lg',\n        body: 'max-w-lg',\n        footer: 'max-w-lg',\n        header: 'max-w-lg',\n      },\n      xl: {\n        // base: 'max-w-xl',\n        body: 'max-w-xl',\n        footer: 'max-w-xl',\n        header: 'max-w-xl',\n      },\n      '2xl': {\n        // base: 'max-w-2xl',\n        body: 'max-w-2xl',\n        footer: 'max-w-2xl',\n        header: 'max-w-2xl',\n      },\n      '3xl': {\n        // base: 'max-w-3xl',\n        body: 'max-w-3xl',\n        footer: 'max-w-3xl',\n        header: 'max-w-3xl',\n      },\n      full: { base: '' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof tooltipVariants>;\ntype ClassName = TVClassName<typeof tooltipVariants>;\n\nexport type TooltipPlacement = HeroTooltipPlacement;\n\nexport interface TooltipProps extends VariantProps {\n  /** trigger child components */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** delay in milliseconds before the tooltip opens. */\n  closeDelay?: number;\n  /** placement padding in px */\n  containerPadding?: number;\n  /** content displayed in the tooltip */\n  content: ReactNode;\n  /** open overlay initially when uncontrolled */\n  defaultOpen?: boolean;\n  /** delay in milliseconds before the tooltip opens. */\n  delay?: number;\n  /** tooltip footer */\n  footer?: ReactNode;\n  /** tooltip header */\n  header?: ReactNode;\n  /** handler that is called when the overlay's open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** placement if the tooltip */\n  placement?: TooltipPlacement;\n  /** size of the tooltip */\n  size?: VariantProps['size'];\n}\n\n/**\n * Tooltip component based on [HeroUI Tooltip](https://www.heroui.com//docs/components/tooltip)\n */\nconst Tooltip = ({\n  children,\n  className: _className = undefined,\n  closeDelay = 500,\n  containerPadding = 0,\n  content,\n  defaultOpen = false,\n  delay = 0,\n  footer = undefined,\n  header = undefined,\n  onOpenChange = undefined,\n  placement = 'top',\n  size = 'full',\n}: TooltipProps) => {\n  // classNames from slots\n  const variants = tooltipVariants({ size });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTooltip\n      shouldFlip\n      showArrow\n      classNames={classNames}\n      closeDelay={closeDelay}\n      containerPadding={containerPadding}\n      defaultOpen={defaultOpen}\n      delay={delay}\n      onOpenChange={onOpenChange}\n      placement={placement}\n      content={\n        <div>\n          {header ? (\n            <div className={classNames.headerWrapper}>\n              <div className={classNames.header}>{header}</div>\n              <hr className={classNames.divider} />\n            </div>\n          ) : null}\n          <ScrollShadow className={classNames.body}>{content}</ScrollShadow>\n          {footer ? (\n            <div className={classNames.footerWrapper}>\n              <hr className={classNames.divider} />\n              <div className={classNames.footer}>{footer}</div>\n            </div>\n          ) : null}\n        </div>\n      }\n      onClick={(e) => {\n        e.preventDefault();\n      }}\n    >\n      <span className={classNames.trigger}>{children}</span>\n    </HeroTooltip>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;AAWA,MAAa,mBAAA,GAAA,uBAAA,IAAqB;CAChC,OAAO;EACL,MAAM;EACN,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;EACR,eAAe;EACf,QAAQ;EACR,eAAe;EACf,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAEF,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,IAAI;GAEF,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,IAAI;GAEF,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,IAAI;GAEF,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,IAAI;GAEF,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GAEL,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,OAAO;GAEL,MAAM;GACN,QAAQ;GACR,QAAQ;EACV;EACA,MAAM,EAAE,MAAM,GAAG;CACnB,EACF;AACF,CAAC;;;;AAqCD,MAAM,WAAW,EACf,UACA,WAAW,aAAa,KAAA,GACxB,aAAa,KACb,mBAAmB,GACnB,SACA,cAAc,OACd,QAAQ,GACR,SAAS,KAAA,GACT,SAAS,KAAA,GACT,eAAe,KAAA,GACf,YAAY,OACZ,OAAO,aACW;CAGlB,MAAM,cAAA,GAAA,uBAAA,sBADW,gBAAgB,EAAE,KAAK,CACO,GAAG,YAAY,MAAM;CAEpE,OACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EACE,YAAA;EACA,WAAA;EACY;EACA;EACM;EACL;EACN;EACO;EACH;EACX,SACE,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA;GACG,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAW,WAAW;cAA3B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,WAAW;eAAS;IAAY,CAAA,GAChD,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,WAAW,QAAU,CAAA,CACjC;QACH;GACJ,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,SAAD;IAAc,WAAW,WAAW;cAAO;GAAsB,CAAA;GAChE,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAW,WAAW;cAA3B,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,WAAW,QAAU,CAAA,GACpC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,WAAW;eAAS;IAAY,CAAA,CAC7C;QACH;EACD,EAAA,CAAA;EAEP,UAAU,MAAM;GACd,EAAE,eAAe;EACnB;YAEA,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAW,WAAW;GAAU;EAAe,CAAA;CAC1C,CAAA;AAEjB"}

package/dist/Tooltip/Tooltip.d.cts

@@ -0,0 +1,208 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { TooltipPlacement } from "@heroui/tooltip";
+
+//#region src/Tooltip/Tooltip.d.ts
+declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    sm: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    md: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    lg: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    xl: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '2xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '3xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  body: string;
+  content: string;
+  divider: string;
+  footer: string;
+  footerWrapper: string;
+  header: string;
+  headerWrapper: string;
+  trigger: string;
+}, undefined, {
+  size: {
+    xs: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    sm: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    md: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    lg: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    xl: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '2xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '3xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  body: string;
+  content: string;
+  divider: string;
+  footer: string;
+  footerWrapper: string;
+  header: string;
+  headerWrapper: string;
+  trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    sm: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    md: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    lg: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    xl: {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '2xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    '3xl': {
+      body: string;
+      footer: string;
+      header: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  body: string;
+  content: string;
+  divider: string;
+  footer: string;
+  footerWrapper: string;
+  header: string;
+  headerWrapper: string;
+  trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof tooltipVariants>;
+type ClassName = TVClassName<typeof tooltipVariants>;
+type TooltipPlacement$1 = TooltipPlacement;
+interface TooltipProps extends VariantProps {
+  /** trigger child components */
+  children: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** delay in milliseconds before the tooltip opens. */
+  closeDelay?: number;
+  /** placement padding in px */
+  containerPadding?: number;
+  /** content displayed in the tooltip */
+  content: ReactNode;
+  /** open overlay initially when uncontrolled */
+  defaultOpen?: boolean;
+  /** delay in milliseconds before the tooltip opens. */
+  delay?: number;
+  /** tooltip footer */
+  footer?: ReactNode;
+  /** tooltip header */
+  header?: ReactNode;
+  /** handler that is called when the overlay's open state changes */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** placement if the tooltip */
+  placement?: TooltipPlacement$1;
+  /** size of the tooltip */
+  size?: VariantProps['size'];
+}
+/**
+ * Tooltip component based on [HeroUI Tooltip](https://www.heroui.com//docs/components/tooltip)
+ */
+declare const Tooltip: ({
+  children,
+  className: _className,
+  closeDelay,
+  containerPadding,
+  content,
+  defaultOpen,
+  delay,
+  footer,
+  header,
+  onOpenChange,
+  placement,
+  size
+}: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip, TooltipPlacement$1 as TooltipPlacement, TooltipProps };
+//# sourceMappingURL=Tooltip.d.cts.map

package/dist/Tooltip/Tooltip.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.cts","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"mappings":";;;;;cAWa,eAAA,8BAAe,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DvB,YAAA,GAAe,OAAO,QAAQ,eAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,eAAA;AAAA,KAExB,kBAAA,GAAmB,gBAAoB;AAAA,UAElC,YAAA,SAAqB,YAAA;EAAA;EAEpC,QAAA,EAAU,SAAA;EAAA;EAEV,SAAA,GAAY,SAAA;EAAA;EAEZ,UAAA;EAEA;EAAA,gBAAA;EAES;EAAT,OAAA,EAAS,SAAA;EAIT;EAFA,WAAA;EAIS;EAFT,KAAA;EAIS;EAFT,MAAA,GAAS,SAAA;EAIO;EAFhB,MAAA,GAAS,SAAA;EAIG;EAFZ,YAAA,IAAgB,MAAA;EAIT;EAFP,SAAA,GAAY,kBAAA;EAEO;EAAnB,IAAA,GAAO,YAAA;AAAA;;;;cAMH,OAAA;EAAW,QAAA;EAAA,SAAA,EAAA,UAAA;EAAA,UAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,WAAA;EAAA,KAAA;EAAA,MAAA;EAAA,MAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAad,YAAA,iCAAY,GAAA,CAAA,OAAA"}