@mystaline/mysta-lib 1.0.0-alpha.5

package/build-entry.d.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './context';
+export * from './hooks';
+export * from './components';

package/components/button/Button.d.ts

@@ -0,0 +1,119 @@
+import { FC } from 'react';
+import { Severities } from '../../utils';
+import { Icons } from '../icon/Icon.d';
+
+/**
+ * Props for the PrimaryButton component.
+ *
+ * @description Defines the props for the PrimaryButton, including visual customization, loading state, icon support, and click handling.
+ */
+export interface ButtonProps {
+  /**
+   * Height of the button (e.g., px, rem, %, etc.)
+   * Can be specified as a number (pixels) or string (e.g., '50px', '10rem').
+   *
+   * @default '26px'
+   */
+  height?: number | string;
+
+  /**
+   * Width of the button (e.g., px, rem, %, etc.)
+   * Can be specified as a number (pixels) or string (e.g., '100px', '50%').
+   *
+   * @default 'max-content'
+   */
+  width?: number | string;
+
+  /**
+   * Severity level for styling the button (e.g., "error", "warning", "success").
+   * Determines the color and style applied to the button.
+   *
+   * @default 'primary'
+   */
+  severity?: Severities;
+
+  /**
+   * If true, displays a loading spinner instead of the icon or label.
+   * Useful when the button is performing an asynchronous operation.
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * If true, applies an outlined style (typically a button with just a border).
+   *
+   * @default false
+   */
+  outlined?: boolean;
+
+  /**
+   * If true, applies a text-only style (no background, only text).
+   *
+   * @default false
+   */
+  text?: boolean;
+
+  /**
+   * If true, disables the button, preventing user interaction.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * If true, adds a shadow to indicate elevation (e.g., raised effect).
+   *
+   * @default false
+   */
+  raised?: boolean | undefined;
+
+  /**
+   * If true, applies a circular border radius to the button.
+   *
+   * @default false
+   */
+  rounded?: boolean | undefined;
+
+  /**
+   * Icon to display inside the button.
+   * Should be a valid `Icons` value from the icon library.
+   *
+   * @default undefined
+   */
+  icon?: Icons;
+
+  /**
+   * Text label to display inside the button.
+   * Can be used alongside or instead of the icon.
+   *
+   * @default undefined
+   */
+  label?: string;
+
+  /**
+   * Click handler for the button.
+   * Called when the button is clicked.
+   *
+   * @default undefined
+   */
+  onClick?: () => void;
+
+  /**
+   * Specifies the type of the button.
+   * - 'button': A generic button that does not submit a form.
+   * - 'submit': A button that submits the form.
+   * - 'reset': A button that resets the form fields.
+   *
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+/**
+ * Primary button component with loading, severity, and preset support.
+ *
+ * @component
+ * @description Renders a customizable button with support for loading states, severity levels, icons, and text.
+ */
+export const Button: FC<ButtonProps>;

package/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,81 @@
+import { FC } from 'react';
+
+export type CheckboxValue =
+  | (string | number | Record<string, unknown>)[]
+  | boolean
+  | null;
+
+/**
+ * Props for the Checkbox component.
+ *
+ * @description This defines the props for the Checkbox component including its field name, label, and event handlers.
+ */
+export interface CheckboxProps extends CheckboxEvent, FieldValidation {
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Whether the input is disabled */
+  disabled?: boolean;
+
+  /** The value for this checkbox, switch mode to value to use this props */
+  optionValue?: string | number | Record<string, unknown>;
+
+  mode?: 'value' | 'binary' | 'tristate';
+
+  value?: CheckboxValue;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+
+  /**
+   * Input role
+   *
+   * @default checkbox
+   */
+  role?: 'toggleswitch' | 'checkbox';
+}
+
+/**
+ * Validation rules for an input field.
+ *
+ * @description Defines various validation rules for the input text field, including required fields, min/max length, and custom validation.
+ */
+export interface FieldValidation {
+  /** Whether the input is required */
+  required?: boolean;
+
+  /** Custom validation function to validate the input value */
+  customValidation?: (
+    e: (string | number | Record<string, unknown>)[] | boolean | null,
+  ) => boolean;
+
+  customMessage?: string;
+}
+
+/**
+ * Event handlers for the Checkbox component.
+ *
+ * @description Defines event handler functions related to changes and input in the Checkbox component.
+ */
+export interface CheckboxEvent {
+  /** Called when the input value changes */
+  onChange?: (value: CheckboxValue) => void;
+}
+
+/**
+ * Checkbox component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const Checkbox: FC<CheckboxProps>;

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+export interface DialogProps {
+  /**
+   * Dialog children
+   */
+  children?: ReactNode;
+
+  visible?: boolean;
+
+  useCloseIcon?: boolean;
+  closeOnEscape?: boolean;
+  closeOnBlur?: boolean;
+
+  defaultVisibility?: boolean;
+
+  header: string;
+
+  modal?: boolean;
+
+  slots?: Record<keyof DialogSlots, JSX.Element>;
+
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | 'full';
+
+  containerClass?: string;
+  headerClass?: string;
+  contentClass?: string;
+
+  onVisibleChange?: (e: boolean) => void;
+}
+
+export interface DialogSlots {
+  header?: JSX.Element;
+  content?: JSX.Element;
+  footer?: JSX.Element;
+}
+
+export declare const Dialog: (props: DialogProps) => JSX.Element;

