{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-wrapper",
  "type": "registry:component",
  "title": "Field Wrapper",
  "description": "Wrapper component for form fields providing consistent layout with labels, error messages, and helper text",
  "dependencies": [
    "react",
    "@registry/react"
  ],
  "registryDependencies": [
    "https://components.thgaltitude.com/r/react/alert"
  ],
  "files": [
    {
      "path": "registry/react/component/field-wrapper.tsx",
      "content": "import React, { useState, Children, cloneElement, isValidElement } from \"react\";\nimport Alert from \"@registry/react/ui/alert\";\n\ninterface FieldProps {\n  id?: string;\n  name?: string;\n  label?: string;\n  helperText?: string;\n  errorMessage?: string;\n  placeholder?: string;\n  required?: boolean;\n  \"aria-invalid\"?: boolean;\n  disabled?: boolean;\n  maxlength?: number;\n}\n\ninterface FieldWrapperProps extends FieldProps {\n  children: React.ReactNode;\n}\n\nconst FieldWrapper: React.FC<FieldWrapperProps> = ({\n  id,\n  name,\n  label,\n  helperText,\n  errorMessage,\n  placeholder,\n  required = false,\n  \"aria-invalid\": ariaInvalid = false,\n  disabled = false,\n  maxlength,\n  children,\n  ...restProps\n}) => {\n  const [inputLength, setInputLength] = useState(0);\n\n  const childWithProps = React.Children.map(children, (child) => {\n    if (isValidElement<any>(child)) {\n      const commonProps: any = {\n        id,\n        name,\n        placeholder,\n        disabled,\n        required,\n        \"aria-invalid\": ariaInvalid,\n      };\n\n      if (helperText && !ariaInvalid) {\n        commonProps[\"aria-describedby\"] = `${id}-helper`;\n      }\n\n      if (maxlength) {\n        commonProps.maxLength = maxlength;\n      }\n\n      if (maxlength) {\n        commonProps.onChange = (\n          e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n        ) => {\n          setInputLength(e.target.value.length);\n\n          const originalOnChange = (child as any).props.onChange;\n          if (typeof originalOnChange === \"function\") {\n            originalOnChange(e);\n          }\n        };\n      }\n\n      const childProps = { ...(child.props as object) };\n\n      return cloneElement(child, {\n        ...commonProps,\n        ...childProps,\n        ...(maxlength ? { onChange: commonProps.onChange } : {}),\n      });\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={`space-y-1 wrapper group ${\n        disabled ? \"skin-form-disabled\" : \"skin-form \"\n      }\n      }`}\n      {...restProps}\n    >\n      <div className=\"flex justify-between items-center mx-2 \">\n        <div className=\"flex items-center space-x-2\">\n          <label className=\"text-body font-semi-bold\" htmlFor={id}>\n            {label}\n          </label>\n          {required && (\n            <span className=\"text-sm font-light soft\" aria-hidden=\"true\">\n              Required\n            </span>\n          )}\n          {!required && (\n            <span className=\"text-sm font-light soft\" aria-hidden=\"true\">\n              Optional\n            </span>\n          )}\n        </div>\n        {maxlength && (\n          <span\n            className=\"text-sm soft \"\n            aria-hidden=\"true\"\n            id={`${id}-char-limit`}\n          >\n            {inputLength}/{maxlength}\n          </span>\n        )}\n      </div>\n      <div className=\"input-field-wrapper\">{childWithProps}</div>\n      <div className=\"input-helper-wrapper\">\n        {!ariaInvalid && helperText && (\n          <p className=\"text-sm soft ml-2\" id={`${id}-helper`}>\n            {helperText}\n          </p>\n        )}\n        {ariaInvalid && (\n          <Alert\n            type=\"error\"\n            message={errorMessage || \"This field is required.\"}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type { FieldProps };\nexport default FieldWrapper;\n",
      "type": "registry:component",
      "target": "react/component/field-wrapper.tsx"
    }
  ]
}