@axzydev/axzy_ui_system 1.2.16 → 1.3.0

package/src/components/organisms/form-builder/formBuilder.tsx

@@ -1,16 +1,26 @@
+import { useMemo } from "react";
 import ITInput from "@/components/atoms/input/input";
 import ITSelect from "@/components/molecules/select/select";
 import { ITFormBuilderProps } from "./formBuilder.props";
 import ITDatePicker from "@/components/molecules/date-picker/datePicker";
-import { useEffect, useState, useMemo } from "react";
 import { ITFormBuilderProvider } from "./formBuilder.context";
 import ITFieldRenderer from "./fieldRenderer";
 import { formGrid, getColSpanClass } from "@/utils/styles";
 
+/**
+ * Builds the `dependentValues` slice that drives a field's `renderWhen` and
+ * `dynamicProps` rules. Only the keys listed in `dependsOn` are forwarded, so
+ * the field re-renders only when one of its declared dependencies actually
+ * changes (memo-friendly).
+ *
+ * @param dependsOn - Sibling field names declared in {@link FieldConfigV2.dependsOn}.
+ * @param values - The full form values object.
+ * @returns A filtered object; empty when `dependsOn` is missing or empty.
+ */
 function buildDependentValues(
   dependsOn: string[] | undefined,
   values: Record<string, any>,
-) {
+): Record<string, any> {
   if (!dependsOn || dependsOn.length === 0) return {};
   const deps: Record<string, any> = {};
   for (const key of dependsOn) {
@@ -20,35 +30,89 @@ function buildDependentValues(
 }
 
 /**
- * Dynamic form generator from field definitions with validation support.
- * Renders a responsive grid of inputs, selects, and date pickers based on
- * the provided field configuration. Supports both legacy (`fields`) and
- * V2 (`config`) field definition formats.
+ * Reads the new value out of either a native React change event (`e.target.value`)
+ * or an already-extracted payload (Formik's `setFieldValue` call sites do this
+ * for custom components).
+ *
+ * @param arg - Either a React change event or a raw value.
+ * @returns The unwrapped string value.
+ */
+function unwrapChangeValue(arg: any): string {
+  return arg && typeof arg === "object" && "target" in arg ? arg.target.value : arg;
+}
+
+/**
+ * `ITFormBuilder` is a declarative form generator. It renders a responsive
+ * grid of inputs from either a legacy V1 `fields` array or the richer V2
+ * `config` array and wires every rendered input/select/date to the supplied
+ * Formik-style `handleChange`/`handleBlur`/`setFieldValue` callbacks.
+ *
+ * **V2 features (recommended):**
+ * - Rules engine: `renderWhen`, `dynamicProps`, `dependsOn`.
+ * - Section grouping with `type: "section"`.
+ * - Custom renderers with `type: "custom"`.
+ * - Async option loaders via `options: () => Promise<...>`.
+ * - Per-field `onChangeAction` for derived fields and side effects.
+ * - Nested sections and grids via `fields?: FieldConfigV2[]`.
  *
- * @example
+ * **V1 (legacy):**
+ * The `fields` prop accepts a simpler shape (`text` / `number` / `password` /
+ * `select` / `date`) without rules, sections, or async options. Kept for
+ * backward compatibility.
+ *
+ * The component is fully controlled: it does not own form state. Wrap it in a
+ * Formik `<Formik>` (or any state holder of your choice) and forward its
+ * `values`, `handleChange`, `handleBlur`, `touched`, `errors`, and
+ * `setFieldValue` props.
+ *
+ * @example Minimal login form (V1)
+ * ```tsx
  * <ITFormBuilder
  *   fields={[
- *     { name: "email", label: "Email", type: "text", required: true, column: 6 },
- *     { name: "role", label: "Role", type: "select", options: [{ id: 1, label: "Admin" }], column: 6 },
+ *     { name: "email", label: "Email", type: "text", required: true, column: 12 },
+ *     { name: "password", label: "Password", type: "password", required: true, column: 12 },
  *   ]}
- *   values={formValues}
- *   handleChange={handleChange}
- *   handleBlur={handleBlur}
- *   touched={touched}
- *   errors={errors}
- *   columns={12}
+ *   values={formik.values}
+ *   handleChange={formik.handleChange}
+ *   handleBlur={formik.handleBlur}
+ *   touched={formik.touched}
+ *   errors={formik.errors}
  * />
+ * ```
+ *
+ * @example Conditional RFC field with derived total (V2)
+ * ```tsx
+ * const config: FieldConfigV2[] = [
+ *   { name: "country", label: "País", type: "select", required: true,
+ *     options: [{ value: "MX", label: "México" }, { value: "US", label: "USA" }] },
+ *   { name: "rfc", label: "RFC", type: "text", required: true,
+ *     dependsOn: ["country"], renderWhen: (v) => v.country === "MX" },
+ *   { name: "subtotal", label: "Subtotal", type: "number", currencyFormat: true,
+ *     onChangeAction: (val, ctx) => ctx.setFieldValue("total", (Number(val) * 1.16).toFixed(2)) },
+ *   { name: "total", label: "Total", type: "number", currencyFormat: true, disabled: true },
+ * ];
  *
- * @example
  * <ITFormBuilder
- *   config={v2FieldConfigs}
- *   values={formValues}
- *   handleChange={handleChange}
- *   handleBlur={handleBlur}
- *   touched={touched}
- *   errors={errors}
- *   isSubmitting={loading}
+ *   config={config}
+ *   values={formik.values}
+ *   handleChange={formik.handleChange}
+ *   handleBlur={formik.handleBlur}
+ *   touched={formik.touched}
+ *   errors={formik.errors}
+ *   setFieldValue={formik.setFieldValue}
  * />
+ * ```
+ *
+ * @example Reading form progress from a custom submit button
+ * ```tsx
+ * const SubmitButton = () => {
+ *   const { progress } = useFormBuilder();
+ *   return <button disabled={progress < 100}>Submit ({progress}%)</button>;
+ * };
+ *
+ * <ITFormBuilder config={config} values={...} ... />
+ * <SubmitButton />
+ * ```
  */
 export default function ITFormBuilder({
   fields,
@@ -63,29 +127,40 @@ export default function ITFormBuilder({
   setFieldTouched = () => Promise.resolve(),
   setFieldError = () => {},
   isSubmitting = false,
+  children,
 }: ITFormBuilderProps) {
-  const [, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const providerValue = useMemo(() => ({
-    config: config || [],
-    values: values || {},
-    errors: errors || {},
-    touched: touched || {},
-    handleChange,
-    handleBlur,
-    setFieldValue,
-    setFieldTouched,
-    setFieldError,
-    initialValues: {},
-    isSubmitting,
-    isValidating: false,
-    submitCount: 0,
-  }), [config, values, errors, touched, handleChange, handleBlur, setFieldValue, setFieldTouched, setFieldError, isSubmitting]);
+  const providerValue = useMemo(
+    () => ({
+      config: config || [],
+      values: (values as Record<string, any>) || {},
+      errors: (errors as Record<string, string>) || {},
+      touched: (touched as Record<string, boolean>) || {},
+      handleChange,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched,
+      setFieldError,
+      initialValues: {} as Record<string, any>,
+      isSubmitting,
+      isValidating: false,
+      submitCount: 0,
+    }),
+    [
+      config,
+      values,
+      errors,
+      touched,
+      handleChange,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched,
+      setFieldError,
+      isSubmitting,
+    ],
+  );
 
+  // V2 path: render inside the context provider so custom children (sections,
+  // custom renderers, useFormBuilder() consumers) can read the registry.
   if (config) {
     return (
       <ITFormBuilderProvider value={providerValue}>
@@ -95,17 +170,20 @@ export default function ITFormBuilder({
               key={fieldConfig.name}
               config={fieldConfig}
               columns={columns}
-              value={values[fieldConfig.name]}
-              error={errors[fieldConfig.name]}
-              touched={touched[fieldConfig.name]}
-              dependentValues={buildDependentValues(fieldConfig.dependsOn, values)}
+              value={(values as Record<string, any>)[fieldConfig.name]}
+              error={(errors as Record<string, string>)[fieldConfig.name]}
+              touched={(touched as Record<string, boolean>)[fieldConfig.name]}
+              dependentValues={buildDependentValues(fieldConfig.dependsOn, values as Record<string, any>)}
             />
           ))}
         </div>
+        {children}
       </ITFormBuilderProvider>
     );
   }
 
+  // V1 path: legacy inline renderer. Kept for backward compatibility with the
+  // original `fields` API. No context is provided.
   return (
     <div className={formGrid(columns)}>
       {fields?.map(({
@@ -137,17 +215,17 @@ export default function ITFormBuilder({
                     label={label}
                     placeholder={placeholder}
                     disabled={disabled}
-                    value={values[name]}
+                    value={(values as Record<string, any>)[name]}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       handleChange(e);
-                      if (onChangeAction && setFieldValue) {
-                        onChangeAction(e.target.value, setFieldValue);
+                      if (onChangeAction) {
+                        onChangeAction(unwrapChangeValue(e), setFieldValue);
                       }
                     }}
                     onBlur={handleBlur}
                     currencyFormat={props.currencyFormat}
-                    touched={touched[name]}
-                    error={errors[name]}
+                    touched={(touched as Record<string, boolean>)[name]}
+                    error={(errors as Record<string, string>)[name]}
                     required={required}
                     iconRight={props.rightIcon}
                     iconLeft={props.leftIcon}
@@ -166,18 +244,18 @@ export default function ITFormBuilder({
                     disabled={disabled}
                     label={label}
                     placeholder={placeholder}
-                    value={values[name]}
+                    value={(values as Record<string, any>)[name]}
                     valueField={valueField}
                     labelField={labelField}
                     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                       handleChange(e);
-                      if (onChangeAction && setFieldValue) {
-                        onChangeAction(e.target.value, setFieldValue);
+                      if (onChangeAction) {
+                        onChangeAction(unwrapChangeValue(e), setFieldValue);
                       }
                     }}
                     onBlur={handleBlur}
-                    touched={touched[name]}
-                    error={errors[name]}
+                    touched={(touched as Record<string, boolean>)[name]}
+                    error={(errors as Record<string, string>)[name]}
                     required={required}
                   />
                 );
@@ -187,25 +265,30 @@ export default function ITFormBuilder({
                     name={name}
                     disabled={disabled}
                     label={label}
-                    value={values[name]}
-                    onChange={(
-                      e:
-                        | React.ChangeEvent<HTMLInputElement>
-                        | { target: { name: string; value: Date } }
-                    ) => {
+                    value={(values as Record<string, any>)[name]}
+                    onChange={(e: any) => {
                       handleChange(e);
-                      if (onChangeAction && setFieldValue) {
-                        onChangeAction(e.target.value, setFieldValue);
+                      if (onChangeAction) {
+                        onChangeAction(unwrapChangeValue(e), setFieldValue);
                       }
                     }}
                     placeholder={placeholder}
                     onBlur={handleBlur}
-                    touched={touched[name]}
-                    error={errors[name]}
+                    touched={(touched as Record<string, boolean>)[name]}
+                    error={(errors as Record<string, string>)[name]}
                     required={required}
                   />
                 );
               default:
+                // V1 has no implicit fallback: unknown types are skipped so a
+                // typo or unsupported `type` does not render a broken input.
+                if (typeof console !== "undefined" && process.env.NODE_ENV !== "production") {
+                  console.warn(
+                    `[ITFormBuilder] Unknown legacy V1 field type "${type}" for field "${name}". ` +
+                      `Supported V1 types: text, number, password, select, date. ` +
+                      `For richer features switch to the V2 \`config\` prop.`,
+                  );
+                }
                 return null;
             }
           })()}
@@ -213,4 +296,4 @@ export default function ITFormBuilder({
       ))}
     </div>
   );
-}
+}

package/src/components/organisms/form-builder/useFormBuilder.ts

@@ -2,46 +2,84 @@ import { useMemo } from 'react';
 import { useITFormBuilderContext } from './formBuilder.context';
 import type { FieldConfigV2 } from '@/types/field.types';
 
+/**
+ * Public hook for accessing the live form state from inside (or alongside) an
+ * {@link ITFormBuilder}. Must be used by a descendant of `ITFormBuilderProvider`
+ * (which is mounted automatically when `ITFormBuilder` receives the V2 `config`
+ * prop).
+ *
+ * Returns the full form context plus two derived values:
+ * - `progress`: 0..100 percentage of required fields that are filled and have
+ *   no error. Returns `100` when no required fields are registered or when the
+ *   registry is empty.
+ * - `isDirty`: `true` when at least one field has been touched.
+ *
+ * @example Reading progress and triggering a submit
+ * ```tsx
+ * const SubmitButton = () => {
+ *   const { progress, isSubmitting } = useFormBuilder();
+ *   return (
+ *     <button disabled={progress < 100 || isSubmitting}>
+ *       {isSubmitting ? "Saving..." : `Submit (${progress}%)`}
+ *     </button>
+ *   );
+ * };
+ * ```
+ */
 export const useFormBuilder = () => {
   const context = useITFormBuilderContext();
-  const { values, errors, touched } = context;
+  const { values, errors, touched, getAllFieldConfigs } = context;
 
   const progress = useMemo(() => {
-    const requiredFields = Object.keys(context.getFieldConfig).filter((name) => {
-        const config = context.getFieldConfig(name);
-        if (!config) return false;
-        if (typeof config.required === 'function') {
-           return config.required(values);
-        }
-        return config.required;
+    const allConfigs = getAllFieldConfigs();
+
+    const requiredFields = allConfigs.filter((cfg) => {
+      if (typeof cfg.required === 'function') {
+        return cfg.required(values);
+      }
+      return !!cfg.required;
     });
 
     if (requiredFields.length === 0) return 100;
 
     let filledFields = 0;
-    requiredFields.forEach((fieldName) => {
-      const val = values[fieldName];
+    for (const cfg of requiredFields) {
+      const val = values[cfg.name];
       const hasValue = val !== undefined && val !== null && val !== '';
-      const hasError = !!errors[fieldName];
+      const hasError = !!errors[cfg.name];
       if (hasValue && !hasError) filledFields++;
-    });
+    }
 
     return Math.round((filledFields / requiredFields.length) * 100);
-  }, [values, errors, context]);
+  }, [values, errors, getAllFieldConfigs]);
+
+  const isDirty = useMemo(
+    () => Object.values(touched).some(Boolean),
+    [touched]
+  );
 
   return {
     ...context,
     progress,
-    isDirty: Object.keys(touched).length > 0,
+    isDirty,
   };
 };
 
 /**
- * Hook to evaluate dynamic rules using only the dependent values passed as props.
- * This avoids subscribing to the entire `values` context, enabling true React.memo isolation.
+ * Hook that evaluates the dynamic rules of a single field given the values of
+ * its declared `dependsOn` siblings. Designed to be cheap: it does NOT subscribe
+ * to the entire `values` map, only to the subset passed as `dependentValues`,
+ * which enables `React.memo` isolation across siblings.
  *
- * `dependentValues` should be a filtered object containing only the fields this
- * field depends on (derived from `dependsOn` in FieldConfigV2).
+ * `dependentValues` should be the filtered slice of `values` containing only
+ * the keys listed in {@link FieldConfigV2.dependsOn}. The {@link ITFormBuilder}
+ * computes this slice per-field automatically.
+ *
+ * Returned shape:
+ * - `isVisible`: whether the field should render at all (controls `renderWhen`).
+ * - `dynamicProps`: partial override produced by `dynamicProps(dependentValues)`.
+ * - `isRequired`: resolved `required` (dynamic > function > boolean).
+ * - `isDisabled`: resolved `disabled` (dynamic > function > boolean).
  */
 export const useFieldRules = (
   config: FieldConfigV2,
@@ -65,7 +103,7 @@ export const useFieldRules = (
     if (typeof fieldConfig.required === 'function') {
       return fieldConfig.required(dependentValues);
     }
-    return fieldConfig.required || false;
+    return !!fieldConfig.required;
   }, [fieldConfig, dynamicProps.required, dependentValues]);
 
   const isDisabled = useMemo(() => {
@@ -73,8 +111,8 @@ export const useFieldRules = (
     if (typeof fieldConfig.disabled === 'function') {
       return fieldConfig.disabled(dependentValues);
     }
-    return fieldConfig.disabled || false;
+    return !!fieldConfig.disabled;
   }, [fieldConfig, dynamicProps.disabled, dependentValues]);
 
   return { isVisible, dynamicProps, isRequired, isDisabled };
-};
+};

package/src/hooks/useFloatingPanel.ts

@@ -0,0 +1,100 @@
+import { CSSProperties, RefObject, useCallback, useLayoutEffect, useRef, useState } from "react";
+
+/** Options for {@link useFloatingPanel}. */
+export interface UseFloatingPanelOptions {
+  /** Fallback panel height in px, used before the panel is measured. */
+  estimatedHeight?: number;
+  /** Gap in px between the anchor and the panel. */
+  offset?: number;
+  /** When true, the panel width matches the anchor width. */
+  matchWidth?: boolean;
+  /** Horizontal alignment relative to the anchor. @default "start" */
+  align?: "start" | "end";
+  /** Panel z-index. */
+  zIndex?: number;
+}
+
+/**
+ * Computes a fixed position for a floating panel anchored to an element.
+ *
+ * Positions are relative to the viewport, so the panel must be rendered
+ * through a portal (e.g. into `document.body`) to escape ancestors with
+ * `overflow: hidden` or `transform`, which otherwise clip or re-anchor it.
+ * When there is not enough room below, the panel flips above and its bottom
+ * edge is pinned to the anchor's top, so it always stays adjacent regardless
+ * of its real height. Repositions on scroll, resize, and panel resize.
+ *
+ * @param anchorRef - Ref to the element the panel is anchored to.
+ * @param isOpen - Whether the panel is currently open.
+ * @param options - Sizing and placement options.
+ * @returns `panelRef` to attach to the portaled panel and the `style` to apply.
+ */
+export function useFloatingPanel(
+  anchorRef: RefObject<HTMLElement | null>,
+  isOpen: boolean,
+  {
+    estimatedHeight = 300,
+    offset = 4,
+    matchWidth = true,
+    align = "start",
+    zIndex = 70,
+  }: UseFloatingPanelOptions = {}
+) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<CSSProperties>({});
+
+  const update = useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+
+    const rect = anchor.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const panelHeight = panelRef.current?.offsetHeight || estimatedHeight;
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const flipAbove = spaceBelow < panelHeight + offset && spaceAbove > spaceBelow;
+
+    const width = matchWidth ? rect.width : undefined;
+    const panelWidth = panelRef.current?.offsetWidth ?? width ?? 0;
+    let left =
+      align === "end" && panelWidth
+        ? rect.right - panelWidth
+        : rect.left;
+    if (panelWidth) {
+      left = Math.max(8, Math.min(left, viewportWidth - panelWidth - 8));
+    }
+
+    setStyle({
+      position: "fixed",
+      left,
+      width,
+      zIndex,
+      ...(flipAbove
+        ? { top: "auto", bottom: viewportHeight - rect.top + offset }
+        : { top: rect.bottom + offset, bottom: "auto" }),
+    });
+  }, [anchorRef, estimatedHeight, offset, matchWidth, align, zIndex]);
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+
+    const observer = new ResizeObserver(update);
+    if (panelRef.current) observer.observe(panelRef.current);
+
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      observer.disconnect();
+    };
+  }, [isOpen, update]);
+
+  return { panelRef, style };
+}
+
+export default useFloatingPanel;