package/components/dialogform/DialogForm.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '../dialog/Dialog.d';
+import { FormProps } from '../form/Form.d';
+import {
+  UseFormGetValues,
+  UseFormReset,
+  UseFormResetField,
+} from 'react-hook-form';
+
+export interface DialogFormProps<T extends Record<string, any>>
+  extends DialogProps,
+    FormProps<T> {
+  closeOnSubmit?: boolean;
+}
+
+export interface DialogFormSlots {
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+}
+
+export declare const DialogForm: <T extends Record<string, any> = any>(
+  props: DialogFormProps<T>,
+) => JSX.Element;

package/components/fieldwrapper/FieldWrapper.d.ts

@@ -0,0 +1,53 @@
+// FieldWrapper.d.ts
+
+import { ReactNode, FC } from 'react';
+import { FieldErrors } from 'react-hook-form';
+
+export interface FieldWrapperProps extends FieldWrapperEvent {
+  errors: FieldErrors<any>;
+
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /**
+   * FieldWrapper children
+   */
+  children?: ReactNode;
+
+  className?: string;
+
+  context?: Partial<
+    Record<'invalid' | 'disabled' | 'containerless' | 'borderless', boolean>
+  >;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /** Whether the input is required */
+  required?: boolean;
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+}
+
+/**
+ * Event handlers for the FieldWrapper component.
+ *
+ * @description Defines event handler functions related to DOM interaction in the FieldWrapper component.
+ */
+export interface FieldWrapperEvent {
+  /** Called when the input value changes */
+  onClick?: () => void;
+}
+
+/**
+ * FieldWrapper component.
+ */
+export const FieldWrapper: FC<FieldWrapperProps>;

