@nizivo/react 0.0.0-stage → 0.1.0

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchChangeReason, SwitchProps, SwitchState } from "./switch.client.js";
+export { Switch, type SwitchChangeReason, type SwitchProps, type SwitchState };

package/dist/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from "./switch.client.js";

package/dist/switch/switch.client.d.ts

@@ -0,0 +1,33 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/switch/switch.client.d.ts
+/** Every change comes from the native `change` event: a click, Space, or a click on the label. */
+export type SwitchChangeReason = "input";
+/** What a `render` function receives for the root `<label>`. */
+export interface SwitchState {
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "type" | "role" | "children" | "readOnly" | "size"> {
+  /** Controlled state: on or off. */
+  checked?: boolean;
+  /** Uncontrolled initial state. @default false */
+  defaultChecked?: boolean;
+  /** Called after the consumer's own `onChange`, unless it called `preventDefault()`. */
+  onCheckedChange?: (checked: boolean, details: ChangeDetails<SwitchChangeReason>) => void;
+  /** An error message is presented for this switch. Inside a Field, the Field decides. */
+  invalid?: boolean;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<SwitchState>;
+  /** The label, after the track. Without one, name the switch with `aria-label`. */
+  children?: ReactNode;
+}
+/**
+ * `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+ * native `<input>`. With `name`, the form submits `value` (default `"on"`) while the switch is on.
+ */
+export declare function Switch({ id, name, required, disabled, invalid, "aria-describedby": describedBy, onCheckedChange, render, className, style, children, ...rest }: SwitchProps): ReactElement;
+//#endregion

package/dist/switch/switch.client.js

@@ -0,0 +1,63 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/switch/switch.client.tsx
+/**
+* `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+* native `<input>`. With `name`, the form submits `value` (default `"on"`) while the switch is on.
+*/
+function Switch({ id, name, required, disabled, invalid, "aria-describedby": describedBy, onCheckedChange, render, className, style, children, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const { readOnly: _readOnly, ...control } = field.controlProps;
+	const own = {
+		...control,
+		onChange(event) {
+			onCheckedChange?.(event.currentTarget.checked, details("input", event.nativeEvent));
+		}
+	};
+	const state = {
+		invalid: field.invalid,
+		disabled: field.disabled,
+		required: field.required
+	};
+	return renderElement("label", render, state, {
+		"data-slot": "switch",
+		...stateAttrs(state),
+		className: cx("nz-switch nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "checkbox",
+				role: "switch",
+				className: "nz-switch-input",
+				"data-slot": "switch-input"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-switch-thumb",
+				"data-slot": "switch-thumb",
+				"aria-hidden": "true"
+			}),
+			presented(children) && /* @__PURE__ */ jsx("span", {
+				className: "nz-switch-label",
+				"data-slot": "switch-label",
+				children
+			})
+		] })
+	});
+}
+//#endregion
+export { Switch };

package/dist/tab-nav/index.d.ts

@@ -0,0 +1,3 @@
+import { TabNavLink, TabNavLinkProps, TabNavLinkState, TabNavRoot, TabNavRootProps } from "./tab-nav.js";
+import { tab_nav_parts_d_exports } from "./tab-nav.parts.js";
+export { tab_nav_parts_d_exports as TabNav, TabNavLink, type TabNavLinkProps, type TabNavLinkState, TabNavRoot, type TabNavRootProps };

package/dist/tab-nav/index.js

@@ -0,0 +1,3 @@
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+import { tab_nav_parts_exports } from "./tab-nav.parts.js";
+export { tab_nav_parts_exports as TabNav, TabNavLink, TabNavRoot };

package/dist/tab-nav/tab-nav.d.ts

