@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,268 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/Drawer/Drawer.tsx
+const sideToSwipeDirection = {
+	top: "up",
+	right: "right",
+	bottom: "down",
+	left: "left"
+};
+const DrawerSideContext = createContext({
+	side: "right",
+	hasSnapPoints: false
+});
+/**
+* Groups all parts of the drawer and owns its state. Renders no DOM.
+*
+* Wraps Base UI's `Drawer.Root`, deriving `swipeDirection` from `side` (pass
+* `swipeDirection` yourself only to decouple them). Every other root feature
+* passes through: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+* `snapPoints` with `snapPoint`/`defaultSnapPoint`/`onSnapPointChange`,
+* `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
+* `onOpenChangeComplete`, `actionsRef`, and detached triggers via
+* `createDrawerHandle()` payloads.
+*/
+function Drawer$1({ side = "right", swipeDirection, ...rest }) {
+	const hasSnapPoints = (rest.snapPoints?.length ?? 0) > 0;
+	const context = useMemo(() => ({
+		side,
+		hasSnapPoints
+	}), [side, hasSnapPoints]);
+	return /* @__PURE__ */ jsx(DrawerSideContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			swipeDirection: swipeDirection ?? sideToSwipeDirection[side],
+			...rest
+		})
+	});
+}
+Drawer$1.displayName = "Drawer";
+/**
+* Opens the drawer. Renders an unstyled `<button>` and exposes
+* `data-popup-open` while its drawer is open — compose it with Button for
+* the usual look: `<DrawerTrigger render={<Button>Open</Button>} />`.
+*/
+const DrawerTrigger = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Trigger, {
+	ref,
+	...props
+}));
+DrawerTrigger.displayName = "DrawerTrigger";
+/**
+* Closes the drawer. Renders an unstyled `<button>` — compose it with
+* Button for footer actions:
+* `<DrawerClose render={<Button variant="outline">Cancel</Button>} />`.
+*/
+const DrawerClose = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Close, {
+	ref,
+	...props
+}));
+DrawerClose.displayName = "DrawerClose";
+const backdropClasses = "fixed inset-0 z-50 min-h-dvh bg-overlay supports-[-webkit-touch-callout:none]:absolute opacity-[calc(1_-_var(--drawer-swipe-progress,0))] motion-safe:transition-opacity motion-safe:duration-[450ms] motion-safe:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] data-starting-style:opacity-0 data-ending-style:opacity-0";
+const viewportBaseClasses = "pointer-events-none fixed inset-0 z-50 flex";
+const viewportSideClasses = {
+	top: "items-start justify-center",
+	right: "justify-end",
+	bottom: "items-end justify-center",
+	left: "justify-start"
+};
+const popupBaseClasses = "pointer-events-auto relative flex flex-col border-border bg-background font-sans text-foreground shadow-lg outline-none touch-none will-change-transform data-closed:pointer-events-none scale-[calc(1_-_0.05*var(--nested-drawers,0))] before:pointer-events-none before:absolute before:bg-inherit after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-slate-950/5 after:opacity-0 data-nested-drawer-open:after:opacity-100 motion-safe:transition-[transform,scale] motion-safe:duration-[450ms] motion-safe:ease-[cubic-bezier(0.32,0.72,0,1)] motion-safe:after:transition-opacity motion-safe:after:duration-[450ms] data-swiping:select-none data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]";
+const popupSideClasses = {
+	top: "w-full origin-top rounded-b-md border-b before:inset-x-0 before:bottom-full before:h-12 [transform:translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))] data-starting-style:[transform:translateY(calc(-100%_-_2px))] data-ending-style:[transform:translateY(calc(-100%_-_2px))]",
+	right: "h-full origin-right border-l before:inset-y-0 before:left-full before:w-12 [transform:translateX(var(--drawer-swipe-movement-x,0px))] data-starting-style:[transform:translateX(calc(100%_+_2px))] data-ending-style:[transform:translateX(calc(100%_+_2px))]",
+	bottom: "w-full origin-bottom rounded-t-md border-t before:inset-x-0 before:top-full before:h-12 [transform:translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))] data-starting-style:[transform:translateY(calc(100%_+_2px))] data-ending-style:[transform:translateY(calc(100%_+_2px))]",
+	left: "h-full origin-left border-r before:inset-y-0 before:right-full before:w-12 [transform:translateX(var(--drawer-swipe-movement-x,0px))] data-starting-style:[transform:translateX(calc(-100%_-_2px))] data-ending-style:[transform:translateX(calc(-100%_-_2px))]"
+};
+const horizontalSizeClasses = {
+	sm: "w-80 max-w-[calc(100vw_-_3rem)]",
+	md: "w-96 max-w-[calc(100vw_-_3rem)]",
+	lg: "w-[32rem] max-w-[calc(100vw_-_3rem)]",
+	full: "w-screen border-none shadow-none"
+};
+const verticalSizeClasses = {
+	sm: "max-h-[40dvh]",
+	md: "max-h-[75dvh]",
+	lg: "max-h-[90dvh]",
+	full: "h-dvh rounded-none border-none shadow-none"
+};
+const snapPointPaddingClasses = "[padding-bottom:max(0px,calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))]";
+const contentClasses = "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain touch-auto p-6";
+const contentBottomSafeAreaClasses = "pb-[calc(1.5rem_+_env(safe-area-inset-bottom,0px))]";
+const closeClearanceClasses = "[&>[data-drawer-header]]:pr-8 [&>[data-drawer-title]]:pr-8";
+const cornerCloseClasses = "absolute top-4 right-4 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+const handleBaseClasses = "shrink-0 rounded-full bg-slate-300";
+const handleSideClasses = {
+	top: "order-last mx-auto mb-3 h-1 w-10",
+	right: "absolute top-1/2 left-2 h-10 w-1 -translate-y-1/2",
+	bottom: "mx-auto mt-3 h-1 w-10",
+	left: "absolute top-1/2 right-2 h-10 w-1 -translate-y-1/2"
+};
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3.5 3.5 9 9m-9 0 9-9" })
+	});
+}
+/**
+* Class list for the drawer surface itself. Useful when composing Base UI's
+* drawer parts directly (custom viewports, snap-point layouts) while keeping
+* the ArcFusion look.
+*/
+function drawerPopupVariants({ side = "right", size = "md", className } = {}) {
+	const sizeClasses = side === "left" || side === "right" ? horizontalSizeClasses : verticalSizeClasses;
+	return cn(popupBaseClasses, popupSideClasses[side], sizeClasses[size], className);
+}
+/**
+* The drawer surface. Bundles Base UI's Portal, Backdrop, Viewport, Popup,
+* and Content parts into one styled component positioned on the root's
+* `side`; `initialFocus`/`finalFocus` and every other Base UI popup prop
+* pass straight through. Children render inside the scrollable content
+* region while the handle and corner close stay pinned to the frame.
+*/
+const DrawerPopup = forwardRef(({ size = "md", showCloseButton = true, closeLabel = "Close", showHandle = false, showBackdrop = true, keepMounted = false, virtualKeyboard = false, container, className, children, ...rest }, ref) => {
+	const { side, hasSnapPoints } = useContext(DrawerSideContext);
+	const portal = /* @__PURE__ */ jsxs(Drawer.Portal, {
+		keepMounted,
+		container,
+		children: [showBackdrop && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: backdropClasses }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+			className: cn(viewportBaseClasses, viewportSideClasses[side]),
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				ref,
+				className: cn(drawerPopupVariants({
+					side,
+					size
+				}), hasSnapPoints && side === "bottom" && snapPointPaddingClasses, className),
+				...rest,
+				children: [
+					showHandle && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: cn(handleBaseClasses, handleSideClasses[side])
+					}),
+					/* @__PURE__ */ jsx(Drawer.Content, {
+						className: cn(contentClasses, side === "bottom" && contentBottomSafeAreaClasses, showCloseButton && closeClearanceClasses),
+						children
+					}),
+					showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+						"aria-label": closeLabel,
+						className: cornerCloseClasses,
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			})
+		})]
+	});
+	return virtualKeyboard ? /* @__PURE__ */ jsx(Drawer.VirtualKeyboardProvider, { children: portal }) : portal;
+});
+DrawerPopup.displayName = "DrawerPopup";
+/** Groups the title and description with standard spacing at the top of the drawer. */
+const DrawerHeader = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-drawer-header": "",
+	className: cn("flex flex-col gap-1.5", className),
+	...rest
+}));
+DrawerHeader.displayName = "DrawerHeader";
+/**
+* Action row: right-aligned on desktop, stacked with the primary action on
+* top on small screens. As a direct child of the popup it pins to the
+* drawer's bottom edge when the content is shorter than a full-height panel.
+*/
+const DrawerFooter = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end", className),
+	...rest
+}));
+DrawerFooter.displayName = "DrawerFooter";
+/**
+* Labels the drawer — Base UI wires it to the popup's `aria-labelledby`.
+* Renders an `<h2>`; every drawer should have one (or an `aria-label` on
+* the popup) so the panel announces meaningfully.
+*/
+const DrawerTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Drawer.Title, {
+	ref,
+	"data-drawer-title": "",
+	className: cn("font-heading text-xl font-semibold text-foreground", className),
+	...rest
+}));
+DrawerTitle.displayName = "DrawerTitle";
+/** Supporting copy announced when the drawer opens — wired to `aria-describedby`. */
+const DrawerDescription = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Drawer.Description, {
+	ref,
+	className: cn("font-sans text-sm text-muted-foreground", className),
+	...rest
+}));
+DrawerDescription.displayName = "DrawerDescription";
+const swipeAreaSideClasses = {
+	top: "inset-x-0 top-0 h-6",
+	right: "inset-y-0 right-0 w-6",
+	bottom: "inset-x-0 bottom-0 h-6",
+	left: "inset-y-0 left-0 w-6"
+};
+/**
+* Invisible strip along the drawer's edge that opens it with a swipe-in
+* gesture (mobile-navigation pattern). Positions itself on the root's
+* `side` with a 24px hit area — pass `className` to widen it or add a
+* visible affordance as children. Keep a regular `DrawerTrigger` too:
+* edge swipes are invisible to most users and unavailable to keyboards.
+*/
+const DrawerSwipeArea = forwardRef(({ className, ...rest }, ref) => {
+	const { side } = useContext(DrawerSideContext);
+	return /* @__PURE__ */ jsx(Drawer.SwipeArea, {
+		ref,
+		className: cn("fixed z-40", swipeAreaSideClasses[side], className),
+		...rest
+	});
+});
+DrawerSwipeArea.displayName = "DrawerSwipeArea";
+/**
+* Shares drawer state across the app shell so `DrawerIndent` /
+* `DrawerIndentBackground` can react to any drawer opening. Renders no DOM —
+* wrap it around the app root only when using the indent effect.
+*/
+const DrawerProvider = Drawer.Provider;
+/**
+* Keyboard-aware focus and scroll handling for bottom sheets that contain
+* form fields. Prefer the `virtualKeyboard` prop on `DrawerPopup`; this raw
+* part exists for custom compositions and MUST render inside a `Drawer`
+* (it reads the root's context), wrapping the drawer's parts. Exposes
+* `--drawer-keyboard-inset` on the viewport. Renders no DOM.
+*/
+const DrawerVirtualKeyboardProvider = Drawer.VirtualKeyboardProvider;
+/**
+* Creates a handle that connects detached `DrawerTrigger`s (or imperative
+* `open`/`close` calls) to a `Drawer` rendered elsewhere — e.g. opening a
+* drawer from a menu item. Pass it to both as the `handle` prop.
+*/
+const createDrawerHandle = Drawer.createHandle;
+/**
+* Wrapper for the app's main UI inside a `DrawerProvider`; gets
+* `data-active` while any drawer is open. Unstyled on purpose — the app
+* shell owns the effect, e.g.
+* `className="motion-safe:transition-transform data-active:scale-[0.98]"`
+* for the iOS-style recede.
+*/
+const DrawerIndent = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Indent, {
+	ref,
+	...props
+}));
+DrawerIndent.displayName = "DrawerIndent";
+/**
+* Backdrop layer rendered behind `DrawerIndent` (place it just before) so
+* the receded app has something to sit on — style it with `data-active`
+* like the indent itself. Unstyled on purpose.
+*/
+const DrawerIndentBackground = forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+	ref,
+	...props
+}));
+DrawerIndentBackground.displayName = "DrawerIndentBackground";
+//#endregion
+export { Drawer$1 as Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants };

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { Drawer, DrawerClose, DrawerCloseProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, DrawerIndentBackgroundProps, DrawerIndentProps, DrawerPopup, DrawerPopupProps, DrawerPopupVariantsOptions, DrawerProps, DrawerProvider, DrawerSide, DrawerSize, DrawerSwipeArea, DrawerSwipeAreaProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants } from "./Drawer.js";
+export { Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants };

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import { Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants } from "./Drawer.js";
+export { Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants };

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

