@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Field.d.ts

@@ -0,0 +1,281 @@
+import * as React from "react";
+import { Field as Field$1 } from "@base-ui/react/field";
+
+//#region src/components/Field.d.ts
+/**
+ * Props for the Field.Root component.
+ */
+interface FieldRootProps extends React.ComponentPropsWithoutRef<typeof Field$1.Root> {
+  /** Additional CSS class names */
+  className?: string;
+  orientation?: "vertical" | "horizontal" | "responsive";
+}
+/**
+ * Props for the Field.Label component.
+ */
+interface FieldLabelProps extends React.ComponentPropsWithoutRef<typeof Field$1.Label> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Field.Control component.
+ */
+interface FieldControlProps extends React.ComponentPropsWithoutRef<typeof Field$1.Control> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Field.Description component.
+ */
+interface FieldDescriptionProps extends React.ComponentPropsWithoutRef<typeof Field$1.Description> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Field.Error component.
+ */
+interface FieldErrorProps extends React.ComponentPropsWithoutRef<typeof Field$1.Error> {
+  /** Additional CSS class names */
+  className?: string;
+  errors?: Array<{
+    message?: string;
+  } | string | undefined>;
+}
+/**
+ * Props for the Field.Validity component.
+ */
+interface FieldValidityProps extends React.ComponentPropsWithoutRef<typeof Field$1.Validity> {}
+interface FieldSetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {}
+interface FieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+  variant?: "legend" | "label";
+}
+interface FieldContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface FieldTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface FieldSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Container that groups all field parts together.
+ * Provides context for label association and validation state.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Username</Field.Label>
+ *   <Field.Control placeholder="Enter username" />
+ *   <Field.Description>Choose a unique username</Field.Description>
+ * </Field.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/field | Base UI Field}
+ */
+declare function FieldRoot({
+  className,
+  orientation,
+  ref,
+  ...props
+}: FieldRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Accessible label that is automatically associated with the field control.
+ * No need to manually wire up `htmlFor` and `id` attributes.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Email address</Field.Label>
+ *   <Field.Control type="email" />
+ * </Field.Root>
+ * ```
+ */
+declare function FieldLabel({
+  className,
+  ref,
+  ...props
+}: FieldLabelProps & {
+  ref?: React.Ref<HTMLLabelElement>;
+}): React.JSX.Element;
+/**
+ * The input control element. Renders an `<input>` by default.
+ * Can be replaced with other form controls using the `render` prop.
+ *
+ * @example
+ * ```tsx
+ * // Default input
+ * <Field.Control placeholder="Enter text" />
+ *
+ * // With custom input component
+ * <Field.Control render={<Textarea />} />
+ * ```
+ */
+declare function FieldControl({
+  className,
+  ref,
+  ...props
+}: FieldControlProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+/**
+ * Supplementary helper text that describes the field.
+ * Automatically associated with the control for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Password</Field.Label>
+ *   <Field.Control type="password" />
+ *   <Field.Description>Must be at least 8 characters</Field.Description>
+ * </Field.Root>
+ * ```
+ */
+declare function FieldDescription({
+  className,
+  ref,
+  ...props
+}: FieldDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+/**
+ * Displays validation error messages when the field is invalid.
+ * Use the `match` prop to show different messages for different validity states.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Email</Field.Label>
+ *   <Field.Control type="email" required />
+ *   <Field.Error match="valueMissing">Email is required</Field.Error>
+ *   <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
+ * </Field.Root>
+ * ```
+ *
+ * Common `match` values:
+ * - `valueMissing` - Required field is empty
+ * - `typeMismatch` - Value doesn't match input type (e.g., invalid email)
+ * - `tooShort` - Value is shorter than `minLength`
+ * - `tooLong` - Value is longer than `maxLength`
+ * - `patternMismatch` - Value doesn't match the `pattern` regex
+ * - `rangeUnderflow` - Number is less than `min`
+ * - `rangeOverflow` - Number is greater than `max`
+ */
+declare function FieldError({
+  className,
+  errors,
+  children,
+  ref,
+  ...props
+}: FieldErrorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+/**
+ * Renders custom content based on the field's validity state.
+ * Uses a render function that receives the validity state object.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Username</Field.Label>
+ *   <Field.Control required minLength={3} />
+ *   <Field.Validity>
+ *     {(validity) => {
+ *       if (validity.valueMissing) return <span>Username is required</span>;
+ *       if (validity.tooShort) return <span>Username is too short</span>;
+ *       return null;
+ *     }}
+ *   </Field.Validity>
+ * </Field.Root>
+ * ```
+ */
+declare const FieldValidity: React.FC<import("@base-ui/react").FieldValidityProps>;
+declare function FieldSet({
+  className,
+  ref,
+  ...props
+}: FieldSetProps & {
+  ref?: React.Ref<HTMLFieldSetElement>;
+}): React.JSX.Element;
+declare function FieldLegend({
+  className,
+  variant,
+  ref,
+  ...props
+}: FieldLegendProps & {
+  ref?: React.Ref<HTMLLegendElement>;
+}): React.JSX.Element;
+declare function FieldContent({
+  className,
+  ref,
+  ...props
+}: FieldContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function FieldTitle({
+  className,
+  ref,
+  ...props
+}: FieldTitleProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function FieldGroup({
+  className,
+  ref,
+  ...props
+}: FieldGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function FieldSeparator({
+  className,
+  children,
+  ref,
+  ...props
+}: FieldSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A form field component that provides labeling, description, and validation
+ * for form controls. Automatically handles accessibility associations between
+ * labels, inputs, descriptions, and error messages.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Field.Root>
+ *   <Field.Label>Name</Field.Label>
+ *   <Field.Control placeholder="Enter your name" />
+ * </Field.Root>
+ *
+ * // With validation
+ * <Field.Root>
+ *   <Field.Label>Email</Field.Label>
+ *   <Field.Control type="email" required />
+ *   <Field.Error match="valueMissing">Email is required</Field.Error>
+ *   <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
+ *   <Field.Description>We'll never share your email</Field.Description>
+ * </Field.Root>
+ *
+ * // With custom validation
+ * <Field.Root validate={(value) => value === 'admin' ? 'Username taken' : null}>
+ *   <Field.Label>Username</Field.Label>
+ *   <Field.Control required />
+ *   <Field.Error />
+ * </Field.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/field | Base UI Field}
+ */
+declare const Field: typeof FieldRoot & {
+  Root: typeof FieldRoot;
+  Label: typeof FieldLabel;
+  Control: typeof FieldControl;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+  Validity: React.FC<import("@base-ui/react").FieldValidityProps>;
+  Set: typeof FieldSet;
+  Legend: typeof FieldLegend;
+  Content: typeof FieldContent;
+  Title: typeof FieldTitle;
+  Group: typeof FieldGroup;
+  Separator: typeof FieldSeparator;
+};
+//#endregion
+export { Field, FieldContent, FieldContentProps, FieldControl, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldGroup, FieldGroupProps, FieldLabel, FieldLabelProps, FieldLegend, FieldLegendProps, FieldRoot, FieldRootProps, FieldSeparator, FieldSeparatorProps, FieldSet, FieldSetProps, FieldTitle, FieldTitleProps, FieldValidity, FieldValidityProps };

package/dist/components/Field.js

@@ -0,0 +1,274 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/components/Field.tsx
+/**
+* Container that groups all field parts together.
+* Provides context for label association and validation state.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Username</Field.Label>
+*   <Field.Control placeholder="Enter username" />
+*   <Field.Description>Choose a unique username</Field.Description>
+* </Field.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/field | Base UI Field}
+*/
+function FieldRoot({ className = "", orientation = "vertical", ref, ...props }) {
+	const classes = [
+		"field",
+		orientation !== "vertical" && `field--${orientation}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		ref,
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: classes,
+		...props
+	});
+}
+/**
+* Accessible label that is automatically associated with the field control.
+* No need to manually wire up `htmlFor` and `id` attributes.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Email address</Field.Label>
+*   <Field.Control type="email" />
+* </Field.Root>
+* ```
+*/
+function FieldLabel({ className = "", ref, ...props }) {
+	const classes = ["field__label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Field$1.Label, {
+		ref,
+		"data-slot": "field-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* The input control element. Renders an `<input>` by default.
+* Can be replaced with other form controls using the `render` prop.
+*
+* @example
+* ```tsx
+* // Default input
+* <Field.Control placeholder="Enter text" />
+*
+* // With custom input component
+* <Field.Control render={<Textarea />} />
+* ```
+*/
+function FieldControl({ className = "", ref, ...props }) {
+	const classes = ["field__control", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Field$1.Control, {
+		ref,
+		"data-slot": "field-control",
+		className: classes,
+		...props
+	});
+}
+/**
+* Supplementary helper text that describes the field.
+* Automatically associated with the control for accessibility.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Password</Field.Label>
+*   <Field.Control type="password" />
+*   <Field.Description>Must be at least 8 characters</Field.Description>
+* </Field.Root>
+* ```
+*/
+function FieldDescription({ className = "", ref, ...props }) {
+	const classes = ["field__description", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Field$1.Description, {
+		ref,
+		"data-slot": "field-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Displays validation error messages when the field is invalid.
+* Use the `match` prop to show different messages for different validity states.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Email</Field.Label>
+*   <Field.Control type="email" required />
+*   <Field.Error match="valueMissing">Email is required</Field.Error>
+*   <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
+* </Field.Root>
+* ```
+*
+* Common `match` values:
+* - `valueMissing` - Required field is empty
+* - `typeMismatch` - Value doesn't match input type (e.g., invalid email)
+* - `tooShort` - Value is shorter than `minLength`
+* - `tooLong` - Value is longer than `maxLength`
+* - `patternMismatch` - Value doesn't match the `pattern` regex
+* - `rangeUnderflow` - Number is less than `min`
+* - `rangeOverflow` - Number is greater than `max`
+*/
+function FieldError({ className = "", errors, children, ref, ...props }) {
+	const classes = ["field__error", className].filter(Boolean).join(" ");
+	if (errors === void 0) return /* @__PURE__ */ jsx(Field$1.Error, {
+		ref,
+		"data-slot": "field-error",
+		className: classes,
+		...props,
+		children
+	});
+	const messages = [...new Set(errors.map((error) => typeof error === "string" ? error : error?.message).filter(Boolean))];
+	const content = children ?? (messages.length === 1 ? messages[0] : messages.length > 1 ? /* @__PURE__ */ jsx("ul", {
+		className: "field__error-list",
+		children: messages.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
+	}) : null);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "alert",
+		"data-slot": "field-error",
+		className: classes,
+		...props,
+		children: content
+	});
+}
+/**
+* Renders custom content based on the field's validity state.
+* Uses a render function that receives the validity state object.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Username</Field.Label>
+*   <Field.Control required minLength={3} />
+*   <Field.Validity>
+*     {(validity) => {
+*       if (validity.valueMissing) return <span>Username is required</span>;
+*       if (validity.tooShort) return <span>Username is too short</span>;
+*       return null;
+*     }}
+*   </Field.Validity>
+* </Field.Root>
+* ```
+*/
+const FieldValidity = Field$1.Validity;
+function FieldSet({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		ref,
+		"data-slot": "field-set",
+		className: ["field-set", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function FieldLegend({ className = "", variant = "legend", ref, ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		ref,
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: ["field-legend", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function FieldContent({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-content",
+		className: ["field-content", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function FieldTitle({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-label",
+		className: ["field-title", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function FieldGroup({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-group",
+		className: ["field-group", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function FieldSeparator({ className = "", children, ref, ...props }) {
+	const classes = ["field-separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "field-separator",
+		"data-content": Boolean(children),
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "separator",
+			className: "field-separator__line"
+		}), children ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "field-separator-content",
+			className: "field-separator__content",
+			children
+		}) : null]
+	});
+}
+/**
+* A form field component that provides labeling, description, and validation
+* for form controls. Automatically handles accessibility associations between
+* labels, inputs, descriptions, and error messages.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Field.Root>
+*   <Field.Label>Name</Field.Label>
+*   <Field.Control placeholder="Enter your name" />
+* </Field.Root>
+*
+* // With validation
+* <Field.Root>
+*   <Field.Label>Email</Field.Label>
+*   <Field.Control type="email" required />
+*   <Field.Error match="valueMissing">Email is required</Field.Error>
+*   <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
+*   <Field.Description>We'll never share your email</Field.Description>
+* </Field.Root>
+*
+* // With custom validation
+* <Field.Root validate={(value) => value === 'admin' ? 'Username taken' : null}>
+*   <Field.Label>Username</Field.Label>
+*   <Field.Control required />
+*   <Field.Error />
+* </Field.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/field | Base UI Field}
+*/
+const Field = Object.assign(FieldRoot, {
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Control: FieldControl,
+	Description: FieldDescription,
+	Error: FieldError,
+	Validity: FieldValidity,
+	Set: FieldSet,
+	Legend: FieldLegend,
+	Content: FieldContent,
+	Title: FieldTitle,
+	Group: FieldGroup,
+	Separator: FieldSeparator
+});
+//#endregion
+export { Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldRoot, FieldSeparator, FieldSet, FieldTitle, FieldValidity };

package/dist/components/Fieldset.d.ts

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+
+//#region src/components/Fieldset.d.ts
+/**
+ * Props for the Fieldset.Root component.
+ */
+interface FieldsetRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Fieldset$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Fieldset.Legend component.
+ */
+interface FieldsetLegendProps extends Omit<React.ComponentPropsWithoutRef<typeof Fieldset$1.Legend>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Groups the fieldset legend and associated fields.
+ * Renders a `<fieldset>` element.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset.Root>
+ *   <Fieldset.Legend>Contact Information</Fieldset.Legend>
+ *   <Field.Root>
+ *     <Field.Label>Email</Field.Label>
+ *     <Field.Control type="email" />
+ *   </Field.Root>
+ * </Fieldset.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/fieldset | Base UI Fieldset}
+ */
+declare function FieldsetRoot({
+  className,
+  ref,
+  ...props
+}: FieldsetRootProps & {
+  ref?: React.Ref<HTMLFieldSetElement>;
+}): React.JSX.Element;
+/**
+ * Accessible label for the fieldset, automatically associated with it.
+ * Renders a `<div>` element (styled as legend).
+ */
+declare function FieldsetLegend({
+  className,
+  ref,
+  ...props
+}: FieldsetLegendProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A native fieldset element with an easily stylable legend.
+ * Useful for grouping related form controls.
+ *
+ * @example
+ * ```tsx
+ * // Basic fieldset
+ * <Fieldset.Root>
+ *   <Fieldset.Legend>Personal Information</Fieldset.Legend>
+ *   <Field.Root name="firstName">
+ *     <Field.Label>First Name</Field.Label>
+ *     <Field.Control />
+ *   </Field.Root>
+ *   <Field.Root name="lastName">
+ *     <Field.Label>Last Name</Field.Label>
+ *     <Field.Control />
+ *   </Field.Root>
+ * </Fieldset.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With checkbox group
+ * <Fieldset.Root>
+ *   <Fieldset.Legend>Notification Preferences</Fieldset.Legend>
+ *   <CheckboxGroup>
+ *     <label><Checkbox name="email" /> Email</label>
+ *     <label><Checkbox name="sms" /> SMS</label>
+ *   </CheckboxGroup>
+ * </Fieldset.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/fieldset | Base UI Fieldset}
+ */
+declare const Fieldset: {
+  Root: typeof FieldsetRoot;
+  Legend: typeof FieldsetLegend;
+};
+//#endregion
+export { Fieldset, FieldsetLegendProps, FieldsetRootProps };