@monimesl/dot-renderer-react 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/components/skeleton.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton.tsx
 const LINE_HEIGHT = 12;

package/dist/components/slider.js

@@ -1,5 +1,5 @@
+import { DISABLED_OPACITY } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE } from "./tokens.js";
 import { Field, FieldLabel } from "./field.js";
 import { useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";
@@ -7,7 +7,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/slider.tsx
 const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const [positionText, showPosition] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
 	const shownValue = positionText === "" ? String(min) : positionText;
@@ -23,7 +23,7 @@ const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint,
 			},
 			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle,
 					fontVariantNumeric: "tabular-nums"
 				},

package/dist/components/spinner.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner.tsx
 function LoadingIcon({ size }) {

package/dist/components/stack.js

@@ -1,4 +1,5 @@
 import { useTheme } from "../theme.js";
+import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,14 +12,17 @@ const Stack = (props) => {
 			display: "grid",
 			...boxStyle(props, theme)
 		},
-		children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
-			style: {
-				gridArea: "1 / 1",
-				display: "grid",
-				minWidth: 0
-			},
-			children: child
-		}))
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: false,
+			children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
+				style: {
+					gridArea: "1 / 1",
+					display: "grid",
+					minWidth: 0
+				},
+				children: child
+			}))
+		})
 	});
 };
 //#endregion

package/dist/components/stepper.js

