[refactor] upgrade List Group, Button Group & Toggle Button components

[optimize] Module folder structure

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.26",
+    "version": "2.0.0-beta.28",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -26,7 +26,7 @@
     "dependencies": {
         "@swc/helpers": "^0.5.11",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.1.7",
+        "dom-renderer": "^2.1.8",
         "mobx": "^6.12.4",
         "regenerator-runtime": "^0.14.1",
         "web-cell": "^3.0.0-rc.16",
@@ -64,10 +64,10 @@
         "open-cli": "^8.0.0",
         "parcel": "~2.12.0",
         "prettier": "^3.3.2",
-        "ts-jest": "^29.1.4",
+        "ts-jest": "^29.1.5",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.13",
-        "typedoc-plugin-mdn-links": "^3.1.29",
+        "typedoc-plugin-mdn-links": "^3.1.30",
         "typescript": "~5.4.5"
     },
     "scripts": {

source/CountDown.tsx → source/Calendar/CountDown.tsx

@@ -1,7 +1,7 @@
 import { computed, observable } from 'mobx';
 import { WebCell, attribute, component, observer } from 'web-cell';
 
-import { Status } from './type';
+import { Status } from '../type';
 
 interface TimeUnit {
     scale: number;
@@ -101,7 +101,7 @@ export class CountDown extends HTMLElement implements WebCell<CountDownProps> {
             <ol className="list-inline text-white">
                 {this.timeSections.map(({ value, label }, index) => (
                     <li
-                        key={value}
+                        key={label}
                         className={`list-inline-item fs-1 bg-${colors[index]} d-inline-flex align-items-center justify-content-center rounded-4`}
                         style={{ width: '5.5rem', height: '5.5rem' }}
                     >

source/MonthCalendar.tsx → source/Calendar/MonthCalendar.tsx

@@ -10,9 +10,9 @@ import {
     splitArray
 } from 'web-utility';
 
-import { Badge } from './Reminder';
-import { Button, ButtonProps } from './Button';
-import { Table, TableProps } from './Content';
+import { Badge } from '../Reminder';
+import { Button, ButtonProps } from '../Form/Button';
+import { Table, TableProps } from '../Content';
 
 export interface DateData {
     date: TimeData;

source/Content/Accordion.tsx

@@ -10,7 +10,7 @@ import {
     reaction
 } from 'web-cell';
 
-import { CollapseProps, Collapse } from './Collapse';
+import { CollapseProps, Collapse } from '../Layout/Collapse';
 
 export const AccordionItem: FC<WebCellProps<HTMLDivElement>> = ({
     className = '',

source/Content/Card.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 
-import { Image, ImageProps } from '../Image';
+import { Image, ImageProps } from '../Media/Image';
 import { TextColor, PositionY } from '../type';
 
 export interface CardProps extends WebCellProps<HTMLDivElement> {

source/Content/Jumbotron.tsx

@@ -3,7 +3,7 @@ import { JsxChildren } from 'dom-renderer';
 import { FC } from 'web-cell';
 
 import { BackgroundColor } from '../type';
-import { Container, ContainerProps } from '../Grid';
+import { Container, ContainerProps } from '../Layout/Grid';
 
 export interface JumbotronProps
     extends Omit<ContainerProps, 'title'>,

source/Content/ListGroup.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Size, Status, Theme } from '../type';
+
+export interface ListGroupProps extends WebCellProps<HTMLDivElement> {
+    variant?: 'flush';
+    numbered?: boolean;
+    horizontal?: true | Size;
+}
+
+export const ListGroup: FC<ListGroupProps> = ({
+    className = '',
+    variant,
+    numbered,
+    horizontal,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'list-group',
+            variant && `list-group-${variant}`,
+            numbered && `list-group-numbered`,
+            horizontal &&
+                `list-group-horizontal${horizontal === true ? '' : `-${horizontal}`}`,
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export interface ListGroupItemProps
+    extends WebCellProps<HTMLAnchorElement>,
+        Partial<Record<'active' | 'disabled', boolean>> {
+    variant?: keyof typeof Status | keyof typeof Theme;
+}
+
+export const ListGroupItem: FC<ListGroupItemProps> = ({
+    className = '',
+    variant,
+    href,
+    active,
+    disabled,
+    children,
+    ...props
+}) => (
+    <a
+        className={classNames(
+            'list-group-item',
+            variant && `list-group-item-${variant}`,
+            href && 'list-group-item-action',
+            { active, disabled },
+            disabled && 'pe-none',
+            className
+        )}
+        ariaCurrent={active ? 'true' : undefined}
+        ariaDisabled={disabled ? 'true' : undefined}
+        {...{ href, ...props }}
+    >
+        {children}
+    </a>
+);

source/Content/Tabs.tsx

@@ -9,7 +9,7 @@ import {
     reaction
 } from 'web-cell';
 
-import { Nav, NavLink } from '../Nav';
+import { Nav, NavLink } from '../Navigator/Nav';
 
 export interface TabProps {
     caption: JsxChildren;

source/Content/index.ts

@@ -1,8 +1,7 @@
+export * from './ListGroup';
 export * from './Table';
 export * from './Jumbotron';
 export * from './Card';
 export * from './MediaObject';
-export * from './ScrollBoundary';
-export * from './Collapse';
 export * from './Accordion';
 export * from './Tabs';

source/Button.tsx → source/Form/Button.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import { JsxChildren, VNode } from 'dom-renderer';
 import { FC, WebCellProps } from 'web-cell';
+import { uniqueID } from 'web-utility';
 
-import { FormControlProps } from './Form';
-import { Icon, IconProps } from './Reminder';
-import { TextColor } from './type';
+import { FormCheckProps, FormControlProps } from './Form';
+import { Icon, IconProps } from '../Reminder';
+import { TextColor } from '../type';
 
 export interface ButtonProps
     extends WebCellProps<HTMLButtonElement>,
@@ -82,3 +83,25 @@ export const CloseButton: FC<WebCellProps<HTMLButtonElement>> = ({
         {...props}
     />
 );
+
+export interface ToggleButtonProps
+    extends WebCellProps<HTMLInputElement>,
+        Pick<ButtonProps, 'variant'> {
+    type: Exclude<FormCheckProps['type'], 'switch'>;
+}
+
+export const ToggleButton: FC<ToggleButtonProps> = ({
+    className = '',
+    id = uniqueID(),
+    variant = 'primary',
+    children,
+    ...props
+}) => (
+    <>
+        <input className="btn-check" id={id} autocomplete="off" {...props} />
+
+        <label className={`btn btn-${variant} ${className}`} htmlFor={id}>
+            {children}
+        </label>
+    </>
+);

source/Form/ButtonGroup.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+export interface ButtonGroupProps extends WebCellProps<HTMLDivElement> {
+    vertical?: boolean;
+    size?: 'sm' | 'lg';
+}
+
+export const ButtonGroup: FC<ButtonGroupProps> = ({
+    className = '',
+    vertical,
+    size,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            `btn-group${vertical ? '-vertical' : ''}`,
+            size && `btn-group-${size}`,
+            className
+        )}
+        role="group"
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export type ButtonToolbarProps = WebCellProps<HTMLDivElement>;
+
+export const ButtonToolbar: FC<ButtonToolbarProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`btn-toolbar ${className}`} role="toolbar" {...props}>
+        {children}
+    </div>
+);

source/Form.tsx → source/Form/Form.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { VNode } from 'dom-renderer';
+import { JsxChildren } from 'dom-renderer';
 import { FC, WebCellProps } from 'web-cell';
 import { uniqueID } from 'web-utility';
 
@@ -108,7 +108,7 @@ export interface FormCheckProps extends WebCellProps<HTMLInputElement> {
     type: 'radio' | 'checkbox' | 'switch';
     inline?: boolean;
     reverse?: boolean;
-    label?: VNode;
+    label?: JsxChildren;
 }
 
 export const FormCheck: FC<FormCheckProps> = ({

source/Grid.tsx → source/Layout/Grid.tsx

@@ -1,7 +1,7 @@
 import { JsxProps } from 'dom-renderer';
 import { FC } from 'web-cell';
 
-import { Size } from './type';
+import { Size } from '../type';
 
 export interface ContainerProps extends JsxProps<HTMLDivElement> {
     fluid?: boolean | Size;

source/Offcanvas.tsx → source/Layout/Offcanvas.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 import { uniqueID } from 'web-utility';
 
-import { CloseButton } from './Button';
+import { CloseButton } from '../Form/Button';
 
 export const OffcanvasTitle: FC<WebCellProps<HTMLHeadingElement>> = ({
     className = '',

source/Layout/index.ts

@@ -0,0 +1,5 @@
+export * from './Ratio';
+export * from './Grid';
+export * from './ScrollBoundary';
+export * from './Collapse';
+export * from './Offcanvas';

v1/Media/index.ts → source/Media/index.ts

@@ -1,3 +1,2 @@
 export * from './Image';
-export * from './Embed';
 export * from './Carousel';