@povio/ui 0.0.4 → 0.0.6

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -0,0 +1,147 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useTextField } from "react-aria";
+import { Input } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormField } from "../../FormField/FormField.js";
+import { InputContent } from "../shared/InputContent.js";
+import { useInputCva } from "../../shared/input.cva.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+const TextInputBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const inputCva = useInputCva();
+  const {
+    ref,
+    inputClassName,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    unit,
+    isLoading,
+    action,
+    leadingIcon,
+    trailingIcon,
+    value,
+    onChange,
+    onBlur,
+    as = ui.input.as,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+  const textFieldRef = useRef(null);
+  const textFieldProps = {
+    ...rest,
+    label,
+    isDisabled,
+    isInvalid: !!error,
+    isRequired,
+    value,
+    onChange,
+    onBlur
+  };
+  const { labelProps, inputProps } = useTextField(textFieldProps, textFieldRef);
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const inputContentProps = {
+    unit,
+    isLoading,
+    isDisabled,
+    action,
+    leadingIcon,
+    trailingIcon,
+    isClearable,
+    value,
+    onChange
+  };
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: clsx("group w-full", className),
+      children: /* @__PURE__ */ jsx(
+        InputContent,
+        {
+          ...inputContentProps,
+          headerProps,
+          as,
+          size,
+          children: (style) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...inputProps,
+              ref,
+              placeholder: as === "floating" ? "" : inputProps.placeholder,
+              className: inputCva({ variant, as, size, ...rest, className: inputClassName }),
+              style
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const TextInput = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          TextInputBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+};
+export {
+  TextInput
+};

package/dist/components/inputs/Input/shared/InputContent.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, FC, ReactElement, ReactNode, SVGProps } from 'react';
+import { InlineIconButtonProps } from '#ui/components/buttons/InlineIconButton/InlineIconButton';
+import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
+import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+export interface InputContentProps {
+    className?: string;
+    unit?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    action?: {
+        icon: InlineIconButtonProps["icon"];
+        onClick: () => void;
+        altText: string;
+        className?: string;
+    };
+    leadingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+    trailingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+    isClearable?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    headerProps?: FormFieldHeaderProps;
+}
+interface InputContentComponentProps extends InputContentProps, InputVariantProps {
+    children: (style: CSSProperties) => ReactNode;
+}
+export declare const InputContent: ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, children, headerProps, as, size, }: InputContentComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Input/shared/InputContent.js

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, useMemo } from "react";
+import useMeasure from "react-use-measure";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputSide } from "../../shared/input.cva.js";
+import { Loader } from "../../../status/Loader/Loader.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+const InputContent = ({
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  unit,
+  isLoading,
+  isDisabled,
+  action,
+  isClearable,
+  value,
+  onChange,
+  children,
+  headerProps,
+  as,
+  size
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+  const [leadingContentRef, { width: leadingWidth }] = useMeasure();
+  const [trailingContentRef, { width: trailingWidth }] = useMeasure();
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+  const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
+  const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
+  const showClear = isClearable && !!value;
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
+    return {
+      paddingLeft: `calc(var(${inputSideCva({ size, type: "var" })}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
+      paddingRight: `calc(var(${inputSideCva({ size, type: "var" })}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`
+    };
+  }, [leadingWidth, trailingWidth, labelWidth, as, size, inputSideCva]);
+  return /* @__PURE__ */ jsxs("div", { className: "group/input-content relative", children: [
+    as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+      FormFieldLabel,
+      {
+        ref: labelContentRef,
+        as,
+        ...headerProps
+      }
+    ),
+    children(style),
+    LeadingIcon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: leadingContentRef,
+        className: clsx(
+          "-translate-y-1/2 absolute top-1/2 left-input-side-default",
+          !isLeadingIconElement && "pointer-events-none",
+          inputSideCva({ size, type: "left" })
+        ),
+        children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trailingContentRef,
+        className: clsx(
+          "-translate-y-1/2 absolute top-1/2 flex items-center gap-2",
+          !isTrailingIconElement && !action && !showClear && "pointer-events-none",
+          inputSideCva({ size, type: "right" })
+        ),
+        children: [
+          showClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => onChange?.("") }),
+          unit && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              as: "span",
+              size: "label-2",
+              variant: "prominent-1",
+              className: "text-text-default-3",
+              children: unit
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx("div", { className: "inline-flex", children: /* @__PURE__ */ jsx(Loader, {}) }),
+          !isLoading && action && /* @__PURE__ */ jsx(
+            InlineIconButton,
+            {
+              color: "secondary",
+              icon: action.icon,
+              isDisabled,
+              onPress: action.onClick,
+              excludeFromTabOrder: true,
+              label: action.altText,
+              className: action.className
+            }
+          ),
+          !isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+        ]
+      }
+    )
+  ] });
+};
+export {
+  InputContent
+};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { InputComponentProps, InputDefBaseProps } from '#ui/components/inputs/Inputs/InputItem';
+import { AllowedComponentType, DefaultComponentType } from '#ui/helpers/dynamicInputs';
+type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
+type FieldProps<TProps = {}> = {
+    label: string;
+    placeholder?: string;
+} & TProps;
+type FieldComponentProps<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>, T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined> = FieldProps<InputDefBaseProps<InputComponentProps<T extends AllowedComponentType<TSchema["shape"][K]> ? T : DefaultComponentType<TSchema["shape"][K]>>>> & {
+    inputType?: T extends AllowedComponentType<TSchema["shape"][K]> ? T : never;
+};
+type FieldComponents<TSchema extends z.ZodObject<any>> = {
+    [K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined>(props: FieldComponentProps<TSchema, K, T>) => ReactNode;
+};
+interface FormProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
+    form: UseFormReturn<TSchemaType>;
+    schema: TSchema;
+    onSubmit: SubmitHandler<TSchemaType>;
+    onError?: SubmitErrorHandler<TSchemaType>;
+    className?: string;
+    children: (components: FieldComponents<TSchema>) => ReactNode;
+}
+export declare function Form<TSchema extends z.ZodObject<any>>({ form, schema, onSubmit, onError, className, children, }: FormProps<TSchema>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Inputs/Form.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { z } from "zod";
+import { InputItem } from "./InputItem.js";
+import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js";
+import { StringUtils } from "../../../utils/string.utils.js";
+import { ZodUtils } from "../../../utils/zod.utils.js";
+const createFieldComponent = (field, schemaKeyType, form) => {
+  return function FieldComponent({
+    inputType,
+    label,
+    placeholder,
+    ...inputProps
+  }) {
+    const name = field;
+    const type = inputType ?? getDefaultInputComponentType(schemaKeyType);
+    const unwrappedKeyType = ZodUtils.unwrapZodType(schemaKeyType);
+    const defaultProps = unwrappedKeyType instanceof z.ZodArray ? { selectionMode: "multiple" } : {};
+    const inputDef = {
+      name,
+      type,
+      label,
+      placeholder,
+      props: { ...defaultProps, ...inputProps }
+    };
+    return /* @__PURE__ */ jsx(
+      InputItem,
+      {
+        form,
+        inputDef
+      }
+    );
+  };
+};
+function Form({
+  form,
+  schema,
+  onSubmit,
+  onError,
+  className,
+  children
+}) {
+  const components = useMemo(() => {
+    const fieldComponents = {};
+    const fields = Object.keys(schema.shape);
+    for (const field of fields) {
+      const componentName = StringUtils.capitalize(String(field));
+      const schemaKeyType = schema.shape[field];
+      fieldComponents[componentName] = createFieldComponent(
+        field,
+        schemaKeyType,
+        form
+      );
+    }
+    return fieldComponents;
+  }, [schema.shape, form]);
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: form.handleSubmit(onSubmit, onError),
+      className,
+      children: children(components)
+    }
+  );
+}
+export {
+  Form
+};

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -0,0 +1,73 @@
+import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { Control, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { HasRequiredProperty } from '#ui/types/common';
+declare const componentRegistry: {
+    readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('#ui/components/inputs/Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
+    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly select: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('#ui/components/inputs/Selection/Select/Select').ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('#ui/components/inputs/Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('#ui/types/common').OmitDiscriminatedUnion<import('#ui/components/inputs/Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
+        id: infer InferredKey extends import('react-aria').Key;
+    } ? InferredKey : never>, "onChange" | "value" | "isLoading" | "items" | "selectionMode" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
+        id: infer InferredKey extends import('react-aria').Key;
+    } ? InferredKey : never> & {
+        query: Parameters<TQueryFn>[0] extends {
+            search?: string;
+        } ? TQueryFn : never;
+        queryParams?: Omit<Parameters<TQueryFn>[0], "search"> | undefined;
+        queryOptions?: Parameters<TQueryFn>[1] | undefined;
+    })) => import("react/jsx-runtime").JSX.Element;
+    readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
+    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('#ui/components/inputs/DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('#ui/components/inputs/DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('#ui/components/inputs/DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('#ui/components/inputs/TextEditor/TextEditor').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly unknown: null;
+};
+export type InputComponentRegistry = typeof componentRegistry;
+export type InputComponentType = keyof InputComponentRegistry;
+interface InputItemProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
+    form: UseFormReturn<TSchemaType>;
+    inputDef: InputDef<TSchemaType>;
+}
+export type InputDef<TSchemaType extends Record<string, any>> = {
+    [T in InputComponentType]: T extends "unknown" ? never : {
+        [K in keyof TSchemaType]: TypeBasedInputDef<TSchemaType, T, K> | RenderBasedInputDef<TSchemaType, K>;
+    }[keyof TSchemaType];
+}[InputComponentType];
+type TypeBasedInputDef<TSchemaType extends Record<string, any>, T extends InputComponentType, K extends keyof TSchemaType> = {
+    type: T;
+    name: K;
+    label: string;
+    placeholder?: string;
+    inputWrapper?: InputWrapperType;
+    render?: never;
+} & (HasRequiredProperty<InputDefBaseProps<InputComponentProps<T>>> extends true ? {
+    props?: InputDefBaseProps<InputComponentProps<T>>;
+} : {
+    props: InputDefBaseProps<InputComponentProps<T>>;
+});
+interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
+    type?: never;
+    name: K;
+    label?: never;
+    placeholder?: never;
+    props?: never;
+    inputWrapper?: never;
+    render: (formControl: {
+        control: Control<TSchemaType>;
+        name: K;
+    }, form: UseFormReturn<TSchemaType>) => ReactElement;
+}
+export type InputWrapperType = (children: ReactNode, label: string) => ReactElement;
+export type InputComponentProps<T extends InputComponentType> = InputComponentRegistry[T] extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<any> ? ComponentProps<InputComponentRegistry[T]> : null;
+export type InputDefBaseProps<TProps> = Omit<TProps, "formControl" | "label" | "placeholder" | "children">;
+export declare function InputItem<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>>({ form, inputDef }: InputItemProps<TSchema, TSchemaType>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/inputs/Inputs/InputItem.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { DatePicker } from "../DateTime/DatePicker/DatePicker.js";
+import { DateRangePicker } from "../DateTime/DateRangePicker/DateRangePicker.js";
+import { DateTimePicker } from "../DateTime/DateTimePicker/DateTimePicker.js";
+import { TimePicker } from "../DateTime/TimePicker/TimePicker.js";
+import { NumberInput } from "../Input/NumberInput/NumberInput.js";
+import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
+import { TextArea } from "../Input/TextArea/TextArea.js";
+import { TextInput } from "../Input/TextInput/TextInput.js";
+import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
+import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.js";
+import { Select } from "../Selection/Select/Select.js";
+import { Slider } from "../Slider/Slider.js";
+import { TextEditor } from "../TextEditor/TextEditor.js";
+import { Toggle } from "../Toggle/Toggle.js";
+import { Segment } from "../../segment/Segment.js";
+const componentRegistry = {
+  toggle: Toggle,
+  checkbox: Checkbox,
+  numberInput: NumberInput,
+  slider: Slider,
+  textInput: TextInput,
+  passwordInput: PasswordInput,
+  textArea: TextArea,
+  select: Select,
+  autocomplete: Autocomplete,
+  queryAutocomplete: QueryAutocomplete,
+  segment: Segment,
+  datePicker: DatePicker,
+  dateTimePicker: DateTimePicker,
+  timePicker: TimePicker,
+  dateRangePicker: DateRangePicker,
+  textEditor: TextEditor,
+  unknown: null
+};
+function InputItem({ form, inputDef }) {
+  const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
+  const formControl = { control: form.control, name };
+  if (render) {
+    return render(formControl, form);
+  }
+  if (!type) {
+    return null;
+  }
+  const Component = componentRegistry[type];
+  const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
+  const inputProps = props ?? {};
+  const inputComponent = /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...inputProps,
+      label: usesChildrenAsLabel ? void 0 : label,
+      placeholder,
+      formControl,
+      children: usesChildrenAsLabel ? label : void 0
+    }
+  );
+  return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+}
+export {
+  InputItem
+};

package/dist/components/inputs/Inputs/Inputs.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { InputDef } from './InputItem';
+export interface InputsProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
+    form: UseFormReturn<TSchemaType>;
+    inputDefs: Array<InputDef<TSchemaType>>;
+    children?: (inputs: Record<keyof TSchemaType, ReactNode>) => ReactNode;
+}
+export declare function Inputs<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>>({ form, inputDefs, children, }: InputsProps<TSchema, TSchemaType>): string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;

package/dist/components/inputs/Inputs/Inputs.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { InputItem } from "./InputItem.js";
+function Inputs({
+  form,
+  inputDefs,
+  children
+}) {
+  if (!children) {
+    return inputDefs.map((inputDef) => /* @__PURE__ */ jsx(
+      InputItem,
+      {
+        form,
+        inputDef
+      },
+      String(inputDef.name)
+    ));
+  }
+  const childrenParams = {};
+  for (const inputDef of inputDefs) {
+    childrenParams[inputDef.name] = /* @__PURE__ */ jsx(
+      InputItem,
+      {
+        form,
+        inputDef
+      }
+    );
+  }
+  return children(childrenParams);
+}
+export {
+  Inputs
+};

package/dist/components/inputs/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement, Ref } from 'react';
+import { RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
+import { RadioVariantProps } from '#ui/components/inputs/RadioGroup/radio.cva';
+import { ControlProps } from '#ui/components/inputs/shared/form.types';
+interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<AriaRadioGroupProps, "className"> {
+    ref?: Ref<HTMLDivElement>;
+    options: {
+        label: string | ReactElement;
+        value: string;
+    }[];
+}
+export interface RadioGroupProps extends RadioGroupBaseProps {
+}
+export type ControlledRadioGroupProps<TFieldValues extends FieldValues> = ControlProps<RadioGroupProps, TFieldValues>;
+export declare const RadioGroup: <TFieldValues extends FieldValues>(props: ControlledRadioGroupProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};