package/src/index.ts

@@ -4,9 +4,11 @@ import "./index.css";
 import useClickOutside from "./hooks/useClickOutside";
 import { useDebouncedSearch } from "./hooks/useDebouncedSearch";
 import { useEditableRow } from "./hooks/useEditableRow";
+import { useFloatingPanel } from "./hooks/useFloatingPanel";
 import { useTableState, UseTableStateOptions, UseTableStateResult } from "./hooks/useTableState";
 
 // COMPONENTES
+import ITAccordion from "./components/molecules/accordion/accordion";
 import ITAlert from "./components/molecules/alert/alert";
 import ITAvatar from "./components/atoms/avatar/avatar";
 import ITBadget from "./components/atoms/badget/badget";
@@ -15,6 +17,11 @@ import ITButton from "./components/atoms/button/button";
 import ITCalendar from "./components/molecules/calendar/calendar";
 import ITCard from "./components/molecules/card/card";
 import ITCheckbox from "./components/atoms/checkbox/checkbox";
+import ITChip from "./components/atoms/chip/chip";
+import ITChipInput from "./components/molecules/chip-input/chip-input";
+import ITDropdownMenu from "./components/molecules/dropdown-menu/dropdown-menu";
+import ITField from "./components/molecules/field/field";
+import ITMultiSelect from "./components/molecules/multi-select/multi-select";
 import ITConfirmDialog from "./components/organisms/confirm-dialog/confirm-dialog";
 import ITDataTable from "./components/organisms/data-table/dataTable";
 import ITDatePicker from "./components/molecules/date-picker/datePicker";
