jaci-ui 0.2.0 → 0.4.0

package/dist/components/field/field.js

@@ -2,15 +2,23 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { field } from "../../styled-system/recipes/field.js";
 import { JaciFormContext } from "../form/form.js";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/field/field.tsx
 const FieldContext = createContext({
+	controlId: void 0,
+	descriptionId: void 0,
+	dirty: false,
+	errorId: void 0,
 	errors: [],
 	insideField: false,
 	invalid: false,
-	name: void 0
+	labelId: void 0,
+	name: void 0,
+	pending: false,
+	touched: false,
+	valid: null
 });
 function normalizeErrors(errors) {
 	if (errors === void 0 || errors === null || errors === false) return [];
@@ -20,51 +28,127 @@ function renderErrors(errors) {
 	if (errors.length <= 1) return errors[0];
 	return /* @__PURE__ */ jsx("ul", { children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, typeof error === "string" ? error : index)) });
 }
-const Field$1 = forwardRef(function Field$2({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+const FieldRoot$1 = forwardRef(function Field$2({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, pending: pendingProp = false, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+	const generatedId = useId();
+	const controlId = `${generatedId}-control`;
+	const labelId = `${generatedId}-label`;
+	const descriptionId = `${generatedId}-description`;
+	const errorId = `${generatedId}-error`;
+	const [pendingValidation, setPendingValidation] = useState(false);
+	const [validationErrors, setValidationErrors] = useState([]);
+	const [validationValid, setValidationValid] = useState(null);
+	const validationSequence = useRef(0);
 	const { errors: formErrors } = useContext(JaciFormContext);
 	const formError = name ? formErrors[name] : void 0;
-	const errors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const externalErrors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const errors = directErrors !== void 0 || formError !== void 0 ? externalErrors : validationErrors;
 	const invalid = invalidProp || errors.length > 0;
+	const pending = pendingProp || pendingValidation;
+	const wrappedValidate = useCallback((value, formValues) => {
+		const sequence = ++validationSequence.current;
+		if (!validate) return null;
+		const result = validate(value, formValues);
+		if (!result || typeof result !== "object" || !("then" in result)) {
+			const resultErrors = normalizeErrors(result);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			setPendingValidation(false);
+			return result;
+		}
+		setValidationErrors([]);
+		setValidationValid(null);
+		setPendingValidation(true);
+		return Promise.resolve(result).then((validationResult) => {
+			if (sequence !== validationSequence.current) return null;
+			const resultErrors = normalizeErrors(validationResult);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			return validationResult;
+		}).finally(() => {
+			if (sequence === validationSequence.current) setPendingValidation(false);
+		});
+	}, [validate]);
 	const styles = field({ invalid });
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
 		value: {
+			controlId,
+			descriptionId,
+			dirty: dirty ?? false,
+			errorId,
 			errors,
 			insideField: true,
 			invalid,
-			name
+			labelId,
+			name,
+			pending,
+			touched: touched ?? false,
+			valid: invalid ? false : validationValid
 		},
 		children: /* @__PURE__ */ jsx(Field.Root, {
 			...props,
 			ref,
 			actionsRef,
 			className: cx(styles.root, className),
+			"aria-busy": pending || void 0,
+			"data-dirty": dirty || void 0,
 			"data-invalid": invalid || void 0,
 			"data-jaci-component": "field",
+			"data-pending": pending || void 0,
 			"data-slot": "field",
+			"data-touched": touched || void 0,
 			disabled,
 			dirty,
 			invalid,
 			name,
 			touched,
-			validate,
+			...validate ? { validate: wrappedValidate } : {},
 			validationDebounceTime,
 			validationMode,
 			children
 		})
 	});
 });
+const FieldControl = forwardRef(function FieldControl({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, className, id, ...props }, ref) {
+	const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } = useContext(FieldContext);
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		invalid ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ") || void 0;
+	const controlProps = {
+		...props,
+		"aria-busy": pending || void 0,
+		"aria-describedby": describedBy,
+		"aria-errormessage": ariaErrorMessage ?? (invalid ? errorId : void 0),
+		"aria-invalid": ariaInvalid ?? (invalid || void 0),
+		"aria-labelledby": labelledBy,
+		className,
+		"data-pending": pending || void 0,
+		id: id ?? controlId
+	};
+	if (!insideField) return /* @__PURE__ */ jsx(Field.Control, {
+		...controlProps,
+		ref
+	});
+	return /* @__PURE__ */ jsx(Field.Control, {
+		...controlProps,
+		ref
+	});
+});
 const FieldLabel = forwardRef(function FieldLabel({ children, className, htmlFor, ...props }, ref) {
-	const { insideField, invalid } = useContext(FieldContext);
+	const { controlId, insideField, invalid, labelId } = useContext(FieldContext);
 	const labelProps = {
 		...props,
 		className: cx(field({ invalid }).label, className),
 		"data-slot": "field-label",
-		htmlFor
+		htmlFor: htmlFor ?? controlId,
+		id: props.id ?? labelId
 	};
 	if (!insideField) return /* @__PURE__ */ jsx("label", {
 		...labelProps,
 		ref,
-		htmlFor,
+		htmlFor: htmlFor ?? controlId,
 		children
 	});
 	return /* @__PURE__ */ jsx(Field.Label, {
@@ -74,11 +158,12 @@ const FieldLabel = forwardRef(function FieldLabel({ children, className, htmlFor
 	});
 });
 const FieldDescription = forwardRef(function FieldDescription({ className, ...props }, ref) {
-	const { insideField, invalid } = useContext(FieldContext);
+	const { descriptionId, insideField, invalid } = useContext(FieldContext);
 	const descriptionProps = {
 		...props,
 		className: cx(field({ invalid }).description, className),
-		"data-slot": "field-description"
+		"data-slot": "field-description",
+		id: props.id ?? descriptionId
 	};
 	if (!insideField) return /* @__PURE__ */ jsx("p", {
 		...descriptionProps,
@@ -90,7 +175,7 @@ const FieldDescription = forwardRef(function FieldDescription({ className, ...pr
 	});
 });
 const FieldError = forwardRef(function FieldError({ children, className, match, ...props }, ref) {
-	const { errors, insideField, invalid } = useContext(FieldContext);
+	const { errorId, errors, insideField, invalid } = useContext(FieldContext);
 	const content = children ?? renderErrors(errors);
 	if (!insideField) {
 		if (content === void 0 || content === null || content === false) return null;
@@ -99,6 +184,7 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 			ref,
 			className: cx(field({ invalid }).error, className),
 			"data-slot": "field-error",
+			id: props.id ?? errorId,
 			role: "alert",
 			children: content
 		});
@@ -108,6 +194,7 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 		ref,
 		className: cx(field({ invalid }).error, className),
 		"data-slot": "field-error",
+		id: props.id ?? errorId,
 		match: match ?? (invalid ? true : void 0),
 		render: /* @__PURE__ */ jsx("p", {}),
 		role: "alert",
@@ -117,7 +204,14 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 function useFieldState() {
 	return useContext(FieldContext);
 }
+const Field$1 = Object.assign(FieldRoot$1, {
+	Root: FieldRoot$1,
+	Control: FieldControl,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError
+});
 //#endregion
-export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, useFieldState };
+export { Field$1 as Field, FieldControl, FieldDescription, FieldError, FieldLabel, useFieldState };
 
 //# sourceMappingURL=field.js.map

package/dist/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["Field","BaseField"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  name: string | undefined;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  errors: [],\n  insideField: false,\n  invalid: false,\n  name: undefined,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor: string;\n}\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const errors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const invalid = invalidProp || errors.length > 0;\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider value={{ errors, insideField: true, invalid, name }}>\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-slot=\"field\"\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        validate={validate}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { insideField, invalid } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n"],"mappings":"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"}
+{"version":3,"file":"field.js","names":["FieldRoot","Field","BaseField"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  controlId: string | undefined;\n  descriptionId: string | undefined;\n  dirty: boolean;\n  errorId: string | undefined;\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  labelId: string | undefined;\n  name: string | undefined;\n  pending: boolean;\n  touched: boolean;\n  valid: boolean | null;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  controlId: undefined,\n  descriptionId: undefined,\n  dirty: false,\n  errorId: undefined,\n  errors: [],\n  insideField: false,\n  invalid: false,\n  labelId: undefined,\n  name: undefined,\n  pending: false,\n  touched: false,\n  valid: null,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Marks the field as awaiting asynchronous validation. */\n  pending?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor?: string;\n}\n\nconst FieldRoot = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    pending: pendingProp = false,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const controlId = `${generatedId}-control`;\n  const labelId = `${generatedId}-label`;\n  const descriptionId = `${generatedId}-description`;\n  const errorId = `${generatedId}-error`;\n  const [pendingValidation, setPendingValidation] = useState(false);\n  const [validationErrors, setValidationErrors] = useState<ReactNode[]>([]);\n  const [validationValid, setValidationValid] = useState<boolean | null>(null);\n  const validationSequence = useRef(0);\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const externalErrors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const errors =\n    directErrors !== undefined || formError !== undefined ? externalErrors : validationErrors;\n  const invalid = invalidProp || errors.length > 0;\n  const pending = pendingProp || pendingValidation;\n  const wrappedValidate = useCallback<NonNullable<BaseFieldRoot.Props[\"validate\"]>>(\n    (value, formValues) => {\n      const sequence = ++validationSequence.current;\n      if (!validate) return null;\n      const result = validate(value, formValues);\n      if (!result || typeof result !== \"object\" || !(\"then\" in result)) {\n        const resultErrors = normalizeErrors(result);\n        setValidationErrors(resultErrors);\n        setValidationValid(resultErrors.length === 0);\n        setPendingValidation(false);\n        return result;\n      }\n      setValidationErrors([]);\n      setValidationValid(null);\n      setPendingValidation(true);\n      return Promise.resolve(result)\n        .then((validationResult) => {\n          if (sequence !== validationSequence.current) return null;\n          const resultErrors = normalizeErrors(validationResult);\n          setValidationErrors(resultErrors);\n          setValidationValid(resultErrors.length === 0);\n          return validationResult;\n        })\n        .finally(() => {\n          if (sequence === validationSequence.current) setPendingValidation(false);\n        });\n    },\n    [validate],\n  );\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider\n      value={{\n        controlId,\n        descriptionId,\n        dirty: dirty ?? false,\n        errorId,\n        errors,\n        insideField: true,\n        invalid,\n        labelId,\n        name,\n        pending,\n        touched: touched ?? false,\n        valid: invalid ? false : validationValid,\n      }}\n    >\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        aria-busy={pending || undefined}\n        data-dirty={dirty || undefined}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-pending={pending || undefined}\n        data-slot=\"field\"\n        data-touched={touched || undefined}\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        {...(validate ? { validate: wrappedValidate } : {})}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport interface FieldControlProps extends ComponentPropsWithoutRef<typeof BaseField.Control> {}\n\nexport const FieldControl = forwardRef<HTMLElement, FieldControlProps>(function FieldControl(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    id,\n    ...props\n  },\n  ref,\n) {\n  const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } =\n    useContext(FieldContext);\n  const describedBy =\n    [ariaDescribedBy, descriptionId, invalid ? errorId : undefined].filter(Boolean).join(\" \") ||\n    undefined;\n  const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \") || undefined;\n  const controlProps = {\n    ...props,\n    \"aria-busy\": pending || undefined,\n    \"aria-describedby\": describedBy,\n    \"aria-errormessage\": ariaErrorMessage ?? (invalid ? errorId : undefined),\n    \"aria-invalid\": ariaInvalid ?? (invalid || undefined),\n    \"aria-labelledby\": labelledBy,\n    className,\n    \"data-pending\": pending || undefined,\n    id: id ?? controlId,\n  };\n  if (!insideField) return <BaseField.Control {...controlProps} ref={ref} />;\n  return <BaseField.Control {...controlProps} ref={ref} />;\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { controlId, insideField, invalid, labelId } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor: htmlFor ?? controlId,\n    id: props.id ?? labelId,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor ?? controlId}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { descriptionId, insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n      id: props.id ?? descriptionId,\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errorId, errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        id={props.id ?? errorId}\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      id={props.id ?? errorId}\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n\nexport const Field = Object.assign(FieldRoot, {\n  Root: FieldRoot,\n  Control: FieldControl,\n  Label: FieldLabel,\n  Description: FieldDescription,\n  Error: FieldError,\n});\n"],"mappings":"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"}

package/dist/components/field/index.d.cts

@@ -1,2 +1,2 @@
-import { Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.cjs";
-export { Field, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };
+import { Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.cjs";
+export { Field, FieldControl, type FieldControlProps, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };

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

@@ -1,2 +1,2 @@
-import { Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.js";
-export { Field, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };
+import { Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.js";
+export { Field, FieldControl, type FieldControlProps, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };

package/dist/components/icon-button/icon-button.cjs

@@ -0,0 +1,40 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_icon_button = require("../../styled-system/recipes/icon-button.cjs");
+const require_index = require("../layout/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/icon-button/icon-button.tsx
+function hasTextualContent(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children).trim().length > 0;
+	return react.Children.toArray(children).some((child) => {
+		if (!(0, react.isValidElement)(child)) return false;
+		return hasTextualContent(child.props.children);
+	});
+}
+const IconButton = (0, react.forwardRef)(function IconButton({ children, className, disabled, loading = false, size = "md", variant = "outline", ...props }, ref) {
+	if (!hasTextualContent(children) && !props["aria-label"] && !props["aria-labelledby"]) throw new Error("IconButton requires an aria-label when it has no textual content.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		"aria-busy": loading || void 0,
+		className: require_cx.cx(require_icon_button.iconButton({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "icon-button",
+		"data-loading": loading || void 0,
+		"data-slot": "icon-button",
+		disabled: disabled || loading,
+		type: props.type ?? "button",
+		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Spinner, {
+			"aria-hidden": "true",
+			label: "",
+			size: "sm"
+		}) : children
+	});
+});
+//#endregion
+exports.IconButton = IconButton;
+
+//# sourceMappingURL=icon-button.cjs.map

package/dist/components/icon-button/icon-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.cjs","names":["Children","cx","iconButton","Spinner"],"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, forwardRef, isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { iconButton } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\nexport interface IconButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\" | \"color\"> {\n  children?: ReactNode;\n  variant?: \"solid\" | \"outline\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  loading?: boolean;\n}\n\nfunction hasTextualContent(children: ReactNode): boolean {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return String(children).trim().length > 0;\n  }\n\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    return hasTextualContent((child.props as { children?: ReactNode }).children);\n  });\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { children, className, disabled, loading = false, size = \"md\", variant = \"outline\", ...props },\n  ref,\n) {\n  if (!hasTextualContent(children) && !props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n    throw new Error(\"IconButton requires an aria-label when it has no textual content.\");\n  }\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      aria-busy={loading || undefined}\n      className={cx(iconButton({ size, variant }), className)}\n      data-jaci-component=\"icon-button\"\n      data-loading={loading || undefined}\n      data-slot=\"icon-button\"\n      disabled={disabled || loading}\n      type={props.type ?? \"button\"}\n    >\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiBA,SAAS,kBAAkB,UAA8B;CACvD,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS;CAG1C,OAAOA,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU;EAChD,IAAI,EAAA,GAAA,MAAA,eAAA,CAAgB,KAAK,GAAG,OAAO;EACnC,OAAO,kBAAmB,MAAM,MAAmC,QAAQ;CAC7E,CAAC;AACH;AAEA,MAAa,cAAA,GAAA,MAAA,WAAA,CAA4D,SAAS,WAChF,EAAE,UAAU,WAAW,UAAU,UAAU,OAAO,OAAO,MAAM,UAAU,WAAW,GAAG,SACvF,KACA;CACA,IAAI,CAAC,kBAAkB,QAAQ,KAAK,CAAC,MAAM,iBAAiB,CAAC,MAAM,oBACjE,MAAM,IAAI,MAAM,mEAAmE;CAGrF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,aAAW,WAAW,KAAA;EACtB,WAAWC,WAAAA,GAAGC,oBAAAA,WAAW;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACtD,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,UAAU,YAAY;EACtB,MAAM,MAAM,QAAQ;YAEnB,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;CACzD,CAAA;AAEZ,CAAC"}

package/dist/components/icon-button/icon-button.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/icon-button/icon-button.d.ts
+interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "color"> {
+  children?: ReactNode;
+  variant?: "solid" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+}
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, IconButtonProps };
+//# sourceMappingURL=icon-button.d.cts.map

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/icon-button/icon-button.d.ts
+interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "color"> {
+  children?: ReactNode;
+  variant?: "solid" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+}
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, IconButtonProps };
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,40 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { iconButton } from "../../styled-system/recipes/icon-button.js";
+import { Spinner } from "../layout/index.js";
+import { Children, forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/icon-button/icon-button.tsx
+function hasTextualContent(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children).trim().length > 0;
+	return Children.toArray(children).some((child) => {
+		if (!isValidElement(child)) return false;
+		return hasTextualContent(child.props.children);
+	});
+}
+const IconButton = forwardRef(function IconButton({ children, className, disabled, loading = false, size = "md", variant = "outline", ...props }, ref) {
+	if (!hasTextualContent(children) && !props["aria-label"] && !props["aria-labelledby"]) throw new Error("IconButton requires an aria-label when it has no textual content.");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-busy": loading || void 0,
+		className: cx(iconButton({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "icon-button",
+		"data-loading": loading || void 0,
+		"data-slot": "icon-button",
+		disabled: disabled || loading,
+		type: props.type ?? "button",
+		children: loading ? /* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": "true",
+			label: "",
+			size: "sm"
+		}) : children
+	});
+});
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, forwardRef, isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { iconButton } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\nexport interface IconButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\" | \"color\"> {\n  children?: ReactNode;\n  variant?: \"solid\" | \"outline\" | \"ghost\" | \"danger\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  loading?: boolean;\n}\n\nfunction hasTextualContent(children: ReactNode): boolean {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return String(children).trim().length > 0;\n  }\n\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    return hasTextualContent((child.props as { children?: ReactNode }).children);\n  });\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { children, className, disabled, loading = false, size = \"md\", variant = \"outline\", ...props },\n  ref,\n) {\n  if (!hasTextualContent(children) && !props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n    throw new Error(\"IconButton requires an aria-label when it has no textual content.\");\n  }\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      aria-busy={loading || undefined}\n      className={cx(iconButton({ size, variant }), className)}\n      data-jaci-component=\"icon-button\"\n      data-loading={loading || undefined}\n      data-slot=\"icon-button\"\n      disabled={disabled || loading}\n      type={props.type ?? \"button\"}\n    >\n      {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAiBA,SAAS,kBAAkB,UAA8B;CACvD,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS;CAG1C,OAAO,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU;EAChD,IAAI,CAAC,eAAe,KAAK,GAAG,OAAO;EACnC,OAAO,kBAAmB,MAAM,MAAmC,QAAQ;CAC7E,CAAC;AACH;AAEA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,WAAW,UAAU,UAAU,OAAO,OAAO,MAAM,UAAU,WAAW,GAAG,SACvF,KACA;CACA,IAAI,CAAC,kBAAkB,QAAQ,KAAK,CAAC,MAAM,iBAAiB,CAAC,MAAM,oBACjE,MAAM,IAAI,MAAM,mEAAmE;CAGrF,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,aAAW,WAAW,KAAA;EACtB,WAAW,GAAG,WAAW;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACtD,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,UAAU,YAAY;EACtB,MAAM,MAAM,QAAQ;YAEnB,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;CACzD,CAAA;AAEZ,CAAC"}

package/dist/components/icon-button/index.d.cts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps } from "./icon-button.cjs";
+export { IconButton, type IconButtonProps };

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps } from "./icon-button.js";
+export { IconButton, type IconButtonProps };

package/dist/components/input-group/index.d.cts

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps } from "./input-group.cjs";
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupRoot, type InputGroupRootProps };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps } from "./input-group.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupRoot, type InputGroupRootProps };

package/dist/components/input-group/input-group.cjs

@@ -0,0 +1,32 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_input_group = require("../../styled-system/recipes/input-group.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/input-group/input-group.tsx
+const InputGroupRoot = (0, react.forwardRef)(function InputGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_input_group.inputGroup().root, className),
+		"data-jaci-component": "input-group",
+		"data-slot": "input-group"
+	});
+});
+const InputGroupAddon = (0, react.forwardRef)(function InputGroupAddon({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(require_input_group.inputGroup().addon, className),
+		"data-slot": "input-group-addon"
+	});
+});
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+//#endregion
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupRoot = InputGroupRoot;
+
+//# sourceMappingURL=input-group.cjs.map

package/dist/components/input-group/input-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.cjs","names":["cx","inputGroup"],"sources":["../../../src/components/input-group/input-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { inputGroup } from \"../../styled-system/recipes\";\n\nexport interface InputGroupRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const InputGroupRoot = forwardRef<HTMLDivElement, InputGroupRootProps>(\n  function InputGroupRoot({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().root, className)}\n        data-jaci-component=\"input-group\"\n        data-slot=\"input-group\"\n      />\n    );\n  },\n);\n\nexport type InputGroupAddonProps = ComponentPropsWithoutRef<\"span\">;\nexport const InputGroupAddon = forwardRef<HTMLSpanElement, InputGroupAddonProps>(\n  function InputGroupAddon({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().addon, className)}\n        data-slot=\"input-group-addon\"\n      />\n    );\n  },\n);\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n  Root: InputGroupRoot,\n  Addon: InputGroupAddon,\n});\n"],"mappings":";;;;;AAUA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWD,WAAAA,GAAGC,oBAAAA,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/components/input-group/input-group.d.cts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/input-group/input-group.d.ts
+interface InputGroupRootProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const InputGroupRoot: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type InputGroupAddonProps = ComponentPropsWithoutRef<"span">;
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps };
+//# sourceMappingURL=input-group.d.cts.map

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/input-group/input-group.d.ts
+interface InputGroupRootProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const InputGroupRoot: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type InputGroupAddonProps = ComponentPropsWithoutRef<"span">;
+declare const InputGroupAddon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<InputGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupRoot, InputGroupRootProps };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group/input-group.js

@@ -0,0 +1,30 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { inputGroup } from "../../styled-system/recipes/input-group.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input-group/input-group.tsx
+const InputGroupRoot = forwardRef(function InputGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(inputGroup().root, className),
+		"data-jaci-component": "input-group",
+		"data-slot": "input-group"
+	});
+});
+const InputGroupAddon = forwardRef(function InputGroupAddon({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(inputGroup().addon, className),
+		"data-slot": "input-group-addon"
+	});
+});
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupRoot };
+
+//# sourceMappingURL=input-group.js.map

package/dist/components/input-group/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../src/components/input-group/input-group.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { inputGroup } from \"../../styled-system/recipes\";\n\nexport interface InputGroupRootProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const InputGroupRoot = forwardRef<HTMLDivElement, InputGroupRootProps>(\n  function InputGroupRoot({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().root, className)}\n        data-jaci-component=\"input-group\"\n        data-slot=\"input-group\"\n      />\n    );\n  },\n);\n\nexport type InputGroupAddonProps = ComponentPropsWithoutRef<\"span\">;\nexport const InputGroupAddon = forwardRef<HTMLSpanElement, InputGroupAddonProps>(\n  function InputGroupAddon({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(inputGroup().addon, className)}\n        data-slot=\"input-group-addon\"\n      />\n    );\n  },\n);\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n  Root: InputGroupRoot,\n  Addon: InputGroupAddon,\n});\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,OAAO,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,aAAa,OAAO,OAAO,gBAAgB;CACtD,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/components/pin-input/index.d.cts

@@ -0,0 +1,2 @@
+import { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps } from "./pin-input.cjs";
+export { PinInput, PinInputControl, type PinInputControlProps, PinInputDescription, type PinInputDescriptionProps, PinInputError, type PinInputErrorProps, PinInputHiddenInput, type PinInputHiddenInputProps, PinInputInput, type PinInputInputProps, PinInputInputs, type PinInputInputsProps, PinInputLabel, type PinInputLabelProps, PinInputRoot, type PinInputRootProps };

package/dist/components/pin-input/index.d.ts

@@ -0,0 +1,2 @@
+import { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps } from "./pin-input.js";
+export { PinInput, PinInputControl, type PinInputControlProps, PinInputDescription, type PinInputDescriptionProps, PinInputError, type PinInputErrorProps, PinInputHiddenInput, type PinInputHiddenInputProps, PinInputInput, type PinInputInputProps, PinInputInputs, type PinInputInputsProps, PinInputLabel, type PinInputLabelProps, PinInputRoot, type PinInputRootProps };