@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/error-boundary/error-boundary.js

@@ -1,17 +1,16 @@
-import SvgRestartAlt from "../../vendor/@material-design-icons/svg/outlined/restart_alt.js";
 import { Button } from "../button/button.js";
 import { ErrorMessage } from "../error-message/error-message.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { ErrorBoundary } from "react-error-boundary";
 // src/components/error-boundary/error-boundary.tsx
-var defaultFallback = ({ title, description, icon, retryLabel }) => ({ resetErrorBoundary }) => /* @__PURE__ */ jsx(ErrorMessage, {
+var defaultFallback = ({ title, description, icon, retryLabel, retryIcon }) => ({ resetErrorBoundary }) => /* @__PURE__ */ jsx(ErrorMessage, {
 	title,
 	description,
 	icon,
 	action: retryLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
-		icon: SvgRestartAlt,
+		icon: retryIcon,
 		onClick: () => resetErrorBoundary(),
 		children: retryLabel
 	})

package/dist/components/error-message/error-message.d.ts

@@ -7,7 +7,7 @@ export type ErrorMessageProps = StatusPresetProps;
  *
  * @example
  * <ErrorMessage
- * 	title="The declarations could not be loaded"
+ * 	title="The invoices could not be loaded"
  * 	description="Check your connection and try again."
  * 	action={<Button onClick={refetch}>Try again</Button>}
  * />

package/dist/components/error-message/error-message.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <ErrorMessage
-* 	title="The declarations could not be loaded"
+* 	title="The invoices could not be loaded"
 * 	description="Check your connection and try again."
 * 	action={<Button onClick={refetch}>Try again</Button>}
 * />

package/dist/components/error-text/error-text.js

@@ -1,10 +1,10 @@
 import { useErrorCascade } from "./error-cascade.js";
 import error_text_module_default from "./error-text.module.js";
 import { c } from "react/compiler-runtime";
-import { Children } from "react";
-import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
 // src/components/error-text/error-text.tsx
 var messagesOf = (children) => (Array.isArray(children) ? children : [children]).filter((message) => message !== null && message !== void 0 && message !== false && message !== "");
 /**

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

@@ -61,10 +61,10 @@ export type InlineLabelTextProps = RequirednessProps & Readonly<{
  * `fieldLabel` above the row would otherwise carry.
  *
  * @example
- * <BaseField.Label>
- * 	<Checkbox />
+ * <Checkbox.Label>
+ * 	<Checkbox.Control><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox.Control>
  * 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
- * </BaseField.Label>
+ * </Checkbox.Label>
  */
 declare const InlineLabelText: ({ label, fieldLabel, requiredness, optionalLabel, }: InlineLabelTextProps) => ReactNode;
 export type FieldRootProps = BaseField.Root.Props & Readonly<{
@@ -150,9 +150,9 @@ export type FieldIds = Readonly<{
  * wire `aria-labelledby` and `aria-describedby` themselves.
  *
  * @example
- * const { labelId, errorId } = useFieldIds();
+ * const { labelId, errorId } = Field.useIds();
  */
-export declare const useFieldIds: () => FieldIds;
+declare const useFieldIds: () => FieldIds;
 /** The parts of a field. */
 export type FieldParts = Readonly<{
     Root: typeof FieldRoot;

package/dist/components/field/field.js

@@ -4,9 +4,9 @@ import { Spinner } from "../spinner/spinner.js";
 import { FieldRowContext, useFieldGroupLineIds } from "./field-group-context.js";
 import field_module_default from "./field.module.js";
 import { c } from "react/compiler-runtime";
-import { useContext, useId } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useId } from "react";
 import { Field } from "@base-ui/react/field";
 // src/components/field/field.tsx
 var isEmpty = (children) => children === void 0 || children === null || children === false || children === "";
@@ -57,17 +57,17 @@ var FieldRequiredness = (t0) => {
 * `fieldLabel` above the row would otherwise carry.
 *
 * @example
-* <BaseField.Label>
-* 	<Checkbox />
+* <Checkbox.Label>
+* 	<Checkbox.Control><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox.Control>
 * 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
-* </BaseField.Label>
+* </Checkbox.Label>
 */
 var InlineLabelText = (t0) => {
 	const $ = c(13);
 	const { label, fieldLabel, requiredness, optionalLabel } = t0;
 	let t1;
 	if ($[0] !== fieldLabel || $[1] !== requiredness) {
-		t1 = fieldLabel === void 0 && requiredness === "required" && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(RequiredMark, { requiredness })] });
+		t1 = fieldLabel === void 0 && requiredness === "required" && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(RequiredMark, { requiredness })] });
 		$[0] = fieldLabel;
 		$[1] = requiredness;
 		$[2] = t1;
@@ -96,7 +96,7 @@ var InlineLabelText = (t0) => {
 	} else t3 = $[9];
 	let t4;
 	if ($[10] !== t2 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t3] });
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
 		$[10] = t2;
 		$[11] = t3;
 		$[12] = t4;
