@torpor/ui 0.3.3 → 0.3.5

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"

package/vitest.config.ts

@@ -1,5 +1,5 @@
 import torpor from "@torpor/unplugin/vite";
-import { type UserConfigFnObject, defineConfig } from "vitest/config";
+import { type ViteUserConfigFnObject, defineConfig } from "vitest/config";
 
 export default defineConfig(({ mode }) => ({
 	plugins: [torpor()],
@@ -9,4 +9,4 @@ export default defineConfig(({ mode }) => ({
 	test: {
 		environment: "jsdom",
 	},
-})) satisfies UserConfigFnObject as UserConfigFnObject;
+})) satisfies ViteUserConfigFnObject as ViteUserConfigFnObject;