@@ -0,0 +1,36 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tab-nav/tab-nav.d.ts
+export interface TabNavRootProps extends ComponentPropsWithRef<"nav"> {
+  /**
+   * Names the landmark ("Order status"). A page with more than one navigation landmark needs a
+   * name on each.
+   */
+  "aria-label"?: string;
+  /** Must render a navigation landmark (a `<nav>`, or an element with `role="navigation"`). */
+  render?: RenderProp<Record<string, never>>;
+}
+export interface TabNavLinkState {
+  current: boolean;
+}
+export interface TabNavLinkProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /**
+   * The link to the page being shown: sets `aria-current="page"` and draws the indicator. The page
+   * knows its own route, so it says which link is current (a router's `usePathname` needs a client
+   * component; a server page reads its params). @default false
+   */
+  current?: boolean;
+  /** A decorative glyph before the label (16 px). */
+  icon?: ReactNode;
+  /** A count after the label, such as the number of orders in a status. */
+  count?: ReactNode;
+  /**
+   * The router's link, for example `render={<Link href="/orders?status=open" />}` (Next.js, React
+   * Router, TanStack Router, Astro's plain `<a>`). It must render an `<a>`.
+   */
+  render?: RenderProp<TabNavLinkState>;
+  children: ReactNode;
+}
+export declare function TabNavRoot({ render, className, ...rest }: TabNavRootProps): ReactElement;
+export declare function TabNavLink({ current, icon, count, render, className, children, ...rest }: TabNavLinkProps): ReactElement;
+//#endregion

package/dist/tab-nav/tab-nav.js

@@ -0,0 +1,47 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tab-nav/tab-nav.tsx
+function TabNavRoot({ render, className, ...rest }) {
+	return renderElement("nav", render, {}, {
+		"data-slot": "tab-nav",
+		...rest,
+		className: cx("nz-tab-nav", className)
+	});
+}
+function TabNavLink({ current = false, icon, count, render, className, children, ...rest }) {
+	return renderElement("a", render, { current }, {
+		"data-slot": "tab-nav-link",
+		"data-focus-inset": "",
+		...rest,
+		"aria-current": current ? "page" : rest["aria-current"],
+		className: cx("nz-tab-nav-link", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tab-nav-icon",
+				"data-slot": "tab-nav-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "nz-tab-nav-label",
+				"data-slot": "tab-nav-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-tab-nav-text",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					className: "nz-tab-nav-sizer",
+					"aria-hidden": "true",
+					children
+				})]
+			}),
+			count != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tab-nav-count",
+				"data-slot": "tab-nav-count",
+				children: count
+			})
+		] })
+	});
+}
+//#endregion
+export { TabNavLink, TabNavRoot };

package/dist/tab-nav/tab-nav.parts.d.ts

@@ -0,0 +1,6 @@
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+declare namespace tab_nav_parts_d_exports {
+  export { TabNavLink as Link, TabNavRoot as Root };
+}
+//#endregion
+export { TabNavLink as Link, TabNavRoot as Root, tab_nav_parts_d_exports };

package/dist/tab-nav/tab-nav.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+//#region src/tab-nav/tab-nav.parts.ts
+var tab_nav_parts_exports = /* @__PURE__ */ __exportAll({
+	Link: () => TabNavLink,
+	Root: () => TabNavRoot
+});
+//#endregion
+export { TabNavLink as Link, TabNavRoot as Root, tab_nav_parts_exports };

package/dist/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import { TabsActivationMode, TabsListProps, TabsListState, TabsPanelProps, TabsPanelState, TabsRootProps, TabsRootState, TabsTabProps, TabsTabState, TabsValueReason } from "./tabs.contract.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+import { tabs_parts_d_exports } from "./tabs.parts.js";
+export { tabs_parts_d_exports as Tabs, type TabsActivationMode, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, TabsRoot, type TabsRootProps, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsValueReason };

package/dist/tabs/index.js

@@ -0,0 +1,3 @@
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+import { tabs_parts_exports } from "./tabs.parts.js";
+export { tabs_parts_exports as Tabs, TabsList, TabsPanel, TabsRoot, TabsTab };

package/dist/tabs/tabs.client.d.ts

