@beautinique/frontend-components 0.0.0-stage → 1.0.0

package/dist/ui/Button.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.cts","sourceRoot":"","sources":["../../src/ui/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,eAAO,MAAM,MAAM,GAAI,oEAOpB,OAAO,gCAsBT,CAAC"}

package/dist/ui/Button.d.ts

@@ -0,0 +1,3 @@
+import type { IButton } from '../types/component.js';
+export declare const Button: ({ pattern, content, className, leftIcon, rightIcon, buttonProps, }: IButton) => import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/ui/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/ui/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,eAAO,MAAM,MAAM,GAAI,oEAOpB,OAAO,gCAsBT,CAAC"}

package/dist/ui/Tooltip.d.cts

@@ -0,0 +1,3 @@
+import type { ITooltip } from '../types/component.js';
+export declare const Tooltip: ({ children, required, ...props }: ITooltip) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=Tooltip.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.cts","sourceRoot":"","sources":["../../src/ui/Tooltip.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqGtD,eAAO,MAAM,OAAO,GAAI,kCAAyC,QAAQ,gWAExE,CAAC"}

package/dist/ui/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { ITooltip } from '../types/component.js';
+export declare const Tooltip: ({ children, required, ...props }: ITooltip) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/ui/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/Tooltip.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqGtD,eAAO,MAAM,OAAO,GAAI,kCAAyC,QAAQ,gWAExE,CAAC"}

