@plastic-js/tsumiki 0.1.28 → 0.1.30

package/dist/components/BackToTop.js

@@ -0,0 +1,99 @@
+import { insert, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { createSignal, mergeProps as mergeProps$1, onCleanup, splitProps } from "@plastic-js/plastic";
+//#region src/components/BackToTop.jsx
+var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><title>Back to top</title><path d=\"m18 15-6-6-6 6\"></path></svg>");
+var _tmpl = template("<button type=\"button\"></button>");
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({
+	position: "fixed",
+	right: "var(--tsu-spacing-lg)",
+	bottom: "var(--tsu-spacing-xl)",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "48px",
+	height: "48px",
+	border: "none",
+	borderRadius: "50%",
+	backgroundColor: "var(--tsu-accent-9)",
+	color: "var(--tsu-bg)",
+	boxShadow: "var(--tsu-shadow-md)",
+	cursor: "pointer",
+	userSelect: "none",
+	touchAction: "manipulation",
+	zIndex: 90,
+	opacity: 0,
+	transform: "scale(0.8)",
+	pointerEvents: "none",
+	transition: "opacity var(--tsu-transition-normal), transform var(--tsu-transition-normal)",
+	"&:active": { transform: "scale(0.9)" },
+	"&:focus-visible": {
+		outline: "2px solid var(--tsu-accent-8)",
+		outlineOffset: "2px"
+	}
+});
+var visibleClass = css({
+	opacity: 1,
+	transform: "scale(1)",
+	pointerEvents: "auto"
+});
+var iconClass = css({
+	display: "block",
+	width: "22px",
+	height: "22px"
+});
+var BackToTop = (props = {}) => {
+	const [local] = splitProps(mergeProps$1({ threshold: 200 }, props), [
+		"className",
+		"threshold",
+		"target",
+		"icon",
+		"aria-label",
+		"onClick"
+	]);
+	const visible = createSignal(false);
+	const getEl = () => typeof local.target === "function" ? local.target() : null;
+	const onScroll = () => {
+		const el = getEl();
+		visible((el ? el.scrollTop : window.scrollY) > read(local.threshold));
+	};
+	onCleanup(() => {
+		window.removeEventListener("scroll", onScroll, true);
+	});
+	window.addEventListener("scroll", onScroll, {
+		capture: true,
+		passive: true
+	});
+	const handleClick = () => {
+		const el = getEl();
+		if (el) el.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		else window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		local.onClick?.();
+	};
+	return () => {
+		const _el0 = _tmpl.cloneNode(true);
+		insert(_el0, () => local.icon || (() => {
+			const _el0 = _tmpl2.cloneNode(true);
+			setProp(_el0, "className", () => iconClass);
+			return _el0;
+		})());
+		setProp(_el0, "className", () => [
+			baseClass,
+			visible() && visibleClass,
+			local.className
+		].filter(Boolean).join(" "));
+		setProp(_el0, "onClick", () => handleClick);
+		setProp(_el0, "aria-label", () => local["aria-label"] || "Back to top");
+		return _el0;
+	};
+};
+BackToTop.origin = { Root: "button" };
+//#endregion
+export { BackToTop as default };

package/dist/components/BottomNavigation.js