@@ -0,0 +1,8 @@
+import { TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./tabs.contract.js";
+import { JSX } from "react";
+//#region src/tabs/tabs.client.d.ts
+export declare function TabsRoot({ activationMode, className, render, ...rest }: TabsRootProps): JSX.Element;
+export declare function TabsList({ className, render, ...rest }: TabsListProps): JSX.Element;
+export declare function TabsTab({ icon, count, className, render, children, ...rest }: TabsTabProps): JSX.Element;
+export declare function TabsPanel({ keepMounted, className, render, ...rest }: TabsPanelProps): JSX.Element;
+//#endregion

package/dist/tabs/tabs.client.js

@@ -0,0 +1,68 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { List, Panel, Root, Tab } from "../_engines/react-aria/tabs.client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tabs/tabs.client.tsx
+function TabsRoot({ activationMode = "automatic", className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		activationMode,
+		className: cx("nz-tabs", className),
+		"data-slot": "tabs",
+		render: toRenderFn(render, "div")
+	});
+}
+function TabsList({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(List, {
+		...rest,
+		className: cx("nz-tabs-list", className),
+		"data-slot": "tabs-list",
+		render: toRenderFn(render, "div")
+	});
+}
+function TabsTab({ icon, count, className, render, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Tab, {
+		...rest,
+		className: cx("nz-tabs-tab", className),
+		"data-slot": "tabs-tab",
+		"data-focus-inset": "",
+		render: toRenderFn(render, "div"),
+		children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tabs-icon",
+				"data-slot": "tabs-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "nz-tabs-label",
+				"data-slot": "tabs-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-tabs-text",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					className: "nz-tabs-sizer",
+					"aria-hidden": "true",
+					children
+				})]
+			}),
+			count != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tabs-count",
+				"data-slot": "tabs-count",
+				children: count
+			})
+		]
+	});
+}
+function TabsPanel({ keepMounted = false, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		...rest,
+		keepMounted,
+		className: cx("nz-tabs-panel", className),
+		"data-slot": "tabs-panel",
+		render: toRenderFn(render, "div")
+	});
+}
+//#endregion
+export { TabsList, TabsPanel, TabsRoot, TabsTab };

package/dist/tabs/tabs.contract.d.ts

@@ -0,0 +1,89 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import "../_internal/engine-part.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tabs/tabs.contract.d.ts
+/**
+ * Why the selected tab changed. React Aria reports no cause, so with it `details.reason` is always
+ * `'unknown'` (§9.3 rule 2); the names are the causes an engine that reports one would use.
+ */
+export type TabsValueReason = "tab-press" | "keyboard";
+/**
+ * When a tab is selected (WAI-ARIA APG tabs).
+ * - `automatic`: an arrow key moves focus and selects the tab it lands on (the APG default, for
+ *   panels that show without a noticeable delay);
+ * - `manual`: arrow keys only move focus; Enter or Space selects (for panels that are slow to show).
+ */
+export type TabsActivationMode = "automatic" | "manual";
+export interface TabsRootState {
+  disabled: boolean;
+}
+export interface TabsListState {
+  disabled: boolean;
+}
+export interface TabsTabState {
+  selected: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}
+export interface TabsPanelState {
+  /** The panel's tab is selected. False only on a `keepMounted` panel whose tab is not. */
+  selected: boolean;
+  focusVisible: boolean;
+}
+export interface TabsRootProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange" | "id" | "dir"> {
+  /** Controlled: the selected tab's `value`. */
+  value?: string;
+  /** The tab selected at first (uncontrolled). Defaults to the first tab that is not disabled. */
+  defaultValue?: string;
+  /** Called when the user selects a tab. `details.reason` is `'unknown'` with React Aria. */
+  onValueChange?: (value: string, details: ChangeDetails<TabsValueReason>) => void;
+  /** @default 'automatic' */
+  activationMode?: TabsActivationMode;
+  /** Disables every tab. The selected panel still shows. */
+  disabled?: boolean;
+  /**
+   * The strip's reading direction (M26), rendered as the root's `dir` attribute: the layout and the
+   * arrow keys follow it (in `rtl`, ArrowLeft moves to the next tab). Unset, nothing is rendered and
+   * the arrows follow the direction of the `NizivoConfig` scope's `locale`. Nothing reads the DOM, so
+   * a `dir` attribute set higher up does not turn the arrows: a strip whose direction differs from
+   * its locale's sets it here. `'auto'` is not accepted for the same reason.
+   */
+  dir?: "ltr" | "rtl";
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsRootState>;
+  /** One `Tabs.List` and its `Tabs.Panel`s. */
+  children: ReactNode;
+}
+export interface TabsListProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsListState>;
+  /** `Tabs.Tab` elements. */
+  children: ReactNode;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id" | "onClick"> {
+  /** Pairs the tab with the `Tabs.Panel` of the same `value`. */
+  value: string;
+  disabled?: boolean;
+  /** A decorative glyph before the label (16 px). */
+  icon?: ReactNode;
+  /** A count after the label, such as the number of orders in a status. */
+  count?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsTabState>;
+  children: ReactNode;
+}
+export interface TabsPanelProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  /** The `value` of the tab that shows this panel. */
+  value: string;
+  /**
+   * Keeps the panel mounted, `hidden`, while its tab is not selected, so its state (a scroll
+   * position, a form draft) survives switching. Without it only the selected panel is rendered, on
+   * the server too. @default false
+   */
+  keepMounted?: boolean;
+  /** Must render a `<div>`. */
+  render?: RenderProp<TabsPanelState>;
+  children?: ReactNode;
+}
+//#endregion

