@monimesl/dot-renderer-react 0.1.0-alpha.9 → 1.0.0-beta.1

package/dist/components/steps.js

@@ -0,0 +1,110 @@
+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
+});
+function stepMark(colors, status) {
+	switch (status) {
+		case "done": return {
+			background: colors.success,
+			border: colors.success,
+			icon: "check"
+		};
+		case "failed": return {
+			background: colors.danger,
+			border: colors.danger,
+			icon: "close"
+		};
+		case "current": return {
+			background: colors.primary,
+			border: colors.primary,
+			icon: void 0
+		};
+		case "upcoming": return {
+			background: "transparent",
+			border: colors.subtle,
+			icon: void 0
+		};
+	}
+}
+const Step = ({ title, text, status = "upcoming" }) => {
+	const { colors } = useTheme();
+	const { background, border, icon } = stepMark(colors, status);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "dot-step",
+		"aria-current": status === "current" ? "step" : void 0,
+		style: {
+			display: "flex",
+			gap: 12,
+			listStyle: "none"
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					...CENTERED,
+					flexShrink: 0,
+					width: MARK_SIZE,
+					height: MARK_SIZE,
+					boxSizing: "border-box",
+					borderRadius: "50%",
+					border: `2px solid ${border}`,
+					background
+				},
+				children: icon ? /* @__PURE__ */ jsx(IconGraphic, {
+					name: icon,
+					size: 14,
+					color: "#ffffff"
+				}) : null
+			}), /* @__PURE__ */ jsx("span", {
+				className: "dot-step-line",
+				style: {
+					flex: 1,
+					width: 2,
+					minHeight: 12,
+					background: colors.border
+				}
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2,
+				paddingBottom: 16
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.body,
+					fontWeight: status === "current" ? WEIGHTS.bold : WEIGHTS.medium,
+					color: status === "upcoming" ? colors.subtle : colors.text,
+					lineHeight: `${MARK_SIZE}px`
+				},
+				children: title
+			}), text ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: colors.subtle
+				},
+				children: text
+			}) : null]
+		})]
+	});
+};
+//#endregion
+export { Step, Steps };

package/dist/components/tabs.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
+import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
 import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
