@akinon/ui-layout 0.5.0 → 0.6.0

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/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/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/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/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/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/cjs/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/cjs/NavCard/index.css

@@ -13,45 +13,45 @@
   align-items: center;
   justify-content: center;
   width: 180px;
+}
 
-  /* Overriding SVG so you will not have to pass size prop to Icon component. */
-  svg {
-    width: 28px !important;
-    height: 28px !important;
-  }
+/* 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 */
-  &:is(.nav-card-akinon *) {
-    background-color: var(--color-akinon-500);
-  }
+/* Change bg color based on the class set on .nav-card */
+.nav-card-akinon .nav-card__icon {
+  background-color: var(--color-akinon-500);
+}
 
-  &:is(.nav-card-azure *) {
-    background-color: var(--color-azure-500);
-  }
+.nav-card-azure .nav-card__icon {
+  background-color: var(--color-azure-500);
+}
 
-  &:is(.nav-card-blue *) {
-    background-color: var(--color-blue-500);
-  }
+.nav-card-blue .nav-card__icon {
+  background-color: var(--color-blue-500);
+}
 
-  &:is(.nav-card-orange *) {
-    background-color: var(--color-orange-500);
-  }
+.nav-card-orange .nav-card__icon {
+  background-color: var(--color-orange-500);
+}
 
-  &:is(.nav-card-red *) {
-    background-color: var(--color-red-500);
-  }
+.nav-card-red .nav-card__icon {
+  background-color: var(--color-red-500);
+}
 
-  &:is(.nav-card-green *) {
-    background-color: var(--color-green-500);
-  }
+.nav-card-green .nav-card__icon {
+  background-color: var(--color-green-500);
+}
 
-  &:is(.nav-card-pink *) {
-    background-color: var(--color-pink-500);
-  }
+.nav-card-pink .nav-card__icon {
+  background-color: var(--color-pink-500);
+}
 
-  &:is(.nav-card-purple *) {
-    background-color: var(--color-purple-500);
-  }
+.nav-card-purple .nav-card__icon {
+  background-color: var(--color-purple-500);
 }
 
 .nav-card__content {

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

@@ -0,0 +1,32 @@
+export type NavCardColorVariant =
+  | 'akinon'
+  | 'azure'
+  | 'blue'
+  | 'orange'
+  | 'red'
+  | 'green'
+  | 'pink'
+  | 'purple';
+
+export interface NavCardProps {
+  /**
+   * The title of the NavCard.
+   */
+  title: string;
+  /**
+   * The description of the NavCard.
+   */
+  description: string;
+  /**
+   * The icon of the NavCard.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The color variant of the NavCard.
+   */
+  variant?: NavCardColorVariant;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

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

@@ -0,0 +1,3 @@
+export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}

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

@@ -0,0 +1,18 @@
+export interface PageHeadingProps {
+  /**
+   * The title of the PageHeading.
+   */
+  title: string;
+  /**
+   * The description of the PageHeading.
+   */
+  description?: string;
+  /**
+   * The action items of the PageHeading.
+   */
+  actions?: ReactNode;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,12 @@
+import { Layout } from './Layout';
+import { Content } from './Layout/Content';
+import { Footer } from './Layout/Footer';
+import { Header } from './Layout/Header';
+import { Sider } from './Layout/Sider';
+
+export type LayoutType = typeof Layout & {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Content: typeof Content;
+  Sider: typeof Sider;
+};

package/dist/esm/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/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/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/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/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/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/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

@@ -13,45 +13,45 @@
   align-items: center;
   justify-content: center;
   width: 180px;
+}
 
-  /* Overriding SVG so you will not have to pass size prop to Icon component. */
-  svg {
-    width: 28px !important;
-    height: 28px !important;
-  }
+/* 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 */
-  &:is(.nav-card-akinon *) {
-    background-color: var(--color-akinon-500);
-  }
+/* Change bg color based on the class set on .nav-card */
+.nav-card-akinon .nav-card__icon {
+  background-color: var(--color-akinon-500);
+}
 
-  &:is(.nav-card-azure *) {
-    background-color: var(--color-azure-500);
-  }
+.nav-card-azure .nav-card__icon {
+  background-color: var(--color-azure-500);
+}
 
-  &:is(.nav-card-blue *) {
-    background-color: var(--color-blue-500);
-  }
+.nav-card-blue .nav-card__icon {
+  background-color: var(--color-blue-500);
+}
 
-  &:is(.nav-card-orange *) {
-    background-color: var(--color-orange-500);
-  }
+.nav-card-orange .nav-card__icon {
+  background-color: var(--color-orange-500);
+}
 
-  &:is(.nav-card-red *) {
-    background-color: var(--color-red-500);
-  }
+.nav-card-red .nav-card__icon {
+  background-color: var(--color-red-500);
+}
 
-  &:is(.nav-card-green *) {
-    background-color: var(--color-green-500);
-  }
+.nav-card-green .nav-card__icon {
+  background-color: var(--color-green-500);
+}
 
-  &:is(.nav-card-pink *) {
-    background-color: var(--color-pink-500);
-  }
+.nav-card-pink .nav-card__icon {
+  background-color: var(--color-pink-500);
+}
 
-  &:is(.nav-card-purple *) {
-    background-color: var(--color-purple-500);
-  }
+.nav-card-purple .nav-card__icon {
+  background-color: var(--color-purple-500);
 }
 
 .nav-card__content {

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

@@ -0,0 +1,32 @@
+export type NavCardColorVariant =
+  | 'akinon'
+  | 'azure'
+  | 'blue'
+  | 'orange'
+  | 'red'
+  | 'green'
+  | 'pink'
+  | 'purple';
+
+export interface NavCardProps {
+  /**
+   * The title of the NavCard.
+   */
+  title: string;
+  /**
+   * The description of the NavCard.
+   */
+  description: string;
+  /**
+   * The icon of the NavCard.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The color variant of the NavCard.
+   */
+  variant?: NavCardColorVariant;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

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

@@ -0,0 +1,3 @@
+export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}

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

@@ -0,0 +1,18 @@
+export interface PageHeadingProps {
+  /**
+   * The title of the PageHeading.
+   */
+  title: string;
+  /**
+   * The description of the PageHeading.
+   */
+  description?: string;
+  /**
+   * The action items of the PageHeading.
+   */
+  actions?: ReactNode;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,12 @@
+import { Layout } from './Layout';
+import { Content } from './Layout/Content';
+import { Footer } from './Layout/Footer';
+import { Header } from './Layout/Header';
+import { Sider } from './Layout/Sider';
+
+export type LayoutType = typeof Layout & {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Content: typeof Content;
+  Sider: typeof Sider;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-layout",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -17,8 +17,8 @@
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.3.0",
-    "@akinon/ui-theme": "0.6.0"
+    "@akinon/typescript-config": "0.4.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,7 +38,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
     "typecheck": "tsc --noEmit"
   }