@@ -400,7 +400,7 @@ var FieldPending = (t0) => {
 * wire `aria-labelledby` and `aria-describedby` themselves.
 *
 * @example
-* const { labelId, errorId } = useFieldIds();
+* const { labelId, errorId } = Field.useIds();
 */
 var useFieldIds = () => {
 	const $ = c(10);
@@ -474,4 +474,4 @@ function _temp(lineId) {
 function _temp2(part) {
 	return part !== "";
 }
-export { Field$1 as Field, useFieldIds };
+export { Field$1 as Field };

package/dist/components/field/index.js

@@ -1,6 +1,6 @@
-import { Field, useFieldIds } from "./field.js";
+import { Field } from "./field.js";
 import { fieldStateAttributes } from "./field-state.js";
 import { optionsLoad } from "./options-load.js";
 import { useFieldFocus } from "./use-field-focus.js";
 import { useFieldState } from "./use-field-state.js";
-export { Field, fieldStateAttributes, optionsLoad, useFieldFocus, useFieldIds, useFieldState };
+export { Field, fieldStateAttributes, optionsLoad, useFieldFocus, useFieldState };

package/dist/components/field/input-parts.js

@@ -1,8 +1,8 @@
 import { useRequiredContext } from "../../lib/use-required-context.js";
 import { Field } from "./field.js";
 import { c } from "react/compiler-runtime";
-import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
 // src/components/field/input-parts.tsx
 /** The context a raw input's `Root` provides its shared parts. */
 var InputPartsContext = createContext(null);

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

@@ -1,4 +1,7 @@
 import { type ReactNode } from "react";
+export type FieldPlaceholderProps = Readonly<{
+    className?: string;
+}>;
 /**
  * A field-shaped placeholder, standing in for a control whose code is still on
  * its way. Holds the label and control heights so the form does not jump when
@@ -7,4 +10,4 @@ import { type ReactNode } from "react";
  * @example
  * <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
  */
-export declare const FieldPlaceholder: () => ReactNode;
+export declare const FieldPlaceholder: ({ className, }: FieldPlaceholderProps) => ReactNode;

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

@@ -1,8 +1,9 @@
 import { Skeleton } from "../skeleton/skeleton.js";
 import field_placeholder_module_default from "./field-placeholder.module.js";
 import { c } from "react/compiler-runtime";
-import { useId } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 // src/components/field-placeholder/field-placeholder.tsx
 var SHAPES = ["single", "split"];
 var shapeIndex = (seed, count) => {
@@ -18,37 +19,51 @@ var shapeIndex = (seed, count) => {
 * @example
 * <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
 */
-var FieldPlaceholder = () => {
-	const $ = c(6);
+var FieldPlaceholder = (t0) => {
+	const $ = c(11);
+	const { className } = t0;
 	const shape = SHAPES[shapeIndex(useId(), SHAPES.length)] ?? "single";
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.label });
-		$[0] = t0;
-	} else t0 = $[0];
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+	if ($[0] !== className) {
+		t1 = clsx(field_placeholder_module_default.placeholder, className);
+		$[0] = className;
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== shape) {
-		t2 = shape === "split" && /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
-		$[2] = shape;
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.label });
+		$[2] = t2;
+	} else t2 = $[2];
 	let t3;
-	if ($[4] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: field_placeholder_module_default.placeholder,
-			children: [t0, /* @__PURE__ */ jsxs("div", {
-				className: field_placeholder_module_default.controls,
-				children: [t1, t2]
-			})]
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== shape) {
+		t4 = shape === "split" && /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[4] = shape;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: field_placeholder_module_default.controls,
+			children: [t3, t4]
+		});
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t1 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t2, t5]
 		});
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	return t3;
+		$[8] = t1;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 };
 export { FieldPlaceholder };

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