@@ -0,0 +1,98 @@
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Dynamic, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/BottomNavigation.jsx
+var _tmpl = template("<span></span>");
+var read = (v) => typeof v === "function" ? v() : v;
+var rootClass = css({
+	position: "fixed",
+	insetInline: "0",
+	bottom: "0",
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center",
+	height: "56px",
+	paddingBottom: "env(safe-area-inset-bottom)",
+	backgroundColor: "var(--tsu-bg)",
+	borderTop: "1px solid var(--tsu-neutral-6)",
+	zIndex: "var(--tsu-z-base)"
+});
+var itemClass = css({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xxs)",
+	padding: "4px 12px",
+	border: "none",
+	background: "none",
+	fontFamily: "inherit",
+	color: "var(--tsu-neutral-8)",
+	textDecoration: "none",
+	cursor: "pointer",
+	userSelect: "none",
+	touchAction: "manipulation",
+	transition: "color var(--tsu-transition-fast)",
+	"&[data-active]": { color: "var(--tsu-accent-11)" }
+});
+var iconClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "24px",
+	height: "24px",
+	"& svg": {
+		width: "100%",
+		height: "100%"
+	}
+});
+var labelClass = css({
+	fontSize: "11px",
+	lineHeight: "14px",
+	fontWeight: 500
+});
+var BottomNavigationItem = (props = {}) => {
+	const [local, rest] = splitProps(props, [
+		"icon",
+		"label",
+		"active",
+		"href",
+		"onClick",
+		"className"
+	]);
+	return jsx(Dynamic, mergeProps({ component: local.href ? "a" : "button" }, () => local.href ? { href: local.href } : { type: "button" }, {
+		get className() {
+			return [itemClass, local.className].filter(Boolean).join(" ");
+		},
+		"data-active": () => read(local.active) ? "" : void 0,
+		get onClick() {
+			return local.onClick;
+		},
+		children: [() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.icon);
+			setProp(_el0, "className", () => iconClass);
+			return _el0;
+		}, () => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.label);
+			setProp(_el0, "className", () => labelClass);
+			return _el0;
+		}]
+	}));
+};
+var BottomNavigation = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("nav", mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+BottomNavigation.Item = BottomNavigationItem;
+BottomNavigation.origin = {
+	Root: "nav",
+	Item: BottomNavigationItem
+};
+//#endregion
+export { BottomNavigationItem, BottomNavigation as default };

package/dist/components/Button.js

@@ -116,7 +116,10 @@ var loadingMaskClass = css({
 });
 var loadingSpinnerClass = css({
 	position: "relative",
-	zIndex: 1
+	zIndex: 1,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
 });
 var loadingClass = css({ pointerEvents: "none" });
 var read = (v) => typeof v === "function" ? v() : v;

package/dist/components/Card.js

@@ -0,0 +1,20 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/Card.jsx
+var baseClass = css({
+	backgroundColor: "var(--tsu-bg)",
+	borderRadius: "var(--tsu-radius-l2-md)"
+});
+var Card = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("div", mergeProps(rest, {
+		get className() {
+			return [baseClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Card.origin = { Root: "div" };
+//#endregion
+export { Card as default };

package/dist/components/Collapsible.js

@@ -1,12 +1,45 @@
-import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { Collapsible } from "@plastic-js/ark";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Collapsible.jsx
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column"
 });
+var triggerClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
+	border: "none",
+	background: "var(--tsu-neutral-2)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	fontWeight: 500,
+	fontFamily: "inherit",
+	cursor: "pointer",
+	textAlign: "left",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast)",
+	"& svg": {
+		flexShrink: 0,
+		width: "16px",
+		height: "16px",
+		color: "var(--tsu-neutral-11)",
+		transition: "transform var(--tsu-transition-normal)"
+	},
+	"&[aria-expanded=\"true\"] svg": { transform: "rotate(180deg)" },
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var contentClass = css({ padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)" });
 var Collapsible$1 = (props = {}) => {
 	const [local, rest] = splitProps(props, ["className", "children"]);
 	return jsx(Collapsible.Root, mergeProps(rest, {
@@ -16,10 +49,25 @@ var Collapsible$1 = (props = {}) => {
 		children: () => local.children
 	}));
 };
+var CollapsibleTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Collapsible.Trigger, mergeProps(rest, {
+		get className() {
+			return [triggerClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [() => local.children, _tmpl.cloneNode(true)]
+	}));
+};
+var CollapsibleContent = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Collapsible.Content, mergeProps(rest, { get className() {
+		return [contentClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
 Collapsible$1.origin = {
 	Root: Collapsible.Root,
 	Trigger: Collapsible.Trigger,
 	Content: Collapsible.Content
 };
 //#endregion
-export { Collapsible$1 as default };
+export { CollapsibleContent, CollapsibleTrigger, Collapsible$1 as default };

package/dist/components/FilterGroup.js

@@ -0,0 +1,159 @@
+import ToggleGroup, { ToggleGroupItem } from "./ToggleGroup.js";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/FilterGroup.jsx
+var _tmpl = template("<button type=\"button\"></button>");
+var access = (v) => typeof v === "function" ? v() : v;
+var sizeVars = {
+	xs: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-xs)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-xs)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-xs)",
+		"--_tg-radius": "var(--tsu-radius-l1-xs)"
+	},
+	sm: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-sm)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-sm)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-sm)",
+		"--_tg-radius": "var(--tsu-radius-l1-sm)"
+	},
+	md: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-md)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-md)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-md)",
+		"--_tg-radius": "var(--tsu-radius-l1-md)"
+	},
+	lg: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-lg)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-lg)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-lg)",
+		"--_tg-radius": "var(--tsu-radius-l1-lg)"
+	},
+	xl: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-xl)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-xl)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-xl)",
+		"--_tg-radius": "var(--tsu-radius-l1-xl)"
+	}
+};
+var defaultStyle = {
+	"--_tg-border": "var(--tsu-accent-9)",
+	"--_fg-gap": "var(--tsu-spacing-sm)"
+};
+var rootClass = css({
+	display: "inline-flex",
+	gap: "var(--_fg-gap, var(--tsu-spacing-sm))"
+});
+var allClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "var(--_tg-padding-y, var(--tsu-comp-padding-y-md)) var(--_tg-padding-x, var(--tsu-comp-padding-x-md))",
+	border: "1px solid var(--_tg-border)",
+	borderRadius: "var(--tsu-radius-round)",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
+	fontWeight: 500,
+	fontFamily: "inherit",
+	cursor: "pointer",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	"&[data-state=\"on\"]": {
+		backgroundColor: "var(--tsu-accent-9)",
+		color: "var(--tsu-bg)"
+	},
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var groupClass = css({
+	border: "none",
+	overflow: "visible",
+	gap: "var(--_fg-gap, var(--tsu-spacing-sm))"
+});
+var itemClass = css({
+	border: "1px solid var(--_tg-border)",
+	borderRadius: "var(--tsu-radius-round)",
+	"&:last-child": { border: "1px solid var(--_tg-border)" }
+});
+var FilterGroup = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		allLabel: "All",
+		items: []
+	}, props), [
+		"className",
+		"items",
+		"value",
+		"onValueChange",
+		"allLabel",
+		"size",
+		"buttonClass",
+		"groupClass"
+	]);
+	const value = () => access(local.value) ?? [];
+	const allActive = () => value().length === 0;
+	const emit = (val) => {
+		local.onValueChange?.(val);
+	};
+	const handleAllClick = () => {
+		if (allActive()) return;
+		emit([]);
+	};
+	const handleChange = (value) => emit(value);
+	return jsx("div", mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		get style() {
+			return {
+				...defaultStyle,
+				...sizeVars[local.size]
+			};
+		},
+		children: [() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.allLabel);
+			setProp(_el0, "className", () => [allClass, local.buttonClass].filter(Boolean).join(" "));
+			setProp(_el0, "data-state", () => allActive() ? "on" : "off");
+			setProp(_el0, "onClick", () => handleAllClick);
+			return _el0;
+		}, jsx(ToggleGroup, mergeProps({
+			multiple: true,
+			get size() {
+				return local.size;
+			},
+			get value() {
+				return allActive() ? [] : value();
+			},
+			onValueChange: handleChange,
+			get className() {
+				return [groupClass, local.groupClass].filter(Boolean).join(" ");
+			},
+			children: () => local.items.map((item) => jsx(ToggleGroupItem, mergeProps({
+				get key() {
+					return item.value;
+				},
+				get value() {
+					return item.value;
+				},
+				get disabled() {
+					return item.disabled;
+				},
+				get className() {
+					return [itemClass, local.buttonClass].filter(Boolean).join(" ");
+				},
+				children: () => item.label
+			})))
+		}))]
+	}));
+};
+FilterGroup.origin = {
+	ToggleGroup,
+	ToggleGroupItem
+};
+//#endregion
+export { FilterGroup as default };

