Allow using classname and class

package.json

@@ -1,6 +1,6 @@
 {
    "name": "@hibas123/theme-preact",
-   "version": "1.0.4",
+   "version": "1.0.5",
    "description": "",
    "main": "out/index.js",
    "dependencies": {

src/Button.tsx

@@ -20,7 +20,7 @@ export default function Button({
 }: IButtonProps) {
    let cl = "ht-btn";
 
-   if (className) cl += " " + (className || "");
+   if (className) cl += " " + (className || "") + (props.class || "");
 
    switch (format) {
       case ButtonFormats.DEFAULT:

src/Card.tsx

@@ -5,7 +5,10 @@ export default function Card({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-card " + (className || "")} {...props}>
+      <div
+         className={"ht-card " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );

src/Container.tsx

@@ -5,7 +5,10 @@ export default function Container({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-container " + (className || "")} {...props}>
+      <div
+         className={"ht-container " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );

src/Fab.tsx

@@ -9,7 +9,10 @@ export default function Fab({
    let cl = "ht-fab " + (alignLeft ? "ht-fab-left " : "");
 
    return (
-      <button className={cl + (className || "")} {...props}>
+      <button
+         className={cl + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </button>
    );

src/Header.tsx

@@ -8,7 +8,10 @@ export default function Header({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <header className={"ht-header " + (className || "")} {...props}>
+      <header
+         className={"ht-header " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </header>
    );

src/IconButton.tsx

@@ -5,7 +5,12 @@ export default function IconButton({
    ...props
 }: JSX.HTMLAttributes<HTMLButtonElement>) {
    return (
-      <button className={"ht-btn ht-btn-icon " + (className || "")} {...props}>
+      <button
+         className={
+            "ht-btn ht-btn-icon " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </button>
    );

src/List.tsx

@@ -17,10 +17,8 @@ export default function List({
 
    if (divider) cl += "ht-list-divider ";
 
-   cl += className || "";
-
    return (
-      <ul className={cl} {...props}>
+      <ul className={cl + (className || "") + (props.class || "")} {...props}>
          {children}
       </ul>
    );

src/Modal.tsx

@@ -9,7 +9,10 @@ export function Modal({
    return (
       <div
          className={
-            "ht-modal " + (className || "") + (hidden ? "ht-modal-hidden" : "")
+            "ht-modal " +
+            (className || "") +
+            (props.class || "") +
+            (hidden ? "ht-modal-hidden" : "")
          }
          {...props}
       >
@@ -24,7 +27,10 @@ export function ModalTitle({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-title " + (className || "")} {...props}>
+      <div
+         className={"ht-modal-title " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );
@@ -36,7 +42,12 @@ export function ModalContent({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-content " + (className || "")} {...props}>
+      <div
+         className={
+            "ht-modal-content " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </div>
    );
@@ -48,7 +59,12 @@ export function ModalActions({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-action " + (className || "")} {...props}>
+      <div
+         className={
+            "ht-modal-action " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </div>
    );

src/Table.tsx

@@ -6,7 +6,10 @@ export default function Table({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-table " + (className || "")} {...props}>
+      <div
+         className={"ht-table " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );

src/Theme.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState, useMemo } from "preact/hooks";
 export enum ThemeModes {
    AUTO,
    LIGHT,
-   DARK
+   DARK,
 }
 
 export interface IThemeProps {
@@ -95,7 +95,7 @@ export default function Theme({ mode, children, ...colors }: IThemeProps) {
       colors.onPrimary,
       colors.onSecondary,
       colors.onError,
-      colors.onSuccess
+      colors.onSuccess,
    ]);
 
    return (