@akinon/ui-layout 0.6.0 → 1.0.1

package/dist/cjs/Flex/index.d.ts

@@ -1,5 +1,16 @@
 import * as React from 'react';
 import type { FlexProps } from './types';
-export type { FlexProps } from './types';
+export type * from './types';
+/**
+ * The `Flex` component is a wrapper for creating flexible layouts using the flexbox model.
+ * It provides a clean and simple API to manage alignment, spacing, and direction
+ * of child elements, ensuring responsive and adaptable designs.
+ *
+ * Features include:
+ * - Vertical and horizontal layouts with optional wrapping.
+ * - Customizable alignment for both main and cross axes.
+ * - Support for predefined or custom gap sizes between child elements.
+ * - Flexibility to use any custom HTML element or React component as the container.
+ */
 export declare const Flex: ({ children, ...restFlexProps }: FlexProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Flex/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBA4B7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,mBAAmB,SAAS,CAAC;AAE7B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBA4B7D,CAAC"}

package/dist/cjs/Flex/index.js

@@ -16,6 +16,17 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * The `Flex` component is a wrapper for creating flexible layouts using the flexbox model.
+ * It provides a clean and simple API to manage alignment, spacing, and direction
+ * of child elements, ensuring responsive and adaptable designs.
+ *
+ * Features include:
+ * - Vertical and horizontal layouts with optional wrapping.
+ * - Customizable alignment for both main and cross axes.
+ * - Support for predefined or custom gap sizes between child elements.
+ * - Flexibility to use any custom HTML element or React component as the container.
+ */
 const Flex = (_a) => {
     var { children } = _a, restFlexProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/Flex/types.d.ts

@@ -1,38 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type FlexProps = Omit<AntFlexProps, 'prefixCls' | 'style' | 'styles'>;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface AntFlexProps<P = Record<PropertyKey, any>>
   extends React.HTMLAttributes<HTMLElement> {
-  prefixCls?: string;
   /**
    * ClassName on the root element
    */
   rootClassName?: string;
+
   /**
    * Is direction of the flex vertical, use <code>flex-direction: column</code>
    */
   vertical?: boolean;
+
   /**
    * Set whether the element is displayed in a single line or in multiple lines
    */
   wrap?: boolean | React.CSSProperties['flexWrap'];
+
   /**
    * Sets the alignment of elements in the direction of the main axis
    */
   justify?: React.CSSProperties['justifyContent'];
+
   /**
    * Sets the alignment of elements in the direction of the cross axis
    */
   align?: React.CSSProperties['alignItems'];
+
   /**
    * Flex CSS shorthand properties
    */
   flex?: React.CSSProperties['flex'];
+
   /**
    * Sets the gap between grids
    */
   gap?: React.CSSProperties['gap'] | SizeType;
+
+  /**
+   * The content inside the flex container.
+   */
   children: React.ReactNode;
+
   /**
    * Custom element type
    */
@@ -41,7 +51,6 @@ export interface AntFlexProps<P = Record<PropertyKey, any>>
 
 type SizeType = 'small' | 'middle' | 'large' | undefined;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type CustomComponent<P = Record<PropertyKey, any>> =
   | React.ComponentType<P>
   | string;

package/dist/cjs/Grid/index.d.ts

@@ -1,6 +1,29 @@
 import * as React from 'react';
 import type { ColProps, RowProps } from './types';
 export type { ColProps, RowProps } from './types';
+/**
+ * `Row` and `Col` are layout components used in a grid system to create responsive and flexible designs.
+ * They work together to divide the available space into rows and columns, aligning content
+ * based on the specified layout rules and breakpoints.
+ *
+ * Together, `Row` and `Col` provide a complete solution for responsive grid-based layouts.
+ */
+/**
+ *
+ * The `Row` component is used to create horizontal groups of columns. It manages spacing, alignment, and wrapping behavior.
+ * - Supports custom spacing (`gutter`) for horizontal and vertical space between columns.
+ * - Allows vertical alignment (`align`) and horizontal justification (`justify`) of content.
+ * - Automatically wraps columns into the next line when necessary (`wrap`).
+ *
+ */
 export declare const Row: ({ children, ...restRowProps }: RowProps) => React.JSX.Element;
+/**
+ *
+ * The `Col` component represents individual columns within a row. It determines the width and position of the column.
+ * - Flexible width management using `span`, `offset`, `push`, and `pull`.
+ * - Supports responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) for defining behavior across screen sizes.
+ * - Can define flex-specific properties like `flex` for advanced layouts.
+ *
+ */
 export declare const Col: ({ children, ...restColProps }: ColProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBAkC1D,CAAC;AAEF,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBA4B1D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;GAMG;AAEH;;;;;;;GAOG;AAEH,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBAkC1D,CAAC;AAEF;;;;;;;GAOG;AAEH,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBA4B1D,CAAC"}

package/dist/cjs/Grid/index.js

@@ -16,6 +16,21 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * `Row` and `Col` are layout components used in a grid system to create responsive and flexible designs.
+ * They work together to divide the available space into rows and columns, aligning content
+ * based on the specified layout rules and breakpoints.
+ *
+ * Together, `Row` and `Col` provide a complete solution for responsive grid-based layouts.
+ */
+/**
+ *
+ * The `Row` component is used to create horizontal groups of columns. It manages spacing, alignment, and wrapping behavior.
+ * - Supports custom spacing (`gutter`) for horizontal and vertical space between columns.
+ * - Allows vertical alignment (`align`) and horizontal justification (`justify`) of content.
+ * - Automatically wraps columns into the next line when necessary (`wrap`).
+ *
+ */
 const Row = (_a) => {
     var { children } = _a, restRowProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
@@ -39,6 +54,14 @@ const Row = (_a) => {
     return useStyle(React.createElement(antd_1.Row, Object.assign({ gutter: [gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter, gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter] }, restRowProps), children));
 };
 exports.Row = Row;
+/**
+ *
+ * The `Col` component represents individual columns within a row. It determines the width and position of the column.
+ * - Flexible width management using `span`, `offset`, `push`, and `pull`.
+ * - Supports responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) for defining behavior across screen sizes.
+ * - Can define flex-specific properties like `flex` for advanced layouts.
+ *
+ */
 const Col = (_a) => {
     var { children } = _a, restColProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/Grid/types.d.ts

@@ -22,51 +22,61 @@ export interface AntColProps extends React.HTMLAttributes<HTMLDivElement> {
    * Flex layout style
    */
   flex?: FlexType;
+
   /**
    * Raster number of cells to occupy, 0 corresponds to display: none
    */
   span?: number | string;
+
   /**
    * Raster order
    */
   order?: number | string;
+
   /**
    * The number of cells to offset Col from the left
    */
   offset?: number | string;
+
   /**
    * The number of cells that raster is moved to the right
    */
   push?: number | string;
+
   /**
    * The number of cells that raster is moved to the left
    */
   pull?: number | string;
+
   /**
    * screen < 576px and also default setting, could be a span value or an object containing above props
    */
   xs?: number | string | ColSize;
+
   /**
    * screen ≥ 576px, could be a span value or an object containing above props
    */
   sm?: number | string | ColSize;
+
   /**
    * screen ≥ 768px, could be a span value or an object containing above props
    */
   md?: number | string | ColSize;
+
   /**
    * screen ≥ 992px, could be a span value or an object containing above props
    */
   lg?: number | string | ColSize;
+
   /**
    * screen ≥ 1200px, could be a span value or an object containing above props
    */
   xl?: number | string | ColSize;
+
   /**
    * screen ≥ 1600px, could be a span value or an object containing above props
    */
   xxl?: number | string | ColSize;
-  prefixCls?: string;
 }
 
 export declare const Col: React.ForwardRefExoticComponent<
@@ -103,15 +113,17 @@ export interface AntRowProps extends React.HTMLAttributes<HTMLDivElement> {
    * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time <code>[horizontal, vertical]</code>
    */
   gutter?: Gutter | [Gutter, Gutter];
+
   /**
    * Vertical alignment
    */
   align?: 'top' | 'middle' | 'bottom' | 'stretch' | ResponsiveAligns;
+
   /**
    * Horizontal arrangement
    */
   justify?: (typeof RowJustify)[number] | ResponsiveJustify;
-  prefixCls?: string;
+
   /**
    * Auto wrap line
    */

package/dist/cjs/Layout/Content/index.d.ts

@@ -1,5 +1,13 @@
 import * as React from 'react';
 import type { ContentProps } from './types';
 export type { ContentProps } from './types';
+/**
+ * `Content` is a layout component designed for the main content area of an application or page.
+ *
+ * ### Features:
+ * - **Custom Styling:** Easily apply custom styles using `prefixCls`, `suffixCls`, or `rootClassName`.
+ * - **Responsive Design:** Automatically adjusts based on the presence of a `Sider`.
+ * - **Structure:** Works seamlessly with other layout components such as `Header`, `Footer`, and `Sider`.
+ */
 export declare const Content: ({ children, ...restContentProps }: ContentProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Layout/Content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Content/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBA4BtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Content/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBA4BtE,CAAC"}

package/dist/cjs/Layout/Content/index.js

@@ -17,6 +17,14 @@ const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const { Content: AntContent } = antd_1.Layout;
+/**
+ * `Content` is a layout component designed for the main content area of an application or page.
+ *
+ * ### Features:
+ * - **Custom Styling:** Easily apply custom styles using `prefixCls`, `suffixCls`, or `rootClassName`.
+ * - **Responsive Design:** Automatically adjusts based on the presence of a `Sider`.
+ * - **Structure:** Works seamlessly with other layout components such as `Header`, `Footer`, and `Sider`.
+ */
 const Content = (_a) => {
     var { children } = _a, restContentProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/Layout/Content/types.d.ts

@@ -7,8 +7,23 @@ export type AntContentProps = AntContentBasicProps &
   React.RefAttributes<HTMLElement>;
 
 interface AntContentBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for custom styling.
+   */
   suffixCls?: string;
+
+  /**
+   * Class name for the root element.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates if the layout contains a sider.
+   */
   hasSider?: boolean;
 }

package/dist/cjs/Layout/Footer/index.d.ts

@@ -2,5 +2,10 @@ import './index.css';
 import * as React from 'react';
 import type { FooterProps } from './types';
 export type { FooterProps } from './types';
+/**
+ * Footer component, which serves as the bottom section of a layout.
+ * It provides a consistent structure for displaying additional
+ * information, links, or branding at the end of the page.
+ */
 export declare const Footer: ({ children, ...restFooterProps }: FooterProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Layout/Footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C;;;;GAIG;AAEH,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/cjs/Layout/Footer/index.js

@@ -18,6 +18,11 @@ const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const { Footer: AntFooter } = antd_1.Layout;
+/**
+ * Footer component, which serves as the bottom section of a layout.
+ * It provides a consistent structure for displaying additional
+ * information, links, or branding at the end of the page.
+ */
 const Footer = (_a) => {
     var { children } = _a, restFooterProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/Layout/Footer/types.d.ts

@@ -1,15 +1,43 @@
+/**
+ * Props for the Footer component, excluding specific attributes from AntFooterProps.
+ */
 export type FooterProps = Omit<
   AntFooterProps,
   'prefixCls' | 'suffixCls' | 'style' | 'styles'
 >;
 
+/**
+ * Combined type for Footer props with React reference attributes.
+ */
 export type AntFooterProps = AntFooterBasicProps &
   React.RefAttributes<HTMLElement>;
 
+/**
+ * Basic props for the Footer component.
+ */
 interface AntFooterBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for additional customization.
+   */
   suffixCls?: string;
+
+  /**
+   * Root class name for the Footer component.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates whether the layout contains a Sider component.
+   */
   hasSider?: boolean;
+
+  /**
+   * Content to be displayed inside the Footer.
+   */
   children: React.ReactNode;
 }

package/dist/cjs/Layout/Header/index.d.ts

@@ -2,5 +2,12 @@ import './index.css';
 import * as React from 'react';
 import type { HeaderProps } from './types';
 export type { HeaderProps } from './types';
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ *
+ * This component is part of the Layout system and is typically used alongside other Layout components
+ * such as Footer, Sider, and Content to build a structured page layout.
+ */
 export declare const Header: ({ children, ...restHeaderProps }: HeaderProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Layout/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C;;;;;;GAMG;AAEH,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/cjs/Layout/Header/index.js

@@ -18,6 +18,13 @@ const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const { Header: AntHeader } = antd_1.Layout;
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ *
+ * This component is part of the Layout system and is typically used alongside other Layout components
+ * such as Footer, Sider, and Content to build a structured page layout.
+ */
 const Header = (_a) => {
     var { children } = _a, restHeaderProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/Layout/Header/types.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ */
 export type HeaderProps = Omit<
   AntHeaderProps,
   'prefixCls' | 'suffixCls' | 'style' | 'styles'
@@ -7,9 +11,28 @@ export type AntHeaderProps = AntHeaderBasicProps &
   React.RefAttributes<HTMLElement>;
 
 interface AntHeaderBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for custom styling.
+   */
   suffixCls?: string;
+
+  /**
+   * Root class name for the component.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates if the layout has a sider.
+   */
   hasSider?: boolean;
+
+  /**
+   * The children elements to render within the header.
+   */
   children: React.ReactNode;
 }

package/dist/cjs/Layout/Sider/index.css

@@ -1,7 +1,7 @@
 .akinon-layout-sider {
   position: sticky;
   top: 0;
-  height: 100vh;
+  height: 100svh;
   overflow-y: auto;
 }
 
@@ -16,13 +16,19 @@
 .akinon-layout-sider .logo-container {
   display: flex;
   flex-direction: row;
-  justify-content: center;
   align-items: center;
   height: 3.5rem;
   gap: 0.8rem;
+  background-color: var(--color-ebonyClay-600);
+  padding-inline: 1.5rem;
   /* border-bottom: 1px solid var(--color-gray-900); */
 }
 
+.akinon-layout-sider .logo-container.collapsed {
+  justify-content: center;
+  padding-inline: 1rem;
+}
+
 .akinon-layout-sider .logo-container.collapsed .brand-image {
   display: none;
 }

package/dist/cjs/Layout/Sider/index.d.ts

@@ -2,5 +2,28 @@ import './index.css';
 import * as React from 'react';
 import type { SiderProps } from './types';
 export type { LeftSiderItem, SiderProps } from './types';
-export declare const Sider: ({ children, collapsed, iconUrl, brandImageUrl, ...restSiderProps }: SiderProps) => React.JSX.Element;
+/**
+ * Sider component for building collapsible sidebars in user interfaces.
+ *
+ * The Sider component is designed to provide a flexible and customizable sidebar
+ * that integrates seamlessly with layouts, menus, and responsive designs.
+ *
+ * Features:
+ * - **Collapsible**: Option to collapse the sidebar manually or automatically.
+ * - **Custom Triggers**: Supports custom triggers or hiding the trigger altogether.
+ * - **Width Options**: Configure both default and collapsed widths.
+ * - **Responsive Breakpoints**: Adjusts behavior based on predefined screen sizes.
+ * - **Theming**: Offers `light` and `dark` themes to match application aesthetics.
+ * - **Callbacks**:
+ *   - `onCollapse`: Triggered when the sidebar is collapsed or expanded.
+ *   - `onBreakpoint`: Triggered when responsive breakpoints are reached.
+ * - **Custom Styling**:
+ *   - `className` for additional styling.
+ *   - `zeroWidthTriggerStyle` for styling triggers when the collapsed width is zero.
+ *   - `brandImageUrl` and `iconUrl` for branding and visual customization.
+ *
+ * Ideal for dashboards, navigation menus, and applications requiring collapsible or responsive side navigation.
+ *
+ */
+export declare const Sider: ({ children, collapsed, iconUrl, brandImageUrl, position, ...restSiderProps }: SiderProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/Layout/Sider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Sider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIzD,eAAO,MAAM,KAAK,uEAMf,UAAU,sBAuDZ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Sider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,KAAK,iFAOf,UAAU,sBAgEZ,CAAC"}

package/dist/cjs/Layout/Sider/index.js

@@ -18,21 +18,51 @@ const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const { Sider: AntSider } = antd_1.Layout;
+/**
+ * Sider component for building collapsible sidebars in user interfaces.
+ *
+ * The Sider component is designed to provide a flexible and customizable sidebar
+ * that integrates seamlessly with layouts, menus, and responsive designs.
+ *
+ * Features:
+ * - **Collapsible**: Option to collapse the sidebar manually or automatically.
+ * - **Custom Triggers**: Supports custom triggers or hiding the trigger altogether.
+ * - **Width Options**: Configure both default and collapsed widths.
+ * - **Responsive Breakpoints**: Adjusts behavior based on predefined screen sizes.
+ * - **Theming**: Offers `light` and `dark` themes to match application aesthetics.
+ * - **Callbacks**:
+ *   - `onCollapse`: Triggered when the sidebar is collapsed or expanded.
+ *   - `onBreakpoint`: Triggered when responsive breakpoints are reached.
+ * - **Custom Styling**:
+ *   - `className` for additional styling.
+ *   - `zeroWidthTriggerStyle` for styling triggers when the collapsed width is zero.
+ *   - `brandImageUrl` and `iconUrl` for branding and visual customization.
+ *
+ * Ideal for dashboards, navigation menus, and applications requiring collapsible or responsive side navigation.
+ *
+ */
 const Sider = (_a) => {
-    var { children, collapsed, iconUrl, brandImageUrl } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl"]);
+    var { children, collapsed, iconUrl, brandImageUrl, position = 'left' } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl", "position"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
-    //const layoutToken = (token as GlobalToken).Layout;
+    const layoutToken = token.Layout;
     const useStyle = (0, cssinjs_1.useStyleRegister)({
         token: token,
         path: ['Sider'],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         theme: theme
     }, () => {
-        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-sider`;
-        const prefixClsWithoutHash = `.${getPrefixCls()}-sider`;
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-layout-sider`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-layout-sider`;
         return {
-            [prefixCls]: {},
+            [prefixCls]: {
+                '&-left': {
+                    borderInlineEnd: layoutToken.mainBorder
+                },
+                '&-right': {
+                    borderInlineStart: layoutToken.mainBorder
+                }
+            },
             [prefixClsWithoutHash]: {}
         };
     });
@@ -42,7 +72,7 @@ const Sider = (_a) => {
             React.createElement("img", { className: "logo", src: iconUrl, alt: "icon", width: 20, height: 20 }),
             React.createElement("img", { className: "brand-image", src: brandImageUrl, alt: "brand-image", height: 20 })));
     }
-    return useStyle(React.createElement(AntSider, Object.assign({ collapsible: true, collapsed: collapsed, trigger: null, width: 250 }, restSiderProps),
+    return useStyle(React.createElement(AntSider, Object.assign({ className: `${getPrefixCls()}-layout-sider-${position}`, collapsible: true, collapsed: collapsed, trigger: null, width: 250, collapsedWidth: 56 }, restSiderProps),
         LogoContainer,
         children));
 };