@torpor/ui 0.3.3 → 0.3.5

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,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 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/*` */
@@ -81,7 +84,8 @@ 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}
 			{$props?.accept}

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,9 @@ export default function Form($props: FormProps | undefined) {
 	@render {
 		<form
 			{$props?.id}
-			class={`torp-form ${$props?.class ?? ""}`.trim()}
+			class={["torp-form", $props?.class]}
+			{$props?.style}
+			{$props?.action}
 			method={$props?.method ?? "POST"}
 			enctype={$props?.enctype ?? ($state.hasFile ? "multipart/form-data" : undefined)}
 			onsubmit={handleSubmit}

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 />

package/src/MenuBar/MenuBar.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { MenuBarContextName, type MenuBarContext, type ItemState } from "./MenuBarTypes";
 
 interface MenuBarProps {
 	/** 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 orientation of the menu, which affects keyboard navigation */
@@ -146,7 +149,8 @@ export default function MenuBar($props: MenuBarProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-menu-bar ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-bar", $props?.class]}
+			{$props?.style}
 			tabindex="-1"
 			role="menubar"
 			aria-label={$props?.ariaLabel}

package/src/MenuBar/MenuBarItem.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	MenuBarContextName,
 	MenuBarItemContextName,
@@ -9,8 +10,10 @@ import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes
 interface MenuBarItemProps {
 	/** 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 item is visible */
 	visible?: boolean,
 	/** Raised when the item is opened or closed */
@@ -104,7 +107,8 @@ export default function MenuBarItem($props: MenuBarItemProps | undefined) {
 	@render {
 		<div 
 			{$props?.id}
-			class={`torp-menu-bar-item ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-bar-item", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/MenuBar/MenuBarItemContent.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import {
@@ -10,8 +11,10 @@ import {
 interface MenuBarItemContentProps {
 	/** 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 */
@@ -104,7 +107,8 @@ export default function MenuBarItemContent($props: MenuBarItemContentProps | und
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-menu-bar-item-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-menu-bar-item-content", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/MenuBar/MenuBarItemTrigger.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	MenuBarContextName,
 	MenuBarItemContextName,
@@ -8,8 +9,10 @@ import {
 interface MenuBarItemTriggerProps {
 	/** 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 button is disabled */
 	disabled?: boolean,
 }
@@ -74,7 +77,8 @@ export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps | und
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-menu-bar-item-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-menu-bar-item-button", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitem"