@dimasbaguspm/versaur 0.0.58 → 0.0.59

package/dist/types/layouts/app-layout/app-layout.atoms.d.ts

@@ -0,0 +1,6 @@
+import { AppLayoutTopRegionProps, AppLayoutSideLeftRegionProps, AppLayoutSideRightRegionProps, AppLayoutBottomRegionProps, AppLayoutMainRegionProps } from './types';
+export declare const AppLayoutTopRegion: import('react').ForwardRefExoticComponent<AppLayoutTopRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppLayoutSideLeftRegion: import('react').ForwardRefExoticComponent<AppLayoutSideLeftRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppLayoutSideRightRegion: import('react').ForwardRefExoticComponent<AppLayoutSideRightRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppLayoutBottomRegion: import('react').ForwardRefExoticComponent<AppLayoutBottomRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AppLayoutMainRegion: import('react').ForwardRefExoticComponent<AppLayoutMainRegionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/app-layout/app-layout.d.ts

@@ -0,0 +1,8 @@
+import { AppLayoutProps } from './types';
+export declare const AppLayout: import('react').ForwardRefExoticComponent<AppLayoutProps & import('react').RefAttributes<HTMLDivElement>> & {
+    TopRegion: import('react').ForwardRefExoticComponent<import('./types').AppLayoutTopRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+    SideLeftRegion: import('react').ForwardRefExoticComponent<import('./types').AppLayoutSideLeftRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+    SideRightRegion: import('react').ForwardRefExoticComponent<import('./types').AppLayoutSideRightRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+    BottomRegion: import('react').ForwardRefExoticComponent<import('./types').AppLayoutBottomRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+    MainRegion: import('react').ForwardRefExoticComponent<import('./types').AppLayoutMainRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/types/layouts/app-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { AppLayout } from './app-layout';
+export type { AppLayoutProps, AppLayoutTopRegionProps, AppLayoutSideLeftRegionProps, AppLayoutSideRightRegionProps, AppLayoutBottomRegionProps, AppLayoutMainRegionProps, } from './types';

package/dist/types/layouts/app-layout/types.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes } from 'react';
+/**
+ * AppLayoutRoot - main container for application layout
+ * Provides high-level layout structure with named regions for app shell
+ * Compound pattern: TopRegion, SideLeftRegion, SideRightRegion, BottomRegion, MainRegion
+ */
+export type AppLayoutProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AppLayoutTopRegion - top region of the app (header, navigation bar)
+ */
+export interface AppLayoutTopRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for top region
+     */
+    className?: string;
+}
+/**
+ * AppLayoutSideLeftRegion - left sidebar region
+ */
+export interface AppLayoutSideLeftRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for left sidebar region
+     */
+    className?: string;
+}
+/**
+ * AppLayoutSideRightRegion - right sidebar region
+ */
+export interface AppLayoutSideRightRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for right sidebar region
+     */
+    className?: string;
+}
+/**
+ * AppLayoutBottomRegion - bottom region of the app (footer, bottom nav)
+ */
+export interface AppLayoutBottomRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for bottom region
+     */
+    className?: string;
+}
+/**
+ * AppLayoutMainRegion - main content region
+ */
+export interface AppLayoutMainRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class for main region
+     */
+    className?: string;
+}

package/dist/types/layouts/index.d.ts

@@ -1,10 +1,11 @@
-export * from './app-bar';
+export * from './app-layout';
 export * from './bottom-bar';
 export * from './badge-group';
 export * from './button-group';
 export * from './filter-chip-group';
 export * from './page-header';
 export * from './page-content';
+export * from './page-layout';
 export * from './page-loader';
 export * from './form-layout';
 export * from './side-bar';

package/dist/types/layouts/page-content/types.d.ts

@@ -17,12 +17,6 @@ export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
      * - 'two-column-asymmetric-right': Two columns with right column wider
      */
     template?: 'single-column' | 'two-column' | 'two-column-asymmetric-left' | 'two-column-asymmetric-right';
-    /**
-     * Background color of the layout
-     * - 'white': White background
-     * - 'gray': Gray background
-     */
-    backgroundColor?: 'white' | 'gray';
     /**
      * Content to render inside the layout
      */

package/dist/types/layouts/page-header/types.d.ts

@@ -11,12 +11,6 @@ export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
      * - 'narrow': Container for mobile screens (centered)
      */
     size?: 'fluid' | 'wide' | 'narrow';
