@stackshift-ui/tooltip 1.0.0-beta.1

package/dist/tooltip.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var y=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var R=(o,t)=>{for(var i in t)l(o,i,{get:t[i],enumerable:!0})},m=(o,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of C(t))!x.call(o,n)&&n!==i&&l(o,n,{get:()=>t[n],enumerable:!(p=u(t,n))||p.enumerable});return o};var b=(o,t,i)=>(i=o!=null?y(N(o)):{},m(t||!o||!o.__esModule?l(i,"default",{value:o,enumerable:!0}):i,o)),z=o=>m(l({},"__esModule",{value:!0}),o);var h={};R(h,{Tooltip:()=>P,TooltipContent:()=>v,TooltipProvider:()=>s,TooltipTrigger:()=>g});module.exports=z(h);var e=b(require("@radix-ui/react-tooltip")),r=require("@stackshift-ui/system"),a=require("react/jsx-runtime"),d="Tooltip",c="TooltipProvider",f="TooltipTrigger",T="TooltipContent";function s({delayDuration:o=0,...t}){let{[c]:i=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,a.jsx)(i,{as:e.Provider,"data-slot":"tooltip-provider",delayDuration:o,...t})}s.displayName=c;function P({...o}){let{[d]:t=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,a.jsx)(s,{children:(0,a.jsx)(t,{as:e.Root,"data-slot":"tooltip",...o})})}P.displayName=d;function g({...o}){let{[f]:t=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,a.jsx)(t,{as:e.Trigger,"data-slot":"tooltip-trigger",...o})}g.displayName=f;function v({className:o,sideOffset:t=0,children:i,...p}){let{[T]:n=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,a.jsx)(e.Portal,{children:(0,a.jsxs)(n,{as:e.Content,"data-slot":"tooltip-content",sideOffset:t,className:(0,r.cn)("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",o),...p,children:[i,(0,a.jsx)(e.Arrow,{className:"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"})]})})}v.displayName=T;0&&(module.exports={Tooltip,TooltipContent,TooltipProvider,TooltipTrigger});

package/dist/tooltip.mjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";import{a,b,c,d}from"./chunk-LARJZ6PU.mjs";import"./chunk-3EYN2AKU.mjs";export{b as Tooltip,d as TooltipContent,a as TooltipProvider,c as TooltipTrigger};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@stackshift-ui/tooltip",
+  "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "classnames": "^2.5.1",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./tooltip";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+

package/src/tooltip.test.tsx

@@ -0,0 +1,44 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test, vi } from "vitest";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+describe.concurrent("tooltip", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.resetAllMocks();
+  });
+
+  test("Dummy test - test if renders without errors", async ({ expect }) => {
+    const clx = "my-class";
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <Tooltip>
+        <TooltipTrigger asChild data-testid="tooltip-trigger">
+          <button>Hover me</button>
+        </TooltipTrigger>
+        <TooltipContent data-testid="tooltip" className={clx}>
+          <p>This is a tooltip</p>
+        </TooltipContent>
+      </Tooltip>,
+    );
+
+    const tooltipTrigger = screen.getByTestId("tooltip-trigger");
+    expect(tooltipTrigger).toBeInTheDocument();
+
+    screen.debug(tooltipTrigger);
+    await user.hover(tooltipTrigger);
+    screen.debug(tooltipTrigger);
+
+    expect(await screen.findByTestId("tooltip")).toBeInTheDocument();
+    unmount();
+  });
+});

package/src/tooltip.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "Tooltip";
+const displayNameProvider = "TooltipProvider";
+const displayNameTrigger = "TooltipTrigger";
+const displayNameContent = "TooltipContent";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  const { [displayNameProvider]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={TooltipPrimitive.Provider}
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+TooltipProvider.displayName = displayNameProvider;
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <TooltipProvider>
+      <Component as={TooltipPrimitive.Root} data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+Tooltip.displayName = displayName;
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={TooltipPrimitive.Trigger} data-slot="tooltip-trigger" {...props} />;
+}
+TooltipTrigger.displayName = displayNameTrigger;
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <TooltipPrimitive.Portal>
+      <Component
+        as={TooltipPrimitive.Content}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </Component>
+    </TooltipPrimitive.Portal>
+  );
+}
+TooltipContent.displayName = displayNameContent;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };