@rvx/ui 0.3.7 → 0.4.0

package/src/components/column.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/column.module.css";
 import { ClassValue, Expression, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 
 /**
@@ -13,12 +13,11 @@ export function Column(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		class={[
-			theme?.column,
-			map(props.size, size => theme?.[`column_${size ?? "content"}`]),
-			map(props.padded, padded => padded ? theme?.column_padded : undefined),
+			styles.column,
+			map(props.size, size => styles[size ?? "content"]),
+			map(props.padded, padded => padded ? styles.padded : undefined),
 			props.class,
 		]}
 		style={props.style}

package/src/components/control-group.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/control-group.module.css";
 import { ClassValue, Expression, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 
 export function ControlGroup(props: {
 	class?: ClassValue;
@@ -8,12 +8,11 @@ export function ControlGroup(props: {
 	children?: unknown;
 	column?: Expression<boolean | undefined>;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		class={[
-			theme?.control_group,
+			styles.control_group,
 			props.class,
-			map(props.column, column => column ? theme?.control_group_column : theme?.control_group_row),
+			map(props.column, column => column ? styles.column : styles.row),
 		]}
 		style={props.style}
 		id={props.id}

package/src/components/dialog.tsx

@@ -1,8 +1,14 @@
+import styles from "@rvx/ui/theme/components/dialog.module.css";
 import { $, captureSelf, ClassValue, Context, Emitter, Event, Expression, map, render, StyleValue, teardown, uniqueId } from "rvx";
 import { TASKS, Tasks, useMicrotask } from "rvx/async";
 import { inOverlayContext } from "../common/context.js";
-import { Column, FlexSpace, Group, Heading, Row, Separated, Text, THEME } from "../index.js";
+import { Column, Group } from "./column.js";
+import { FlexSpace } from "./flex-space.js";
+import { Heading } from "./heading.js";
 import { LAYER, Layer } from "./layer.js";
+import { Row } from "./row.js";
+import { Separated } from "./separated.js";
+import { Text } from "./text.js";
 
 export class DialogAbortError extends Error { }
 
@@ -83,8 +89,6 @@ export function DialogBody(props: {
 	"aria-labelledby"?: Expression<string | undefined>;
 	"aria-describedby"?: Expression<string | undefined>;
 }): unknown {
-	const theme = THEME.current;
-
 	let titleId: string | undefined;
 	let descriptionId: string | undefined;
 	const head: unknown[] = [];
@@ -100,7 +104,7 @@ export function DialogBody(props: {
 
 	const body = <div
 		class={[
-			theme?.dialog_container,
+			styles.container,
 			props.class,
 		]}
 		style={[
@@ -114,22 +118,22 @@ export function DialogBody(props: {
 		aria-labelledby={map(props["aria-labelledby"], v => v ?? titleId)}
 		aria-describedby={map(props["aria-describedby"], v => v ?? descriptionId)}
 	>
-		<Separated class={theme?.dialog_body}>
+		<Separated class={styles.body}>
 			{head.length > 0 ? <Group padded>{head}</Group> : undefined}
 			{props.children}
 		</Separated>
 	</div> as HTMLElement;
 
 	useMicrotask(() => {
-		if (theme?.dialog_fadein) {
+		if (styles.fadein) {
 			body.offsetParent;
-			body.classList.add(theme.dialog_fadein);
+			body.classList.add(styles.fadein);
 		}
 	});
 
 	DIALOG_FADEOUT.current?.(tasks => {
-		if (theme?.dialog_fadeout) {
-			body.classList.add(theme.dialog_fadeout);
+		if (styles.fadeout) {
+			body.classList.add(styles.fadeout);
 		}
 		const duration = parseInt(getComputedStyle(body).getPropertyValue("--layout-transition-ms"));
 		if (Number.isSafeInteger(duration)) {
@@ -150,11 +154,10 @@ export function DialogFooter(props: {
 	links?: unknown;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <Group padded>
 		<Row
 			class={[
-				theme?.dialog_footer,
+				styles.footer,
 				props.class,
 			]}
 			style={props.style}

package/src/components/dropdown-input.tsx

@@ -15,7 +15,7 @@ export function DropdownInput<T>(props: {
 	value: Expression<T>;
 	values: Expression<DropdownValue<T>[]>;
 
-	variant?: ButtonVariant;
+	variant?: Expression<ButtonVariant | undefined>;
 	disabled?: Expression<boolean | undefined>;
 
 	class?: ClassValue;

package/src/components/dropdown.tsx

@@ -1,7 +1,7 @@
+import styles from "@rvx/ui/theme/components/dropdown.module.css";
 import { $, ClassValue, Expression, For, get, map, memo, render, StyleValue, uniqueId, View, watch } from "rvx";
 import { optionalString } from "rvx/convert";
 import { Action, createPassiveActionEvent, handleActionEvent, isKey, startDelayedHoverOnMouseenter } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 import { LAYER } from "./layer.js";
 import { Popout, PopoutAlignment, PopoutPlacement } from "./popout.js";
 
@@ -89,7 +89,6 @@ export function createDropdown(props: {
 		alignment: map(props.alignment, v => v ?? "start"),
 		foreignEvents: props.foreignEvents,
 		content: ({ popout, placement }) => {
-			const theme = THEME.current;
 			const layer = LAYER.current!;
 
 			const activeItem = $<DropdownItem | undefined>(undefined);
@@ -159,7 +158,7 @@ export function createDropdown(props: {
 			});
 
 			const content = <div class={[
-				theme?.dropdown_content,
+				styles.content,
 			]}>
 				<For each={items}>
 					{item => {
@@ -189,8 +188,8 @@ export function createDropdown(props: {
 						const root = <div
 							id={id}
 							class={[
-								theme?.dropdown_item,
-								() => activeItem.value === item && theme?.dropdown_item_active,
+								styles.item,
+								() => activeItem.value === item && styles.item_active,
 							]}
 							role="option"
 							aria-selected={item.selected}
@@ -231,8 +230,8 @@ export function createDropdown(props: {
 				style={props.style}
 				class={[
 					props.class,
-					theme?.dropdown,
-					map(props.expansion, v => v && theme?.dropdown_expansion),
+					styles.dropdown,
+					map(props.expansion, v => v && styles.expansion),
 				]}
 				role="listbox"
 				tabindex="0"
@@ -247,7 +246,7 @@ export function createDropdown(props: {
 					}
 				}}
 			>
-				<div class={theme?.dropdown_scroll_area}>
+				<div class={styles.scroll_area}>
 					{content}
 				</div>
 			</div> as HTMLElement;

package/src/components/error.tsx

@@ -1,11 +1,10 @@
-import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
+import styles from "@rvx/ui/theme/components/error.module.css";
 
 export function ErrorMessage(props: {
 	children: unknown;
 }): unknown {
-	const theme = THEME.current;
-	return <Text class={theme?.error_message}>
+	return <Text class={styles.message}>
 		{props.children}
 	</Text>;
 }

package/src/components/flex-space.tsx

@@ -1,14 +1,13 @@
+import styles from "@rvx/ui/theme/components/flex-space.module.css";
 import { Expression, get } from "rvx";
-import { THEME } from "../common/theme.js";
 
 export function FlexSpace(props: {
 	grow?: Expression<number | undefined>;
 }): unknown {
-	const theme = THEME.current;
 	return <div
-		class={theme?.flex_space}
+		class={styles.flex_space}
 		style={{
-			"flex-grow": () => String(get(props.grow) ?? 1),
+			"flex-grow": () => get(props.grow) ?? 1,
 		}}
 	/>;
 }

package/src/components/heading.tsx

@@ -1,5 +1,5 @@
 import { ClassValue, Expression, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/heading.module.css";
 
 export type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
 
@@ -10,10 +10,9 @@ export function Heading(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	const Tag = `h${props.level}`;
 	return <Tag
-		class={[theme?.heading, props.class]}
+		class={[styles.heading, props.class]}
 		style={props.style}
 		id={props.id}
 	>

package/src/components/label.tsx

@@ -1,6 +1,6 @@
+import styles from "@rvx/ui/theme/components/label.module.css";
 import { ClassValue, Expression, StyleValue } from "rvx";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 
 export function Label(props: {
 	class?: ClassValue;
@@ -9,11 +9,10 @@ export function Label(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	const idFor = props.for ?? ID_PAIR.current.prefix();
 	return <label
 		class={[
-			theme?.label,
+			styles.label,
 			props.class,
 		]}
 		style={props.style}

package/src/components/link.tsx

@@ -1,8 +1,8 @@
+import styles from "@rvx/ui/theme/components/link.module.css";
 import { ClassValue, Expression, get, map, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString, separated } from "rvx/convert";
 import { Action, handleActionEvent, isKey } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 
 export type LinkReferrerPolicy = "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
 
@@ -71,7 +71,6 @@ export function Link(props: {
 
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	function action(event: Event) {
@@ -84,7 +83,7 @@ export function Link(props: {
 	return <a
 		disabled={disabled}
 		class={[
-			theme?.link,
+			styles.link,
 			props.class,
 		]}
 		style={props.style}

package/src/components/nav-list.tsx

@@ -1,8 +1,8 @@
+import styles from "@rvx/ui/theme/components/nav-list.module.css";
 import { ClassValue, Expression, get, map, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString } from "rvx/convert";
 import { Action, handleActionEvent, isKey } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 
 export function NavList(props: {
 	/**
@@ -17,10 +17,9 @@ export function NavList(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		class={[
-			theme?.nav_list,
+			styles.nav_list,
 			props.class,
 		]}
 		style={[
@@ -47,7 +46,6 @@ export function NavListButton(props: {
 	action?: Action;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	function action(event: Event) {
@@ -61,8 +59,8 @@ export function NavListButton(props: {
 		type="button"
 		disabled={disabled}
 		class={[
-			theme?.nav_list_item,
-			map(props.current, current => current && theme?.nav_list_item_current),
+			styles.item,
+			map(props.current, current => current && styles.item_current),
 			props.class,
 		]}
 		style={props.style}

package/src/components/notifications.tsx

@@ -1,12 +1,14 @@
+import styles from "@rvx/ui/theme/components/notifications.module.css";
 import { $, captureSelf, Component, For, movable, render, teardown, uncapture, View } from "rvx";
 import { useTimeout } from "rvx/async";
 import { inOverlayContext } from "../common/context.js";
-import { THEME } from "../common/theme.js";
+import { SizeContext } from "../common/types.js";
+import { Card, CardVariant } from "./card.js";
 import { Collapse } from "./collapse.js";
 import { Column } from "./column.js";
 import { TopLayer } from "./layer.js";
 
-export type NotificationVariant = "default" | "info" | "success" | "warning" | "danger";
+export type NotificationVariant = CardVariant;
 
 export interface Notification {
 	dispose(): void;
@@ -16,6 +18,7 @@ export interface NotificationOptions {
 	variant?: NotificationVariant;
 	timeout?: number;
 	raw?: boolean;
+	size?: SizeContext;
 }
 
 export interface NotificationHostOptions {
@@ -31,17 +34,16 @@ const instances = $<Component[]>([]);
 
 export function showNotification(content: Component<Notification>, options?: NotificationOptions): Notification {
 	return inOverlayContext(() => {
-		const theme = THEME.current;
 		if (!host) {
 			uncapture(() => {
 				host = render(<TopLayer>
 					{() => <div
-						class={theme?.notification_host}
+						class={styles.host}
 						style={{
 							"--notification-inline-size": () => NOTIFICATIONS.value.inlineSize,
 						}}
 					>
-						<Column class={theme?.notification_area} size="group">
+						<Column class={styles.area} size="group">
 							<For each={instances}>
 								{instance => instance()}
 							</For>
@@ -58,18 +60,14 @@ export function showNotification(content: Component<Notification>, options?: Not
 			const visible = $(true);
 
 			const instance = movable(<Collapse fadein visible={visible}>
-				<div class={[
-					theme?.notification,
-					options?.raw ? theme?.notification_raw : undefined,
-					theme?.[`notification_${options?.variant ?? "default"}`],
-				]}>
-					{options?.raw
-						? content(handle)
-						: <Column size="group">
-							{content(handle)}
-						</Column>
-					}
-				</div>
+				<Card
+					class={styles.notification}
+					variant={options?.variant}
+					raw={options?.raw}
+					size={options?.size}
+				>
+					{content(handle)}
+				</Card>
 			</Collapse>).move;
 
 			instances.update(instances => {

package/src/components/page.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/page.module.css";
 import { ClassValue, Expression, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 
 export function Page(props: {
@@ -11,14 +11,13 @@ export function Page(props: {
 	style?: StyleValue;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		role={props.role}
 		id={props.id}
 		class={[
 			props.class,
-			theme?.page,
-			map(props.centerBlock, v => v ? theme?.page_center_block : undefined),
+			styles.page,
+			map(props.centerBlock, v => v ? styles.center_block : undefined),
 		]}
 		style={[
 			props.style,
@@ -27,9 +26,9 @@ export function Page(props: {
 			},
 		]}
 	>
-		<div class={theme?.page_scrollbar_comp} />
-		<div class={theme?.page_content_col}>
-			<Column class={theme?.page_content}>
+		<div class={styles.scrollbar_comp} />
+		<div class={styles.content_col}>
+			<Column class={styles.content}>
 				{props.children}
 			</Column>
 		</div>

package/src/components/placeholder.tsx

@@ -1,6 +1,6 @@
 import { Attach, ClassValue, Component, Context, Expression, map, StyleValue } from "rvx";
 import { trackLoading } from "../common/tasks.js";
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/placeholder.module.css";
 
 export const PLACEHOLDER = new Context<Component | undefined>();
 
@@ -11,7 +11,6 @@ export function Placeholder(props: {
 	active?: Expression<boolean | undefined>;
 	message?: Component;
 }) {
-	const theme = THEME.current;
 	const active = props.active === undefined
 		? trackLoading()
 		: map(props.active, v => v ?? true);
@@ -19,18 +18,18 @@ export function Placeholder(props: {
 	return <div
 		class={[
 			props.class,
-			theme?.placeholder_area
+			styles.area
 		]}
 		style={props.style}
 	>
 		<Attach when={active}>
-			<div class={theme?.placeholder}>
-				<div class={theme?.placeholder_message}>
+			<div class={styles.placeholder}>
+				<div class={styles.message}>
 					{(props.message ?? PLACEHOLDER.current)?.()}
 				</div>
 			</div>
 		</Attach>
-		<div class={theme?.placeholder_content} inert={active}>
+		<div class={styles.content} inert={active}>
 			{props.children}
 		</div>
 	</div>;

package/src/components/popover.tsx

@@ -1,6 +1,7 @@
+import columnStyles from "@rvx/ui/theme/components/column.module.css";
+import styles from "@rvx/ui/theme/components/popover.module.css";
 import { $, ClassValue, Expression, get, Inject, map, render, StyleValue, SVG, uniqueId, View, watch, XMLNS } from "rvx";
 import { Action } from "../common/events.js";
-import { THEME } from "../common/theme.js";
 import { DOWN, getSize, getXY, LEFT, RIGHT, UP } from "../common/writing-mode.js";
 import { DialogRole } from "./dialog.js";
 import { LAYER } from "./layer.js";
@@ -76,7 +77,6 @@ export function createPopover(props: {
 		placement: map(props.placement, v => v ?? "block"),
 		alignment: map(props.alignment, v => v ?? "center"),
 		content: ({ popout, onPlacement, placement, setSizeReference }) => {
-			const theme = THEME.current;
 			const layer = LAYER.current!;
 			const spikeTransform = $("");
 
@@ -111,8 +111,8 @@ export function createPopover(props: {
 				}
 			});
 
-			const spikeArea = <div class={theme?.popover_spike_area}>
-				<div class={theme?.popover_spike} style={{ transform: spikeTransform }}>
+			const spikeArea = <div class={styles.spike_area}>
+				<div class={styles.spike} style={{ transform: spikeTransform }}>
 					<Inject context={XMLNS} value={SVG}>
 						{() => {
 							return <svg viewBox="0 0 16 16" preserveAspectRatio="none">
@@ -124,10 +124,10 @@ export function createPopover(props: {
 			</div> as HTMLElement;
 
 			const content = <div class={[
-				theme?.column,
-				theme?.column_content,
-				theme?.popover_content,
-				map(props.raw, raw => raw ? theme?.popover_raw : undefined),
+				columnStyles.column,
+				columnStyles.content,
+				styles.content,
+				map(props.raw, raw => raw ? styles.raw : undefined),
 			]}>
 				{props.content({ popout })}
 			</div> as HTMLElement;
@@ -138,7 +138,7 @@ export function createPopover(props: {
 				role={map(props.role, v => v ?? "dialog")}
 				id={props.id}
 				class={[
-					theme?.popover,
+					styles.popover,
 					props.class,
 				]}
 				style={[
@@ -155,7 +155,7 @@ export function createPopover(props: {
 				aria-describedby={props["aria-describedby"]}
 			>
 				{spikeArea}
-				<div class={theme?.popover_scroll_area}>
+				<div class={styles.scroll_area}>
 					{content}
 				</div>
 			</div> as HTMLElement;

package/src/components/radio-buttons.tsx

@@ -1,8 +1,8 @@
+import styles from "@rvx/ui/theme/components/radio-buttons.module.css";
 import { ClassValue, Expression, For, get, map, Signal, StyleValue, uniqueId } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString, string } from "rvx/convert";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
 import { closestValidator } from "./validation.js";
 
@@ -28,7 +28,6 @@ export function RadioButtons<T>(props: {
 }): unknown {
 	const id = props.id ?? ID_PAIR.current.consume();
 	const group = uniqueId();
-	const theme = THEME.current;
 
 	const disabled = props.value instanceof Signal
 		? () => isPending() || get(props.disabled)
@@ -40,7 +39,7 @@ export function RadioButtons<T>(props: {
 		role="radiogroup"
 		id={props.id}
 		class={[
-			theme?.radio_buttons,
+			styles.radio_buttons,
 			props.class,
 		]}
 		style={props.style}
@@ -56,7 +55,7 @@ export function RadioButtons<T>(props: {
 				const input = <input
 					id={id}
 					type="radio"
-					class={theme?.radio_button_input}
+					class={styles.radio_button_input}
 					name={group}
 					value={id}
 					disabled={disabled}
@@ -71,10 +70,10 @@ export function RadioButtons<T>(props: {
 
 				return <label
 					for={id}
-					class={theme?.radio_button_label}
+					class={styles.radio_button_label}
 				>
-					{theme?.radio_button_padding ? <div class={theme.radio_button_padding}>{input}</div> : input}
-					<Text class={theme?.radio_button_content}>
+					<div class={styles.radio_button_padding}>{input}</div>
+					<Text class={styles.radio_button_content}>
 						{option.label}
 					</Text>
 				</label>;

package/src/components/row.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/row.module.css";
 import { ClassValue, Expression, get, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 
 export type RowAlignment = "top" | "center" | "bottom";
@@ -13,13 +13,12 @@ export function Row(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		id={props.id}
 		class={[
-			theme?.row,
-			() => theme?.[`row_${get(props.size) ?? "control"}`],
-			map(props.padded, padded => padded ? theme?.row_padded : undefined),
+			styles.row,
+			() => styles[get(props.size) ?? "control"],
+			map(props.padded, padded => padded ? styles.padded : undefined),
 			props.class,
 		]}
 		style={[

package/src/components/scroll-view.tsx

@@ -1,6 +1,6 @@
 import { $, ClassValue, StyleValue, teardown } from "rvx";
 import { debounceEvent } from "../common/events.js";
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/scroll-view.module.css";
 import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP, WritingMode } from "../common/writing-mode.js";
 
 const DEBOUNCE_DELAY = 100;
@@ -13,13 +13,12 @@ export function ScrollView(props: {
 	children?: unknown;
 	scrollbarComp?: boolean;
 }): unknown {
-	const theme = THEME.current;
 	const vertical = $<boolean | undefined>(undefined);
 	const scrollbarComp = props.scrollbarComp ? $(0) : undefined;
 	const startIndicator = $(false);
 	const endIndicator = $(false);
 
-	const content = <div class={theme?.scroll_view_content}>
+	const content = <div class={styles.content}>
 		{props.children}
 	</div> as HTMLElement;
 
@@ -45,7 +44,7 @@ export function ScrollView(props: {
 	const area = <div
 		class={[
 			props.contentClass,
-			theme?.scroll_view_area,
+			styles.area,
 		]}
 		style={[
 			props.contentStyle,
@@ -62,7 +61,7 @@ export function ScrollView(props: {
 	const root = <div
 		class={[
 			props.class,
-			theme?.scroll_view,
+			styles.scroll_view,
 		]}
 		style={[
 			props.style,
@@ -73,12 +72,12 @@ export function ScrollView(props: {
 	>
 		{area}
 		<div class={[
-			theme?.scroll_view_indicator_start,
-			() => startIndicator.value && theme?.scroll_view_indicator_visible,
+			styles.indicator_start,
+			() => startIndicator.value && styles.indicator_visible,
 		]} />
 		<div class={[
-			theme?.scroll_view_indicator_end,
-			() => endIndicator.value && theme?.scroll_view_indicator_visible,
+			styles.indicator_end,
+			() => endIndicator.value && styles.indicator_visible,
 		]} />
 	</div> as HTMLElement;