@nizivo/react 0.0.0-stage → 0.1.0

package/dist/select/select.client.js

@@ -0,0 +1,152 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { CheckGlyph, ChevronsUpDownGlyph } from "../_internal/glyphs.js";
+import { joinIds } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { Group, GroupLabel, Item, Popup, Root, Separator, Trigger, Value } from "../_engines/react-aria/select.client.js";
+import { createContext, use, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/select.client.tsx
+const Scope = createContext({
+	size: "md",
+	invalid: false
+});
+const renderRoot = toRenderFn(void 0, "div");
+const renderDiv = toRenderFn(void 0, "div");
+function SelectRoot({ size = "md", name, required, disabled, invalid, "aria-labelledby": labelledBy, className, ...props }) {
+	const field = useFieldControl({
+		name,
+		required,
+		disabled,
+		invalid,
+		labelBehavior: "focus"
+	});
+	const { id, describedBy } = field;
+	const named = labelledBy ?? field.labelledBy;
+	const scope = useMemo(() => ({
+		size,
+		invalid: field.invalid,
+		id,
+		describedBy
+	}), [
+		size,
+		field.invalid,
+		id,
+		describedBy
+	]);
+	return /* @__PURE__ */ jsx(Scope, {
+		value: scope,
+		children: /* @__PURE__ */ jsx(Root, {
+			...props,
+			...field.name !== void 0 && { name: field.name },
+			...named !== void 0 && { "aria-labelledby": named },
+			required: field.required,
+			disabled: field.disabled,
+			invalid: field.invalid,
+			className: cx("nz-select", className),
+			"data-slot": "select",
+			"data-size": size,
+			render: renderRoot
+		})
+	});
+}
+function SelectTrigger({ id, "aria-describedby": describedBy, className, leadingIcon, indicator, render, children, ...rest }) {
+	const { size, invalid, ...field } = use(Scope);
+	return /* @__PURE__ */ jsxs(Trigger, {
+		...rest,
+		id: id ?? field.id,
+		"aria-describedby": joinIds(field.describedBy, describedBy),
+		className: cx("nz-select-trigger nz-hit-target", className),
+		"data-slot": "select-trigger",
+		"data-size": size,
+		"data-invalid": invalid ? "" : void 0,
+		render: toRenderFn(render, "button"),
+		children: [
+			leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-select-icon",
+				"data-slot": "select-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			children ?? /* @__PURE__ */ jsx(SelectValue, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-select-chevron",
+				"data-slot": "select-chevron",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsx(ChevronsUpDownGlyph, {})
+			})
+		]
+	});
+}
+function SelectValue({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Value, {
+		...rest,
+		className: cx("nz-select-value", className),
+		"data-slot": "select-value",
+		render: toRenderFn(render, "span")
+	});
+}
+function SelectPopup({ side = "bottom", align = "start", sideOffset = 4, container, className, style, children }) {
+	return /* @__PURE__ */ jsx(Popup, {
+		side,
+		align,
+		sideOffset,
+		container,
+		className: cx("nz-select-popup", className),
+		style,
+		"data-slot": "select-popup",
+		render: renderDiv,
+		list: {
+			className: "nz-select-list",
+			"data-slot": "select-list"
+		},
+		children
+	});
+}
+function SelectItem({ className, textValue, indicator, render, children, ...rest }) {
+	const base = toRenderFn(render, "div");
+	const check = indicator !== null && /* @__PURE__ */ jsx("span", {
+		className: "nz-select-item-indicator",
+		"aria-hidden": "true",
+		children: indicator ?? /* @__PURE__ */ jsx(CheckGlyph, {})
+	});
+	return /* @__PURE__ */ jsx(Item, {
+		...rest,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		className: cx("nz-select-item", className),
+		"data-slot": "select-item",
+		"data-focus-inset": "",
+		render: (props, state) => base({
+			...props,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [props["children"], check] })
+		}, state),
+		children
+	});
+}
+function SelectGroup({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Group, {
+		...rest,
+		className: cx("nz-select-group", className),
+		"data-slot": "select-group",
+		render: toRenderFn(render, "section")
+	});
+}
+function SelectGroupLabel({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(GroupLabel, {
+		...rest,
+		className: cx("nz-select-group-label", className),
+		"data-slot": "select-group-label",
+		render: toRenderFn(render, "header")
+	});
+}
+function SelectSeparator({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		...rest,
+		className: cx("nz-select-separator", className),
+		"data-slot": "select-separator",
+		render: toRenderFn(render, "div")
+	});
+}
+//#endregion
+export { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue };

package/dist/select/select.contract.d.ts

