meticulous-ui 3.4.3 → 3.5.1

package/README.md

@@ -58,28 +58,29 @@ import blue from 'meticulous-ui/colors/blue';
 
 ## 📦 Components
 
-| Component       | Description                                                      |
-| --------------- | ---------------------------------------------------------------- |
-| `Pagination`    | Fully responsive pagination component                            |
-| `Toast`         | Push 4 types of notifications on screen                          |
-| `Timer`         | Renders analog / digital clock with alarm                        |
-| `OtpInput`      | Gives inputs to enter and edit OTP                               |
-| `VideoPlayer`   | Renders video with keyboard shortcuts                            |
-| `Image`         | Renders image with shimmer, lower resolution                     |
-| `Input`         | Renders input box to let user enter input                        |
-| `Checkbox`      | Renders checkbox to let user give boolean value                  |
-| `RadioGroup`    | Renders radio options in a group to let user select              |
-| `FileUploader`  | Renders a button type input from where user can upload           |
-| `Textarea`      | Renders textarea box to let user enter description               |
-| `Dropdown`      | Renders dropdown to select from options                          |
-| `SelectBox`     | Renders selectbox to select multiple values from options         |
-| `Spinner`       | Renders a spinner to show the loading state                      |
-| `Loader`        | Renders a loader with dots to show the loading state             |
-| `PageLoader`    | Renders a loader with line at the top of page                    |
-| `Button`        | Renders a button to click & take an action                       |
-| `Shimmer`       | Animated skeleton loading placeholder                            |
-| `Carousel`      | Carousel providing slider between components displaying slides   |
-| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
+| Component       | Description                                                                            |
+| --------------- | -------------------------------------------------------------------------------------- |
+| `Pagination`    | Fully responsive pagination component                                                  |
+| `Toast`         | Push 4 types of notifications on screen                                                |
+| `Timer`         | Renders analog / digital clock with alarm                                              |
+| `OtpInput`      | Gives inputs to enter and edit OTP                                                     |
+| `VideoPlayer`   | Renders video with keyboard shortcuts                                                  |
+| `Image`         | Renders image with shimmer, lower resolution                                           |
+| `Input`         | Renders input box to let user enter input                                              |
+| `Checkbox`      | Renders checkbox to let user give boolean value                                        |
+| `RadioGroup`    | Renders radio options in a group to let user select                                    |
+| `FileUploader`  | Renders a button type input from where user can upload                                 |
+| `Textarea`      | Renders textarea box to let user enter description                                     |
+| `Dropdown`      | Renders dropdown to select from options                                                |
+| `SelectBox`     | Renders selectbox to select multiple values from options                               |
+| `Spinner`       | Renders a spinner to show the loading state                                            |
+| `Loader`        | Renders a loader with dots to show the loading state                                   |
+| `PageLoader`    | Renders a loader with line at the top of page                                          |
+| `Button`        | Renders a button to click & take an action                                             |
+| `Shimmer`       | Animated skeleton loading placeholder                                                  |
+| `Carousel`      | Carousel providing slider between components displaying slides                         |
+| `Modal`         | Accessible dialog overlay with title, body, footer, and Escape/overlay-click dismissal |
+| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui                       |
 
 ## 📦 Icon Components
 

package/components/Modal/Modal.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useCallback as m, useEffect as h } from "react";
+import { createPortal as f } from "react-dom";
+import { Overlay as k, ModalContainer as v, ModalHeader as w, ModalTitle as x, CloseButton as b, ModalBody as g, ModalFooter as p } from "./styles.js";
+const C = () => /* @__PURE__ */ d(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+), T = ({
+  isOpen: n,
+  onClose: o,
+  title: l,
+  children: c,
+  footer: a,
+  footerAlign: u = "right",
+  width: y,
+  closeOnOverlayClick: s = !0,
+  showCloseButton: i = !0
+}) => {
+  const t = m(
+    (r) => {
+      r.key === "Escape" && o?.();
+    },
+    [o]
+  );
+  return h(() => {
+    if (!n) return;
+    document.addEventListener("keydown", t);
+    const r = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", t), document.body.style.overflow = r;
+    };
+  }, [n, t]), n ? f(
+    /* @__PURE__ */ e(k, { role: "dialog", "aria-modal": "true", "aria-label": l, onClick: (r) => {
+      s && r.target === r.currentTarget && o?.();
+    }, children: /* @__PURE__ */ d(v, { $width: y, children: [
+      (l || i) && /* @__PURE__ */ d(w, { children: [
+        l && /* @__PURE__ */ e(x, { children: l }),
+        i && /* @__PURE__ */ e(b, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ e(C, {}) })
+      ] }),
+      /* @__PURE__ */ e(g, { children: c }),
+      a && /* @__PURE__ */ e(p, { $align: u, children: a })
+    ] }) }),
+    document.body
+  ) : null;
+};
+export {
+  T as default
+};