@@ -1,8 +1,8 @@
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
 import { Fieldset } from "./fieldset.js";
 import { c } from "react/compiler-runtime";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 // src/components/fieldset/field-group.tsx
 /**
 * Related fields side by side under one legend, with one error for all of

package/dist/components/fieldset/fieldset-root.js

@@ -5,8 +5,8 @@ import { FieldGroupContext } from "../field/field-group-context.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext, useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
 import { Fieldset } from "@base-ui/react/fieldset";
 // src/components/fieldset/fieldset-root.tsx
 var FieldsetContext = createContext(null);

package/dist/components/fieldset/fieldset.js

@@ -3,8 +3,8 @@ import { FieldRowContext } from "../field/field-group-context.js";
 import { FieldsetLegend, FieldsetRoot, useFieldsetContext } from "./fieldset-root.js";
 import fieldset_module_default from "./fieldset.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/fieldset/fieldset.tsx
 var FieldsetDescription = (t0) => {
 	const $ = c(8);

package/dist/components/file-field/file-field.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._dropTarget_ohenx_3 {
+  ._dropTarget_1ap1m_3 {
     --field-fg: var(--sys-color-text);
     --field-muted-fg: var(--sys-color-text-muted);
     --field-placeholder-fg: var(--sys-color-text-placeholder);
@@ -14,33 +14,33 @@
     color: var(--field-fg);
     font: var(--sys-font-body-medium);
   }
-  ._dropTarget_ohenx_3 {
+  ._dropTarget_1ap1m_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._dropTarget_ohenx_3[data-focus-visible] {
+  ._dropTarget_1ap1m_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._dropTarget_ohenx_3 {
+    ._dropTarget_1ap1m_3 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._dropTarget_ohenx_3:hover:not([data-disabled], [data-readonly]), ._dropTarget_ohenx_3[data-focused], ._dropTarget_ohenx_3[data-popup-open] {
+  ._dropTarget_1ap1m_3:hover:not([data-disabled], [data-readonly]), ._dropTarget_1ap1m_3[data-focused], ._dropTarget_1ap1m_3[data-popup-open] {
     border-color: var(--sys-color-primary);
   }
-  ._dropTarget_ohenx_3[data-readonly] {
+  ._dropTarget_1ap1m_3[data-readonly] {
     --field-fg: var(--sys-color-text);
     border-style: dashed;
     border-color: var(--sys-color-outline);
     background: var(--sys-color-surface-high);
     color: var(--field-fg);
   }
-  ._dropTarget_ohenx_3[data-pending] {
+  ._dropTarget_1ap1m_3[data-pending] {
     cursor: progress;
     caret-color: var(--sys-color-text-muted);
   }
-  ._dropTarget_ohenx_3[data-invalid] {
+  ._dropTarget_1ap1m_3[data-invalid] {
     --field-fg: var(--sys-color-error-fg);
     --field-muted-fg: var(--sys-color-error-fg);
     --field-placeholder-fg: var(--sys-color-error-fg);
@@ -48,7 +48,7 @@
     background-color: var(--sys-color-error-bg);
     color: var(--field-fg);
   }
-  ._dropTarget_ohenx_3[data-disabled] {
+  ._dropTarget_1ap1m_3[data-disabled] {
     --field-fg: var(--sys-color-disabled-fg);
     --field-muted-fg: var(--sys-color-disabled-fg);
     --field-placeholder-fg: var(--sys-color-disabled-fg);
@@ -56,12 +56,12 @@
     cursor: not-allowed;
     background: var(--sys-color-disabled-bg);
   }
-  ._dropTarget_ohenx_3 {
+  ._dropTarget_1ap1m_3 {
     position: relative;
     display: flex;
     gap: var(--sys-unit-4);
   }
-  ._dropTarget_ohenx_3 {
+  ._dropTarget_1ap1m_3 {
     flex-direction: column;
     justify-content: center;
     gap: var(--file-field-gap, var(--sys-unit-8));
@@ -70,16 +70,16 @@
     text-align: center;
     cursor: pointer;
   }
-  ._dropTarget_ohenx_3[data-readonly] {
+  ._dropTarget_1ap1m_3[data-readonly] {
     cursor: default;
   }
-  ._dropTarget_ohenx_3[data-drop-target] {
+  ._dropTarget_1ap1m_3[data-drop-target] {
     border-style: dashed;
     border-color: var(--file-field-drop-border, var(--sys-color-primary));
     background: var(--file-field-drop-bg, var(--sys-color-primary-container));
     color: var(--file-field-drop-fg, var(--sys-color-on-primary-container));
   }
-  ._hint_ohenx_82 {
+  ._hint_1ap1m_82 {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
@@ -89,7 +89,11 @@
     overflow-wrap: normal;
     hyphens: auto;
   }
-  ._list_ohenx_92 {
+  ._hintIcon_1ap1m_92 {
+    display: inline-flex;
+    font-size: var(--file-field-hint-icon-size, 1.5em);
+  }
+  ._list_1ap1m_96 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

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

@@ -18,12 +18,20 @@ export type FileFieldProps = FieldProps & Readonly<{
     dropTargetLabel: string;
     /** The prompt inside the drop target, such as "Drag files here". */
     dropHint: string;
