alepha 0.10.6 → 0.11.0

package/ui.cjs

@@ -0,0 +1,8 @@
+'use strict';
+var m = require('@alepha/ui');
+Object.keys(m).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return m[k]; }
+	});
+});

package/ui.d.ts

@@ -0,0 +1,619 @@
+import * as _alepha_core0 from "alepha";
+import { TObject } from "alepha";
+import * as _alepha_react0 from "alepha/react";
+import { RouterGoOptions, UseActiveOptions } from "alepha/react";
+import { ModalsProviderProps } from "@mantine/modals";
+import { AutocompleteProps, ButtonProps, ColorInputProps, ColorSchemeScriptProps, FileInputProps, Flex, MantineProviderProps, ModalProps, MultiSelectProps, NumberInputProps, PasswordInputProps, SegmentedControlProps, SelectProps, SwitchProps, TableProps, TagsInputProps, TextInputProps, TextareaProps, TooltipProps } from "@mantine/core";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import React$1, { ComponentType, ReactNode } from "react";
+import * as _mantine_notifications0 from "@mantine/notifications";
+import { NotificationData, NotificationsProps } from "@mantine/notifications";
+import { FormModel, InputField } from "alepha/react/form";
+import { NavigationProgressProps } from "@mantine/nprogress";
+import { SpotlightActionData } from "@mantine/spotlight";
+import { DateInputProps, DateTimePickerProps, TimeInputProps } from "@mantine/dates";
+
+//#region src/utils/parseInput.d.ts
+interface GenericControlProps {
+  input: InputField;
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+}
+//#endregion
+//#region src/components/ControlSelect.d.ts
+type SelectValueLabel = string | {
+  value: string;
+  label: string;
+  icon?: string;
+};
+interface ControlSelectProps extends GenericControlProps {
+  select?: boolean | SelectProps;
+  multi?: boolean | MultiSelectProps;
+  tags?: boolean | TagsInputProps;
+  autocomplete?: boolean | AutocompleteProps;
+  segmented?: boolean | Partial<SegmentedControlProps>;
+  loader?: () => Promise<SelectValueLabel[]>;
+}
+/**
+ * ControlSelect component for handling Select, MultiSelect, and TagsInput.
+ *
+ * Features:
+ * - Basic Select with enum support
+ * - MultiSelect for array of enums
+ * - TagsInput for array of strings (no enum)
+ * - Future: Lazy loading
+ * - Future: Searchable/filterable options
+ * - Future: Custom option rendering
+ *
+ * Automatically detects enum values and array types from schema.
+ */
+declare const ControlSelect: (props: ControlSelectProps) => react_jsx_runtime4.JSX.Element | null;
+//#endregion
+//#region src/components/Control.d.ts
+interface ControlProps extends GenericControlProps {
+  text?: TextInputProps;
+  area?: boolean | TextareaProps;
+  select?: boolean | Partial<ControlSelectProps>;
+  password?: boolean | PasswordInputProps;
+  switch?: boolean | SwitchProps;
+  number?: boolean | NumberInputProps;
+  file?: boolean | FileInputProps;
+  color?: boolean | ColorInputProps;
+  date?: boolean | DateInputProps;
+  datetime?: boolean | DateTimePickerProps;
+  time?: boolean | TimeInputProps;
+  custom?: ComponentType<CustomControlProps>;
+}
+/**
+ * Generic form control that renders the appropriate input based on the schema and props.
+ *
+ * Supports:
+ * - TextInput (with format detection: email, url, tel)
+ * - Textarea
+ * - NumberInput (for number/integer types)
+ * - FileInput
+ * - ColorInput (for color format)
+ * - Select (for enum types)
+ * - Autocomplete
+ * - PasswordInput
+ * - Switch (for boolean types)
+ * - SegmentedControl (for enum types)
+ * - DateInput (for date format)
+ * - DateTimePicker (for date-time format)
+ * - TimeInput (for time format)
+ * - Custom component
+ *
+ * Automatically handles labels, descriptions, error messages, required state, and default icons.
+ */
+declare const Control: (_props: ControlProps) => react_jsx_runtime4.JSX.Element | null;
+type CustomControlProps = {
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+//#endregion
+//#region src/components/Action.d.ts
+interface ActionMenuItem {
+  /**
+   * Menu item type
+   */
+  type?: "item" | "divider" | "label";
+  /**
+   * Label text for the menu item
+   */
+  label?: string;
+  /**
+   * Icon element to display before the label
+   */
+  icon?: ReactNode;
+  /**
+   * Click handler for menu items
+   */
+  onClick?: () => void;
+  /**
+   * Color for the menu item (e.g., "red" for danger actions)
+   */
+  color?: string;
+  /**
+   * Nested submenu items
+   */
+  children?: ActionMenuItem[];
+}
+interface ActionMenuConfig {
+  /**
+   * Array of menu items to display
+   */
+  items: ActionMenuItem[];
+  /**
+   * Menu position relative to the button
+   */
+  position?: "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "left" | "right";
+  /**
+   * Menu width
+   */
+  width?: number | string;
+  /**
+   * Menu shadow
+   */
+  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+interface ActionCommonProps extends ButtonProps {
+  children?: ReactNode;
+  textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * Tooltip to display on hover. Can be a string for simple tooltips
+   * or a TooltipProps object for advanced configuration.
+   */
+  tooltip?: string | TooltipProps;
+  /**
+   * Menu configuration. When provided, the action will display a dropdown menu.
+   */
+  menu?: ActionMenuConfig;
+  /**
+   * If set, a confirmation dialog will be shown before performing the action.
+   * If `true`, a default title and message will be used.
+   * If a string, it will be used as the message with a default title.
+   * If an object, it can contain `title` and `message` properties to customize the dialog.
+   */
+  confirm?: boolean | string | {
+    title?: string;
+    message: string;
+  };
+}
+type ActionProps = ActionCommonProps & (ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
+declare const Action: (_props: ActionProps) => react_jsx_runtime4.JSX.Element;
+interface ActionSubmitProps extends ButtonProps {
+  form: FormModel<any>;
+}
+interface ActionClickProps extends ButtonProps {
+  onClick: (e: any) => any;
+}
+interface ActiveHrefProps extends ButtonProps {
+  href: string;
+  active?: Partial<UseActiveOptions> | false;
+  routerGoOptions?: RouterGoOptions;
+}
+//#endregion
+//#region src/components/Omnibar.d.ts
+interface OmnibarProps {
+  actions?: SpotlightActionData[];
+  shortcut?: string | string[];
+  searchPlaceholder?: string;
+  nothingFound?: ReactNode;
+}
+declare const Omnibar: (props: OmnibarProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/AlephaMantineProvider.d.ts
+interface AlephaMantineProviderProps {
+  children?: ReactNode;
+  mantine?: MantineProviderProps;
+  colorSchemeScript?: ColorSchemeScriptProps;
+  navigationProgress?: NavigationProgressProps;
+  notifications?: NotificationsProps;
+  modals?: ModalsProviderProps;
+  omnibar?: OmnibarProps;
+}
+declare const AlephaMantineProvider: (props: AlephaMantineProviderProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/ControlDate.d.ts
+interface ControlDateProps extends GenericControlProps {
+  date?: boolean | DateInputProps;
+  datetime?: boolean | DateTimePickerProps;
+  time?: boolean | TimeInputProps;
+}
+/**
+ * ControlDate component for handling date, datetime, and time inputs.
+ *
+ * Features:
+ * - DateInput for date format
+ * - DateTimePicker for date-time format
+ * - TimeInput for time format
+ *
+ * Automatically detects date formats from schema and renders appropriate picker.
+ */
+declare const ControlDate: (props: ControlDateProps) => react_jsx_runtime4.JSX.Element | null;
+//#endregion
+//#region src/components/DarkModeButton.d.ts
+interface DarkModeButtonProps {
+  mode?: "minimal" | "segmented";
+  size?: string | number;
+  variant?: "filled" | "light" | "outline" | "default" | "subtle" | "transparent";
+}
+declare const DarkModeButton: (props: DarkModeButtonProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/DataTable.d.ts
+type SortDirection = "asc" | "desc" | null;
+interface DataTableColumn<T = any> {
+  accessor: keyof T | string;
+  title?: string;
+  width?: number | string;
+  sortable?: boolean;
+  filterable?: boolean;
+  hidden?: boolean;
+  render?: (value: any, record: T, index: number) => React$1.ReactNode;
+  renderHeader?: () => React$1.ReactNode;
+  align?: "left" | "center" | "right";
+  ellipsis?: boolean;
+  className?: string;
+  headerClassName?: string;
+}
+interface DataTableSort {
+  column: string;
+  direction: SortDirection;
+}
+interface DataTableFilter {
+  column: string;
+  value: string;
+  operator?: "contains" | "equals" | "startsWith" | "endsWith";
+}
+interface DataTableProps<T = any> extends Omit<TableProps, "data"> {
+  data: T[];
+  columns: DataTableColumn<T>[];
+  loading?: boolean;
+  emptyMessage?: string;
+  selectable?: boolean;
+  selectedRows?: T[];
+  onRowSelect?: (rows: T[]) => void;
+  sortable?: boolean;
+  sort?: DataTableSort;
+  onSortChange?: (sort: DataTableSort) => void;
+  filterable?: boolean;
+  filters?: DataTableFilter[];
+  onFiltersChange?: (filters: DataTableFilter[]) => void;
+  filterPlaceholder?: string;
+  paginate?: boolean;
+  page?: number;
+  pageSize?: number;
+  totalRecords?: number;
+  pageSizeOptions?: number[];
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  rowActions?: (record: T, index: number) => React$1.ReactNode;
+  onRowClick?: (record: T, index: number) => void;
+  rowClassName?: (record: T, index: number) => string;
+  showHeader?: boolean;
+  showFooter?: boolean;
+  stickyHeader?: boolean;
+  striped?: boolean;
+  highlightOnHover?: boolean;
+  showToolbar?: boolean;
+  title?: string;
+  actions?: React$1.ReactNode;
+  showColumnToggle?: boolean;
+  showRefresh?: boolean;
+  onRefresh?: () => void;
+  showExport?: boolean;
+  onExport?: () => void;
+  height?: number | string;
+  minHeight?: number | string;
+  maxHeight?: number | string;
+}
+declare function DataTable<T = any>({
+  data,
+  columns: initialColumns,
+  loading,
+  emptyMessage,
+  selectable,
+  selectedRows,
+  onRowSelect,
+  sortable,
+  sort,
+  onSortChange,
+  filterable,
+  filters,
+  onFiltersChange,
+  filterPlaceholder,
+  paginate,
+  page,
+  pageSize,
+  totalRecords,
+  pageSizeOptions,
+  onPageChange,
+  onPageSizeChange,
+  rowActions,
+  onRowClick,
+  rowClassName,
+  showHeader,
+  showFooter,
+  stickyHeader,
+  striped,
+  highlightOnHover,
+  showToolbar,
+  title,
+  actions,
+  showColumnToggle,
+  showRefresh,
+  onRefresh,
+  showExport,
+  onExport,
+  height,
+  minHeight,
+  maxHeight,
+  ...tableProps
+}: DataTableProps<T>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/services/DialogService.d.ts
+interface BaseDialogOptions extends Partial<ModalProps> {
+  title?: ReactNode;
+  message?: ReactNode;
+  content?: any;
+}
+interface AlertDialogOptions extends BaseDialogOptions {
+  okLabel?: string;
+}
+interface ConfirmDialogOptions extends BaseDialogOptions {
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmColor?: string;
+}
+interface PromptDialogOptions extends BaseDialogOptions {
+  placeholder?: string;
+  defaultValue?: string;
+  label?: string;
+  required?: boolean;
+  submitLabel?: string;
+  cancelLabel?: string;
+}
+interface AlertDialogProps {
+  options?: AlertDialogOptions;
+  onClose: () => void;
+}
+interface ConfirmDialogProps {
+  options?: ConfirmDialogOptions;
+  onConfirm: (confirmed: boolean) => void;
+}
+interface PromptDialogProps {
+  options?: PromptDialogOptions;
+  onSubmit: (value: string | null) => void;
+}
+interface DialogServiceOptions {
+  default?: Partial<BaseDialogOptions>;
+}
+declare class DialogService {
+  readonly options: DialogServiceOptions;
+  /**
+   * Show an alert dialog with a message
+   */
+  alert(options?: AlertDialogOptions): Promise<void>;
+  /**
+   * Show a confirmation dialog that returns a promise
+   */
+  confirm(options?: ConfirmDialogOptions): Promise<boolean>;
+  /**
+   * Show a prompt dialog to get user input
+   */
+  prompt(options?: PromptDialogOptions): Promise<string | null>;
+  /**
+   * Open a custom dialog with provided content
+   */
+  open(options?: BaseDialogOptions): string;
+  /**
+   * Show a JSON editor/viewer dialog
+   */
+  json(data?: any, options?: BaseDialogOptions): void;
+  /**
+   * Show a form dialog for structured input
+   */
+  form(options?: BaseDialogOptions): Promise<any>;
+  /**
+   * Close the currently open dialog or a specific dialog by ID
+   */
+  close(modalId?: string): void;
+  /**
+   * Show a loading/progress dialog with optional progress percentage
+   */
+  loading(options?: BaseDialogOptions & {
+    progress?: number;
+  }): void;
+  /**
+   * Show an image viewer/gallery dialog
+   */
+  image(src: string | string[], options?: BaseDialogOptions): void;
+  /**
+   * Show a table/data grid dialog for displaying tabular data
+   */
+  table(data: any[], options?: BaseDialogOptions & {
+    columns?: any[];
+  }): void;
+  /**
+   * Show a multi-step wizard dialog
+   */
+  wizard(steps: any[], options?: BaseDialogOptions): Promise<any>;
+}
+//#endregion
+//#region src/components/dialogs/AlertDialog.d.ts
+declare function AlertDialog({
+  options,
+  onClose
+}: AlertDialogProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/dialogs/ConfirmDialog.d.ts
+declare function ConfirmDialog({
+  options,
+  onConfirm
+}: ConfirmDialogProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/dialogs/PromptDialog.d.ts
+declare function PromptDialog({
+  options,
+  onSubmit
+}: PromptDialogProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/Sidebar.d.ts
+interface MenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  href?: string;
+  activeStartsWith?: boolean;
+  onClick?: () => void;
+  children?: MenuItem[];
+}
+interface SidebarProps {
+  menu: MenuItem[];
+  defaultOpenIds?: string[];
+  onItemClick?: (item: MenuItem) => void;
+  showSearchButton?: boolean;
+  onSearchClick?: () => void;
+}
+declare const Sidebar: React.FC<SidebarProps>;
+interface SidebarItemProps {
+  item: MenuItem;
+  level: number;
+  openIds: Set<string>;
+  onToggle: (id: string) => void;
+  onItemClick?: (item: MenuItem) => void;
+}
+declare const SidebarItem: React.FC<SidebarItemProps>;
+//#endregion
+//#region src/components/TypeForm.d.ts
+interface TypeFormProps<T extends TObject> {
+  form: FormModel<T>;
+  columns?: number | {
+    base?: number;
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  children?: (input: FormModel<T>["input"]) => ReactNode;
+  controlProps?: Partial<Omit<ControlProps, "input">>;
+  skipFormElement?: boolean;
+  skipSubmitButton?: boolean;
+  submitButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+  resetButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+}
+/**
+ * TypeForm component that automatically renders all form inputs based on schema.
+ * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ * import { useForm } from "alepha/react/form";
+ * import { TypeForm } from "alepha/ui";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.text(),
+ *     email: t.text(),
+ *     age: t.integer(),
+ *     subscribe: t.boolean(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log(values);
+ *   },
+ * });
+ *
+ * return <TypeForm form={form} columns={2} />;
+ * ```
+ */
+declare const TypeForm: <T extends TObject>(props: TypeFormProps<T>) => react_jsx_runtime4.JSX.Element | null;
+//#endregion
+//#region src/hooks/useDialog.d.ts
+/**
+ * Use this hook to access the Dialog Service for showing various dialog types.
+ *
+ * @example
+ * const dialog = useDialog();
+ * await dialog.alert({ title: "Alert", message: "This is an alert message" });
+ * const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+ * const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+ */
+declare const useDialog: () => DialogService;
+//#endregion
+//#region src/services/ToastService.d.ts
+interface ToastServiceOptions {
+  default?: Partial<NotificationData>;
+}
+declare class ToastService {
+  protected readonly raw: {
+    readonly show: typeof _mantine_notifications0.showNotification;
+    readonly hide: typeof _mantine_notifications0.hideNotification;
+    readonly update: typeof _mantine_notifications0.updateNotification;
+    readonly clean: typeof _mantine_notifications0.cleanNotifications;
+    readonly cleanQueue: typeof _mantine_notifications0.cleanNotificationsQueue;
+    readonly updateState: typeof _mantine_notifications0.updateNotificationsState;
+  };
+  readonly options: ToastServiceOptions;
+  show(options: NotificationData): void;
+  info(options: Partial<NotificationData>): void;
+  success(options: Partial<NotificationData>): void;
+  warning(options: Partial<NotificationData>): void;
+  danger(options: Partial<NotificationData>): void;
+}
+//#endregion
+//#region src/hooks/useToast.d.ts
+/**
+ * Use this hook to access the Toast Service for showing notifications.
+ *
+ * @example
+ * const toast = useToast();
+ * toast.success({ message: "Operation completed successfully!" });
+ * toast.error({ title: "Error", message: "Something went wrong" });
+ */
+declare const useToast: () => ToastService;
+//#endregion
+//#region src/RootRouter.d.ts
+declare class RootRouter {
+  readonly root: _alepha_react0.PageDescriptor<_alepha_react0.PageConfigSchema, any, _alepha_react0.TPropsParentDefault>;
+}
+//#endregion
+//#region src/utils/icons.d.ts
+/**
+ * Icon size presets following Mantine's size conventions
+ */
+declare const ICON_SIZES: {
+  readonly xs: 12;
+  readonly sm: 16;
+  readonly md: 20;
+  readonly lg: 24;
+  readonly xl: 28;
+};
+type IconSize = keyof typeof ICON_SIZES;
+/**
+ * Get the default icon for an input based on its type, format, or name.
+ */
+declare const getDefaultIcon: (params: {
+  type?: string;
+  format?: string;
+  name?: string;
+  isEnum?: boolean;
+  isArray?: boolean;
+  size?: IconSize;
+}) => ReactNode;
+//#endregion
+//#region src/utils/string.d.ts
+/**
+ * Capitalizes the first letter of a string.
+ *
+ * @example
+ * capitalize("hello") // "Hello"
+ */
+declare const capitalize: (str: string) => string;
+/**
+ * Converts a path or identifier string into a pretty display name.
+ * Removes slashes and capitalizes the first letter.
+ *
+ * @example
+ * prettyName("/userName") // "UserName"
+ * prettyName("email") // "Email"
+ */
+declare const prettyName: (name: string) => string;
+//#endregion
+//#region src/index.d.ts
+declare module "typebox" {
+  interface TSchemaOptions {
+    $control?: Omit<ControlProps, "input">;
+  }
+}
+/**
+ * Mantine
+ *
+ * @module alepha.ui
+ */
+declare const AlephaUI: _alepha_core0.Service<_alepha_core0.Module<{}>>;
+//#endregion
+export { Action, AlephaMantineProvider, AlephaUI, AlertDialog, type AlertDialogOptions, type AlertDialogProps, type BaseDialogOptions, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, Control, ControlDate, ControlSelect, DarkModeButton, DataTable, type DataTableColumn, type DataTableFilter, type DataTableProps, type DataTableSort, DialogService, Flex, ICON_SIZES, IconSize, type MenuItem, Omnibar, PromptDialog, type PromptDialogOptions, type PromptDialogProps, RootRouter, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, ToastService, TypeForm, capitalize, getDefaultIcon, prettyName, useDialog, useToast };
+//# sourceMappingURL=index.d.ts.map

package/ui.js

@@ -0,0 +1 @@
+export * from '@alepha/ui'

package/vite.d.ts

@@ -1,7 +1,13 @@
-import { BrotliOptions, ZlibOptions } from "node:zlib";
 import { Alepha } from "alepha";
+import { Options } from "@vitejs/plugin-react";
+import { BrotliOptions, ZlibOptions } from "node:zlib";
 import { Plugin, UserConfig } from "vite";
 
+//#region src/helpers/getEntryFiles.d.ts
+declare const getClientEntry: (root?: string) => Promise<string | undefined>;
+declare const getServerEntry: (root?: string) => Promise<string>;
+declare function extractFirstModuleScriptSrc(html: string): string;
+//#endregion
 //#region src/viteCompress.d.ts
 interface ViteCompressOptions {
   /**
@@ -145,12 +151,11 @@ interface ViteAlephaDevOptions {
    */
   serverEntry?: string;
   /**
-   * Enable or disable debug mode
+   * If true, enables debug logging.
    *
    * @default false
    */
   debug?: boolean;
-  onReload?: () => void;
 }
 /**
  * Plug Alepha into Vite development server.
@@ -158,7 +163,9 @@ interface ViteAlephaDevOptions {
 declare function viteAlephaDev(options?: ViteAlephaDevOptions): Promise<Plugin>;
 //#endregion
 //#region src/viteAlepha.d.ts
-type ViteAlephaOptions = ViteAlephaDevOptions & ViteAlephaBuildOptions;
+type ViteAlephaOptions = ViteAlephaDevOptions & ViteAlephaBuildOptions & {
+  react?: false | Options;
+};
 declare function viteAlepha(options?: ViteAlephaOptions): (Plugin | Promise<Plugin>)[];
 //#endregion
 //#region src/index.d.ts
@@ -186,5 +193,5 @@ declare global {
 //# sourceMappingURL=index.d.ts.map
 
 //#endregion
-export { VercelConfig, ViteAlephaBuildOptions, ViteAlephaBuildVercelOptions, ViteAlephaDevOptions, ViteAlephaOptions, ViteCompressOptions, compressFile, viteAlepha, viteAlephaBuild, viteAlephaBuildVercel, viteAlephaDev, viteCompress };
+export { VercelConfig, ViteAlephaBuildOptions, ViteAlephaBuildVercelOptions, ViteAlephaDevOptions, ViteAlephaOptions, ViteCompressOptions, compressFile, extractFirstModuleScriptSrc, getClientEntry, getServerEntry, viteAlepha, viteAlephaBuild, viteAlephaBuildVercel, viteAlephaDev, viteCompress };
 //# sourceMappingURL=index.d.ts.map