@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/hooks/useEditableRow.ts

@@ -0,0 +1,157 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import * as yup from "yup";
+import type { SearchColumn } from "../components/searchTable/searchTable.props";
+
+interface UseEditableRowOptions<T> {
+  row: T;
+  columns: SearchColumn<T>[];
+  getNestedValue: (obj: unknown, path: string) => unknown;
+  validationSchema?: yup.ObjectSchema<any>;
+}
+
+interface UseEditableRowResult<T> {
+  editedRow: T;
+  errors: Record<string, string>;
+  isHovered: boolean;
+  setIsHovered: (v: boolean) => void;
+  hasErrors: boolean;
+  handleEdit: (onEdit?: (row: T) => void) => Promise<void>;
+  handleSave: (onSave?: (row: T) => void) => Promise<void>;
+  handleCancel: (onCancel?: () => void) => void;
+  handleChange: (key: string, value: any) => Promise<void>;
+  reset: () => void;
+}
+
+export function useEditableRow<T>({
+  row,
+  columns,
+  getNestedValue,
+  validationSchema,
+}: UseEditableRowOptions<T>): UseEditableRowResult<T> {
+  const [isHovered, setIsHovered] = useState(false);
+  const [editedRow, setEditedRow] = useState<T>({ ...row });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const rowRef = useRef(row);
+  rowRef.current = row;
+
+  const validateAll = useCallback(
+    async (rowData: T): Promise<Record<string, string>> => {
+      const newErrors: Record<string, string> = {};
+
+      if (validationSchema) {
+        try {
+          await validationSchema.validate(rowData, { abortEarly: false });
+        } catch (yupError) {
+          if (yupError instanceof yup.ValidationError) {
+            yupError.inner.forEach((error) => {
+              if (error.path) newErrors[error.path] = error.message;
+            });
+          }
+        }
+      }
+
+      columns.forEach((col) => {
+        if (col.editable && col.validation && !newErrors[col.key]) {
+          const value = getNestedValue(rowData, col.key);
+          const error = col.validation(value, rowData);
+          if (error) newErrors[col.key] = error;
+        }
+      });
+
+      return newErrors;
+    },
+    [columns, getNestedValue, validationSchema]
+  );
+
+  const handleEdit = useCallback(
+    async (onEdit?: (row: T) => void) => {
+      if (onEdit) {
+        onEdit(rowRef.current);
+        const clone = { ...rowRef.current };
+        setEditedRow(clone);
+        const initialErrors = await validateAll(clone);
+        setErrors(initialErrors);
+      }
+    },
+    [validateAll]
+  );
+
+  const handleSave = useCallback(
+    async (onSave?: (row: T) => void) => {
+      const finalErrors = await validateAll(editedRow);
+      if (Object.keys(finalErrors).length > 0) {
+        setErrors(finalErrors);
+        return;
+      }
+      if (onSave) onSave(editedRow);
+    },
+    [editedRow, validateAll]
+  );
+
+  const handleCancel = useCallback((onCancel?: () => void) => {
+    if (onCancel) onCancel();
+    setEditedRow({ ...rowRef.current });
+    setErrors({});
+  }, []);
+
+  const handleChange = useCallback(
+    async (key: string, value: any) => {
+      const column = columns.find((col) => col.key === key);
+      let processedValue = value;
+
+      if (column) {
+        switch (column.type) {
+          case "number":
+            processedValue =
+              value === "" || value === null ? null : Number(value);
+            break;
+          case "boolean":
+            if (value === "" || value === null || value === undefined) {
+              processedValue = false;
+            } else if (typeof value === "string") {
+              processedValue = value === "true" || value === "1";
+            } else {
+              processedValue = Boolean(value);
+            }
+            break;
+          case "date":
+            processedValue = value ? new Date(value).toISOString() : null;
+            break;
+          case "catalog":
+            processedValue = value ?? null;
+            break;
+          default:
+            processedValue = value ?? "";
+            break;
+        }
+      }
+
+      setEditedRow((prev) => {
+        const updated = { ...prev, [key]: processedValue };
+        validateAll(updated).then(setErrors);
+        return updated;
+      });
+    },
+    [columns, validateAll]
+  );
+
+  const reset = useCallback(() => {
+    setEditedRow({ ...rowRef.current });
+    setErrors({});
+  }, []);
+
+  const hasErrors = useMemo(() => Object.keys(errors).length > 0, [errors]);
+
+  return {
+    editedRow,
+    errors,
+    isHovered,
+    setIsHovered,
+    hasErrors,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleChange,
+    reset,
+  };
+}