+    /** Drawn above `dropHint`, such as an upload icon. */
+    dropIcon?: ReactNode;
     /** The picker button's text, such as "Choose files". */
     chooseLabel: string;
+    /** Drawn before `chooseLabel`, such as an attach icon. */
+    chooseIcon?: ReactNode;
     /** Accessible name of the staged files, such as "Files for attachments". */
     filesLabel: string;
     /** Accessible name of a tile's remove button, such as "Remove". */
     removeLabel: string;
+    /** A tile's remove button icon, such as a cross. */
+    removeIcon: ReactNode;
+    /** Drawn on a tile that has no image preview, such as a file icon. */
+    fileIcon?: ReactNode;
     /** A tile's tooltip, such as `` (name, size) => `${name} (${size})` ``. */
     fileHint: (name: string, size: string) => string;
     /** The error for a file over `maxFileSize`, given its name and the limit. */
@@ -51,9 +59,10 @@ export type FileFieldProps = FieldProps & Readonly<{
  * 	chooseLabel="Choose files"
  * 	filesLabel="Files for attachments"
  * 	removeLabel="Remove"
+ * 	removeIcon={<CloseIcon />}
  * 	fileHint={(name, size) => `${name} (${size})`}
  * 	tooLargeError={(name, maxSize) => `${name} is larger than ${maxSize}.`}
  * 	wrongTypeError={name => `${name} is not an accepted file type.`}
  * />
  */
-export declare const FileField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, onValueChange, onBlur, maxFileSize, accept, multiple, disabled, readOnly, dropTargetLabel, dropHint, chooseLabel, filesLabel, removeLabel, fileHint, tooLargeError, wrongTypeError, className, }: FileFieldProps) => ReactNode;
+export declare const FileField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, onValueChange, onBlur, maxFileSize, accept, multiple, disabled, readOnly, dropTargetLabel, dropHint, dropIcon, chooseLabel, chooseIcon, filesLabel, removeLabel, removeIcon, fileIcon, fileHint, tooLargeError, wrongTypeError, className, }: FileFieldProps) => ReactNode;