@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

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

@@ -0,0 +1,43 @@
+//#region src/components/Field/FieldContext.d.ts
+/**
+ * Control wiring a connected `Field` provides to the form control inside it.
+ * The shape mirrors React Hook Form's `field` object from `useController`,
+ * kept structural so consumers of the context never import react-hook-form.
+ */
+interface FieldControlProps {
+  /** Field name registered with the form. */
+  name: string;
+  /** Current field value from form state. */
+  value: unknown;
+  /** Whether react-hook-form marked the field disabled (form- or field-level). */
+  disabled?: boolean;
+  /** Change handler — accepts either a change event or a raw value. */
+  onChange: (eventOrValue: unknown) => void;
+  /** Blur handler — marks the field as touched. */
+  onBlur: () => void;
+  /** Ref callback used for focus management (e.g. focus-first-error on submit). */
+  ref: (instance: unknown) => void;
+}
+/**
+ * Control wiring published by the closest connected `Field`, or `null` when
+ * the component is not inside one. `Input` consumes this automatically; use
+ * it to connect controls that don't yet, e.g. a Select:
+ *
+ *   function PlanSelect(props: SelectProps<string>) {
+ *     const control = useFieldControl();
+ *     return (
+ *       <Select
+ *         value={control?.value as string}
+ *         onValueChange={control?.onChange}
+ *         inputRef={control?.ref}
+ *         {...props}
+ *       />
+ *     );
+ *   }
+ *
+ * React Hook Form's `onChange` accepts raw values, so Base UI `onValueChange`
+ * callbacks can be passed straight through.
+ */
+declare function useFieldControl(): FieldControlProps | null;
+//#endregion
+export { FieldControlProps, useFieldControl };

package/dist/components/Field/FieldContext.js

@@ -0,0 +1,28 @@
+import { createContext, useContext } from "react";
+//#region src/components/Field/FieldContext.ts
+const FieldContext = createContext(null);
+/**
+* Control wiring published by the closest connected `Field`, or `null` when
+* the component is not inside one. `Input` consumes this automatically; use
+* it to connect controls that don't yet, e.g. a Select:
+*
+*   function PlanSelect(props: SelectProps<string>) {
+*     const control = useFieldControl();
+*     return (
+*       <Select
+*         value={control?.value as string}
+*         onValueChange={control?.onChange}
+*         inputRef={control?.ref}
+*         {...props}
+*       />
+*     );
+*   }
+*
+* React Hook Form's `onChange` accepts raw values, so Base UI `onValueChange`
+* callbacks can be passed straight through.
+*/
+function useFieldControl() {
+	return useContext(FieldContext)?.control ?? null;
+}
+//#endregion
+export { FieldContext, useFieldControl };

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

@@ -0,0 +1,3 @@
+import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldLabelVariantsOptions, FieldOrientation, FieldProps, FieldValidity, FieldValidityProps, fieldLabelVariants } from "./Field.js";
+import { FieldControlProps, useFieldControl } from "./FieldContext.js";
+export { Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, fieldLabelVariants, useFieldControl };

package/dist/components/Field/index.js

