From f59032050e7e0bac7747da28ad5e9396dbd6fe13 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 18 Dec 2025 17:15:53 +0800
Subject: [PATCH] Updated components

---
 src/components/Box/Box.tsx           |  1 +
 src/components/Button/Button.tsx     | 16 ++++++++++------
 src/components/Combobox/Combobox.tsx |  2 +-
 src/components/Display/Display.tsx   |  3 ++-
 src/components/Input/Input.tsx       |  3 ++-
 src/components/Link/Link.tsx         |  6 +++---
 src/components/Modal/Modal.tsx       |  3 ++-
 src/components/Modal/ModalButton.tsx |  3 ++-
 src/components/Page/Page.tsx         |  2 +-
 src/components/Radio/Radio.tsx       |  5 +++--
 src/components/Row/Row.tsx           |  3 ++-
 src/components/Table/Table.tsx       |  2 +-
 12 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 49247fd..8acbdad 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -9,6 +9,7 @@ interface Props {
   padding?: string
   background?: string
   width?: string
+  class?: string
 }
 
 export default (props: Props) => {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 85b2826..7d4fe73 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,8 @@
+
 import './Button.sass'
-import { Show, Switch, Match, type JSXElement } from 'solid-js'
-import { A } from '@solidjs/router'
+import type { JSXElement } from 'solid-js'
 import { Row } from '../index'
+import { Show, Switch, Match } from 'solid-js/web'
 
 interface Props {
   label?: string
@@ -14,6 +15,9 @@ interface Props {
   width?: number
   wide?: boolean
   icon?: (props: { size?: number }) => JSXElement
+  children?: JSXElement
+  background?: string
+  color?: string
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -37,24 +41,24 @@ export default (props: Props) => {
       <Show when={props.to}>
         <Switch>
           <Match when={props.design}>
-            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
+            <a href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 <Show when={props.icon}>
                   <span>{Icon && <Icon size={24} />}</span>
                 </Show>
                 {props.label || 'Click Me!'}
               </button>
-            </A>
+            </a>
           </Match>
           <Match when={!props.design}>
-            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
+            <a href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 <Show when={props.icon}>
                   <span>{Icon && <Icon size={24} />}</span>
                 </Show>
                 {props.label || 'Click Me!'}
               </button>
-            </A>
+            </a>
           </Match>
         </Switch>
       </Show>
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index cb5fcc5..3b75ef8 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -20,7 +20,7 @@ export default (props: Props) => {
         placeholder={props.placeholder}
         value={props.value}
         onChange={props.onChange}
-        itemComponent={(props) => (
+        itemComponent={(props: any) => (
           <Combobox.Item item={props.item} class="combobox__item">
             <Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
             <Combobox.ItemIndicator class="combobox__item-indicator">
diff --git a/src/components/Display/Display.tsx b/src/components/Display/Display.tsx
index 162b8af..bee5a49 100644
--- a/src/components/Display/Display.tsx
+++ b/src/components/Display/Display.tsx
@@ -1,5 +1,6 @@
 import './Display.sass'
-import { type JSXElement, Switch, Match } from 'solid-js'
+import { Switch, Match } from 'solid-js/web'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 139823f..823699c 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,6 +1,7 @@
 import './Input.sass'
 import { TextField } from '@kobalte/core/text-field'
-import { Show, type Setter } from 'solid-js'
+import { Show } from 'solid-js/web'
+import type { Setter } from 'solid-js'
 
 interface Props {
   label?: string
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index e191f7a..7674b35 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,5 +1,5 @@
 import './Link.sass'
-import { A } from '@solidjs/router'
+// import { A } from '@solidjs/router'
 
 interface Props {
   to: string
@@ -10,9 +10,9 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <A href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : ''}>
+      <a href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : ''}>
         {props.children}
-      </A>
+      </a>
     </>
   )
 }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index c91b46c..9abb281 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,5 +1,6 @@
 import './Modal.sass'
-import { type JSXElement, Show } from 'solid-js'
+import type { JSXElement } from 'solid-js'
+import { Show } from 'solid-js/web'
 
 interface Props {
   children: JSXElement
diff --git a/src/components/Modal/ModalButton.tsx b/src/components/Modal/ModalButton.tsx
index ac5ff10..f4622be 100644
--- a/src/components/Modal/ModalButton.tsx
+++ b/src/components/Modal/ModalButton.tsx
@@ -1,5 +1,6 @@
 import './Modal.sass'
-import { type JSXElement, Show, createSignal } from 'solid-js'
+import { type JSXElement, createSignal } from 'solid-js'
+import { Show } from 'solid-js/web'
 import Button from '../Button/Button'
 
 interface Props {
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 789fe9e..13e1653 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,5 +1,5 @@
 import './Page.sass'
-import { Show } from 'solid-js'
+import { Show } from 'solid-js/web'
 
 interface Props {
   children?: any
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 4ff27c2..40b7de9 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,6 +1,7 @@
 import './Radio.sass'
 import { RadioGroup } from '@kobalte/core/radio-group'
-import { type Setter, For, Show } from 'solid-js'
+import { For, Show } from 'solid-js/web'
+import type { Setter } from 'solid-js'
 
 interface Props {
   label?: string
@@ -19,7 +20,7 @@ export default (props: Props) => {
 
         <div class="radio-group__items" role="presentation" style={`gap: ${props.gap || 1}rem`}>
           <For each={props.data}>
-            {(item) => (
+            {(item: any) => (
               <RadioGroup.Item value={item} class="radio">
                 <RadioGroup.ItemInput class="radio__input" />
                 <RadioGroup.ItemControl class="radio__control">
diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
index cf33ba4..308e8ff 100644
--- a/src/components/Row/Row.tsx
+++ b/src/components/Row/Row.tsx
@@ -1,5 +1,6 @@
 import './Row.sass'
-import { Show, type JSXElement } from 'solid-js'
+import { Show } from 'solid-js/web'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 3d208d0..c7abe66 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -55,7 +55,7 @@ export default () => {
           </tr>
         </thead>
         <tbody>
-          {updatedList().map((item) => (
+          {updatedList().map((item: any) => (
             <tr>
               <td>{item.slice(0, 1)}</td>
             </tr>