@nizivo/react 0.0.0-stage → 0.1.0

package/dist/tooltip/tooltip.client.d.ts

@@ -0,0 +1,12 @@
+import { TooltipPopupProps, TooltipRootProps, TooltipTriggerProps } from "./tooltip.contract.js";
+import { JSX } from "react";
+//#region src/tooltip/tooltip.client.d.ts
+export declare function TooltipRoot({ delay, content, shortcut, children, ...props }: TooltipRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+ * every standalone pressable, and tooltip.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+ * 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+ */
+export declare function TooltipTrigger({ className, render, ...rest }: TooltipTriggerProps): JSX.Element;
+export declare function TooltipPopup({ side, align, sideOffset, container, shortcut, className, children, ...rest }: TooltipPopupProps): JSX.Element;
+//#endregion

package/dist/tooltip/tooltip.client.js

@@ -0,0 +1,51 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { Kbd } from "../kbd/kbd.js";
+import { Popup, Root, Trigger } from "../_engines/react-aria/tooltip.client.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tooltip/tooltip.client.tsx
+const renderDiv = toRenderFn(void 0, "div");
+function TooltipRoot({ delay = 400, content, shortcut, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Root, {
+		...props,
+		delay,
+		children: [children, content !== void 0 && /* @__PURE__ */ jsx(TooltipPopup, {
+			...shortcut === void 0 ? {} : { shortcut },
+			children: content
+		})]
+	});
+}
+/**
+* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+* every standalone pressable, and tooltip.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+* 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+*/
+function TooltipTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		type: rest.type ?? (render === void 0 ? "button" : void 0),
+		className: cx("nz-tooltip-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "tooltip-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function TooltipPopup({ side = "top", align = "center", sideOffset = 8, container, shortcut, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Popup, {
+		...rest,
+		side,
+		align,
+		sideOffset,
+		container,
+		className: cx("nz-tooltip-popup", className),
+		"data-slot": "tooltip-popup",
+		"data-nz-scheme": "inverse",
+		render: renderDiv,
+		children: [children, shortcut !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Kbd, {
+			keys: shortcut,
+			className: "nz-tooltip-shortcut"
+		})] })]
+	});
+}
+//#endregion
+export { TooltipPopup, TooltipRoot, TooltipTrigger };

package/dist/tooltip/tooltip.contract.d.ts

@@ -0,0 +1,60 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import { Align, Side } from "../contracts/state.js";
+import "../_internal/engine-part.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tooltip/tooltip.contract.d.ts
+/** Logical side; the resolved physical side is `data-side` on the popup. */
+export type TooltipSide = "top" | "bottom" | "start" | "end";
+/** Strings the engine renders (§9.3 rule 7): React Aria's Tooltip renders none. */
+export type TooltipLabels = Record<string, never>;
+export interface TooltipRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /** Hover delay before opening, in ms (Figma: 400). Keyboard focus opens immediately. @default 400 */
+  delay?: number;
+  disabled?: boolean;
+  /**
+   * Convenience for the common case: renders a `Tooltip.Popup` with this content after `children`, so
+   * `<Tooltip.Root content="Export">` needs no Popup part. Leave it out to compose `Tooltip.Popup`
+   * yourself (for `side`, `align` or `sideOffset`).
+   */
+  content?: ReactNode;
+  /** A shortcut for `content`, drawn by `Kbd` (`"mod+s"` is ⌘S on Apple platforms, Ctrl+S elsewhere). */
+  shortcut?: string;
+  children: ReactNode;
+}
+export interface TooltipTriggerState {
+  open: boolean;
+}
+export interface TooltipPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface TooltipTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Any focusable element, for example `render={<Button variant="tertiary">Save</Button>}`. */
+  render?: RenderProp<TooltipTriggerState>;
+  children?: ReactNode;
+}
+export interface TooltipPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** @default 'top' */
+  side?: TooltipSide;
+  /** @default 'center' */
+  align?: Align;
+  /** Distance from the trigger in px. @default 8 */
+  sideOffset?: number;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  /**
+   * A keyboard shortcut drawn after the text with `Kbd`, in the keys syntax `Kbd` takes (`"mod+k"`,
+   * `"mod+shift+d"`). It shows the Apple spelling where `ThemeScript` sets `data-nz-platform="apple"`.
+   * It is a visual hint: the app implements the shortcut itself.
+   */
+  shortcut?: string;
+  children: ReactNode;
+}
+//#endregion
+export type { OpenReason };

package/dist/tooltip/tooltip.parts.d.ts