@@ -0,0 +1,3 @@
+import { useFieldControl } from "./FieldContext.js";
+import { Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, fieldLabelVariants } from "./Field.js";
+export { Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, fieldLabelVariants, useFieldControl };

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/Fieldset/Fieldset.d.ts
+interface FieldsetProps extends Omit<ComponentPropsWithoutRef<typeof Fieldset.Root>, "className"> {
+  className?: string;
+}
+/**
+ * Groups related fields under one shared `FieldsetLegend` — required for
+ * radio and checkbox groups (WCAG 1.3.1), useful for form sections like
+ * "Billing details". Renders a native `<fieldset>`, so `disabled` disables
+ * every control inside it at once; with React Hook Form, note that disabling
+ * here is visual/interactive only — schema validation still runs, so also
+ * disable or exclude those fields in the form when they shouldn't block
+ * submission.
+ */
+declare const Fieldset$1: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+type FieldsetLegendVariant = "section" | "label";
+interface FieldsetLegendProps extends Omit<ComponentPropsWithoutRef<typeof Fieldset.Legend>, "className"> {
+  /**
+   * `section` (default) styles the legend as a form-section heading;
+   * `label` matches `FieldLabel` for radio/checkbox groups, so the group
+   * caption reads like the labels of the fields around it.
+   */
+  variant?: FieldsetLegendVariant;
+  className?: string;
+}
+/**
+ * The fieldset's caption, automatically associated with the group for
+ * assistive technology. Keep it short — some screen readers repeat the
+ * legend before every control in the group.
+ */
+declare const FieldsetLegend: import("react").ForwardRefExoticComponent<FieldsetLegendProps & import("react").RefAttributes<HTMLDivElement>>;
+interface FieldsetDescriptionProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "className"> {
+  className?: string;
+}
+/**
+ * Supporting copy for the whole group, placed right after the legend.
+ * Visible text content read in sequence — unlike `FieldDescription` it is
+ * not wired into any control's `aria-describedby`.
+ */
+declare const FieldsetDescription: import("react").ForwardRefExoticComponent<FieldsetDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Fieldset$1 as Fieldset, FieldsetDescription, FieldsetDescriptionProps, FieldsetLegend, FieldsetLegendProps, FieldsetLegendVariant, FieldsetProps };

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/Fieldset/Fieldset.tsx
+/**
+* Groups related fields under one shared `FieldsetLegend` — required for
+* radio and checkbox groups (WCAG 1.3.1), useful for form sections like
+* "Billing details". Renders a native `<fieldset>`, so `disabled` disables
+* every control inside it at once; with React Hook Form, note that disabling
+* here is visual/interactive only — schema validation still runs, so also
+* disable or exclude those fields in the form when they shouldn't block
+* submission.
+*/
+const Fieldset$1 = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Fieldset.Root, {
+	ref,
+	className: cn("flex min-w-0 flex-col gap-4", className),
+	...rest
+}));
+Fieldset$1.displayName = "Fieldset";
+const legendVariantClasses = {
+	section: "font-heading text-lg font-semibold text-foreground",
+	label: "font-sans text-sm font-medium text-foreground"
+};
+/**
+* The fieldset's caption, automatically associated with the group for
+* assistive technology. Keep it short — some screen readers repeat the
+* legend before every control in the group.
+*/
+const FieldsetLegend = forwardRef(({ variant = "section", className, ...rest }, ref) => /* @__PURE__ */ jsx(Fieldset.Legend, {
+	ref,
+	className: cn(legendVariantClasses[variant], "data-disabled:opacity-50", className),
+	...rest
+}));
+FieldsetLegend.displayName = "FieldsetLegend";
+/**
+* Supporting copy for the whole group, placed right after the legend.
+* Visible text content read in sequence — unlike `FieldDescription` it is
+* not wired into any control's `aria-describedby`.
+*/
+const FieldsetDescription = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("font-sans text-sm text-muted-foreground in-data-disabled:opacity-50", className),
+	...rest
+}));
+FieldsetDescription.displayName = "FieldsetDescription";
+//#endregion
+export { Fieldset$1 as Fieldset, FieldsetDescription, FieldsetLegend };

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

@@ -0,0 +1,2 @@
+import { Fieldset, FieldsetDescription, FieldsetDescriptionProps, FieldsetLegend, FieldsetLegendProps, FieldsetLegendVariant, FieldsetProps } from "./Fieldset.js";
+export { Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps };

package/dist/components/Fieldset/index.js

