@torpor/ui 0.3.2 → 0.3.4

package/dist/Dialog/DialogHeader.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogHeaderProps {
 	/** 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 header will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }
@@ -33,7 +36,8 @@ export default function DialogHeader($props: DialogHeaderProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-dialog-footer ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-footer", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/dist/Dialog/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface DialogProps {
 	/** 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 popover to screen readers  */
 	ariaLabel?: string,
 	/** Whether the dialog should alert the user via the screen reader */
@@ -46,8 +48,10 @@ declare function Dialog(
 interface DialogBodyProps {
 	/** 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 body content will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }
@@ -69,8 +73,10 @@ declare function DialogBody(
 interface DialogButtonProps {
 	/** 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,
 	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
@@ -98,8 +104,10 @@ declare function DialogButton(
 interface DialogFooterProps {
 	/** 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,
 }
 
 /**
@@ -118,8 +126,10 @@ declare function DialogFooter(
 interface DialogHeaderProps {
 	/** 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 header will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }

package/dist/Disclosure/Disclosure.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DisclosureContextName, type DisclosureContext, type DisclosureState } from "./DisclosureTypes";
 
 interface DisclosureProps {
 	/** 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 disclosure is expanded and its content visible */
 	expanded?: boolean,
 	/** If set to true, the user cannot interact with this disclosure */
@@ -68,7 +71,8 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-disclosure-item ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-item", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/dist/Disclosure/DisclosureContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureContentProps {
 	/** 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 content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
 	ariaRegion?: boolean,
 }
@@ -28,7 +31,8 @@ export default function DisclosureContent($props: DisclosureContentProps | undef
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-disclosure-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-content", $props?.class]}
+			{$props?.style}
 			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.expanded ? "open" : "closed"}

package/dist/Disclosure/DisclosureHeader.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureHeaderProps {
 	/** 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 type of HTML header to use */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
 }
@@ -31,7 +34,8 @@ export default function DisclosureHeader($props: DisclosureHeaderProps | undefin
 		@// TODO: $props.as
 		<h4
 			{$props?.id}
-			class={`torp-disclosure-header ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-header", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/dist/Disclosure/DisclosureTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureTriggerProps {
 	/** 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,
 }
 
 /**
@@ -28,7 +31,8 @@ export default function DisclosureTrigger($props: DisclosureTriggerProps | undef
 		<button
 			type="button"
 			id={$props?.id ?? defaultId}
-			class={`torp-disclosure-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-trigger", $props?.class]}
+			{$props?.style}
 			disabled={$state.disabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled}

package/dist/Disclosure/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface DisclosureProps {
 	/** 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 disclosure is expanded and its content visible */
 	expanded?: boolean,
 	/** If set to true, the user cannot interact with this disclosure */
@@ -43,8 +45,10 @@ declare function Disclosure(
 interface DisclosureContentProps {
 	/** 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 content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
 	ariaRegion?: boolean,
 }
@@ -65,8 +69,10 @@ declare function DisclosureContent(
 interface DisclosureHeaderProps {
 	/** 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 type of HTML header to use */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
 }
@@ -95,8 +101,10 @@ declare function DisclosureHeader(
 interface DisclosureTriggerProps {
 	/** 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,
 }
 
 /**

package/dist/Drawer/Drawer.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
 
 interface DrawerProps {
 	/** 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 drawer is modal. If true, an overlay should be supplied to obscure outside content, and only the drawer content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the drawer is visible  */
@@ -115,7 +118,8 @@ export default function Drawer($props: DrawerProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-drawer ${$props?.class ?? ""}`.trim()}
+			class={["torp-drawer", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/dist/Drawer/DrawerContent.torp

@@ -1,4 +1,4 @@
-import { type Animation } from "@torpor/view";
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { slide } from "../motion";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
@@ -6,8 +6,10 @@ import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
 interface DrawerContentProps {
 	/** 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,
 }
 
 /**
@@ -67,7 +69,8 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-drawer-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-drawer-content", $props?.class]}
+				{$props?.style}
 				style="position: fixed;"
 				transition={(e) => slide(e, { side: $state.position })}
 				&ref={drawer}

package/dist/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/dist/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/dist/Drawer/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface DrawerProps {
 	/** 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 drawer is modal. If true, an overlay should be supplied to obscure outside content, and only the drawer content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the drawer is visible  */
@@ -49,8 +51,10 @@ declare function Drawer(
 interface DrawerContentProps {
 	/** 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,
 }
 
 /**
@@ -69,8 +73,10 @@ declare function DrawerContent(
 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,
 }
 
 /**
@@ -90,8 +96,10 @@ declare function DrawerOverlay(
 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,
 }
 
 /**

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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}
 		/>
 	}
 }