@r2digisolutions/ui 0.14.1 → 0.15.1

package/dist/components/index.d.ts

@@ -14,4 +14,5 @@ import Button from './ui/Button/Button.svelte';
 import Heading from './ui/Heading/Heading.svelte';
 import Label from './ui/Label/Label.svelte';
 import Field from './ui/Field/Field.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, };
+import Input from './ui/Input/Input.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, Input };

package/dist/components/index.js

@@ -14,4 +14,5 @@ import Button from './ui/Button/Button.svelte';
 import Heading from './ui/Heading/Heading.svelte';
 import Label from './ui/Label/Label.svelte';
 import Field from './ui/Field/Field.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, };
+import Input from './ui/Input/Input.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, Input };

package/dist/components/ui/Input/Input.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { IFileInputProps, Props } from './type.js';
+
+	const { onchange, type = 'text', ...props }: Props = $props();
+</script>
+
+<input
+	{...props}
+	onchange={(e) => {
+		const value = e.currentTarget.value;
+
+		if (type === 'number') {
+			const parsed = value.trim() === '' ? null : Number(value);
+			(onchange as (value: number | null, e: Event) => void)?.(parsed, e);
+		} else if (type === 'file') {
+			const inputEl = e.currentTarget as HTMLInputElement;
+			const files = inputEl.files;
+
+			const fileValue = (props as IFileInputProps).multiple
+				? Array.from(files ?? [])
+				: (files?.[0] ?? null);
+
+			(onchange as (value: File | File[] | null, e: Event) => void)?.(fileValue, e);
+		} else {
+			(onchange as (value: string | null, e: Event) => void)?.(value || null, e);
+		}
+	}}
+	class="block w-full rounded-lg border border-gray-300 py-3 pr-3 pl-10 transition-colors focus:border-transparent focus:ring-2 focus:ring-purple-500"
+/>

package/dist/components/ui/Input/Input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './type.js';
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/ui/Input/type.d.ts

@@ -0,0 +1,67 @@
+import type { ClassValue } from "svelte/elements";
+export type Type = 'email' | 'password' | 'text' | 'tel' | 'number' | 'time' | 'url' | 'search' | 'date' | 'datetime-local' | 'color' | 'file';
+interface Base<TValue = unknown> {
+    autocomplete?: 'on' | 'off';
+    name?: string;
+    placeholder?: string;
+    class?: ClassValue;
+    required?: boolean;
+    readonly?: boolean;
+    autofocus?: boolean;
+    value?: TValue;
+    onchange?: (value: TValue, e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    onclick?: (e: MouseEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+}
+export interface ITextInputProps extends Base<string | null> {
+    type: 'text';
+    minlength?: number;
+    maxlength?: number;
+}
+export interface IUrlInputProps extends Base<string | null> {
+    type: 'url' | 'search';
+}
+export interface IEmailInputProps extends Base<string | null> {
+    type: 'email';
+}
+export interface IPasswordInputProps extends Base<string | null> {
+    type: 'password';
+}
+export interface INumberInputProps extends Base<number | null> {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface ITelInputProps extends Base<string | null> {
+    type: 'tel';
+}
+export interface ITimeInputProps extends Base<string | null> {
+    type: 'time';
+}
+export interface IFileInputProps extends Base<File | null> {
+    type: 'file';
+    accept?: string;
+    multiple?: boolean;
+}
+export interface IDateInputProps extends Base<string | null> {
+    type: 'date' | 'datetime-local';
+}
+export interface IColorInputProps extends Base<string | null> {
+    type: 'color';
+}
+export type Props = ITextInputProps | IUrlInputProps | IEmailInputProps | IPasswordInputProps | INumberInputProps | ITelInputProps | ITimeInputProps | IFileInputProps | IColorInputProps | IDateInputProps;
+export type InputTypeValueMap = {
+    text: string;
+    url: string;
+    search: string;
+    email: string;
+    password: string;
+    tel: number;
+    number: number;
+};
+export type ValueFromType<T extends keyof InputTypeValueMap> = InputTypeValueMap[T];
+export {};

package/dist/components/ui/Input/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Label/Label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Props } from './type';
+	import type { Props } from './type.js';
 
 	let { children, ...props }: Props = $props();
 </script>

package/dist/components/ui/Label/Label.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Props } from './type';
+import type { Props } from './type.js';
 declare const Label: import("svelte").Component<Props, {}, "">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.14.1",
+	"version": "0.15.1",
 	"private": false,
 	"packageManager": "bun@1.2.19",
 	"publishConfig": {