@@ -0,0 +1,2 @@
+import { Fieldset, FieldsetDescription, FieldsetLegend } from "./Fieldset.js";
+export { Fieldset, FieldsetDescription, FieldsetLegend };

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { Form } from "@base-ui/react/form";
+//#region src/components/Form/Form.d.ts
+type BaseFormProps = ComponentPropsWithoutRef<typeof Form>;
+interface FormProps<TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues> extends Omit<BaseFormProps, "className"> {
+  /**
+   * The `useForm` return value. Providing it switches the form to React Hook
+   * Form mode: children get the form context (so `<Field name="…">` connects
+   * with no extra props), submission runs through `handleSubmit`, and native
+   * constraint validation is turned off (`noValidate`) so the schema is the
+   * single source of truth. Omit it for a native Base UI form (constraint
+   * validation, the `errors` server-error map, `onFormSubmit`).
+   */
+  form?: UseFormReturn<TFieldValues, any, TTransformedValues>;
+  /**
+   * Called with the parsed values when submission passes validation — with a
+   * Zod resolver this is the schema's output type. React Hook Form focuses
+   * the first invalid control when validation fails (`shouldFocusError`).
+   */
+  onValidSubmit?: SubmitHandler<TTransformedValues>;
+  /** Called with the field errors when submission fails validation. */
+  onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+  className?: string;
+}
+interface FormComponent {
+  <TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues>(props: FormProps<TFieldValues, TTransformedValues> & {
+    ref?: Ref<HTMLFormElement>;
+  }): ReactNode;
+  displayName?: string;
+}
+/**
+ * The form element for both worlds. With `form={useForm(…)}` it becomes the
+ * React Hook Form shell — provider, `handleSubmit`, and `noValidate` in one:
+ *
+ *   const schema = z.object({ email: z.email("Enter a valid email") });
+ *   const form = useForm({ resolver: zodResolver(schema), mode: "onTouched" });
+ *
+ *   <Form form={form} onValidSubmit={(data) => save(data)}>
+ *     <Field name="email">
+ *       <FieldLabel>Email</FieldLabel>
+ *       <Input type="email" autoComplete="email" />
+ *       <FieldError />
+ *     </Field>
+ *     <Button type="submit">Save</Button>
+ *   </Form>
+ *
+ * Without `form` it is Base UI's native form: constraint validation drives
+ * `FieldError` via `match`, `errors` maps server errors onto fields by name,
+ * and `onFormSubmit` receives values as a plain object.
+ */
+declare const Form$1: FormComponent;
+//#endregion
+export { Form$1 as Form, FormProps };

package/dist/components/Form/Form.js

@@ -0,0 +1,57 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { FormProvider } from "react-hook-form";
+import { Form } from "@base-ui/react/form";
+//#region src/components/Form/Form.tsx
+const formClasses = "flex w-full min-w-0 flex-col gap-6";
+function noopSubmit() {}
+const FormImpl = forwardRef(({ form, onValidSubmit, onInvalidSubmit, onSubmit, noValidate, className, ...rest }, ref) => {
+	if (form == null) return /* @__PURE__ */ jsx(Form, {
+		ref,
+		onSubmit,
+		noValidate,
+		className: cn(formClasses, className),
+		...rest
+	});
+	const handleSubmit = (event) => {
+		onSubmit?.(event);
+		if (event.defaultPrevented) return;
+		form.handleSubmit(onValidSubmit ?? noopSubmit, onInvalidSubmit)(event);
+	};
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx(Form, {
+			ref,
+			onSubmit: handleSubmit,
+			noValidate: noValidate ?? true,
+			className: cn(formClasses, className),
+			...rest
+		})
+	});
+});
+FormImpl.displayName = "Form";
+/**
+* The form element for both worlds. With `form={useForm(…)}` it becomes the
+* React Hook Form shell — provider, `handleSubmit`, and `noValidate` in one:
+*
+*   const schema = z.object({ email: z.email("Enter a valid email") });
+*   const form = useForm({ resolver: zodResolver(schema), mode: "onTouched" });
+*
+*   <Form form={form} onValidSubmit={(data) => save(data)}>
+*     <Field name="email">
+*       <FieldLabel>Email</FieldLabel>
+*       <Input type="email" autoComplete="email" />
+*       <FieldError />
+*     </Field>
+*     <Button type="submit">Save</Button>
+*   </Form>
+*
+* Without `form` it is Base UI's native form: constraint validation drives
+* `FieldError` via `match`, `errors` maps server errors onto fields by name,
+* and `onFormSubmit` receives values as a plain object.
+*/
+const Form$1 = FormImpl;
+Form$1.displayName = "Form";
+//#endregion
+export { Form$1 as Form };

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

@@ -0,0 +1,2 @@
+import { Form, FormProps } from "./Form.js";
+export { Form, type FormProps };

package/dist/components/Form/index.js