@@ -51,6 +58,7 @@ import ITTextarea from "./components/atoms/textarea/textarea";
 import ITTabs from "./components/molecules/tabs/tabs";
 import ITTripleFilter from "./components/organisms/triple-filter/tripleFilter";
 import ITToast from "./components/organisms/toast/toast";
+import ITWysiwyg from "./components/molecules/wysiwyg/wysiwyg";
 
 // PROPS
 import type { ITAlertProps } from "./components/molecules/alert/alert.props";
@@ -61,7 +69,13 @@ import type { ITButtonProps } from "./components/atoms/button/button.props";
 import type { ITCalendarProps } from "./components/molecules/calendar/calendar.props";
 import type { ITCardProps } from "./components/molecules/card/card.props";
 import type { ITCheckboxProps } from "./components/atoms/checkbox/checkbox.props";
+import type { ITChipProps } from "./components/atoms/chip/chip.props";
+import type { ITChipInputProps } from "./components/molecules/chip-input/chip-input.props";
 import type { ITConfirmDialogProps } from "./components/organisms/confirm-dialog/confirm-dialog.props";
+import type { ITAccordionProps, ITAccordionItem } from "./components/molecules/accordion/accordion.props";
+import type { ITDropdownMenuProps, ITDropdownMenuItem } from "./components/molecules/dropdown-menu/dropdown-menu.props";
+import type { ITFieldProps } from "./components/molecules/field/field.props";
+import type { ITMultiSelectProps, ITMultiSelectOption } from "./components/molecules/multi-select/multi-select.props";
 import type { ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse } from "./components/organisms/data-table/dataTable.props";
 import type { ITDatePickerProps } from "./components/molecules/date-picker/date-picker.props";
 import type { ITDialogProps } from "./components/organisms/dialog/dialog.props";
