@torpor/ui 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @torpor/ui
 
+## 0.3.4
+
+### Patch Changes
+
+- b8d978a: Feat: style property for UI components
+- Updated dependencies [aa0c0e2]
+  - @torpor/view@0.4.13
+
+## 0.3.3
+
+### Patch Changes
+
+- 2fdad81: Fix: File input add accept, remove value
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/Accordion/Accordion.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
 
 interface AccordionProps {
 	/** 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 a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
@@ -218,7 +221,8 @@ export default function Accordion($props: AccordionProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-accordion ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/dist/Accordion/AccordionContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionContentProps {
 	/** 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 content should act as a region. Set this when the content contains heading elements or a nested Accordion */
 	ariaRegion?: boolean,
 }
@@ -28,7 +31,8 @@ export default function AccordionContent($props: AccordionContentProps | undefin
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-accordion-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-content", $props?.class]}
+			{$props?.style}
 			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.expanded ? "open" : "closed"}

package/dist/Accordion/AccordionHeader.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionHeaderProps {
 	/** 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",
 }
@@ -31,7 +34,8 @@ export default function AccordionHeader($props: AccordionHeaderProps | undefined
 		@// TODO: $props.as
 		<h4
 			{$props?.id}
-			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-header", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/dist/Accordion/AccordionItem.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionItemProps {
 	/** 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 in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
 	index?: number,
 	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
@@ -87,7 +90,8 @@ export default function AccordionItem($props: AccordionItemProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-item", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/dist/Accordion/AccordionTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionTriggerProps {
 	/** 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,
 }
 
 /**
@@ -49,7 +52,8 @@ export default function AccordionTrigger($props: AccordionTriggerProps | undefin
 		<button
 			type="button"
 			id={$props?.id ?? defaultId}
-			class={`torp-accordion-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-trigger", $props?.class]}
+			{$props?.style}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled ? "true" : undefined}

package/dist/Accordion/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface AccordionProps {
 	/** 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 a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
@@ -48,8 +50,10 @@ declare function Accordion(
 interface AccordionContentProps {
 	/** 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 content should act as a region. Set this when the content contains heading elements or a nested Accordion */
 	ariaRegion?: boolean,
 }
