spotlibs-components 0.1.12 → 0.1.14

package/dist/{components/mui → mui}/index.d.mts

@@ -2,22 +2,16 @@ export { default as Box } from '@mui/material/Box';
 export { default as Stack } from '@mui/material/Stack';
 export { default as Grid } from '@mui/material/Grid';
 export { default as Container } from '@mui/material/Container';
+export { styled } from '@mui/material/styles';
 export { default as ThemeProvider } from '@mui/material/styles/ThemeProvider';
-export { default as createTheme } from '@mui/material/styles/createTheme';
-export { default as useMediaQuery } from '@mui/material/useMediaQuery';
 export { default as Paper } from '@mui/material/Paper';
 export { default as Divider } from '@mui/material/Divider';
 export { default as Collapse } from '@mui/material/Collapse';
-export { default as Fade } from '@mui/material/Fade';
-export { default as Grow } from '@mui/material/Grow';
-export { default as Slide } from '@mui/material/Slide';
-export { default as Zoom } from '@mui/material/Zoom';
-export { default as Hidden } from '@mui/material/Hidden';
 export { default as Portal } from '@mui/material/Portal';
 export { default as ClickAwayListener } from '@mui/material/ClickAwayListener';
 export { default as Popper } from '@mui/material/Popper';
 export { default as Backdrop } from '@mui/material/Backdrop';
 export { default as CircularProgress } from '@mui/material/CircularProgress';
 export { default as LinearProgress } from '@mui/material/LinearProgress';
-export { default as Skeleton } from '@mui/material/Skeleton';
-export { alpha, darken, lighten, styled, useTheme } from '@mui/material/styles';
+export { default as InputAdornment } from '@mui/material/InputAdornment';
+export { default as IconButton } from '@mui/material/IconButton';

package/dist/{components/mui → mui}/index.mjs

@@ -1,27 +1,21 @@
 "use client";
-import '../../chunk-YOSPWY5K.mjs';
+import '../chunk-YOSPWY5K.mjs';
 export { default as Box } from '@mui/material/Box';
 export { default as Stack } from '@mui/material/Stack';
 export { default as Grid } from '@mui/material/Grid';
 export { default as Container } from '@mui/material/Container';
-export { alpha, darken, lighten, styled, useTheme } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
 export { default as ThemeProvider } from '@mui/material/styles/ThemeProvider';
-export { default as createTheme } from '@mui/material/styles/createTheme';
-export { default as useMediaQuery } from '@mui/material/useMediaQuery';
 export { default as Paper } from '@mui/material/Paper';
 export { default as Divider } from '@mui/material/Divider';
 export { default as Collapse } from '@mui/material/Collapse';
-export { default as Fade } from '@mui/material/Fade';
-export { default as Grow } from '@mui/material/Grow';
-export { default as Slide } from '@mui/material/Slide';
-export { default as Zoom } from '@mui/material/Zoom';
-export { default as Hidden } from '@mui/material/Hidden';
 export { default as Portal } from '@mui/material/Portal';
 export { default as ClickAwayListener } from '@mui/material/ClickAwayListener';
 export { default as Popper } from '@mui/material/Popper';
 export { default as Backdrop } from '@mui/material/Backdrop';
 export { default as CircularProgress } from '@mui/material/CircularProgress';
 export { default as LinearProgress } from '@mui/material/LinearProgress';
-export { default as Skeleton } from '@mui/material/Skeleton';
+export { default as InputAdornment } from '@mui/material/InputAdornment';
+export { default as IconButton } from '@mui/material/IconButton';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/{types-D1akE7ak.d.mts → types-BtwscYRX.d.mts}