package/src/hooks/useTableState.ts

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useState } from "react";
+
+interface SortConfig {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+export interface UseTableStateOptions {
+  defaultItemsPerPage?: number;
+  initialSort?: SortConfig | null;
+}
+
+export interface UseTableStateResult {
+  currentPage: number;
+  itemsPerPage: number;
+  filters: Record<string, string | boolean | number>;
+  sortConfig: SortConfig | null;
+  totalPages: number;
+  setTotalPages: (pages: number) => void;
+  goToPage: (page: number) => void;
+  handleItemsPerPageChange: (value: number) => void;
+  handleFilterChange: (
+    key: string,
+    value: string | boolean | number | undefined
+  ) => void;
+  handleSort: (key: string, sortable?: boolean) => void;
+  resetPage: () => void;
+  clearFilters: () => void;
+}
+
+export function useTableState({
+  defaultItemsPerPage = 10,
+  initialSort = null,
+}: UseTableStateOptions = {}): UseTableStateResult {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
+  const [filters, setFilters] = useState<
+    Record<string, string | boolean | number>
+  >({});
+  const [sortConfig, setSortConfig] = useState<SortConfig | null>(initialSort);
+  const [totalPages, setTotalPages] = useState(1);
+
+  const goToPage = useCallback(
+    (page: number) => {
+      if (page >= 1 && page <= totalPages) {
+        setCurrentPage(page);
+      }
+    },
+    [totalPages]
+  );
+
+  const handleItemsPerPageChange = useCallback((value: number) => {
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  }, []);
+
+  const handleFilterChange = useCallback(
+    (key: string, value: string | boolean | number | undefined) => {
+      setFilters((prev) => {
+        if (value === undefined || value === null || value === "") {
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        }
+        return { ...prev, [key]: value };
+      });
+      setCurrentPage(1);
+    },
+    []
+  );
+
+  const handleSort = useCallback((key: string, sortable?: boolean) => {
+    if (sortable === false) return;
+    setSortConfig((prev) => {
+      let direction: "asc" | "desc" = "asc";
+      if (prev?.key === key && prev.direction === "asc") {
+        direction = "desc";
+      }
+      return { key, direction };
+    });
+    setCurrentPage(1);
+  }, []);
+
+  const resetPage = useCallback(() => setCurrentPage(1), []);
+  const clearFilters = useCallback(() => {
+    setFilters({});
+    setCurrentPage(1);
+  }, []);
+
+  const stable = useMemo(
+    () => ({
+      currentPage,
+      itemsPerPage,
+      filters,
+      sortConfig,
+      totalPages,
+      setTotalPages,
+      goToPage,
+      handleItemsPerPageChange,
+      handleFilterChange,
+      handleSort,
+      resetPage,
+      clearFilters,
+    }),
+    [
+      currentPage,
+      itemsPerPage,
+      filters,
+      sortConfig,
+      totalPages,
+      setTotalPages,
+      goToPage,
+      handleItemsPerPageChange,
+      handleFilterChange,
+      handleSort,
+      resetPage,
+      clearFilters,
+    ]
+  );
+
+  return stable;
+}

package/src/index.css

@@ -0,0 +1,168 @@
+@variant dark (&:is(.dark &));
+
+:root, :host {
+  --animate-fadeIn: fadeIn 0.5s ease-out forwards;
+  --animate-fade-in: fadeIn 0.5s ease-out forwards;
+
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-400: #94a3b8;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  --color-secondary-950: #020617;
+
+  --color-success-50: #ecfdf5;
+  --color-success-100: #d1fae5;
+  --color-success-200: #a7f3d0;
+  --color-success-300: #6ee7b7;
+  --color-success-400: #34d399;
+  --color-success-500: #10b981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
+  --color-success-800: #065f46;
+  --color-success-900: #064e3b;
+  --color-success-950: #022c22;
+
+  --color-danger-50: #fff1f2;
+  --color-danger-100: #ffe4e6;
+  --color-danger-200: #fecdd3;
+  --color-danger-300: #fda4af;
+  --color-danger-400: #fb7185;
+  --color-danger-500: #f43f5e;
+  --color-danger-600: #e11d48;
+  --color-danger-700: #be123c;
+  --color-danger-800: #9f1239;
+  --color-danger-900: #881337;
+  --color-danger-950: #4c0519;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  --color-purple-50: #f5f3ff;
+  --color-purple-100: #ede9fe;
+  --color-purple-200: #ddd6fe;
+  --color-purple-300: #c4b5fd;
+  --color-purple-400: #a78bfa;
+  --color-purple-500: #8b5cf6;
+  --color-purple-600: #7c3aed;
+  --color-purple-700: #6d28d9;
+  --color-purple-800: #5b21b6;
+  --color-purple-900: #4c1d95;
+  --color-purple-950: #2e1065;
+
+  --color-info-50: #f0f9ff;
+  --color-info-100: #e0f2fe;
+  --color-info-200: #bae6fd;
+  --color-info-300: #7dd3fc;
+  --color-info-400: #38bdf8;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #0284c7;
+  --color-info-700: #0369a1;
+  --color-info-800: #075985;
+  --color-info-900: #0c4a6e;
+  --color-info-950: #082f49;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.col-span-1 { grid-column: span 1 / span 1; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-5 { grid-column: span 5 / span 5; }
+.col-span-6 { grid-column: span 6 / span 6; }
+.col-span-7 { grid-column: span 7 / span 7; }
+.col-span-8 { grid-column: span 8 / span 8; }
+.col-span-9 { grid-column: span 9 / span 9; }
+.col-span-10 { grid-column: span 10 / span 10; }
+.col-span-11 { grid-column: span 11 / span 11; }
+.col-span-12 { grid-column: span 12 / span 12; }
+
+@media (width >= 40rem) {
+  .sm\:col-span-1 { grid-column: span 1 / span 1; }
+  .sm\:col-span-2 { grid-column: span 2 / span 2; }
+  .sm\:col-span-3 { grid-column: span 3 / span 3; }
+  .sm\:col-span-4 { grid-column: span 4 / span 4; }
+  .sm\:col-span-5 { grid-column: span 5 / span 5; }
+  .sm\:col-span-6 { grid-column: span 6 / span 6; }
+  .sm\:col-span-7 { grid-column: span 7 / span 7; }
+  .sm\:col-span-8 { grid-column: span 8 / span 8; }
+  .sm\:col-span-9 { grid-column: span 9 / span 9; }
+  .sm\:col-span-10 { grid-column: span 10 / span 10; }
+  .sm\:col-span-11 { grid-column: span 11 / span 11; }
+  .sm\:col-span-12 { grid-column: span 12 / span 12; }
+}
+
+@media (width >= 48rem) {
+  .md\:col-span-1 { grid-column: span 1 / span 1; }
+  .md\:col-span-2 { grid-column: span 2 / span 2; }
+  .md\:col-span-3 { grid-column: span 3 / span 3; }
+  .md\:col-span-4 { grid-column: span 4 / span 4; }
+  .md\:col-span-5 { grid-column: span 5 / span 5; }
+  .md\:col-span-6 { grid-column: span 6 / span 6; }
+  .md\:col-span-7 { grid-column: span 7 / span 7; }
+  .md\:col-span-8 { grid-column: span 8 / span 8; }
+  .md\:col-span-9 { grid-column: span 9 / span 9; }
+  .md\:col-span-10 { grid-column: span 10 / span 10; }
+  .md\:col-span-11 { grid-column: span 11 / span 11; }
+  .md\:col-span-12 { grid-column: span 12 / span 12; }
+}
+
+@media (width >= 64rem) {
+  .lg\:col-span-1 { grid-column: span 1 / span 1; }
+  .lg\:col-span-2 { grid-column: span 2 / span 2; }
+  .lg\:col-span-3 { grid-column: span 3 / span 3; }
+  .lg\:col-span-4 { grid-column: span 4 / span 4; }
+  .lg\:col-span-5 { grid-column: span 5 / span 5; }
+  .lg\:col-span-6 { grid-column: span 6 / span 6; }
+  .lg\:col-span-7 { grid-column: span 7 / span 7; }
+  .lg\:col-span-8 { grid-column: span 8 / span 8; }
+  .lg\:col-span-9 { grid-column: span 9 / span 9; }
+  .lg\:col-span-10 { grid-column: span 10 / span 10; }
+  .lg\:col-span-11 { grid-column: span 11 / span 11; }
+  .lg\:col-span-12 { grid-column: span 12 / span 12; }
+}
+
+@media (width >= 80rem) {
+  .xl\:col-span-1 { grid-column: span 1 / span 1; }
+  .xl\:col-span-2 { grid-column: span 2 / span 2; }
+  .xl\:col-span-3 { grid-column: span 3 / span 3; }
+  .xl\:col-span-4 { grid-column: span 4 / span 4; }
+  .xl\:col-span-5 { grid-column: span 5 / span 5; }
+  .xl\:col-span-6 { grid-column: span 6 / span 6; }
+  .xl\:col-span-7 { grid-column: span 7 / span 7; }
+  .xl\:col-span-8 { grid-column: span 8 / span 8; }
+  .xl\:col-span-9 { grid-column: span 9 / span 9; }
+  .xl\:col-span-10 { grid-column: span 10 / span 10; }
+  .xl\:col-span-11 { grid-column: span 11 / span 11; }
+  .xl\:col-span-12 { grid-column: span 12 / span 12; }
+}

package/src/index.ts

@@ -0,0 +1,165 @@
+import "./index.css";
+
+// HOOKS
+import useClickOutside from "./hooks/useClickOutside";
+import { useDebouncedSearch } from "./hooks/useDebouncedSearch";
+import { useEditableRow } from "./hooks/useEditableRow";
+import { useTableState, UseTableStateOptions, UseTableStateResult } from "./hooks/useTableState";
+
+// COMPONENTES
+import ITAlert from "./components/alert/alert";
+import ITAvatar from "./components/avatar/avatar";
+import ITBadget from "./components/badget/badget";
+import ITBreadcrumbs from "./components/breadcrumbs/breadcrumbs";
+import ITButton from "./components/button/button";
+import ITCalendar from "./components/calendar/calendar";
+import ITCard from "./components/card/card";
+import ITCheckbox from "./components/checkbox/checkbox";
+import ITConfirmDialog from "./components/confirm-dialog/confirm-dialog";
+import ITDataTable from "./components/data-table/dataTable";
+import ITDatePicker from "./components/date-picker/datePicker";
+import ITDialog from "./components/dialog/dialog";
+import ITDivider from "./components/divider/divider";
+import ITDrawer from "./components/drawer/drawer";
+import ITEmptyState from "./components/empty-state/empty-state";
+import ITFlex from "./components/flex/flex";
+import ITFormBuilder from "./components/form-builder/formBuilder";
+import ITFormHeader from "./components/form-header/form-header";
+import ITGrid from "./components/grid/grid";
+import ITImage from "./components/image/image";
+import ITInput from "./components/input/input";
+import ITNavbar from "./components/navbar/navbar";
+import ITPage from "./components/page/page";
+import ITPageHeader from "./components/page-header/page-header";
+import ITPagination from "./components/pagination/pagination";
+import ITPopover from "./components/popover/popover";
+import ITProgress from "./components/progress/progress";
+import ITRadioGroup from "./components/radio/radio";
+import ITSearchSelect from "./components/search-select/search-select";
+import ITSelect from "./components/select/select";
+import ITSearchTable from "./components/searchTable/searchTable";
+import ITSegmentedControl from "./components/segmented-control/segmented-control";
+import ITSidebar from "./components/sidebar/sidebar";
+import ITSkeleton from "./components/skeleton/skeleton";
+import ITSlideToggle from "./components/slide/slide";
+import ITSlider from "./components/slider/slider";
+import ITStack from "./components/stack/stack";
+import ITStatCard from "./components/stat-card/stat-card";
+import ITTable from "./components/table/table";
+import ITText from "./components/text/text";
+import ITTextarea from "./components/textarea/textarea";
+import ITTabs from "./components/tabs/tabs";
+import ITTripleFilter from "./components/triple-filter/tripleFilter";
+import ITToast from "./components/toast/toast";
+
+// PROPS
+import type { ITAlertProps } from "./components/alert/alert.props";
+import type { ITAvatarProps } from "./components/avatar/avatar.props";
+import type { ITBadgetProps } from "./components/badget/badget.props";
+import type { ITBreadcrumbsProps, ITBreadcrumbItem } from "./components/breadcrumbs/breadcrumbs.props";
+import type { ITButtonProps } from "./components/button/button.props";
+import type { ITCalendarProps } from "./components/calendar/calendar.props";
+import type { ITCardProps } from "./components/card/card.props";
+import type { ITCheckboxProps } from "./components/checkbox/checkbox.props";
+import type { ITConfirmDialogProps } from "./components/confirm-dialog/confirm-dialog.props";
+import type { ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse } from "./components/data-table/dataTable.props";
+import type { ITDatePickerProps } from "./components/date-picker/date-picker.props";
+import type { ITDialogProps } from "./components/dialog/dialog.props";
+import type { ITDividerProps } from "./components/divider/divider.props";
+import type { ITDrawerProps } from "./components/drawer/drawer.props";
+import type { ITEmptyStateProps } from "./components/empty-state/empty-state.props";
+import type { ITFlexProps } from "./components/flex/flex.props";
+import type { ITFormBuilderProps } from "./components/form-builder/formBuilder.props";
+import type { ITFormHeaderProps } from "./components/form-header/form-header.props";
+import type { ITGridProps } from "./components/grid/grid.props";
+import type { ITImageProps } from "./components/image/image.props";
+import type { ITInputProps } from "./components/input/input.props";
+import type { ITNavbarProps } from "./components/navbar/navbar.props";
+import type { ITPageProps } from "./components/page/page.props";
+import type { ITPageHeaderProps } from "./components/page-header/page-header.props";
+import type { ITPaginationProps } from "./components/pagination/pagination.props";
+import type { ITPopoverProps } from "./components/popover/popover.props";
+import type { ITProgressProps } from "./components/progress/progress.props";
+import type { ITRadioGroupProps, ITRadioOption } from "./components/radio/radio.props";
+import type { ITSearchSelectProps } from "./components/search-select/search-select.props";
+import type { ITSelectProps } from "./components/select/select.props";
+import type { ITSearchTableProps } from "./components/searchTable/searchTable.props";
+import type { ITSegmentedControlProps } from "./components/segmented-control/segmented-control.props";
+import type { ITSidebarProps, ITNavigationItem, ITNavigationSubItem } from "./components/sidebar/sidebar.props";
+import type { ITSkeletonProps } from "./components/skeleton/skeleton.props";
+import type { ITSlideToggleProps } from "./components/slide/slide.props";
+import type { ITSliderProps } from "./components/slider/slider.props";
+import type { ITStackProps } from "./components/stack/stack.props";
+import type { ITStatCardProps } from "./components/stat-card/stat-card.props";
+import type { ITTableProps, Column } from "./components/table/table.props";
+import type { ITTextProps } from "./components/text/text.props";
+import type { ITTextareaProps } from "./components/textarea/textarea.props";
+import type { ITTabsProps, ITTabItem } from "./components/tabs/tabs.props";
+import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/triple-filter/tripleFilter.props";
+import type { ITToastProps } from "./components/toast/toast.props";
+import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
+
+// UTILS
+import ITDropfile, { UploadStatus, FileTypeEnum } from "./components/dropfile/dropfile";
+import ITLayout from "./components/layout/layout";
+import { ITLayoutProps } from "./components/layout/layout.props";
+import ITLoader from "./components/loader/loader";
+import type { LoaderProps as ITLoaderProps } from "./components/loader/loader.props";
+import ITStepper from "./components/stepper/stepper";
+import type { ITStepperProps } from "./components/stepper/stepper.props";
+import ITThemeProvider, { useITTheme, useITThemeSafe } from "./components/theme-provider/themeProvider";
+import type { ITThemeProviderProps, ITThemePalette } from "./components/theme-provider/themeProvider.props";
+import ITTimePicker from "./components/time-picker/timePicker";
+import type { ITTimePickerProps } from "./components/time-picker/timePicker.props";
+import type { ITThemeConfig } from "./theme/theme.types";
+import { createValidationSchema } from "./types/yup.types";
+
+import { getContrastTextColor, isLightColor, resolveCssColor } from "./utils/color.utils";
+
+export {
+  // Hooks
+  useClickOutside, useDebouncedSearch, useEditableRow, useTableState,
+  createValidationSchema,
+  // Components
+  ITAlert, ITAvatar, ITBadget, ITBreadcrumbs, ITButton,
+  ITCalendar,
+  ITCard, ITCheckbox, ITConfirmDialog, ITDataTable, ITDatePicker,
+  ITDialog, ITDivider, ITDrawer,
+  ITDropfile, ITEmptyState, ITFlex, ITFormBuilder, ITFormHeader, ITGrid, ITImage, ITInput, ITLayout,
+  ITLoader,   ITNavbar, ITPage, ITPageHeader, ITPagination, ITPopover, ITProgress,
+  ITRadioGroup, ITSelect, ITSearchSelect,
+  ITSearchTable,
+  ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper,
+  ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
+  useITTheme, useITThemeSafe, ITTimePicker, ITToast,
+  UploadStatus, FileTypeEnum,
+  getContrastTextColor, isLightColor, resolveCssColor
+};
+
+  export type {
+    Column, FieldConfig,
+    FieldConfigV2,
+    ITAlertProps, ITAvatarProps, ITBadgetProps,
+    ITBreadcrumbItem, ITBreadcrumbsProps, ITButtonProps,
+    ITCalendarProps,
+    ITCardProps, ITCheckboxProps, ITConfirmDialogProps,
+    ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse, ITDatePickerProps,
+    ITDialogProps, ITDividerProps, ITDrawerProps,
+    ITEmptyStateProps, ITFlexProps,
+    ITFormBuilderProps, ITFormHeaderProps,
+    ITGridProps, ITImageProps, ITInputProps,
+    ITLayoutProps, ITLoaderProps, ITNavbarProps,
+    ITPageProps, ITPageHeaderProps,
+    ITNavigationItem, ITNavigationSubItem,
+    ITPaginationProps, ITPopoverProps, ITProgressProps,
+    ITRadioGroupProps, ITRadioOption, ITSelectProps, ITSearchSelectProps,
+    ITSearchTableProps,
+    ITSegmentedControlProps, ITSidebarProps, ITSkeletonProps, ITSlideToggleProps, ITSliderProps,
+    ITStackProps, ITStatCardProps, ITStepperProps,
+    ITTableProps, ITTabsProps, ITTabItem, ITTextProps, ITTextareaProps,
+    ITTripleFilterProps, ITTripleFilterOption, ITThemeConfig, ITThemeProviderProps, ITThemePalette,
+    ITTimePickerProps, ITToastProps,
+    UseTableStateOptions, UseTableStateResult
+  };
+
+

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);