package/components/Modal/index.js

@@ -0,0 +1,4 @@
+import a from "./Modal.js";
+export {
+  a as default
+};

package/components/Modal/styles.js

@@ -0,0 +1,99 @@
+import o, { css as r, keyframes as n } from "styled-components";
+import e from "../../colors/grey.js";
+import i from "../../colors/white.js";
+const s = n`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`, a = n`
+  from { opacity: 0; transform: translateY(1.5rem); }
+  to { opacity: 1; transform: translateY(0); }
+`, m = o.div`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: ${s} 0.2s ease;
+  padding: 1rem;
+`, f = o.div`
+  background-color: ${i};
+  border-radius: 1rem;
+  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  width: ${({ $width: t }) => t || "32rem"};
+  max-width: 100%;
+  animation: ${a} 0.25s ease;
+`, p = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid ${e.m200};
+  flex-shrink: 0;
+`, g = o.h2`
+  margin: 0;
+  font-size: 2.4rem;
+  font-weight: 600;
+  color: ${e.m900};
+  line-height: 1.4;
+`, x = o.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${e.m500};
+  border-radius: 0.5rem;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: ${e.m100};
+    color: ${e.m800};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${e.m400};
+    outline-offset: 2px;
+  }
+`, u = o.div`
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  color: ${e.m700};
+  font-size: 0.95rem;
+  line-height: 1.6;
+`, y = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid ${e.m200};
+  flex-shrink: 0;
+
+  ${({ $align: t }) => t === "left" && r`
+      justify-content: flex-start;
+    `}
+
+  ${({ $align: t }) => t === "center" && r`
+      justify-content: center;
+    `}
+`;
+export {
+  x as CloseButton,
+  u as ModalBody,
+  f as ModalContainer,
+  y as ModalFooter,
+  p as ModalHeader,
+  g as ModalTitle,
+  m as Overlay
+};

package/index.d.ts

@@ -0,0 +1,495 @@
+import * as React from 'react';
+
+// ---------------------------------------------------------------------------
+// Color palette type
+// ---------------------------------------------------------------------------
+
+export interface ColorShades {
+  m50?: string;
+  m100?: string;
+  m200?: string;
+  m300?: string;
+  m400?: string;
+  m500?: string;
+  m600?: string;
+  m700?: string;
+  m800?: string;
+  m900?: string;
+  a100?: string;
+  a200?: string;
+  a400?: string;
+  a700?: string;
+  [key: string]: string | undefined;
+}
+
+export type ThemeColor =
+  | 'amber'
+  | 'black'
+  | 'blue'
+  | 'blueGray'
+  | 'brown'
+  | 'cider'
+  | 'cyan'
+  | 'deepOrange'
+  | 'deepPurple'
+  | 'green'
+  | 'grey'
+  | 'indigo'
+  | 'lightBlue'
+  | 'lightGreen'
+  | 'lime'
+  | 'orange'
+  | 'pink'
+  | 'purple'
+  | 'red'
+  | 'teal'
+  | 'violet'
+  | 'white'
+  | 'yellow';
+
+export type ComponentSize = 'small' | 'medium' | 'large';
+
+// ---------------------------------------------------------------------------
+// Button
+// ---------------------------------------------------------------------------
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: ThemeColor | ColorShades;
+  size?: ComponentSize;
+  width?: string | number;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  isLoading?: boolean;
+  textColor?: string;
+  children?: React.ReactNode;
+}
+
+export declare const Button: React.FC<ButtonProps>;
+
+// ---------------------------------------------------------------------------
+// Pagination
+// ---------------------------------------------------------------------------
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  pageNumber: number;
+  setPageNumber: (page: number) => void;
+  totalPages: number;
+  theme?: ThemeColor;
+  size?: ComponentSize;
+  isDisabled?: boolean;
+}
+
+export declare const Pagination: React.FC<PaginationProps>;
+
+// ---------------------------------------------------------------------------
+// Toast
+// ---------------------------------------------------------------------------
+
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: ToastType;
+  visible?: boolean;
+  duration?: number;
+  onExpire?: () => void;
+  title?: string;
+  subtitle?: string;
+}
+
+export interface ToastItem {
+  id: string;
+  type?: ToastType;
+  title?: string;
+  subtitle?: string;
+  duration?: number;
+  onExpire?: () => void;
+}
+
+export interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  toasts: ToastItem[];
+}
+
+export declare const Toast: React.FC<ToastProps>;
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+
+// ---------------------------------------------------------------------------
+// Modal
+// ---------------------------------------------------------------------------
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  footerAlign?: 'left' | 'center' | 'right';
+  width?: string | number;
+  closeOnOverlayClick?: boolean;
+  showCloseButton?: boolean;
+}
+
+export declare const Modal: React.FC<ModalProps>;
+
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string;
+  hasError?: boolean;
+  name?: string;
+  color?: ThemeColor;
+  size?: string;
+  disableAutoComplete?: boolean;
+  helperText?: string;
+  background?: string;
+  outerBackground?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  placeholder?: string;
+}
+
+export declare const Input: React.FC<InputProps>;
+
+// ---------------------------------------------------------------------------
+// Textarea
+// ---------------------------------------------------------------------------
+
+export interface TextareaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'cols' | 'rows'
+> {
+  label?: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  value?: string;
+  hasError?: boolean;
+  name?: string;
+  color?: ThemeColor;
+  helperText?: string;
+  background?: string;
+  outerBackground?: string;
+  isDynamic?: boolean;
+  isResizeNone?: boolean;
+  rows?: string | number;
+  cols?: string | number;
+  leftIcon?: string;
+  rightIcon?: string;
+  placeholder?: string;
+}
+
+export declare const Textarea: React.FC<TextareaProps>;
+
+// ---------------------------------------------------------------------------
+// Checkbox
+// ---------------------------------------------------------------------------
+
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange'> {
+  label?: string;
+  value?: boolean;
+  color?: ThemeColor;
+  textColor?: string;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+  tabIndex?: number;
+  innerShade?: string;
+  outerShade?: string;
+}
+
+export declare const Checkbox: React.FC<CheckboxProps>;
+
+// ---------------------------------------------------------------------------
+// RadioGroup
+// ---------------------------------------------------------------------------
+
+export interface RadioOption {
+  label: string;
+  value: string | number;
+}
+
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: RadioOption[];
+  value: string | number;
+  onChange: (value: string | number) => void;
+  color?: ThemeColor;
+  isHorizonatal?: boolean;
+  label?: string;
+  ariaLabel?: string;
+  name?: string;
+}
+
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+
+// ---------------------------------------------------------------------------
+// FileUploader
+// ---------------------------------------------------------------------------
+
+export interface FileUploaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  label?: string;
+  labelColor?: string;
+  theme?: ThemeColor | ColorShades;
+  size?: ComponentSize;
+  width?: string | number;
+  isLoading?: boolean;
+  disabled?: boolean;
+  prefixIcon?: React.ComponentType;
+  suffixIcon?: React.ComponentType;
+  type?: string;
+  accept?: string;
+  isMultiple?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export declare const FileUploader: React.FC<FileUploaderProps>;
+
+// ---------------------------------------------------------------------------
+// Dropdown
+// ---------------------------------------------------------------------------
+
+export interface DropdownOption {
+  label: string;
+  value: string | number;
+}
+
+export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: DropdownOption[];
+  onChange: (value: string | number) => void;
+  value?: string | number;
+  width?: string;
+  menuHeight?: string;
+  placeholder?: string;
+  theme?: ThemeColor;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  loaderColor?: string;
+  searchable?: boolean;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  searchPh?: string;
+}
+
+export declare const Dropdown: React.FC<DropdownProps>;
+
+// ---------------------------------------------------------------------------
+// Selectbox
+// ---------------------------------------------------------------------------
+
+export interface SelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: DropdownOption[];
+  onChange: (value: Array<string | number>) => void;
+  value?: Array<string | number>;
+  width?: string;
+  menuHeight?: string;
+  placeholder?: string;
+  theme?: ThemeColor;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  searchable?: boolean;
+  searchPh?: string;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  loaderColor?: string;
+}
+
+export declare const Selectbox: React.FC<SelectboxProps>;
+
+// ---------------------------------------------------------------------------
+// Shimmer
+// ---------------------------------------------------------------------------
+
+export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: string | number;
+  label?: string;
+}
+
+export declare const Shimmer: React.FC<ShimmerProps>;
+
+// ---------------------------------------------------------------------------
+// Spinner
+// ---------------------------------------------------------------------------
+
+export interface SpinnerProps extends React.SVGAttributes<SVGElement> {
+  color?: ThemeColor | string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export declare const Spinner: React.FC<SpinnerProps>;
+
+// ---------------------------------------------------------------------------
+// Loader
+// ---------------------------------------------------------------------------
+
+export type LoaderTheme =
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'yellow'
+  | 'orange'
+  | 'black'
+  | 'grey'
+  | 'violet'
+  | 'teal'
+  | 'purple'
+  | 'pink';
+
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: ComponentSize;
+  theme?: LoaderTheme;
+  isBounce?: boolean;
+  isMini?: boolean;
+  isMiniDark?: boolean;
+}
+
+export declare const Loader: React.FC<LoaderProps>;
+
+// ---------------------------------------------------------------------------
+// PageLoader
+// ---------------------------------------------------------------------------
+
+export interface PageLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme?: ThemeColor;
+  color?: string;
+}
+
+export declare const PageLoader: React.FC<PageLoaderProps>;
+
+// ---------------------------------------------------------------------------
+// OtpInput
+// ---------------------------------------------------------------------------
+
+export interface OtpInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  length?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+
+export declare const OtpInput: React.FC<OtpInputProps>;
+
+// ---------------------------------------------------------------------------
+// Image
+// ---------------------------------------------------------------------------
+
+export interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: string | number;
+  loadLow?: boolean;
+  lowSrc?: string;
+}
+
+export declare const Image: React.FC<ImageProps>;
+
+// ---------------------------------------------------------------------------
+// VideoPlayer
+// ---------------------------------------------------------------------------
+
+export interface VideoPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+  link: string;
+  thumbnail?: string;
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: number;
+  hasShimmer?: boolean;
+}
+
+export declare const VideoPlayer: React.FC<VideoPlayerProps>;
+
+// ---------------------------------------------------------------------------
+// Timer
+// ---------------------------------------------------------------------------
+
+export interface TimerProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: ThemeColor;
+  showTime?: boolean;
+  showTimeWithSec?: boolean;
+  timeZone?: string;
+  isDigital?: boolean;
+  timerSeconds?: number;
+  onTimerAdd?: () => void;
+  onTimerComplete?: () => void;
+  onTimerRemove?: () => void;
+  onTimerPause?: () => void;
+  onTimerPlay?: () => void;
+  size?: number;
+}
+
+export declare const Timer: React.FC<TimerProps>;
+
+// ---------------------------------------------------------------------------
+// Carousel
+// ---------------------------------------------------------------------------
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: unknown[];
+  renderCarousel: (item: unknown, index: number) => React.ReactNode;
+  visibleSlides?: number;
+  hasArrow?: boolean;
+  overlayArrows?: boolean;
+  arrowTop?: string | number;
+  areDotsHidden?: boolean;
+  autoSlide?: boolean;
+  autoSlideSec?: number;
+  loop?: boolean;
+  dragToSlide?: boolean;
+  liveDrag?: boolean;
+  liveDragMobile?: boolean;
+  showProgress?: boolean;
+  defaultIndex?: number;
+  onSlideChange?: (index: number) => void;
+}
+
+export declare const Carousel: React.FC<CarouselProps>;
+
+// ---------------------------------------------------------------------------
+// RootComponent
+// ---------------------------------------------------------------------------
+
+export interface RootComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export declare const RootComponent: React.FC<RootComponentProps>;
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+export declare function usePrevious<T>(value: T): T | undefined;
+export declare function useDebounce<T>(value: T, delay: number): T;
+export declare function useThrottle<T>(value: T, delay: number): T;
+export declare function useToggle(initial?: boolean): [boolean, (next?: boolean) => void];
+export declare function useIsMounted(): React.MutableRefObject<boolean>;
+export declare function useUnmount(callback: () => void): void;
+export declare function useFirstRender(): boolean;
+export declare function useTimeout(callback: () => void, delay: number | null): void;
+export declare function useInterval(callback: () => void, delay: number | null): void;
+export declare function useEventListener(
+  event: string,
+  handler: (e: Event) => void,
+  target?: EventTarget
+): void;
+export declare function useIntersectionObserver(
+  ref: React.RefObject<Element>,
+  options?: IntersectionObserverInit
+): IntersectionObserverEntry | null;
+export declare function useMediaQuery(query: string): boolean;
+export declare function useOutsideClick(
+  ref: React.RefObject<Element>,
+  callback: (e: MouseEvent | TouchEvent) => void
+): void;
+export declare function useWindowSize(): { width: number; height: number };
+export declare function useOnlineStatus(): boolean;
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void];
+export declare function useSessionStorage<T>(key: string, initialValue: T): [T, (value: T) => void];
+export declare function useCopyToClipboard(): {
+  copied: boolean;
+  copy: (text: string) => Promise<void>;
+};

package/index.js

@@ -1,6 +1,6 @@
 import { default as a } from "./components/Pagination/Pagination.js";
 import { default as r, ToastContainer as f } from "./components/Toast/Toast.js";
-import { default as d } from "./components/Spinner/Spinner.js";
+import { default as p } from "./components/Spinner/Spinner.js";
 import { default as m } from "./components/Loader/Loader.js";
 import { default as s } from "./components/PageLoader/PageLoader.js";
 import { default as n } from "./components/OtpInput/OtpInput.js";
@@ -8,40 +8,42 @@ import { default as g } from "./components/Dropdown/Dropdown.js";
 import { default as P } from "./components/RootComponent/RootComponent.js";
 import { default as I } from "./components/Selectbox/Selectbox.js";
 import { default as b } from "./components/Button/Button.js";
-import { default as h } from "./components/Timer/Timer.js";
-import { default as R } from "./components/Shimmer/Shimmer.js";
-import { default as w } from "./components/VideoPlayer/VideoPlayer.js";
-import { default as B } from "./components/Image/Image.js";
-import { default as F } from "./components/Carousel/Carousel.js";
-import { default as H } from "./components/Typography/Headings/index.js";
-import { default as U } from "./components/Typography/P/P.js";
-import { default as j } from "./components/Input/Input/Input.js";
-import { default as v } from "./components/Input/Textarea/Textarea.js";
-import { default as A } from "./components/Input/Checkbox/Checkbox.js";
-import { default as J } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as M } from "./components/Input/FileUploader/FileUploader.js";
+import { default as h } from "./components/Modal/Modal.js";
+import { default as R } from "./components/Timer/Timer.js";
+import { default as w } from "./components/Shimmer/Shimmer.js";
+import { default as B } from "./components/VideoPlayer/VideoPlayer.js";
+import { default as F } from "./components/Image/Image.js";
+import { default as H } from "./components/Carousel/Carousel.js";
+import { default as O } from "./components/Typography/Headings/index.js";
+import { default as V } from "./components/Typography/P/P.js";
+import { default as q } from "./components/Input/Input/Input.js";
+import { default as z } from "./components/Input/Textarea/Textarea.js";
+import { default as E } from "./components/Input/Checkbox/Checkbox.js";
+import { default as K } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as Q } from "./components/Input/FileUploader/FileUploader.js";
 export {
   b as Button,
-  F as Carousel,
-  A as Checkbox,
+  H as Carousel,
+  E as Checkbox,
   g as Dropdown,
-  M as FileUploader,
-  H as Headings,
-  B as Image,
-  j as Input,
+  Q as FileUploader,
+  O as Headings,
+  F as Image,
+  q as Input,
   m as Loader,
+  h as Modal,
   n as OtpInput,
-  U as P,
+  V as P,
   s as PageLoader,
   a as Pagination,
-  J as RadioGroup,
+  K as RadioGroup,
   P as RootComponent,
   I as Selectbox,
-  R as Shimmer,
-  d as Spinner,
-  v as Textarea,
-  h as Timer,
+  w as Shimmer,
+  p as Spinner,
+  z as Textarea,
+  R as Timer,
   r as Toast,
   f as ToastContainer,
-  w as VideoPlayer
+  B as VideoPlayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.4.3",
+  "version": "3.5.1",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",