@torpor/ui 0.3.3 → 0.3.5

package/src/Modal/Modal.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ModalContextName, type ModalContext, type ModalState } from "./ModalTypes";
 
 interface ModalProps {
 	/** 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 modal is visible  */
 	visible?: boolean,
 	/** A function to be called when the user selects a response */
@@ -110,7 +113,8 @@ export default function Modal($props: ModalProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-modal ${$props?.class ?? ""}`.trim()}
+			class={["torp-modal", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Modal/ModalContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import { ModalContextName, type ModalContext } from "./ModalTypes";
 
 interface ModalContentProps {
 	/** 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,
 }
 
 /**
@@ -66,7 +69,8 @@ export default function ModalContent($props: ModalContentProps | undefined) {
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-modal-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-modal-content", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/Modal/ModalOverlay.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { disableScroll } from "../mount/disableScroll";
 import { ModalContextName, type ModalContext } from "./ModalTypes";
 
 interface ModalOverlayProps {
 	/** 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 ModalOverlay($props: ModalOverlayProps | undefined) {
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-modal-overlay ${$props?.class ?? ""}`.trim()}
+				class={["torp-modal-overlay", $props?.class]}
+				{$props?.style}
 				tabindex="-1"
 				onmount={(el) => disableScroll(el)}
 			>

package/src/Modal/ModalTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ModalContextName, type ModalContext } from "./ModalTypes";
 import hoverTrigger from "../mount/hoverTrigger";
 
 interface ModalTriggerProps {
 	/** 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 modal is activated by click/press or by hover **/
 	activation?: "press" | "hover"
 }