@@ -0,0 +1,119 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import { Align, Side } from "../contracts/state.js";
+import "../_internal/engine-part.js";
+import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/select/select.contract.d.ts
+export type SelectValueReason = "item-press" | "keyboard" | "typeahead" | "form-reset";
+/**
+ * Strings the engine renders (§9.3 rule 7). `placeholder` is passed to the engine.
+ * Engine-owned with React Aria (not overridable): the visually hidden "Dismiss" buttons in the popup.
+ */
+export interface SelectLabels {
+  /** Shown while no value is chosen. React Aria's default is its localized "Select an item". */
+  placeholder: string;
+}
+export interface SelectRootProps {
+  value?: string | null;
+  defaultValue?: string | null;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onValueChange?: (value: string | null, details: ChangeDetails<SelectValueReason>) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * With `name`, a hidden native `<select>` carries the value into `FormData`. Inside a `Field`, the
+   * Field's `name`, `required`, `disabled` and presented error apply unless set here (an explicit
+   * `false` wins), and a click on its label focuses the trigger without opening the listbox.
+   */
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** An error message is presented (owned by Field, never by the engine). Inside a Field, the Field sets it. */
+  invalid?: boolean;
+  placeholder?: SelectLabels["placeholder"];
+  "aria-label"?: string;
+  /** Names the trigger together with the value. Inside a Field, the Field label id goes here (§16.1). */
+  "aria-labelledby"?: string;
+  /** 32 / 40 / 48 px. @default 'md' */
+  size?: ControlSize;
+  className?: string;
+  children: ReactNode;
+}
+export interface SelectRootState {
+  open: boolean;
+  disabled: boolean;
+}
+export interface SelectTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface SelectValueState {
+  placeholder: boolean;
+}
+export interface SelectPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface SelectItemState {
+  highlighted: boolean;
+  selected: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}
+export interface SelectTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children" | "disabled" | "type"> {
+  leadingIcon?: ReactNode;
+  /** Replaces the chevron glyph. */
+  indicator?: ReactNode;
+  /** Must render a `<button>` (a component that renders one is fine). */
+  render?: RenderProp<SelectTriggerState>;
+  /** Replaces the default `Select.Value`. */
+  children?: ReactNode;
+}
+export interface SelectValueProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** Must render a `<span>`. */
+  render?: RenderProp<SelectValueState>;
+}
+export interface SelectPopupProps {
+  /** @default 'bottom' */
+  side?: "top" | "bottom";
+  /** @default 'start' */
+  align?: Align;
+  /** Distance from the trigger in px. @default 4 */
+  sideOffset?: number;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+export interface SelectItemProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  value: string;
+  /** Typeahead text; defaults to `children` when it is a string. */
+  textValue?: string;
+  disabled?: boolean;
+  /** Replaces the check shown at the end of the selected item; `null` shows none. Decorative. */
+  indicator?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<SelectItemState>;
+  children: ReactNode;
+}
+type NoState = Record<string, never>;
+export interface SelectGroupProps extends Omit<ComponentPropsWithRef<"section">, "id"> {
+  /** Must render a `<section>`. */
+  render?: RenderProp<NoState>;
+}
+export interface SelectGroupLabelProps extends Omit<ComponentPropsWithRef<"header">, "id"> {
+  /** Must render a `<header>`. */
+  render?: RenderProp<NoState>;
+}
+export interface SelectSeparatorProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Must render a `<div>`. */
+  render?: RenderProp<NoState>;
+}
+//#endregion
+export type { OpenReason };

package/dist/select/select.parts.d.ts

@@ -0,0 +1,6 @@
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+declare namespace select_parts_d_exports {
+  export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value };
+}
+//#endregion
+export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, select_parts_d_exports };

package/dist/select/select.parts.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+//#region src/select/select.parts.ts
+var select_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => SelectGroup,
+	GroupLabel: () => SelectGroupLabel,
+	Item: () => SelectItem,
+	Popup: () => SelectPopup,
+	Root: () => SelectRoot,
+	Separator: () => SelectSeparator,
+	Trigger: () => SelectTrigger,
+	Value: () => SelectValue
+});
+//#endregion
+export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, select_parts_exports };

package/dist/separator/index.d.ts

@@ -0,0 +1,2 @@
+import { Separator, SeparatorProps, SeparatorState } from "./separator.js";
+export { Separator, type SeparatorProps, type SeparatorState };

package/dist/separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator.js";

package/dist/separator/separator.d.ts

