@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { FieldProps } from "../field/index.ts";
+import { type NumberInputInputProps, type NumberInputRootProps } from "./number-input.tsx";
+export type NumberFieldProps = FieldProps & Omit<NumberInputRootProps, keyof FieldProps | "children"> & Pick<NumberInputInputProps, "placeholder" | "autoComplete" | "enterKeyHint" | "onBlur" | "onFocus"> & Readonly<{
+    /** Static leading text, such as a currency sign. */
+    prefix?: ReactNode;
+    /** Static trailing text, such as a unit. */
+    suffix?: ReactNode;
+    /** The decrement button's accessible name and tooltip, such as "Decrease". */
+    decrementLabel: string;
+    /** The increment button's accessible name and tooltip, such as "Increase". */
+    incrementLabel: string;
+    /** What the control announces itself as, such as "Number field". */
+    roleDescription: string;
+}>;
+/**
+ * A labelled numeric field: label, a bordered group holding the control between
+ * its stepper buttons, then the description and error. Assembled from
+ * `NumberInput`'s parts.
+ *
+ * @example
+ * <NumberField
+ * 	label="VAT rate"
+ * 	optionalLabel="optional"
+ * 	decrementLabel="Decrease"
+ * 	incrementLabel="Increase"
+ * 	roleDescription="Number field"
+ * 	format={percentFormat()}
+ * 	value={rate}
+ * 	onValueChange={setRate}
+ * />
+ */
+export declare const NumberField: ({ label, description, prefix, suffix, decrementLabel, incrementLabel, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps }: NumberFieldProps) => ReactNode;
+//# sourceMappingURL=number-field.d.ts.map

package/dist/components/number-field/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GACxC,IAAI,CACH,oBAAoB,EACpB,MAAM,UAAU,GAAG,UAAU,CAC7B,GACD,IAAI,CACH,qBAAqB,EACnB,aAAa,GACb,cAAc,GACd,cAAc,GACd,QAAQ,GACR,SAAS,CACX,GACD,QAAQ,CAAC;IACR,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,eAAe,EAAE,MAAM,CAAC;CACxB,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,oKAcrB,gBAAgB,KAAG,SA2BrB,CAAC"}

package/dist/components/number-field/number-field.js

