meticulous-ui 3.5.0 → 3.5.2

package/components/Toast/Toast.js

@@ -1,72 +1,74 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as l, useRef as h, useEffect as R, createElement as N } from "react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as i, useRef as R, useEffect as C, createElement as N } from "react";
 import { createPortal as b } from "react-dom";
 import { Logo as j } from "./helpers.js";
-import k from "../../colors/grey.js";
-import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as v } from "./constants.js";
-import { ToastWrapper as D, Message as I, Title as W, Subtitle as _, CloseButtonContainer as z, ProgressRing as q, CloseWrapper as G, ToastsContainer as H } from "./styles.js";
+import y from "../../colors/grey.js";
+import { COLOR_MAP as A, INFO as B, INFO_COLORS as D, ERROR as M } from "./constants.js";
+import { ToastWrapper as I, Message as W, Title as _, Subtitle as z, CloseButtonContainer as q, ProgressRing as G, CloseWrapper as H, ToastsContainer as J } from "./styles.js";
 const x = () => {
-}, ee = ({ toasts: e, ...r }) => {
-  const [o, s] = l(e);
-  R(() => {
-    s(e);
+}, re = ({ toasts: e, ...r }) => {
+  const [o, n] = i(e);
+  C(() => {
+    n(e);
   }, [e]);
-  const u = ({ type: a, id: m, title: d, subtitle: n, duration: f, onExpire: c = x }, C) => /* @__PURE__ */ N(J, { type: a, title: d, subtitle: n, duration: f, key: m, onExpire: c });
+  const l = ({ type: u, id: a, title: m, subtitle: d, duration: s, onExpire: f = x }, T) => /* @__PURE__ */ N(K, { type: u, title: m, subtitle: d, duration: s, key: a, onExpire: f });
   return b(
-    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(u) }),
+    /* @__PURE__ */ t(J, { ...r, children: [...o].reverse().map(l) }),
     document.body
   );
-}, w = (e, r, o) => () => {
+}, v = (e, r, o) => () => {
   e(!0), setTimeout(() => {
     r(!1), o();
   }, 500);
-}, J = ({
-  type: e = A,
+}, K = ({
+  type: e = B,
   visible: r = !0,
   duration: o = 5,
-  onExpire: s = x,
+  onExpire: n = x,
+  hasClockwiseRotation: l = !1,
   title: u,
   subtitle: a,
   ...m
 }) => {
-  const [d, n] = l(r), [f, c] = l(!1), [C, O] = l(!1), T = h(null), p = h((o - 0.5) * 1e3), g = h(null), $ = (F) => {
-    g.current = Date.now(), T.current = setTimeout(w(c, n, s), F);
+  const [d, s] = i(r), [f, T] = i(!1), [L, O] = i(!1), h = R(null), p = R((o - 0.5) * 1e3), g = R(null), $ = (F) => {
+    g.current = Date.now(), h.current = setTimeout(v(T, s, n), F);
   };
-  R(() => {
-    n(r);
-  }, [r]), R(() => ($(p.current), () => clearTimeout(T.current)), []);
-  const L = () => {
-    clearTimeout(T.current), p.current -= Date.now() - g.current, O(!0);
-  }, E = () => {
+  C(() => {
+    s(r);
+  }, [r]), C(() => ($(p.current), () => clearTimeout(h.current)), []);
+  const E = () => {
+    clearTimeout(h.current), p.current -= Date.now() - g.current, O(!0);
+  }, P = () => {
     O(!1), $(p.current);
-  }, { main: M, side: P, bg: S } = y[e] ?? B;
+  }, { main: w, side: S, bg: k } = A[e] ?? D;
   if (d)
-    return /* @__PURE__ */ i(
-      D,
+    return /* @__PURE__ */ c(
+      I,
       {
-        $bg: S,
-        role: e === v ? "alert" : "status",
-        "aria-live": e === v ? "assertive" : "polite",
+        $bg: k,
+        role: e === M ? "alert" : "status",
+        "aria-live": e === M ? "assertive" : "polite",
         "aria-atomic": "true",
         className: `${f ? "fade-out" : "fade-in"}`,
-        onMouseEnter: L,
-        onMouseLeave: E,
+        onMouseEnter: E,
+        onMouseLeave: P,
         ...m,
         children: [
-          /* @__PURE__ */ t(j, { type: e, $main: M, $side: P }),
-          /* @__PURE__ */ i(I, { children: [
-            /* @__PURE__ */ t(W, { children: u }),
-            a && /* @__PURE__ */ t(_, { children: a })
+          /* @__PURE__ */ t(j, { type: e, $main: w, $side: S }),
+          /* @__PURE__ */ c(W, { children: [
+            /* @__PURE__ */ t(_, { children: u }),
+            a && /* @__PURE__ */ t(z, { children: a })
           ] }),
-          /* @__PURE__ */ i(z, { children: [
-            /* @__PURE__ */ i(
-              q,
+          /* @__PURE__ */ c(q, { children: [
+            /* @__PURE__ */ c(
+              G,
               {
                 "aria-hidden": "true",
                 viewBox: "0 0 28 28",
                 $duration: o,
-                $color: M,
-                $paused: C,
+                $color: w,
+                $paused: L,
+                $hasClockwiseRotation: l,
                 children: [
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" }),
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" })
@@ -74,12 +76,12 @@ const x = () => {
               }
             ),
             /* @__PURE__ */ t(
-              G,
+              H,
               {
                 "aria-label": "Close notification",
                 size: 13,
-                color: k.m600,
-                onClick: w(c, n, s)
+                color: y.m600,
+                onClick: v(T, s, n)
               }
             )
           ] })
@@ -88,6 +90,6 @@ const x = () => {
     );
 };
 export {
-  ee as ToastContainer,
-  J as default
+  re as ToastContainer,
+  K as default
 };

package/components/Toast/styles.js

@@ -182,7 +182,7 @@ const s = r`
 `, k = t.svg`
   position: absolute;
   inset: 0;
-  transform: rotate(-90deg);
+  transform: ${({ $hasClockwiseRotation: e }) => e ? "rotate(-90deg)" : "rotate(90deg) scaleX(-1)"};
   pointer-events: none;
 
   circle {
@@ -235,7 +235,7 @@ const s = r`
     max-width: 18rem;
     width: auto;
   }
-`, I = t.div`
+`, X = t.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${a.m700};
@@ -257,7 +257,7 @@ export {
   b as Outer,
   y as OuterChild,
   k as ProgressRing,
-  I as Subtitle,
+  X as Subtitle,
   z as Title,
   g as ToastWrapper,
   w as ToastsContainer

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "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",