package/dist/tabs/tabs.parts.d.ts

@@ -0,0 +1,6 @@
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+declare namespace tabs_parts_d_exports {
+  export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab };
+}
+//#endregion
+export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab, tabs_parts_d_exports };

package/dist/tabs/tabs.parts.js

@@ -0,0 +1,11 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.client.js";
+//#region src/tabs/tabs.parts.ts
+var tabs_parts_exports = /* @__PURE__ */ __exportAll({
+	List: () => TabsList,
+	Panel: () => TabsPanel,
+	Root: () => TabsRoot,
+	Tab: () => TabsTab
+});
+//#endregion
+export { TabsList as List, TabsPanel as Panel, TabsRoot as Root, TabsTab as Tab, tabs_parts_exports };

package/dist/text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text, TextProps, TextState, TextTone, TextVariant } from "./text.js";
+export { Text, type TextProps, type TextState, type TextTone, type TextVariant };

package/dist/text/index.js

@@ -0,0 +1 @@
+export { Text } from "./text.js";

package/dist/text/text.d.ts

@@ -0,0 +1,21 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/text/text.d.ts
+/** The Figma text styles as lowercase names (`Nizivo/Label/M` → `label-m`), plus the 12 px proposals. */
+export type TextVariant = "display-l" | "display-m" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4" | "body-l" | "body-m" | "body-m-strong" | "body-s" | "label-l" | "label-m" | "label-m-strong" | "label-s" | "numeric-display" | "numeric-kpi" | "numeric-l" | "numeric-m" | "mono-m" | "mono-m-strong";
+/** The `text/*` colour tokens. `accent` and `on-critical` are code-owned proposals (§15.3). */
+export type TextTone = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "on-brand" | "on-accent" | "on-critical" | "brand" | "accent" | "success" | "warning" | "critical" | "info";
+export interface TextState {
+  variant: TextVariant;
+  tone: TextTone | undefined;
+}
+export interface TextProps extends ComponentPropsWithRef<"p"> {
+  /** The text style. 12 px exists only as `body-s` and `label-s` (§15.1). @default 'body-m' */
+  variant?: TextVariant;
+  /** A `text/*` colour. Absent, the colour is inherited from the surface. */
+  tone?: TextTone;
+  /** Another element or component, for example `render={<span />}` or `render={<label htmlFor="sku" />}`. */
+  render?: RenderProp<TextState>;
+}
+export declare function Text({ variant, tone, render, className, ...rest }: TextProps): ReactElement;
+//#endregion

package/dist/text/text.js

@@ -0,0 +1,17 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/text/text.tsx
+function Text({ variant = "body-m", tone, render, className, ...rest }) {
+	return renderElement("p", render, {
+		variant,
+		tone
+	}, {
+		"data-slot": "text",
+		"data-variant": variant,
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-text", className)
+	});
+}
+//#endregion
+export { Text };

package/dist/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { Textarea, TextareaProps } from "./textarea.client.js";
+export { Textarea, type TextareaProps };

package/dist/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from "./textarea.client.js";

