@yamada-ui/react/dist/esm/components/fieldset/fieldset.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useSplitChildren } from "../../utils/children.js";
import { createContext as createContext$1 } from "../../utils/context.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { fieldsetStyle } from "./fieldset.style.js";
import { useId, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/fieldset/fieldset.tsx
const [FieldsetContext, useFieldsetContext] = createContext$1({
	name: "FieldsetContext",
	strict: false
});
const { PropsContext: FieldsetPropsContext, usePropsContext: useFieldsetPropsContext, withContext, withProvider } = createSlotComponent("fieldset", fieldsetStyle);
/**
* `Fieldset` is a component used to group multiple controls.
*
* @see https://yamada-ui.com/docs/components/fieldset
*/
const FieldsetRoot = withProvider(({ id, children, disabled, errorMessage, helperMessage, invalid, legend, readOnly, required, contentProps, errorMessageProps, headerProps, helperMessageProps, legendProps,...rest }) => {
	const uuid = useId();
	const [omittedChildren, customLegend, customHeader, customContent, customHelperMessage, customErrorMessage] = useSplitChildren(children, FieldsetLegend, FieldsetHeader, FieldsetContent, FieldsetHelperMessage, FieldsetErrorMessage);
	id ??= uuid;
	return /* @__PURE__ */ jsx(FieldsetContext, {
		value: useMemo(() => ({
			id,
			disabled,
			invalid,
			readOnly,
			required
		}), [
			id,
			disabled,
			invalid,
			readOnly,
			required
		]),
		children: /* @__PURE__ */ jsxs(styled.fieldset, {
			...rest,
			children: [
				customHeader || /* @__PURE__ */ jsxs(FieldsetHeader, {
					...headerProps,
					children: [customLegend || (legend ? /* @__PURE__ */ jsx(FieldsetLegend, {
						...legendProps,
						children: legend
					}) : null), customHelperMessage || (helperMessage ? /* @__PURE__ */ jsx(FieldsetHelperMessage, {
						...helperMessageProps,
						children: helperMessage
					}) : null)]
				}),
				customContent || /* @__PURE__ */ jsx(FieldsetContent, {
					...contentProps,
					children: omittedChildren
				}),
				customErrorMessage || (errorMessage ? /* @__PURE__ */ jsx(FieldsetErrorMessage, {
					...errorMessageProps,
					children: errorMessage
				}) : null)
			]
		})
	});
}, "root")();
const FieldsetLegend = withContext("legend", "legend")(void 0, (props) => {
	const { id, disabled, invalid } = useFieldsetContext() ?? {};
	return {
		id,
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		"data-invalid": (0, utils_exports.dataAttr)(invalid),
		...props
	};
});
const FieldsetHeader = withContext("div", "header")();
const FieldsetContent = withContext("div", "content")();
const FieldsetHelperMessage = withContext("span", "helperMessage")(void 0, (props) => {
	const { id } = useFieldsetContext() ?? {};
	return {
		"aria-describedby": id,
		...props
	};
});
const FieldsetErrorMessage = withContext((props) => {
	const { invalid } = useFieldsetContext() ?? {};
	return /* @__PURE__ */ jsx(styled.span, {
		"aria-live": invalid ? "polite" : void 0,
		hidden: !invalid,
		...props
	});
}, "errorMessage")();

//#endregion
export { FieldsetContent, FieldsetContext, FieldsetErrorMessage, FieldsetHeader, FieldsetHelperMessage, FieldsetLegend, FieldsetPropsContext, FieldsetRoot, useFieldsetContext, useFieldsetPropsContext };
//# sourceMappingURL=fieldset.js.map