@@ -15,6 +15,14 @@ const TabsContext = createContext({
 const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
 	const { colors, radius } = useTheme();
 	const segmented = variant === "segmented";
+	let variantStyle;
+	if (segmented) variantStyle = {
+		gap: 2,
+		padding: 3,
+		borderRadius: radius,
+		background: colors.muted
+	};
+	else variantStyle = { borderBottom: `1px solid ${colors.border}` };
 	return /* @__PURE__ */ jsx(TabsRoot, {
 		value: value ?? null,
 		onValueChange: (next) => {
@@ -26,12 +34,7 @@ const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }
 			style: {
 				display: "flex",
 				overflowX: "auto",
-				...segmented ? {
-					gap: 2,
-					padding: 3,
-					borderRadius: radius,
-					background: colors.muted
-				} : { borderBottom: `1px solid ${colors.border}` }
+				...variantStyle
 			},
 			children: /* @__PURE__ */ jsx(TabsContext.Provider, {
 				value: {
@@ -50,13 +53,22 @@ const Tab$1 = ({ value, label, badge }) => {
 	const selected = value === chosen;
 	let color = colors.subtle;
 	if (selected) color = segmented ? colors.text : colors.primary;
+	let variantStyle;
+	if (segmented) variantStyle = {
+		borderRadius: Math.max(radius - 2, 0),
+		background: selected ? colors.surface : "transparent",
+		boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
+	};
+	else variantStyle = {
+		marginBottom: -1,
+		background: "transparent",
+		borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+	};
 	return /* @__PURE__ */ jsxs(TabsTab, {
 		className: "dot-tab",
 		value,
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			gap: 6,
 			flex: "1 0 auto",
 			minHeight: segmented ? 36 : 44,
@@ -67,15 +79,7 @@ const Tab$1 = ({ value, label, badge }) => {
 			whiteSpace: "nowrap",
 			color,
 			cursor: "pointer",
-			...segmented ? {
-				borderRadius: Math.max(radius - 2, 0),
-				background: selected ? colors.surface : "transparent",
-				boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
-			} : {
-				marginBottom: -1,
-				background: "transparent",
-				borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
-			}
+			...variantStyle
 		},
 		children: [label, badge ? /* @__PURE__ */ jsx("span", {
 			style: {

package/dist/components/text.js

@@ -1,26 +1,82 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
-import { toneColor } from "./tones.js";
+import { isTone, toneColor } from "./tones.js";
+import { InsideProse } from "./prose-context.js";
+import { customColor } from "./box.js";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
 const InsideText = createContext(false);
-const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...padding }) => {
-	const { colors } = useTheme();
-	const nested = useContext(InsideText);
-	const defaultWeight = variant === "title" ? "bold" : "regular";
+const VARIANTS = {
+	display: {
+		weight: "bold",
+		lineHeight: 1.15,
+		heading: true
+	},
+	title: {
+		weight: "bold",
+		lineHeight: 1.25,
+		heading: true
+	},
+	subtitle: {
+		weight: "medium",
+		lineHeight: 1.35,
+		heading: true
+	},
+	lead: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	body: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	caption: {
+		weight: "regular",
+		lineHeight: 1.4,
+		heading: false
+	}
+};
+const LEADING_CHANGE = {
+	tight: -.1,
+	normal: 0,
+	relaxed: .2
+};
+const DECORATION = {
+	none: "none",
+	underline: "underline",
+	strikethrough: "line-through"
+};
+const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+	const theme = useTheme();
+	const insideText = useContext(InsideText);
+	const inProse = useContext(InsideProse);
+	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
+	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {
-		display: nested ? "inline" : "block",
-		margin: 0,
+		display: insideText ? "inline" : "block",
+		marginInline: 0,
+		marginBlockEnd: 0,
+		marginBlockStart: inProse && heading ? void 0 : 0,
 		fontSize: FONT_SIZE[variant],
-		lineHeight: "normal",
 		fontWeight: WEIGHTS[weight ?? defaultWeight],
-		letterSpacing: "normal",
-		color: tone ? toneColor(colors, tone) : "inherit",
+		fontStyle: italic ? "italic" : void 0,
+		letterSpacing: variant === "display" ? "-0.02em" : "normal",
+		color: tone ? textColor(tone, theme) : "inherit",
 		textAlign: align,
+		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
+		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
+		...selectable ? SELECTABLE : void 0,
 		...paddingStyle(padding)
 	};
+	if (!insideText) {
+		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
+		style.textWrap = heading ? "balance" : "pretty";
+		style.overflowWrap = "anywhere";
+	}
 	if (maxLines) {
 		style.display = "-webkit-box";
 		style.WebkitLineClamp = maxLines;
@@ -31,8 +87,8 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...pa
 		value: true,
 		children
 	});
-	if (variant === "title" && !nested) return /* @__PURE__ */ jsx("h2", {
-		className: "dot-text",
+	if ((variant === "title" || variant === "subtitle") && !insideText) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
+		className: "dot-text dot-heading",
 		style,
 		children: content
 	});
@@ -42,5 +98,10 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...pa
 		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 };

package/dist/components/toast.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../theme.js";
 import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
-import { STATUS_ICONS } from "./tones.js";
-import { IconGraphic } from "./icon.js";
+import { IconSvg } from "./icon-svg.js";
+import { STATUS_ARTWORK } from "./tones.js";
 import { createEvent } from "@monimesl/dot-core";
 import { useEffect, useEffectEvent, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,8 +45,8 @@ const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
 			fontSize: FONT_SIZE.body,
 			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
 		},
-		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconGraphic, {
-			name: STATUS_ICONS[tone],
+		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconSvg, {
+			artwork: STATUS_ARTWORK[tone],
 			size: ICON_SIZE.medium,
 			color: colors.onPrimary
 		}), /* @__PURE__ */ jsx("span", { children: message })]

package/dist/components/toggles.js

@@ -1,7 +1,8 @@
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
+import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { FieldLabel } from "./field.js";
-import { IconGraphic } from "./icon.js";
+import { CHECK_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
 import { CheckboxRoot } from "../vendor/@base-ui/react/checkbox/root/CheckboxRoot.js";
 import { CheckboxIndicator } from "../vendor/@base-ui/react/checkbox/indicator/CheckboxIndicator.js";
 import { RadioRoot } from "../vendor/@base-ui/react/radio/root/RadioRoot.js";
@@ -34,9 +35,7 @@ function ChoiceMark({ round, checked, children }) {
 	const filled = checked && !round;
 	return /* @__PURE__ */ jsx("span", {
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			flexShrink: 0,
 			width: 22,
 			height: 22,
@@ -94,8 +93,8 @@ const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
 			checked,
 			children: /* @__PURE__ */ jsx(CheckboxIndicator, {
 				style: { display: "flex" },
-				children: /* @__PURE__ */ jsx(IconGraphic, {
-					name: "check",
+				children: /* @__PURE__ */ jsx(IconSvg, {
+					artwork: CHECK_ARTWORK,
 					size: ICON_SIZE.small,
 					color: colors.onPrimary
 				})

package/dist/components/tokens.js

@@ -8,7 +8,10 @@ const SPACE = {
 const FONT_SIZE = {
 	caption: 13,
 	body: 15,
-	title: 20
+	lead: 17,
+	subtitle: 17,
+	title: 20,
+	display: 32
 };
 const WEIGHTS = {
 	regular: 400,
@@ -17,6 +20,11 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const CENTERED = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
 const ICON_SIZE = {
 	small: 16,
 	medium: 20,
@@ -33,5 +41,9 @@ const PILL_STYLE = {
 	lineHeight: "16px",
 	textAlign: "center"
 };
+const SELECTABLE = {
+	userSelect: "text",
+	WebkitUserSelect: "text"
+};
 //#endregion
-export { CARD_RADIUS_SCALE, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };

package/dist/components/tones.js

@@ -1,10 +1,16 @@
+import { ERROR_ARTWORK, INFO_ARTWORK, SUCCESS_ARTWORK, WARNING_ARTWORK } from "./icon-artwork.js";
+import { TONES } from "@monimesl/dot-core";
 //#region src/components/tones.ts
-const STATUS_ICONS = {
-	default: "info",
-	info: "info",
-	success: "success",
-	warning: "warning",
-	danger: "error"
+const TONE_WORDS = new Set(TONES);
+function isTone(word) {
+	return TONE_WORDS.has(word);
+}
+const STATUS_ARTWORK = {
+	default: INFO_ARTWORK,
+	info: INFO_ARTWORK,
+	success: SUCCESS_ARTWORK,
+	warning: WARNING_ARTWORK,
+	danger: ERROR_ARTWORK
 };
 function toneColor(colors, tone) {
 	switch (tone) {
@@ -21,4 +27,4 @@ function withOpacity(color, opacity) {
 	return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
 }
 //#endregion
-export { STATUS_ICONS, toneBackground, toneColor };
+export { STATUS_ARTWORK, isTone, toneBackground, toneColor };

package/dist/components/typed-text.js

@@ -6,8 +6,8 @@ function useTypedText(value, sendsChanges, show = (text) => text) {
 	const [previousValue, setPreviousValue] = useState(value);
 	if (value !== previousValue) {
 		setPreviousValue(value);
-		const echo = awaitingEcho.indexOf(value ?? "");
-		if (echo >= 0) setAwaitingEcho(awaitingEcho.slice(echo + 1));
+		const echoIndex = awaitingEcho.indexOf(value ?? "");
+		if (echoIndex >= 0) setAwaitingEcho(awaitingEcho.slice(echoIndex + 1));
 		else {
 			setAwaitingEcho([]);
 			setText(show(value ?? ""));

package/dist/components/view.js

@@ -1,8 +1,11 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, SPACE } from "./tokens.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 { boxStyle } from "./box.js";
 import { createEvent } from "@monimesl/dot-core";
+import { Children, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
 const ALIGN = {
@@ -17,8 +20,14 @@ const JUSTIFY = {
 	end: "flex-end",
 	between: "space-between"
 };
-const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const CARD_LOOK = {
+	background: "surface",
+	border: "subtle",
+	radius: "large"
+};
+const View$1 = (props) => {
+	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const theme = useTheme();
 	const card = variant === "card";
 	const style = {
 		display: "flex",
@@ -27,18 +36,15 @@ const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justi
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
 		gap: SPACE[gap],
-		...paddingStyle(padding, card ? insets(SPACE.large) : void 0),
+		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
+		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
 		cursor: onTap ? "pointer" : void 0
 	};
+	if (endsWithFooter(children)) style.paddingBottom = 0;
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
 	}
-	if (card) {
-		style.background = colors.surface;
-		style.border = `1px solid ${colors.border}`;
-		style.borderRadius = radius * CARD_RADIUS_SCALE;
-	}
 	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",
@@ -47,5 +53,9 @@ const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justi
 		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

@@ -2,11 +2,13 @@ import { Wrapper } from "./root.js";
 import { BuiltinReactComponents, ReactComponent, ReactComponents } from "./types.js";
 import { CreateReactRendererOptions, ReactRendererOptions, createReactRenderer, reactRenderer } from "./renderer.js";
 import { AmountInput } from "./components/amount-input.js";
+import { Avatar } from "./components/avatar.js";
 import { Button } from "./components/button.js";
 import { Carousel } from "./components/carousel.js";
 import { Chip } from "./components/chip.js";
 import { CodeInput } from "./components/code-input.js";
 import { DetailRow } from "./components/detail-row.js";
+import { Disclosure } from "./components/disclosure.js";
 import { Divider } from "./components/divider.js";
 import { EmptyState } from "./components/empty-state.js";
 import { Badge, Notice, ProgressBar } from "./components/feedback.js";
@@ -18,12 +20,18 @@ 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 { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
+import { RichText } from "./components/rich-text.js";
 import { Scroll } from "./components/scroll.js";
 import { Select } from "./components/select.js";
 import { Sheet } from "./components/sheet.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
 import { Spinner } from "./components/spinner.js";
+import { Stack } from "./components/stack.js";
+import { Step, Steps } from "./components/steps.js";
+import { Stepper } from "./components/stepper.js";
 import { Tab, Tabs } from "./components/tabs.js";
 import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
@@ -32,4 +40,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, Badge, type BuiltinReactComponents, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, Scroll, Select, Sheet, Skeleton, Spinner, 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, 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

@@ -1,5 +1,6 @@
 import { resolveTheme, useTheme } from "./theme.js";
 import { AmountInput } from "./components/amount-input.js";
+import { Avatar } from "./components/avatar.js";
 import { Spinner } from "./components/spinner.js";
 import { Button } from "./components/button.js";
 import { Carousel } from "./components/carousel.js";
@@ -7,6 +8,7 @@ import { Icon } from "./components/icon.js";
 import { Chip } from "./components/chip.js";
 import { CodeInput } from "./components/code-input.js";
 import { DetailRow } from "./components/detail-row.js";
+import { Disclosure } from "./components/disclosure.js";
 import { Divider } from "./components/divider.js";
 import { EmptyState } from "./components/empty-state.js";
 import { Badge, Notice, ProgressBar } from "./components/feedback.js";
@@ -17,13 +19,19 @@ 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 { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
+import { Text } from "./components/text.js";
+import { RichText } from "./components/rich-text.js";
 import { Scroll } from "./components/scroll.js";
 import { Sheet } from "./components/sheet.js";
 import { Select } from "./components/select.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
+import { Stack } from "./components/stack.js";
+import { Step, Steps } from "./components/steps.js";
+import { Stepper } from "./components/stepper.js";
 import { Tab, Tabs } from "./components/tabs.js";
-import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
 import { Toast } from "./components/toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
@@ -32,4 +40,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, 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, 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 };