@akinon/ui-layout 0.5.0 → 1.0.0

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

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type FlexProps = Omit<AntFlexProps, 'prefixCls' | 'style' | 'styles'>;
+
+export interface AntFlexProps<P = Record<PropertyKey, any>>
+  extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * 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
+   */
+  component?: CustomComponent<P>;
+}
+
+type SizeType = 'small' | 'middle' | 'large' | undefined;
+
+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

@@ -0,0 +1,135 @@
+export type RowProps = Omit<AntRowProps, 'prefixCls' | 'style' | 'styles'>;
+
+export type ColProps = Omit<AntColProps, 'prefixCls' | 'style' | 'styles'>;
+
+type ColSpanType = number | string;
+
+type FlexType = number | LiteralUnion<'none' | 'auto'>;
+
+type LiteralUnion<T extends string> = T | (string & {});
+
+export interface ColSize {
+  flex?: FlexType;
+  span?: number | string;
+  order?: number | string;
+  offset?: number | string;
+  push?: number | string;
+  pull?: number | string;
+}
+
+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;
+}
+
+export declare const Col: React.ForwardRefExoticComponent<
+  ColProps & React.RefAttributes<HTMLDivElement>
+>;
+
+type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+declare const RowAligns: readonly ['top', 'middle', 'bottom', 'stretch'];
+
+declare const RowJustify: readonly [
+  'start',
+  'end',
+  'center',
+  'space-around',
+  'space-between',
+  'space-evenly'
+];
+
+type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+type ResponsiveLike<T> = {
+  [key in Responsive]?: T;
+};
+
+export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
+
+type ResponsiveAligns = ResponsiveLike<(typeof RowAligns)[number]>;
+
+type ResponsiveJustify = ResponsiveLike<(typeof RowJustify)[number]>;
+
+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;
+
+  /**
+   * Auto wrap line
+   */
+  wrap?: boolean;
+}
+
+export declare const Row: React.ForwardRefExoticComponent<
+  RowProps & React.RefAttributes<HTMLDivElement>
+>;

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

@@ -0,0 +1,29 @@
+export type ContentProps = Omit<
+  AntContentProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+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.css

@@ -0,0 +1,3 @@
+.akinon-layout-footer {
+  text-align: center;
+}

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

@@ -0,0 +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.css

@@ -0,0 +1,12 @@
+.akinon-layout-header {
+  padding-inline: 1rem;
+  height: 3.5rem;
+  border-bottom: 1px solid var(--color-gray-900);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: unset;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * 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'
+>;
+
+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

@@ -0,0 +1,34 @@
+.akinon-layout-sider {
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  overflow-y: auto;
+}
+
+.akinon-layout-sider.left {
+  inset-inline-start: 0;
+}
+
+.akinon-layout-sider.right {
+  inset-inline-end: 0;
+}
+
+.akinon-layout-sider .logo-container {
+  display: flex;
+  flex-direction: row;
+  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"}