spotlibs-components 0.1.10 → 0.1.12

package/dist/{types-B0iF5xX8.d.mts → types-D1akE7ak.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;
+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<
-  string,
-  {
-    fontSize: string;
-    fontWeight: number;
-  }
->;
+declare const VariantStyles: Record<TypographyVariant, VariantStyleEntry>;
 
 interface TypographyProps {
-  variant?: string;
+  /** Format: "variant.color" e.g. "body1_regular.default" */
+  variant?: `${TypographyVariant}.${TypographyColor}` | TypographyVariant;
+  /** Content */
   children?: React.ReactNode;
-  sx?: React.CSSProperties & Record<string, unknown>;
+  /** MUI sx overrides */
+  sx?: SxProps;
   [key: string]: any;
 }
 
-declare function Typography(
-  props: TypographyProps,
-): React.ReactElement | null;
+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,58 +380,37 @@ 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 variant type */
+  variant?: "default" | "with-header" | "with-header-footer";
   /** Card body content */
   children?: React.ReactNode;
-  /** MUI sx overrides */
-  sx?: SxProps;
-  /** Icon displayed in the card */
-  icon?: React.ReactNode;
-  /** Label text */
-  label?: string;
-  /** Title text */
+  /** Header background color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Header title text */
   title?: string;
-  /** Subtitle text */
+  /** Header 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 */
+  /** 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;
+  /** MUI sx overrides */
+  sx?: SxProps;
   [key: string]: any;
 }
 
@@ -412,31 +432,44 @@ interface BaseSwitchProps {
 declare function BaseSwitch(props: BaseSwitchProps): React.ReactElement;
 
 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;
-  sx?: any;
+  /** 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;
 }
 
@@ -448,25 +481,25 @@ 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 +518,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 +553,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 +624,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 +641,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 +680,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 +732,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 +782,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 +846,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 +907,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 +958,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 +972,8 @@ interface BaseTextAreaProps {
     value: string,
     meta: Record<string, string>,
   ) => void;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
 
   [key: string]: any;
 }
@@ -992,4 +1081,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 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 };