@nizivo/react 0.0.0-stage → 0.2.0

package/dist/trend-card/trend-card.js

@@ -0,0 +1,74 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { dataStatusAttrs } from "../_internal/data-status.js";
+import { Metric, resolveStatus } from "../metric/metric.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/trend-card/trend-card.tsx
+/**
+* A headline number with its change, a period control and a comparison chart. A `role="group"`
+* named by the label. The status contract (§16.5) applies to the headline; the slots render as given.
+*/
+function TrendCard({ label, value, format, locale, delta, comparison, tone = "surface", action, chart, legend, footer, status = "ready", pending = false, empty, error, labels, render, className, ...rest }) {
+	const labelId = useId();
+	const st = resolveStatus(status, value);
+	const busy = st === "ready" && pending;
+	return renderElement("div", render, {
+		status: st,
+		pending: busy,
+		tone
+	}, {
+		"data-slot": "trend-card",
+		"data-tone": tone,
+		"data-padding": "md",
+		"data-nz-scheme": tone === "inverse" ? "inverse" : void 0,
+		...dataStatusAttrs(st, busy),
+		role: "group",
+		"aria-labelledby": labelId,
+		...rest,
+		className: cx("nz-card", "nz-trend-card", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-trend-card-header",
+				"data-slot": "trend-card-header",
+				children: [/* @__PURE__ */ jsx(Metric, {
+					size: "display",
+					reserveChange: true,
+					labelId,
+					label,
+					value,
+					format,
+					locale,
+					delta,
+					comparison,
+					status,
+					pending,
+					empty,
+					error,
+					labels
+				}), action != null && /* @__PURE__ */ jsx("div", {
+					className: "nz-trend-card-action",
+					"data-slot": "trend-card-action",
+					children: action
+				})]
+			}),
+			chart != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-trend-card-chart",
+				"data-slot": "trend-card-chart",
+				children: chart
+			}),
+			legend != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-trend-card-legend",
+				"data-slot": "trend-card-legend",
+				children: legend
+			}),
+			footer != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-trend-card-footer",
+				"data-slot": "trend-card-footer",
+				children: footer
+			})
+		] })
+	});
+}
+//#endregion
+export { TrendCard };

package/package.json

