@sito/dashboard-app 0.0.57 → 0.0.59

package/README.md

@@ -15,7 +15,8 @@ Use documentation by target package:
 Important:
 
 - `.sito/*.md` is not the canonical integration guide for this package.
-- For `@sito/dashboard-app` provider setup, use `ConfigProvider -> ManagerProvider -> AuthProvider -> NotificationProvider -> DrawerMenuProvider` (`NavbarProvider` when needed).
+- For auth-enabled apps, use `ConfigProvider -> ManagerProvider -> AuthProvider -> NotificationProvider -> DrawerMenuProvider` (`NavbarProvider` when needed).
+- `Drawer` and `Onboarding` can run without `AuthProvider`; in that case they behave as guest-mode UI defaults.
 - `IconButton` differs by package:
   - `@sito/dashboard`: `icon` accepts a React node.
   - `@sito/dashboard-app`: `icon` expects `IconDefinition` (FontAwesome wrapper export).
@@ -64,7 +65,7 @@ npm install @supabase/supabase-js@2.100.0
 
 ## Core exports
 
-- Layout and navigation: `Page`, `Navbar`, `Drawer`, `TabsLayout`, `PrettyGrid`, `ToTop`
+- Layout and navigation: `Page`, `Navbar`, `Drawer`, `BottomNavigation`, `TabsLayout`, `PrettyGrid`, `ToTop`
 - Actions and menus: `Actions`, `Action`, `Dropdown`, button components
 - Dialogs and forms: `Dialog`, `FormDialog`, `ImportDialog`, form inputs
 - Feedback: `Notification`, `Loading`, `Empty`, `Error`, `Onboarding`
@@ -257,6 +258,60 @@ Main optional props:
 - `scrollOnClick?: boolean` (default `true`)
 - `onClick?: () => void`
 
+### BottomNavigation
+
+`BottomNavigation` is a mobile-first fixed navigation bar intended for compact app shells.
+It is router-agnostic and uses `ConfigProvider` primitives (`location`, `navigate`, `linkComponent`).
+
+```tsx
+import {
+  BottomNavigation,
+  type BottomNavigationItemType,
+} from "@sito/dashboard-app";
+import {
+  faBox,
+  faHome,
+  faPlus,
+  faUser,
+} from "@fortawesome/free-solid-svg-icons";
+
+type BottomNavId = "home" | "products" | "profile";
+
+const bottomItems: BottomNavigationItemType<BottomNavId>[] = [
+  { id: "home", label: "Home", to: "/", icon: faHome, position: "left" },
+  {
+    id: "products",
+    label: "Products",
+    to: "/products",
+    icon: faBox,
+    position: "left",
+  },
+  {
+    id: "profile",
+    label: "Profile",
+    to: "/profile",
+    icon: faUser,
+    position: "right",
+  },
+];
+
+<BottomNavigation
+  items={bottomItems}
+  centerAction={{
+    icon: faPlus,
+    to: "/products/new",
+    ariaLabel: "Create product",
+  }}
+/>;
+```
+
+Key notes:
+
+- Use `position: "right"` to place items in the right group; omitted/`"left"` stays on the left group.
+- Use `isItemActive={(pathname, item) => ...}` for custom active matching (default uses path-prefix matching, with exact match for `/`).
+- Use `hidden`/`disabled` on each item and `centerAction.hidden` for conditional rendering.
+- `centerAction` supports `IconButton` visual props and optional `to`; navigation runs after `onClick` unless `event.preventDefault()` is called.
+
 ## Dialog hook migration (`v0.0.54`)
 
 `v0.0.54` removes the legacy entity-coupled `useFormDialog` contract.
