@rvx/ui 0.1.26 → 0.1.28

package/src/components/tabs.tsx

@@ -1,4 +1,4 @@
-import { $, Component, Expression, For, get, map, Show, Signal, uniqueIdFor, watch } from "rvx";
+import { $, ClassValue, Component, Expression, For, get, map, Show, Signal, StyleValue, uniqueIdFor, watch } from "rvx";
 import { string } from "rvx/convert";
 import { THEME } from "../common/theme.js";
 
@@ -10,58 +10,93 @@ export interface Tab {
 export function Tabs(props: {
 	tabs: Expression<Iterable<Tab>>;
 	selected?: Signal<Tab | undefined>;
-	padded?: Expression<boolean | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	list?: Component<{ tabs: Expression<Iterable<Tab>>, selected: Signal<Tab | undefined> }>;
+	panel?: Component<{ tab: Expression<Tab | undefined>, content?: Component<Component> }>;
+	content?: Component<Component>;
 }) {
-	const theme = THEME.current;
 	const selected = props.selected ?? $(undefined);
+	const List = props.list ?? TabList;
+	const Panel = props.panel ?? TabPanel;
+	selectFallbackTab(props.tabs, selected);
+	return <>
+		<List tabs={props.tabs} selected={selected} />
+		<Panel tab={selected} content={props.content} />
+	</>;
+}
 
+export function selectFallbackTab(tabs: Expression<Iterable<Tab>>, selected: Signal<Tab | undefined>) {
 	watch(selected, current => {
 		if (current === undefined) {
-			for (const tab of get(props.tabs)) {
+			for (const tab of get(tabs)) {
 				selected.value = tab;
 				break;
 			}
 		}
 	});
+}
 
-	return <>
-		<div
-			role="tablist"
-			class={[
-				theme?.tab_list,
-				map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
-			]}
-		>
-			<For each={props.tabs}>
-				{tab => <button
-					role="tab"
-					class={[
-						theme?.tab_handle,
-						() => selected.value === tab ? theme?.tab_handle_current : undefined,
-					]}
-					aria-selected={string(() => selected.value === tab)}
-					aria-controls={uniqueIdFor(tab)}
-					on:click={event => {
-						event.stopImmediatePropagation();
-						event.preventDefault();
-						selected.value = tab;
-					}}
-				>
-					{tab.label()}
-				</button>}
-			</For>
-		</div>
-		<Show when={selected}>
-			{tab => <div
-				role="tabpanel"
-				id={uniqueIdFor(tab)}
+export function TabList(props: {
+	tabs: Expression<Iterable<Tab>>;
+	selected: Signal<Tab | undefined>;
+	padded?: Expression<boolean | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+}) {
+	const theme = THEME.current;
+	return <div
+		role="tablist"
+		class={[
+			theme?.tab_list,
+			theme?.has_separator,
+			map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
+			props.class,
+		]}
+		style={props.style}
+	>
+		<For each={props.tabs}>
+			{tab => <button
+				role="tab"
 				class={[
-					theme?.tab_panel,
-					map(props.padded, padded => padded ? theme?.tab_panel_padded : undefined),
+					theme?.tab_handle,
+					() => props.selected.value === tab ? theme?.tab_handle_current : undefined,
 				]}
+				aria-selected={string(() => props.selected.value === tab)}
+				aria-controls={uniqueIdFor(tab)}
+				on:click={event => {
+					event.stopImmediatePropagation();
+					event.preventDefault();
+					props.selected.value = tab;
+				}}
 			>
-				{tab.content()}
-			</div>}
-		</Show>
-	</>;
+				{tab.label()}
+			</button>}
+		</For>
+	</div>;
+}
+
+export function TabPanel(props: {
+	tab?: Expression<Tab | undefined>;
+	class?: ClassValue;
+	style?: StyleValue;
+	content?: Component<Component>;
+}) {
+	const theme = THEME.current;
+	return <Show when={props.tab}>
+		{tab => <div
+			role="tabpanel"
+			id={uniqueIdFor(tab)}
+			class={[
+				theme?.tab_panel,
+				props.class,
+			]}
+			style={props.style}
+		>
+			{props.content
+				? props.content(tab.content)
+				: tab.content()
+			}
+		</div>}
+	</Show>;
 }

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
+export * from "./components/separated.js";
 export * from "./components/slider.js";
 export * from "./components/tabs.js";
 export * from "./components/text-input.js";

package/src/theme/base.scss

@@ -20,20 +20,20 @@ $root-size: 14px;
 	--content-row-gap: #{px(24)};
 	--content-radius: #{px(8)};
 	--content-border: #{px(2)};
-	@include common.define-quad(content-pad, px(20), px(20));
+	@include common.define-quad(content-pad, px(16), px(16));
 
 	--group-column-gap: #{px(16)};
 	--group-row-gap: #{px(16)};
-	@include common.define-quad(group-pad, px(20), px(20));
+	@include common.define-quad(group-pad, px(16), px(16));
 
 	--control-column-gap: #{px(8)};
 	--control-row-gap: #{px(8)};
 	--control-radius: #{px(5)};
 	--control-border: #{px(2)};
 	--control-disabled: opacity(.5);
-	@include common.define-quad(control-pad, px(8), px(10));
+	@include common.define-quad(control-pad, px(7), px(8));
 
-	--input-padding: #{px(4)};
+	--input-extension: #{px(4)};
 
 	--separator: #{px(1)};
 
@@ -72,7 +72,7 @@ $root-size: 14px;
 		light: var(--control-border) dashed var(--accent),
 	),
 	separator-color: (
-		dark: rgb(64, 64, 64),
+		dark: rgb(42, 42, 42),
 		light: rgb(220, 220, 220),
 	),
 	selection-bg: (

package/src/theme/common.scss

@@ -32,20 +32,11 @@
 	--#{$name}-inline-end: #{$inline-end};
 }
 
-@mixin padding($name, $subtract: null) {
-	@if $subtract {
-		padding-block:
-			calc(var(--#{$name}-block-start) - $subtract)
-			calc(var(--#{$name}-block-end) - $subtract);
-		padding-inline:
-			calc(var(--#{$name}-inline-start) - $subtract)
-			calc(var(--#{$name}-inline-end) - $subtract);
-	} @else {
-		padding-block:
-			var(--#{$name}-block-start)
-			var(--#{$name}-block-end);
-		padding-inline:
-			var(--#{$name}-inline-start)
-			var(--#{$name}-inline-end);
-	}
+@mixin padding($name) {
+	padding-block:
+		var(--#{$name}-block-start)
+		var(--#{$name}-block-end);
+	padding-inline:
+		var(--#{$name}-inline-start)
+		var(--#{$name}-inline-end);
 }

package/src/theme/components/button.scss

@@ -129,7 +129,7 @@
 	cursor: pointer;
 
 	outline: none;
-	@include common.padding(control-pad, var(--control-border));
+	@include common.padding(control-pad);
 
 	border-radius: var(--control-radius);
 	transition: var(--color-transition) background-color,

package/src/theme/components/card.scss

@@ -29,7 +29,7 @@
 	background-color: var(--bg-alt);
 
 	&:not(.card_raw) {
-		@include common.padding(content-pad, var(--content-border));
+		@include common.padding(content-pad);
 	}
 }
 

package/src/theme/components/checkbox.scss

@@ -19,8 +19,8 @@
 }
 
 .checkbox_padding {
-	padding: var(--input-padding);
-	margin: calc(var(--input-padding) * -1);
+	padding: var(--input-extension);
+	margin: calc(var(--input-extension) * -1);
 }
 
 .checkbox_input {

package/src/theme/components/column.scss

@@ -35,7 +35,7 @@
 		}
 
 		&.column_padded {
-			@include common.padding(#{$size}-pad, var(--content-border));
+			@include common.padding(#{$size}-pad);
 		}
 	}
 }

package/src/theme/components/dialog.scss

@@ -48,7 +48,6 @@
 	box-shadow: var(--overlay-shadow);
 	border-radius: var(--content-radius);
 	border: var(--content-border) solid var(--overlay-border);
-	@include common.padding(content-pad, var(--content-border));
 }
 
 .dialog_scroll_view {
@@ -59,5 +58,5 @@
 }
 
 .dialog_scroll_view_content {
-	@include common.padding(content-pad, var(--content-border));
+	@include common.padding(content-pad);
 }

package/src/theme/components/dropdown.scss

@@ -34,7 +34,8 @@
 
 .dropdown_item {
 	cursor: pointer;
-	@include common.padding(control-pad, var(--control-border));
+	@include common.padding(control-pad);
+	border: transparent solid var(--control-border);
 
 	&.dropdown_item_active {
 		background-color: var(--dropdown-item-active-bg);

package/src/theme/components/nav-list.scss

@@ -56,13 +56,13 @@
 	background-color: var(--nav-list-item-bg);
 	color: var(--nav-list-item-fg);
 	border: var(--nav-list-item-border) solid var(--control-border);
+	border-radius: var(--control-radius);
 
 	cursor: pointer;
 
 	outline: none;
-	@include common.padding(control-pad, var(--control-border));
+	@include common.padding(control-pad);
 
-	border-radius: var(--control-radius);
 	transition: var(--color-transition) background-color,
 		var(--color-transition) border-color;
 

package/src/theme/components/notifications.scss

@@ -50,7 +50,7 @@
 	background-color: var(--bg);
 
 	&:not(.notification_raw) {
-		@include common.padding(content-pad, var(--content-border));
+		@include common.padding(content-pad);
 	}
 }
 

package/src/theme/components/popover.scss

@@ -42,5 +42,8 @@
 .popover_content {
 	border-radius: var(--content-radius);
 	border: var(--content-border) solid var(--overlay-border);
-	@include common.padding(content-pad, var(--content-border));
+
+	&:not(.popover_raw) {
+		@include common.padding(content-pad);
+	}
 }

package/src/theme/components/radio-buttons.scss

@@ -25,8 +25,8 @@
 }
 
 .radio_button_padding {
-	padding: var(--input-padding);
-	margin: calc(var(--input-padding) * -1);
+	padding: var(--input-extension);
+	margin: calc(var(--input-extension) * -1);
 }
 
 .radio_button_input {

package/src/theme/components/row.scss

@@ -1,3 +1,4 @@
+@use "../common";
 
 .row {
 	display: flex;
@@ -13,5 +14,9 @@
 			--parent-column-gap: var(--#{$size}-column-gap);
 			--parent-row-gap: var(--#{$size}-row-gap);
 		}
+
+		&.row_padded {
+			@include common.padding(#{$size}-pad);
+		}
 	}
 }

package/src/theme/components/separated.scss

@@ -0,0 +1,24 @@
+
+.separated_column {
+	display: flex;
+	flex-direction: column;
+
+	& > * {
+		overflow: hidden;
+	}
+	& > :not(.has_separator) + :not(.has_separator) {
+		border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+	}
+}
+
+.separated_row {
+	display: flex;
+	flex-direction: row;
+
+	& > * {
+		overflow: hidden;
+	}
+	& > :not(.has_separator) + :not(.has_separator) {
+		border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+	}
+}

package/src/theme/components/tabs.scss

@@ -33,6 +33,12 @@
 	border-bottom: var(--separator) solid var(--separator-color);
 }
 
+.tab_list_padded {
+	padding-inline:
+		calc(var(--content-pad-inline-start) - var(--control-pad-inline-start))
+		calc(var(--content-pad-inline-end) - var(--control-pad-inline-end));
+}
+
 .tab_handle {
 	font-family: inherit;
 	font-size: inherit;
@@ -43,11 +49,11 @@
 	outline: none;
 
 	padding-block:
-		var(--control-pad-block-start)
-		calc(var(--control-pad-block-end) - var(--control-border));
+		calc(var(--control-pad-block-start) + var(--control-border))
+		var(--control-pad-block-end);
 	padding-inline:
-		var(--control-pad-inline-start)
-		var(--control-pad-inline-end);
+		calc(var(--control-pad-inline-start) + var(--control-border))
+		calc(var(--control-pad-inline-end) + var(--control-border));
 
 	background-color: transparent;
 	color: var(--tab-handle-fg);
@@ -73,6 +79,12 @@
 	color: var(--tab-handle-fg-current);
 }
 
+.tab_panel {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+}
+
 .tab_panel_padded {
-	@include common.padding(content-pad, var(--content-border));
+	@include common.padding(content-pad);
 }

package/src/theme/components/text-input.scss

@@ -46,5 +46,5 @@
 }
 
 input.text_input {
-	block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end));
+	block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end) + var(--control-border) * 2);
 }

package/src/theme/theme.scss

@@ -20,6 +20,7 @@
 @forward "components/radio-buttons";
 @forward "components/row";
 @forward "components/scroll-view";
+@forward "components/separated";
 @forward "components/slider";
 @forward "components/tabs";
 @forward "components/text-input";