@@ -0,0 +1,168 @@
+import { NumberInput } from "./number-input.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/number-field/number-field.tsx
+/**
+* A labelled numeric field: label, a bordered group holding the control between
+* its stepper buttons, then the description and error. Assembled from
+* `NumberInput`'s parts.
+*
+* @example
+* <NumberField
+* 	label="VAT rate"
+* 	optionalLabel="optional"
+* 	decrementLabel="Decrease"
+* 	incrementLabel="Increase"
+* 	roleDescription="Number field"
+* 	format={percentFormat()}
+* 	value={rate}
+* 	onValueChange={setRate}
+* />
+*/
+var NumberField = (t0) => {
+	const $ = c(46);
+	let autoComplete;
+	let decrementLabel;
+	let description;
+	let enterKeyHint;
+	let incrementLabel;
+	let label;
+	let onBlur;
+	let onFocus;
+	let placeholder;
+	let prefix;
+	let roleDescription;
+	let rootProps;
+	let suffix;
+	if ($[0] !== t0) {
+		({label, description, prefix, suffix, decrementLabel, incrementLabel, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = autoComplete;
+		$[2] = decrementLabel;
+		$[3] = description;
+		$[4] = enterKeyHint;
+		$[5] = incrementLabel;
+		$[6] = label;
+		$[7] = onBlur;
+		$[8] = onFocus;
+		$[9] = placeholder;
+		$[10] = prefix;
+		$[11] = roleDescription;
+		$[12] = rootProps;
+		$[13] = suffix;
+	} else {
+		autoComplete = $[1];
+		decrementLabel = $[2];
+		description = $[3];
+		enterKeyHint = $[4];
+		incrementLabel = $[5];
+		label = $[6];
+		onBlur = $[7];
+		onFocus = $[8];
+		placeholder = $[9];
+		prefix = $[10];
+		roleDescription = $[11];
+		rootProps = $[12];
+		suffix = $[13];
+	}
+	let t1;
+	if ($[14] !== label) {
+		t1 = /* @__PURE__ */ jsx(NumberInput.Label, { children: label });
+		$[14] = label;
+		$[15] = t1;
+	} else t1 = $[15];
+	let t2;
+	if ($[16] !== decrementLabel) {
+		t2 = /* @__PURE__ */ jsx(NumberInput.Decrement, { label: decrementLabel });
+		$[16] = decrementLabel;
+		$[17] = t2;
+	} else t2 = $[17];
+	let t3;
+	if ($[18] !== prefix) {
+		t3 = prefix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: prefix });
+		$[18] = prefix;
+		$[19] = t3;
+	} else t3 = $[19];
+	let t4;
+	if ($[20] !== autoComplete || $[21] !== enterKeyHint || $[22] !== onBlur || $[23] !== onFocus || $[24] !== placeholder || $[25] !== roleDescription) {
+		t4 = /* @__PURE__ */ jsx(NumberInput.Input, {
+			"aria-roledescription": roleDescription,
+			placeholder,
+			autoComplete,
+			enterKeyHint,
+			onBlur,
+			onFocus
+		});
+		$[20] = autoComplete;
+		$[21] = enterKeyHint;
+		$[22] = onBlur;
+		$[23] = onFocus;
+		$[24] = placeholder;
+		$[25] = roleDescription;
+		$[26] = t4;
+	} else t4 = $[26];
+	let t5;
+	if ($[27] !== suffix) {
+		t5 = suffix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: suffix });
+		$[27] = suffix;
+		$[28] = t5;
+	} else t5 = $[28];
+	let t6;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(NumberInput.Pending, {});
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== incrementLabel) {
+		t7 = /* @__PURE__ */ jsx(NumberInput.Increment, { label: incrementLabel });
+		$[30] = incrementLabel;
+		$[31] = t7;
+	} else t7 = $[31];
+	let t8;
+	if ($[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(NumberInput.Group, { children: [
+			t2,
+			t3,
+			t4,
+			t5,
+			t6,
+			t7
+		] });
+		$[32] = t2;
+		$[33] = t3;
+		$[34] = t4;
+		$[35] = t5;
+		$[36] = t7;
+		$[37] = t8;
+	} else t8 = $[37];
+	let t9;
+	if ($[38] !== description) {
+		t9 = /* @__PURE__ */ jsx(NumberInput.Description, { children: description });
+		$[38] = description;
+		$[39] = t9;
+	} else t9 = $[39];
+	let t10;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(NumberInput.Error, {});
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== rootProps || $[42] !== t1 || $[43] !== t8 || $[44] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(NumberInput.Root, {
+			...rootProps,
+			children: [
+				t1,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[41] = rootProps;
+		$[42] = t1;
+		$[43] = t8;
+		$[44] = t9;
+		$[45] = t11;
+	} else t11 = $[45];
+	return t11;
+};
+export { NumberField };

package/dist/components/number-field/number-field.module.js

@@ -0,0 +1,16 @@
+import './number-field.css';// src/components/number-field/number-field.module.scss
+var root = "_root_9fvwz_3";
+var wrapper = "_wrapper_9fvwz_6";
+var group = "_group_9fvwz_9";
+var input = "_input_9fvwz_67";
+var inlay = "_inlay_9fvwz_83";
+var action = "_action_9fvwz_94";
+var number_field_module_default = {
+	root,
+	wrapper,
+	group,
+	input,
+	inlay,
+	action
+};
+export { action, number_field_module_default as default, group, inlay, input, root, wrapper };

package/dist/components/number-field/number-input-context.d.ts

@@ -0,0 +1,23 @@
+import { type Context } from "react";
+import type { BusyPhase } from "../../lib/hooks/index.ts";
+import type { FieldState } from "../field/index.ts";
+/** What a number input's `Root` hands its parts. */
+export type NumberInputContextValue = Readonly<{
+    /** Projected by `Root`; every part reads it, none of them own it. */
+    state: FieldState;
+    /** The errors `Root` was given, which `Error` renders. */
+    errors: unknown;
+    /** The word an optional field's label trails. */
+    optionalLabel: string;
+    phase: BusyPhase;
+}>;
+/** The context a number input's `Root` provides. */
+export declare const NumberInputContext: Context<NumberInputContextValue | null>;
+/**
+ * The surrounding number input's projected state.
+ *
+ * @example
+ * const { state } = useNumberInputContext();
+ */
+export declare const useNumberInputContext: () => NumberInputContextValue;
+//# sourceMappingURL=number-input-context.d.ts.map

package/dist/components/number-field/number-input-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-context.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-input-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,oDAAoD;AACpD,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,qEAAqE;IACrE,KAAK,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,SAAS,CAAC;CACjB,CAAC,CAAC;AAEH,oDAAoD;AACpD,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,GAAG,IAAI,CACnB,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAC7B,uBAIF,CAAC"}

package/dist/components/number-field/number-input-context.js

@@ -0,0 +1,15 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/number-field/number-input-context.ts
+/** The context a number input's `Root` provides. */
+var NumberInputContext = createContext(null);
+/**
+* The surrounding number input's projected state.
+*
+* @example
+* const { state } = useNumberInputContext();
+*/
+var useNumberInputContext = () => {
+	return useRequiredContext(NumberInputContext, "Number input parts must be rendered within <NumberInput.Root>.");
+};
+export { NumberInputContext, useNumberInputContext };

package/dist/components/number-field/number-input.d.ts

@@ -0,0 +1,81 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type { ComponentProps, ReactNode } from "react";
+import { Field, type FieldErrorProps, type FieldLabelProps, type FieldProps, type FieldState } from "../field/index.ts";
+export type NumberInputRootProps = Omit<FieldProps, "label" | "description"> & Readonly<{
+    value: number | null;
+    onValueChange: (value: number | null) => void;
+    /** How the amount is rendered and parsed inside the control. */
+    format?: Intl.NumberFormatOptions;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** States no prop here owns, projected over the ones that do. */
+    state?: FieldState;
+    name?: string;
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+declare const NumberInputRoot: ({ value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, state, name, id, className, children, }: NumberInputRootProps) => ReactNode;
+export type NumberInputLabelProps = Omit<FieldLabelProps, "requiredness" | "optionalLabel">;
+declare const NumberInputLabel: ({ children, ...props }: NumberInputLabelProps) => ReactNode;
+export type NumberInputGroupProps = Omit<BaseNumberField.Group.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const NumberInputGroup: ({ className, children, ...props }: NumberInputGroupProps) => ReactNode;
+declare const NumberInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+declare const NumberInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type NumberInputInputProps = Omit<BaseNumberField.Input.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const NumberInputInput: ({ className, ...props }: NumberInputInputProps) => ReactNode;
+export type NumberInputStepProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Increase". */
+    label: string;
+    className?: string;
+}>;
+declare const NumberInputDecrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
+declare const NumberInputIncrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
+export type NumberInputPendingProps = Readonly<{
+    className?: string;
+}>;
+declare const NumberInputPending: ({ className, }: NumberInputPendingProps) => ReactNode;
+export type NumberInputErrorProps = Omit<FieldErrorProps, "children">;
+declare const NumberInputError: (props: NumberInputErrorProps) => ReactNode;
+/** The parts of a number input. */
+export type NumberInputParts = Readonly<{
+    Root: typeof NumberInputRoot;
+    Label: typeof NumberInputLabel;
+    Group: typeof NumberInputGroup;
+    Inlay: typeof NumberInputInlay;
+    Affix: typeof NumberInputAffix;
+    Input: typeof NumberInputInput;
+    Decrement: typeof NumberInputDecrement;
+    Increment: typeof NumberInputIncrement;
+    Pending: typeof NumberInputPending;
+    Description: typeof Field.Description;
+    Error: typeof NumberInputError;
+}>;
+/**
+ * The parts of a number input: the field frame, a group carrying the border
+ * with the stepper buttons and the bare control between them. For the ordinary
+ * case, use the `NumberField` shorthand, which is assembled from exactly these
+ * parts. An `Affix` is decoration, so its meaning belongs in the label or
+ * description too. `Error` renders the errors `Root` was given.
+ *
+ * @example
+ * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
+ * 	<NumberInput.Label>Hours</NumberInput.Label>
+ * 	<NumberInput.Group>
+ * 		<NumberInput.Decrement label="Decrease" />
+ * 		<NumberInput.Input aria-roledescription="Number field" />
+ * 		<NumberInput.Increment label="Increase" />
+ * 	</NumberInput.Group>
+ * 	<NumberInput.Error />
+ * </NumberInput.Root>
+ */
+export declare const NumberInput: NumberInputParts;
+export {};
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/number-field/number-input.d.ts.map

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