@akinon/ui-layout 0.4.0 → 0.6.0

package/dist/esm/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/esm/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/esm/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/esm/Layout/Content/index.js

@@ -0,0 +1,36 @@
+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;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Content: AntContent } = AntLayout;
+export const Content = (_a) => {
+    var { children } = _a, restContentProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = 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));
+};

package/dist/esm/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/esm/Layout/Footer/index.css

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

package/dist/esm/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/esm/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/esm/Layout/Footer/index.js

@@ -0,0 +1,37 @@
+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;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Footer: AntFooter } = AntLayout;
+export const Footer = (_a) => {
+    var { children } = _a, restFooterProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = 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));
+};

package/dist/esm/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/esm/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/esm/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/esm/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/esm/Layout/Header/index.js

@@ -0,0 +1,37 @@
+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;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Header: AntHeader } = AntLayout;
+export const Header = (_a) => {
+    var { children } = _a, restHeaderProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = 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));
+};

package/dist/esm/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/esm/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/esm/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/esm/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/esm/Layout/Sider/index.js

@@ -0,0 +1,45 @@
+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;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Sider: AntSider } = AntLayout;
+export const Sider = (_a) => {
+    var { children, collapsed, iconUrl, brandImageUrl } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = 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));
+};

package/dist/esm/Layout/Sider/types.d.ts

@@ -0,0 +1,74 @@
+// TODO integrate with antd menu types
+export type LeftSiderItem = {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  children?: LeftSiderItem[];
+  disabled?: boolean;
+};
+
+export type SiderProps = Omit<AntSiderProps, 'prefixCls' | 'style' | 'styles'>;
+
+export interface AntSiderProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  /**
+   * Whether can be collapsed
+   */
+  collapsible?: boolean;
+  /**
+   * To set the current status
+   */
+  collapsed?: boolean;
+  /**
+   * To set the initial status
+   */
+  defaultCollapsed?: boolean;
+  /**
+   * Reverse direction of arrow, for a sider that expands from the right
+   */
+  reverseArrow?: boolean;
+  /**
+   * The callback function, executed by clicking the trigger or activating the responsive layout
+   */
+  onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+  /**
+   * To customize the styles of the special trigger that appears when <code>collapsedWidth</code> is 0
+   */
+  zeroWidthTriggerStyle?: React.CSSProperties;
+  /**
+   * Specify the customized trigger, set to null to hide the trigger
+   */
+  trigger?: React.ReactNode;
+  /**
+   * Width of the sidebar
+   */
+  width?: number | string;
+  /**
+   * Width of the collapsed sidebar, by setting to 0 a special trigger will appear
+   */
+  collapsedWidth?: number | string;
+  /**
+   * Breakpoints of the responsive layout
+   */
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /**
+   * Color theme of the sidebar
+   */
+  theme?: SiderTheme;
+  /**
+   * The callback function, executed when breakpoints changed
+   */
+  onBreakpoint?: (broken: boolean) => void;
+  iconUrl?: string;
+  brandImageUrl?: string;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}
+
+type SiderTheme = 'light' | 'dark';
+
+type CollapseType = 'clickTrigger' | 'responsive';

package/dist/esm/Layout/index.d.ts

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

package/dist/esm/Layout/index.d.ts.map

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

package/dist/esm/Layout/index.js

@@ -0,0 +1,35 @@
+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;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+export const Layout = (_a) => {
+    var { children } = _a, restLayoutProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Layout'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-layout`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-layout`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntLayout, Object.assign({}, restLayoutProps), children));
+};

package/dist/esm/Layout/types.d.ts

@@ -0,0 +1,22 @@
+export type LayoutProps = Omit<
+  AntLayoutProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+export interface AntLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  suffixCls?: string;
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+  /**
+   * Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
+   */
+  hasSider?: boolean;
+  children: React.ReactNode;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

package/dist/esm/NavCard/index.css

@@ -0,0 +1,83 @@
+.nav-card {
+  background-color: var(--color-neutral-50);
+  border-radius: 5.6px;
+  display: flex;
+}
+
+.nav-card__icon {
+  background-color: var(--color-gray-500);
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  color: var(--color-neutral-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 180px;
+}
+
+/* Overriding SVG so you will not have to pass size prop to Icon component. */
+.nav-card__icon svg {
+  width: 28px !important;
+  height: 28px !important;
+}
+
+/* Change bg color based on the class set on .nav-card */
+.nav-card-akinon .nav-card__icon {
+  background-color: var(--color-akinon-500);
+}
+
+.nav-card-azure .nav-card__icon {
+  background-color: var(--color-azure-500);
+}
+
+.nav-card-blue .nav-card__icon {
+  background-color: var(--color-blue-500);
+}
+
+.nav-card-orange .nav-card__icon {
+  background-color: var(--color-orange-500);
+}
+
+.nav-card-red .nav-card__icon {
+  background-color: var(--color-red-500);
+}
+
+.nav-card-green .nav-card__icon {
+  background-color: var(--color-green-500);
+}
+
+.nav-card-pink .nav-card__icon {
+  background-color: var(--color-pink-500);
+}
+
+.nav-card-purple .nav-card__icon {
+  background-color: var(--color-purple-500);
+}
+
+.nav-card__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 24px 16px;
+  width: 100%;
+}
+
+.nav-card__title {
+  color: var(--color-ebonyClay-900);
+  font-size: calc(var(--token-fontSize) * 1.28571428571px);
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.nav-card__description {
+  color: var(--color-gray-400);
+  font-weight: 400;
+  margin: 8px 0 0;
+  padding: 0;
+  line-height: 1.3;
+  text-decoration: none;
+}

package/dist/esm/NavCard/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { NavCardProps } from './types';
+export type { NavCardProps } from './types';
+export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/NavCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}

package/dist/esm/{nav-card.js → NavCard/index.js}

@@ -1,6 +1,6 @@
-import './nav-card.css';
+import './index.css';
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 export const NavCard = ({ title, description, icon, variant, className }) => {
     const variantClass = variant ? `nav-card-${variant}` : '';
     return (React.createElement("div", { className: clsx('nav-card', variantClass, className) },