@@ -70,8 +74,10 @@ declare function AccordionContent(
 interface AccordionHeaderProps {
 	/** 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",
 }
@@ -100,8 +106,10 @@ declare function AccordionHeader(
 interface AccordionItemProps {
 	/** 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 in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
 	index?: number,
 	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
@@ -139,8 +147,10 @@ declare function AccordionItem(
 interface AccordionTriggerProps {
 	/** 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/Breadcrumb/Breadcrumb.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface BreadcrumbProps {
 	/** 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 popover to screen readers  */
 	ariaLabel?: string | undefined,
 }
@@ -32,7 +35,8 @@ export default function Breadcrumb($props: BreadcrumbProps | undefined) {
 	@render {
 		<nav
 			{$props?.id}
-			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			class={["torp-breadcrumb", $props?.class]}
+			{$props?.style}
 			aria-label={$props?.ariaLabel}
 		>
 			<slot />

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface BreadcrumbItemProps {
 	/** 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 is the current page */
 	current?: boolean,
 }
@@ -16,7 +19,8 @@ export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined)
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			class={["torp-breadcrumb", $props?.class]}
+			{$props?.style}
 			aria-current={$props?.current ? "page" : undefined}
 			data-current={$props?.current ? "current" : undefined}
 		>

package/dist/Breadcrumb/BreadcrumbSeparator.torp

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

package/dist/Breadcrumb/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface BreadcrumbProps {
 	/** 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 popover to screen readers  */
 	ariaLabel?: string | undefined,
 }
@@ -43,8 +45,10 @@ declare function Breadcrumb(
 interface BreadcrumbItemProps {
 	/** 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 is the current page */
 	current?: boolean,
 }
@@ -66,8 +70,10 @@ declare function BreadcrumbItem(
 interface BreadcrumbSeparatorProps {
 	/** 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/Calendar/Calendar.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ReactiveDate } from "@torpor/view";
 import { areDatesEqual, dayNames, monthNames } from "../utils/dateUtils";
 import CalendarDay from "./CalendarDay.torp";
@@ -10,8 +11,10 @@ import ChevronRight from "../icons/ChevronRight.torp";
 interface CalendarProps {
 	/** 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,
 }
 
 export default function Calendar($props: CalendarProps) {
@@ -219,7 +222,8 @@ export default function Calendar($props: CalendarProps) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-calendar ${$props?.class ?? ""}`.trim()}
+			class={["torp-calendar", $props?.class]}
+			{$props?.style}
 			&ref={container}
 		>
 			<div class={`torp-calendar-header ${$props?.class ?? ""}`.trim()}>
@@ -238,7 +242,8 @@ export default function Calendar($props: CalendarProps) {
 				</button>
 			</div>
 			<div
-				class={`torp-calendar-grid ${$props?.class ?? ""}`.trim()}
+				class={["torp-calendar-grid", $props?.class]}
+				{$props?.style}
 				tabindex={$props.selectable ? 0 : -1}
 				onfocus={handleFocus}
 				onkeydown={handleKey}

package/dist/Calendar/CalendarDay.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { areDatesEqual } from "../utils/dateUtils";
 import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
 
 interface CalendarDayProps {
 	/** 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,
 }
 
 export default function CalendarDay($props: CalendarDayProps) {

package/dist/Calendar/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface CalendarProps {
 	/** 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,
 }
 
 declare function Calendar(
@@ -21,8 +23,10 @@ declare function Calendar(
 interface CalendarDayProps {
 	/** 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,
 }
 
 declare function CalendarDay(

package/dist/Contextual/Contextual.torp

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

package/dist/Contextual/ContextualContent.torp

@@ -1,4 +1,4 @@
-
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import getScrollParent from "../utils/getScrollParent";
 import setContextPosition from "../utils/setContextPosition";
@@ -7,8 +7,10 @@ import { ContextualContextName, type ContextualContext } from "./ContextualTypes
 interface ContextualContentProps {
 	/** 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,
 }
 
 /**
@@ -98,7 +100,8 @@ export default function ContextualContent($props: ContextualContentProps | undef
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-popover-content-contextual ${$props?.class ?? ""}`.trim()}
+				class={["torp-popover-content-contextual", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/dist/Contextual/ContextualTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ContextualContextName, type ContextualContext } from "./ContextualTypes";
 import hoverTrigger from "../mount/hoverTrigger";
 
 interface ContextualTriggerProps {
 	/** 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"
 }
@@ -55,7 +58,8 @@ export default function ContextualTrigger($props: ContextualTriggerProps | undef
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-popover-trigger-contextual ${$props?.class ?? ""}`.trim()}
+			class={["torp-popover-trigger-contextual", $props?.class]}
+			{$props?.style}
 			oncontextmenu={handleContextualMenu}
 			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}

package/dist/Contextual/index.d.ts

@@ -4,8 +4,10 @@ import { type SlotRender } from "@torpor/view";
 interface ContextualProps {
 	/** 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 contextual is modal. If true, an overlay should be supplied to obscure outside content, and only the context content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the contextual is visible  */
@@ -49,8 +51,10 @@ declare function Contextual(
 interface ContextualContentProps {
 	/** 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,
 }
 
 /**
@@ -70,8 +74,10 @@ declare function ContextualContent(
 interface ContextualTriggerProps {
 	/** 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/Dialog/Dialog.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
 import { ModalContextName, type ModalContext } from "../Modal/ModalTypes";
@@ -7,8 +8,10 @@ import { DialogContextName, type DialogContext, type DialogState, type HandleBut
 interface DialogProps {
 	/** 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 popover to screen readers  */
 	ariaLabel?: string,
 	/** Whether the dialog should alert the user via the screen reader */
@@ -115,7 +118,8 @@ export default function Dialog($props: DialogProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-dialog ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog", $props?.class]}
+			{$props?.style}
 			tabindex="0"
 			role={$props?.alert === true ? "alertdialog" : "dialog"}
 			aria-modal={modal}

package/dist/Dialog/DialogBody.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogBodyProps {
 	/** 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 body content will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }
@@ -32,7 +35,8 @@ export default function DialogBody($props: DialogBodyProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId} 
-			class={`torp-dialog-body ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-body", $props?.class]} 
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/dist/Dialog/DialogButton.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogButtonProps {
 	/** 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 value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
 	value?: any,
 	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
@@ -51,7 +54,8 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 		<button
 			type="button"
 			{$props?.id}
-			class={`torp-dialog-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-button", $props?.class]}
+			{$props?.style}
 			disabled={$props?.disabled}
 			onclick={handleClick}
 			&ref={button}

package/dist/Dialog/DialogFooter.torp

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