@@ -0,0 +1,2 @@
+import { Form } from "./Form.js";
+export { Form };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Input } from "@base-ui/react/input";
+//#region src/components/Input/Input.d.ts
+type InputSize = "sm" | "md" | "lg";
+interface InputVariantsOptions {
+  size?: InputSize;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a standalone Input — for input-shaped
+ * elements that aren't this component (a `<textarea>`, a fake search box that
+ * opens a command palette) so every text control shares one look. Inside an
+ * `InputGroup` the group owns the frame; these classes are for standalone use.
+ */
+declare function inputVariants({ size, className }?: InputVariantsOptions): string;
+type BaseInputProps = ComponentPropsWithoutRef<typeof Input>;
+interface InputProps extends Omit<BaseInputProps, "className" | "size"> {
+  /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. Inside an `InputGroup` the group's `size` wins. */
+  size?: InputSize;
+  /** The native `size` attribute (visible width in characters) — renamed because `size` selects the control height. */
+  htmlSize?: number;
+  /** Marks the input invalid (`aria-invalid` + destructive styling) when validation is wired manually. Composed `Field`s set this state for you via `data-invalid`. */
+  invalid?: boolean;
+  className?: string;
+}
+/**
+ * Native text input built on Base UI's Input. Full width by default — size
+ * it via the container. Inside a `Field` it inherits labelling, description
+ * and error wiring plus state data-attributes automatically; inside a
+ * *connected* Field (React Hook Form) the value, change/blur handlers, and
+ * focus ref are wired for you too — passing `value`, `defaultValue`,
+ * `onChange`, or `name` yourself takes back manual control (don't also
+ * `register` the same name: the Field already registered it). Standalone
+ * max-performance registration `{...form.register("name")}` works as usual.
+ * Fields that collect data about the user must pass the matching
+ * `autocomplete` token (WCAG 1.3.5).
+ */
+declare const Input$1: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+  /** Frame height, mirroring Input sizes. The Input inside inherits it. */
+  size?: InputSize;
+  className?: string;
+}
+/**
+ * Frame that seats decorations next to an `Input` — icons, text affixes like
+ * `$` or `.com`, or interactive addons — inside one shared border with a
+ * single focus ring. Compose `InputGroupAddon`(s) and one `Input` in visual
+ * order; the input goes bare and the group takes over its frame, including
+ * invalid/disabled/read-only states. Works inside `Field` unchanged.
+ */
+declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface InputGroupAddonProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+  className?: string;
+}
+/**
+ * A decoration slot inside `InputGroup` — place it before or after the
+ * `Input` in the children. Addon content sits outside the input's accessible
+ * name: mark purely decorative content (icons, unit text repeated in the
+ * label) with `aria-hidden`, and never hide interactive addons — a clear or
+ * show-password `Button` must stay in the accessibility tree.
+ */
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<InputGroupAddonProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Input$1 as Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps, InputProps, InputSize, InputVariantsOptions, inputVariants };

package/dist/components/Input/Input.js