package/components/form/Form.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode, Ref } from 'react';
+import {
+  FieldErrors,
+  SubmitErrorHandler,
+  SubmitHandler,
+  UseFormGetValues,
+  UseFormReset,
+  UseFormResetField,
+} from 'react-hook-form';
+
+export interface FormProps<T extends Record<string, any>> {
+  ref?: Ref<FormHandle<T>>;
+
+  /**
+   * Form children
+   */
+  children?: ReactNode;
+
+  /**
+   * Determine whether form should be reset to default on submit or not
+   *
+   * @default true
+   */
+  resetOnSubmit?: boolean;
+
+  /**
+   * To gives default value to form
+   *
+   * @default {}
+   */
+  defaultValues?: Record<string, any>;
+
+  /**
+   * Submit emit
+   */
+  onSubmit?: SubmitHandler<T>;
+
+  /**
+   * Error emit
+   */
+  onError?: SubmitErrorHandler<T>;
+}
+
+export interface FormHandle<T extends Record<string, any>> {
+  resetField: UseFormResetField<T>;
+  reset: UseFormReset<T>;
+  getValues: UseFormGetValues<T>;
+  errors: FieldErrors<T>;
+}
+
+export declare const Form: <T extends Record<string, any> = any>(
+  props: FormProps<T>,
+) => JSX.Element;

package/components/icon/Icon.d.ts

@@ -0,0 +1,39 @@
+// types/components.d.ts (or you can name it types/icon.d.ts if it's specific)
+
+import React from 'react';
+
+export type Icons =
+  | 'plus'
+  | 'minus'
+  | 'minus-4'
+  | 'info'
+  | 'eye-on'
+  | 'eye-off'
+  | 'check'
+  | 'check-4'
+  | 'x'
+  | 'circle'
+  | 'circle-fill';
+
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Icon class like 'plus', 'minus', etc.
+   * Should be defined with a `--svg` mask in CSS.
+   */
+  name: Icons;
+
+  /**
+   * Additional Tailwind/utility classes
+   */
+  className?: string;
+
+  /**
+   * Tooltip text
+   */
+  tooltip?: string;
+
+  /**
+   * Tooltip position
+   */
+  tooltipPos?: 'mouse' | 'right' | 'top' | 'bottom' | 'left';
+}

package/components/index.d.ts

@@ -0,0 +1,20 @@
+export { Button } from './button/Button';
+export { Checkbox } from './checkbox/Checkbox';
+export { Dialog } from './dialog/Dialog';
+export { DialogForm } from './dialogform/DialogForm';
+export { Form } from './form/Form';
+export { Icon } from './icon/Icon';
+export { InputText } from './inputtext/InputText';
+export { RadioButton } from './radiobutton/RadioButton';
+export { Slot } from './slot/Slot';
+export { ToggleSwitch } from './toggleswitch/ToggleSwitch';
+export { Button } from './button/Button';
+export { Checkbox } from './checkbox/Checkbox';
+export { Dialog } from './dialog/Dialog';
+export { DialogForm } from './dialogform/DialogForm';
+export { Form } from './form/Form';
+export { Icon } from './icon/Icon';
+export { InputText } from './inputtext/InputText';
+export { RadioButton } from './radiobutton/RadioButton';
+export { Slot } from './slot/Slot';
+export { ToggleSwitch } from './toggleswitch/ToggleSwitch';

package/components/inputtext/InputText.d.ts