@@ -39,7 +42,8 @@ export default function ModalTrigger($props: ModalTriggerProps | undefined) {
 		<button
 			type="button"
 			{$props?.id}
-			class={`torp-modal-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-modal-trigger", $props?.class]}
+			{$props?.style}
 			onclick={handleClick}
 			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}

package/src/NavMenu/NavMenu.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	NavMenuContextName,
 	type NavMenuContext,
@@ -9,8 +10,10 @@ import {
 interface NavMenuProps {
 	/** 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 | undefined,
 	/** The orientation of the menu, which affects keyboard navigation */
@@ -173,7 +176,8 @@ export default function NavMenu($props: NavMenuProps | undefined) {
 	@render {
 		<nav
 			{$props?.id}
-			class={`torp-nav-menu ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu", $props?.class]}
+			{$props?.style}
 			tabindex="0"
 			role="menubar"
 			aria-label={$props?.ariaLabel}

package/src/NavMenu/NavMenuButton.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
 interface NavMenuButtonProps {
 	/** 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,
 }
@@ -33,7 +36,8 @@ export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-nav-menu-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-button", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitem"

package/src/NavMenu/NavMenuElement.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
 interface NavMenuElementProps {
 	/** 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,
 	/** An element that can be focused via keyboard navigation */
@@ -35,7 +38,8 @@ export default function NavMenuElement($props: NavMenuElementProps | undefined)
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-nav-menu-div ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-div", $props?.class]}
+			{$props?.style}
 			type="div"
 			role="menuitem"
 			aria-disabled={$props?.disabled ? "true" : undefined}

package/src/NavMenu/NavMenuGroup.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
 interface NavMenuGroupProps {
 	/** 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,
 }
@@ -26,7 +29,8 @@ export default function NavMenuGroup($props: NavMenuGroupProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-nav-menu-group ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-group", $props?.class]}
+			{$props?.style}
 			role="group"
 			aria-label={$props?.ariaLabel}
 			aria-labelledby={$state.headerId}

package/src/NavMenu/NavMenuGroupHeader.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
 interface NavMenuGroupHeaderProps {
 	/** 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",
 }
@@ -29,7 +32,8 @@ export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps | und
 		@// TODO: self={$props.as}
 		<h4
 			id={$props?.id ?? defaultId}
-			class={`torp-nav-menu-group-header ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-group-header", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</h4>

package/src/NavMenu/NavMenuLink.torp

@@ -1,11 +1,13 @@
-
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
 interface NavMenuLinkProps {
 	/** 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 URL for the menu link */
 	href: string,
 	/** Whether the menu link should open in a new tab/window */
@@ -38,7 +40,8 @@ export default function NavMenuLink($props: NavMenuLinkProps | undefined) {
 	@render {
 		<a
 			{$props?.id}
-			class={`torp-nav-menu-link ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-link", $props?.class]}
+			{$props?.style}
 			{$props?.href}
 			{$props?.disabled}
 			target={$props?.newWindow ? "_blank" : undefined}

package/src/NavMenu/NavMenuPopout.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
 
 interface NavMenuPopoutProps {
 	/** 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 */
@@ -76,7 +79,8 @@ export default function NavMenuPopout($props: NavMenuPopoutProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-nav-menu-popout ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-popout", $props?.class]}
+			{$props?.style}
 			onmouseleave={handleMouseLeave}
 		>
 			<slot />

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import {
 	NavMenuContextName,
 	NavMenuPopoutContextName,
@@ -8,8 +9,10 @@ import {
 interface NavMenuPopoutButtonProps {
 	/** 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 */
@@ -102,7 +105,8 @@ export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | u
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-nav-menu-popout-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-nav-menu-popout-button", $props?.class]}
+			{$props?.style}
 			type="button"
 			{$props?.disabled}
 			role="menuitem"

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -1,4 +1,4 @@
-
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getScrollParent from "../utils/getScrollParent";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
@@ -6,8 +6,10 @@ import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTy
 interface NavMenuPopoutContentProps {
 	/** 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 */
@@ -78,7 +80,8 @@ export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps |
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-nav-menu-popout-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-nav-menu-popout-content", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/NavMenu/NavMenuSeparator.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface NavMenuSeparatorProps {
 	/** 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/src/Notification/Notification.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
 
 interface NotificationProps {
 	/** 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 notification is visible */
 	visible?: boolean,
 	/** The duration, in milliseconds, to keep the notification visible */
@@ -57,7 +60,8 @@ export default function Notification($props: NotificationProps | undefined) {
 		@if ($state.visible) {
 			<div 
 				{$props?.id}
-				class={`torp-notification ${$props?.class ?? ""}`.trim()}
+				class={["torp-notification", $props?.class]}
+				{$props?.style}
 				role="alert"
 			>
 				<slot />

package/src/Notification/NotificationClose.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
 
 interface NotificationCloseProps {
 	/** 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,
 }
 
 /**
@@ -25,7 +28,8 @@ export default function NotificationClose($props: NotificationCloseProps | undef
 	@render {
 		<button
 			{$props?.id}
-			class={`torp-notification-close ${$props?.class ?? ""}`.trim()}
+			class={["torp-notification-close", $props?.class]}
+			{$props?.style}
 			type="button"
 			onclick={handleClick}
 		>

package/src/Notification/NotificationContainer.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface NotificationContainerProps {
 	/** 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,
 }
 
 /**
@@ -14,7 +17,8 @@ export default function NotificationContainer($props: NotificationContainerProps
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-notification-container ${$props?.class ?? ""}`.trim()}
+			class={["torp-notification-container", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Notification/NotificationContent.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface NotificationContentProps {
 	/** 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 NotificationContent($props: NotificationContentProps | u
 	@render {
 		<div 
 			{$props?.id}
-			class={`torp-notification-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-notification-content", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Popover/Popover.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
 
 interface PopoverProps {
 	/** 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 popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the popover is visible  */
@@ -117,7 +120,8 @@ export default function Popover($props: PopoverProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-popover ${$props?.class ?? ""}`.trim()}
+			class={["torp-popover", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Popover/PopoverContent.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import getScrollParent from "../utils/getScrollParent";
 import setPopoverPosition from "../utils/setPopoverPosition";
@@ -6,8 +7,10 @@ import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 interface PopoverContentProps {
 	/** 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 popover will be shown, relative to the popover trigger */
 	side?: "top" | "right" | "bottom" | "left",
 	/** How the popover will be aligned, relative to the popover trigger */
@@ -102,7 +105,8 @@ export default function PopoverContent($props?: PopoverContentProps | undefined)
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-popover-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-popover-content", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/Popover/PopoverTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 import hoverTrigger from "../mount/hoverTrigger";
 
 interface PopoverTriggerProps {
 	/** 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 popover is activated by click/press or by hover **/
 	activation?: "press" | "hover"
 }
@@ -47,7 +50,8 @@ export default function PopoverTrigger($props: PopoverTriggerProps | undefined)
 		<button
 			type="button"
 			{$props?.id}
-			class={`torp-popover-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-popover-trigger", $props?.class]}
+			{$props?.style}
 			onclick={handleClick}
 			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}

package/src/Slider/Slider.torp

@@ -72,7 +72,8 @@ export default function Slider($props: any | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-slider ${$props?.class ?? ""}`.trim()}
+			class={["torp-slider", $props?.class]}
+			{$props?.style}
 			onmousemove={handleMouseMove}
 			onmouseup={handleMouseUp}
 		>

package/src/TabGroup/TabContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
 
 interface TabContentProps {
 	/** 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 index of this item */
 	index?: number,
 	/** The value for this item */
@@ -30,7 +33,8 @@ export default function TabContent($props: TabContentProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-tab-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-tab-content", $props?.class]}
+			{$props?.style}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
 			data-orientation={context.orientation}

package/src/TabGroup/TabGroup.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
 
 interface TabGroupProps {
 	/** 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 orientation of the tab buttons, which affects keyboard navigation */
 	orientation?: "horizontal" | "vertical",
 	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
@@ -237,7 +240,8 @@ export default function TabGroup($props: TabGroupProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-tab-group ${$props?.class ?? ""}`.trim()}
+			class={["torp-tab-group", $props?.class]}
+			{$props?.style}
 			data-orientation={$props?.orientation}
 		>
 			<slot />

package/src/TabGroup/TabHeader.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
 interface TabHeaderProps {
 	/** 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"
 	/** The index of this header's item */