package/dist/ui/index.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+var react = require('@iconify/react');
+var react$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/button.ts
+var getButtonCss = /* @__PURE__ */ __name((pattern) => {
+  switch (pattern) {
+    case "primary":
+      return "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover";
+    case "secondary":
+      return "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover";
+    case "tertiary":
+      return "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover";
+    case "outline":
+      return "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover";
+    case "transparent":
+    default:
+      return "bg-transparent border border-primary/30 text-secondary";
+  }
+}, "getButtonCss");
+var Button = /* @__PURE__ */ __name(({
+  pattern,
+  content,
+  className = "",
+  leftIcon,
+  rightIcon,
+  buttonProps
+}) => {
+  const btnCSS = getButtonCss(pattern);
+  const handleClick = /* @__PURE__ */ __name((e) => {
+    if (buttonProps?.disabled) return;
+    buttonProps?.onClick?.(e);
+  }, "handleClick");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...buttonProps,
+      className: `group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${buttonProps?.className ?? ""}`,
+      type: buttonProps?.type ?? "button",
+      onClick: handleClick,
+      children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...leftIcon }),
+        typeof content === "object" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...content }) : content,
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...rightIcon })
+      ]
+    }
+  );
+}, "Button");
+
+// src/lib/constants.ts
+var TOOLTIP_GAP = 15;
+var TOOLTIP_ANIMATION_DURATION = 400;
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "warning",
+  "progress",
+  "uploads",
+  "loading",
+  "default",
+  "custom"
+];
+Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
+
+// src/lib/tooltip.ts
+var getTooltipPosition = /* @__PURE__ */ __name((rect, placement) => {
+  switch (placement) {
+    case "bottom":
+      return { top: rect.bottom, left: rect.left + rect.width / 2 };
+    case "right":
+      return { top: rect.top + rect.height / 2, left: rect.right };
+    case "left":
+      return { top: rect.top + rect.height / 2, left: rect.left };
+    case "top":
+    default:
+      return { top: rect.top, left: rect.left + rect.width / 2 };
+  }
+}, "getTooltipPosition");
+var getTooltipTransform = /* @__PURE__ */ __name((placement, isVisible) => {
+  const gap = String(isVisible ? TOOLTIP_GAP : 0);
+  switch (placement) {
+    case "bottom":
+      return `translate(-50%, ${gap}px)`;
+    case "right":
+      return `translate(${gap}px, -50%)`;
+    case "left":
+      return `translate(calc(-100% - ${gap}px), -50%)`;
+    case "top":
+    default:
+      return `translate(-50%, calc(-100% - ${gap}px))`;
+  }
+}, "getTooltipTransform");
+var getTooltipArrowCss = /* @__PURE__ */ __name((placement) => {
+  switch (placement) {
+    case "bottom":
+      return "after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2";
+    case "right":
+      return "after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2";
+    case "left":
+      return "after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2";
+    case "top":
+    default:
+      return "after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2";
+  }
+}, "getTooltipArrowCss");
+var OriginalTooltip = /* @__PURE__ */ __name(({
+  title,
+  description,
+  children,
+  className = "",
+  containerClassName = "",
+  placement = "top"
+}) => {
+  const containerRef = react$1.useRef(null);
+  const [isOpen, setIsOpen] = react$1.useState(false);
+  const [isVisible, setIsVisible] = react$1.useState(false);
+  const [tooltipStyle, setTooltipStyle] = react$1.useState();
+  const closeTimerRef = react$1.useRef(void 0);
+  const animationFrameRef = react$1.useRef(void 0);
+  const updateTooltipPosition = react$1.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setTooltipStyle(getTooltipPosition(container.getBoundingClientRect(), placement));
+  }, [placement]);
+  const showTooltip = /* @__PURE__ */ __name(() => {
+    animationFrameRef.current = window.requestAnimationFrame(() => {
+      animationFrameRef.current = window.requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    });
+  }, "showTooltip");
+  const openTooltip = /* @__PURE__ */ __name(() => {
+    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    updateTooltipPosition();
+    setIsVisible(false);
+    setIsOpen(true);
+    showTooltip();
+  }, "openTooltip");
+  const closeTooltip = /* @__PURE__ */ __name(() => {
+    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    setIsVisible(false);
+    closeTimerRef.current = window.setTimeout(() => {
+      setIsOpen(false);
+    }, TOOLTIP_ANIMATION_DURATION);
+  }, "closeTooltip");
+  react$1.useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+      if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, []);
+  react$1.useLayoutEffect(() => {
+    if (!isOpen) return;
+    updateTooltipPosition();
+    window.addEventListener("resize", updateTooltipPosition);
+    window.addEventListener("scroll", updateTooltipPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateTooltipPosition);
+      window.removeEventListener("scroll", updateTooltipPosition, true);
+    };
+  }, [isOpen, updateTooltipPosition]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative inline-flex ${containerClassName}`,
+      onBlur: closeTooltip,
+      onFocus: openTooltip,
+      onMouseEnter: openTooltip,
+      onMouseLeave: closeTooltip,
+      children: [
+        children,
+        isOpen && tooltipStyle && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `border-silver-jet-2 bg-platinum-jet fixed z-9999 flex flex-col items-center justify-center rounded-lg border px-3 py-2 text-center whitespace-nowrap backdrop-blur-md transition-all duration-400 ease-in-out after:absolute after:border-8 after:border-solid after:border-transparent after:content-[''] ${isVisible ? "visible opacity-100" : "invisible opacity-0"} ${getTooltipArrowCss(placement)} ${className} `,
+              style: { ...tooltipStyle, transform: getTooltipTransform(placement, isVisible) },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary text-xs font-medium", children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-tertiary text-[10px] font-light", children: description })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}, "OriginalTooltip");
+var Tooltip = /* @__PURE__ */ __name(({ children, required = true, ...props }) => {
+  return required ? /* @__PURE__ */ jsxRuntime.jsx(OriginalTooltip, { ...props, children }) : children;
+}, "Tooltip");
+
+exports.Button = Button;
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/ui/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/button.ts","../../src/ui/Button.tsx","../../src/lib/constants.ts","../../src/lib/tooltip.ts","../../src/ui/Tooltip.tsx"],"names":["jsxs","jsx","Icon","useRef","useState","useCallback","useEffect","useLayoutEffect","createPortal"],"mappings":";;;;;;;;;;;AAEO,IAAM,YAAA,2BAAgB,OAAA,KAAgC;AAC3D,EAAA,QAAQ,OAAA;AAAS,IACf,KAAK,SAAA;AACH,MAAA,OAAO,gFAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAA,OAAO,0FAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,sFAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAA,OAAO,sFAAA;AAAA,IACT,KAAK,aAAA;AAAA,IACL;AACE,MAAA,OAAO,wDAAA;AAAA;AAEb,CAAA,EAd4B,cAAA,CAAA;ACIrB,IAAM,yBAAS,MAAA,CAAA,CAAC;AAAA,EACrB,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAe;AACb,EAAA,MAAM,MAAA,GAAS,aAAa,OAAO,CAAA;AAEnC,EAAA,MAAM,WAAA,2BAAe,CAAA,KAAqC;AACxD,IAAA,IAAI,aAAa,QAAA,EAAU;AAC3B,IAAA,WAAA,EAAa,UAAU,CAAC,CAAA;AAAA,EAC1B,CAAA,EAHoB,aAAA,CAAA;AAKpB,EAAA,uBACEA,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,sNAAsN,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAClP,WAAA,EAAa,aAAa,EAC5B,CAAA,CAAA;AAAA,MACA,IAAA,EAAM,aAAa,IAAA,IAAQ,QAAA;AAAA,MAC3B,OAAA,EAAS,WAAA;AAAA,MAER,QAAA,EAAA;AAAA,QAAA,QAAA,oBAAYC,cAAA,CAACC,UAAA,EAAA,EAAM,GAAG,QAAA,EAAU,CAAA;AAAA,QAChC,OAAO,OAAA,KAAY,QAAA,kCAAYA,UAAA,EAAA,EAAM,GAAG,SAAS,CAAA,GAAK,OAAA;AAAA,QACtD,SAAA,oBAAaD,cAAA,CAACC,UAAA,EAAA,EAAM,GAAG,SAAA,EAAW;AAAA;AAAA;AAAA,GACrC;AAEJ,CAAA,EA7BsB,QAAA;;;ACNf,IAAM,WAAA,GAAc,EAAA;AACpB,IAAM,0BAAA,GAA6B,GAAA;AAEnC,IAAM,WAAA,GAAc;AAAA,EACzB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAE0B,MAAA,CAAO,WAAA,CAAY,WAAA,CAAY,GAAA,CAAI,CAAC,IAAA,KAAS,CAAC,IAAA,EAAM,IAAI,CAAC,CAAC;;;ACT7E,IAAM,kBAAA,mBAAqB,MAAA,CAAA,CAChC,IAAA,EACA,SAAA,KACkB;AAClB,EAAA,QAAQ,SAAA;AAAW,IACjB,KAAK,QAAA;AACH,MAAA,OAAO,EAAE,KAAK,IAAA,CAAK,MAAA,EAAQ,MAAM,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,CAAA,EAAE;AAAA,IAC9D,KAAK,OAAA;AACH,MAAA,OAAO,EAAE,KAAK,IAAA,CAAK,GAAA,GAAM,KAAK,MAAA,GAAS,CAAA,EAAG,IAAA,EAAM,IAAA,CAAK,KAAA,EAAM;AAAA,IAC7D,KAAK,MAAA;AACH,MAAA,OAAO,EAAE,KAAK,IAAA,CAAK,GAAA,GAAM,KAAK,MAAA,GAAS,CAAA,EAAG,IAAA,EAAM,IAAA,CAAK,IAAA,EAAK;AAAA,IAC5D,KAAK,KAAA;AAAA,IACL;AACE,MAAA,OAAO,EAAE,KAAK,IAAA,CAAK,GAAA,EAAK,MAAM,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,CAAA,EAAE;AAAA;AAE/D,CAAA,EAfkC,oBAAA,CAAA;AAiB3B,IAAM,mBAAA,mBAAsB,MAAA,CAAA,CACjC,SAAA,EACA,SAAA,KACG;AACH,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,SAAA,GAAY,WAAA,GAAc,CAAC,CAAA;AAE9C,EAAA,QAAQ,SAAA;AAAW,IACjB,KAAK,QAAA;AACH,MAAA,OAAO,mBAAmB,GAAG,CAAA,GAAA,CAAA;AAAA,IAC/B,KAAK,OAAA;AACH,MAAA,OAAO,aAAa,GAAG,CAAA,SAAA,CAAA;AAAA,IACzB,KAAK,MAAA;AACH,MAAA,OAAO,0BAA0B,GAAG,CAAA,UAAA,CAAA;AAAA,IACtC,KAAK,KAAA;AAAA,IACL;AACE,MAAA,OAAO,gCAAgC,GAAG,CAAA,IAAA,CAAA;AAAA;AAEhD,CAAA,EAjBmC,qBAAA,CAAA;AAmB5B,IAAM,kBAAA,2BAAsB,SAAA,KAAkD;AACnF,EAAA,QAAQ,SAAA;AAAW,IACjB,KAAK,QAAA;AACH,MAAA,OAAO,qFAAA;AAAA,IACT,KAAK,OAAA;AACH,MAAA,OAAO,mFAAA;AAAA,IACT,KAAK,MAAA;AACH,MAAA,OAAO,kFAAA;AAAA,IACT,KAAK,KAAA;AAAA,IACL;AACE,MAAA,OAAO,kFAAA;AAAA;AAEb,CAAA,EAZkC,oBAAA,CAAA;AC3BlC,IAAM,kCAAkB,MAAA,CAAA,CAAC;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,kBAAA,GAAqB,EAAA;AAAA,EACrB,SAAA,GAAY;AACd,CAAA,KAAkC;AAChC,EAAA,MAAM,YAAA,GAAeC,eAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,iBAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,iBAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,gBAAA,EAAwB;AAChE,EAAA,MAAM,aAAA,GAAgBD,eAA2B,MAAS,CAAA;AAC1D,EAAA,MAAM,iBAAA,GAAoBA,eAA2B,MAAS,CAAA;AAE9D,EAAA,MAAM,qBAAA,GAAwBE,oBAAY,MAAM;AAC9C,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,IAAA,eAAA,CAAgB,kBAAA,CAAmB,SAAA,CAAU,qBAAA,EAAsB,EAAG,SAAS,CAAC,CAAA;AAAA,EAClF,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,8BAAc,MAAA,CAAA,MAAM;AACxB,IAAA,iBAAA,CAAkB,OAAA,GAAU,MAAA,CAAO,qBAAA,CAAsB,MAAM;AAC7D,MAAA,iBAAA,CAAkB,OAAA,GAAU,MAAA,CAAO,qBAAA,CAAsB,MAAM;AAC7D,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,MACnB,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AAAA,EACH,CAAA,EANoB,aAAA,CAAA;AAQpB,EAAA,MAAM,8BAAc,MAAA,CAAA,MAAM;AACxB,IAAA,IAAI,aAAA,CAAc,OAAA,EAAS,MAAA,CAAO,YAAA,CAAa,cAAc,OAAO,CAAA;AACpE,IAAA,IAAI,iBAAA,CAAkB,OAAA,EAAS,MAAA,CAAO,oBAAA,CAAqB,kBAAkB,OAAO,CAAA;AAEpF,IAAA,qBAAA,EAAsB;AACtB,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,WAAA,EAAY;AAAA,EACd,CAAA,EARoB,aAAA,CAAA;AAUpB,EAAA,MAAM,+BAAe,MAAA,CAAA,MAAM;AACzB,IAAA,IAAI,iBAAA,CAAkB,OAAA,EAAS,MAAA,CAAO,oBAAA,CAAqB,kBAAkB,OAAO,CAAA;AAEpF,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,aAAA,CAAc,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,MAAM;AAC9C,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB,GAAG,0BAA0B,CAAA;AAAA,EAC/B,CAAA,EAPqB,cAAA,CAAA;AASrB,EAAAC,iBAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,aAAA,CAAc,OAAA,EAAS,MAAA,CAAO,YAAA,CAAa,cAAc,OAAO,CAAA;AACpE,MAAA,IAAI,iBAAA,CAAkB,OAAA,EAAS,MAAA,CAAO,oBAAA,CAAqB,kBAAkB,OAAO,CAAA;AAAA,IACtF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,uBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,qBAAA,EAAsB;AACtB,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,qBAAqB,CAAA;AACvD,IAAA,MAAA,CAAO,gBAAA,CAAiB,QAAA,EAAU,qBAAA,EAAuB,IAAI,CAAA;AAE7D,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,qBAAqB,CAAA;AAC1D,MAAA,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,qBAAA,EAAuB,IAAI,CAAA;AAAA,IAClE,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,qBAAqB,CAAC,CAAA;AAElC,EAAA,uBACEP,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,wBAAwB,kBAAkB,CAAA,CAAA;AAAA,MACrD,MAAA,EAAQ,YAAA;AAAA,MACR,OAAA,EAAS,WAAA;AAAA,MACT,YAAA,EAAc,WAAA;AAAA,MACd,YAAA,EAAc,YAAA;AAAA,MAGb,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QAEA,UACC,YAAA,IACAQ,qBAAA;AAAA,0BACER,eAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,2SAAA,EAA8S,SAAA,GAAY,qBAAA,GAAwB,qBAAqB,IAAI,kBAAA,CAAmB,SAAS,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAA;AAAA,cACha,KAAA,EAAO,EAAE,GAAG,YAAA,EAAc,WAAW,mBAAA,CAAoB,SAAA,EAAW,SAAS,CAAA,EAAE;AAAA,cAE/E,QAAA,EAAA;AAAA,gCAAAC,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EAAoC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,gBACxD,+BACCA,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAwC,QAAA,EAAA,WAAA,EAAY;AAAA;AAAA;AAAA,WAEvE;AAAA,UACA,QAAA,CAAS;AAAA;AACX;AAAA;AAAA,GACJ;AAEJ,CAAA,EAjGwB,iBAAA,CAAA;AAmGjB,IAAM,OAAA,2BAAW,EAAE,QAAA,EAAU,WAAW,IAAA,EAAM,GAAG,OAAM,KAAgB;AAC5E,EAAA,OAAO,2BAAWA,cAAAA,CAAC,mBAAiB,GAAG,KAAA,EAAQ,UAAS,CAAA,GAAqB,QAAA;AAC/E,CAAA,EAFuB,SAAA","file":"index.cjs","sourcesContent":["import type { IButton } from '../types/component.js';\n\nexport const getButtonCss = (pattern: IButton['pattern']) => {\n  switch (pattern) {\n    case 'primary':\n      return 'text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover';\n    case 'secondary':\n      return 'text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover';\n    case 'tertiary':\n      return 'text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover';\n    case 'outline':\n      return 'text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover';\n    case 'transparent':\n    default:\n      return 'bg-transparent border border-primary/30 text-secondary';\n  }\n};\n","import { Icon } from '@iconify/react';\nimport { type MouseEvent } from 'react';\n\nimport { getButtonCss } from '../lib/button.js';\nimport type { IButton } from '../types/component.js';\n\nexport const Button = ({\n  pattern,\n  content,\n  className = '',\n  leftIcon,\n  rightIcon,\n  buttonProps,\n}: IButton) => {\n  const btnCSS = getButtonCss(pattern);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (buttonProps?.disabled) return;\n    buttonProps?.onClick?.(e);\n  };\n\n  return (\n    <button\n      {...buttonProps}\n      className={`group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${\n        buttonProps?.className ?? ''\n      }`}\n      type={buttonProps?.type ?? 'button'}\n      onClick={handleClick}\n    >\n      {leftIcon && <Icon {...leftIcon} />}\n      {typeof content === 'object' ? <Icon {...content} /> : content}\n      {rightIcon && <Icon {...rightIcon} />}\n    </button>\n  );\n};\n","export const TOOLTIP_GAP = 15 as const;\nexport const TOOLTIP_ANIMATION_DURATION = 400 as const;\n\nexport const TOAST_TYPES = [\n  'success',\n  'error',\n  'warning',\n  'progress',\n  'uploads',\n  'loading',\n  'default',\n  'custom',\n] as const;\n\nexport const TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type])) as {\n  [K in (typeof TOAST_TYPES)[number]]: K;\n};\n","import type { CSSProperties } from 'react';\n\nimport type { ITooltip } from '../types/component.js';\nimport { TOOLTIP_GAP } from './constants.js';\n\nexport const getTooltipPosition = (\n  rect: DOMRect,\n  placement: NonNullable<ITooltip['placement']>,\n): CSSProperties => {\n  switch (placement) {\n    case 'bottom':\n      return { top: rect.bottom, left: rect.left + rect.width / 2 };\n    case 'right':\n      return { top: rect.top + rect.height / 2, left: rect.right };\n    case 'left':\n      return { top: rect.top + rect.height / 2, left: rect.left };\n    case 'top':\n    default:\n      return { top: rect.top, left: rect.left + rect.width / 2 };\n  }\n};\n\nexport const getTooltipTransform = (\n  placement: NonNullable<ITooltip['placement']>,\n  isVisible: boolean,\n) => {\n  const gap = String(isVisible ? TOOLTIP_GAP : 0);\n\n  switch (placement) {\n    case 'bottom':\n      return `translate(-50%, ${gap}px)`;\n    case 'right':\n      return `translate(${gap}px, -50%)`;\n    case 'left':\n      return `translate(calc(-100% - ${gap}px), -50%)`;\n    case 'top':\n    default:\n      return `translate(-50%, calc(-100% - ${gap}px))`;\n  }\n};\n\nexport const getTooltipArrowCss = (placement: NonNullable<ITooltip['placement']>) => {\n  switch (placement) {\n    case 'bottom':\n      return 'after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2';\n    case 'right':\n      return 'after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2';\n    case 'left':\n      return 'after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2';\n    case 'top':\n    default:\n      return 'after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2';\n  }\n};\n","import {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { TOOLTIP_ANIMATION_DURATION } from '../lib/constants.js';\nimport { getTooltipArrowCss, getTooltipPosition, getTooltipTransform } from '../lib/tooltip.js';\nimport type { ITooltip } from '../types/component.js';\n\nconst OriginalTooltip = ({\n  title,\n  description,\n  children,\n  className = '',\n  containerClassName = '',\n  placement = 'top',\n}: Omit<ITooltip, 'required'>) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isVisible, setIsVisible] = useState(false);\n  const [tooltipStyle, setTooltipStyle] = useState<CSSProperties>();\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  const updateTooltipPosition = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    setTooltipStyle(getTooltipPosition(container.getBoundingClientRect(), placement));\n  }, [placement]);\n\n  const showTooltip = () => {\n    animationFrameRef.current = window.requestAnimationFrame(() => {\n      animationFrameRef.current = window.requestAnimationFrame(() => {\n        setIsVisible(true);\n      });\n    });\n  };\n\n  const openTooltip = () => {\n    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);\n    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n\n    updateTooltipPosition();\n    setIsVisible(false);\n    setIsOpen(true);\n    showTooltip();\n  };\n\n  const closeTooltip = () => {\n    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n\n    setIsVisible(false);\n    closeTimerRef.current = window.setTimeout(() => {\n      setIsOpen(false);\n    }, TOOLTIP_ANIMATION_DURATION);\n  };\n\n  useEffect(() => {\n    return () => {\n      if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);\n      if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updateTooltipPosition();\n    window.addEventListener('resize', updateTooltipPosition);\n    window.addEventListener('scroll', updateTooltipPosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updateTooltipPosition);\n      window.removeEventListener('scroll', updateTooltipPosition, true);\n    };\n  }, [isOpen, updateTooltipPosition]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative inline-flex ${containerClassName}`}\n      onBlur={closeTooltip}\n      onFocus={openTooltip}\n      onMouseEnter={openTooltip}\n      onMouseLeave={closeTooltip}\n    >\n      {/* Main Content */}\n      {children}\n      {/* Tooltip */}\n      {isOpen &&\n        tooltipStyle &&\n        createPortal(\n          <div\n            className={`border-silver-jet-2 bg-platinum-jet fixed z-9999 flex flex-col items-center justify-center rounded-lg border px-3 py-2 text-center whitespace-nowrap backdrop-blur-md transition-all duration-400 ease-in-out after:absolute after:border-8 after:border-solid after:border-transparent after:content-[''] ${isVisible ? 'visible opacity-100' : 'invisible opacity-0'} ${getTooltipArrowCss(placement)} ${className} `}\n            style={{ ...tooltipStyle, transform: getTooltipTransform(placement, isVisible) }}\n          >\n            <div className=\"text-primary text-xs font-medium\">{title}</div>\n            {description && (\n              <div className=\"text-tertiary text-[10px] font-light\">{description}</div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n\nexport const Tooltip = ({ children, required = true, ...props }: ITooltip) => {\n  return required ? <OriginalTooltip {...props}>{children}</OriginalTooltip> : children;\n};\n"]}