@@ -0,0 +1,26 @@
+import { RenderProp } from "../contracts/render.js";
+import { Orientation } from "../contracts/state.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/separator/separator.d.ts
+export interface SeparatorState {
+  orientation: Orientation;
+  decorative: boolean;
+}
+export interface SeparatorProps extends Omit<ComponentPropsWithRef<"hr">, "children"> {
+  /** A vertical separator stretches to the height of its flex row. @default 'horizontal' */
+  orientation?: Orientation;
+  /**
+   * Purely visual, hidden from assistive technology (`role="none"`): the Figma Divider default
+   * (7370:95, M35). Pass `decorative={false}` for a separator that means something on its own, a
+   * break between two groups a screen reader should hear (an `<hr>`'s implicit `separator` role,
+   * with `aria-orientation` when vertical). @default true
+   */
+  decorative?: boolean;
+  render?: RenderProp<SeparatorState>;
+}
+/**
+ * An `<hr>`: a 1 px `border/subtle` line, Figma's Divider (7370:95). Decorative by default; spacing
+ * comes first, a line only when spacing is not enough (the Figma doc).
+ */
+export declare function Separator({ orientation, decorative, render, className, ...rest }: SeparatorProps): ReactElement;
+//#endregion

package/dist/separator/separator.js

@@ -0,0 +1,23 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/separator/separator.tsx
+/**
+* An `<hr>`: a 1 px `border/subtle` line, Figma's Divider (7370:95). Decorative by default; spacing
+* comes first, a line only when spacing is not enough (the Figma doc).
+*/
+function Separator({ orientation = "horizontal", decorative = true, render, className, ...rest }) {
+	const native = render === void 0;
+	return renderElement("hr", render, {
+		orientation,
+		decorative
+	}, {
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		...rest,
+		className: cx("nz-separator", className),
+		role: decorative ? "none" : native ? void 0 : "separator",
+		"aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0
+	});
+}
+//#endregion
+export { Separator };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape, SkeletonState } from "./skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonState };

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,20 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/skeleton/skeleton.d.ts
+/** Figma "Shape": a text line, a block (media, a chart) or a circle (an avatar). */
+export type SkeletonShape = "line" | "block" | "circle";
+export interface SkeletonState {
+  shape: SkeletonShape;
+}
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** @default 'line' */
+  shape?: SkeletonShape;
+  render?: RenderProp<SkeletonState>;
+}
+/**
+ * One placeholder block, always hidden from assistive technology. The region it stands in for sets
+ * `aria-busy` and carries visually hidden "Loading …" text (§16.5). There is no `style` prop path:
+ * size it with a class, or with `--nz-skeleton-width`, `--nz-skeleton-height` and `--nz-skeleton-radius`.
+ */
+export declare function Skeleton({ shape, render, className, ...rest }: SkeletonProps): ReactElement;
+//#endregion

package/dist/skeleton/skeleton.js

@@ -0,0 +1,19 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/skeleton/skeleton.tsx
+/**
+* One placeholder block, always hidden from assistive technology. The region it stands in for sets
+* `aria-busy` and carries visually hidden "Loading …" text (§16.5). There is no `style` prop path:
+* size it with a class, or with `--nz-skeleton-width`, `--nz-skeleton-height` and `--nz-skeleton-radius`.
+*/
+function Skeleton({ shape = "line", render, className, ...rest }) {
+	return renderElement("span", render, { shape }, {
+		"data-slot": "skeleton",
+		"data-shape": shape,
+		...rest,
+		className: cx("nz-skeleton", className),
+		"aria-hidden": true
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+import { LayoutGap, Stack, StackProps, StackState } from "./stack.js";
+export { type LayoutGap, Stack, type StackProps, type StackState };

package/dist/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from "./stack.js";

package/dist/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/stack/stack.d.ts
+/** A `--nz-space-*` key: `'4'` is `--nz-space-4` (1rem), `'0-5'` is `--nz-space-0-5`. Token keys only. */
+export type LayoutGap = "0" | "0-5" | "1" | "1-5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
+export interface StackState {
+  gap: LayoutGap | undefined;
+}
+export interface StackProps extends ComponentPropsWithRef<"div"> {
+  /** Space between children. Absent, there is none. */
+  gap?: LayoutGap;
+  /** Another element, for example `render={<ul />}` for a list. */
+  render?: RenderProp<StackState>;
+}
+/** Children in a column. */
+export declare function Stack({ gap, render, className, ...rest }: StackProps): ReactElement;
+//#endregion

package/dist/stack/stack.js

@@ -0,0 +1,14 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/stack/stack.tsx
+/** Children in a column. */
+function Stack({ gap, render, className, ...rest }) {
+	return renderElement("div", render, { gap }, {
+		"data-slot": "stack",
+		"data-gap": gap,
+		...rest,
+		className: cx("nz-stack", className)
+	});
+}
+//#endregion
+export { Stack };