@optimum-intelligence/opti-ui 0.0.0-stage → 0.2.0

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,225 @@
+"use client";
+import { usePortalContainer } from "../../utils/portal.js";
+import { cx } from "../../utils/cx.js";
+import { XIcon } from "../../icons/index.js";
+import { IconButton } from "../button/Button.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/drawer/Drawer.tsx
+/**
+* Side panel for inspecting or editing a record without leaving the page:
+* pinned header, scrolling body, optional pinned footer. For a free-form
+* sheet use `Dialog.Content` with `placement`.
+*/
+function Drawer(t0) {
+	const $ = c(57);
+	const { open: openProp, defaultOpen: t1, onOpenChange, trigger, title, eyebrow, description, actions, footer, side: t2, size: t3, dismissible: t4, modal: t5, closeLabel: t6, className, bodyProps, children, ref } = t0;
+	const defaultOpen = t1 === void 0 ? false : t1;
+	const side = t2 === void 0 ? "right" : t2;
+	const size = t3 === void 0 ? "md" : t3;
+	const dismissible = t4 === void 0 ? true : t4;
+	const modal = t5 === void 0 ? true : t5;
+	const closeLabel = t6 === void 0 ? "Close" : t6;
+	const [inner, setInner] = React.useState(defaultOpen);
+	const open = openProp ?? inner;
+	const container = usePortalContainer();
+	let t7;
+	if ($[0] !== dismissible || $[1] !== onOpenChange) {
+		t7 = (next) => {
+			if (!next && !dismissible) return;
+			setInner(next);
+			onOpenChange?.(next);
+		};
+		$[0] = dismissible;
+		$[1] = onOpenChange;
+		$[2] = t7;
+	} else t7 = $[2];
+	let t8;
+	if ($[3] !== trigger) {
+		t8 = trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger });
+		$[3] = trigger;
+		$[4] = t8;
+	} else t8 = $[4];
+	let t9;
+	if ($[5] !== modal) {
+		t9 = modal && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oui-dialog__backdrop" });
+		$[5] = modal;
+		$[6] = t9;
+	} else t9 = $[6];
+	let t10;
+	if ($[7] !== className) {
+		t10 = cx("oui-drawer", className);
+		$[7] = className;
+		$[8] = t10;
+	} else t10 = $[8];
+	let t11;
+	if ($[9] !== eyebrow) {
+		t11 = eyebrow && /* @__PURE__ */ jsx("div", {
+			className: "oui-drawer__eyebrow",
+			children: eyebrow
+		});
+		$[9] = eyebrow;
+		$[10] = t11;
+	} else t11 = $[10];
+	let t12;
+	if ($[11] !== title) {
+		t12 = /* @__PURE__ */ jsx(Dialog.Title, {
+			className: "oui-drawer__title",
+			children: title
+		});
+		$[11] = title;
+		$[12] = t12;
+	} else t12 = $[12];
+	let t13;
+	if ($[13] !== description) {
+		t13 = description && /* @__PURE__ */ jsx(Dialog.Description, {
+			className: "oui-drawer__description",
+			children: description
+		});
+		$[13] = description;
+		$[14] = t13;
+	} else t13 = $[14];
+	let t14;
+	if ($[15] !== t11 || $[16] !== t12 || $[17] !== t13) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-drawer__heading",
+			children: [
+				t11,
+				t12,
+				t13
+			]
+		});
+		$[15] = t11;
+		$[16] = t12;
+		$[17] = t13;
+		$[18] = t14;
+	} else t14 = $[18];
+	const t15 = !dismissible;
+	let t16;
+	if ($[19] !== closeLabel || $[20] !== t15) {
+		t16 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": closeLabel,
+			disabled: t15
+		});
+		$[19] = closeLabel;
+		$[20] = t15;
+		$[21] = t16;
+	} else t16 = $[21];
+	let t17;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(XIcon, {});
+		$[22] = t17;
+	} else t17 = $[22];
+	let t18;
+	if ($[23] !== t16) {
+		t18 = /* @__PURE__ */ jsx(Dialog.Close, {
+			render: t16,
+			children: t17
+		});
+		$[23] = t16;
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== actions || $[26] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-drawer__actions",
+			children: [actions, t18]
+		});
+		$[25] = actions;
+		$[26] = t18;
+		$[27] = t19;
+	} else t19 = $[27];
+	let t20;
+	if ($[28] !== t14 || $[29] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("header", {
+			className: "oui-drawer__header",
+			children: [t14, t19]
+		});
+		$[28] = t14;
+		$[29] = t19;
+		$[30] = t20;
+	} else t20 = $[30];
+	const t21 = bodyProps?.className;
+	let t22;
+	if ($[31] !== t21) {
+		t22 = cx("oui-drawer__body", t21);
+		$[31] = t21;
+		$[32] = t22;
+	} else t22 = $[32];
+	let t23;
+	if ($[33] !== bodyProps || $[34] !== children || $[35] !== t22) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			...bodyProps,
+			className: t22,
+			children
+		});
+		$[33] = bodyProps;
+		$[34] = children;
+		$[35] = t22;
+		$[36] = t23;
+	} else t23 = $[36];
+	let t24;
+	if ($[37] !== footer) {
+		t24 = footer && /* @__PURE__ */ jsx("footer", {
+			className: "oui-drawer__footer",
+			children: footer
+		});
+		$[37] = footer;
+		$[38] = t24;
+	} else t24 = $[38];
+	let t25;
+	if ($[39] !== ref || $[40] !== side || $[41] !== size || $[42] !== t10 || $[43] !== t20 || $[44] !== t23 || $[45] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(Dialog.Popup, {
+			ref,
+			className: t10,
+			"data-side": side,
+			"data-size": size,
+			children: [
+				t20,
+				t23,
+				t24
+			]
+		});
+		$[39] = ref;
+		$[40] = side;
+		$[41] = size;
+		$[42] = t10;
+		$[43] = t20;
+		$[44] = t23;
+		$[45] = t24;
+		$[46] = t25;
+	} else t25 = $[46];
+	let t26;
+	if ($[47] !== container || $[48] !== t25 || $[49] !== t9) {
+		t26 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [t9, t25]
+		});
+		$[47] = container;
+		$[48] = t25;
+		$[49] = t9;
+		$[50] = t26;
+	} else t26 = $[50];
+	let t27;
+	if ($[51] !== modal || $[52] !== open || $[53] !== t26 || $[54] !== t7 || $[55] !== t8) {
+		t27 = /* @__PURE__ */ jsxs(Dialog.Root, {
+			open,
+			modal,
+			onOpenChange: t7,
+			children: [t8, t26]
+		});
+		$[51] = modal;
+		$[52] = open;
+		$[53] = t26;
+		$[54] = t7;
+		$[55] = t8;
+		$[56] = t27;
+	} else t27 = $[56];
+	return t27;
+}
+//#endregion
+export { Drawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["React","Dialog","BaseDialog","cx","usePortalContainer","XIcon","IconButton","DrawerSize","DrawerProps","ref","Ref","HTMLDivElement","open","defaultOpen","onOpenChange","trigger","ReactElement","title","ReactNode","eyebrow","description","actions","footer","side","size","dismissible","modal","closeLabel","className","bodyProps","HTMLAttributes","children","Drawer","t0","$","_c","openProp","t1","t2","t3","t4","t5","t6","undefined","inner","setInner","useState","container","t7","next","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","Symbol","for","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","_c","BaseDialog"],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { cx } from '../../utils/cx';\nimport { usePortalContainer } from '../../utils/portal';\nimport { XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DrawerProps {\n  ref?: React.Ref<HTMLDivElement>;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Element that opens the drawer, e.g. `<Button>Details</Button>`. Omit when `open` is controlled. */\n  trigger?: React.ReactElement;\n  title: React.ReactNode;\n  /** Small label above the title, e.g. the record type. */\n  eyebrow?: React.ReactNode;\n  description?: React.ReactNode;\n  /** Header content next to the close button (edit, delete, a menu…). */\n  actions?: React.ReactNode;\n  /** Pinned to the bottom, for form buttons. */\n  footer?: React.ReactNode;\n  side?: 'right' | 'left';\n  /** Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. */\n  size?: DrawerSize;\n  /**\n   * Set to `false` to block Esc, outside clicks and the close button, e.g.\n   * while a form inside is saving.\n   */\n  dismissible?: boolean;\n  /** `false` leaves the page behind interactive and drops the backdrop. */\n  modal?: boolean;\n  closeLabel?: string;\n  className?: string;\n  /** Props for the scrolling content area. */\n  bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n  children?: React.ReactNode;\n}\n\n/**\n * Side panel for inspecting or editing a record without leaving the page:\n * pinned header, scrolling body, optional pinned footer. For a free-form\n * sheet use `Dialog.Content` with `placement`.\n */\nexport function Drawer({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  eyebrow,\n  description,\n  actions,\n  footer,\n  side = 'right',\n  size = 'md',\n  dismissible = true,\n  modal = true,\n  closeLabel = 'Close',\n  className,\n  bodyProps,\n  children,\n  ref,\n}: DrawerProps) {\n  const [inner, setInner] = React.useState(defaultOpen);\n  const open = openProp ?? inner;\n  const container = usePortalContainer();\n\n  return (\n    <BaseDialog.Root\n      open={open}\n      modal={modal}\n      onOpenChange={(next) => {\n        if (!next && !dismissible) return;\n        setInner(next);\n        onOpenChange?.(next);\n      }}\n    >\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal container={container}>\n        {modal && <BaseDialog.Backdrop className=\"oui-dialog__backdrop\" />}\n        <BaseDialog.Popup ref={ref} className={cx('oui-drawer', className)} data-side={side} data-size={size}>\n          <header className=\"oui-drawer__header\">\n            <div className=\"oui-drawer__heading\">\n              {eyebrow && <div className=\"oui-drawer__eyebrow\">{eyebrow}</div>}\n              <BaseDialog.Title className=\"oui-drawer__title\">{title}</BaseDialog.Title>\n              {description && (\n                <BaseDialog.Description className=\"oui-drawer__description\">{description}</BaseDialog.Description>\n              )}\n            </div>\n            <div className=\"oui-drawer__actions\">\n              {actions}\n              <BaseDialog.Close render={<IconButton aria-label={closeLabel} disabled={!dismissible} />}>\n                <XIcon />\n              </BaseDialog.Close>\n            </div>\n          </header>\n          <div {...bodyProps} className={cx('oui-drawer__body', bodyProps?.className)}>\n            {children}\n          </div>\n          {footer && <footer className=\"oui-drawer__footer\">{footer}</footer>}\n        </BaseDialog.Popup>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    ref?: React.Ref<HTMLDivElement>;
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    /** Center content (default) or align to start. */
+    align?: 'center' | 'start';
+}
+/** Placeholder for empty lists, searches without results and first-run screens. */
+export declare function EmptyState({ icon, title, description, actions, align, className, children, ref, ...props }: EmptyStateProps): React.JSX.Element;

package/dist/components/empty-state/EmptyState.js

@@ -0,0 +1,116 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state/EmptyState.tsx
+/** Placeholder for empty lists, searches without results and first-run screens. */
+function EmptyState(t0) {
+	const $ = c(30);
+	let actions;
+	let children;
+	let className;
+	let description;
+	let icon;
+	let props;
+	let ref;
+	let t1;
+	let title;
+	if ($[0] !== t0) {
+		({icon, title, description, actions, align: t1, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = actions;
+		$[2] = children;
+		$[3] = className;
+		$[4] = description;
+		$[5] = icon;
+		$[6] = props;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = title;
+	} else {
+		actions = $[1];
+		children = $[2];
+		className = $[3];
+		description = $[4];
+		icon = $[5];
+		props = $[6];
+		ref = $[7];
+		t1 = $[8];
+		title = $[9];
+	}
+	const align = t1 === void 0 ? "center" : t1;
+	let t2;
+	if ($[10] !== className) {
+		t2 = cx("oui-empty", className);
+		$[10] = className;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== icon) {
+		t3 = icon && /* @__PURE__ */ jsx("div", {
+			className: "oui-empty__icon",
+			children: icon
+		});
+		$[12] = icon;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== title) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "oui-empty__title",
+			children: title
+		});
+		$[14] = title;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== description) {
+		t5 = description && /* @__PURE__ */ jsx("p", {
+			className: "oui-empty__description",
+			children: description
+		});
+		$[16] = description;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== actions) {
+		t6 = actions && /* @__PURE__ */ jsx("div", {
+			className: "oui-empty__actions",
+			children: actions
+		});
+		$[18] = actions;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== align || $[21] !== children || $[22] !== props || $[23] !== ref || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t2,
+			"data-align": align,
+			...props,
+			children: [
+				t3,
+				t4,
+				t5,
+				children,
+				t6
+			]
+		});
+		$[20] = align;
+		$[21] = children;
+		$[22] = props;
+		$[23] = ref;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t5;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
+	return t7;
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["React","cx","EmptyStateProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","icon","ReactNode","title","description","actions","align","EmptyState","t0","$","_c","children","className","props","t1","undefined","t2","t3","t4","t5","t6","t7","_c"],"sources":["../../../src/components/empty-state/EmptyState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  ref?: React.Ref<HTMLDivElement>;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  /** Center content (default) or align to start. */\n  align?: 'center' | 'start';\n}\n\n/** Placeholder for empty lists, searches without results and first-run screens. */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  actions,\n  align = 'center',\n  className,\n  children,\n  ref,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <div ref={ref} className={cx('oui-empty', className)} data-align={align} {...props}>\n      {icon && <div className=\"oui-empty__icon\">{icon}</div>}\n      <p className=\"oui-empty__title\">{title}</p>\n      {description && <p className=\"oui-empty__description\">{description}</p>}\n      {children}\n      {actions && <div className=\"oui-empty__actions\">{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAOc,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAR;CAAA,IAAAH;CAAA,IAAAY;CAAA,IAAAd;CAAA,IAAAe;CAAA,IAAAX;CAAA,IAAAM,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAAP,MAAAE,OAAAC,aAAAC,SAAAC,OAAAQ,IAAAF,WAAAD,UAAAZ,KAAA,GAAAc,SAAAL;EAUTC,EAAA,KAAAD;EAAAC,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAL;EAAAK,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;EAAAJ,EAAA,KAAAV;EAAAU,EAAA,KAAAK;EAAAL,EAAA,KAAAN;CAAA,OAAA;EAAAE,UAAAI,EAAA;EAAAE,WAAAF,EAAA;EAAAG,YAAAH,EAAA;EAAAL,cAAAK,EAAA;EAAAR,OAAAQ,EAAA;EAAAI,QAAAJ,EAAA;EAAAV,MAAAU,EAAA;EAAAK,KAAAL,EAAA;EAAAN,QAAAM,EAAA;CAAA;CALhB,MAAAH,QAAAQ,OAAAC,KAAAA,IAAA,WAAAD;CAAgB,IAAAE;CAAA,IAAAP,EAAA,QAAAG,WAAA;EAOYI,KAAAtB,GAAG,aAAakB,SAAS;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAR,MAAA;EACjDgB,KAAAhB,QAAQ,oBAAA,OAAA;GAAe,WAAA;GAAmBA,UAAAA;EAAW,CAAA;EAAAQ,EAAA,MAAAR;EAAAQ,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAN,OAAA;EACtDe,KAAA,oBAAA,KAAA;GAAa,WAAA;GAAoBf,UAAAA;EAAU,CAAA;EAAAM,EAAA,MAAAN;EAAAM,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAL,aAAA;EAC1Ce,KAAAf,eAAe,oBAAA,KAAA;GAAa,WAAA;GAA0BA,UAAAA;EAAgB,CAAA;EAAAK,EAAA,MAAAL;EAAAK,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAJ,SAAA;EAEtEe,KAAAf,WAAW,oBAAA,OAAA;GAAe,WAAA;GAAsBA,UAAAA;EAAc,CAAA;EAAAI,EAAA,MAAAJ;EAAAI,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAH,SAAAG,EAAA,QAAAE,YAAAF,EAAA,QAAAI,SAAAJ,EAAA,QAAAV,OAAAU,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EALjEC,KAAA,qBAAA,OAAA;GAAUtB;GAAgB,WAAAiB;GAAwCV,cAAAA;GAAK,GAAMO;GAA7E,UAAA;IACGI;IACDC;IACCC;IACAR;IACAS;GACG;;EAAAX,EAAA,MAAAH;EAAAG,EAAA,MAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAV;EAAAU,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OANNY;AAMM"}

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

@@ -0,0 +1,36 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { Form as BaseForm } from '@base-ui/react/form';
+declare function FieldRoot({ className, ref, ...props }: BaseField.Root.Props): import("react").JSX.Element;
+export interface FieldLabelProps extends BaseField.Label.Props {
+    /** Appends a required marker. */
+    required?: boolean;
+}
+declare function FieldLabel({ className, required, children, ref, ...props }: FieldLabelProps): import("react").JSX.Element;
+declare function FieldDescription({ className, ref, ...props }: BaseField.Description.Props): import("react").JSX.Element;
+declare function FieldError({ className, ref, ...props }: BaseField.Error.Props): import("react").JSX.Element;
+declare function FieldItem({ className, ref, ...props }: BaseField.Item.Props): import("react").JSX.Element;
+/**
+ * Field parts wire up labels, descriptions and validation for any control
+ * inside (Input, Select, Checkbox, Switch, NumberField…).
+ */
+export declare const Field: {
+    Root: typeof FieldRoot;
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+    Item: typeof FieldItem;
+    Validity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
+};
+declare function FieldsetRoot({ className, ref, ...props }: BaseFieldset.Root.Props): import("react").JSX.Element;
+declare function FieldsetLegend({ className, ref, ...props }: BaseFieldset.Legend.Props): import("react").JSX.Element;
+/** Groups related fields under a legend. */
+export declare const Fieldset: {
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+};
+export interface FormProps extends BaseForm.Props {
+}
+/** Form with Base UI validation wiring and vertical field spacing. */
+export declare function Form({ className, ref, ...props }: FormProps): import("react").JSX.Element;
+export {};