@@ -0,0 +1,123 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { Field } from "@base-ui/react/field";
+import { Control, FieldPath, FieldValues } from "react-hook-form";
+//#region src/components/Field/Field.d.ts
+type FieldOrientation = "vertical" | "horizontal";
+type BaseFieldRootProps = ComponentPropsWithoutRef<typeof Field.Root>;
+interface FieldProps<TFieldValues extends FieldValues = FieldValues> extends Omit<BaseFieldRootProps, "className" | "name"> {
+  /**
+   * Identifies the field: the submitted name in native forms, the registered
+   * path when connected to React Hook Form. With an explicit `control`, the
+   * name is type-checked against the form's values.
+   */
+  name?: FieldPath<TFieldValues>;
+  /**
+   * React Hook Form `control` for connecting this field explicitly. Inside a
+   * `<Form form={…}>` it is read from context instead, so most fields only
+   * need `name`. A field with a `name` and a reachable control is
+   * "connected": it subscribes to that field's state via `useController`,
+   * shows `FieldError` messages automatically, and wires the `Input` inside
+   * it (value, change/blur handlers, focus ref) with no extra props.
+   */
+  control?: Control<TFieldValues>;
+  /**
+   * Marks the field as required: the label gains a decorative asterisk and
+   * the control is announced as required (`aria-required` when connected —
+   * the schema owns actual enforcement — or the native `required` attribute
+   * in static fields).
+   */
+  required?: boolean;
+  /**
+   * `vertical` (default) stacks label, control, and supporting text.
+   * `horizontal` puts the label in a leading column, baseline-aligned with
+   * the control — for dense, label-left form layouts. Checkbox/switch rows
+   * are a different pattern: wrap the control with `FieldLabel` instead.
+   */
+  orientation?: FieldOrientation;
+  className?: string;
+}
+interface FieldComponent {
+  <TFieldValues extends FieldValues = FieldValues>(props: FieldProps<TFieldValues> & {
+    ref?: Ref<HTMLDivElement>;
+  }): ReactNode;
+  displayName?: string;
+}
+/**
+ * Labelling + validation wrapper for a single form control, built on Base UI's
+ * Field. It associates `FieldLabel`, `FieldDescription`, and `FieldError`
+ * with the control automatically (ids, `aria-describedby`) and exposes state
+ * data-attributes (`data-invalid`, `data-touched`, `data-dirty`,
+ * `data-filled`, `data-focused`) on every part for styling.
+ *
+ * Give it a `name` inside `<Form form={…}>` (or pass `control`) to connect it
+ * to React Hook Form — validation state then flows in from the form and the
+ * `Input` inside is wired automatically. Without a form library it works as a
+ * native field: constraint attributes plus the `validate`/`validationMode`
+ * props drive `FieldError` via its `match` prop.
+ */
+declare const Field$1: FieldComponent;
+interface FieldLabelVariantsOptions {
+  className?: string;
+}
+/**
+ * Class list for an element styled as a field label — for labelling controls
+ * that live outside a `Field` (e.g. a filter Select in a toolbar) so every
+ * label in the product shares one look.
+ */
+declare function fieldLabelVariants({ className }?: FieldLabelVariantsOptions): string;
+interface FieldLabelProps extends Omit<ComponentPropsWithoutRef<typeof Field.Label>, "className"> {
+  className?: string;
+}
+/**
+ * Visible label, automatically associated with the field's control — clicking
+ * it focuses the control. When the `Field` is `required`, a decorative
+ * asterisk (hidden from assistive technology, which hears the control's
+ * required state instead) is appended. For checkbox/radio/switch rows, wrap
+ * the control instead: `<FieldLabel><Switch /> Notifications</FieldLabel>`.
+ * When the control is button-based (Select, Combobox triggers), pass
+ * `nativeLabel={false}` — the label then renders as a `<div>` wired via
+ * `aria-labelledby`, so hovering or clicking it doesn't act on the button.
+ */
+declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+interface FieldDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Field.Description>, "className"> {
+  className?: string;
+}
+/**
+ * Persistent supporting copy for the field, announced via `aria-describedby`.
+ * It stays visible while an error shows — the hint is exactly what the user
+ * needs to fix the problem. Order it in the children wherever the design
+ * calls for (before or after the control); the association is automatic.
+ */
+declare const FieldDescription: import("react").ForwardRefExoticComponent<FieldDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<typeof Field.Error>, "className"> {
+  className?: string;
+}
+/**
+ * Validation message for the field, wired into `aria-describedby` and
+ * announced on appearance (`role="alert"`). In a connected field it renders
+ * the form error automatically — the message (or a list when
+ * `criteriaMode: "all"` reports several), shown exactly while the field is
+ * invalid; `children` replace the message text. In static fields it follows
+ * Base UI's native behavior: `match` picks a ValidityState condition (e.g.
+ * `match="valueMissing"`) and `children` provide the message.
+ */
+declare const FieldError: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface FieldItemProps extends Omit<ComponentPropsWithoutRef<typeof Field.Item>, "className"> {
+  className?: string;
+}
+/**
+ * Groups one option of a checkbox or radio group with its own label and
+ * description — inside it, `FieldLabel`/`FieldDescription` attach to that
+ * option's control instead of the whole field. Compose with `Fieldset`
+ * (legend = the group's name) per option.
+ */
+declare const FieldItem: import("react").ForwardRefExoticComponent<FieldItemProps & import("react").RefAttributes<HTMLDivElement>>;
+type FieldValidityProps = ComponentPropsWithoutRef<typeof Field.Validity>;
+/**
+ * Render-prop over the field's native ValidityState — for custom validity UI
+ * such as inline requirement checklists. Renders no element of its own.
+ * Base UI's `Field.Validity`, re-exported unchanged.
+ */
+declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
+//#endregion
+export { Field$1 as Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldLabelVariantsOptions, FieldOrientation, FieldProps, FieldValidity, FieldValidityProps, fieldLabelVariants };

