@povio/ui 0.0.1 → 0.0.3

package/src/hooks/useTranslationMemo.ts

@@ -0,0 +1,17 @@
+import type { TFunction } from "i18next";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+type TranslatedFunction<T> = ((t: TFunction) => T) | (() => T);
+
+export function useTranslationMemo<T>(func: TranslatedFunction<T>): T {
+  const { t } = useTranslation();
+
+  return useMemo(() => {
+    if (func.length === 1) {
+      return func(t);
+    }
+
+    return (func as () => T)();
+  }, [func, t]);
+}

package/src/index.ts

@@ -0,0 +1,252 @@
+// Button Components
+
+export { AlignCenterIcon } from "./assets/icons/AlignCenter";
+export { AlignLeftIcon } from "./assets/icons/AlignLeft";
+export { AlignLeftRightIcon } from "./assets/icons/AlignLeftRight";
+export { AlignRightIcon } from "./assets/icons/AlignRight";
+export { ArrowDropDownIcon } from "./assets/icons/ArrowDropDown";
+export { ArrowDropUpIcon } from "./assets/icons/ArrowDropUp";
+export { ArrowLeftIcon } from "./assets/icons/ArrowLeft";
+export { ArrowRightIcon } from "./assets/icons/ArrowRight";
+export { BoldIcon } from "./assets/icons/Bold";
+export { BulletedListIcon } from "./assets/icons/BulletedList";
+export { CalendarIcon } from "./assets/icons/Calendar";
+export { CheckIcon } from "./assets/icons/Check";
+export { CheckboxCheckmarkIcon } from "./assets/icons/CheckboxCheckmark";
+export { CheckboxIndeterminateIcon } from "./assets/icons/CheckboxIndeterminate";
+export { ChevronDownIcon } from "./assets/icons/ChevronDown";
+export { ChevronLeftIcon } from "./assets/icons/ChevronLeft";
+export { ChevronRightIcon } from "./assets/icons/ChevronRight";
+export { ChevronsLeftIcon } from "./assets/icons/ChevronsLeft";
+export { ChevronsRightIcon } from "./assets/icons/ChevronsRight";
+export { ChevronUpIcon } from "./assets/icons/ChevronUp";
+export { ClockIcon } from "./assets/icons/Clock";
+export { CloseIcon } from "./assets/icons/Close";
+export { DateTimeIcon } from "./assets/icons/DateTime";
+export { HighlightIcon } from "./assets/icons/Highlight";
+// Icons
+export { HighlightOnIcon } from "./assets/icons/HighlightOn";
+export { InfoIcon } from "./assets/icons/Info";
+export { ItalicIcon } from "./assets/icons/Italic";
+export { LinkIcon } from "./assets/icons/Link";
+export { MenuIcon } from "./assets/icons/Menu";
+export { NumberedListIcon } from "./assets/icons/NumberedList";
+export { PointerHorizontalIcon } from "./assets/icons/PointerHorizontal";
+export { PointerVerticalIcon } from "./assets/icons/PointerVertical";
+export { SendIcon } from "./assets/icons/Send";
+export { StrikethroughIcon } from "./assets/icons/Strikethrough";
+export { TextColorIcon } from "./assets/icons/TextColor";
+export { UnderlinedIcon } from "./assets/icons/Underlined";
+export { ViewIcon } from "./assets/icons/View";
+export { ViewOffIcon } from "./assets/icons/ViewOff";
+export type { ButtonProps } from "./components/buttons/Button/Button";
+export { Button } from "./components/buttons/Button/Button";
+export type { ButtonVariantProps } from "./components/buttons/Button/button.cva";
+export type { IconButtonProps } from "./components/buttons/IconButton/IconButton";
+export { IconButton } from "./components/buttons/IconButton/IconButton";
+export type { InlineIconButtonProps } from "./components/buttons/InlineIconButton/InlineIconButton";
+export { InlineIconButton } from "./components/buttons/InlineIconButton/InlineIconButton";
+export type { PillButtonProps } from "./components/buttons/PillButton/PillButton";
+export { PillButton } from "./components/buttons/PillButton/PillButton";
+export type { PillButtonVariants } from "./components/buttons/PillButton/pillButton.cva";
+export type { SplitButtonProps } from "./components/buttons/SplitButton/SplitButton";
+export { SplitButton } from "./components/buttons/SplitButton/SplitButton";
+export type { TextButtonProps } from "./components/buttons/TextButton/TextButton";
+export { TextButton } from "./components/buttons/TextButton/TextButton";
+export type { ToggleButtonProps } from "./components/buttons/ToggleButton/ToggleButton";
+export { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton";
+export type { CheckboxProps, ControlledCheckboxProps } from "./components/inputs/Checkbox/Checkbox";
+// Input Components
+export { Checkbox } from "./components/inputs/Checkbox/Checkbox";
+export type { CheckboxVariantProps } from "./components/inputs/Checkbox/checkbox.cva";
+export type { ControlledDatePickerProps, DatePickerProps } from "./components/inputs/DateTime/DatePicker/DatePicker";
+export { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker";
+export type {
+  ControlledDateRangePickerProps,
+  DateRangePickerProps,
+} from "./components/inputs/DateTime/DateRangePicker/DateRangePicker";
+export { DateRangePicker } from "./components/inputs/DateTime/DateRangePicker/DateRangePicker";
+export type {
+  ControlledDateTimePickerProps,
+  DateTimePickerProps,
+} from "./components/inputs/DateTime/DateTimePicker/DateTimePicker";
+export { DateTimePicker } from "./components/inputs/DateTime/DateTimePicker/DateTimePicker";
+export type { ControlledTimePickerProps, TimePickerProps } from "./components/inputs/DateTime/TimePicker/TimePicker";
+export { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker";
+export type {
+  FileUploadError,
+  FileUploadProps,
+  FileUploadRequest,
+  FileUploadState,
+} from "./components/inputs/File/FileUpload";
+export { FileUpload } from "./components/inputs/File/FileUpload";
+export type { FileUploadContainerProps } from "./components/inputs/File/FileUploadContainer";
+export { FileUploadContainer } from "./components/inputs/File/FileUploadContainer";
+export type { InputUploadProps } from "./components/inputs/File/InputUpload";
+export { InputUpload } from "./components/inputs/File/InputUpload";
+export type { FormFieldProps } from "./components/inputs/FormField/FormField";
+export { FormField } from "./components/inputs/FormField/FormField";
+export type { ControlledNumberInputProps, NumberInputProps } from "./components/inputs/Input/NumberInput/NumberInput";
+export { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput";
+export type {
+  ControlledPasswordInputProps,
+  PasswordInputProps,
+} from "./components/inputs/Input/PasswordInput/PasswordInput";
+export { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput";
+export type { ControlledTextAreaProps, TextAreaProps } from "./components/inputs/Input/TextArea/TextArea";
+export { TextArea } from "./components/inputs/Input/TextArea/TextArea";
+export type { ControlledTextInputProps, TextInputProps } from "./components/inputs/Input/TextInput/TextInput";
+export { TextInput } from "./components/inputs/Input/TextInput/TextInput";
+export { Form } from "./components/inputs/Inputs/Form";
+export type { InputDef } from "./components/inputs/Inputs/InputItem";
+export type { InputsProps } from "./components/inputs/Inputs/Inputs";
+export { Inputs } from "./components/inputs/Inputs/Inputs";
+export type { ControlledRadioGroupProps, RadioGroupProps } from "./components/inputs/RadioGroup/RadioGroup";
+export { RadioGroup } from "./components/inputs/RadioGroup/RadioGroup";
+export type { RadioVariantProps } from "./components/inputs/RadioGroup/radio.cva";
+export type {
+  AutocompleteProps,
+  ControlledAutocompleteProps,
+} from "./components/inputs/Selection/Autocomplete/Autocomplete";
+export { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete";
+export { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/QueryAutocomplete";
+export type { ControlledSelectProps, SelectProps } from "./components/inputs/Selection/Select/Select";
+export { Select } from "./components/inputs/Selection/Select/Select";
+export type { ControlledSliderProps, SliderProps } from "./components/inputs/Slider/Slider";
+export { Slider } from "./components/inputs/Slider/Slider";
+export type { InputVariantProps } from "./components/inputs/shared/input.cva";
+export type {
+  ControlledTextEditorProps,
+  TextEditorProps,
+  TextEditorValue,
+} from "./components/inputs/TextEditor/TextEditor";
+export { TextEditor } from "./components/inputs/TextEditor/TextEditor";
+export type { ControlledToggleProps, ToggleProps } from "./components/inputs/Toggle/Toggle";
+export { Toggle } from "./components/inputs/Toggle/Toggle";
+export type { MenuProps } from "./components/Menu/Menu";
+// Menu Components
+export { Menu } from "./components/Menu/Menu";
+export type { MenuPopoverProps } from "./components/Menu/MenuPopover";
+export { MenuPopover } from "./components/Menu/MenuPopover";
+// Utils
+export { uiOutlineClass } from "./components/outline.clsx";
+export type { ActionModalProps } from "./components/overlays/ActionModal/ActionModal";
+export { ActionModal } from "./components/overlays/ActionModal/ActionModal";
+export type { BottomSheetProps } from "./components/overlays/BottomSheet/BottomSheet";
+export { BottomSheet } from "./components/overlays/BottomSheet/BottomSheet";
+export type { DrawerProps } from "./components/overlays/Drawer/Drawer";
+export { Drawer } from "./components/overlays/Drawer/Drawer";
+export type { ModalProps } from "./components/overlays/Modal/Modal";
+// Overlay Components
+export { Modal } from "./components/overlays/Modal/Modal";
+export type { ResponsivePopoverProps } from "./components/overlays/ResponsivePopover/ResponsivePopover";
+export { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover";
+export type { TooltipProps } from "./components/overlays/Tooltip/Tooltip";
+export { Tooltip } from "./components/overlays/Tooltip/Tooltip";
+export type { TooltipEllipsisProps } from "./components/overlays/Tooltip/TooltipEllipsis";
+export { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis";
+export { Segment } from "./components/segment/Segment";
+export type { ControlledSegmentProps, SegmentProps } from "./components/segment/segment.types";
+export type { PaginationProps } from "./components/shared/pagination/Pagination";
+// Shared Components
+export { Pagination } from "./components/shared/pagination/Pagination";
+export { PaginationList } from "./components/shared/pagination/PaginationList";
+export type { AlertProps } from "./components/status/Alert/Alert";
+export { Alert } from "./components/status/Alert/Alert";
+export type { LoaderProps } from "./components/status/Loader/Loader";
+// Status Components
+export { Loader } from "./components/status/Loader/Loader";
+export type { ToastAction, ToastProps } from "./components/status/Toast/Toast";
+export { Toast, ToastContainer } from "./components/status/Toast/Toast";
+export type { ToastVariantProps } from "./components/status/Toast/toast.cva";
+export { useToast } from "./components/status/Toast/useToast";
+export type { CellTextProps } from "./components/table/CellText";
+export { CellText } from "./components/table/CellText";
+export type { ColumnConfigModalProps } from "./components/table/ColumnConfig";
+export { ColumnConfigModal } from "./components/table/ColumnConfig";
+export type { HeaderTextProps } from "./components/table/HeaderText";
+export { HeaderText } from "./components/table/HeaderText";
+export type { InfiniteTableProps, InfiniteTableWrapperProps } from "./components/table/InfiniteTable";
+export { InfiniteTable } from "./components/table/InfiniteTable";
+export type { PaginatedTableProps, PaginatedTableWrapperProps } from "./components/table/PaginatedTable";
+export { PaginatedTable } from "./components/table/PaginatedTable";
+export type { TableProps, TableWrapperProps } from "./components/table/Table";
+// Table Components
+export { Table } from "./components/table/Table";
+export type { TableRowVariantProps } from "./components/table/table.cva";
+export type { LinkProps } from "./components/text/Link/Link";
+export { Link } from "./components/text/Link/Link";
+export type { LinkVariantProps } from "./components/text/Link/link.cva";
+export type { TagProps } from "./components/text/Tag/Tag";
+export { Tag } from "./components/text/Tag/Tag";
+export type { TagVariantProps } from "./components/text/Tag/tag.cva";
+export type { TypographyProps } from "./components/text/Typography/Typography";
+// Text Components
+export { Typography } from "./components/text/Typography/Typography";
+export type { TypographyVariantProps } from "./components/text/Typography/typography.cva";
+// Config
+export { Confirmation } from "./config/confirmation.context";
+export { ns, resources } from "./config/i18n";
+export { UIRouter } from "./config/router.context";
+export { UIConfig } from "./config/uiConfig.context";
+export { UIStyle } from "./config/uiStyle.context";
+export type { DynamicColumnsOptions } from "./helpers/dynamicColumns";
+export { dynamicColumns } from "./helpers/dynamicColumns";
+export type { DynamicInputsOptions } from "./helpers/dynamicInputs";
+// Helpers
+export { dynamicInputs } from "./helpers/dynamicInputs";
+export { useAutosave } from "./hooks/useAutosave";
+// Hooks
+export { useBreakpoint } from "./hooks/useBreakpoint";
+export { useDebounceCallback } from "./hooks/useDebounceCallback";
+export { useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo } from "./hooks/useDeepCompare";
+export type { FilterStore } from "./hooks/useFilters";
+export { useFilters } from "./hooks/useFilters";
+export type { UseFormProps, UseFormResolverProps } from "./hooks/useForm";
+export { useForm } from "./hooks/useForm";
+export type { UseFormAutosaveProps } from "./hooks/useFormAutosave";
+export { useFormAutosave } from "./hooks/useFormAutosave";
+export { useIntersectionObserver } from "./hooks/useIntersectionObserver";
+export { useLocalStorage } from "./hooks/useLocalStorage";
+export { useLongPressRepeat } from "./hooks/useLongPressRepeat";
+export { usePagination } from "./hooks/usePagination";
+export { useScrollableListBox } from "./hooks/useScrollableListBox";
+export { useSingletonMutation } from "./hooks/useSingletonMutation";
+export { useSorting } from "./hooks/useSorting";
+export { useStateAndRef } from "./hooks/useStateAndRef";
+export { useTableColumnConfig } from "./hooks/useTableColumnConfig";
+export { useTableNav } from "./hooks/useTableNav";
+export { useTranslationMemo } from "./hooks/useTranslationMemo";
+// Types
+export type {
+  Function,
+  HasRequiredProperty,
+  IfAny,
+  IsAny,
+  IsRequiredChildrenProperty,
+  IsUnknown,
+  OmitDiscriminatedUnion,
+} from "./types/common";
+export type { AppInfiniteQueryOptions, AppMutationOptions, AppQueryOptions } from "./types/react-query";
+export { ArrayUtils } from "./utils/array.utils";
+export { type CompoundMapper, compoundMapper } from "./utils/compoundMapper";
+export { DateUtils } from "./utils/date.utils";
+export { DateTimeUtils } from "./utils/date-time.utils";
+export { DomUtils } from "./utils/dom.utils";
+export { FileUtils } from "./utils/file.utils";
+export { isEqual } from "./utils/isEqual";
+// Utils
+export { logger } from "./utils/logger";
+export { ObjectUtils } from "./utils/object.utils";
+export { QueriesUtils } from "./utils/queries.utils";
+export { LoggingInterceptor } from "./utils/rest/interceptors/logging.interceptor";
+export { ResponseInterceptor } from "./utils/rest/interceptors/response.interceptor";
+export { RestInterceptor } from "./utils/rest/interceptors/rest-interceptor";
+export { RestUtils } from "./utils/rest/rest.utils";
+// Rest Utils
+export { RestClient } from "./utils/rest/rest-client";
+export { RoutingUtils } from "./utils/routing.utils";
+export { StringUtils } from "./utils/string.utils";
+export type { GeneralErrorCodes } from "./utils/vendor/error-handling";
+// Error Handling
+export { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling";

package/src/types/{common.d.ts → common.ts}

@@ -1,12 +1,23 @@
-import { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from "react";
+
 export type Function = (...args: any) => any;
+
 export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
+
 export type IsAny<T> = IfAny<T, true, never>;
+
 export type IsUnknown<T, Y, N = T> = IsAny<T> extends never ? (unknown extends T ? Y : N) : N;
+
 export type OmitDiscriminatedUnion<T, K> = {
-    [P in keyof T as Exclude<P, K & keyof any>]: T[P];
+  [P in keyof T as Exclude<P, K & keyof any>]: T[P];
 };
+
 export type HasRequiredProperty<T> = {
-    [K in keyof T]-?: Record<string, never> extends Pick<T, K> ? never : K;
+  [K in keyof T]-?: Record<string, never> extends Pick<T, K> ? never : K;
 }[keyof T];
-export type IsRequiredChildrenProperty<T extends FC<PropsWithChildren<any>>, Y, N> = HasRequiredProperty<Omit<ComponentProps<T>, "children">> extends never ? Y : N;
+
+export type IsRequiredChildrenProperty<T extends FC<PropsWithChildren<any>>, Y, N> = HasRequiredProperty<
+  Omit<ComponentProps<T>, "children">
+> extends never
+  ? Y
+  : N;

package/src/types/i18next.d.ts

@@ -0,0 +1,11 @@
+import { type resources } from "#ui/config/i18n";
+import "i18next";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    enableSelector: true;
+    returnNull: false;
+    defaultNS: "never";
+    resources: (typeof resources)["en"];
+  }
+}

package/src/types/react-query.ts

@@ -0,0 +1,48 @@
+import type {
+  InfiniteData,
+  QueryKey,
+  UseInfiniteQueryOptions,
+  UseMutationOptions,
+  UseQueryOptions,
+} from "@tanstack/react-query";
+
+import type { ApplicationException, GeneralErrorCodes } from "#ui/utils/vendor/error-handling";
+
+import type { Function, IsUnknown } from "./common";
+
+export type AppQueryOptions<
+  TFunction extends Function,
+  TData = Awaited<ReturnType<TFunction>>,
+  TErrorCodes = GeneralErrorCodes,
+> = Omit<
+  UseQueryOptions<
+    Awaited<ReturnType<TFunction>>,
+    ApplicationException<TErrorCodes>,
+    IsUnknown<TData, Awaited<ReturnType<TFunction>>>
+  >,
+  "queryKey" | "queryFn"
+>;
+
+export type AppMutationOptions<
+  TFunction extends Function,
+  TVariables = void,
+  TData = Awaited<ReturnType<TFunction>>,
+  TErrorCodes = GeneralErrorCodes,
+> = Omit<UseMutationOptions<TData, ApplicationException<TErrorCodes>, TVariables>, "mutationKey" | "mutationFn">;
+
+export type AppInfiniteQueryOptions<
+  TFunction extends Function,
+  TData = InfiniteData<Awaited<ReturnType<TFunction>>>,
+  TErrorCodes = GeneralErrorCodes,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = number,
+> = Omit<
+  UseInfiniteQueryOptions<
+    Awaited<ReturnType<TFunction>>,
+    ApplicationException<TErrorCodes>,
+    IsUnknown<TData, InfiniteData<Awaited<ReturnType<TFunction>>>>,
+    TQueryKey,
+    TPageParam
+  >,
+  "queryKey" | "queryFn" | "initialPageParam" | "getNextPageParam"
+>;

package/src/types/table.d.ts

@@ -0,0 +1,17 @@
+/* oxlint-disable unused-imports/no-unused-vars */
+import "@tanstack/react-table";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    width?: string;
+    headerClass?: string;
+    cellClass?: string;
+    sortClass?: string;
+  }
+
+  interface CellContext<TData extends RowData, TValue> {
+    original: TData;
+    data: TData;
+    value: TValue;
+  }
+}

package/src/utils/array.utils.spec.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+
+import { ArrayUtils } from "./array.utils";
+
+describe("ArrayUtils", () => {
+  test("fromCommaSeparatedStr", () => {
+    expect(ArrayUtils.fromCommaSeparatedStr(undefined)).toEqual([]);
+    expect(ArrayUtils.fromCommaSeparatedStr(null)).toEqual([]);
+    expect(ArrayUtils.fromCommaSeparatedStr("test")).toEqual(["test"]);
+    expect(ArrayUtils.fromCommaSeparatedStr("    test    ")).toEqual(["test"]);
+    expect(ArrayUtils.fromCommaSeparatedStr("test1,test2")).toEqual(["test1", "test2"]);
+    expect(ArrayUtils.fromCommaSeparatedStr("  test1    ,   test2   ")).toEqual(["test1", "test2"]);
+    expect(ArrayUtils.fromCommaSeparatedStr(",")).toEqual(["", ""]);
+    expect(ArrayUtils.fromCommaSeparatedStr("test1,,test2")).toEqual(["test1", "", "test2"]);
+  });
+});

package/src/utils/array.utils.ts

@@ -0,0 +1,9 @@
+export namespace ArrayUtils {
+  export const fromCommaSeparatedStr = (str: string | null | undefined) => {
+    if (!str) {
+      return [];
+    }
+
+    return str.split(",").map((item) => item.trim());
+  };
+}

package/src/utils/compoundMapper.spec.ts

@@ -0,0 +1,91 @@
+import { describe, expect, test } from "vitest";
+
+import { compoundMapper } from "./compoundMapper";
+
+const colorVariant = compoundMapper<
+  "primary" | "success" | "warning" | "error",
+  { variant: "outlined" | "contained"; color: "neutral" | "success" | "warning" }
+>({
+  compoundVariants: [
+    {
+      variant: ["outlined", "contained"],
+      color: "neutral",
+      value: "primary",
+    },
+    {
+      variant: ["outlined", "contained"],
+      color: "success",
+      value: "success",
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      value: "warning",
+    },
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    color: "neutral",
+  },
+  default: "error",
+});
+
+const typographyVariants = compoundMapper<
+  { size: "small" | "medium"; variant: "prominent-1" | "default" },
+  { size: "small" | "medium" | "large"; variant: "outlined" | "contained" }
+>({
+  compoundVariants: [
+    {
+      size: "small",
+      value: { size: "small", variant: "prominent-1" },
+    },
+    {
+      size: "medium",
+      variant: "outlined",
+      value: { size: "medium", variant: "prominent-1" },
+    },
+    {
+      size: "medium",
+      variant: "contained",
+      value: { size: "medium", variant: "default" },
+    },
+  ],
+});
+
+describe("compoundMapper", () => {
+  test("should return the correct variant", () => {
+    expect(colorVariant({ variant: "outlined", color: "neutral" })).toBe("primary");
+    expect(colorVariant({ variant: "outlined", color: "success" })).toBe("success");
+    expect(colorVariant({ variant: "outlined", color: "warning" })).toBe("warning");
+
+    expect(typographyVariants({ size: "small" })).toEqual({
+      size: "small",
+      variant: "prominent-1",
+    });
+    expect(typographyVariants({ size: "small", variant: "outlined" })).toEqual({
+      size: "small",
+      variant: "prominent-1",
+    });
+    expect(typographyVariants({ size: "small", variant: "contained" })).toEqual({
+      size: "small",
+      variant: "prominent-1",
+    });
+    expect(typographyVariants({ size: "medium", variant: "contained" })).toEqual({
+      size: "medium",
+      variant: "default",
+    });
+    expect(typographyVariants({ size: "medium", variant: "outlined" })).toEqual({
+      size: "medium",
+      variant: "prominent-1",
+    });
+  });
+  test("should return the default value if no variant is found", () => {
+    expect(colorVariant({ variant: "contained", color: "warning" })).toBe("error");
+  });
+  test("should use default variants if no variant provided", () => {
+    expect(colorVariant({ color: "success" })).toBe("success");
+    expect(colorVariant({ color: "warning" })).toBe("warning");
+    expect(colorVariant({ variant: "contained" })).toBe("primary");
+    expect(colorVariant({})).toBe("primary");
+  });
+});

package/src/utils/compoundMapper.ts

@@ -0,0 +1,42 @@
+interface Prop<T> {
+  value: T;
+}
+
+type ConfigSchema = Record<string, any>;
+
+type ConfigVariants<T extends ConfigSchema> = {
+  [Variant in keyof T]?: T[Variant] | null | undefined;
+};
+type ConfigVariantsMulti<T extends ConfigSchema> = {
+  [Variant in keyof T]?: T[Variant] | T[Variant][] | undefined;
+};
+
+interface Config<T, R> {
+  default?: R;
+  compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & Prop<R> : Prop<R>)[];
+  defaultVariants?: Partial<T>;
+}
+
+type Props<T> = T extends ConfigSchema ? ConfigVariants<T> : never;
+
+export type CompoundMapper<ReturnType, Variants extends ConfigSchema> = (
+  props: Props<Variants>,
+) => NonNullable<ReturnType> | undefined;
+
+export const compoundMapper = <ReturnType, Variants extends ConfigSchema>(
+  config: Config<Variants, NonNullable<ReturnType>>,
+) => {
+  return (props: Props<Variants>): NonNullable<ReturnType> | undefined => {
+    const variant = config.compoundVariants?.find((v) => {
+      return Object.entries(v)
+        .filter(([key]) => key !== "value")
+        .every(([key, value]) => {
+          // oxlint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const prop = props[key] || config.defaultVariants?.[key];
+          return Array.isArray(value) ? value.includes(prop) : prop === value;
+        });
+    });
+
+    return variant?.value ?? config.default;
+  };
+};

package/src/utils/date-time.utils.spec.ts

@@ -0,0 +1,48 @@
+import { CalendarDate, CalendarDateTime, getLocalTimeZone, toZoned } from "@internationalized/date";
+import { describe, expect, test } from "vitest";
+
+import { DateTimeUtils } from "./date-time.utils";
+
+describe("DateTimeUtils", () => {
+  test("fromISOtoZonedDateTime", () => {
+    const isoString = new Date(2025, 2, 4).toISOString();
+    const dateValue = toZoned(new CalendarDateTime(2025, 3, 4), getLocalTimeZone());
+
+    expect(DateTimeUtils.fromISOtoZonedDateTime(isoString)).toEqual(dateValue);
+  });
+
+  test("fromDateValueToISO", () => {
+    const dateValue = toZoned(new CalendarDateTime(2025, 3, 4), getLocalTimeZone());
+    const isoString = new Date(2025, 2, 4).toISOString();
+
+    expect(DateTimeUtils.fromDateValueToISO(dateValue)).toEqual(isoString);
+  });
+
+  test("fromLocalToZonedDateTime", () => {
+    const date = new Date(2025, 2, 4);
+    const dateValue = toZoned(new CalendarDateTime(2025, 3, 4), getLocalTimeZone());
+
+    expect(DateTimeUtils.fromLocalToZonedDateTime(date)).toEqual(dateValue);
+  });
+
+  test("fromDateValueToLocal", () => {
+    const dateValue = toZoned(new CalendarDateTime(2025, 3, 4), getLocalTimeZone());
+    const date = new Date(2025, 2, 4);
+
+    expect(DateTimeUtils.fromDateValueToLocal(dateValue)).toEqual(date);
+  });
+
+  test("fromCalendarDateToUTCISO", () => {
+    const calendarDate = new CalendarDate(2025, 3, 4);
+    const isoString = new Date(2025, 2, 4).toISOString();
+
+    expect(DateTimeUtils.fromCalendarDateToUTCISO(calendarDate)).toEqual(isoString);
+  });
+
+  test("fromUTCISOToCalendarDateTime", () => {
+    const isoString = new Date(2025, 2, 4).toISOString();
+    const calendarDateTime = new CalendarDateTime(2025, 3, 4);
+
+    expect(DateTimeUtils.fromUTCISOToCalendarDateTime(isoString)).toEqual(calendarDateTime);
+  });
+});