@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,170 @@
+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 { Tooltip } from "../../../overlays/Tooltip/Tooltip.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+const TooltipWrapper = (props) => {
+  if (props.as !== "inline") {
+    return props.children;
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      text: props.error || void 0,
+      placement: "bottom",
+      color: "error",
+      hidden: !props.error,
+      isNonInteractiveTrigger: true,
+      children: /* @__PURE__ */ jsx("div", { children: props.children })
+    }
+  );
+};
+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(TooltipWrapper, { ...props, children: /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: clsx(
+        "group w-full",
+        {
+          "h-full": as === "inline"
+        },
+        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/{src → dist}/components/inputs/Input/shared/InputContent.d.ts

@@ -1,7 +1,7 @@
 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';
+import { InlineIconButtonProps } from '../../../buttons/InlineIconButton/InlineIconButton';
+import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
+import { InputVariantProps } from '../../shared/input.cva';
 export interface InputContentProps {
     className?: string;
     unit?: string;

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

@@ -0,0 +1,114 @@
+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: clsx("group/input-content relative", {
+        "h-full": as === "inline"
+      }),
+      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",
+              !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/{src → dist}/components/inputs/Inputs/Form.d.ts

@@ -1,8 +1,8 @@
 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';
+import { InputComponentProps, InputDefBaseProps } from './InputItem';
+import { AllowedComponentType, DefaultComponentType } from '../../../helpers/dynamicInputs';
 type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
 type FieldProps<TProps = {}> = {
     label: string;

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/{src → dist}/components/inputs/Inputs/InputItem.d.ts

@@ -1,18 +1,18 @@
 import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
-import { HasRequiredProperty } from '#ui/types/common';
+import { HasRequiredProperty } from '../../../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 {
+    readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../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('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
+    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../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('../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('../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('../../../types/common').OmitDiscriminatedUnion<import('../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;
@@ -24,11 +24,11 @@ declare const componentRegistry: {
         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 datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../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('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../TextEditor/TextEditor').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;

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.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/{src → dist}/components/inputs/RadioGroup/RadioGroup.d.ts

@@ -1,9 +1,9 @@
 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';
+import { FormFieldProps } from '../FormField/FormField';
+import { RadioVariantProps } from './radio.cva';
+import { ControlProps } from '../shared/form.types';
 interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<AriaRadioGroupProps, "className"> {
     ref?: Ref<HTMLDivElement>;
     options: {

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { radio, radioTypography, radioIndicatorClass } from "./radio.cva.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const RadioGroupBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const radioCva = uiStyle?.radio?.cva ?? radio;
+  const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    options,
+    variant = ui.radioGroup.variant,
+    hideLabel = ui.radioGroup.hideLabel,
+    ...rest
+  } = props;
+  const formFieldProps = {
+    className,
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1,
+    {
+      ...rest,
+      isDisabled,
+      isInvalid: !!error,
+      children: /* @__PURE__ */ jsx(FormField, { ...formFieldProps, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option) => /* @__PURE__ */ jsxs(
+        Radio,
+        {
+          value: option.value,
+          className: radioIndicatorClass,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: radioCva({
+                  variant,
+                  ...rest
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "absolute hidden size-1 rounded-full group-selected:block",
+                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })
+          ]
+        },
+        option.value
+      )) }) })
+    }
+  );
+};
+const RadioGroup = (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(
+          RadioGroupBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            name: field.name,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RadioGroupBase, { ...props });
+};
+export {
+  RadioGroup
+};

package/{src → dist}/components/inputs/RadioGroup/radio.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const radio: (props?: ({
     variant?: "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;