@@ -472,6 +527,7 @@ export function App() {
 Notes:
 
 - Keep `ManagerProvider` above `AuthProvider`.
+- `Drawer` and `Onboarding` are auth-optional wrappers. Without `AuthProvider`, `Drawer` treats the session as logged-out and `Onboarding` skips `setGuestMode`.
 - `NavbarProvider` is required when using `Navbar` or `useNavbar`; otherwise it can be omitted.
 - If you customize auth storage keys in `AuthProvider`, pass the same keys to `IManager`/`BaseClient` auth config.
 

package/dist/components/BottomNavigation/BottomNavigation.d.ts

@@ -0,0 +1,8 @@
+import { BottomNavigationPropsType } from './types';
+/**
+ * Bottom navigation component for mobile devices.
+ * The navigation items are divided into left and right groups, with an optional center action.
+ * Navigation is router-agnostic and uses ConfigProvider's location, navigate, and linkComponent.
+ * @returns {JSX.Element} The rendered BottomNavigation component.
+ */
+export declare const BottomNavigation: <TId extends string = string>(props: BottomNavigationPropsType<TId>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BottomNavigation/NavLink.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react';
+import { BaseLinkPropsType } from '../types';
+import { BottomNavigationItemType } from './types';
+type NavLinkPropsType<TId extends string = string> = {
+    item: BottomNavigationItemType<TId>;
+    isActive: boolean;
+    linkComponent: ComponentType<BaseLinkPropsType>;
+};
+/**
+ * NavLink component that renders a navigation item for the bottom navigation bar.
+ */
+export declare const NavLink: <TId extends string = string>({ item, isActive, linkComponent: Link, }: NavLinkPropsType<TId>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BottomNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { BottomNavigation } from './BottomNavigation';
+export type { BottomNavigationCenterActionType, BottomNavigationItemType, BottomNavigationPositionType, BottomNavigationPropsType, } from './types';

package/dist/components/BottomNavigation/testmap.d.ts

@@ -0,0 +1,2 @@
+import { BottomNavigationItemType } from './types';
+export declare const bottomMap: BottomNavigationItemType[];

package/dist/components/BottomNavigation/types.d.ts

@@ -0,0 +1,26 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconButtonPropsLocalType } from '../Buttons/IconButton';
+export type BottomNavigationPositionType = "left" | "right";
+export type BottomNavigationItemType<TId extends string = string> = {
+    id: TId;
+    to: string;
+    icon: IconDefinition;
+    label: string;
+    ariaLabel?: string;
+    position?: BottomNavigationPositionType;
+    hidden?: boolean;
+    disabled?: boolean;
+};
+export type BottomNavigationCenterActionType = Omit<IconButtonPropsLocalType, "icon" | "onClick" | "name"> & {
+    hidden?: boolean;
+    icon?: IconDefinition;
+    to?: string;
+    ariaLabel?: string;
+    onClick?: IconButtonPropsLocalType["onClick"];
+};
+export type BottomNavigationPropsType<TId extends string = string> = {
+    items: BottomNavigationItemType<TId>[];
+    centerAction?: BottomNavigationCenterActionType | null;
+    className?: string;
+    isItemActive?: (pathname: string, item: BottomNavigationItemType<TId>) => boolean;
+};

package/dist/components/BottomNavigation/utils.d.ts

@@ -0,0 +1,17 @@
+import { BottomNavigationItemType } from './types';
+/**
+ * Returns whether the current pathname matches the provided path.
+ * @param pathname - Current location pathname.
+ * @param path - Target path to evaluate.
+ * @returns True when the path is active.
+ */
+export declare const isPathActive: (pathname: string, path: string) => boolean;
+/**
+ * Splits visible items into left and right navigation groups.
+ * @param items - Bottom navigation items.
+ * @returns Visible items split by side.
+ */
+export declare const splitBottomNavigationItems: <TId extends string>(items: BottomNavigationItemType<TId>[]) => {
+    leftItems: BottomNavigationItemType<TId>[];
+    rightItems: BottomNavigationItemType<TId>[];
+};

package/dist/components/Buttons/IconButton.d.ts

@@ -3,4 +3,9 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 export type IconButtonPropsLocalType = Omit<IconButtonPropsType, "icon"> & {
     icon: IconDefinition;
 };
+/**
+ * Wraps dashboard IconButton to accept a FontAwesome IconDefinition.
+ * @param props - Icon button props with a FontAwesome icon.
+ * @returns Wrapped dashboard IconButton element.
+ */
 export declare const AppIconButton: ({ icon, ...rest }: IconButtonPropsLocalType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Buttons/ToTop.d.ts

@@ -9,4 +9,9 @@ export type ToTopPropsType = Omit<IconButtonPropsLocalType, "icon" | "onClick">
     scrollOnClick?: boolean;
     onClick?: () => void;
 };
+/**
+ * Renders a floating button that scrolls the page to a target position.
+ * @param props - Visual and behavior props for the button.
+ * @returns Scroll-to-top button element.
+ */
 export declare const ToTop: (props: ToTopPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/ConfirmationDialog.d.ts

@@ -1,2 +1,7 @@
 import { ConfirmationDialogPropsType } from './types';
+/**
+ * Renders a confirmation dialog with cancel and primary actions.
+ * @param props - Confirmation dialog props.
+ * @returns Confirmation dialog element.
+ */
 export declare const ConfirmationDialog: (props: ConfirmationDialogPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/Dialog.d.ts

@@ -1,2 +1,7 @@
 import { DialogPropsType } from './types';
+/**
+ * Renders a portal-based modal dialog with backdrop and close behavior.
+ * @param props - Dialog props.
+ * @returns Modal dialog portal.
+ */
 export declare const Dialog: (props: DialogPropsType) => import('react').ReactPortal;

package/dist/components/Dialog/DialogActions.d.ts

@@ -1,2 +1,7 @@
 import { DialogActionsProps } from './types';
+/**
+ * Renders primary, secondary and optional extra actions for dialogs.
+ * @param props - Dialog actions configuration.
+ * @returns Actions container element.
+ */
 export declare const DialogActions: (props: DialogActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/FormDialog.d.ts

@@ -1,3 +1,8 @@
 import { FieldValues } from 'react-hook-form';
 import { FormDialogPropsType } from './types';
+/**
+ * Renders a form dialog with built-in submit and cancel controls.
+ * @param props - Form dialog props.
+ * @returns Form dialog element.
+ */
 export declare const FormDialog: <TInput extends FieldValues>(props: FormDialogPropsType<TInput>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/ImportDialog/Error.d.ts

@@ -1,6 +1,7 @@
-type ErrorProps = {
-    message?: string | null;
-    className?: string;
-};
+import { ErrorProps } from './types';
+/**
+ * Displays parse or processing errors inside the import dialog flow.
+ * @param props - Error view props.
+ * @returns Error message element.
+ */
 export declare function Error(props: ErrorProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Dialog/ImportDialog/ImportDialog.d.ts

@@ -1,3 +1,8 @@
 import { ImportDialogPropsType } from '../..';
 import { ImportPreviewDto } from '../../../lib';
+/**
+ * Handles file import, preview generation and submit for import workflows.
+ * @param props - Import dialog props.
+ * @returns Import dialog element.
+ */
 export declare const ImportDialog: <EntityDto extends ImportPreviewDto>(props: ImportDialogPropsType<EntityDto>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/ImportDialog/Loading.d.ts

@@ -1,6 +1,7 @@
-type ImportDialogLoadingProps = {
-    message?: string;
-    className?: string;
-};
+import { ImportDialogLoadingProps } from './types';
+/**
+ * Shows a loading state while an import file is being processed.
+ * @param props - Loading view props.
+ * @returns Loading indicator element.
+ */
 export declare function Loading(props: ImportDialogLoadingProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Dialog/ImportDialog/Preview.d.ts

@@ -4,5 +4,10 @@ type PreviewProps<EntityDto extends ImportPreviewDto> = {
     max?: number;
     className?: string;
 };
+/**
+ * Renders a compact JSON preview of parsed import items.
+ * @param props - Preview props.
+ * @returns Preview element or null when there are no items.
+ */
 export declare function Preview<EntityDto extends ImportPreviewDto>(props: PreviewProps<EntityDto>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Dialog/ImportDialog/types.d.ts

@@ -12,3 +12,36 @@ export interface ImportDialogPropsType<EntityDto extends ImportPreviewDto> exten
     onOverrideChange?: (override: boolean) => void;
     extraActions?: ButtonPropsType[];
 }
+export type ImportDialogLoadingProps = {
+    message?: string;
+    className?: string;
+};
+export type ImportState<T> = {
+    file: File | null;
+    previewItems: T[] | null;
+    parseError: string | null;
+    processing: boolean;
+    overrideExisting: boolean;
+    inputKey: number;
+};
+export type ImportAction<T> = {
+    type: "SET_FILE";
+    file: File | null;
+} | {
+    type: "START_PROCESSING";
+} | {
+    type: "SET_PREVIEW";
+    items: T[];
+} | {
+    type: "SET_ERROR";
+    message: string;
+} | {
+    type: "SET_OVERRIDE";
+    value: boolean;
+} | {
+    type: "RESET";
+};
+export type ErrorProps = {
+    message?: string | null;
+    className?: string;
+};

package/dist/components/Drawer/Drawer.d.ts

@@ -1,2 +1,7 @@
 import { DrawerPropsTypes } from './types';
+/**
+ * Renders the side drawer and resolves menu visibility by auth state.
+ * @param props - Drawer props.
+ * @returns Drawer element.
+ */
 export declare function Drawer<MenuKeys>(props: DrawerPropsTypes<MenuKeys>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Empty/Empty.d.ts

@@ -1,3 +1,8 @@
 import { EmptyPropsType } from './types';
 import { BaseEntityDto } from '../../lib';
+/**
+ * Displays an empty-state message with optional icon and action.
+ * @param props - Empty-state props.
+ * @returns Empty-state element.
+ */
 export declare const Empty: <TRow extends BaseEntityDto>(props: EmptyPropsType<TRow>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Error/Error.d.ts

@@ -1,2 +1,7 @@
 import { ErrorPropsType } from './types';
+/**
+ * Renders either a default error panel or fully custom error content.
+ * @param props - Error props in default or custom-content mode.
+ * @returns Error UI element.
+ */
 export declare function Error(props: ErrorPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FormContainer.d.ts

@@ -1,3 +1,8 @@
 import { FieldValues } from 'react-hook-form';
 import { FormContainerPropsType } from './types';
+/**
+ * Wraps form content and renders default submit/cancel actions.
+ * @param props - Form container props.
+ * @returns Form element with default action buttons.
+ */
 export declare const FormContainer: <TInput extends FieldValues>(props: FormContainerPropsType<TInput>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/PasswordInput.d.ts

@@ -1,2 +1,8 @@
 import { TextInputPropsType } from '@sito/dashboard';
+/**
+ * Text input specialized for passwords with show/hide visibility toggle.
+ * @param props - TextInput props.
+ * @param ref - Forwarded input ref.
+ * @returns Password input element.
+ */
 export declare const PasswordInput: import('react').ForwardRefExoticComponent<Omit<TextInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Loading/SplashScreen.d.ts

@@ -1,2 +1,7 @@
 import { LoadingPropsType } from './types';
+/**
+ * Renders a full-screen loading overlay for app bootstrapping states.
+ * @param props - Loading component props.
+ * @returns Splash screen element.
+ */
 export declare function SplashScreen(props: LoadingPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Navbar/Navbar.d.ts

@@ -1,2 +1,7 @@
 import { NavbarPropsType } from './types.js';
+/**
+ * Renders the top navigation bar with menu, title and optional search.
+ * @param props - Navbar props.
+ * @returns Navbar element.
+ */
 export declare function Navbar(props: NavbarPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Notification/Notification.d.ts

@@ -1 +1,5 @@
+/**
+ * Renders portal-based toast notifications managed by NotificationProvider.
+ * @returns Notification portal element.
+ */
 export declare function Notification(): import('react').ReactPortal;

package/dist/components/Onboarding/Onboarding.d.ts

@@ -1,2 +1,7 @@
 import { OnboardingPropsType } from './types';
+/**
+ * Renders the onboarding flow using controlled TabsLayout steps.
+ * @param props - Onboarding props.
+ * @returns Onboarding element.
+ */
 export declare const Onboarding: (props: OnboardingPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Onboarding/Step.d.ts

@@ -1,2 +1,7 @@
 import { StepPropsType } from './types';
+/**
+ * Renders a single onboarding step with navigation actions.
+ * @param props - Step props.
+ * @returns Step element.
+ */
 export declare const Step: (props: StepPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/Page.d.ts

@@ -1,3 +1,8 @@
 import { PagePropsType } from './types';
 import { BaseEntityDto } from '../../lib';
+/**
+ * Composes standard page layout with actions, header and loading states.
+ * @param props - Page props.
+ * @returns Page layout element.
+ */
 export declare const Page: <TEntity extends BaseEntityDto>(props: PagePropsType<TEntity>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/PageHeader.d.ts

@@ -1,3 +1,8 @@
 import { PageHeaderPropsType } from './types';
 import { BaseEntityDto } from '../../lib';
+/**
+ * Renders page title plus desktop/mobile action controls and back button.
+ * @param props - Page header props.
+ * @returns Page header element.
+ */
 export declare const PageHeader: <TEntity extends BaseEntityDto>(props: PageHeaderPropsType<TEntity>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PrettyGrid/PrettyGrid.d.ts

@@ -1,3 +1,8 @@
 import { BaseEntityDto } from '../../lib';
 import { PrettyGridPropsType } from './types';
+/**
+ * Renders a card grid with empty, loading and infinite-scroll states.
+ * @param props - PrettyGrid props.
+ * @returns Grid element with optional empty/loading states.
+ */
 export declare const PrettyGrid: <TDto extends BaseEntityDto>(props: PrettyGridPropsType<TDto>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TabsLayout/Tab.d.ts

@@ -1,2 +1,7 @@
 import { TabPropsType } from './types';
+/**
+ * Renders a single tab as either a router link or local button.
+ * @param props - Tab props.
+ * @returns Tab element.
+ */
 export declare const Tab: (props: TabPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TabsLayout/TabsLayout.d.ts

@@ -1,2 +1,7 @@
 import { TabsLayoutPropsType } from './types';
+/**
+ * Renders tab navigation and active tab content in controlled/uncontrolled mode.
+ * @param props - Tabs layout props.
+ * @returns Tabs layout element.
+ */
 export declare const TabsLayout: (props: TabsLayoutPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './Drawer';
 export * from './Loading';
 export * from './TabsLayout';
 export * from './Onboarding';
+export * from './BottomNavigation';
 export * from './Buttons';
 export * from './Empty';
 export * from './types';