@torpor/ui 0.3.2 → 0.3.4

package/src/Drawer/DrawerOverlay.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { disableScroll } from "../mount/disableScroll";
 import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
 
 interface DrawerOverlayProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -27,7 +30,8 @@ export default function DrawerOverlay($props: DrawerOverlayProps | undefined) {
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-drawer-overlay ${$props?.class ?? ""}`.trim()}
+				class={["torp-drawer-overlay", $props?.class]}
+				{$props?.style}
 				tabindex="-1"
 				onmount={(el) => disableScroll(el)}
 			>

package/src/Drawer/DrawerTrigger.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
 
 interface DrawerTriggerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -26,7 +29,8 @@ export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
 		<button
 			type="button"
 			{$props?.id}
-			class={`torp-drawer-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-drawer-trigger", $props?.class]}
+			{$props?.style}
 			onclick={handleClick}
 		>
 			<slot />

package/src/Form/CheckBox.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface CheckBoxProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The name of the checkbox's form data field */
 	name?: string,
 	/** Whether the checkbox is checked */

package/src/Form/Field.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	FormContextName,
 	FieldContextName,
@@ -10,8 +11,10 @@ import { StandardSchemaV1 } from "./StandardSchemaV1"
 interface FieldProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The name of the data that this field contains */
 	name: string,
 	/** The data value that this field is bound to */
@@ -82,7 +85,8 @@ export default function Field($props: FieldProps) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-field ${$props?.class ?? ""}`.trim()}
+			class={["torp-field", $props?.class]}
+			{$props?.style}
 			data-valid={$state.valid ? "valid" : "invalid"}
 		>
 			<slot />

package/src/Form/File.torp

@@ -1,17 +1,18 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface FileProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The name of the input's form data field */
 	name?: string,
 	/** The type of files that this input accepts e.g. `image/*` */
-	accepts?: string,
-	/** The data value that this field is bound to */
-	value?: any,
+	accept?: string,
 	/** Text to display when the input value is empty */
 	placeholder?: string,
 	/** Whether the input should be readonly */
@@ -51,19 +52,13 @@ export default function File($props: FileProps | undefined) {
 	// Use the FieldContext's state, or create a new one
 	let $state = fieldContext?.state ?? $watch({
 		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
+		// You can't use value with a file input
+		value: null,
 		errors: {} as Record<string, string>,
 		valid: false,
 		message: "",
 	});
 
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
 	// Set the input ID now that we know it and it will get linked with the associated label
 	$state.inputId = $props?.id ?? defaultId;
 
@@ -89,10 +84,11 @@ export default function File($props: FileProps | undefined) {
 	@render {
 		<input
 			id={$props?.id ?? defaultId}
-			class={`torp-file ${$props?.class ?? ""}`.trim()}
+			class={["torp-file", $props?.class]}
+			{$props?.style}
 			type="file"
 			{name}
-			&value={$state.value}
+			{$props?.accept}
 			{$props?.placeholder}
 			{$props?.readonly}
 			{$props?.maxlength}

package/src/Form/Form.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { FormContextName, type ValidationIssue, type FormContext } from "./FormTypes";
 import { StandardSchemaV1 } from "./StandardSchemaV1"
 
 interface FormProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The data to display in the form */
 	data?: any,
 	/** Where to post the form's data **/
@@ -129,7 +132,8 @@ export default function Form($props: FormProps | undefined) {
 	@render {
 		<form
 			{$props?.id}
-			class={`torp-form ${$props?.class ?? ""}`.trim()}
+			class={["torp-form", $props?.class]}
+			{$props?.style}
 			method={$props?.method ?? "POST"}
 			enctype={$props?.enctype ?? ($state.hasFile ? "multipart/form-data" : undefined)}
 			onsubmit={handleSubmit}

package/src/Form/Hidden.torp

@@ -13,7 +13,7 @@ interface HiddenProps {
 /**
  * A standard input in a form.
  */
-export default function Input($props: HiddenProps | undefined) {
+export default function Hidden($props: HiddenProps | undefined) {
 	@render {
 		<input
 			{$props?.id}

package/src/Form/Input.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface InputProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The input type */
 	type?: string, // TODO: "text" | "number" | "password" | "email" | "url" | "tel",
 	/** The name of the input's form data field */
@@ -90,7 +93,8 @@ export default function Input($props: InputProps | undefined) {
 	@render {
 		<input
 			id={$props?.id ?? defaultId}
-			class={`torp-input ${$props?.class ?? ""}`.trim()}
+			class={["torp-input", $props?.class]}
+			{$props?.style}
 			{type}
 			{name}
 			&value={$state.value}

package/src/Form/Label.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { FieldContextName, type FieldContext } from "./FormTypes";
 
 interface LabelProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -21,7 +24,8 @@ export default function Label($props: LabelProps | undefined) {
 	@render {
 		<label
 			{$props?.id}
-			class={`torp-label ${$props?.class ?? ""}`.trim()}
+			class={["torp-label", $props?.class]}
+			{$props?.style}
 			for={$state.inputId}
 			data-valid={$state.valid ? "valid" : "invalid"}
 		>

package/src/Form/Message.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { FieldContextName, type FieldContext } from "./FormTypes";
 
 interface MessageProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -23,7 +26,8 @@ export default function Message($props: MessageProps | undefined) {
 		@if ($state.message) {
 			<div 
 				{$props?.id}
-				class={`torp-message ${$props?.class ?? ""}`.trim()}
+				class={["torp-message", $props?.class]}
+				{$props?.style}
 				data-valid={$state.valid ? "valid" : "invalid"}
 			>
 				<slot name="message">

package/src/Form/Option.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface OptionProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The data value that this option has */
 	value?: any,
 };
@@ -17,8 +20,9 @@ export default function Option($props: OptionProps | undefined) {
 	@render {
 		<option
 			{$props?.id}
-			class={`torp-option ${$props?.class ?? ""}`.trim()}
-			&value={$state.value}
+			class={["torp-option", $props?.class]}
+			{$props?.style}
+			&value={$props.value}
 		/>
 	}
 }

package/src/Form/Select.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface SelectProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The name of the input's form data field */
 	name?: string,
 	/** The data value that this field is bound to */
@@ -80,7 +83,8 @@ export default function Select($props: SelectProps | undefined) {
 	@render {
 		<select
 			id={$props?.id ?? defaultId}
-			class={`torp-select ${$props?.class ?? ""}`.trim()}
+			class={["torp-select", $props?.class]}
+			{$props?.style}
 			{name}
 			&value={$state.value}
 			{$props?.placeholder}

package/src/Form/TextArea.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
 
 interface TextAreaProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The name of the input's form data field */
 	name?: string,
 	/** The data value that this field is bound to */
@@ -84,7 +87,8 @@ export default function TextArea($props: TextAreaProps | undefined) {
 	@render {
 		<textarea
 			id={$props?.id ?? defaultId}
-			class={`torp-text-area ${$props?.class ?? ""}`.trim()}
+			class={["torp-text-area", $props?.class]}
+			{$props?.style}
 			{name}
 			&value={$state.value}
 			{$props?.rows}

package/src/Menu/Menu.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ContextualContextName } from "../Contextual/ContextualTypes";
 import { ModalContextName } from "../Modal/ModalTypes";
 import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
@@ -12,8 +13,10 @@ import {
 interface MenuProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** An ARIA label for describing the menu to screen readers */
 	ariaLabel?: string,
 }
@@ -158,7 +161,8 @@ export default function Menu($props: MenuProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu", $props?.class]}
+			{$props?.style}
 			tabindex="-1"
 			role="menu"
 			aria-label={$props?.ariaLabel}

package/src/Menu/MenuButton.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { MenuContextName, type MenuContext } from "./MenuTypes";
 
 interface MenuButtonProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
 	value?: any,
 	/** Whether this button is disabled */
@@ -53,7 +56,8 @@ export default function MenuButton($props: MenuButtonProps | undefined) {
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-menu-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-button", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitem"

package/src/Menu/MenuCheck.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	MenuButtonContextName,
 	MenuContextName,
@@ -8,8 +9,10 @@ import {
 interface MenuCheckProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether this item is checked */
 	checked?: boolean,
 	/** Whether this item is disabled */
@@ -66,7 +69,8 @@ export default function MenuCheck($props: MenuCheckProps | undefined) {
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-menu-check ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-check", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitemcheckbox"

package/src/Menu/MenuGroup.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface MenuGroupProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** An ARIA label for describing the group to screen readers */
 	ariaLabel?: string,
 }
@@ -17,7 +20,8 @@ export default function MenuGroup($props: MenuGroupProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu-group ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-group", $props?.class]}
+			{$props?.style}
 			role="group"
 			aria-label={$props?.ariaLabel}
 		>

package/src/Menu/MenuIndicator.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { MenuButtonContextName, type MenuButtonContext } from "./MenuTypes";
 
 interface MenuIndicatorProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether this item is disabled */
 	disabled?: boolean,
 }
@@ -25,7 +28,8 @@ export default function MenuIndicator($props: MenuIndicatorProps | undefined) {
 		@if ($state.checked) {
 			<div
 				{$props?.id}
-				class={`torp-menu-indicator ${$props?.class ?? ""}`.trim()}
+				class={["torp-menu-indicator", $props?.class]}
+				{$props?.style}
 				aria-disabled={$props?.disabled ? "true" : undefined}
 				data-disabled={$props?.disabled ? "true" : undefined}
 			>

package/src/Menu/MenuPopout.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
 
 interface MenuPopoutProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the popout is visible */
 	visible?: boolean,
 	/** Raised when the popout is opened or closed */
@@ -70,7 +73,8 @@ export default function MenuPopout($props: MenuPopoutProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu-popout ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-popout", $props?.class]}
+			{$props?.style}
 			onmouseleave={handleMouseLeave}
 		>
 			<slot />

package/src/Menu/MenuPopoutContent.torp

@@ -1,12 +1,14 @@
-
+import type { ClassValue, StyleValue } from "@torpor/view";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
 
 interface MenuPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Where the popout will be shown, relative to the popout button */
 	side?: "top" | "right" | "bottom" | "left",
 	/** How the popout will be aligned, relative to the popout button */
@@ -70,7 +72,8 @@ export default function MenuPopoutContent($props: MenuPopoutContentProps | undef
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-menu-popout-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-menu-popout-content", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/Menu/MenuPopoutTrigger.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	MenuContextName,
 	MenuPopoutContextName,
@@ -8,8 +9,10 @@ import {
 interface MenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The delay before showing the popout, in milliseconds */
 	hoverDelay?: number,
 	/** Whether this button is disabled */
@@ -101,7 +104,8 @@ export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps | undef
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-menu-popout-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-popout-trigger", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitem"

package/src/Menu/MenuRadio.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	MenuButtonContextName,
 	MenuContextName,
@@ -10,8 +11,10 @@ import {
 interface MenuRadioProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The value of the item */
 	value?: string,
 	/** Whether this item is checked */
@@ -80,7 +83,8 @@ export default function MenuRadio($props: MenuRadioProps | undefined) {
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-menu-radio ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-radio", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitemradio"

package/src/Menu/MenuRadioGroup.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	type MenuRadioGroupContext,
 	MenuRadioGroupContextName,
@@ -7,8 +8,10 @@ import {
 interface MenuRadioGroupProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** An ARIA label for describing the menu to screen readers */
 	ariaLabel?: string,
 	/** The value of the checked MenuRadio */
@@ -95,7 +98,8 @@ export default function MenuRadioGroup($props: MenuRadioGroupProps | undefined)
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu-radio-group ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-radio-group", $props?.class]}
+			{$props?.style}
 			role="group"
 			aria-label={$props?.ariaLabel}
 		>

package/src/Menu/MenuSeparator.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface MenuSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -13,7 +16,8 @@ export default function MenuSeparator($props: MenuSeparatorProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu-separator ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-separator", $props?.class]}
+			{$props?.style}
 			role="separator"
 		>
 			<slot />