= (event) => {
+ const input = event.currentTarget as HTMLInputElement;
+ if (props.onInput) props.onInput(input.value, event);
+ };
+
+ return (
+
+
+ {props.icon &&
+ {options && (
+
+
+ {(option) =>
+
+ )}
+
+ );
+};
diff --git a/packages/solid/src/components/control/input/input.types.ts b/packages/solid/src/components/control/input/input.types.ts
new file mode 100644
index 00000000..b32a9c26
--- /dev/null
+++ b/packages/solid/src/components/control/input/input.types.ts
@@ -0,0 +1,80 @@
+import { ComponentProps } from '@src/main';
+import { ControlSize, InputType, SelectOption } from '@spuxx/browser-utils';
+import { DOMElement, JSX } from 'solid-js/jsx-runtime';
+
+/**
+ * The Input component properties.
+ */
+export interface InputProps extends ComponentProps> {
+ /**
+ * The input label.
+ */
+ label: string;
+ /**
+ * An optional icon to render as part of the label.
+ */
+ icon?: string;
+ /**
+ * The type of the input.
+ * @default 'text'
+ */
+ type?: InputType;
+ /**
+ * An optional list of options for the input. Will be rendered into a element that
+ * is linked to the input and will be used to provide suggestions as the user types.
+ */
+ options?: SelectOption[];
+ /**
+ * If true, validation will fail if the input value is not in the list of options.
+ * @default false
+ */
+ forceOption?: boolean;
+ /**
+ * The size of the input.
+ * @default undefined
+ */
+ size?: ControlSize;
+ /**
+ * The type of the input.
+ */
+ // type?: JSX.HTMLAttributes['min'];
+ /**
+ * The input variant.
+ * @default 'contained'
+ */
+ variant?: string;
+ /**
+ * Whether the input is required.
+ * @default false
+ */
+ required?: boolean;
+ /**
+ * Whether the input is disabled.
+ * @default false
+ */
+ disabled?: boolean;
+ /**
+ * Called when the input value changes.
+ * @param value The input value.
+ * @param event The input event.
+ */
+ onChange?: (
+ value: string,
+ event: Event & {
+ currentTarget: HTMLInputElement;
+ target: DOMElement;
+ },
+ ) => void;
+ /**
+ * Called when a character is being inserted or removed.
+ * @param value The input value.
+ * @param event The input event.
+ */
+ onInput?: (
+ value: string,
+ event: Event & {
+ currentTarget: HTMLInputElement;
+ target: DOMElement;
+ },
+ ) => void;
+}
diff --git a/packages/solid/src/components/layout/container/container.types.ts b/packages/solid/src/components/layout/container/container.types.ts
index 50d0bf9b..4599984c 100644
--- a/packages/solid/src/components/layout/container/container.types.ts
+++ b/packages/solid/src/components/layout/container/container.types.ts
@@ -1,11 +1,13 @@
import { BaseColor } from '@spuxx/browser-utils';
import { ComponentProps } from '@src/main';
-import { ParentProps } from 'solid-js';
+import { JSX, ParentProps } from 'solid-js';
/**
* The Container component's properties.
*/
-export interface ContainerProps extends ComponentProps, ParentProps {
+export interface ContainerProps
+ extends ComponentProps>,
+ ParentProps {
/**
* The tag to use for the container.
* @default 'div'
diff --git a/packages/solid/src/components/layout/divider/divider.types.ts b/packages/solid/src/components/layout/divider/divider.types.ts
index 19ebba24..6a8cc659 100644
--- a/packages/solid/src/components/layout/divider/divider.types.ts
+++ b/packages/solid/src/components/layout/divider/divider.types.ts
@@ -1,10 +1,11 @@
import { BaseColor, ContentColor } from '@spuxx/browser-utils';
import { ComponentProps } from '@src/main';
+import { JSX } from 'solid-js/jsx-runtime';
/**
* The Divider component's properties.
*/
-export interface DividerProps extends ComponentProps {
+export interface DividerProps extends ComponentProps> {
/**
* The color of the divider.
* @default 'text-subtle'
diff --git a/packages/solid/src/components/typography/heading/heading.types.ts b/packages/solid/src/components/typography/heading/heading.types.ts
index a21adaf8..da47407b 100644
--- a/packages/solid/src/components/typography/heading/heading.types.ts
+++ b/packages/solid/src/components/typography/heading/heading.types.ts
@@ -1,10 +1,12 @@
import { ComponentProps } from '@src/main';
-import { ParentProps } from 'solid-js';
+import { JSX, ParentProps } from 'solid-js';
/**
* The Heading component properties.
*/
-export interface HeadingProps extends ComponentProps, ParentProps {
+export interface HeadingProps
+ extends ComponentProps>,
+ ParentProps {
/**
* The level of the heading.
*/
diff --git a/packages/solid/src/main.ts b/packages/solid/src/main.ts
index 88ee4136..79e2c166 100644
--- a/packages/solid/src/main.ts
+++ b/packages/solid/src/main.ts
@@ -4,7 +4,8 @@
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
export * from './types/public';
-export * from './components/input/button';
+export * from './components/control/button';
+export * from './components/control/input';
export * from './components/layout/container';
export * from './components/layout/divider';
export * from './components/typography/heading';
diff --git a/packages/solid/src/modal/built-in/confirm.modal.tsx b/packages/solid/src/modal/built-in/confirm.modal.tsx
index 50979791..1a465d2c 100644
--- a/packages/solid/src/modal/built-in/confirm.modal.tsx
+++ b/packages/solid/src/modal/built-in/confirm.modal.tsx
@@ -3,7 +3,7 @@ import { ModalHeader } from '../template/modal-header.component';
import { ModalTemplate } from '../template/modal-template.component';
import { ModalBody } from '../template/modal-body.component';
import { ModalFooter } from '../template/modal-footer.component';
-import { Button } from '../../components/input/button';
+import { Button } from '../../components/control/button';
import { BaseColor, ContentColor } from '@spuxx/browser-utils';
import { Modal } from '../modal.service';
diff --git a/packages/solid/src/types/public/index.ts b/packages/solid/src/types/public/index.ts
index e84a80f5..3edf6262 100644
--- a/packages/solid/src/types/public/index.ts
+++ b/packages/solid/src/types/public/index.ts
@@ -5,7 +5,7 @@ import type * as CSS from 'csstype';
* A property interface for components to extend from. Includes some basic properties used
* by almost all components.
*/
-export interface ComponentProps {
+export interface ComponentProps> {
/**
* The component's class names.
*/
@@ -19,5 +19,5 @@ export interface ComponentProps {
/**
* The component's attributes.
*/
- attrs?: Omit, 'style'>;
+ attrs?: Omit;
}