@@ -97,6 +111,7 @@ import type { ITTextareaProps } from "./components/atoms/textarea/textarea.props
 import type { ITTabsProps, ITTabItem } from "./components/molecules/tabs/tabs.props";
 import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/organisms/triple-filter/tripleFilter.props";
 import type { ITToastProps } from "./components/organisms/toast/toast.props";
+import type { ITWysiwygProps } from "./components/molecules/wysiwyg/wysiwyg.props";
 import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
 
 // UTILS
@@ -118,12 +133,14 @@ import { getContrastTextColor, isLightColor, resolveCssColor } from "./utils/col
 
 export {
   // Hooks
-  useClickOutside, useDebouncedSearch, useEditableRow, useTableState,
+  useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useTableState,
   createValidationSchema,
   // Components
+  ITAccordion,
   ITAlert, ITAvatar, ITBadget, ITBreadcrumbs, ITButton,
   ITCalendar,
-  ITCard, ITCheckbox, ITConfirmDialog, ITDataTable, ITDatePicker,
+  ITCard, ITCheckbox, ITChip, ITChipInput, ITConfirmDialog, ITDataTable, ITDatePicker,
+  ITDropdownMenu, ITField, ITMultiSelect,
   ITDialog, ITDivider, ITDrawer,
   ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITLayout,
   ITLoader,   ITNavbar, ITPage, ITPageHeader, ITPagination, ITPopover, ITProgress,
@@ -131,7 +148,7 @@ export {
   ITSearchTable,
   ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper,
   ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
-  useITTheme, useITThemeSafe, ITTimePicker, ITToast,
+  useITTheme, useITThemeSafe, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
   getContrastTextColor, isLightColor, resolveCssColor
 };
@@ -139,10 +156,12 @@ export {
   export type {
     Column, FieldConfig,
     FieldConfigV2,
+    ITAccordionItem, ITAccordionProps,
     ITAlertProps, ITAvatarProps, ITBadgetProps,
     ITBreadcrumbItem, ITBreadcrumbsProps, ITButtonProps,
     ITCalendarProps,
-    ITCardProps, ITCheckboxProps, ITConfirmDialogProps,
+    ITCardProps, ITCheckboxProps, ITChipProps, ITChipInputProps, ITConfirmDialogProps,
+    ITDropdownMenuItem, ITDropdownMenuProps, ITFieldProps, ITMultiSelectOption, ITMultiSelectProps,
     ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse, ITDatePickerProps,
     ITDialogProps, ITDividerProps, ITDrawerProps,
     ITEmptyStateProps, ITFlexProps,
@@ -159,6 +178,7 @@ export {
     ITTableProps, ITTabsProps, ITTabItem, ITTextProps, ITTextareaProps,
     ITTripleFilterProps, ITTripleFilterOption, ITThemeConfig, ITThemeProviderProps, ITThemePalette,
     ITTimePickerProps, ITToastProps,
+    ITWysiwygProps,
     UseTableStateOptions, UseTableStateResult
   };