reaxify 0.0.14 → 0.0.16

package/dist/components/Tooltip/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const x=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("../../helpers/cn.cjs.js"),p=require("react"),E=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function q({title:b,color:g="dark",placement:u="top",className:d,children:i,...s}){const t=E(r=>r.tooltip),[f,c]=p.useState(!1),l=p.useMemo(()=>{var e,o,a,m,j,y,M,k;if(!g)return"border-transparent";const r={primary:n("bg-primary text-white",(e=t==null?void 0:t.color)==null?void 0:e.primary),secondary:n("bg-secondary text-white",(o=t==null?void 0:t.color)==null?void 0:o.secondary),success:n("bg-success text-white",(a=t==null?void 0:t.color)==null?void 0:a.success),info:n("bg-info text-white",(m=t==null?void 0:t.color)==null?void 0:m.info),warning:n("bg-warning text-white",(j=t==null?void 0:t.color)==null?void 0:j.warning),danger:n("bg-danger text-white",(y=t==null?void 0:t.color)==null?void 0:y.danger),dark:n("bg-dark text-white",(M=t==null?void 0:t.color)==null?void 0:M.dark),light:n("bg-light text-dark",(k=t==null?void 0:t.color)==null?void 0:k.light)};return(r==null?void 0:r[g])??null},[g,t==null?void 0:t.color]),w=p.useMemo(()=>{var e,o,a,m;return{top:n("bottom-[calc(100%+0.5rem)] left-0 right-0 flex-col origin-bottom",(e=t==null?void 0:t.placement)==null?void 0:e.top),end:n("start-[calc(100%+0.5rem)] top-0 bottom-0 flex-row-reverse origin-start",(o=t==null?void 0:t.placement)==null?void 0:o.end),bottom:n("top-[calc(100%+0.5rem)] left-0 right-0 flex-col-reverse origin-top",(a=t==null?void 0:t.placement)==null?void 0:a.bottom),start:n("end-[calc(100%+0.5rem)] top-0 bottom-0 flex-row origin-end",(m=t==null?void 0:t.placement)==null?void 0:m.start)}[u]},[u,t==null?void 0:t.placement]),h=p.useMemo(()=>({top:"mt-[-0.5rem]",end:"me-[-0.5rem]",bottom:"mb-[-0.5rem]",start:"ms-[-0.5rem]"})[u],[u]);return p.useMemo(()=>i?p.cloneElement(i,{onMouseEnter:r=>{var e,o;(o=(e=i.props).onMouseEnter)==null||o.call(e,r),c(!0)},onMouseLeave:r=>{var e,o;(o=(e=i.props).onMouseLeave)==null||o.call(e,r),c(!1)},onFocus:r=>{var e,o;(o=(e=i.props).onFocus)==null||o.call(e,r),c(!0)},onBlur:r=>{var e,o;(o=(e=i.props).onBlur)==null||o.call(e,r),c(!1)},className:n(i.props.className,"relative"),children:x.jsxRuntimeExports.jsxs(p.Fragment,{children:[i.props.children,x.jsxRuntimeExports.jsxs("div",{className:n("absolute flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity]",w,f?"scale-100 opacity-100":"scale-75 opacity-0"),children:[x.jsxRuntimeExports.jsx("span",{className:v.twMerge("relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",t==null?void 0:t.base,l,d),...s,children:b}),x.jsxRuntimeExports.jsx("span",{className:v.twMerge("block size-3 bg-dark rotate-45",h,l)})]})]})}):null,[b,i,d,t==null?void 0:t.base,l,f,s,w,h])}module.exports=q;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,11 @@
+import { Color, ComponentPropsWithoutAs } from '../../types';
+import { ReactElement } from 'react';
+type Placement = "top" | "end" | "bottom" | "start";
+type Props = {
+    title: string;
+    color?: Color;
+    placement?: Placement;
+    children?: ReactElement;
+};
+export default function Tooltip({ title, color, placement, className, children, ...props }: ComponentPropsWithoutAs<"span", Props>): ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;
+export {};

package/dist/components/Tooltip/index.es.js

