Fix some problems with class and className

package.json

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

src/Button.tsx

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

src/Card.tsx

@@ -1,14 +1,12 @@
 import { h, JSX } from "preact";
 export default function Card({
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div
+      <div className={"ht-card " + (className || "") + (c || "")} {...props}>
-         className={"ht-card " + (className || "") + (props.class || "")}
-         {...props}
-      >
          {children}
       </div>
    );

src/Container.tsx

@@ -2,11 +2,12 @@ import { h, JSX } from "preact";
 export default function Container({
    className,
    children,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={"ht-container " + (className || "") + (props.class || "")}
+         className={"ht-container " + (className || "") + (c || "")}
          {...props}
       >
          {children}

src/Fab.tsx

@@ -4,15 +4,15 @@ export default function Fab({
    className,
    children,
    alignLeft,
+   class: c,
    ...props
-}: JSX.HTMLAttributes<HTMLButtonElement> & { alignLeft: boolean }) {
+}: JSX.HTMLAttributes<HTMLButtonElement> & {
+   alignLeft: boolean;
+}) {
    let cl = "ht-fab " + (alignLeft ? "ht-fab-left " : "");
 
    return (
-      <button
+      <button className={cl + (className || "") + (c || "")} {...props}>
-         className={cl + (className || "") + (props.class || "")}
-         {...props}
-      >
          {children}
       </button>
    );

src/Header.tsx

@@ -5,11 +5,12 @@ import { h, JSX } from "preact";
 export default function Header({
    children,
    className,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
       <header
-         className={"ht-header " + (className || "") + (props.class || "")}
+         className={"ht-header " + (className || "") + (c || "")}
          {...props}
       >
          {children}

src/IconButton.tsx

@@ -2,13 +2,12 @@ import { h, JSX } from "preact";
 export default function IconButton({
    children,
    className,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLButtonElement>) {
    return (
       <button
-         className={
+         className={"ht-btn ht-btn-icon " + (className || "") + (c || "")}
-            "ht-btn ht-btn-icon " + (className || "") + (props.class || "")
-         }
          {...props}
       >
          {children}

src/Input.tsx

@@ -3,10 +3,11 @@ import { h, JSX } from "preact";
 export function Input({
    className,
    children,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLInputElement>) {
    return (
-      <input className={"ht-inp " + (className || "")} {...props}>
+      <input className={"ht-inp " + (className || "") + (c || "")} {...props}>
          {children}
       </input>
    );
@@ -15,10 +16,14 @@ export function Input({
 export function TextArea({
    className,
    children,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLTextAreaElement>) {
    return (
-      <textarea className={"ht-inp " + (className || "")} {...props}>
+      <textarea
+         className={"ht-inp " + (className || "") + (c || "")}
+         {...props}
+      >
          {children}
       </textarea>
    );
@@ -27,10 +32,14 @@ export function TextArea({
 export function InputGroup({
    className,
    children,
+   class: c,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-input-group " + (className || "")} {...props}>
+      <div
+         className={"ht-input-group " + (className || "") + (c || "")}
+         {...props}
+      >
          {children}
       </div>
    );
@@ -70,11 +79,12 @@ export function InputRadio({
 
 export function InputSelect({
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLSelectElement>) {
    return (
-      <select className={"ht-inp " + (className || "")} {...props}>
+      <select className={"ht-inp " + (className || "") + c} {...props}>
          {children}
       </select>
    );

src/List.tsx

@@ -9,6 +9,7 @@ export default function List({
    clickable,
    divider,
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLUListElement> & IListProps) {
@@ -18,7 +19,7 @@ export default function List({
    if (divider) cl += "ht-list-divider ";
 
    return (
-      <ul className={cl + (className || "") + (props.class || "")} {...props}>
+      <ul className={cl + (className || "") + c} {...props}>
          {children}
       </ul>
    );

src/Modal.tsx

@@ -38,14 +38,13 @@ export function ModalTitle({
 
 export function ModalContent({
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={
+         className={"ht-modal-content " + (className || "") + (c || "")}
-            "ht-modal-content " + (className || "") + (props.class || "")
-         }
          {...props}
       >
          {children}
@@ -55,14 +54,13 @@ export function ModalContent({
 
 export function ModalActions({
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
       <div
-         className={
+         className={"ht-modal-action " + (className || "") + (c || "")}
-            "ht-modal-action " + (className || "") + (props.class || "")
-         }
          {...props}
       >
          {children}

src/Table.tsx

@@ -2,14 +2,12 @@ import { h, JSX } from "preact";
 
 export default function Table({
    className,
+   class: c,
    children,
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div
+      <div className={"ht-table " + (className || "") + (c || "")} {...props}>
-         className={"ht-table " + (className || "") + (props.class || "")}
-         {...props}
-      >
          {children}
       </div>
    );

src/index.ts

@@ -1,18 +1,19 @@
 import "@hibas123/theme/out/prefix.css";
-import Button, { ButtonFormats, IButtonProps } from "./Button";
+import Theme, {
-import Card from "./Card";
+   IThemeProps,
+   ThemeModes,
+   IThemeContext,
+   ThemeContext,
+} from "./Theme";
 import Container from "./Container";
+import Button, { ButtonFormats, IButtonProps } from "./Button";
 import Fab from "./Fab";
+import Card from "./Card";
 import Header from "./Header";
 import IconButton from "./IconButton";
 import List from "./List";
+export { Modal, ModalActions, ModalContent, ModalTitle } from "./Modal";
 import Table from "./Table";
-import Theme, {
-   IThemeContext,
-   IThemeProps,
-   ThemeContext,
-   ThemeModes,
-} from "./Theme";
 
 export {
    IInputCheckboxProps,
@@ -24,11 +25,13 @@ export {
    InputSelect,
    TextArea,
 } from "./Input";
-export { Modal, ModalActions, ModalContent, ModalTitle } from "./Modal";
+
 export {
    Theme,
    IThemeProps,
    ThemeModes,
+   IThemeContext,
+   ThemeContext,
    Container,
    Button,
    ButtonFormats,
@@ -39,6 +42,4 @@ export {
    Header,
    List,
    Table,
-   IThemeContext,
-   ThemeContext,
 };