package/dist/ui/index.d.cts

@@ -0,0 +1,3 @@
+export { Button } from './Button.js';
+export { Tooltip } from './Tooltip.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/ui/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button.js';
+export { Tooltip } from './Tooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,202 @@
+import { Icon } from '@iconify/react';
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/button.ts
+var getButtonCss = /* @__PURE__ */ __name((pattern) => {
+  switch (pattern) {
+    case "primary":
+      return "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover";
+    case "secondary":
+      return "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover";
+    case "tertiary":
+      return "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover";
+    case "outline":
+      return "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover";
+    case "transparent":
+    default:
+      return "bg-transparent border border-primary/30 text-secondary";
+  }
+}, "getButtonCss");
+var Button = /* @__PURE__ */ __name(({
+  pattern,
+  content,
+  className = "",
+  leftIcon,
+  rightIcon,
+  buttonProps
+}) => {
+  const btnCSS = getButtonCss(pattern);
+  const handleClick = /* @__PURE__ */ __name((e) => {
+    if (buttonProps?.disabled) return;
+    buttonProps?.onClick?.(e);
+  }, "handleClick");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...buttonProps,
+      className: `group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${buttonProps?.className ?? ""}`,
+      type: buttonProps?.type ?? "button",
+      onClick: handleClick,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx(Icon, { ...leftIcon }),
+        typeof content === "object" ? /* @__PURE__ */ jsx(Icon, { ...content }) : content,
+        rightIcon && /* @__PURE__ */ jsx(Icon, { ...rightIcon })
+      ]
+    }
+  );
+}, "Button");
+
+// src/lib/constants.ts
+var TOOLTIP_GAP = 15;
+var TOOLTIP_ANIMATION_DURATION = 400;
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "warning",
+  "progress",
+  "uploads",
+  "loading",
+  "default",
+  "custom"
+];
+Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
+
+// src/lib/tooltip.ts
+var getTooltipPosition = /* @__PURE__ */ __name((rect, placement) => {
+  switch (placement) {
+    case "bottom":
+      return { top: rect.bottom, left: rect.left + rect.width / 2 };
+    case "right":
+      return { top: rect.top + rect.height / 2, left: rect.right };
+    case "left":
+      return { top: rect.top + rect.height / 2, left: rect.left };
+    case "top":
+    default:
+      return { top: rect.top, left: rect.left + rect.width / 2 };
+  }
+}, "getTooltipPosition");
+var getTooltipTransform = /* @__PURE__ */ __name((placement, isVisible) => {
+  const gap = String(isVisible ? TOOLTIP_GAP : 0);
+  switch (placement) {
+    case "bottom":
+      return `translate(-50%, ${gap}px)`;
+    case "right":
+      return `translate(${gap}px, -50%)`;
+    case "left":
+      return `translate(calc(-100% - ${gap}px), -50%)`;
+    case "top":
+    default:
+      return `translate(-50%, calc(-100% - ${gap}px))`;
+  }
+}, "getTooltipTransform");
+var getTooltipArrowCss = /* @__PURE__ */ __name((placement) => {
+  switch (placement) {
+    case "bottom":
+      return "after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2";
+    case "right":
+      return "after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2";
+    case "left":
+      return "after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2";
+    case "top":
+    default:
+      return "after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2";
+  }
+}, "getTooltipArrowCss");
+var OriginalTooltip = /* @__PURE__ */ __name(({
+  title,
+  description,
+  children,
+  className = "",
+  containerClassName = "",
+  placement = "top"
+}) => {
+  const containerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [tooltipStyle, setTooltipStyle] = useState();
+  const closeTimerRef = useRef(void 0);
+  const animationFrameRef = useRef(void 0);
+  const updateTooltipPosition = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setTooltipStyle(getTooltipPosition(container.getBoundingClientRect(), placement));
+  }, [placement]);
+  const showTooltip = /* @__PURE__ */ __name(() => {
+    animationFrameRef.current = window.requestAnimationFrame(() => {
+      animationFrameRef.current = window.requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    });
+  }, "showTooltip");
+  const openTooltip = /* @__PURE__ */ __name(() => {
+    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    updateTooltipPosition();
+    setIsVisible(false);
+    setIsOpen(true);
+    showTooltip();
+  }, "openTooltip");
+  const closeTooltip = /* @__PURE__ */ __name(() => {
+    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    setIsVisible(false);
+    closeTimerRef.current = window.setTimeout(() => {
+      setIsOpen(false);
+    }, TOOLTIP_ANIMATION_DURATION);
+  }, "closeTooltip");
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+      if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updateTooltipPosition();
+    window.addEventListener("resize", updateTooltipPosition);
+    window.addEventListener("scroll", updateTooltipPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateTooltipPosition);
+      window.removeEventListener("scroll", updateTooltipPosition, true);
+    };
+  }, [isOpen, updateTooltipPosition]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative inline-flex ${containerClassName}`,
+      onBlur: closeTooltip,
+      onFocus: openTooltip,
+      onMouseEnter: openTooltip,
+      onMouseLeave: closeTooltip,
+      children: [
+        children,
+        isOpen && tooltipStyle && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `border-silver-jet-2 bg-platinum-jet fixed z-9999 flex flex-col items-center justify-center rounded-lg border px-3 py-2 text-center whitespace-nowrap backdrop-blur-md transition-all duration-400 ease-in-out after:absolute after:border-8 after:border-solid after:border-transparent after:content-[''] ${isVisible ? "visible opacity-100" : "invisible opacity-0"} ${getTooltipArrowCss(placement)} ${className} `,
+              style: { ...tooltipStyle, transform: getTooltipTransform(placement, isVisible) },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "text-primary text-xs font-medium", children: title }),
+                description && /* @__PURE__ */ jsx("div", { className: "text-tertiary text-[10px] font-light", children: description })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}, "OriginalTooltip");
+var Tooltip = /* @__PURE__ */ __name(({ children, required = true, ...props }) => {
+  return required ? /* @__PURE__ */ jsx(OriginalTooltip, { ...props, children }) : children;
+}, "Tooltip");
+
+export { Button, Tooltip };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/button.ts","../../src/ui/Button.tsx","../../src/lib/constants.ts","../../src/lib/tooltip.ts","../../src/ui/Tooltip.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import type { IButton } from '../types/component.js';\n\nexport const getButtonCss = (pattern: IButton['pattern']) => {\n  switch (pattern) {\n    case 'primary':\n      return 'text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover';\n    case 'secondary':\n      return 'text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover';\n    case 'tertiary':\n      return 'text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover';\n    case 'outline':\n      return 'text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover';\n    case 'transparent':\n    default:\n      return 'bg-transparent border border-primary/30 text-secondary';\n  }\n};\n","import { Icon } from '@iconify/react';\nimport { type MouseEvent } from 'react';\n\nimport { getButtonCss } from '../lib/button.js';\nimport type { IButton } from '../types/component.js';\n\nexport const Button = ({\n  pattern,\n  content,\n  className = '',\n  leftIcon,\n  rightIcon,\n  buttonProps,\n}: IButton) => {\n  const btnCSS = getButtonCss(pattern);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (buttonProps?.disabled) return;\n    buttonProps?.onClick?.(e);\n  };\n\n  return (\n    <button\n      {...buttonProps}\n      className={`group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${\n        buttonProps?.className ?? ''\n      }`}\n      type={buttonProps?.type ?? 'button'}\n      onClick={handleClick}\n    >\n      {leftIcon && <Icon {...leftIcon} />}\n      {typeof content === 'object' ? <Icon {...content} /> : content}\n      {rightIcon && <Icon {...rightIcon} />}\n    </button>\n  );\n};\n","export const TOOLTIP_GAP = 15 as const;\nexport const TOOLTIP_ANIMATION_DURATION = 400 as const;\n\nexport const TOAST_TYPES = [\n  'success',\n  'error',\n  'warning',\n  'progress',\n  'uploads',\n  'loading',\n  'default',\n  'custom',\n] as const;\n\nexport const TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type])) as {\n  [K in (typeof TOAST_TYPES)[number]]: K;\n};\n","import type { CSSProperties } from 'react';\n\nimport type { ITooltip } from '../types/component.js';\nimport { TOOLTIP_GAP } from './constants.js';\n\nexport const getTooltipPosition = (\n  rect: DOMRect,\n  placement: NonNullable<ITooltip['placement']>,\n): CSSProperties => {\n  switch (placement) {\n    case 'bottom':\n      return { top: rect.bottom, left: rect.left + rect.width / 2 };\n    case 'right':\n      return { top: rect.top + rect.height / 2, left: rect.right };\n    case 'left':\n      return { top: rect.top + rect.height / 2, left: rect.left };\n    case 'top':\n    default:\n      return { top: rect.top, left: rect.left + rect.width / 2 };\n  }\n};\n\nexport const getTooltipTransform = (\n  placement: NonNullable<ITooltip['placement']>,\n  isVisible: boolean,\n) => {\n  const gap = String(isVisible ? TOOLTIP_GAP : 0);\n\n  switch (placement) {\n    case 'bottom':\n      return `translate(-50%, ${gap}px)`;\n    case 'right':\n      return `translate(${gap}px, -50%)`;\n    case 'left':\n      return `translate(calc(-100% - ${gap}px), -50%)`;\n    case 'top':\n    default:\n      return `translate(-50%, calc(-100% - ${gap}px))`;\n  }\n};\n\nexport const getTooltipArrowCss = (placement: NonNullable<ITooltip['placement']>) => {\n  switch (placement) {\n    case 'bottom':\n      return 'after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2';\n    case 'right':\n      return 'after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2';\n    case 'left':\n      return 'after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2';\n    case 'top':\n    default:\n      return 'after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2';\n  }\n};\n","import {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { TOOLTIP_ANIMATION_DURATION } from '../lib/constants.js';\nimport { getTooltipArrowCss, getTooltipPosition, getTooltipTransform } from '../lib/tooltip.js';\nimport type { ITooltip } from '../types/component.js';\n\nconst OriginalTooltip = ({\n  title,\n  description,\n  children,\n  className = '',\n  containerClassName = '',\n  placement = 'top',\n}: Omit<ITooltip, 'required'>) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isVisible, setIsVisible] = useState(false);\n  const [tooltipStyle, setTooltipStyle] = useState<CSSProperties>();\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  const updateTooltipPosition = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    setTooltipStyle(getTooltipPosition(container.getBoundingClientRect(), placement));\n  }, [placement]);\n\n  const showTooltip = () => {\n    animationFrameRef.current = window.requestAnimationFrame(() => {\n      animationFrameRef.current = window.requestAnimationFrame(() => {\n        setIsVisible(true);\n      });\n    });\n  };\n\n  const openTooltip = () => {\n    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);\n    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n\n    updateTooltipPosition();\n    setIsVisible(false);\n    setIsOpen(true);\n    showTooltip();\n  };\n\n  const closeTooltip = () => {\n    if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n\n    setIsVisible(false);\n    closeTimerRef.current = window.setTimeout(() => {\n      setIsOpen(false);\n    }, TOOLTIP_ANIMATION_DURATION);\n  };\n\n  useEffect(() => {\n    return () => {\n      if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);\n      if (animationFrameRef.current) window.cancelAnimationFrame(animationFrameRef.current);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    updateTooltipPosition();\n    window.addEventListener('resize', updateTooltipPosition);\n    window.addEventListener('scroll', updateTooltipPosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updateTooltipPosition);\n      window.removeEventListener('scroll', updateTooltipPosition, true);\n    };\n  }, [isOpen, updateTooltipPosition]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative inline-flex ${containerClassName}`}\n      onBlur={closeTooltip}\n      onFocus={openTooltip}\n      onMouseEnter={openTooltip}\n      onMouseLeave={closeTooltip}\n    >\n      {/* Main Content */}\n      {children}\n      {/* Tooltip */}\n      {isOpen &&\n        tooltipStyle &&\n        createPortal(\n          <div\n            className={`border-silver-jet-2 bg-platinum-jet fixed z-9999 flex flex-col items-center justify-center rounded-lg border px-3 py-2 text-center whitespace-nowrap backdrop-blur-md transition-all duration-400 ease-in-out after:absolute after:border-8 after:border-solid after:border-transparent after:content-[''] ${isVisible ? 'visible opacity-100' : 'invisible opacity-0'} ${getTooltipArrowCss(placement)} ${className} `}\n            style={{ ...tooltipStyle, transform: getTooltipTransform(placement, isVisible) }}\n          >\n            <div className=\"text-primary text-xs font-medium\">{title}</div>\n            {description && (\n              <div className=\"text-tertiary text-[10px] font-light\">{description}</div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n};\n\nexport const Tooltip = ({ children, required = true, ...props }: ITooltip) => {\n  return required ? <OriginalTooltip {...props}>{children}</OriginalTooltip> : children;\n};\n"]}