-    /**
-     * Background color of the header
-     * - 'white': White background
-     * - 'gray': Gray background
-     */
-    backgroundColor?: 'white' | 'gray';
     children?: ReactNode;
 }
 /**

package/dist/types/layouts/page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayout } from './page-layout';
+export type { PageLayoutProps, PageLayoutHeaderRegionProps, PageLayoutContentRegionProps, } from './types';

package/dist/types/layouts/page-layout/page-layout.atoms.d.ts

@@ -0,0 +1,3 @@
+import { PageLayoutHeaderRegionProps, PageLayoutContentRegionProps } from './types';
+export declare const PageLayoutHeaderRegion: import('react').ForwardRefExoticComponent<PageLayoutHeaderRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PageLayoutContentRegion: import('react').ForwardRefExoticComponent<PageLayoutContentRegionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/page-layout/page-layout.d.ts

@@ -0,0 +1,5 @@
+import { PageLayoutProps } from './types';
+export declare const PageLayout: import('react').ForwardRefExoticComponent<PageLayoutProps & import('react').RefAttributes<HTMLDivElement>> & {
+    HeaderRegion: import('react').ForwardRefExoticComponent<import('./types').PageLayoutHeaderRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+    ContentRegion: import('react').ForwardRefExoticComponent<import('./types').PageLayoutContentRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/types/layouts/page-layout/types.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+/**
+ * PageLayoutRoot - main container for page layout
+ * Manages layout between header and content regions
+ * Compound pattern: HeaderRegion, ContentRegion
+ */
+export interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Add horizontal margin (left and right) to the page layout
+     * @default false
+     */
+    hasMargin?: boolean;
+}
+/**
+ * PageLayoutHeaderRegion - header region of the page
+ */
+export interface PageLayoutHeaderRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Background color of the header region
+     * - 'white': White background
+     * - 'gray': Gray background
+     * @default 'white'
+     */
+    backgroundColor?: 'white' | 'gray';
+}
+/**
+ * PageLayoutContentRegion - content region of the page
+ */
+export interface PageLayoutContentRegionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Background color of the content region
+     * - 'white': White background
+     * - 'gray': Gray background
+     * @default 'white'
+     */
+    backgroundColor?: 'white' | 'gray';
+}

package/dist/types/layouts/side-bar/side-bar.atoms.d.ts

@@ -1,3 +1,3 @@
 import { SideBarItemProps, SideBarGroupProps } from './types';
-export declare const SideBarItem: import('react').ForwardRefExoticComponent<SideBarItemProps & import('react').RefAttributes<HTMLElement>>;
+export declare const SideBarItem: import('react').ForwardRefExoticComponent<SideBarItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
 export declare const SideBarGroup: import('react').ForwardRefExoticComponent<SideBarGroupProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/types/layouts/side-bar/side-bar.d.ts

@@ -1,5 +1,5 @@
 import { SideBarProps } from './types';
 export declare const SideBar: import('react').ForwardRefExoticComponent<SideBarProps & import('react').RefAttributes<HTMLElement>> & {
-    Item: import('react').ForwardRefExoticComponent<import('./types').SideBarItemProps & import('react').RefAttributes<HTMLElement>>;
+    Item: import('react').ForwardRefExoticComponent<import('./types').SideBarItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
     Group: import('react').ForwardRefExoticComponent<import('./types').SideBarGroupProps & import('react').RefAttributes<HTMLLIElement>>;
 };

package/dist/types/layouts/side-bar/types.d.ts

@@ -1,31 +1,43 @@
-import { HTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+import { HTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
 /**
  * Props for the SideBar root component
  */
 export interface SideBarProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Children nodes (MenuList, etc)
+     * Children nodes (SideBar.Item, SideBar.Group)
      */
     children: ReactNode;
+    /**
+     * Whether the sidebar starts in collapsed state
+     * @default false (expanded)
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
 }
-interface SideBarItemBaseAsAnchor extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    active?: boolean;
-    icon: ReactNode;
-    children: ReactNode;
-    onClick?: never;
-    href: AnchorHTMLAttributes<HTMLAnchorElement>['href'];
-}
-interface SideBarItemBaseAsButton extends ButtonHTMLAttributes<HTMLButtonElement> {
+/**
+ * Props for the SideBar.Item component (anchor only)
+ */
+export interface SideBarItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Whether this item is currently active/selected
+     */
     active?: boolean;
+    /**
+     * Icon element to display
+     */
     icon?: ReactNode;
+    /**
+     * Text label for the item
+     */
     children: ReactNode;
-    onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
-    href?: never;
+    /**
+     * URL for the anchor
+     */
+    href: AnchorHTMLAttributes<HTMLAnchorElement>['href'];
 }
-/**
- * Props for the SideBar.Item component (polymorphic: anchor or button)
- */
-export type SideBarItemProps = SideBarItemBaseAsAnchor | SideBarItemBaseAsButton;
 /**
  * Props for the SideBar.Group component
  */
@@ -35,8 +47,33 @@ export interface SideBarGroupProps extends HTMLAttributes<HTMLLIElement> {
      */
     label: ReactNode;
     /**
-     * Children (SideBar.Item)
+     * Children (SideBar.Item elements)
      */
     children: ReactNode;
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Whether the group's children are expanded by default
+     * @default true
+     */
+    defaultExpanded?: boolean;
+}
+/**
+ * Context value for sidebar state
+ */
+export interface SideBarContextValue {
+    /**
+     * Whether the sidebar is currently collapsed
+     */
+    isCollapsed: boolean;
+    /**
+     * Toggle the collapsed state
+     */
+    toggleCollapsed: () => void;
+    /**
+     * Expand the sidebar (set to expanded state)
+     */
+    expandSidebar: () => void;
 }
-export {};

package/dist/utils/enforce-subpath-import.js

@@ -24,7 +24,7 @@ const symbolToSubpath = {
   "TextInputAsButton": "forms",
   "TextAreaInput": "forms",
   "TimePickerInput": "forms",
-  "AppBar": "layouts",
+  "AppLayout": "layouts",
   "BadgeGroup": "layouts",
   "BottomBar": "layouts",
   "ButtonGroup": "layouts",
@@ -32,6 +32,7 @@ const symbolToSubpath = {
   "FormLayout": "layouts",
   "PageContent": "layouts",
   "PageHeader": "layouts",
+  "PageLayout": "layouts",
   "PageLoader": "layouts",
   "SideBar": "layouts",
   "TopBar": "layouts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",