package/dist/components/Link.js

@@ -0,0 +1,32 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/Link.jsx
+var baseClass = css({
+	color: "var(--tsu-accent-11)",
+	textDecoration: "none",
+	cursor: "pointer",
+	fontWeight: 500,
+	transition: "color var(--tsu-transition-fast), text-decoration-color var(--tsu-transition-fast)",
+	"&:hover": {
+		textDecoration: "underline",
+		textDecorationColor: "var(--tsu-accent-6)"
+	},
+	"&:focus-visible": {
+		outline: "2px solid var(--tsu-focus-border)",
+		outlineOffset: "2px",
+		borderRadius: "2px"
+	}
+});
+var Link = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("a", mergeProps(rest, {
+		get className() {
+			return [baseClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Link.origin = { Root: "a" };
+//#endregion
+export { Link as default };

package/dist/components/SafeArea.js

@@ -0,0 +1,30 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/SafeArea.jsx
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({ boxSizing: "border-box" });
+var positionClasses = {
+	top: css({ paddingTop: "env(safe-area-inset-top)" }),
+	bottom: css({ paddingBottom: "env(safe-area-inset-bottom)" }),
+	left: css({ paddingLeft: "env(safe-area-inset-left)" }),
+	right: css({ paddingRight: "env(safe-area-inset-right)" })
+};
+var SafeArea = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({ position: "top" }, props), [
+		"className",
+		"children",
+		"position"
+	]);
+	return jsx("div", mergeProps(rest, {
+		className: () => [
+			baseClass,
+			positionClasses[read(local.position)],
+			local.className
+		].filter(Boolean).join(" "),
+		children: () => local.children
+	}));
+};
+SafeArea.origin = { Root: "div" };
+//#endregion
+export { SafeArea as default };

package/dist/components/Select.js

@@ -352,9 +352,7 @@ var Content = () => {
 	};
 	return jsx("div", mergeProps(() => part("positioner"), {
 		"aria-hidden": () => !ctx.open(),
-		get className() {
-			return `${overlayClass} ${ctx.open() ? openClass : ""}`;
-		},
+		className: () => `${overlayClass} ${ctx.open() ? openClass : ""}`,
 		children: [jsx("div", mergeProps(() => part("backdrop"), {
 			get className() {
 				return `${backdropClass} ${ctx.backdropClassName ?? ""}`;

package/dist/components/SelectPc.js

@@ -236,4 +236,4 @@ SelectPc.origin = {
 	HiddenSelect: Select.HiddenSelect
 };
 //#endregion
-export { SelectPc as default };
+export { SelectItem, SelectPc as default };

package/dist/components/StickyHeader.js

@@ -0,0 +1,35 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/StickyHeader.jsx
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({
+	position: "sticky",
+	zIndex: "var(--tsu-z-dropdown)",
+	backgroundColor: "var(--tsu-bg)"
+});
+var shadowClass = css({ boxShadow: "var(--tsu-shadow-sm)" });
+var StickyHeader = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({ offsetTop: 0 }, props), [
+		"className",
+		"children",
+		"offsetTop",
+		"shadow",
+		"style"
+	]);
+	return jsx("div", mergeProps(rest, {
+		className: () => [
+			baseClass,
+			read(local.shadow) && shadowClass,
+			local.className
+		].filter(Boolean).join(" "),
+		style: () => ({
+			top: `${read(local.offsetTop)}px`,
+			...typeof local.style === "object" && local.style ? local.style : void 0
+		}),
+		children: () => local.children
+	}));
+};
+StickyHeader.origin = { Root: "div" };
+//#endregion
+export { StickyHeader as default };

package/dist/components/TreeView.js

@@ -112,5 +112,11 @@ TreeView$1.origin = {
 	Label: TreeView.Label,
 	Tree: TreeView.Tree
 };
+TreeView$1.treeViewPart = TreeView.Root.treeViewPart;
+TreeViewBranch.treeViewPart = TreeView.Branch.treeViewPart;
+TreeViewBranchTrigger.treeViewPart = TreeView.BranchTrigger.treeViewPart;
+TreeViewBranchContent.treeViewPart = TreeView.BranchContent.treeViewPart;
+TreeViewBranchControl.treeViewPart = TreeView.BranchControl.treeViewPart;
+TreeViewItem.treeViewPart = TreeView.Item.treeViewPart;
 //#endregion
 export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, TreeView$1 as default };

package/dist/index.js

@@ -1,16 +1,19 @@
 import AccordionRoot, { AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion.js";
 import Avatar, { AvatarFallback, AvatarImage } from "./components/Avatar.js";
+import BackToTop from "./components/BackToTop.js";
+import BottomNavigation, { BottomNavigationItem } from "./components/BottomNavigation.js";
 import Portal_default from "./components/Portal.js";
 import BottomSheet from "./components/BottomSheet.js";
 import Spinner from "./components/Spinner.js";
 import Button from "./components/Button.js";
+import Card from "./components/Card.js";
 import Input$1 from "./components/Input.js";
 import CardNumberInput from "./components/CardNumberInput.js";
 import Carousel_default, { CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText } from "./components/Carousel.js";
 import Checkbox from "./components/Checkbox.js";
 import Clipboard from "./components/Clipboard.js";
 import CloseButton from "./components/CloseButton.js";
-import Collapsible from "./components/Collapsible.js";
+import Collapsible, { CollapsibleContent, CollapsibleTrigger } from "./components/Collapsible.js";
 import ColorPicker from "./components/ColorPicker.js";
 import Root, { ComboboxContent, ComboboxItem, Input } from "./components/Combobox.js";
 import Icon from "./components/Icon.js";
@@ -23,6 +26,7 @@ import Fieldset from "./components/Fieldset.js";
 import FileUpload, { FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup } from "./components/FileUpload.js";
 import FocusTrap_default from "./components/FocusTrap.js";
 import Listbox from "./components/Listbox.js";
+import Link from "./components/Link.js";
 import Menu, { MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "./components/Menu.js";
 import MoneyInput from "./components/MoneyInput.js";
 import NumberInput from "./components/NumberInput.js";
@@ -32,14 +36,16 @@ import Presence_default from "./components/Presence.js";
 import Progress, { ProgressLabel } from "./components/Progress.js";
 import RadioGroup from "./components/RadioGroup.js";
 import RatingGroup from "./components/RatingGroup.js";
+import SafeArea from "./components/SafeArea.js";
 import SearchInput from "./components/SearchInput.js";
 import Select, { SelectTrigger } from "./components/Select.js";
-import SelectPc from "./components/SelectPc.js";
+import SelectPc, { SelectItem } from "./components/SelectPc.js";
 import SignaturePad, { ClearTrigger } from "./components/SignaturePad.js";
 import Skeleton from "./components/Skeleton.js";
 import Slider from "./components/Slider.js";
 import Splitter, { SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator } from "./components/Splitter.js";
 import Steps from "./components/Steps.js";
+import StickyHeader from "./components/StickyHeader.js";
 import SwipeReveal from "./components/SwipeReveal.js";
 import Switch from "./components/Switch.js";
 import Tabs from "./components/Tabs.js";
@@ -47,6 +53,7 @@ import TagsInput from "./components/TagsInput.js";
 import Toast, { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster } from "./components/Toast.js";
 import Toggle from "./components/Toggle.js";
 import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
+import FilterGroup from "./components/FilterGroup.js";
 import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
 import TreeView, { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem } from "./components/TreeView.js";
-export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BottomSheet, Button, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DateInput, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SearchInput, Select, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, SwipeReveal, Switch, Tabs, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
+export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DateInput, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };

package/docs/api.md

@@ -57,10 +57,10 @@ A labeled field wrapper combining a label, an error message and helper text, bac
 **Exports:** `Field` · Escape hatch: `Field.origin.{Root, Label, Input, Textarea, Select, HelperText, ErrorText, RequiredIndicator, Item}`
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
-| `label` | `string` | `''` | Field label text. |
-| `error` | `string` | `''` | Error message; when non-empty the field renders in its error state. |
-| `helper` | `string` | `''` | Helper text below the control. |
+|---|---|---|---|---|
+| `label` | `string \| node` | `''` | Label content — any text or JSX. Styling is fixed. |
+| `error` | `string \| node` | `''` | Error content; when non-empty the field renders in its error state. Styling is fixed. |
+| `helper` | `string \| node` | `''` | Helper content below the control. Styling is fixed. |
 | `required` | `boolean` | `false` | Marks the label with a required indicator. |
 | `compact` | `boolean` | `false` | Renders in a compact (smaller) layout. |
 | `invalid` | `boolean` | `false` | Error state (also implied by a non-empty `error`). |
@@ -77,9 +77,9 @@ Groups several `Field`s with a legend, backed by `ArkFieldset` (native `<fieldse
 **Exports:** `Fieldset` · Escape hatch: `Fieldset.origin.{Root, Legend, HelperText, ErrorText}`
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
-| `legend` | `string` | `''` | Fieldset legend text. |
-| `helper` | `string` | `''` | Helper text below the fields. |
+|---|---|---|---|---|
+| `legend` | `string \| node` | `''` | Legend content — any text or JSX. Styling is fixed. |
+| `helper` | `string \| node` | `''` | Helper content below the fields. Styling is fixed. |
 | `children` | `node` | — | `Field` components to group. |
 
 Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
@@ -267,6 +267,23 @@ Passthrough: Ark `Root` props (`pressed`, `onPressedChange`, …).
 | `size` | `string` | `md` | See size values. |
 | `children` | `node` | — | `ToggleGroupItem` elements. |
 
+### FilterGroup
+
+Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecting any item clears it, and an empty selection maps back to "All".
+
+**Exports:** `FilterGroup`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `array \| (() => array)` | — | Selected item values (controlled). |
+| `onValueChange` | `(value) => void` | — | Called with the new selection array. |
+| `items` | `array` | `[]` | Filter items (`{ value, label, disabled? }`). |
+| `allLabel` | `string` | `'All'` | Label for the clear/All toggle. |
+| `size` | `string` | `md` | See size values. |
+| `buttonClass` | `string` | — | Class applied to every button. |
+| `groupClass` | `string` | — | Class applied to the inner `ToggleGroup`. |
+| `className` | `string` | — | Root class. |
+
 ### RadioGroup
 
 **Exports:** `RadioGroup` · Escape hatch: `RadioGroup.origin.{Root, Label, Item, ItemControl, ItemText, ItemHiddenInput, Indicator}`
@@ -323,7 +340,7 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 
 Desktop (popover-style) select built on Ark `Select`.
 
-**Exports:** `SelectPc` · Escape hatch: `SelectPc.origin.{Root, Trigger, Indicator, Positioner, Content, List, Item, ItemText, ValueText, HiddenSelect}`
+**Exports:** `SelectPc`, `SelectItem` · Escape hatch: `SelectPc.origin.{Root, Trigger, Indicator, Positioner, Content, List, Item, ItemText, ValueText, HiddenSelect}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -332,7 +349,7 @@ Desktop (popover-style) select built on Ark `Select`.
 | `disabled` | `boolean` | `false` | Disabled. |
 | `invalid` | `boolean` | `false` | Error state. |
 | `positioning` | `object` | `{ sameWidth: true }` | Positioning options. |
-| `children` | `node` | — | `SelectPc.origin.Item` elements or custom content. |
+| `children` | `node` | — | `SelectItem` elements or custom content. |
 
 Passthrough: Ark `Root` props (`value`, `onValueChange`, `collection`, …). Note: unlike `Select`, it is **not** controlled-only at the tsumiki level — state flows through the Ark props.
 
@@ -411,18 +428,105 @@ Passthrough: Ark `Root` props (`value`, `onValueChange`, `orientation`, …).
 
 Passthrough: Ark `Root` props (`count`, `pageSize`, `page`, `onPageChange`, …).
 
+### BottomNavigation
+
+Fixed bottom navigation bar with icons and labels.
+
+**Exports:** `BottomNavigation`, `BottomNavigationItem`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | `BottomNavigationItem` elements. |
+
+`BottomNavigationItem`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `icon` | `node` | — | Icon content. |
+| `label` | `string` | — | Item label. |
+| `active` | `boolean` | `false` | Active state. |
+| `href` | `string` | — | When set, renders an `<a>` instead of a `<button>`. |
+| `onClick` | `() => void` | — | Click handler. |
+| `className` | `string` | — | Item class. |
+
+### BackToTop
+
+Floating scroll-to-top button that appears after scrolling past a threshold.
+
+**Exports:** `BackToTop`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `threshold` | `number` | `200` | Scroll offset (px) at which the button appears. |
+| `target` | `() => Element` | — | Scroll container. When omitted, uses the window. |
+| `icon` | `node` | — | Custom button icon. |
+| `onClick` | `() => void` | — | Click callback. |
+| `className` | `string` | — | Button class. |
+
 ---
 
 ## Content & Layout
 
 ### Collapsible
 
-**Exports:** `Collapsible` · Escape hatch: `Collapsible.origin.{Root, Trigger, Content}`
+**Exports:** `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` · Escape hatch: `Collapsible.origin.{Root, Trigger, Content}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `className` | `string` | — | Root class. |
-| `children` | `node` | — | `Trigger` / `Content` elements. |
+| `children` | `node` | — | `CollapsibleTrigger` / `CollapsibleContent` elements. |
+
+### Card
+
+Container with themed background and border radius.
+
+**Exports:** `Card`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+Passthrough: `div` DOM props (`style`, `onClick`, …).
+
+### Link
+
+Styled anchor.
+
+**Exports:** `Link`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+Passthrough: native `<a>` props (`href`, `target`, `rel`, …).
+
+### SafeArea
+
+Adds device safe-area inset padding.
+
+**Exports:** `SafeArea`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `position` | `string` | `'top'` | `'top' \| 'bottom' \| 'left' \| 'right'`. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+### StickyHeader
+
+Header that sticks to the top while scrolling.
+
+**Exports:** `StickyHeader`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `offsetTop` | `number` | `0` | Sticky top offset (px). |
+| `shadow` | `boolean` | `false` | Add a drop shadow when stuck. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
 
 ### Splitter
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",