package/dist/textarea/textarea.client.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, JSX } from "react";
+//#region src/textarea/textarea.client.d.ts
+export interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "children"> {
+  /**
+   * Visible lines of text. The height is the larger of these rows and 112 px (Figma 7367:316; the
+   * `--nz-textarea-min-block-size` hook lowers it), so up to 4 rows of Body/M sit at 112 px. Where
+   * the textarea grows with its content, that is also its minimum (1 to 10; a larger value keeps a
+   * 3-line minimum there). @default 3
+   */
+  rows?: number;
+  /**
+   * An error message is presented for this textarea (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+}
+export declare function Textarea({ rows, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, ...rest }: TextareaProps): JSX.Element;
+//#endregion

package/dist/textarea/textarea.client.js

@@ -0,0 +1,31 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/textarea/textarea.client.tsx
+function Textarea({ rows = 3, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": describedBy
+	});
+	return /* @__PURE__ */ jsx("textarea", {
+		...mergeProps(field.controlProps, rest),
+		...stateAttrs({
+			invalid: field.invalid,
+			disabled: field.disabled,
+			readOnly: field.readOnly
+		}),
+		rows,
+		className: cx("nz-textarea", className),
+		"data-slot": "textarea"
+	});
+}
+//#endregion
+export { Textarea };

package/dist/theme-script/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeScript, ThemeScriptProps, themeScript } from "./theme-script.js";
+export { ThemeScript, type ThemeScriptProps, themeScript };

package/dist/theme-script/index.js

@@ -0,0 +1 @@
+export { ThemeScript, themeScript } from "./theme-script.js";

package/dist/theme-script/theme-script.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement } from "react";
+//#region src/theme-script/theme-script.d.ts
+/**
+ * The script `ThemeScript` renders, for frameworks that inline it themselves (Astro:
+ * `<script is:inline set:html={themeScript} />`; Vite: a `transformIndexHtml` tag) or that allow it
+ * by hash under a strict CSP. It runs in `<head>`, before `<body>` exists, and sets two attributes on
+ * `<html>`:
+ *
+ * - **`data-nz-theme`, the reader's saved theme.** It reads `localStorage` key `nz-theme`; when the
+ *   value is `"light"`, `"dark"` or `"system"`, it sets `data-nz-theme` to that value, replacing what
+ *   the server rendered (the server's value is the app's default; the stored one is the reader's
+ *   choice). `"system"` is set as is, not resolved: CSS follows the operating system from it, live,
+ *   with no listener. With nothing stored, any other value, or storage blocked (a sandboxed frame,
+ *   disabled site data), the attribute is left as the server rendered it. A theme switch saves the
+ *   choice with `localStorage.setItem('nz-theme', value)` and sets the attribute itself.
+ * - **`data-nz-platform`**: `"apple"` when the platform string matches `/mac|iphone|ipad|ipod/i`,
+ *   else `"other"`. The platform string is `navigator.userAgentData.platform` where the browser has
+ *   it (Chromium: `"macOS"`, `"Windows"`, …), else `navigator.platform` (`"MacIntel"`, `"iPhone"`,
+ *   `"iPad"`; iPadOS reports `"MacIntel"`, which is still Apple). It never reads the user-agent
+ *   string. A value already on `<html>` (set by the server, or by a test) is kept. Kbd reads the
+ *   attribute to show `⌘K` or `Ctrl+K`.
+ *
+ * Each half runs in its own `try`, so blocked storage never stops the platform half, and the script
+ * never throws into the page.
+ *
+ * Under a strict CSP, allow it by hash: `script-src 'sha256-nA1HUQWDdDUFqqoxWbjzCzcYSjzWLEe0pwDdRCMGqOw='`.
+ * The hash changes only when the script does, and a change is called out in the changelog.
+ */
+export declare const themeScript: string;
+export interface ThemeScriptProps {
+  /** The CSP nonce for the inline script (`script-src 'nonce-…'`). Not needed with a hash allowlist. */
+  nonce?: string;
+}
+/**
+ * Sets page-level attributes before first paint, so nothing changes once the page has painted: the
+ * reader's saved theme (`data-nz-theme` from `localStorage` key `nz-theme`: `light`, `dark` or
+ * `system`) and `data-nz-platform` (`apple` or `other`). The rules are on `themeScript`. Render it in
+ * `<head>` (`<head><ThemeScript nonce={nonce} /></head>` in a root layout), put the app's default
+ * theme on `<html>` (`data-nz-theme="system"`, or none for light), and put `suppressHydrationWarning`
+ * on `<html>`, whose attributes the script changes.
+ */
+export declare function ThemeScript({ nonce }: ThemeScriptProps): ReactElement;
+//#endregion