@@ -0,0 +1,125 @@
+import { j as u } from "../../node_modules/react/jsx-runtime.es.js";
+import n from "../../helpers/cn.es.js";
+import { useState as E, useMemo as l, cloneElement as N, Fragment as s } from "react";
+import z from "../../hooks/useClasses.es.js";
+import "../Form/index.es.js";
+import { twMerge as M } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+function T({
+  title: b,
+  color: g = "dark",
+  placement: a = "top",
+  className: d,
+  children: i,
+  ...x
+}) {
+  const t = z((r) => r.tooltip), [w, c] = E(!1), f = l(() => {
+    var o, e, p, m, k, v, j, C;
+    if (!g) return "border-transparent";
+    const r = {
+      primary: n("bg-primary text-white", (o = t == null ? void 0 : t.color) == null ? void 0 : o.primary),
+      secondary: n("bg-secondary text-white", (e = t == null ? void 0 : t.color) == null ? void 0 : e.secondary),
+      success: n("bg-success text-white", (p = t == null ? void 0 : t.color) == null ? void 0 : p.success),
+      info: n("bg-info text-white", (m = t == null ? void 0 : t.color) == null ? void 0 : m.info),
+      warning: n("bg-warning text-white", (k = t == null ? void 0 : t.color) == null ? void 0 : k.warning),
+      danger: n("bg-danger text-white", (v = t == null ? void 0 : t.color) == null ? void 0 : v.danger),
+      dark: n("bg-dark text-white", (j = t == null ? void 0 : t.color) == null ? void 0 : j.dark),
+      light: n("bg-light text-dark", (C = t == null ? void 0 : t.color) == null ? void 0 : C.light)
+    };
+    return (r == null ? void 0 : r[g]) ?? null;
+  }, [g, t == null ? void 0 : t.color]), h = l(() => {
+    var o, e, p, m;
+    return {
+      top: n(
+        "bottom-[calc(100%+0.5rem)] left-0 right-0 flex-col origin-bottom",
+        (o = t == null ? void 0 : t.placement) == null ? void 0 : o.top
+      ),
+      end: n(
+        "start-[calc(100%+0.5rem)] top-0 bottom-0 flex-row-reverse origin-start",
+        (e = t == null ? void 0 : t.placement) == null ? void 0 : e.end
+      ),
+      bottom: n(
+        "top-[calc(100%+0.5rem)] left-0 right-0 flex-col-reverse origin-top",
+        (p = t == null ? void 0 : t.placement) == null ? void 0 : p.bottom
+      ),
+      start: n(
+        "end-[calc(100%+0.5rem)] top-0 bottom-0 flex-row origin-end",
+        (m = t == null ? void 0 : t.placement) == null ? void 0 : m.start
+      )
+    }[a];
+  }, [a, t == null ? void 0 : t.placement]), y = l(() => ({
+    top: "mt-[-0.5rem]",
+    end: "me-[-0.5rem]",
+    bottom: "mb-[-0.5rem]",
+    start: "ms-[-0.5rem]"
+  })[a], [a]);
+  return l(() => i ? N(i, {
+    onMouseEnter: (r) => {
+      var o, e;
+      (e = (o = i.props).onMouseEnter) == null || e.call(o, r), c(!0);
+    },
+    onMouseLeave: (r) => {
+      var o, e;
+      (e = (o = i.props).onMouseLeave) == null || e.call(o, r), c(!1);
+    },
+    onFocus: (r) => {
+      var o, e;
+      (e = (o = i.props).onFocus) == null || e.call(o, r), c(!0);
+    },
+    onBlur: (r) => {
+      var o, e;
+      (e = (o = i.props).onBlur) == null || e.call(o, r), c(!1);
+    },
+    className: n(i.props.className, "relative"),
+    children: /* @__PURE__ */ u.jsxs(s, { children: [
+      i.props.children,
+      /* @__PURE__ */ u.jsxs(
+        "div",
+        {
+          className: n(
+            "absolute flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity]",
+            h,
+            w ? "scale-100 opacity-100" : "scale-75 opacity-0"
+          ),
+          children: [
+            /* @__PURE__ */ u.jsx(
+              "span",
+              {
+                className: M(
+                  "relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",
+                  t == null ? void 0 : t.base,
+                  f,
+                  d
+                ),
+                ...x,
+                children: b
+              }
+            ),
+            /* @__PURE__ */ u.jsx(
+              "span",
+              {
+                className: M(
+                  "block size-3 bg-dark rotate-45",
+                  y,
+                  f
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  }) : null, [
+    b,
+    i,
+    d,
+    t == null ? void 0 : t.base,
+    f,
+    w,
+    x,
+    h,
+    y
+  ]);
+}
+export {
+  T as default
+};

package/dist/components/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Accordion/index.cjs.js"),r=require("./Badge/index.cjs.js"),n=require("./Box/index.cjs.js"),i=require("./Button/index.cjs.js"),t=require("./ButtonGroup/index.cjs.js"),o=require("./Card/index.cjs.js"),u=require("./Drawer/index.cjs.js"),d=require("./Form/index.cjs.js"),c=require("./InputGroup/index.cjs.js"),s=require("./Menu/index.cjs.js"),q=require("./Modal/index.cjs.js"),x=require("./Portal/index.cjs.js"),a=require("./Progress/index.cjs.js"),$=require("./Skeleton/index.cjs.js"),l=require("./Stack/index.cjs.js"),f=require("./Table/index.cjs.js"),g=require("./Tabs/index.cjs.js"),p=require("./Typography/index.cjs.js");;/* empty css                */exports.Accordion=e;exports.Badge=r;exports.Box=n;exports.Button=i;exports.ButtonGroup=t.default;exports.Card=o;exports.Drawer=u.default;exports.Form=d.default;exports.InputGroup=c;exports.Menu=s;exports.Modal=q.default;exports.Portal=x;exports.Progress=a;exports.Skeleton=$;exports.Stack=l;exports.Table=f;exports.Tabs=g.default;exports.Typography=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Accordion/index.cjs.js"),r=require("./Badge/index.cjs.js"),n=require("./Box/index.cjs.js"),i=require("./Button/index.cjs.js"),t=require("./ButtonGroup/index.cjs.js"),o=require("./Card/index.cjs.js"),u=require("./Drawer/index.cjs.js"),d=require("./Form/index.cjs.js"),c=require("./InputGroup/index.cjs.js"),s=require("./Menu/index.cjs.js"),q=require("./Modal/index.cjs.js"),x=require("./Portal/index.cjs.js"),$=require("./Progress/index.cjs.js"),a=require("./Skeleton/index.cjs.js"),l=require("./Stack/index.cjs.js"),f=require("./Table/index.cjs.js"),p=require("./Tabs/index.cjs.js"),g=require("./Tooltip/index.cjs.js"),b=require("./Typography/index.cjs.js");;/* empty css                */exports.Accordion=e;exports.Badge=r;exports.Box=n;exports.Button=i;exports.ButtonGroup=t.default;exports.Card=o;exports.Drawer=u.default;exports.Form=d.default;exports.InputGroup=c;exports.Menu=s;exports.Modal=q.default;exports.Portal=x;exports.Progress=$;exports.Skeleton=a;exports.Stack=l;exports.Table=f;exports.Tabs=p.default;exports.Tooltip=g;exports.Typography=b;

package/dist/components/index.d.ts

@@ -15,4 +15,5 @@ export { default as Skeleton } from './Skeleton';
 export { default as Stack } from './Stack';
 export { default as Table } from './Table';
 export { default as Tabs } from './Tabs';
+export { default as Tooltip } from './Tooltip';
 export { default as Typography } from './Typography';

package/dist/components/index.es.js

@@ -1,12 +1,12 @@
-import { default as t } from "./Accordion/index.es.js";
+import { default as a } from "./Accordion/index.es.js";
 import { default as f } from "./Badge/index.es.js";
 import { default as u } from "./Box/index.es.js";
-import { default as l } from "./Button/index.es.js";
+import { default as d } from "./Button/index.es.js";
 import { default as m } from "./ButtonGroup/index.es.js";
 import { default as n } from "./Card/index.es.js";
-import { default as c } from "./Drawer/index.es.js";
-import { default as T } from "./Form/index.es.js";
-import { default as i } from "./InputGroup/index.es.js";
+import { default as T } from "./Drawer/index.es.js";
+import { default as g } from "./Form/index.es.js";
+import { default as b } from "./InputGroup/index.es.js";
 import { default as y } from "./Menu/index.es.js";
 import { default as M } from "./Modal/index.es.js";
 import { default as S } from "./Portal/index.es.js";
@@ -15,18 +15,19 @@ import { default as C } from "./Skeleton/index.es.js";
 import { default as F } from "./Stack/index.es.js";
 import { default as j } from "./Table/index.es.js";
 import { default as v } from "./Tabs/index.es.js";
-import { default as E } from "./Typography/index.es.js";
+import { default as E } from "./Tooltip/index.es.js";
+import { default as J } from "./Typography/index.es.js";
 /* empty css              */
 export {
-  t as Accordion,
+  a as Accordion,
   f as Badge,
   u as Box,
-  l as Button,
+  d as Button,
   m as ButtonGroup,
   n as Card,
-  c as Drawer,
-  T as Form,
-  i as InputGroup,
+  T as Drawer,
+  g as Form,
+  b as InputGroup,
   y as Menu,
   M as Modal,
   S as Portal,
@@ -35,5 +36,6 @@ export {
   F as Stack,
   j as Table,
   v as Tabs,
-  E as Typography
+  E as Tooltip,
+  J as Typography
 };

package/dist/providers/ThemeProvider.d.ts

@@ -292,6 +292,25 @@ export type ThemeProviderContextType = {
                 body2: string;
             };
         };
+        tooltip: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                success: string;
+                info: string;
+                warning: string;
+                danger: string;
+                dark: string;
+                light: string;
+            };
+            placement: {
+                top: string;
+                end: string;
+                bottom: string;
+                start: string;
+            };
+        };
     };
 };
 type Props = ChildrenProps & DeepPartial<ThemeProviderContextType>;

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ElementType, ReactNode } from 'react';
 import { TransitionStatus } from 'react-transition-group';
+export type ComponentPropsWithoutAs<E extends ElementType, P extends Record<string, unknown> = {}> = P & Omit<ComponentProps<E>, keyof P>;
 export type ComponentPropsWithAs<E extends ElementType, P extends Record<string, unknown> = {}> = P & {
     as?: E;
 } & Omit<ComponentProps<E>, "as" | keyof P>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reaxify",
   "private": false,
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "types": "./dist/index.d.ts",
   "files": [