@torpor/ui 0.3.2 → 0.3.4

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

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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"

package/src/icons/ChevronLeft.torp

@@ -4,7 +4,8 @@ export default function ChevronLeft($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/src/icons/ChevronRight.torp

@@ -4,7 +4,8 @@ export default function ChevronRight($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/src/icons/ChevronUp.torp

@@ -4,7 +4,8 @@ export default function ChevronUp($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/src/icons/Cross.torp

@@ -4,7 +4,8 @@ export default function Cross($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/src/icons/IconTypes.ts

@@ -1,6 +1,10 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
 export interface IconProps {
 	/** An ID for the svg element */
 	id?: string;
-	/** Class name(s) for the svg element */
-	class?: string;
+	/** Classes for the svg element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
 }

package/src/icons/Loading.torp

@@ -4,7 +4,8 @@ export default function Loading($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="20"

package/src/icons/Minus.torp

@@ -4,7 +4,8 @@ export default function Minus($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/src/icons/Plus.torp

@@ -4,7 +4,8 @@ export default function Plus($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"