@torpor/ui 0.3.3 → 0.3.4

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

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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 */
@@ -34,8 +36,10 @@ declare function CheckBox(
 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 */
@@ -61,8 +65,10 @@ declare function Field(
 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/*` */
@@ -97,8 +103,10 @@ declare function File(
 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 **/
@@ -153,8 +161,10 @@ declare function Hidden(
 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 */
@@ -193,8 +203,10 @@ declare function Input(
 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,
 }
 
 /**
@@ -213,8 +225,10 @@ declare function Label(
 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,
 }
 
 /**
@@ -234,8 +248,10 @@ declare function Message(
 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,
 }
@@ -256,8 +272,10 @@ declare function Option(
 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 */
@@ -290,8 +308,10 @@ declare function Select(
 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 */

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

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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,
 }
@@ -41,8 +43,10 @@ declare function Menu(
 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 */
@@ -70,8 +74,10 @@ declare function MenuButton(
 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 */
@@ -98,8 +104,10 @@ declare function MenuCheck(
 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,
 }
@@ -120,8 +128,10 @@ declare function MenuGroup(
 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,
 }
@@ -143,8 +153,10 @@ declare function MenuIndicator(
 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 */
@@ -180,8 +192,10 @@ declare function MenuPopout(
 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 */
@@ -204,8 +218,10 @@ declare function MenuPopoutContent(
 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 */
@@ -228,8 +244,10 @@ declare function MenuPopoutTrigger(
 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 */
@@ -255,8 +273,10 @@ declare function MenuRadio(
 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 */
@@ -281,8 +301,10 @@ declare function MenuRadioGroup(
 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,
 }
 
 /**

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