Update layout

src/layout/base/NitroLayoutBase.types.ts

@@ -1,7 +1,7 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
 
-export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 {
     overflow?: NitroLayoutOverflow;
     position?: NitroLayoutPosition;

src/layout/button-group/NitroLayoutButtonGroup.tsx

@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
+import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types';
+
+export const NitroLayoutButtonGroup: FC<NitroLayoutButtonGroupProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn-group';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}

src/layout/button-group/NitroLayoutButtonGroup.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base';
+
+export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps
+{
+
+}

src/layout/button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutButtonGroup';
+export * from './NitroLayoutButtonGroup.types';

src/layout/card/grid/NitroCardGridView.tsx

@@ -20,7 +20,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 
         if(columns && (columns >= 1))
         {
-            newStyle['grid-template-columns'] = 'unset';
+            newStyle.gridTemplateColumns = 'unset';
             newStyle['--bs-columns'] = columns.toString();
         }
 

src/layout/card/grid/item/NitroCardGridItemView.tsx

@@ -4,7 +4,7 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -38,7 +38,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 
     return (
         <div className={ getClassName } style={ getStyle } { ...rest }>
-            { (itemCount > 1) &&
+            { (itemCount > itemCountMinimum) &&
                 <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
             { (itemUniqueNumber > 0) && 
                 <div className="position-absolute unique-item-counter">

src/layout/card/grid/item/NitroCardGridItemView.types.ts

@@ -6,6 +6,7 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemColor?: string;
     itemActive?: boolean;
     itemCount?: number;
+    itemCountMinimum?: number;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
 }

src/layout/card/header/NitroCardHeaderView.tsx

@@ -17,7 +17,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     {
         return (
             <div className="container-fluid bg-light">
-                <div className="row nitro-card-header simple-header">
+                <div className="row nitro-card-header simple-header overflow-hidden">
                     <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
                         <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
@@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 
     return (
         <div className="drag-handler container-fluid bg-primary">
-            <div className="row nitro-card-header">
+            <div className="row nitro-card-header overflow-hidden">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-white text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>

src/layout/card/index.ts

@@ -5,4 +5,5 @@ export * from './grid';
 export * from './header';
 export * from './NitroCardView';
 export * from './NitroCardView.types';
+export * from './sub-header';
 export * from './tabs';

src/layout/card/sub-header/NitroCardSubHeaderView.tsx

@@ -0,0 +1,21 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../..';
+import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types';
+
+export const NitroCardSubHeaderView: FC<NitroCardSubHeaderViewProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'container-fluid bg-muted justify-content-center py-1';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return (
+        <NitroLayoutFlex className={ getClassName } { ...rest } />
+    );
+}

src/layout/card/sub-header/NitroCardSubHeaderView.types.ts

@@ -0,0 +1,6 @@
+import { NitroLayoutFlexProps } from '../../flex';
+
+export interface NitroCardSubHeaderViewProps extends NitroLayoutFlexProps
+{
+
+}

src/layout/card/sub-header/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroCardSubHeaderView';
+export * from './NitroCardSubHeaderView.types';

src/layout/common/NitroLayoutVariant.type.ts

@@ -1 +1 @@
-export type NitroLayoutVariant = 'primary' | 'success' | 'danger';
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary';

src/layout/grid/column/NitroLayoutGridColumn.tsx

@@ -4,16 +4,16 @@ import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
 
 export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
 {
-    const { className = '', size = 12, gap = 3, ...rest } = props;
+    const { className = '', size = 12, gap = 2, overflow = 'auto', ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
         let newClassName = `g-col-${ size }`;
 
-        if(className && className.length) newClassName += ' ' + className;
+        if(className && className.length) newClassName += ` ${ className }`;
 
         return newClassName;
     }, [ className, size ]);
 
-    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow={ overflow } { ...rest } />
 }

src/layout/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
+export * from './button-group';
 export * from './card';
 export * from './common';
 export * from './draggable-window';