@northstar-js/react 0.0.0-stage → 0.2.0

package/dist/surface.d.ts

@@ -0,0 +1,58 @@
+import { type Material } from './provider.js';
+type SurfaceTag = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'li';
+export interface SurfaceProps extends React.HTMLAttributes<HTMLElement> {
+    /** `glass` (default) is liquid glass: refraction at the rim, specular and rim light; `solid` is opaque. */
+    material?: Material;
+    /** Specular highlight follows the pointer. */
+    reactive?: boolean;
+    /** 1 hugs the page, 3 floats. Default 2. */
+    depth?: 1 | 2 | 3;
+    /** Corner radius. Default 12 for solid; glass defaults to `radius.glass.panel` (10px). */
+    radius?: 6 | 8 | 10 | 12;
+    as?: SurfaceTag;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * The material primitive. `glass` is liquid glass (see LiquidGlass): the
+ * backdrop refracts at the rim on Chromium, blur and specular elsewhere. Falls
+ * back to the opaque `material.solid` when transparency is reduced, in forced
+ * colours, and where backdrop-filter is unsupported. Borderless by default:
+ * separation comes from tone, shadow and the rim light.
+ */
+export declare function Surface({ material, reactive, depth, radius, as: Tag, className, ref, ...rest }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+/** Wraps secondary actions so they ease in when the enclosing card, row or list item is hovered or holds focus. */
+export declare function HoverActions({ className, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export type CardVariant = 'solid' | 'glass' | 'spotlight';
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** `solid` (default), `glass`, or `spotlight`: a glacier glow and border light that follow the pointer. */
+    variant?: CardVariant;
+    /** Lifts on hover and focus-within. Use when the card is, or contains, the action. */
+    interactive?: boolean;
+    /** A slow light travelling around the border (the "moving border"). Static under reduced motion. */
+    orbit?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shown at the end of the header row. */
+    actions?: React.ReactNode;
+    /** Secondary actions that ease in on hover and focus-within (always shown on touch). */
+    revealActions?: boolean;
+    footer?: React.ReactNode;
+    as?: 'div' | 'section' | 'article' | 'li';
+    ref?: React.Ref<HTMLElement>;
+}
+export declare function Card({ variant, interactive, orbit, title, description, actions, revealActions, footer, as: Tag, className, children, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    variant?: CardVariant;
+    title?: React.ReactNode;
+    /** Shown at the end of the header bar. */
+    actions?: React.ReactNode;
+    /** Remove body padding, for lists and tables that run edge to edge. */
+    flush?: boolean;
+    /** Heading level of the title. Default 2. */
+    level?: 2 | 3 | 4;
+    ref?: React.Ref<HTMLElement>;
+}
+/** A workspace panel: a header bar and a body, as a labelled region. Material defaults to the provider's. */
+export declare function Panel({ variant, title, actions, flush, level, className, children, ref, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=surface.d.ts.map

package/dist/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../src/surface.tsx"],"names":[],"mappings":"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"}

package/dist/surface.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useNorthstar } from './provider.js';
+import { usePointerTracking } from './internal/interaction.js';
+import { cx, mergeRefs } from './internal/util.js';
+/**
+ * The material primitive. `glass` is liquid glass (see LiquidGlass): the
+ * backdrop refracts at the rim on Chromium, blur and specular elsewhere. Falls
+ * back to the opaque `material.solid` when transparency is reduced, in forced
+ * colours, and where backdrop-filter is unsupported. Borderless by default:
+ * separation comes from tone, shadow and the rim light.
+ */
+export function Surface({ material = 'glass', reactive = false, depth = 2, radius, as: Tag = 'div', className, ref, ...rest }) {
+    const track = usePointerTracking(reactive);
+    // Glass takes the tighter radius.glass.panel from CSS unless a radius is asked for.
+    const r = radius ?? (material === 'glass' ? undefined : 12);
+    return (_jsx(Tag, { ...rest, ref: mergeRefs(ref, track), className: cx('ns-surface', `ns-material--${material}`, `ns-depth-${depth}`, r !== undefined && `ns-radius-${r}`, reactive && 'ns-reactive', className) }));
+}
+/** Wraps secondary actions so they ease in when the enclosing card, row or list item is hovered or holds focus. */
+export function HoverActions({ className, ...rest }) {
+    return _jsx("span", { ...rest, className: cx('ns-hover-actions', className) });
+}
+export function Card({ variant = 'solid', interactive = false, orbit = false, title, description, actions, revealActions = false, footer, as: Tag = 'div', className, children, ref, ...rest }) {
+    const track = usePointerTracking(variant !== 'solid');
+    const head = title || description || actions;
+    return (_jsxs(Tag, { ...rest, ref: mergeRefs(ref, track), className: cx('ns-card', `ns-card--${variant}`, variant === 'solid' ? 'ns-material--solid' : 'ns-material--glass', variant !== 'solid' && 'ns-reactive', interactive && 'ns-card--interactive', orbit && 'ns-card--orbit', className), children: [head && (_jsxs("div", { className: "ns-card__header", children: [_jsxs("div", { className: "ns-card__heading", children: [title && _jsx("h3", { className: "ns-card__title", children: title }), description && _jsx("p", { className: "ns-card__description", children: description })] }), actions && _jsx("div", { className: cx('ns-card__actions', revealActions && 'ns-hover-actions'), children: actions })] })), children !== undefined && children !== null && _jsx("div", { className: "ns-card__body", children: children }), footer && _jsx("div", { className: "ns-card__footer", children: footer })] }));
+}
+/** A workspace panel: a header bar and a body, as a labelled region. Material defaults to the provider's. */
+export function Panel({ variant, title, actions, flush = false, level = 2, className, children, ref, ...rest }) {
+    const ns = useNorthstar();
+    const v = variant ?? (ns.material === 'glass' ? 'glass' : 'solid');
+    const track = usePointerTracking(v !== 'solid');
+    const H = `h${level}`;
+    const auto = `ns-panel-${useId().replace(/:/g, '')}`;
+    const id = `${rest.id ?? auto}-title`;
+    return (_jsxs("section", { "aria-labelledby": title ? id : undefined, ...rest, ref: mergeRefs(ref, track), className: cx('ns-panel', `ns-card--${v}`, v === 'solid' ? 'ns-material--solid' : 'ns-material--glass', v !== 'solid' && 'ns-reactive', className), children: [(title || actions) && (_jsxs("div", { className: "ns-panel__head", children: [title && (_jsx(H, { id: id, className: "ns-panel__title", children: title })), actions && _jsx("div", { className: "ns-panel__actions", children: actions })] })), _jsx("div", { className: cx('ns-panel__body', flush && 'ns-panel__body--flush'), children: children })] }));
+}
+//# sourceMappingURL=surface.js.map

package/dist/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAiB,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAmBnD;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAgB;IACzI,MAAM,KAAK,GAAG,kBAAkB,CAAc,QAAQ,CAAC,CAAC;IACxD,oFAAoF;IACpF,MAAM,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5D,OAAO,CACL,KAAC,GAAG,OACG,IAA0C,EAC/C,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,CAAqB,EAC9C,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,gBAAgB,QAAQ,EAAE,EAAE,YAAY,KAAK,EAAE,EAAE,CAAC,KAAK,SAAS,IAAI,aAAa,CAAC,EAAE,EAAE,QAAQ,IAAI,aAAa,EAAE,SAAS,CAAC,GACvJ,CACH,CAAC;AACJ,CAAC;AAED,mHAAmH;AACnH,MAAM,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAyC;IACxF,OAAO,kBAAU,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAI,CAAC;AAC1E,CAAC;AAwBD,MAAM,UAAU,IAAI,CAAC,EACnB,OAAO,GAAG,OAAO,EACjB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACG;IACV,MAAM,KAAK,GAAG,kBAAkB,CAAc,OAAO,KAAK,OAAO,CAAC,CAAC;IACnE,MAAM,IAAI,GAAG,KAAK,IAAI,WAAW,IAAI,OAAO,CAAC;IAC7C,OAAO,CACL,MAAC,GAAG,OACG,IAA0C,EAC/C,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,CAAqB,EAC9C,SAAS,EAAE,EAAE,CACX,SAAS,EACT,YAAY,OAAO,EAAE,EACrB,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EACjE,OAAO,KAAK,OAAO,IAAI,aAAa,EACpC,WAAW,IAAI,sBAAsB,EACrC,KAAK,IAAI,gBAAgB,EACzB,SAAS,CACV,aAEA,IAAI,IAAI,CACP,eAAK,SAAS,EAAC,iBAAiB,aAC9B,eAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,IAAI,aAAI,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAM,EACpD,WAAW,IAAI,YAAG,SAAS,EAAC,sBAAsB,YAAE,WAAW,GAAK,IACjE,EACL,OAAO,IAAI,cAAK,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,aAAa,IAAI,kBAAkB,CAAC,YAAG,OAAO,GAAO,IACpG,CACP,EACA,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,EAC9F,MAAM,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,MAAM,GAAO,IACtD,CACP,CAAC;AACJ,CAAC;AAgBD,6GAA6G;AAC7G,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAc;IACxH,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAC1B,MAAM,CAAC,GAAgB,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAChF,MAAM,KAAK,GAAG,kBAAkB,CAAc,CAAC,KAAK,OAAO,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,IAAI,KAAK,EAAU,CAAC;IAC9B,MAAM,IAAI,GAAG,YAAY,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC;IACrD,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,QAAQ,CAAC;IACtC,OAAO,CACL,sCACmB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACnC,IAAI,EACR,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,CAA2B,EACpD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC,KAAK,OAAO,IAAI,aAAa,EAAE,SAAS,CAAC,aAEjJ,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CACrB,eAAK,SAAS,EAAC,gBAAgB,aAC5B,KAAK,IAAI,CACR,KAAC,CAAC,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,iBAAiB,YACnC,KAAK,GACJ,CACL,EACA,OAAO,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,OAAO,GAAO,IAC1D,CACP,EACD,cAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,uBAAuB,CAAC,YAAG,QAAQ,GAAO,IAChF,CACX,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,84 @@
 {
   "name": "@northstar-js/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Northstar basic React components: provider, actions, forms, overlays, layout and data display, plus opt-in effects and animated star backdrops, styled by --ns-* CSS variables.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./northstar": {
+      "types": "./dist/northstar/index.d.ts",
+      "import": "./dist/northstar/index.js"
+    },
+    "./illustrations": {
+      "types": "./dist/illustrations/index.d.ts",
+      "import": "./dist/illustrations/index.js"
+    },
+    "./effects": {
+      "types": "./dist/effects/index.d.ts",
+      "import": "./dist/effects/index.js"
+    },
+    "./backdrops": {
+      "types": "./dist/backdrops/index.d.ts",
+      "import": "./dist/backdrops/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./effects.css": "./dist/effects.css",
+    "./backdrops.css": "./dist/backdrops.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@northstar-js/charts": "0.2.0",
+    "@northstar-js/contracts": "0.2.0",
+    "@northstar-js/icons": "0.2.0",
+    "@northstar-js/maps": "0.2.0",
+    "@northstar-js/motion": "0.2.0",
+    "@northstar-js/tokens": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "axe-core": "4.10.3",
+    "jsdom": "26.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "typescript": "5.9.3",
+    "vitest": "3.2.7",
+    "vitest-axe": "0.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ali-amaan/northstar-design-system.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://ali-amaan.github.io/northstar-design-system/",
+  "bugs": {
+    "url": "https://github.com/ali-amaan/northstar-design-system/issues"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.