@@ -380,6 +380,52 @@ interface BaseButtonProps {
 
 declare function BaseButton(props: BaseButtonProps): React.ReactElement;
 
+interface BaseSkeletonProps {
+  /**
+   * Skeleton shape variant.
+   * - `text` — single line of text placeholder
+   * - `rectangular` — rectangle block placeholder
+   * - `rounded` — rectangle with border-radius
+   * - `circular` — circle placeholder (avatar, icon)
+   */
+  variant?: "text" | "rectangular" | "rounded" | "circular";
+  /**
+   * Animation type.
+   * - `pulse` — fading animation (default)
+   * - `wave` — wave sweep animation
+   * - `none` — no animation (static)
+   */
+  animation?: "pulse" | "wave" | "none";
+  /** Width of the skeleton. Accepts number (px) or string (e.g. "100%", "200px") */
+  width?: number | string;
+  /** Height of the skeleton. Accepts number (px) or string (e.g. "40px", "1.2em") */
+  height?: number | string;
+  /** Number of skeleton lines to render. If > 1, renders stacked skeletons. */
+  count?: number;
+  /** Gap between stacked skeletons when count > 1. Default is SpacingToken.spacing2 */
+  gap?: string | number;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseSkeleton(props: BaseSkeletonProps): React.ReactElement;
+
+interface BaseSwitchProps {
+  /** Current switch state */
+  status?: boolean;
+  /** Label text or element */
+  label?: React.ReactNode;
+  /** Label position relative to the switch */
+  labelPlacement?: "start" | "end" | "top" | "bottom";
+  /** Disabled state */
+  isDisabled?: boolean;
+  /** Change handler */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+declare function BaseSwitch(props: BaseSwitchProps): React.ReactElement;
+
 interface BaseCardProps {
   /** Card variant type */
   variant?: "default" | "with-header" | "with-header-footer";
@@ -409,6 +455,10 @@ interface BaseCardProps {
   showEndIcon?: boolean;
   /** Footer content (only for with-header-footer variant) */
   footer?: React.ReactNode;
+  /** Enable watermark overlay on content area */
+  isWatermark?: boolean;
+  /** Watermark text (e.g. "12345678 / Brispot Web") */
+  watermarkText?: string;
   /** MUI sx overrides */
   sx?: SxProps;
   [key: string]: any;
@@ -416,20 +466,32 @@ interface BaseCardProps {
 
 declare function BaseCard(props: BaseCardProps): React.ReactElement;
 
-interface BaseSwitchProps {
-  /** Current switch state */
-  status?: boolean;
-  /** Label text or element */
-  label?: React.ReactNode;
-  /** Label position relative to the switch */
-  labelPlacement?: "start" | "end" | "top" | "bottom";
-  /** Disabled state */
-  isDisabled?: boolean;
-  /** Change handler */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+interface BaseSnackbarPosition {
+  vertical: "top" | "bottom";
+  horizontal: "left" | "center" | "right";
 }
 
-declare function BaseSwitch(props: BaseSwitchProps): React.ReactElement;
+interface BaseSnackbarProps {
+  /** Whether the snackbar is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: (event?: React.SyntheticEvent | Event, reason?: string) => void;
+  /** Snackbar message content */
+  message?: string;
+  /** Color variant */
+  variant?: "success" | "error" | "info" | "warning" | "default";
+  /** Auto hide duration in milliseconds */
+  duration?: number;
+  /** Anchor origin position */
+  position?: BaseSnackbarPosition;
+  /** Icon element or component. If not provided, no icon is shown. */
+  icon?: React.ReactNode | React.ComponentType<any>;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseSnackbar(props: BaseSnackbarProps): React.ReactElement;
 
 interface BaseCheckboxOption {
   /** Label yang ditampilkan */
@@ -1025,6 +1087,170 @@ declare function BaseModal(
   props: BaseModalProps,
 ): React.ReactElement | null;
 
+interface BaseModalAlertShowOptions {
+  /** Icon type preset or custom image path */
+  icon?: "success" | "error" | "info" | "warning" | "confirm" | string;
+  /** Modal title text */
+  title?: string;
+  /** Modal description text */
+  description?: string;
+  /** Cancel button text. Default: "Batal" */
+  cancelBtnText?: string;
+  /** Confirm button text. Default: "Ya" */
+  confirmBtnText?: string;
+  /** Cancel button action. Default: closes modal. Can be custom function. */
+  cancelBtnProps?: () => void;
+  /** Confirm button action. Called on confirm click. */
+  confirmBtnProps?: () => void;
+  /** Show cancel button. Default: true */
+  showCancelBtn?: boolean;
+  /** Show confirm button. Default: true */
+  showConfirmBtn?: boolean;
+}
+
+interface BaseModalAlertDialogProps extends BaseModalAlertShowOptions {
+  /** Whether the modal is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+}
+
+/**
+ * Imperative BaseModalAlert API.
+ *
+ * Usage:
+ * ```jsx
+ * import { BaseModalAlert } from 'spotlibs-components';
+ *
+ * BaseModalAlert.show({
+ *   icon: 'success',
+ *   title: 'Berhasil!',
+ *   description: 'Data berhasil disimpan.',
+ *   confirmBtnText: 'OK',
+ *   showCancelBtn: false,
+ *   confirmBtnProps: () => console.log('confirmed'),
+ * });
+ *
+ * BaseModalAlert.hide();
+ * ```
+ */
+declare const BaseModalAlert: {
+  /** Show the modal alert with given options */
+  show: (options: BaseModalAlertShowOptions) => void;
+  /** Hide the modal alert */
+  hide: () => void;
+  /** Internal: set modal ref (used by BaseModalAlertProvider) */
+  setModalRef: (ref: React.RefObject<any>) => void;
+};
+
+/**
+ * Provider component. Mount once at app root to enable BaseModalAlert.show()/hide().
+ *
+ * ```jsx
+ * import { BaseModalAlertProvider } from 'spotlibs-components';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <BaseModalAlertProvider />
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function BaseModalAlertProvider(): React.ReactElement;
+
+/**
+ * Controlled dialog component for direct usage without imperative API.
+ */
+declare function BaseModalAlertDialog(props: BaseModalAlertDialogProps): React.ReactElement;
+
+interface BaseModalLoadingDialogProps {
+  /** Whether the loading modal is open */
+  open?: boolean;
+  /** Loading message text. Default: "Mohon tunggu..." */
+  message?: string;
+}
+
+/**
+ * Imperative BaseModalLoading API.
+ *
+ * Usage:
+ * ```jsx
+ * import { BaseModalLoading } from 'spotlibs-components';
+ *
+ * BaseModalLoading.show(); // default message
+ * BaseModalLoading.show("Sedang memproses data...");
+ * BaseModalLoading.hide();
+ * ```
+ */
+declare const BaseModalLoading: {
+  /** Show the loading modal. Optionally pass a custom message. */
+  show: (message?: string) => void;
+  /** Hide the loading modal */
+  hide: () => void;
+  /** Internal: set modal ref (used by BaseModalLoadingProvider) */
+  setModalRef: (ref: React.RefObject<any>) => void;
+};
+
+/**
+ * Provider component. Mount once at app root to enable BaseModalLoading.show()/hide().
+ *
+ * ```jsx
+ * import { BaseModalLoadingProvider } from 'spotlibs-components';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <BaseModalLoadingProvider />
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function BaseModalLoadingProvider(): React.ReactElement;
+
+/**
+ * Controlled loading dialog component for direct usage without imperative API.
+ */
+declare function BaseModalLoadingDialog(props: BaseModalLoadingDialogProps): React.ReactElement;
+
+interface BaseModalPopupProps {
+  /** Whether the modal is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+  /** Modal variant type */
+  variant?: "default" | "with-header" | "with-header-footer";
+  /** Header background color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Header title text */
+  title?: string;
+  /** Header subtitle text */
+  subtitle?: string;
+  /** Icon element before title in header */
+  startIcon?: React.ReactNode;
+  /** Modal body content */
+  children?: React.ReactNode;
+  /** Footer content (only for with-header-footer variant) */
+  footer?: React.ReactNode;
+  /** MUI Dialog maxWidth. Default: "sm" */
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+  /** Whether dialog takes full width of maxWidth. Default: true */
+  fullWidth?: boolean;
+  /** Enable watermark overlay on content area */
+  isWatermark?: boolean;
+  /** Watermark text (e.g. "12345678 / Brispot Web") */
+  watermarkText?: string;
+  /** MUI sx overrides for Dialog */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseModalPopup(props: BaseModalPopupProps): React.ReactElement;
+
 interface BaseModalStepperStep {
   label?: string;
   description?: string;
@@ -1081,4 +1307,4 @@ declare function BaseModalOTP(
   props: BaseModalOTPProps,
 ): React.ReactElement | null;
 
-export { type BaseStepperProps as $, type BaseDatatableAlign as A, BaseAlert as B, CONTENT_SPACING_TOKENS as C, DerivedColor as D, type BaseDatatableColumn as E, type BaseDatatableFeatures as F, type BaseDatatableHeaderCell as G, type BaseDatatableLayout as H, type BaseDatatablePagination as I, type BaseDatatableProps as J, type BaseDatatableSelection as K, type BaseDatatableSortPayload as L, type BaseDatatableSortState as M, type BaseDatePickerProps as N, type BaseDropdownProps as O, PrimitiveColor as P, type BaseDropzoneProps as Q, Radius as R, Shadow as S, TextFieldUpload as T, type BaseModalOTPProps as U, VariantStyles as V, type BaseModalProps as W, type BaseModalStepperProps as X, type BaseModalStepperStep as Y, type BaseRadioButtonProps as Z, type BaseStepperDashboardStep as _, BaseButton as a, type BaseStepperSimpleStep as a0, type BaseSwitchProps as a1, type BaseTextAreaProps as a2, type BaseTextFieldProps as a3, type ContentSpacingProps as a4, type DerivedColorType as a5, type PrimitiveColorType as a6, type RadiusLevel as a7, type RadiusMap as a8, type RadiusTokenProps as a9, type ShadowElevation as aa, type ShadowLevel as ab, type ShadowMap as ac, type ShadowTokenProps as ad, type SpacingProps as ae, type TextFieldUploadProps as af, type TypographyColor as ag, type TypographyProps as ah, type TypographyVariant as ai, BaseCard as b, BaseCheckbox as c, BaseDatatable as d, BaseDatePicker as e, BaseDropdown as f, BaseDropzone as g, BaseModal as h, BaseModalOTP as i, BaseModalStepper as j, BaseRadioButton as k, BaseStepper as l, BaseSwitch as m, BaseTextArea as n, BaseTextField as o, BaseTypography as p, ContentSpacing as q, RadiusToken as r, ShadowToken as s, Spacing as t, SpacingToken as u, type BaseAlertProps as v, type BaseButtonProps as w, type BaseCardProps as x, type BaseCheckboxOption as y, type BaseCheckboxProps as z };
+export { type BaseDatePickerProps as $, RadiusToken as A, BaseAlert as B, CONTENT_SPACING_TOKENS as C, DerivedColor as D, ShadowToken as E, Spacing as F, SpacingToken as G, type BaseAlertProps as H, type BaseButtonProps as I, type BaseCardProps as J, type BaseCheckboxOption as K, type BaseCheckboxProps as L, type BaseDatatableAlign as M, type BaseDatatableColumn as N, type BaseDatatableFeatures as O, PrimitiveColor as P, type BaseDatatableHeaderCell as Q, Radius as R, Shadow as S, TextFieldUpload as T, type BaseDatatableLayout as U, VariantStyles as V, type BaseDatatablePagination as W, type BaseDatatableProps as X, type BaseDatatableSelection as Y, type BaseDatatableSortPayload as Z, type BaseDatatableSortState as _, BaseButton as a, type BaseDropdownProps as a0, type BaseDropzoneProps as a1, type BaseModalAlertDialogProps as a2, type BaseModalAlertShowOptions as a3, type BaseModalLoadingDialogProps as a4, type BaseModalOTPProps as a5, type BaseModalPopupProps as a6, type BaseModalProps as a7, type BaseModalStepperProps as a8, type BaseModalStepperStep as a9, type BaseRadioButtonProps as aa, type BaseSkeletonProps as ab, type BaseSnackbarPosition as ac, type BaseSnackbarProps as ad, type BaseStepperDashboardStep as ae, type BaseStepperProps as af, type BaseStepperSimpleStep as ag, type BaseSwitchProps as ah, type BaseTextAreaProps as ai, type BaseTextFieldProps as aj, type ContentSpacingProps as ak, type DerivedColorType as al, type PrimitiveColorType as am, type RadiusLevel as an, type RadiusMap as ao, type RadiusTokenProps as ap, type ShadowElevation as aq, type ShadowLevel as ar, type ShadowMap as as, type ShadowTokenProps as at, type SpacingProps as au, type TextFieldUploadProps as av, type TypographyColor as aw, type TypographyProps as ax, type TypographyVariant as ay, BaseCard as b, BaseCheckbox as c, BaseDatatable as d, BaseDatePicker as e, BaseDropdown as f, BaseDropzone as g, BaseModal as h, BaseModalAlert as i, BaseModalAlertDialog as j, BaseModalAlertProvider as k, BaseModalLoading as l, BaseModalLoadingDialog as m, BaseModalLoadingProvider as n, BaseModalOTP as o, BaseModalPopup as p, BaseModalStepper as q, BaseRadioButton as r, BaseSkeleton as s, BaseSnackbar as t, BaseStepper as u, BaseSwitch as v, BaseTextArea as w, BaseTextField as x, BaseTypography as y, ContentSpacing as z };

package/dist/types.d.mts

@@ -0,0 +1,4 @@
+export { H as BaseAlertProps, I as BaseButtonProps, J as BaseCardProps, K as BaseCheckboxOption, L as BaseCheckboxProps, M as BaseDatatableAlign, N as BaseDatatableColumn, O as BaseDatatableFeatures, Q as BaseDatatableHeaderCell, U as BaseDatatableLayout, W as BaseDatatablePagination, X as BaseDatatableProps, Y as BaseDatatableSelection, Z as BaseDatatableSortPayload, _ as BaseDatatableSortState, $ as BaseDatePickerProps, a0 as BaseDropdownProps, a1 as BaseDropzoneProps, a2 as BaseModalAlertDialogProps, a3 as BaseModalAlertShowOptions, a4 as BaseModalLoadingDialogProps, a5 as BaseModalOTPProps, a6 as BaseModalPopupProps, a7 as BaseModalProps, a8 as BaseModalStepperProps, a9 as BaseModalStepperStep, aa as BaseRadioButtonProps, ab as BaseSkeletonProps, ac as BaseSnackbarPosition, ad as BaseSnackbarProps, ae as BaseStepperDashboardStep, af as BaseStepperProps, ag as BaseStepperSimpleStep, ah as BaseSwitchProps, ai as BaseTextAreaProps, aj as BaseTextFieldProps, ak as ContentSpacingProps, al as DerivedColorType, am as PrimitiveColorType, an as RadiusLevel, ao as RadiusMap, ap as RadiusTokenProps, aq as ShadowElevation, ar as ShadowLevel, as as ShadowMap, at as ShadowTokenProps, au as SpacingProps, av as TextFieldUploadProps, aw as TypographyColor, ax as TypographyProps, ay as TypographyVariant } from './types-BtwscYRX.mjs';
+import 'react';
+import '@mui/material/styles';
+import 'react-hook-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spotlibs-components",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "private": false,
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -29,7 +29,7 @@
       "default": "./dist/mui/index.mjs"
     },
     "./utils": {
-      "types": "./src/utils/index.d.ts",
+      "types": "./dist/utils/index.d.mts",
       "import": "./dist/utils/index.mjs",
       "default": "./dist/utils/index.mjs"
     },
@@ -42,6 +42,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@hirohe/react-watermark": "^0.5.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.1.1",
     "@mui/icons-material": "^5.16.14",