@akinon/ui-layout 0.4.0 → 0.6.0

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { FlexProps } from './types';
+export type { FlexProps } from './types';
+export declare const Flex: ({ children, ...restFlexProps }: FlexProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/cjs/Flex/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const Flex = (_a) => {
+    var { children } = _a, restFlexProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const flexToken = (token as GlobalToken).Flex;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Flex'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-flex`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-flex`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(antd_1.Flex, Object.assign({}, restFlexProps), children));
+};
+exports.Flex = Flex;

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

@@ -0,0 +1,47 @@
+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;
+  children: React.ReactNode;
+  /**
+   * Custom element type
+   */
+  component?: CustomComponent<P>;
+}
+
+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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { ColProps, RowProps } from './types';
+export type { ColProps, RowProps } from './types';
+export declare const Row: ({ children, ...restRowProps }: RowProps) => React.JSX.Element;
+export declare const Col: ({ children, ...restColProps }: ColProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/cjs/Grid/index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Col = exports.Row = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const Row = (_a) => {
+    var { children } = _a, restRowProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const gridToken = token.Grid;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Row'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-row`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-row`;
+        return {
+            [prefixCls]: {
+                maxWidth: gridToken === null || gridToken === void 0 ? void 0 : gridToken.rowMaxWidth
+            },
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    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;
+const Col = (_a) => {
+    var { children } = _a, restColProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const colToken = (token as GlobalToken).Col;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Col'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-col`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-col`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(antd_1.Col, Object.assign({}, restColProps), children));
+};
+exports.Col = Col;

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

@@ -0,0 +1,123 @@
+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;
+  prefixCls?: string;
+}
+
+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;
+  prefixCls?: string;
+  /**
+   * Auto wrap line
+   */
+  wrap?: boolean;
+}
+
+export declare const Row: React.ForwardRefExoticComponent<
+  RowProps & React.RefAttributes<HTMLDivElement>
+>;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ContentProps } from './types';
+export type { ContentProps } from './types';
+export declare const Content: ({ children, ...restContentProps }: ContentProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,40 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const { Content: AntContent } = antd_1.Layout;
+const Content = (_a) => {
+    var { children } = _a, restContentProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Content'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-content`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-content`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntContent, Object.assign({}, restContentProps), children));
+};
+exports.Content = Content;

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

@@ -0,0 +1,14 @@
+export type ContentProps = Omit<
+  AntContentProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+export type AntContentProps = AntContentBasicProps &
+  React.RefAttributes<HTMLElement>;
+
+interface AntContentBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  suffixCls?: string;
+  rootClassName?: string;
+  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

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { FooterProps } from './types';
+export type { FooterProps } from './types';
+export declare const Footer: ({ children, ...restFooterProps }: FooterProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+require("./index.css");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const { Footer: AntFooter } = antd_1.Layout;
+const Footer = (_a) => {
+    var { children } = _a, restFooterProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Footer'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-footer`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-footer`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntFooter, Object.assign({}, restFooterProps), children));
+};
+exports.Footer = Footer;

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

@@ -0,0 +1,15 @@
+export type FooterProps = Omit<
+  AntFooterProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+export type AntFooterProps = AntFooterBasicProps &
+  React.RefAttributes<HTMLElement>;
+
+interface AntFooterBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  suffixCls?: string;
+  rootClassName?: string;
+  hasSider?: boolean;
+  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

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { HeaderProps } from './types';
+export type { HeaderProps } from './types';
+export declare const Header: ({ children, ...restHeaderProps }: HeaderProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+require("./index.css");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const { Header: AntHeader } = antd_1.Layout;
+const Header = (_a) => {
+    var { children } = _a, restHeaderProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Header'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-header`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-header`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntHeader, Object.assign({}, restHeaderProps), children));
+};
+exports.Header = Header;

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

@@ -0,0 +1,15 @@
+export type HeaderProps = Omit<
+  AntHeaderProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+export type AntHeaderProps = AntHeaderBasicProps &
+  React.RefAttributes<HTMLElement>;
+
+interface AntHeaderBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  suffixCls?: string;
+  rootClassName?: string;
+  hasSider?: boolean;
+  children: React.ReactNode;
+}

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

@@ -0,0 +1,28 @@
+.akinon-layout-sider {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  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;
+  justify-content: center;
+  align-items: center;
+  height: 3.5rem;
+  gap: 0.8rem;
+  /* border-bottom: 1px solid var(--color-gray-900); */
+}
+
+.akinon-layout-sider .logo-container.collapsed .brand-image {
+  display: none;
+}

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

@@ -0,0 +1,6 @@
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sider = void 0;
+require("./index.css");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const { Sider: AntSider } = antd_1.Layout;
+const Sider = (_a) => {
+    var { children, collapsed, iconUrl, brandImageUrl } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const layoutToken = (token as GlobalToken).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`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    let LogoContainer;
+    if (iconUrl && brandImageUrl) {
+        LogoContainer = (React.createElement("div", { className: `logo-container ${collapsed ? 'collapsed' : ''}` },
+            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),
+        LogoContainer,
+        children));
+};
+exports.Sider = Sider;