@torpor/ui 0.3.3 → 0.3.4

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"