@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/radio-group-field/radio-group.css

@@ -0,0 +1,116 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_18uvi_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--radio-group-gap, var(--sys-unit-2));
+  }
+  ._item_18uvi_9 {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--radio-group-item-gap, var(--sys-unit-6));
+    min-block-size: var(--sys-unit-20);
+    cursor: pointer;
+  }
+  ._item_18uvi_9:hover ._radio_18uvi_17 {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._item_18uvi_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._item_18uvi_9:hover ._radio_18uvi_17:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._radio_18uvi_17 {
+    --box-border: var(--sys-color-border);
+    --box-bg: var(--sys-color-surface);
+    --box-fg: var(--sys-color-on-primary);
+    --box-checked-bg: var(--sys-color-primary);
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: var(--checkbox-size, var(--sys-unit-16));
+    block-size: var(--checkbox-size, var(--sys-unit-16));
+    border: 1px solid var(--box-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--box-bg);
+    color: var(--box-fg);
+  }
+  @media not (prefers-reduced-motion) {
+    ._radio_18uvi_17 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._radio_18uvi_17:focus-visible {
+    border-color: var(--sys-color-primary);
+  }
+  ._radio_18uvi_17 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._radio_18uvi_17[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._radio_18uvi_17 {
+    position: relative;
+    border-radius: var(--sys-radius-circle);
+  }
+  ._radio_18uvi_17[data-invalid] {
+    --box-border: var(--sys-color-error-fg);
+    --box-bg: var(--sys-color-error-bg);
+    --box-checked-bg: var(--sys-color-error-fg);
+    --box-fg: var(--sys-color-error-bg);
+  }
+  ._radio_18uvi_17[data-readonly] {
+    --box-border: var(--sys-color-outline);
+    --box-bg: var(--sys-color-surface-high);
+    --box-checked-bg: var(--sys-color-primary-container);
+    --box-fg: var(--sys-color-on-primary-container);
+    border-style: dashed;
+  }
+  ._radio_18uvi_17[data-checked] {
+    --box-border: var(--box-checked-bg);
+    --box-bg: var(--box-checked-bg);
+  }
+  ._radio_18uvi_17[data-disabled] {
+    --box-bg: var(--sys-color-disabled-bg);
+    --box-checked-bg: var(--sys-color-disabled-bg);
+    --box-fg: var(--sys-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  ._indicator_18uvi_84 {
+    display: grid;
+    place-items: center;
+  }
+  ._indicator_18uvi_84 svg {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._indicator_18uvi_84 {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_18uvi_84 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_18uvi_84 {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
+    border-radius: var(--sys-radius-circle);
+    background: currentcolor;
+  }
+  ._indicator_18uvi_84[data-checked] {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_18uvi_84[data-checked] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+}

package/dist/components/radio-group-field/radio-group.d.ts

@@ -0,0 +1,38 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+import { Field } from "../field/index.ts";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
+export type RadioGroupRootProps = FieldsetRootProps;
+declare const RadioGroupGroup: <TValue>({ className, ...props }: BaseRadioGroup.Props<TValue>) => ReactNode;
+declare const RadioGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;
+declare const RadioGroupRadio: ({ className, ...props }: BaseRadio.Root.Props) => ReactNode;
+/** The parts of a radio group. */
+export type RadioGroupParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Group: typeof RadioGroupGroup;
+    Item: typeof RadioGroupItem;
+    Radio: typeof RadioGroupRadio;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a base-ui radio group. The `Root` is a fieldset named by
+ * its `Legend`. For the ordinary case, use `RadioGroupField`.
+ *
+ * @example
+ * <RadioGroup.Root filled={kind !== null}>
+ * 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+ * 	<RadioGroup.Group value={kind} onValueChange={setKind}>
+ * 		<RadioGroup.Item>
+ * 			<RadioGroup.Radio value="direct" />
+ * 			Direct
+ * 		</RadioGroup.Item>
+ * 	</RadioGroup.Group>
+ * </RadioGroup.Root>
+ */
+export declare const RadioGroup: RadioGroupParts;
+export {};

package/dist/components/radio-group-field/radio-group.js

@@ -0,0 +1,158 @@
+import { Field as Field$1 } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
+import radio_group_module_default from "./radio-group.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/components/radio-group-field/radio-group.tsx
+var RadioGroupGroup = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.group, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(RadioGroup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var RadioGroupItem = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.item, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Field.Item, {
+			className: t1,
+			render: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var RadioGroupRadio = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.radio, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[5] = focus;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Radio.Indicator, {
+			keepMounted: true,
+			className: radio_group_module_default.indicator
+		});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Radio.Root, {
+			className: t1,
+			"aria-readonly": void 0,
+			...t2,
+			...props,
+			...focus.props,
+			children: t3
+		});
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* The styled parts of a base-ui radio group. The `Root` is a fieldset named by
+* its `Legend`. For the ordinary case, use `RadioGroupField`.
+*
+* @example
+* <RadioGroup.Root filled={kind !== null}>
+* 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+* 	<RadioGroup.Group value={kind} onValueChange={setKind}>
+* 		<RadioGroup.Item>
+* 			<RadioGroup.Radio value="direct" />
+* 			Direct
+* 		</RadioGroup.Item>
+* 	</RadioGroup.Group>
+* </RadioGroup.Root>
+*/
+var RadioGroup$1 = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: RadioGroupGroup,
+	Item: RadioGroupItem,
+	Radio: RadioGroupRadio,
+	Description: Field$1.Description,
+	Error: Field$1.Error,
+	useIds: Field$1.useIds
+};
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio-group-field/radio-group.module.js

@@ -0,0 +1,12 @@
+import './radio-group.css';// src/components/radio-group-field/radio-group.module.scss
+var group = "_group_18uvi_3";
+var item = "_item_18uvi_9";
+var radio = "_radio_18uvi_17";
+var indicator = "_indicator_18uvi_84";
+var radio_group_module_default = {
+	group,
+	item,
+	radio,
+	indicator
+};
+export { radio_group_module_default as default, group, indicator, item, radio };

package/dist/components/radio-group-field/tsf-radio-group-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type RadioGroupFieldProps } from "./radio-group-field.tsx";
+export type TSFRadioGroupFieldProps = Omit<RadioGroupFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `RadioGroupField` bound to the TanStack Form field it renders in, whose value
+ * is the chosen option's value or `null`. Reach it as `field.RadioGroupField`
+ * inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="kind">
+ * 	{field => <field.RadioGroupField label="Kind" options={kinds} optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFRadioGroupField: (props: TSFRadioGroupFieldProps) => ReactNode;

package/dist/components/radio-group-field/tsf-radio-group-field.js

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { RadioGroupField } from "./radio-group-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/radio-group-field/tsf-radio-group-field.tsx
+/**
+* `RadioGroupField` bound to the TanStack Form field it renders in, whose value
+* is the chosen option's value or `null`. Reach it as `field.RadioGroupField`
+* inside `form.AppField`.
+*
+* @example
+* <form.AppField name="kind">
+* 	{field => <field.RadioGroupField label="Kind" options={kinds} optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFRadioGroupField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField(props.label);
+	let t0;
+	if ($[0] !== field) {
+		t0 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(RadioGroupField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFRadioGroupField };

package/dist/components/search-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./search-field.tsx";
+export * from "./tsf-search-field.tsx";

package/dist/components/search-field/index.js

@@ -0,0 +1,3 @@
+import { SearchField } from "./search-field.js";
+import { TSFSearchField } from "./tsf-search-field.js";
+export { SearchField, TSFSearchField };

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type TextFieldBaseProps, type TextPresetProps } from "../text-field/index.ts";
+/** What a search field takes beside the preset props. */
+export type SearchFieldExtraProps = Pick<TextFieldBaseProps, "labelHidden" | "placeholder"> & Readonly<{
+    /** The clear button's accessible name and tooltip, such as "Clear search". */
+    clearLabel: string;
+}>;
+export type SearchFieldProps = TextPresetProps & SearchFieldExtraProps;
+/**
+ * A search box: a `TextField` with a leading search glyph and the clear button.
+ * `labelHidden` keeps the name for screen readers where the layout carries no
+ * room for a visible label.
+ *
+ * @example
+ * <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" value={search} onValueChange={setSearch} />
+ */
+export declare const SearchField: ({ enterKeyHint, ...props }: SearchFieldProps) => ReactNode;

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

@@ -0,0 +1,45 @@
+import SvgSearch from "../../vendor/@material-design-icons/svg/outlined/search.js";
+import { TextField } from "../text-field/text-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/search-field/search-field.tsx
+/**
+* A search box: a `TextField` with a leading search glyph and the clear button.
+* `labelHidden` keeps the name for screen readers where the layout carries no
+* room for a visible label.
+*
+* @example
+* <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" value={search} onValueChange={setSearch} />
+*/
+var SearchField = (t0) => {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({enterKeyHint: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const enterKeyHint = t1 === void 0 ? "search" : t1;
+	let t2;
+	if ($[3] !== enterKeyHint || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(TextField, {
+			...props,
+			enterKeyHint,
+			type: "search",
+			icon: SvgSearch,
+			clearable: true,
+			autoComplete: "off",
+			spellCheck: false
+		});
+		$[3] = enterKeyHint;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { SearchField };

package/dist/components/search-field/tsf-search-field.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type TSFTextPresetProps } from "../text-field/index.ts";
+import { type SearchFieldExtraProps } from "./search-field.tsx";
+export type TSFSearchFieldProps = TSFTextPresetProps<SearchFieldExtraProps>;
+/**
+ * `SearchField` bound to the TanStack Form field it renders in. Registered as
+ * `field.SearchField`.
+ *
+ * @example
+ * <form.AppField name="query">
+ * 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+ * </form.AppField>
+ */
+export declare const TSFSearchField: (props: TSFSearchFieldProps) => ReactNode;

package/dist/components/search-field/tsf-search-field.js

@@ -0,0 +1,14 @@
+import { connectTextPreset } from "../text-field/connect-text-preset.js";
+import { SearchField } from "./search-field.js";
+// src/components/search-field/tsf-search-field.tsx
+/**
+* `SearchField` bound to the TanStack Form field it renders in. Registered as
+* `field.SearchField`.
+*
+* @example
+* <form.AppField name="query">
+* 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+* </form.AppField>
+*/
+var TSFSearchField = connectTextPreset(SearchField);
+export { TSFSearchField };

package/dist/components/segmented-control-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./segmented-control.tsx";
+export * from "./segmented-control-field.tsx";
+export * from "./tsf-segmented-control-field.tsx";

package/dist/components/segmented-control-field/index.js

@@ -0,0 +1,4 @@
+import { SegmentedControl } from "./segmented-control.js";
+import { SegmentedControlField } from "./segmented-control-field.js";
+import { TSFSegmentedControlField } from "./tsf-segmented-control-field.js";
+export { SegmentedControl, SegmentedControlField, TSFSegmentedControlField };

package/dist/components/segmented-control-field/segmented-control-field.d.ts

@@ -0,0 +1,32 @@
+import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import type { ReactNode } from "react";
+import type { FieldBlurHandler, ChoiceOption, FieldProps } from "../field/index.ts";
+export type SegmentedControlFieldProps = FieldProps & Readonly<{
+    /** The choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    /** The chosen value, or `null` while nothing is chosen. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    onBlur?: FieldBlurHandler;
+    /** The form field's name. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: BaseToggleGroup.Props["orientation"];
+    /** Applied to the field wrapper, so callers can place the group. */
+    className?: string;
+}>;
+/**
+ * The assembled segmented control: a labelled track of options, one pressed at
+ * a time, with a pill that slides to it, then the description and the error.
+ *
+ * @example
+ * <SegmentedControlField
+ * 	label="View"
+ * 	optionalLabel="optional"
+ * 	options={[{ label: "List", value: "list" }, { label: "Board", value: "board" }]}
+ * 	value={view}
+ * 	onValueChange={setView}
+ * />
+ */
+export declare const SegmentedControlField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className, }: SegmentedControlFieldProps) => ReactNode;