@@ -0,0 +1,111 @@
+import { cn } from "../../lib/cn.js";
+import { FieldContext } from "../Field/FieldContext.js";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+//#region src/components/Input/Input.tsx
+const inputBaseClasses = "block w-full min-w-0 appearance-none rounded-md border border-border bg-background font-sans text-foreground placeholder:text-muted-foreground transition-colors duration-150 hover:border-slate-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:outline-destructive [&[readonly]]:bg-surface disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 file:me-3 file:h-full file:cursor-pointer file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
+const inputSizeClasses = {
+	sm: "h-8 px-2.5 text-sm any-pointer-coarse:text-base",
+	md: "h-10 px-3 text-sm any-pointer-coarse:text-base",
+	lg: "h-12 px-3.5 text-base"
+};
+/**
+* Class list for an element styled as a standalone Input — for input-shaped
+* elements that aren't this component (a `<textarea>`, a fake search box that
+* opens a command palette) so every text control shares one look. Inside an
+* `InputGroup` the group owns the frame; these classes are for standalone use.
+*/
+function inputVariants({ size = "md", className } = {}) {
+	return cn(inputBaseClasses, inputSizeClasses[size], className);
+}
+const bareInputClasses = "h-full w-full min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:pointer-events-none file:me-3 file:h-full file:cursor-pointer file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
+function composeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref != null) ref.current = node;
+	};
+}
+/**
+* Native text input built on Base UI's Input. Full width by default — size
+* it via the container. Inside a `Field` it inherits labelling, description
+* and error wiring plus state data-attributes automatically; inside a
+* *connected* Field (React Hook Form) the value, change/blur handlers, and
+* focus ref are wired for you too — passing `value`, `defaultValue`,
+* `onChange`, or `name` yourself takes back manual control (don't also
+* `register` the same name: the Field already registered it). Standalone
+* max-performance registration `{...form.register("name")}` works as usual.
+* Fields that collect data about the user must pass the matching
+* `autocomplete` token (WCAG 1.3.5).
+*/
+const Input$1 = forwardRef(({ size = "md", htmlSize, invalid, type, name, value, defaultValue, onChange, onBlur, disabled, required, className, ...rest }, ref) => {
+	const fieldContext = useContext(FieldContext);
+	const groupSize = useContext(InputGroupContext);
+	const adapter = fieldContext?.control ?? null;
+	const wired = adapter != null && !(value !== void 0 || defaultValue !== void 0 || onChange !== void 0 || name !== void 0);
+	const isFile = type === "file";
+	const requiredState = required ?? (fieldContext?.required ? true : void 0);
+	return /* @__PURE__ */ jsx(Input, {
+		ref: useMemo(() => wired ? composeRefs(ref, adapter.ref) : ref, [
+			wired,
+			ref,
+			adapter?.ref
+		]),
+		type,
+		size: htmlSize,
+		name: wired ? adapter.name : name,
+		disabled: disabled ?? (wired ? adapter.disabled : void 0),
+		value: wired && !isFile ? adapter.value ?? "" : value,
+		defaultValue,
+		onChange: wired ? (event) => adapter.onChange(event) : onChange,
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (wired) adapter.onBlur();
+		},
+		required: wired ? void 0 : requiredState,
+		"aria-required": wired && requiredState ? true : void 0,
+		"aria-invalid": invalid || void 0,
+		className: cn(groupSize != null ? bareInputClasses : inputVariants({ size }), className),
+		...rest
+	});
+});
+Input$1.displayName = "Input";
+const InputGroupContext = createContext(null);
+const groupBaseClasses = "flex w-full min-w-0 items-center rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring has-data-invalid:border-destructive has-data-invalid:hover:border-destructive has-data-invalid:focus-within:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:focus-within:outline-destructive has-[input[readonly]]:bg-surface has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const groupSizeClasses = {
+	sm: "h-8 gap-1.5 px-2.5 text-sm any-pointer-coarse:text-base",
+	md: "h-10 gap-2 px-3 text-sm any-pointer-coarse:text-base",
+	lg: "h-12 gap-2 px-3.5 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+/**
+* Frame that seats decorations next to an `Input` — icons, text affixes like
+* `$` or `.com`, or interactive addons — inside one shared border with a
+* single focus ring. Compose `InputGroupAddon`(s) and one `Input` in visual
+* order; the input goes bare and the group takes over its frame, including
+* invalid/disabled/read-only states. Works inside `Field` unchanged.
+*/
+const InputGroup = forwardRef(({ size = "md", className, ...rest }, ref) => /* @__PURE__ */ jsx(InputGroupContext.Provider, {
+	value: size,
+	children: /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(groupBaseClasses, groupSizeClasses[size], className),
+		...rest
+	})
+}));
+InputGroup.displayName = "InputGroup";
+const addonClasses = "flex shrink-0 select-none items-center gap-1.5 text-muted-foreground";
+/**
+* A decoration slot inside `InputGroup` — place it before or after the
+* `Input` in the children. Addon content sits outside the input's accessible
+* name: mark purely decorative content (icons, unit text repeated in the
+* label) with `aria-hidden`, and never hide interactive addons — a clear or
+* show-password `Button` must stay in the accessibility tree.
+*/
+const InputGroupAddon = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn(addonClasses, className),
+	...rest
+}));
+InputGroupAddon.displayName = "InputGroupAddon";
+//#endregion
+export { Input$1 as Input, InputGroup, InputGroupAddon, inputVariants };

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

@@ -0,0 +1,2 @@
+import { Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps, InputProps, InputSize, InputVariantsOptions, inputVariants } from "./Input.js";
+export { Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, inputVariants };

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+import { Input, InputGroup, InputGroupAddon, inputVariants } from "./Input.js";
+export { Input, InputGroup, InputGroupAddon, inputVariants };