@@ -1,5 +1,5 @@
+import { CENTERED, DISABLED_OPACITY, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { Field } from "./field.js";
 import { useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";
@@ -8,7 +8,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
 const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const [shownText, showText] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
 	const current = shownText === "" ? min ?? 0 : Number(shownText);
@@ -46,7 +46,7 @@ const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange
 					style: {
 						minWidth: 32,
 						textAlign: "center",
-						fontSize: FONT_SIZE.subtitle,
+						fontSize: fontSize.subtitle,
 						fontWeight: WEIGHTS.bold,
 						fontVariantNumeric: "tabular-nums",
 						color: colors.text

package/dist/components/steps.js

@@ -1,20 +1,23 @@
+import { CENTERED, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/steps.tsx
 const MARK_SIZE = 24;
-const Steps = ({ children, ...padding }) => /* @__PURE__ */ jsx("ol", {
-	className: "dot-steps",
-	style: {
-		display: "flex",
-		flexDirection: "column",
-		margin: 0,
-		...paddingStyle(padding)
-	},
-	children
-});
+const Steps = ({ children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("ol", {
+		className: "dot-steps",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			margin: 0,
+			...paddingStyle(padding, space)
+		},
+		children
+	});
+};
 function stepMark(colors, status) {
 	switch (status) {
 		case "done": return {
@@ -40,7 +43,7 @@ function stepMark(colors, status) {
 	}
 }
 const Step = ({ title, text, status = "upcoming" }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const { background, border, icon } = stepMark(colors, status);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "dot-step",
@@ -90,7 +93,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 			},
 			children: [/* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.body,
+					fontSize: fontSize.body,
 					fontWeight: status === "current" ? WEIGHTS.bold : WEIGHTS.medium,
 					color: status === "upcoming" ? colors.subtle : colors.text,
 					lineHeight: `${MARK_SIZE}px`
@@ -98,7 +101,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 				children: title
 			}), text ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle
 				},
 				children: text

package/dist/components/tabs.js

@@ -1,69 +1,93 @@
+import { CENTERED, ICON_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
 import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
 import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
 import { TabsList } from "../vendor/@base-ui/react/tabs/list/TabsList.js";
-import { createEvent } from "@monimesl/dot-core";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
 const TabsContext = createContext({
 	value: void 0,
-	segmented: false
+	variant: DEFAULT_VARIANTS.Tabs
 });
-const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
-	const { colors, radius } = useTheme();
-	const segmented = variant === "segmented";
-	let variantStyle;
-	if (segmented) variantStyle = {
+const BAR_ICON_SIZE = 24;
+const Tabs$1 = ({ value, variant = DEFAULT_VARIANTS.Tabs, onChange, children, ...padding }) => {
+	const { colors, radius, space } = useTheme();
+	let variantStyle = {};
+	if (variant === "segmented") variantStyle = {
 		gap: 2,
 		padding: 3,
 		borderRadius: radius,
 		background: colors.muted
 	};
-	else variantStyle = { borderBottom: `1px solid ${colors.border}` };
+	else if (variant === "underline") variantStyle = { boxShadow: `inset 0 -1px 0 ${colors.border}` };
 	return /* @__PURE__ */ jsx(TabsRoot, {
 		value: value ?? null,
 		onValueChange: (next) => {
 			if (next !== null && next !== value) onChange?.(createEvent("change", { value: next }));
 		},
-		style: paddingStyle(padding),
+		style: paddingStyle(padding, space),
 		children: /* @__PURE__ */ jsx(TabsList, {
 			className: "dot-tabs",
 			style: {
 				display: "flex",
 				overflowX: "auto",
+				overflowY: "hidden",
 				...variantStyle
 			},
 			children: /* @__PURE__ */ jsx(TabsContext.Provider, {
 				value: {
 					value,
-					segmented
+					variant
 				},
 				children
 			})
 		})
 	});
 };
-const Tab$1 = ({ value, label, badge }) => {
-	const { colors, radius } = useTheme();
-	const { value: chosen, segmented } = useContext(TabsContext);
+const Tab$1 = ({ value, label, icon, badge }) => {
+	const { colors, radius, fontSize } = useTheme();
+	const { value: chosen, variant } = useContext(TabsContext);
 	if (value === void 0) return null;
 	const selected = value === chosen;
+	const bar = variant === "bar";
 	let color = colors.subtle;
-	if (selected) color = segmented ? colors.text : colors.primary;
+	if (selected) color = variant === "segmented" ? colors.text : colors.primaryText;
 	let variantStyle;
-	if (segmented) variantStyle = {
+	if (variant === "segmented") variantStyle = {
+		minHeight: 36,
 		borderRadius: Math.max(radius - 2, 0),
 		background: selected ? colors.surface : "transparent",
 		boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
 	};
+	else if (bar) variantStyle = {
+		flexDirection: "column",
+		gap: 2,
+		flex: "1 1 0",
+		minWidth: 0,
+		minHeight: 50,
+		padding: "6px 4px",
+		fontSize: fontSize.caption,
+		background: "transparent"
+	};
 	else variantStyle = {
-		marginBottom: -1,
+		minHeight: 44,
 		background: "transparent",
-		borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+		boxShadow: selected ? `inset 0 -2px 0 ${colors.primary}` : "none"
 	};
+	const count = badge ? /* @__PURE__ */ jsx("span", {
+		style: {
+			...PILL_STYLE,
+			display: "block",
+			background: colors.primary,
+			color: colors.onPrimary
+		},
+		children: badge
+	}) : null;
+	const countOnIcon = bar && Boolean(icon);
 	return /* @__PURE__ */ jsxs(TabsTab, {
 		className: "dot-tab",
 		value,
@@ -71,24 +95,46 @@ const Tab$1 = ({ value, label, badge }) => {
 			...CENTERED,
 			gap: 6,
 			flex: "1 0 auto",
-			minHeight: segmented ? 36 : 44,
 			padding: "0 12px",
 			border: "none",
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			fontWeight: selected ? WEIGHTS.bold : WEIGHTS.medium,
 			whiteSpace: "nowrap",
 			color,
 			cursor: "pointer",
 			...variantStyle
 		},
-		children: [label, badge ? /* @__PURE__ */ jsx("span", {
+		children: [icon ? /* @__PURE__ */ jsxs("span", {
 			style: {
-				...PILL_STYLE,
-				background: colors.primary,
-				color: colors.onPrimary
+				position: "relative",
+				display: "inline-flex"
 			},
-			children: badge
-		}) : null]
+			children: [/* @__PURE__ */ jsx(IconGraphic, {
+				name: icon,
+				size: bar ? BAR_ICON_SIZE : ICON_SIZE.medium,
+				color: "currentColor"
+			}), countOnIcon && count ? /* @__PURE__ */ jsx("span", {
+				style: {
+					position: "absolute",
+					top: -6,
+					insetInlineStart: 16
+				},
+				children: count
+			}) : null]
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			style: {
+				...CENTERED,
+				gap: 6,
+				maxWidth: "100%"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: label
+			}), countOnIcon ? null : count]
+		})]
 	});
 };
 //#endregion

package/dist/components/text.js

@@ -1,9 +1,9 @@
+import { SELECTABLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
-import { isTone, toneColor } from "./tones.js";
+import { textToneColor } from "./box.js";
 import { InsideProse } from "./prose-context.js";
-import { customColor } from "./box.js";
+import { DEFAULT_VARIANTS } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
@@ -50,10 +50,12 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
+	let variant = namedVariant ?? DEFAULT_VARIANTS.Text;
+	if (!Object.hasOwn(VARIANTS, variant)) variant = DEFAULT_VARIANTS.Text;
 	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
 	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {
@@ -61,16 +63,17 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		marginInline: 0,
 		marginBlockEnd: 0,
 		marginBlockStart: inProse && heading ? void 0 : 0,
-		fontSize: FONT_SIZE[variant],
-		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		fontSize: theme.fontSize[variant],
+		fontFamily: heading ? theme.headingFontFamily : void 0,
+		fontWeight: WEIGHTS[weight ?? (heading ? theme.headingWeight : void 0) ?? defaultWeight],
 		fontStyle: italic ? "italic" : void 0,
 		letterSpacing: variant === "display" ? "-0.02em" : "normal",
-		color: tone ? textColor(tone, theme) : "inherit",
+		color: tone ? textToneColor(tone, theme) : "inherit",
 		textAlign: align,
 		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
 		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
 		...selectable ? SELECTABLE : void 0,
-		...paddingStyle(padding)
+		...paddingStyle(padding, theme.space)
 	};
 	if (!insideText) {
 		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
@@ -98,10 +101,5 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		children: content
 	});
 };
-function textColor(tone, theme) {
-	if (isTone(tone)) return toneColor(theme.colors, tone);
-	if (tone === "onPrimary") return theme.colors.onPrimary;
-	return customColor(tone, theme);
-}
 //#endregion
-export { Text };
+export { Text$1 as Text };

package/dist/components/toast.js

@@ -1,5 +1,5 @@
+import { ICON_SIZE, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { IconSvg } from "./icon-svg.js";
 import { STATUS_ARTWORK } from "./tones.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -7,7 +7,7 @@ import { useEffect, useEffectEvent, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toast.tsx
 const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontSize } = useTheme();
 	const [hidden, setHidden] = useState(false);
 	const [previousMessage, setPreviousMessage] = useState(message);
 	if (message !== previousMessage) {
@@ -42,7 +42,7 @@ const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
 			borderRadius: radius,
 			background: colors.primary,
 			color: colors.onPrimary,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
 		},
 		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconSvg, {

package/dist/components/toggles.js

@@ -1,5 +1,5 @@
+import { CENTERED, DISABLED_OPACITY, ICON_SIZE, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { FieldLabel } from "./field.js";
 import { CHECK_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
@@ -14,7 +14,8 @@ import { createEvent } from "@monimesl/dot-core";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toggles.tsx
-function rowStyle(colors, disabled) {
+function rowStyle(theme, disabled) {
+	const { colors, fontSize } = theme;
 	return {
 		display: "flex",
 		alignItems: "center",
@@ -24,7 +25,7 @@ function rowStyle(colors, disabled) {
 		border: "none",
 		background: "transparent",
 		color: colors.text,
-		fontSize: FONT_SIZE.body,
+		fontSize: fontSize.body,
 		textAlign: "start",
 		opacity: disabled ? DISABLED_OPACITY : 1,
 		cursor: disabled ? "default" : "pointer"
@@ -47,14 +48,15 @@ function ChoiceMark({ round, checked, children }) {
 	});
 }
 const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(SwitchRoot, {
 		className: "dot-switch",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
 		style: {
-			...rowStyle(colors, disabled),
+			...rowStyle(theme, disabled),
 			justifyContent: "space-between"
 		},
 		children: [label ? /* @__PURE__ */ jsx("span", { children: label }) : null, /* @__PURE__ */ jsx("span", {
@@ -81,13 +83,14 @@ const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
 	});
 };
 const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(CheckboxRoot, {
 		className: "dot-checkbox",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
-		style: rowStyle(colors, disabled),
+		style: rowStyle(theme, disabled),
 		children: [/* @__PURE__ */ jsx(ChoiceMark, {
 			round: false,
 			checked,
@@ -122,13 +125,14 @@ const RadioGroup$1 = ({ value, label, disabled = false, onChange, children }) =>
 	});
 };
 const Radio$1 = ({ value, label, disabled }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	if (value === void 0) return null;
 	return /* @__PURE__ */ jsx(RadioRoot, {
 		className: "dot-radio",
 		value,
 		disabled,
-		style: (state) => rowStyle(colors, state.disabled),
+		style: (state) => rowStyle(theme, state.disabled),
 		render: (props, state) => /* @__PURE__ */ jsxs("span", {
 			...props,
 			children: [/* @__PURE__ */ jsx(ChoiceMark, {

package/dist/components/tokens.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/tokens.d.ts
+export declare const SPACE: {
+  readonly none: 0;
+  readonly small: 4;
+  readonly medium: 8;
+  readonly large: 16;
+};
+export declare const FONT_SIZE: {
+  readonly caption: 13;
+  readonly body: 15;
+  readonly lead: 17;
+  readonly subtitle: 17;
+  readonly title: 20;
+  readonly display: 32;
+};
+//#endregion

package/dist/components/tokens.js

@@ -20,6 +20,25 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const SHADOWS = {
+	light: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14)"
+	},
+	dark: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5)"
+	}
+};
+const SHADOW_REACH = {
+	top: 20,
+	sides: 32,
+	bottom: 44
+};
+const SCROLL_SHADOW_ROOM = {
+	top: 6,
+	bottom: 10
+};
 const CENTERED = {
 	display: "flex",
 	alignItems: "center",
@@ -46,4 +65,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SCROLL_SHADOW_ROOM, SELECTABLE, SHADOWS, SHADOW_REACH, SPACE, WEIGHTS };

package/dist/components/view.js

@@ -1,11 +1,11 @@
+import { SHADOWS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
-import { Footer as Footer$1 } from "./footer.js";
-import { pressable } from "./pressable.js";
+import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
-import { createEvent } from "@monimesl/dot-core";
-import { Children, isValidElement } from "react";
+import { pressable } from "./pressable.js";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
 const ALIGN = {
@@ -25,22 +25,36 @@ const CARD_LOOK = {
 	border: "subtle",
 	radius: "large"
 };
+const RAISED_CARD_LOOK = {
+	...CARD_LOOK,
+	border: "none"
+};
 const View$1 = (props) => {
-	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const { id, direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
 	const theme = useTheme();
+	const sideRoomAround = useContext(SideRoomContext);
 	const card = variant === "card";
+	const raisedCard = card && theme.elevation === "raised" && props.elevation !== "none";
+	let cardLook;
+	if (card) cardLook = raisedCard ? RAISED_CARD_LOOK : CARD_LOOK;
+	const elevation = props.elevation ?? (raisedCard ? "low" : "none");
+	const padding = paddingStyle(props, theme.space, card ? insets(theme.space.large) : void 0);
 	const style = {
 		display: "flex",
 		flexDirection: direction,
 		alignItems: ALIGN[align],
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
-		gap: SPACE[gap],
-		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
-		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
+		gap: theme.space[gap],
+		...padding,
+		"--dot-view-top": `${padding.paddingTop}px`,
+		"--dot-view-bottom": `${padding.paddingBottom}px`,
+		"--dot-view-start": `${padding.paddingInlineStart}px`,
+		"--dot-view-end": `${padding.paddingInlineEnd}px`,
+		...boxStyle(props, theme, cardLook),
 		cursor: onTap ? "pointer" : void 0
 	};
-	if (endsWithFooter(children)) style.paddingBottom = 0;
+	if (elevation !== "none") style.boxShadow = SHADOWS[theme.scheme][elevation];
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
@@ -48,14 +62,14 @@ const View$1 = (props) => {
 	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",
+		"data-dot-view": id,
 		style,
 		...press,
-		children
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: sideRoomAround && direction !== "row",
+			children
+		})
 	});
 };
-function endsWithFooter(children) {
-	const last = Children.toArray(children).at(-1);
-	return isValidElement(last) && last.type === Footer$1;
-}
 //#endregion
 export { View$1 as View };

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { RichText } from "./components/rich-text.js";
@@ -40,4 +41,4 @@ import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
 import { View } from "./components/view.js";
 import "./components/index.js";
 import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
-export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -19,6 +19,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { Text } from "./components/text.js";
@@ -40,4 +41,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };