spotlibs-components 0.1.5 → 0.1.7

package/dist/index.d.mts

@@ -0,0 +1,825 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+
+interface BaseAlertProps {
+  variant?: string;
+  type?: string;
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  color?: string;
+  sx?: any;
+  onClose?: () => void;
+  childrenStyle?: React.CSSProperties;
+  [key: string]: any;
+}
+
+declare function BaseAlert(
+  props: BaseAlertProps,
+): React.ReactElement | null;
+
+interface PrimitiveColorType {
+  color_overlay: string;
+
+  color_palette_neutral_100: string;
+  color_palette_neutral_90: string;
+  color_palette_neutral_80: string;
+  color_palette_neutral_70: string;
+  color_palette_neutral_60: string;
+  color_palette_neutral_50: string;
+  color_palette_neutral_40: string;
+  color_palette_neutral_30: string;
+  color_palette_neutral_20: string;
+  color_palette_neutral_10: string;
+
+  color_palette_dark_blue: string;
+  color_palette_blue: string;
+  color_palette_light_blue: string;
+
+  color_palette_dark_orange: string;
+  color_palette_orange: string;
+  color_palette_light_orange: string;
+
+  color_palette_dark_green: string;
+  color_palette_green: string;
+  color_palette_light_green: string;
+
+  color_palette_dark_red: string;
+  color_palette_red: string;
+  color_palette_light_red: string;
+
+  color_palette_dark_yellow: string;
+  color_palette_yellow: string;
+  color_palette_light_yellow: string;
+
+  [key: string]: string;
+}
+
+declare const PrimitiveColor: PrimitiveColorType;
+
+declare namespace DerivedColor {
+    let color_bg_default: any;
+    let color_bg_white: any;
+    let color_bg_black: any;
+    let color_bg_dark_grey: any;
+    let color_bg_dark_blue: any;
+    let color_bg_blue: any;
+    let color_bg_light_blue: any;
+    let color_bg_orange: any;
+    let color_bg_light_orange: any;
+    let color_bg_green: any;
+    let color_bg_light_green: any;
+    let color_bg_red: any;
+    let color_bg_light_red: any;
+    let color_bg_yellow: any;
+    let color_bg_light_yellow: any;
+    let color_border_grey: any;
+    let color_border_dark_grey: any;
+    let color_border_white: any;
+    let color_border_blue: any;
+    let color_border_orange: any;
+    let color_border_green: any;
+    let color_border_red: any;
+    let color_border_yellow: any;
+    let color_text_black: any;
+    let color_text_dark_grey: any;
+    let color_text_grey: any;
+    let color_text_light_grey: any;
+    let color_text_white: any;
+    let color_text_blue: any;
+    let color_text_orange: any;
+    let color_text_green: any;
+    let color_text_red: any;
+    let color_text_yellow: any;
+    let color_icon_grey: any;
+    let color_icon_light_grey: any;
+    let color_icon_white: any;
+    let color_icon_blue: any;
+    let color_icon_orange: any;
+    let color_icon_green: any;
+    let color_icon_red: any;
+    let color_icon_yellow: any;
+}
+
+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;
+
+declare const SpacingToken: {
+  spacing0: string;
+  spacing1: string;
+  spacing2: string;
+  spacing3: string;
+  spacing4: string;
+  spacing5: string;
+  spacing6: string;
+  spacing7: string;
+  spacing8: string;
+  spacing9: string;
+  spacing10: string;
+};
+
+declare const CONTENT_SPACING_TOKENS: {
+  spacing_1: {
+    mobile: string;
+    tablet: string;
+    web: string;
+  };
+  spacing_2: {
+    mobile: string;
+    tablet: string;
+    web: string;
+  };
+  spacing_3: {
+    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;
+}
+
+declare const Spacing: React.FC<SpacingProps>;
+
+declare const ContentSpacing: React.FC<ContentSpacingProps>;
+
+declare namespace Shadow {
+    namespace elevation_0 {
+        let shadow: string;
+        let surface: string;
+    }
+    namespace elevation_1 {
+        let shadow_1: string;
+        export { shadow_1 as shadow };
+        let surface_1: string;
+        export { surface_1 as surface };
+    }
+    namespace elevation_2 {
+        let shadow_2: string;
+        export { shadow_2 as shadow };
+        let surface_2: string;
+        export { surface_2 as surface };
+    }
+    namespace elevation_3 {
+        let shadow_3: string;
+        export { shadow_3 as shadow };
+        let surface_3: string;
+        export { surface_3 as surface };
+    }
+    namespace elevation_4 {
+        let shadow_4: string;
+        export { shadow_4 as shadow };
+        let surface_4: string;
+        export { surface_4 as surface };
+    }
+}
+declare function ShadowToken({ level, as: Component, style, children, ...rest }: {
+    [x: string]: any;
+    level?: string;
+    as?: string;
+    style: any;
+    children: any;
+}): any;
+
+declare namespace Radius {
+    let radius_0: string;
+    let radius_1: string;
+    let radius_2: string;
+    let radius_3: string;
+    let radius_4: string;
+    let radius_x: string;
+}
+declare function RadiusToken({ radius, as: Component, style, children, ...rest }: {
+    [x: string]: any;
+    radius?: string;
+    as?: string;
+    style: any;
+    children: any;
+}): any;
+
+declare function BaseButton({ onClick, children, variant, color, size, disabled, icon, sx, ...rest }: {
+    [x: string]: any;
+    onClick?: () => void;
+    children?: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    disabled?: boolean;
+    icon?: any;
+    sx?: {};
+}): any;
+
+declare function BaseCard({ type, children, sx, icon, label, title, subtitle, dataList, updateDate, boldCountIcon, boldCount, boldTitle, boldUpdate, iconHeader, backgroundColor, colorTitlte, colorNominal, displayIcon, formatNumber, colorCount, headerBackgroundColor, isCollapsible, ...restProps }: {
+    [x: string]: any;
+    type?: string;
+    children?: any;
+    sx?: {};
+    icon?: any;
+    label?: string;
+    title?: string;
+    subtitle?: string;
+    dataList?: any[];
+    updateDate?: string;
+    boldCountIcon?: boolean;
+    boldCount?: boolean;
+    boldTitle?: boolean;
+    boldUpdate?: boolean;
+    iconHeader?: any;
+    backgroundColor?: string;
+    colorTitlte?: any;
+    colorNominal?: any;
+    displayIcon?: boolean;
+    formatNumber?: string;
+    colorCount?: any;
+    headerBackgroundColor?: string;
+    isCollapsible?: boolean;
+}): any;
+
+declare function BaseSwitch({ status, label, labelPlacement, isDisabled, onChange, }: {
+    status?: boolean;
+    label: any;
+    labelPlacement?: string;
+    isDisabled?: boolean;
+    onChange: any;
+}): any;
+
+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;
+}
+
+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;
+  width?: number;
+  minWidth?: number;
+  sticky?: "left" | "right";
+  sortable?: boolean;
+  noWrap?: boolean;
+  cellBg?: string;
+  cellText?: string;
+  cellSx?: SxProps;
+  renderCell?: (context: {
+    value: any;
+    row: T;
+    rowIndex: number;
+    column: BaseDatatableColumn<T>;
+    columnIndex: number;
+    checked?: boolean;
+  }) => ReactNode;
+}
+
+interface BaseDatatableHeaderCell {
+  id?: string;
+  key?: string;
+  label: ReactNode;
+  align?: BaseDatatableAlign;
+  colSpan?: number;
+  rowSpan?: number;
+  colspan?: number;
+  rowspan?: number;
+  sortKey?: string;
+  width?: number;
+  minWidth?: number;
+  sticky?: "left" | "right";
+  sx?: SxProps;
+}
+
+interface BaseDatatableFeatures {
+  sorting?: boolean;
+  sortingMode?: "client" | "server";
+  defaultSort?: BaseDatatableSortState | null;
+  sortState?: BaseDatatableSortState | null;
+  resetPageOnSort?: boolean;
+  onSortChange?: (
+    payload: BaseDatatableSortPayload,
+    column: BaseDatatableColumn,
+    cell: BaseDatatableHeaderCell,
+  ) => void;
+  headerInteractive?: boolean;
+}
+
+interface BaseDatatableSortState {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+interface BaseDatatableSortPayload {
+  orderBy: string;
+  order: "asc" | "desc";
+  page: number;
+  rowsPerPage: number;
+}
+
+interface BaseDatatableLayout {
+  stickyHeader?: boolean;
+  stickyOffset?: number;
+  freezeLeft?: number;
+  freezeRight?: number;
+  maxHeight?: number;
+}
+
+interface BaseDatatableSelection<T = Record<string, any>> {
+  enabled?: boolean;
+  position?: "left" | "right";
+  selectRowOnClick?: boolean;
+  selectedRowIds?: Array<string | number>;
+  defaultSelectedRowIds?: Array<string | number>;
+  onChange?: (selectedRowIds: Array<string | number>) => void;
+  isRowSelectable?: (row: T, rowIndex: number) => boolean;
+}
+
+interface BaseDatatablePagination {
+  enabled?: boolean;
+  serverSide?: boolean;
+  count?: number;
+  page?: number;
+  rowsPerPage?: number;
+  rowsPerPageOptions?: number[];
+  labelRowsPerPage?: ReactNode;
+  onPageChange?: (event: unknown, nextPage: number) => void;
+  onRowsPerPageChange?: (event: unknown, nextRowsPerPage: number) => void;
+}
+
+interface BaseDatatableCellOverrides {
+  rowSpan?: number;
+  colSpan?: number;
+  content?: ReactNode;
+  sx?: SxProps;
+}
+
+interface BaseDatatableRenderRowContext<T = Record<string, any>> {
+  row: T;
+  rowIndex: number;
+  rowId: string | number;
+  rowActive: boolean;
+  columns: BaseDatatableColumn<T>[];
+  dataColumns: BaseDatatableColumn<T>[];
+  selectedRowIds: Array<string | number>;
+  renderCell: (
+    column: BaseDatatableColumn<T>,
+    row: T,
+    rowIndex: number,
+    columnIndex: number,
+    rowId: string | number,
+    rowActive: boolean,
+    cellOverrides?: BaseDatatableCellOverrides,
+  ) => ReactNode;
+}
+
+interface BaseDatatableProps<T = Record<string, any>> {
+  columns?: Array<BaseDatatableColumn<T> | string>;
+  data?: T[];
+  header?: BaseDatatableHeaderCell[][];
+  features?: BaseDatatableFeatures;
+  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;
+  containerSx?: SxProps;
+  tableSx?: SxProps;
+}
+
+declare function BaseDatatable<T = Record<string, any>>(
+  props: BaseDatatableProps<T>,
+): ReactNode;
+
+interface BaseDatePickerProps {
+  type?: string;
+
+  name?: string;
+  control?: any;
+
+  defaultValue?: any;
+
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+
+  placeholder?: string;
+
+  minDate?: any;
+  maxDate?: any;
+
+  isDisabled?: boolean;
+  clearable?: boolean;
+  editableDateInputs?: boolean;
+
+  format?: string;
+
+  onChange?: (date: any) => void;
+
+  [key: string]: any;
+}
+
+declare function BaseDatePicker(
+  props: BaseDatePickerProps,
+): React.ReactElement | null;
+
+interface BaseDropdownProps {
+  name?: string;
+  control?: any;
+  options?: any[];
+  loadOptions?: any;
+  isMulti?: boolean;
+  isSearchable?: boolean;
+  showChip?: boolean;
+  showSelectAll?: boolean;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  defaultValue?: any;
+  isDisabled?: boolean;
+  isClearable?: boolean;
+  preventOverflow?: boolean;
+  optionColors?: string[];
+  variant?: "select" | "checkbox";
+  [key: string]: any;
+}
+
+declare function BaseDropdown(
+  props: BaseDropdownProps,
+): React.ReactElement;
+
+interface BaseDropzoneSettings {
+  allowedExtensions?: Record<string, any>;
+  maxSize?: number;
+  maxFiles?: number;
+  isImagePreview?: boolean;
+  previewType?: "grid" | "list";
+}
+
+interface BaseDropzoneLabels {
+  title?: React.ReactNode;
+  dropzoneTitle?: string;
+  titleButton?: string;
+  allowedFileLabel?: string;
+}
+
+interface BaseDropzoneCallbacks {
+  uploadFile?: (file: File) => void | Promise<any>;
+  removeFile?: (file: File) => void;
+  customError?: (error: unknown) => void;
+}
+
+interface BaseDropzoneProps {
+  autoUpload?: boolean;
+
+  settings?: BaseDropzoneSettings;
+
+  labels?: BaseDropzoneLabels;
+
+  callbacks?: BaseDropzoneCallbacks;
+}
+
+declare function BaseDropzone(
+  props: BaseDropzoneProps,
+): React.ReactElement;
+
+interface BaseRadioOption {
+  label: React.ReactNode;
+  value: any;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface BaseRadioButtonProps {
+  name?: string;
+  control?: any;
+  defaultValue?: any;
+
+  label?: React.ReactNode;
+  options?: BaseRadioOption[];
+
+  /* ================= TYPOGRAPHY ================= */
+  labelVariant?: string;
+  errorVariant?: string;
+
+  /* ================= LAYOUT ================= */
+  orientation?: "vertical" | "horizontal";
+
+  /* ================= COLOR TOKEN ================= */
+  radioColorToken?: string;
+
+  /* ================= STATE ================= */
+  isDisabled?: boolean;
+
+  /* ================= CLASS ================= */
+  className?: string;
+  titleClassName?: string;
+  fieldClassName?: string;
+
+  /* ================= ERROR ================= */
+  useErrorStateHelper?: boolean;
+
+  [key: string]: any;
+}
+
+declare function BaseRadioButton(
+  props: BaseRadioButtonProps,
+): React.ReactElement | null;
+
+declare function BaseStepper({ steps, activeStep, orientation, variant, }: {
+    steps?: any[];
+    activeStep?: number;
+    orientation?: string;
+    variant?: string;
+}): any;
+declare namespace BaseStepper {
+    namespace propTypes {
+        let steps: any;
+        let activeStep: any;
+        let orientation: any;
+        let variant: any;
+    }
+}
+
+interface BaseTextFieldProps {
+  name?: string;
+  control?: any;
+
+  defaultValue?: any;
+  className?: string;
+  titleClassName?: string;
+
+  maxLength?: number;
+  showLength?: boolean;
+
+  isNumericOnly?: boolean;
+  isAlphaNumericOnly?: boolean;
+  isAlphaOnly?: boolean;
+
+  allowedSpecialCharacters?: string;
+  dontAllowedSpecialCharacters?: string;
+
+  isAlphaNumericWithUnderscore?: boolean;
+
+  isDisabled?: boolean;
+  isCantPaste?: boolean;
+
+  result?: any;
+  resultColor?: string;
+
+  noSpaceAllowed?: boolean;
+
+  showCountHelper?: boolean;
+
+  textMask?: string;
+
+  [key: string]: any;
+}
+
+declare function BaseTextField(
+  props: BaseTextFieldProps,
+): React.ReactElement | null;
+
+interface TextFieldUploadProps {
+  name?: string;
+  control?: any;
+
+  defaultValue?: string;
+
+  title?: React.ReactNode;
+
+  accept?: string;
+  maxSize?: number;
+
+  isDisabled?: boolean;
+
+  buttonLabel?: string;
+  buttonPosition?: "start" | "end";
+
+  iconPosition?: "start" | "end";
+
+  uploadFile?: (file: File) => void | Promise<any>;
+
+  [key: string]: any;
+}
+
+declare function TextFieldUpload(
+  props: TextFieldUploadProps,
+): React.ReactElement | null;
+
+interface BaseTextAreaProps {
+  name?: string;
+  control?: any;
+  defaultValue?: any;
+  helperText?: React.ReactNode;
+  rules?: any;
+  exactLength?: number;
+  maxLength?: number;
+
+  [key: string]: any;
+}
+
+declare function BaseTextArea(
+  props: BaseTextAreaProps,
+): React.ReactElement | null;
+
+interface BaseModalProps {
+  open?: boolean;
+
+  onClose?: () => void;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+
+  icon?: React.ReactNode;
+
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+
+  showConfirm?: boolean;
+  showCancel?: boolean;
+
+  confirmLabel?: string;
+  cancelLabel?: string;
+
+  confirmVariant?: string;
+  cancelVariant?: string;
+
+  confirmColor?: string;
+  cancelColor?: string;
+
+  confirmSize?: string;
+  cancelSize?: string;
+
+  align?: "left" | "center" | "right";
+
+  modalWidth?: string;
+
+  showCloseIcon?: boolean;
+
+  [key: string]: any;
+}
+
+declare function BaseModal(
+  props: BaseModalProps,
+): React.ReactElement | null;
+
+interface BaseModalStepperStep {
+  label?: string;
+  description?: string;
+  responseCode?: string;
+  responseDesc?: string;
+  responseTime?: number;
+}
+
+interface BaseModalStepperProps {
+  open: boolean;
+
+  onClose: (event?: any, reason?: any) => void;
+
+  title?: string;
+
+  stepper?: BaseModalStepperStep[];
+
+  navState?: string | number | null;
+
+  lengthUpload?: number;
+
+  id_pengajuan?: number | null;
+
+  showFooter?: boolean;
+
+  children?: React.ReactNode;
+
+  modalWidth?: string;
+
+  [key: string]: any;
+}
+
+declare function BaseModalStepper(
+  props: BaseModalStepperProps,
+): React.ReactElement | null;
+
+interface BaseModalOTPProps {
+  isOpen?: boolean;
+
+  phone?: string;
+
+  setIsOpen?: (open: boolean) => void;
+
+  otpLength?: number;
+
+  onValidateOtp?: (otp: string) => void;
+
+  onRequestOtp?: () => void;
+
+  [key: string]: any;
+}
+
+declare function BaseModalOTP(
+  props: BaseModalOTPProps,
+): React.ReactElement | null;
+
+export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModal, BaseModalOTP, BaseModalStepper, BaseRadioButton, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, CONTENT_SPACING_TOKENS, ContentSpacing, DerivedColor, PrimitiveColor, Radius, RadiusToken, Shadow, ShadowToken, Spacing, SpacingToken, TextFieldUpload, Typography, VariantStyles };