@@ -0,0 +1,111 @@
+import { FC } from 'react';
+import { RegisterOptions } from 'react-hook-form';
+
+/**
+ * Props for the InputText component.
+ *
+ * @description This defines the props for the InputText component including its field name, label, and event handlers.
+ */
+export interface InputTextProps extends InputTextEvent, FieldValidation {
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Whether the input is disabled */
+  disabled?: boolean;
+
+  /** Placeholder text for the input field */
+  placeholder?: string;
+
+  /** The current value of the input */
+  value?: string;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /**
+   * Menentukan jenis input yang ditampilkan oleh komponen input.
+   * Nilai ini diteruskan ke atribut `type` dari elemen HTML `<input>`.
+   * Gunakan tipe ini untuk mengontrol keyboard, validasi, dan tampilan field.
+   *
+   * @default 'text'
+   */
+  type?: 'text' | 'password' | 'email' | 'number';
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+}
+
+/**
+ * Validation rules for an input field.
+ *
+ * @description Defines various validation rules for the input text field, including required fields, min/max length, and custom validation.
+ */
+export interface FieldValidation {
+  /** Whether the input is required */
+  required?: boolean;
+
+  /** Minimum value of the input value */
+  min?: number;
+
+  /** Maximum value of the input value */
+  max?: number;
+
+  /** Minimum length of the input value */
+  minLength?: number;
+
+  /** Maximum length of the input value */
+  maxLength?: number;
+
+  /** A regular expression pattern to validate the input value */
+  pattern?: RegExp;
+
+  passwordRequirements?: (
+    | 'uppercase'
+    | 'lowercase'
+    | 'special-character'
+    | 'alpha-numeric'
+  )[];
+
+  /** Custom validation function to validate the input value */
+  customValidation?: (e?: string) => boolean;
+
+  /** Custom error messages for specific validation rules */
+  customMessage?: Record<keyof RegisterOptions, string>;
+
+  /** Whether to prevent the user from typing if the input is invalid */
+  preventInputOnError?: boolean;
+}
+
+/**
+ * Event handlers for the InputText component.
+ *
+ * @description Defines event handler functions related to changes and input in the InputText component.
+ */
+export interface InputTextEvent {
+  /** Called when the input field loses focus */
+  onBlur?: (value: string) => void;
+
+  /** Called when the input value changes */
+  onChange?: (value: string) => void;
+
+  /** Called when the input value is being typed (on input) */
+  onInput?: (value: string) => void;
+
+  /** Called when the keyboard is being pressed (on keydown) */
+  onKeydown?: (value: string) => void;
+}
+
+/**
+ * InputText component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const InputText: FC<InputTextProps>;

package/components/radiobutton/RadioButton.d.ts

@@ -0,0 +1,65 @@
+import { FC } from 'react';
+
+/**
+ * Props for the RadioButton component.
+ *
+ * @description This defines the props for the RadioButton component including its field name, label, and event handlers.
+ */
+export interface RadioButtonProps extends RadioButtonEvent, FieldValidation {
+  /** The name of the field used for form submission */
+  fieldName?: string;
+
+  /** The label text to display above the input */
+  label?: string;
+
+  /** Whether the input is disabled */
+  disabled?: boolean;
+
+  value?: string | boolean;
+
+  /** The value for this checkbox, switch mode to value to use this props */
+  optionValue?: string | boolean;
+
+  /** Additional information to display beside the input, typically as a tooltip */
+  info?: string;
+
+  /**
+   * To hide mark asterisk to required field
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+}
+
+/**
+ * Validation rules for an input field.
+ *
+ * @description Defines various validation rules for the input text field, including required fields, min/max length, and custom validation.
+ */
+export interface FieldValidation {
+  /** Whether the input is required */
+  required?: boolean;
+
+  /** Custom validation function to validate the input value */
+  customValidation?: (e: string | boolean) => boolean;
+
+  customMessage?: string;
+}
+
+/**
+ * Event handlers for the RadioButton component.
+ *
+ * @description Defines event handler functions related to changes and input in the RadioButton component.
+ */
+export interface RadioButtonEvent {
+  /** Called when the input value changes */
+  onChange?: (value: string | boolean) => void;
+}
+
+/**
+ * RadioButton component for form input with built-in validation and custom event handling.
+ *
+ * @component
+ * @description Renders an input field with support for labels, validation, dynamic event handling, and optional styling.
+ */
+export const RadioButton: FC<RadioButtonProps>;

package/components/slot/Slot.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+
+/**
+ * Props for the Slot component.
+ *
+ * @description This defines the props for the Slot component including its field name, label, and event handlers.
+ */
+export interface SlotProps {
+  /** The name of the slot */
+  name?: string;
+
+  /** The slot content */
+  slots?: Record<string, ReactNode>;
+
+  children?: ReactNode;
+}
+
+/**
+ * Slot component for custom section.
+ *
+ * @component
+ */
+export const Slot: FC<SlotProps>;