spotlibs-components 0.1.9 → 0.1.11

package/dist/{types-qsnVqq6_.d.mts → types-BkrxwBFm.d.mts}

@@ -4,21 +4,28 @@ import { SxProps } from '@mui/material/styles';
 import { Control, RegisterOptions } from 'react-hook-form';
 
 interface BaseAlertProps {
-  variant?: string;
-  type?: string;
-  title?: React.ReactNode;
+  /** Alert color variant */
+  variant?: "default" | "error" | "info" | "success" | "warning";
+  /** MUI Alert variant type */
+  type?: "standard" | "filled" | "outlined";
+  /** Alert title */
+  title?: string;
+  /** Alert content */
   children?: React.ReactNode;
-  icon?: React.ReactNode;
+  /** Icon element or component. If not provided, no icon is shown. */
+  icon?: React.ReactNode | React.ComponentType<any>;
+  /** Custom background color override */
   color?: string;
-  sx?: any;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  /** Close handler. If provided, close button is shown. */
   onClose?: () => void;
-  childrenStyle?: React.CSSProperties;
+  /** sx overrides for children wrapper */
+  childrenSx?: SxProps;
   [key: string]: any;
 }
 
-declare function BaseAlert(
-  props: BaseAlertProps,
-): React.ReactElement | null;
+declare function BaseAlert(props: BaseAlertProps): React.ReactElement;
 
 interface PrimitiveColorType {
   color_overlay: string;
@@ -118,14 +125,23 @@ interface DerivedColorType {
   color_bg_surface: string;
   color_bg_inverse: string;
   color_bg_disabled: string;
+
+  color_bg_brand_primary_strong: string;
   color_bg_brand_primary: string;
   color_bg_brand_primary_subtle: string;
+  color_bg_brand_secondary_strong: string;
   color_bg_brand_secondary: string;
   color_bg_brand_secondary_subtle: string;
+
+  color_bg_success_strong: string;
   color_bg_success: string;
   color_bg_success_subtle: string;
+
+  color_bg_danger_strong: string;
   color_bg_danger: string;
   color_bg_danger_subtle: string;
+
+  color_bg_warning_strong: string;
   color_bg_warning: string;
   color_bg_warning_subtle: string;
 
@@ -165,30 +181,53 @@ interface DerivedColorType {
 
 declare const DerivedColor: DerivedColorType;
 
-interface TypographyColorToken {
-  value: string;
-  token: string;
-  alias: string;
-}
-
-declare const VariantStyles: Record<
-  string,
-  {
-    fontSize: string;
-    fontWeight: number;
-  }
->;
-
-interface TypographyProps {
-  variant?: string;
-  children?: React.ReactNode;
-  sx?: React.CSSProperties & Record<string, unknown>;
-  [key: string]: any;
-}
-
-declare function Typography(
-  props: TypographyProps,
-): React.ReactElement | null;
+type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "header1_regular"
+  | "header1_semibold"
+  | "header1_bold"
+  | "header2_regular"
+  | "header2_semibold"
+  | "header2_bold"
+  | "body1_regular"
+  | "body2_regular"
+  | "caption_regular";
+
+type TypographyColor =
+  | "default"
+  | "subtle"
+  | "disabled"
+  | "placeholder"
+  | "inverse"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning";
+
+interface VariantStyleEntry {
+  fontSize: string;
+  fontWeight: number;
+}
+
+declare const VariantStyles: Record<TypographyVariant, VariantStyleEntry>;
+
+interface TypographyProps {
+  /** Format: "variant.color" e.g. "body1_regular.default" */
+  variant?: `${TypographyVariant}.${TypographyColor}` | TypographyVariant;
+  /** Content */
+  children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseTypography(props: TypographyProps): React.ReactElement | null;
 
 declare const SpacingToken: {
   spacing0: string;
@@ -204,7 +243,7 @@ declare const SpacingToken: {
   spacing10: string;
 };
 
-declare const CONTENT_SPACING_TOKENS: {
+declare const CONTENT_SPACING_TOKENS: {
   spacing_1: {
     mobile: string;
     tablet: string;
@@ -219,41 +258,41 @@ declare const CONTENT_SPACING_TOKENS: {
     mobile: string;
     tablet: string;
     web: string;
-  };
-};
-
-interface ResponsiveSpacingValue {
-  mobile?: string;
-  tablet?: string;
-  web?: string;
-  [key: string]: string | undefined;
-}
-
-type SpacingSizeValue = keyof typeof SpacingToken | string | number;
-
-type ContentSpacingSizeValue =
-  | keyof typeof CONTENT_SPACING_TOKENS
-  | ResponsiveSpacingValue;
-
-interface SpacingProps {
-  size?: SpacingSizeValue;
-  axis?: "vertical" | "horizontal";
-  as?: React.ElementType;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-  [key: string]: unknown;
-}
-
-interface ContentSpacingProps {
-  size?: ContentSpacingSizeValue;
-  breakpoint?: "mobile" | "tablet" | "web";
-  as?: React.ElementType;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-  [key: string]: unknown;
-}
+  };
+};
+
+interface ResponsiveSpacingValue {
+  mobile?: string;
+  tablet?: string;
+  web?: string;
+  [key: string]: string | undefined;
+}
+
+type SpacingSizeValue = keyof typeof SpacingToken | string | number;
+
+type ContentSpacingSizeValue =
+  | keyof typeof CONTENT_SPACING_TOKENS
+  | ResponsiveSpacingValue;
+
+interface SpacingProps {
+  size?: SpacingSizeValue;
+  axis?: "vertical" | "horizontal";
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+interface ContentSpacingProps {
+  size?: ContentSpacingSizeValue;
+  breakpoint?: "mobile" | "tablet" | "web";
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
 
 declare const Spacing: React.FC<SpacingProps>;
 
@@ -279,12 +318,10 @@ type ShadowLevel = keyof ShadowMap;
 interface ShadowTokenProps {
   /** Elevation level */
   level?: ShadowLevel;
-  /** HTML element or component to render */
-  as?: React.ElementType;
-  /** Inline style overrides */
-  style?: React.CSSProperties;
   /** Content */
   children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
   [key: string]: any;
 }
 
@@ -301,17 +338,15 @@ interface RadiusMap {
 
 declare const Radius: RadiusMap;
 
-type RadiusKey = keyof RadiusMap;
+type RadiusLevel = keyof RadiusMap;
 
 interface RadiusTokenProps {
-  /** Radius token key */
-  radius?: RadiusKey;
-  /** HTML element or component to render */
-  as?: React.ElementType;
-  /** Inline style overrides */
-  style?: React.CSSProperties;
+  /** Radius level */
+  radius?: RadiusLevel;
   /** Content */
   children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
   [key: string]: any;
 }
 
@@ -324,14 +359,20 @@ interface BaseButtonProps {
   children?: React.ReactNode;
   /** Visual style variant */
   variant?: "fill" | "outline" | "text" | "fab" | "ellipse-fill" | "ellipse-outline";
-  /** Color key from PrimitiveColor or a raw CSS color string */
-  color?: string;
+  /** Semantic color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Custom color key from PrimitiveColor. Overrides `color` prop when set. */
+  customColor?: keyof typeof PrimitiveColor | null;
   /** Button size */
   size?: "large" | "small";
   /** Disabled state */
   disabled?: boolean;
   /** Icon element rendered before children */
-  icon?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  /** Icon element rendered after children */
+  endIcon?: React.ReactNode;
+  /** Button width */
+  width?: string;
   /** MUI sx overrides */
   sx?: SxProps;
   [key: string]: any;
@@ -339,62 +380,36 @@ interface BaseButtonProps {
 
 declare function BaseButton(props: BaseButtonProps): React.ReactElement;
 
-interface BaseCardDataItem {
-  icon?: React.ReactNode;
-  count?: number | string;
-  title?: string;
-  update?: string;
-}
-
-interface BaseCardProps {
-  /** Card layout type */
-  type?: "default" | "notification" | "with-header" | "summary";
-  /** Card body content */
-  children?: React.ReactNode;
+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;
-  /** Icon displayed in the card */
-  icon?: React.ReactNode;
-  /** Label text */
-  label?: string;
-  /** Title text */
-  title?: string;
-  /** Subtitle text */
-  subtitle?: string;
-  /** Data items for summary card type */
-  dataList?: BaseCardDataItem[];
-  /** Last update date string */
-  updateDate?: string;
-  /** Bold the count icon */
-  boldCountIcon?: boolean;
-  /** Bold the count value */
-  boldCount?: boolean;
-  /** Bold the title */
-  boldTitle?: boolean;
-  /** Bold the update text */
-  boldUpdate?: boolean;
-  /** Custom icon element for the header */
-  iconHeader?: React.ReactElement;
-  /** Card background color */
-  backgroundColor?: string;
-  /** Title color */
-  colorTitlte?: string;
-  /** Nominal/count color */
-  colorNominal?: string;
-  /** Show/hide icon */
-  displayIcon?: boolean;
-  /** Number format type */
-  formatNumber?: "currency" | "nominal" | string;
-  /** Count text color */
-  colorCount?: string;
-  /** Header background color */
-  headerBackgroundColor?: string;
-  /** Enable collapse toggle */
-  isCollapsible?: boolean;
   [key: string]: any;
 }
 
-declare function BaseCard(props: BaseCardProps): React.ReactElement;
+declare function BaseSkeleton(props: BaseSkeletonProps): React.ReactElement;
 
 interface BaseSwitchProps {
   /** Current switch state */
@@ -411,62 +426,142 @@ interface BaseSwitchProps {
 
 declare function BaseSwitch(props: BaseSwitchProps): React.ReactElement;
 
-interface BaseCheckboxOption {
-  label: React.ReactNode;
-  value: string;
-  disabled?: boolean;
-  [key: string]: any;
-}
-
-interface BaseCheckboxSharedProps {
-  options: BaseCheckboxOption[];
-  label?: React.ReactNode;
-  disabled?: boolean;
-  labelPlacement?: "top" | "bottom" | "start" | "end";
-  isHorizontal?: boolean;
-  sx?: any;
-  [key: string]: any;
-}
-
-interface BaseCheckboxSingleProps extends Omit<BaseCheckboxSharedProps, "options"> {
-  options?: undefined;
-  checked?: boolean;
-  onChange?: (checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-interface BaseCheckboxGroupProps extends BaseCheckboxSharedProps {
-  options: BaseCheckboxOption[];
-  checked?: string[];
-  onChange?: (newValue: string[]) => void;
-}
+interface BaseCardProps {
+  /** Card variant type */
+  variant?: "default" | "with-header" | "with-header-footer";
+  /** Card body content */
+  children?: React.ReactNode;
+  /** Header background color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Header title text */
+  title?: string;
+  /** Header subtitle text */
+  subtitle?: string;
+  /** Bold the title */
+  boldTitle?: boolean;
+  /** Bold the subtitle */
+  boldSubtitle?: boolean;
+  /** Show/hide subtitle */
+  showSubtitle?: boolean;
+  /** Enable collapse/expand on header click */
+  isCollapsible?: boolean;
+  /** Icon element before title in header */
+  startIcon?: React.ReactNode;
+  /** Icon element after title in header */
+  endIcon?: React.ReactNode;
+  /** Show/hide startIcon */
+  showStartIcon?: boolean;
+  /** Show/hide endIcon */
+  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. "000000 / Nama Lengkap") */
+  watermarkText?: string;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseCard(props: BaseCardProps): React.ReactElement;
 
-type BaseCheckboxProps =
-  | BaseCheckboxSingleProps
-  | BaseCheckboxGroupProps;
+interface BaseSnackbarPosition {
+  vertical: "top" | "bottom";
+  horizontal: "left" | "center" | "right";
+}
+
+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;
 
-declare function BaseCheckbox(
-  props: BaseCheckboxProps,
+interface BaseCheckboxOption {
+  /** Label yang ditampilkan */
+  label: React.ReactNode;
+  /** Nilai opsi */
+  value: string;
+  /** Nonaktifkan opsi ini */
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface BaseCheckboxSharedProps {
+  /** Daftar opsi checkbox (untuk mode group) */
+  options: BaseCheckboxOption[];
+  /** Label untuk mode single checkbox */
+  label?: React.ReactNode;
+  /** Nonaktifkan semua checkbox */
+  disabled?: boolean;
+  /** Posisi label relatif terhadap checkbox */
+  labelPlacement?: "top" | "bottom" | "start" | "end";
+  /** Tampilkan checkbox secara horizontal */
+  isHorizontal?: boolean;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+interface BaseCheckboxSingleProps extends Omit<BaseCheckboxSharedProps, "options"> {
+  options?: undefined;
+  /** Nilai checked untuk single checkbox */
+  checked?: boolean;
+  /** Callback ketika nilai berubah (single mode) */
+  onChange?: (checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+interface BaseCheckboxGroupProps extends BaseCheckboxSharedProps {
+  options: BaseCheckboxOption[];
+  /** Array nilai yang dipilih (group mode) */
+  checked?: string[];
+  /** Callback ketika nilai berubah (group mode) */
+  onChange?: (newValue: string[]) => void;
+}
+
+type BaseCheckboxProps =
+  | BaseCheckboxSingleProps
+  | BaseCheckboxGroupProps;
+
+declare function BaseCheckbox(
+  props: BaseCheckboxProps,
 ): React.ReactElement | null;
 
-type BaseDatatableAlign =
-  | "left"
-  | "center"
-  | "right"
-  | "justify"
-  | "inherit"
-  | (string & {});
-
-interface BaseDatatableColumn<T = Record<string, any>> {
-  id?: string;
-  key?: string;
-  field?: string;
-  sortField?: string;
-  label?: ReactNode;
-  header?: ReactNode;
-  accessorKey?: string;
-  accessorFn?: (row: T) => any;
-  align?: BaseDatatableAlign;
-  headerAlign?: BaseDatatableAlign;
+type BaseDatatableAlign =
+  | "left"
+  | "center"
+  | "right"
+  | "justify"
+  | "inherit"
+  | (string & {});
+
+interface BaseDatatableColumn<T = Record<string, any>> {
+  id?: string;
+  key?: string;
+  field?: string;
+  sortField?: string;
+  label?: ReactNode;
+  header?: ReactNode;
+  accessorKey?: string;
+  accessorFn?: (row: T) => any;
+  align?: BaseDatatableAlign;
+  headerAlign?: BaseDatatableAlign;
   width?: number;
   minWidth?: number;
   sticky?: "left" | "right";
@@ -485,11 +580,11 @@ interface BaseDatatableColumn<T = Record<string, any>> {
   }) => ReactNode;
 }
 
-interface BaseDatatableHeaderCell {
-  id?: string;
-  key?: string;
-  label: ReactNode;
-  align?: BaseDatatableAlign;
+interface BaseDatatableHeaderCell {
+  id?: string;
+  key?: string;
+  label: ReactNode;
+  align?: BaseDatatableAlign;
   colSpan?: number;
   rowSpan?: number;
   colspan?: number;
@@ -520,12 +615,12 @@ interface BaseDatatableSortState {
   direction: "asc" | "desc";
 }
 
-interface BaseDatatableSortPayload {
-  orderBy: string;
-  order: "asc" | "desc";
-  page: number;
-  rowsPerPage: number;
-}
+interface BaseDatatableSortPayload {
+  orderBy: string;
+  order: "asc" | "desc";
+  page: number;
+  rowsPerPage: number;
+}
 
 interface BaseDatatableLayout {
   stickyHeader?: boolean;
@@ -591,14 +686,14 @@ interface BaseDatatableProps<T = Record<string, any>> {
   layout?: BaseDatatableLayout;
   selection?: BaseDatatableSelection<T>;
   pagination?: BaseDatatablePagination;
-  renderRow?: (context: BaseDatatableRenderRowContext<T>) => ReactNode;
-  onRowClick?: (row: T, rowIndex: number) => void;
-  getRowId?: (row: T, rowIndex: number) => string | number;
-  emptyState?: ReactNode;
-  loading?: boolean;
-  loadingText?: ReactNode;
-  rowHover?: boolean;
-  activeRowId?: string | number | null;
+  renderRow?: (context: BaseDatatableRenderRowContext<T>) => ReactNode;
+  onRowClick?: (row: T, rowIndex: number) => void;
+  getRowId?: (row: T, rowIndex: number) => string | number;
+  emptyState?: ReactNode;
+  loading?: boolean;
+  loadingText?: ReactNode;
+  rowHover?: boolean;
+  activeRowId?: string | number | null;
   containerSx?: SxProps;
   tableSx?: SxProps;
 }
@@ -608,33 +703,38 @@ declare function BaseDatatable<T = Record<string, any>>(
 ): ReactNode;
 
 interface BaseDatePickerProps {
-  type?: string;
-
-  name?: string;
-  control?: any;
-
+  /** Picker mode */
+  type?: "single" | "day" | "datetime" | "range" | "month" | "year" | "time";
+  /** Field name for React Hook Form */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Default selected value */
   defaultValue?: any;
-
-  title?: React.ReactNode;
-  subtitle?: React.ReactNode;
-
-  className?: string;
-  titleClassName?: string;
-  subtitleClassName?: string;
-
+  /** Label title above input */
+  title?: string;
+  /** Optional subtitle */
+  subtitle?: string;
+  /** Input placeholder text */
   placeholder?: string;
-
-  minDate?: any;
-  maxDate?: any;
-
+  /** Minimum selectable date */
+  minDate?: Date | string;
+  /** Maximum selectable date */
+  maxDate?: Date | string;
+  /** Disable picker interaction */
   isDisabled?: boolean;
+  /** Allow user to clear selected value */
   clearable?: boolean;
+  /** Allow manual input editing (range only) */
   editableDateInputs?: boolean;
-
+  /** Display format for value */
   format?: string;
-
-  onChange?: (date: any) => void;
-
+  /** How the calendar popup is triggered */
+  openBy?: "field" | "icon" | "both";
+  /** MUI sx overrides for the wrapper */
+  sx?: SxProps;
+  /** Custom onChange handler */
+  onChange?: (value: any) => void;
   [key: string]: any;
 }
 
@@ -642,26 +742,50 @@ declare function BaseDatePicker(
   props: BaseDatePickerProps,
 ): React.ReactElement | null;
 
+interface DropdownOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
 interface BaseDropdownProps {
-  name?: string;
-  control?: any;
-  options?: any[];
-  loadOptions?: any;
+  /** Field name for react-hook-form */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Static options list */
+  options?: DropdownOption[];
+  /** Async options loader function */
+  loadOptions?: (inputValue: string) => Promise<DropdownOption[]>;
+  /** Enable multi select mode */
   isMulti?: boolean;
+  /** Enable search input */
   isSearchable?: boolean;
+  /** Show selected values as chips (multi only) */
   showChip?: boolean;
+  /** Show Select All checkbox (multi only) */
   showSelectAll?: boolean;
-  title?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  className?: string;
-  titleClassName?: string;
-  subtitleClassName?: string;
+  /** Label title */
+  title?: string;
+  /** Subtitle text */
+  subtitle?: string;
+  /** Default selected value */
   defaultValue?: any;
+  /** Disable dropdown */
   isDisabled?: boolean;
+  /** Allow clearing value */
   isClearable?: boolean;
+  /** Limit max height with scroll */
   preventOverflow?: boolean;
+  /** Colors for multi-value tags */
   optionColors?: string[];
+  /** Dropdown variant */
   variant?: "select" | "checkbox";
+  /** MUI sx overrides for wrapper */
+  sx?: SxProps;
+  /** Custom onChange handler */
+  onChange?: (value: any) => void;
   [key: string]: any;
 }
 
@@ -670,33 +794,46 @@ declare function BaseDropdown(
 ): React.ReactElement;
 
 interface BaseDropzoneSettings {
-  allowedExtensions?: Record<string, any>;
+  /** Ekstensi file yang diizinkan (format react-dropzone accept) */
+  allowedExtensions?: Record<string, string[]>;
+  /** Ukuran maksimal file dalam MB */
   maxSize?: number;
+  /** Jumlah maksimal file yang dapat diupload */
   maxFiles?: number;
+  /** Tampilkan preview gambar */
   isImagePreview?: boolean;
+  /** Tipe tampilan preview */
   previewType?: "grid" | "list";
 }
 
 interface BaseDropzoneLabels {
+  /** Label judul di atas dropzone */
   title?: React.ReactNode;
+  /** Teks utama di dalam area dropzone */
   dropzoneTitle?: string;
+  /** Label pada tombol pilih file */
   titleButton?: string;
+  /** Teks keterangan format file yang diizinkan */
   allowedFileLabel?: string;
 }
 
 interface BaseDropzoneCallbacks {
-  uploadFile?: (file: File) => void | Promise<any>;
-  removeFile?: (file: File) => void;
-  customError?: (error: unknown) => void;
+  /** Callback ketika file berhasil diupload */
+  uploadFile?: (files: Array<{ source: string; originName: string; type: string; size: number }>) => void;
+  /** Callback ketika file dihapus */
+  removeFile?: (fileName: string) => void;
+  /** Pesan error kustom dari luar komponen */
+  customError?: string | null;
 }
 
 interface BaseDropzoneProps {
+  /** Upload otomatis setelah file dipilih */
   autoUpload?: boolean;
-
+  /** Pengaturan dropzone */
   settings?: BaseDropzoneSettings;
-
+  /** Label-label yang ditampilkan */
   labels?: BaseDropzoneLabels;
-
+  /** Callback functions */
   callbacks?: BaseDropzoneCallbacks;
 }
 
@@ -707,38 +844,35 @@ declare function BaseDropzone(
 interface BaseRadioOption {
   label: React.ReactNode;
   value: any;
-  disabled?: boolean;
+  isDisabled?: boolean;
   [key: string]: any;
 }
 
 interface BaseRadioButtonProps {
+  /** Nama field untuk react-hook-form */
   name?: string;
+  /** Control dari useForm() */
   control?: any;
+  /** Nilai awal yang dipilih */
   defaultValue?: any;
-
+  /** Label di atas radio group */
   label?: React.ReactNode;
+  /** Daftar opsi radio */
   options?: BaseRadioOption[];
-
-  /* ================= TYPOGRAPHY ================= */
+  /** Variant typography untuk label */
   labelVariant?: string;
+  /** Variant typography untuk pesan error */
   errorVariant?: string;
-
-  /* ================= LAYOUT ================= */
+  /** Orientasi layout radio group */
   orientation?: "vertical" | "horizontal";
-
-  /* ================= COLOR TOKEN ================= */
+  /** Token warna untuk radio yang dipilih */
   radioColorToken?: string;
-
-  /* ================= STATE ================= */
+  /** Nonaktifkan semua opsi */
   isDisabled?: boolean;
-
-  /* ================= CLASS ================= */
-  className?: string;
-  titleClassName?: string;
-  fieldClassName?: string;
-
-  /* ================= ERROR ================= */
+  /** Gunakan error state helper untuk nested field names */
   useErrorStateHelper?: boolean;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
 
   [key: string]: any;
 }
@@ -774,42 +908,59 @@ interface BaseStepperProps {
   orientation?: "horizontal" | "vertical";
   /** Stepper visual variant */
   variant?: "simple" | "dashboard";
+  /** MUI sx overrides for wrapper */
+  sx?: SxProps;
 }
 
 declare function BaseStepper(props: BaseStepperProps): React.ReactElement;
 
 interface BaseTextFieldProps {
-  name?: string;
-  control?: any;
-
+  /** Field name for react-hook-form binding */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Default value for the field */
   defaultValue?: any;
-  className?: string;
-  titleClassName?: string;
-
+  /** Label title displayed above the input */
+  title?: string;
+  /** Maximum character length */
   maxLength?: number;
+  /** Show "Maksimal X Karakter" helper text */
   showLength?: boolean;
-
+  /** Show character counter (e.g. 5/20) */
+  showCountHelper?: boolean;
+  /** Only allow numeric input (0-9) */
   isNumericOnly?: boolean;
+  /** Only allow alphanumeric input (a-z, A-Z, 0-9) */
   isAlphaNumericOnly?: boolean;
+  /** Only allow alphabetic input (a-z, A-Z) */
   isAlphaOnly?: boolean;
-
+  /** Additional special characters to allow */
   allowedSpecialCharacters?: string;
+  /** Special characters to disallow */
   dontAllowedSpecialCharacters?: string;
-
-  isAlphaNumericWithUnderscore?: boolean;
-
+  /** Disable the input */
   isDisabled?: boolean;
+  /** Prevent paste action */
   isCantPaste?: boolean;
-
-  result?: any;
+  /** Result text shown below the input */
+  result?: React.ReactNode;
+  /** Color for the result text */
   resultColor?: string;
-
+  /** Disallow spaces */
   noSpaceAllowed?: boolean;
-
-  showCountHelper?: boolean;
-
+  /** Input mask pattern (use 'x' for editable slots, e.g. "0xxx-xxxx-xxxx") */
   textMask?: string;
-
+  /** MUI InputProps (startAdornment, endAdornment, sx, etc.) */
+  InputProps?: Record<string, any>;
+  /** Native input props (min, max, step, etc.) */
+  inputProps?: Record<string, any>;
+  /** MUI sx overrides for the wrapper Box */
+  sx?: SxProps;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Input type (text, password, email, etc.) */
+  type?: string;
   [key: string]: any;
 }
 
@@ -818,26 +969,28 @@ declare function BaseTextField(
 ): React.ReactElement | null;
 
 interface TextFieldUploadProps {
+  /** Nama field untuk react-hook-form */
   name?: string;
+  /** Control dari useForm() */
   control?: any;
-
+  /** Nilai awal field */
   defaultValue?: string;
-
+  /** Label di atas field */
   title?: React.ReactNode;
-
+  /** Ekstensi file yang diterima (contoh: ".pdf,.jpg") */
   accept?: string;
+  /** Ukuran maksimal file dalam MB */
   maxSize?: number;
-
+  /** Nonaktifkan field */
   isDisabled?: boolean;
-
+  /** Label pada tombol upload */
   buttonLabel?: string;
+  /** Posisi tombol upload relatif terhadap input */
   buttonPosition?: "start" | "end";
-
+  /** Callback ketika file dipilih */
+  uploadFile?: (fileName: string, file: File | null) => void;
+  /** Posisi ikon pada tombol upload */
   iconPosition?: "start" | "end";
-
-  uploadFile?: (file: File) => void | Promise<any>;
-
-  [key: string]: any;
 }
 
 declare function TextFieldUpload(
@@ -867,12 +1020,8 @@ interface BaseTextAreaProps {
   exactLength?: number;
   /** Batas maksimal karakter */
   maxLength?: number;
-  /** CSS class untuk wrapper */
-  className?: string;
   /** Label di atas field */
   title?: string;
-  /** CSS class untuk title */
-  titleClassName?: string;
   /** Nonaktifkan field */
   isDisabled?: boolean;
   /** Aktifkan TinyMCE rich-text editor (default: plain MUI textarea) */
@@ -885,6 +1034,8 @@ interface BaseTextAreaProps {
     value: string,
     meta: Record<string, string>,
   ) => void;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
 
   [key: string]: any;
 }
@@ -992,4 +1143,4 @@ declare function BaseModalOTP(
   props: BaseModalOTPProps,
 ): React.ReactElement | null;
 
-export { type BaseStepperDashboardStep as $, type BaseCheckboxProps as A, BaseAlert as B, CONTENT_SPACING_TOKENS as C, DerivedColor as D, type BaseDatatableAlign as E, type BaseDatatableColumn as F, type BaseDatatableFeatures as G, type BaseDatatableHeaderCell as H, type BaseDatatableLayout as I, type BaseDatatablePagination as J, type BaseDatatableProps as K, type BaseDatatableSelection as L, type BaseDatatableSortPayload as M, type BaseDatatableSortState as N, type BaseDatePickerProps as O, PrimitiveColor as P, type BaseDropdownProps as Q, Radius as R, Shadow as S, TextFieldUpload as T, type BaseDropzoneProps as U, VariantStyles as V, type BaseModalOTPProps as W, type BaseModalProps as X, type BaseModalStepperProps as Y, type BaseModalStepperStep as Z, type BaseRadioButtonProps as _, BaseButton as a, type BaseStepperProps as a0, type BaseStepperSimpleStep as a1, type BaseSwitchProps as a2, type BaseTextAreaProps as a3, type BaseTextFieldProps as a4, type ContentSpacingProps as a5, type DerivedColorType as a6, type PrimitiveColorType as a7, type RadiusKey as a8, type RadiusMap as a9, type RadiusTokenProps as aa, type ShadowElevation as ab, type ShadowLevel as ac, type ShadowMap as ad, type ShadowTokenProps as ae, type SpacingProps as af, type TextFieldUploadProps as ag, type TypographyColorToken as ah, type TypographyProps 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, ContentSpacing as p, RadiusToken as q, ShadowToken as r, Spacing as s, SpacingToken as t, Typography as u, type BaseAlertProps as v, type BaseButtonProps as w, type BaseCardDataItem as x, type BaseCardProps as y, type BaseCheckboxOption as z };
+export { type BaseRadioButtonProps as $, type BaseCheckboxOption as A, BaseAlert as B, CONTENT_SPACING_TOKENS as C, DerivedColor as D, type BaseCheckboxProps as E, type BaseDatatableAlign as F, type BaseDatatableColumn as G, type BaseDatatableFeatures as H, type BaseDatatableHeaderCell as I, type BaseDatatableLayout as J, type BaseDatatablePagination as K, type BaseDatatableProps as L, type BaseDatatableSelection as M, type BaseDatatableSortPayload as N, type BaseDatatableSortState as O, PrimitiveColor as P, type BaseDatePickerProps as Q, Radius as R, Shadow as S, TextFieldUpload as T, type BaseDropdownProps as U, VariantStyles as V, type BaseDropzoneProps as W, type BaseModalOTPProps as X, type BaseModalProps as Y, type BaseModalStepperProps as Z, type BaseModalStepperStep as _, BaseButton as a, type BaseSkeletonProps as a0, type BaseSnackbarPosition as a1, type BaseSnackbarProps as a2, type BaseStepperDashboardStep as a3, type BaseStepperProps as a4, type BaseStepperSimpleStep as a5, type BaseSwitchProps as a6, type BaseTextAreaProps as a7, type BaseTextFieldProps as a8, type ContentSpacingProps as a9, type DerivedColorType as aa, type PrimitiveColorType as ab, type RadiusLevel as ac, type RadiusMap as ad, type RadiusTokenProps as ae, type ShadowElevation as af, type ShadowLevel as ag, type ShadowMap as ah, type ShadowTokenProps as ai, type SpacingProps as aj, type TextFieldUploadProps as ak, type TypographyColor as al, type TypographyProps as am, type TypographyVariant as an, 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, BaseSkeleton as l, BaseSnackbar as m, BaseStepper as n, BaseSwitch as o, BaseTextArea as p, BaseTextField as q, BaseTypography as r, ContentSpacing as s, RadiusToken as t, ShadowToken as u, Spacing as v, SpacingToken as w, type BaseAlertProps as x, type BaseButtonProps as y, type BaseCardProps as z };