package/dist/components/Field/Field.js

@@ -0,0 +1,241 @@
+import { cn } from "../../lib/cn.js";
+import { FieldContext } from "./FieldContext.js";
+import { forwardRef, useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/Field/Field.tsx
+const orientationClasses = {
+	vertical: "flex min-w-0 flex-col items-stretch gap-1.5",
+	horizontal: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1.5"
+};
+function orientationAttribute(orientation) {
+	return { "data-orientation": orientation };
+}
+const EMPTY_MESSAGES = [];
+function StaticField({ forwardedRef, control: _control, required = false, orientation = "vertical", invalid, className, ...rest }) {
+	const contextValue = useMemo(() => ({
+		required,
+		invalid: invalid ?? false,
+		control: null,
+		errorMessage: null,
+		errorMessages: EMPTY_MESSAGES
+	}), [required, invalid]);
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			ref: forwardedRef,
+			invalid,
+			className: cn(orientationClasses[orientation], className),
+			...orientationAttribute(orientation),
+			...rest
+		})
+	});
+}
+function ConnectedField({ forwardedRef, control, name, required = false, orientation = "vertical", disabled, invalid, touched, dirty, className, ...rest }) {
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const resolvedInvalid = invalid ?? Boolean(fieldState.error);
+	const errorMessage = fieldState.error?.message ?? null;
+	const errorMessages = useMemo(() => {
+		const error = fieldState.error;
+		if (!error) return EMPTY_MESSAGES;
+		const messages = /* @__PURE__ */ new Set();
+		if (error.message) messages.add(error.message);
+		if (error.types) {
+			for (const typeMessage of Object.values(error.types)) if (typeof typeMessage === "string") messages.add(typeMessage);
+			else if (Array.isArray(typeMessage)) {
+				for (const message of typeMessage) if (typeof message === "string") messages.add(message);
+			}
+		}
+		return [...messages];
+	}, [fieldState.error]);
+	const contextValue = useMemo(() => ({
+		required,
+		invalid: resolvedInvalid,
+		control: {
+			name: field.name,
+			value: field.value,
+			disabled: field.disabled || disabled || void 0,
+			onChange: field.onChange,
+			onBlur: field.onBlur,
+			ref: field.ref
+		},
+		errorMessage,
+		errorMessages
+	}), [
+		required,
+		resolvedInvalid,
+		field.name,
+		field.value,
+		field.disabled,
+		field.onChange,
+		field.onBlur,
+		field.ref,
+		disabled,
+		errorMessage,
+		errorMessages
+	]);
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			ref: forwardedRef,
+			name: field.name,
+			invalid: resolvedInvalid,
+			touched: touched ?? fieldState.isTouched,
+			dirty: dirty ?? fieldState.isDirty,
+			disabled,
+			className: cn(orientationClasses[orientation], className),
+			...orientationAttribute(orientation),
+			...rest
+		})
+	});
+}
+const FieldImpl = forwardRef((props, ref) => {
+	const formContext = useFormContext();
+	return props.name != null && (props.control ?? formContext) != null ? /* @__PURE__ */ jsx(ConnectedField, {
+		...props,
+		forwardedRef: ref
+	}) : /* @__PURE__ */ jsx(StaticField, {
+		...props,
+		forwardedRef: ref
+	});
+});
+FieldImpl.displayName = "Field";
+/**
+* Labelling + validation wrapper for a single form control, built on Base UI's
+* Field. It associates `FieldLabel`, `FieldDescription`, and `FieldError`
+* with the control automatically (ids, `aria-describedby`) and exposes state
+* data-attributes (`data-invalid`, `data-touched`, `data-dirty`,
+* `data-filled`, `data-focused`) on every part for styling.
+*
+* Give it a `name` inside `<Form form={…}>` (or pass `control`) to connect it
+* to React Hook Form — validation state then flows in from the form and the
+* `Input` inside is wired automatically. Without a form library it works as a
+* native field: constraint attributes plus the `validate`/`validationMode`
+* props drive `FieldError` via its `match` prop.
+*/
+const Field$1 = FieldImpl;
+Field$1.displayName = "Field";
+const labelClasses = "font-sans text-sm font-medium text-foreground data-disabled:opacity-50";
+/**
+* Class list for an element styled as a field label — for labelling controls
+* that live outside a `Field` (e.g. a filter Select in a toolbar) so every
+* label in the product shares one look.
+*/
+function fieldLabelVariants({ className } = {}) {
+	return cn(labelClasses, className);
+}
+/**
+* Visible label, automatically associated with the field's control — clicking
+* it focuses the control. When the `Field` is `required`, a decorative
+* asterisk (hidden from assistive technology, which hears the control's
+* required state instead) is appended. For checkbox/radio/switch rows, wrap
+* the control instead: `<FieldLabel><Switch /> Notifications</FieldLabel>`.
+* When the control is button-based (Select, Combobox triggers), pass
+* `nativeLabel={false}` — the label then renders as a `<div>` wired via
+* `aria-labelledby`, so hovering or clicking it doesn't act on the button.
+*/
+const FieldLabel = forwardRef(({ className, children, nativeLabel, render, ...rest }, ref) => {
+	const context = useContext(FieldContext);
+	return /* @__PURE__ */ jsxs(Field.Label, {
+		ref,
+		nativeLabel,
+		render: render ?? (nativeLabel === false ? /* @__PURE__ */ jsx("div", {}) : void 0),
+		className: cn(labelClasses, className),
+		...rest,
+		children: [children, context?.required ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "ms-0.5 text-destructive",
+			children: "*"
+		}) : null]
+	});
+});
+FieldLabel.displayName = "FieldLabel";
+const descriptionClasses = "col-start-2 font-sans text-xs text-muted-foreground data-disabled:opacity-50";
+/**
+* Persistent supporting copy for the field, announced via `aria-describedby`.
+* It stays visible while an error shows — the hint is exactly what the user
+* needs to fix the problem. Order it in the children wherever the design
+* calls for (before or after the control); the association is automatic.
+*/
+const FieldDescription = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Field.Description, {
+	ref,
+	className: cn(descriptionClasses, className),
+	...rest
+}));
+FieldDescription.displayName = "FieldDescription";
+const errorClasses = "col-start-2 flex items-start gap-1.5 font-sans text-xs font-medium text-error-700 motion-safe:transition-opacity motion-safe:duration-150 motion-safe:data-starting-style:opacity-0";
+function ErrorIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "mt-px size-3.5 shrink-0",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+		]
+	});
+}
+/**
+* Validation message for the field, wired into `aria-describedby` and
+* announced on appearance (`role="alert"`). In a connected field it renders
+* the form error automatically — the message (or a list when
+* `criteriaMode: "all"` reports several), shown exactly while the field is
+* invalid; `children` replace the message text. In static fields it follows
+* Base UI's native behavior: `match` picks a ValidityState condition (e.g.
+* `match="valueMissing"`) and `children` provide the message.
+*/
+const FieldError = forwardRef(({ className, children, match, ...rest }, ref) => {
+	const context = useContext(FieldContext);
+	const connected = context?.control != null;
+	const connectedMessage = connected && context ? context.errorMessages.length > 1 ? /* @__PURE__ */ jsx("ul", {
+		className: "flex list-disc flex-col gap-0.5 ps-4",
+		children: context.errorMessages.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
+	}) : context.errorMessage : void 0;
+	const content = children ?? connectedMessage;
+	const resolvedMatch = match ?? (connected && context ? context.invalid && content != null : void 0);
+	return /* @__PURE__ */ jsx(Field.Error, {
+		ref,
+		role: "alert",
+		match: resolvedMatch,
+		className: cn(errorClasses, className),
+		...rest,
+		children: content != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ErrorIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0",
+			children: content
+		})] }) : void 0
+	});
+});
+FieldError.displayName = "FieldError";
+/**
+* Groups one option of a checkbox or radio group with its own label and
+* description — inside it, `FieldLabel`/`FieldDescription` attach to that
+* option's control instead of the whole field. Compose with `Fieldset`
+* (legend = the group's name) per option.
+*/
+const FieldItem = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Field.Item, {
+	ref,
+	className: cn("flex min-w-0 flex-col gap-1", className),
+	...rest
+}));
+FieldItem.displayName = "FieldItem";
+/**
+* Render-prop over the field's native ValidityState — for custom validity UI
+* such as inline requirement checklists. Renders no element of its own.
+* Base UI's `Field.Validity`, re-exported unchanged.
+*/
+const FieldValidity = Field.Validity;
+//#endregion
+export { Field$1 as Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, fieldLabelVariants };