@torpor/ui 0.3.2 → 0.3.4

package/dist/NavMenu/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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 */
@@ -41,8 +43,10 @@ declare function NavMenu(
 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,
 }
@@ -64,8 +68,10 @@ declare function NavMenuButton(
 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 */
@@ -89,8 +95,10 @@ declare function NavMenuElement(
 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,
 }
@@ -111,8 +119,10 @@ declare function NavMenuGroup(
 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",
 }
@@ -133,8 +143,10 @@ declare function NavMenuGroupHeader(
 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 */
@@ -160,8 +172,10 @@ declare function NavMenuLink(
 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 */
@@ -197,8 +211,10 @@ declare function NavMenuPopout(
 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 */
@@ -222,8 +238,10 @@ declare function NavMenuPopoutButton(
 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 */
@@ -247,8 +265,10 @@ declare function NavMenuPopoutContent(
 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/dist/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/dist/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/dist/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/dist/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/dist/Notification/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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 */
@@ -33,8 +35,10 @@ declare function Notification(
 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,
 }
 
 /**
@@ -53,8 +57,10 @@ declare function NotificationClose(
 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,
 }
 
 /**
@@ -74,8 +80,10 @@ declare function NotificationContainer(
 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,
 }
 
 /**

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

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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  */
@@ -63,8 +65,10 @@ declare function PopoverContent(
 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"
 }

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

package/dist/TabGroup/TabList.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
 
 interface TabListProps {
 	/** 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 tab list to screen readers */
 	ariaLabel?: string,
 }
@@ -43,7 +46,8 @@ export default function TabList($props: TabListProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-tab-list ${$props?.class ?? ""}`.trim()}
+			class={["torp-tab-list", $props?.class]}
+			{$props?.style}
 			role="tablist"
 			aria-label={$props?.ariaLabel}
 			aria-orientation={orientation}

package/dist/TabGroup/TabTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
 
 interface TabTriggerProps {
 	/** 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,
 }
 
 /**
@@ -52,7 +55,8 @@ export default function TabTrigger($props: TabTriggerProps | undefined) {
 		<button
 			type="button"
 			id={$props?.id ?? defaultId}
-			class={`torp-tab-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-tab-trigger", $props?.class]}
+			{$props?.style}
 			role="tab"
 			tabindex="-1"
 			disabled={$state.disabled || $state.parentDisabled}

package/dist/TabGroup/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 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 */
@@ -28,8 +30,10 @@ declare function TabContent(
 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 */
@@ -74,8 +78,10 @@ declare function TabGroup(
 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 */
@@ -108,8 +114,10 @@ declare function TabHeader(
 interface TabListProps {
 	/** 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 tab list to screen readers */
 	ariaLabel?: string,
 }
@@ -140,8 +148,10 @@ declare function TabList(
 interface TabTriggerProps {
 	/** 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/icons/ArrowDown.torp

@@ -4,7 +4,8 @@ export default function ArrowDown($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowLeft.torp

@@ -4,7 +4,8 @@ export default function ArrowLeft($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowRight.torp

@@ -4,7 +4,8 @@ export default function ArrowRight($props: IconProps | any) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowUp.torp

@@ -4,7 +4,8 @@ export default function ArrowUp($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Bars.torp

@@ -4,7 +4,8 @@ export default function Bars($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Check.torp

@@ -4,7 +4,8 @@ export default function Check($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ChevronDown.torp

@@ -4,7 +4,8 @@ export default function ChevronDown($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}
-			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"