package/dist/theme-script/theme-script.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/theme-script/theme-script.tsx
+/**
+* The script `ThemeScript` renders, for frameworks that inline it themselves (Astro:
+* `<script is:inline set:html={themeScript} />`; Vite: a `transformIndexHtml` tag) or that allow it
+* by hash under a strict CSP. It runs in `<head>`, before `<body>` exists, and sets two attributes on
+* `<html>`:
+*
+* - **`data-nz-theme`, the reader's saved theme.** It reads `localStorage` key `nz-theme`; when the
+*   value is `"light"`, `"dark"` or `"system"`, it sets `data-nz-theme` to that value, replacing what
+*   the server rendered (the server's value is the app's default; the stored one is the reader's
+*   choice). `"system"` is set as is, not resolved: CSS follows the operating system from it, live,
+*   with no listener. With nothing stored, any other value, or storage blocked (a sandboxed frame,
+*   disabled site data), the attribute is left as the server rendered it. A theme switch saves the
+*   choice with `localStorage.setItem('nz-theme', value)` and sets the attribute itself.
+* - **`data-nz-platform`**: `"apple"` when the platform string matches `/mac|iphone|ipad|ipod/i`,
+*   else `"other"`. The platform string is `navigator.userAgentData.platform` where the browser has
+*   it (Chromium: `"macOS"`, `"Windows"`, …), else `navigator.platform` (`"MacIntel"`, `"iPhone"`,
+*   `"iPad"`; iPadOS reports `"MacIntel"`, which is still Apple). It never reads the user-agent
+*   string. A value already on `<html>` (set by the server, or by a test) is kept. Kbd reads the
+*   attribute to show `⌘K` or `Ctrl+K`.
+*
+* Each half runs in its own `try`, so blocked storage never stops the platform half, and the script
+* never throws into the page.
+*
+* Under a strict CSP, allow it by hash: `script-src 'sha256-nA1HUQWDdDUFqqoxWbjzCzcYSjzWLEe0pwDdRCMGqOw='`.
+* The hash changes only when the script does, and a change is called out in the changelog.
+*/
+const themeScript = "(function(d){try{var t=localStorage.getItem(\"nz-theme\");if(/^(light|dark|system)$/.test(t))d.setAttribute(\"data-nz-theme\",t)}catch(e){}try{if(!d.hasAttribute(\"data-nz-platform\")){var n=navigator,p=(n.userAgentData&&n.userAgentData.platform)||n.platform||\"\";d.setAttribute(\"data-nz-platform\",/mac|iphone|ipad|ipod/i.test(p)?\"apple\":\"other\")}}catch(e){}})(document.documentElement)";
+/**
+* Sets page-level attributes before first paint, so nothing changes once the page has painted: the
+* reader's saved theme (`data-nz-theme` from `localStorage` key `nz-theme`: `light`, `dark` or
+* `system`) and `data-nz-platform` (`apple` or `other`). The rules are on `themeScript`. Render it in
+* `<head>` (`<head><ThemeScript nonce={nonce} /></head>` in a root layout), put the app's default
+* theme on `<html>` (`data-nz-theme="system"`, or none for light), and put `suppressHydrationWarning`
+* on `<html>`, whose attributes the script changes.
+*/
+function ThemeScript({ nonce }) {
+	return /* @__PURE__ */ jsx("script", {
+		suppressHydrationWarning: true,
+		...nonce === void 0 ? {} : { nonce },
+		dangerouslySetInnerHTML: { __html: themeScript }
+	});
+}
+//#endregion
+export { ThemeScript, themeScript };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { TooltipLabels, TooltipPopupProps, TooltipPopupState, TooltipRootProps, TooltipSide, TooltipTriggerProps, TooltipTriggerState } from "./tooltip.contract.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+import { tooltip_parts_d_exports } from "./tooltip.parts.js";
+export { type OpenReason, tooltip_parts_d_exports as Tooltip, type TooltipLabels, TooltipPopup, type TooltipPopupProps, type TooltipPopupState, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, type TooltipTriggerState };

package/dist/tooltip/index.js

@@ -0,0 +1,3 @@
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+import { tooltip_parts_exports } from "./tooltip.parts.js";
+export { tooltip_parts_exports as Tooltip, TooltipPopup, TooltipRoot, TooltipTrigger };