package/package.json

@@ -1,6 +1,102 @@
 {
   "name": "@beautinique/frontend-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Shared React UI components for the Beautinique frontends.",
+  "keywords": [
+    "frontend",
+    "react",
+    "components",
+    "ui",
+    "tailwind",
+    "beautinique"
+  ],
+  "author": "Nageshwar Pawar",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nageshwar1997/BQ-Packages.git",
+    "directory": "packages/frontend/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Nageshwar1997/BQ-Packages/issues"
+  },
+  "homepage": "https://github.com/Nageshwar1997/BQ-Packages/tree/main/packages/frontend/components#readme",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "source.css"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/toast/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js",
+      "require": "./dist/ui/index.cjs",
+      "default": "./dist/ui/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast/index.js",
+      "require": "./dist/toast/index.cjs",
+      "default": "./dist/toast/index.js"
+    },
+    "./source.css": "./source.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "postbuild": "node ../../../scripts/build-types/index.mjs",
+    "dev": "tsup --watch",
+    "playground": "vite --config playground/vite.config.ts",
+    "lint": "eslint .",
+    "test": "vitest run --environment jsdom",
+    "test:watch": "vitest --environment jsdom",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "peerDependencies": {
+    "@beautinique/frontend-styles": "^1.1.0",
+    "@iconify/react": "^6.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "nanoid": "^6.0.1",
+    "zustand": "^5.0.15"
+  },
+  "devDependencies": {
+    "@beautinique/frontend-styles": "^1.1.0",
+    "@iconify/react": "^6.0.2",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^30.1.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
+  }
+}

package/source.css

@@ -0,0 +1,11 @@
+/* @beautinique/frontend-components - tells Tailwind where the components' class names are.
+ *
+ * Tailwind v4 does not look inside node_modules for class names, so without this the classes the
+ * components use (e.g. `rounded-lg`, `shadow-primary-btn`) would not be generated and the
+ * components would look unstyled. Import it in the app's own css, after the styles package:
+ *
+ *   @import '@beautinique/frontend-styles';
+ *   @import '@beautinique/frontend-components/source.css';
+ *   @import './app.css';
+ */
+@source './dist';