@@ -0,0 +1,6 @@
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+declare namespace tooltip_parts_d_exports {
+  export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger };
+}
+//#endregion
+export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger, tooltip_parts_d_exports };

package/dist/tooltip/tooltip.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+//#region src/tooltip/tooltip.parts.ts
+var tooltip_parts_exports = /* @__PURE__ */ __exportAll({
+	Popup: () => TooltipPopup,
+	Root: () => TooltipRoot,
+	Trigger: () => TooltipTrigger
+});
+//#endregion
+export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger, tooltip_parts_exports };

package/package.json

@@ -1,6 +1,287 @@
 {
   "name": "@nizivo/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Nizivo React components: server-first, accessible, themed by @nizivo/tokens",
+  "keywords": [
+    "components",
+    "design-system",
+    "nizivo",
+    "react",
+    "rsc"
+  ],
+  "homepage": "https://nizivo.neevtechnologies.in",
+  "bugs": "https://github.com/theneev/nizivo/issues",
+  "license": "Apache-2.0",
+  "author": "Neev Technologies",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/theneev/nizivo.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "THIRD_PARTY_NOTICES"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./alert": {
+      "types": "./dist/alert/index.d.ts",
+      "default": "./dist/alert/index.js"
+    },
+    "./augment": {
+      "types": "./dist/augment.d.ts",
+      "default": "./dist/augment.js"
+    },
+    "./badge": {
+      "types": "./dist/badge/index.d.ts",
+      "default": "./dist/badge/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/card/index.d.ts",
+      "default": "./dist/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "default": "./dist/checkbox/index.js"
+    },
+    "./config": {
+      "types": "./dist/config/index.d.ts",
+      "default": "./dist/config/index.js"
+    },
+    "./container": {
+      "types": "./dist/container/index.d.ts",
+      "default": "./dist/container/index.js"
+    },
+    "./contracts": {
+      "types": "./dist/contracts/index.d.ts",
+      "default": "./dist/contracts/index.js"
+    },
+    "./delta": {
+      "types": "./dist/delta/index.d.ts",
+      "default": "./dist/delta/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "default": "./dist/dialog/index.js"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state/index.d.ts",
+      "default": "./dist/empty-state/index.js"
+    },
+    "./field": {
+      "types": "./dist/field/index.d.ts",
+      "default": "./dist/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./dist/fieldset/index.d.ts",
+      "default": "./dist/fieldset/index.js"
+    },
+    "./grid": {
+      "types": "./dist/grid/index.d.ts",
+      "default": "./dist/grid/index.js"
+    },
+    "./heading": {
+      "types": "./dist/heading/index.d.ts",
+      "default": "./dist/heading/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button/index.d.ts",
+      "default": "./dist/icon-button/index.js"
+    },
+    "./image": {
+      "types": "./dist/image/index.d.ts",
+      "default": "./dist/image/index.js"
+    },
+    "./inline": {
+      "types": "./dist/inline/index.d.ts",
+      "default": "./dist/inline/index.js"
+    },
+    "./inline-error": {
+      "types": "./dist/inline-error/index.d.ts",
+      "default": "./dist/inline-error/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "default": "./dist/input/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/kbd/index.d.ts",
+      "default": "./dist/kbd/index.js"
+    },
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "default": "./dist/menu/index.js"
+    },
+    "./meter": {
+      "types": "./dist/meter/index.d.ts",
+      "default": "./dist/meter/index.js"
+    },
+    "./native-select": {
+      "types": "./dist/native-select/index.d.ts",
+      "default": "./dist/native-select/index.js"
+    },
+    "./progress-bar": {
+      "types": "./dist/progress-bar/index.d.ts",
+      "default": "./dist/progress-bar/index.js"
+    },
+    "./progress-ring": {
+      "types": "./dist/progress-ring/index.d.ts",
+      "default": "./dist/progress-ring/index.js"
+    },
+    "./radio-group": {
+      "types": "./dist/radio-group/index.d.ts",
+      "default": "./dist/radio-group/index.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/segmented-control/index.d.ts",
+      "default": "./dist/segmented-control/index.js"
+    },
+    "./select": {
+      "types": "./dist/select/index.d.ts",
+      "default": "./dist/select/index.js"
+    },
+    "./separator": {
+      "types": "./dist/separator/index.d.ts",
+      "default": "./dist/separator/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton/index.d.ts",
+      "default": "./dist/skeleton/index.js"
+    },
+    "./stack": {
+      "types": "./dist/stack/index.d.ts",
+      "default": "./dist/stack/index.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.ts",
+      "default": "./dist/switch/index.js"
+    },
+    "./tab-nav": {
+      "types": "./dist/tab-nav/index.d.ts",
+      "default": "./dist/tab-nav/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.js"
+    },
+    "./text": {
+      "types": "./dist/text/index.d.ts",
+      "default": "./dist/text/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/textarea/index.d.ts",
+      "default": "./dist/textarea/index.js"
+    },
+    "./theme-script": {
+      "types": "./dist/theme-script/index.d.ts",
+      "default": "./dist/theme-script/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "default": "./dist/tooltip/index.js"
+    },
+    "./css/alert.css": "./dist/css/alert.css",
+    "./css/badge.css": "./dist/css/badge.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/button.css": "./dist/css/button.css",
+    "./css/card.css": "./dist/css/card.css",
+    "./css/checkbox.css": "./dist/css/checkbox.css",
+    "./css/container.css": "./dist/css/container.css",
+    "./css/delta.css": "./dist/css/delta.css",
+    "./css/dialog.css": "./dist/css/dialog.css",
+    "./css/empty-state.css": "./dist/css/empty-state.css",
+    "./css/field.css": "./dist/css/field.css",
+    "./css/fieldset.css": "./dist/css/fieldset.css",
+    "./css/grid.css": "./dist/css/grid.css",
+    "./css/heading.css": "./dist/css/heading.css",
+    "./css/icon-button.css": "./dist/css/icon-button.css",
+    "./css/image.css": "./dist/css/image.css",
+    "./css/inline-error.css": "./dist/css/inline-error.css",
+    "./css/inline.css": "./dist/css/inline.css",
+    "./css/input.css": "./dist/css/input.css",
+    "./css/kbd.css": "./dist/css/kbd.css",
+    "./css/menu.css": "./dist/css/menu.css",
+    "./css/meter.css": "./dist/css/meter.css",
+    "./css/native-select.css": "./dist/css/native-select.css",
+    "./css/progress-bar.css": "./dist/css/progress-bar.css",
+    "./css/progress-ring.css": "./dist/css/progress-ring.css",
+    "./css/radio-group.css": "./dist/css/radio-group.css",
+    "./css/segmented-control.css": "./dist/css/segmented-control.css",
+    "./css/select.css": "./dist/css/select.css",
+    "./css/separator.css": "./dist/css/separator.css",
+    "./css/skeleton.css": "./dist/css/skeleton.css",
+    "./css/stack.css": "./dist/css/stack.css",
+    "./css/switch.css": "./dist/css/switch.css",
+    "./css/tab-nav.css": "./dist/css/tab-nav.css",
+    "./css/tabs.css": "./dist/css/tabs.css",
+    "./css/text.css": "./dist/css/text.css",
+    "./css/textarea.css": "./dist/css/textarea.css",
+    "./css/tooltip.css": "./dist/css/tooltip.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nizivo/tokens": "0.1.0",
+    "react-aria": "^3.53.1",
+    "react-aria-components": "^1.22.1"
+  },
+  "devDependencies": {
+    "@nizivo/stylelint-config": "0.0.0",
+    "@nizivo/tsconfig": "0.0.0",
+    "@nizivo/tsdown-preset": "0.0.0",
+    "@size-limit/esbuild": "14.2.0",
+    "@size-limit/file": "14.2.0",
+    "@types/node": "24.19.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/browser-playwright": "5.0.4",
+    "lightningcss": "1.33.0",
+    "playwright": "1.64.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "size-limit": "14.2.0",
+    "stylelint": "17.16.0",
+    "tsdown": "0.23.1",
+    "typescript": "7.0.2",
+    "vitest": "5.0.4",
+    "vitest-browser-react": "2.3.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.12"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/build-css.ts",
+    "typecheck": "tsc --noEmit -p . && tsc --noEmit -p scripts",
+    "test": "vitest run --fsModuleCachePath node_modules/.vitest-cache",
+    "test:browser": "vitest run --config test/browser/vitest.config.ts",
+    "test:overlay": "vitest run --config test/overlay/vitest.config.ts",
+    "lint": "stylelint \"src/**/*.css\" \"styles/**/*.css\" --allow-empty-input",
+    "check:dist": "tsdown && node scripts/build-css.ts && vitest run --config test/built/vitest.config.ts",
+    "size": "size-limit --hide-passed",
+    "test:visual": "node scripts/visual/run.ts"
+  }
 }