@@ -1,6 +1,450 @@
 {
   "name": "@nizivo/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.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"
+    },
+    "./app-shell": {
+      "types": "./dist/app-shell/index.d.ts",
+      "default": "./dist/app-shell/index.js"
+    },
+    "./augment": {
+      "types": "./dist/augment.d.ts",
+      "default": "./dist/augment.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar/index.d.ts",
+      "default": "./dist/avatar/index.js"
+    },
+    "./badge": {
+      "types": "./dist/badge/index.d.ts",
+      "default": "./dist/badge/index.js"
+    },
+    "./banner": {
+      "types": "./dist/banner/index.d.ts",
+      "default": "./dist/banner/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/breadcrumb/index.d.ts",
+      "default": "./dist/breadcrumb/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"
+    },
+    "./chip-group": {
+      "types": "./dist/chip-group/index.d.ts",
+      "default": "./dist/chip-group/index.js"
+    },
+    "./choice-card": {
+      "types": "./dist/choice-card/index.d.ts",
+      "default": "./dist/choice-card/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"
+    },
+    "./drawer": {
+      "types": "./dist/drawer/index.d.ts",
+      "default": "./dist/drawer/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"
+    },
+    "./file-upload": {
+      "types": "./dist/file-upload/index.d.ts",
+      "default": "./dist/file-upload/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "default": "./dist/form/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"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "default": "./dist/i18n/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"
+    },
+    "./kpi-tile": {
+      "types": "./dist/kpi-tile/index.d.ts",
+      "default": "./dist/kpi-tile/index.js"
+    },
+    "./locales/en-US": {
+      "types": "./dist/locales/en-US.d.ts",
+      "default": "./dist/locales/en-US.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"
+    },
+    "./metric": {
+      "types": "./dist/metric/index.d.ts",
+      "default": "./dist/metric/index.js"
+    },
+    "./mobile-tab-bar": {
+      "types": "./dist/mobile-tab-bar/index.d.ts",
+      "default": "./dist/mobile-tab-bar/index.js"
+    },
+    "./mobile-top-bar": {
+      "types": "./dist/mobile-top-bar/index.d.ts",
+      "default": "./dist/mobile-top-bar/index.js"
+    },
+    "./motion": {
+      "types": "./dist/motion/index.d.ts",
+      "default": "./dist/motion/index.js"
+    },
+    "./native-select": {
+      "types": "./dist/native-select/index.d.ts",
+      "default": "./dist/native-select/index.js"
+    },
+    "./nav-item": {
+      "types": "./dist/nav-item/index.d.ts",
+      "default": "./dist/nav-item/index.js"
+    },
+    "./number-value": {
+      "types": "./dist/number-value/index.d.ts",
+      "default": "./dist/number-value/index.js"
+    },
+    "./page-header": {
+      "types": "./dist/page-header/index.d.ts",
+      "default": "./dist/page-header/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/pagination/index.d.ts",
+      "default": "./dist/pagination/index.js"
+    },
+    "./password-input": {
+      "types": "./dist/password-input/index.d.ts",
+      "default": "./dist/password-input/index.js"
+    },
+    "./popover": {
+      "types": "./dist/popover/index.d.ts",
+      "default": "./dist/popover/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"
+    },
+    "./ranked-list": {
+      "types": "./dist/ranked-list/index.d.ts",
+      "default": "./dist/ranked-list/index.js"
+    },
+    "./search-field": {
+      "types": "./dist/search-field/index.d.ts",
+      "default": "./dist/search-field/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"
+    },
+    "./sidebar": {
+      "types": "./dist/sidebar/index.d.ts",
+      "default": "./dist/sidebar/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton/index.d.ts",
+      "default": "./dist/skeleton/index.js"
+    },
+    "./split": {
+      "types": "./dist/split/index.d.ts",
+      "default": "./dist/split/index.js"
+    },
+    "./stack": {
+      "types": "./dist/stack/index.d.ts",
+      "default": "./dist/stack/index.js"
+    },
+    "./sticky-bar": {
+      "types": "./dist/sticky-bar/index.d.ts",
+      "default": "./dist/sticky-bar/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"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "default": "./dist/table/index.js"
+    },
+    "./table-selection": {
+      "types": "./dist/table-selection/index.d.ts",
+      "default": "./dist/table-selection/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"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "default": "./dist/toast/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "default": "./dist/tooltip/index.js"
+    },
+    "./top-bar": {
+      "types": "./dist/top-bar/index.d.ts",
+      "default": "./dist/top-bar/index.js"
+    },
+    "./trend-card": {
+      "types": "./dist/trend-card/index.d.ts",
+      "default": "./dist/trend-card/index.js"
+    },
+    "./css/alert.css": "./dist/css/alert.css",
+    "./css/app-shell.css": "./dist/css/app-shell.css",
+    "./css/avatar.css": "./dist/css/avatar.css",
+    "./css/badge.css": "./dist/css/badge.css",
+    "./css/banner.css": "./dist/css/banner.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/breadcrumb.css": "./dist/css/breadcrumb.css",
+    "./css/button.css": "./dist/css/button.css",
+    "./css/card.css": "./dist/css/card.css",
+    "./css/checkbox.css": "./dist/css/checkbox.css",
+    "./css/chip-group.css": "./dist/css/chip-group.css",
+    "./css/choice-card.css": "./dist/css/choice-card.css",
+    "./css/container.css": "./dist/css/container.css",
+    "./css/delta.css": "./dist/css/delta.css",
+    "./css/dialog.css": "./dist/css/dialog.css",
+    "./css/drawer.css": "./dist/css/drawer.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/file-upload.css": "./dist/css/file-upload.css",
+    "./css/form.css": "./dist/css/form.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/kpi-tile.css": "./dist/css/kpi-tile.css",
+    "./css/menu.css": "./dist/css/menu.css",
+    "./css/meter.css": "./dist/css/meter.css",
+    "./css/metric.css": "./dist/css/metric.css",
+    "./css/mobile-tab-bar.css": "./dist/css/mobile-tab-bar.css",
+    "./css/mobile-top-bar.css": "./dist/css/mobile-top-bar.css",
+    "./css/motion.css": "./dist/css/motion.css",
+    "./css/native-select.css": "./dist/css/native-select.css",
+    "./css/nav-item.css": "./dist/css/nav-item.css",
+    "./css/number-value.css": "./dist/css/number-value.css",
+    "./css/page-header.css": "./dist/css/page-header.css",
+    "./css/pagination.css": "./dist/css/pagination.css",
+    "./css/password-input.css": "./dist/css/password-input.css",
+    "./css/popover.css": "./dist/css/popover.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/ranked-list.css": "./dist/css/ranked-list.css",
+    "./css/search-field.css": "./dist/css/search-field.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/sidebar.css": "./dist/css/sidebar.css",
+    "./css/skeleton.css": "./dist/css/skeleton.css",
+    "./css/split.css": "./dist/css/split.css",
+    "./css/stack.css": "./dist/css/stack.css",
+    "./css/sticky-bar.css": "./dist/css/sticky-bar.css",
+    "./css/switch.css": "./dist/css/switch.css",
+    "./css/tab-nav.css": "./dist/css/tab-nav.css",
+    "./css/table-selection.css": "./dist/css/table-selection.css",
+    "./css/table.css": "./dist/css/table.css",
+    "./css/tabs.css": "./dist/css/tabs.css",
+    "./css/text.css": "./dist/css/text.css",
+    "./css/textarea.css": "./dist/css/textarea.css",
+    "./css/toast.css": "./dist/css/toast.css",
+    "./css/tooltip.css": "./dist/css/tooltip.css",
+    "./css/top-bar.css": "./dist/css/top-bar.css",
+    "./css/trend-card.css": "./dist/css/trend-card.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nizivo/tokens": "0.2.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.5",
+    "lightningcss": "1.33.0",
+    "playwright": "1.64.0",
+    "react": "19.3.0",
+    "react-19.2": "npm:react@19.2.9",
+    "react-dom": "19.3.0",
+    "react-dom-19.2": "npm:react-dom@19.2.9",
+    "react-stately": "^3.51.0",
+    "size-limit": "14.2.0",
+    "stylelint": "17.16.0",
+    "tsdown": "0.23.1",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5",
+    "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:react-19.2": "vitest run --fsModuleCachePath node_modules/.vitest-cache-react-19.2",
+    "test:adapter": "vitest run --fsModuleCachePath node_modules/.vitest-cache-adapter",
+    "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"
+  }
 }