@plastic-js/tsumiki 0.1.70 → 0.1.72

package/dist/components/BackToTop.js

@@ -44,7 +44,7 @@ var iconClass = css({
 	height: "22px"
 });
 var BackToTop = (props = {}) => {
-	const [local] = splitProps(mergeProps$1({ threshold: 200 }, props), [
+	const [local] = splitProps(mergeProps$1({ threshold: 350 }, props), [
 		"className",
 		"threshold",
 		"target",

package/dist/components/Dialog.js

@@ -122,7 +122,7 @@ var bodyClass = css({
 	flex: 1,
 	minHeight: 0,
 	overflowY: "auto",
-	WebkitOverflowScrolling: "touch"
+	overscrollBehavior: "contain"
 });
 var footerClass = css({
 	display: "flex",

package/dist/components/PinInput.js

@@ -0,0 +1,224 @@
+import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Loop, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/PinInput.jsx
+var _tmpl = template("<input maxLength=\"1\">");
+var read = (v) => typeof v === "function" ? v() : v;
+var rootClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-sm)",
+	fontFamily: "inherit"
+});
+var sizeClasses = {
+	xs: css({
+		"--_pin-box": "var(--tsu-comp-height-xs)",
+		"--_pin-font": "var(--tsu-comp-font-size-xs)",
+		"--_pin-radius": "var(--tsu-radius-l1-xs)"
+	}),
+	sm: css({
+		"--_pin-box": "var(--tsu-comp-height-sm)",
+		"--_pin-font": "var(--tsu-comp-font-size-sm)",
+		"--_pin-radius": "var(--tsu-radius-l1-sm)"
+	}),
+	md: css({
+		"--_pin-box": "var(--tsu-comp-height-md)",
+		"--_pin-font": "var(--tsu-comp-font-size-md)",
+		"--_pin-radius": "var(--tsu-radius-l1-md)"
+	}),
+	lg: css({
+		"--_pin-box": "var(--tsu-comp-height-lg)",
+		"--_pin-font": "var(--tsu-comp-font-size-lg)",
+		"--_pin-radius": "var(--tsu-radius-l1-lg)"
+	}),
+	xl: css({
+		"--_pin-box": "var(--tsu-comp-height-xl)",
+		"--_pin-font": "var(--tsu-comp-font-size-xl)",
+		"--_pin-radius": "var(--tsu-radius-l1-xl)"
+	})
+};
+var variantClasses = {
+	solid: css({
+		backgroundColor: "var(--tsu-bg-control)",
+		border: "1px solid transparent"
+	}),
+	outline: css({ border: "1px solid var(--_pin-border)" })
+};
+var intentClasses = {
+	default: css({
+		"--_pin-border": "var(--tsu-accent-outline-border)",
+		"--_pin-border-focus": "var(--tsu-accent-outline-border-hover)"
+	}),
+	neutral: css({
+		"--_pin-border": "var(--tsu-neutral-outline-border)",
+		"--_pin-border-focus": "var(--tsu-neutral-outline-border-hover)"
+	})
+};
+var boxBaseClass = css({
+	width: "var(--_pin-box, var(--tsu-comp-height-md))",
+	height: "var(--_pin-box, var(--tsu-comp-height-md))",
+	padding: 0,
+	borderRadius: "var(--_pin-radius, var(--tsu-radius-l1-md))",
+	color: "var(--tsu-fg)",
+	fontFamily: "inherit",
+	fontSize: "var(--_pin-font, var(--tsu-comp-font-size-md))",
+	fontWeight: 600,
+	textAlign: "center",
+	WebkitAppearance: "none",
+	appearance: "none",
+	outline: "none",
+	touchAction: "manipulation",
+	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast), box-shadow var(--tsu-transition-fast)",
+	"&:focus": {
+		borderColor: "var(--_pin-border-focus, var(--tsu-accent-outline-border-hover))",
+		backgroundColor: "var(--tsu-focus-bg)",
+		boxShadow: "0 0 0 1px var(--_pin-border-focus, var(--tsu-accent-outline-border-hover))"
+	}
+});
+var errorClass = css({
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus": {
+		borderColor: "var(--tsu-danger-outline-border) !important",
+		boxShadow: "0 0 0 1px var(--tsu-danger-outline-border) !important"
+	}
+});
+var disabledClass = css({
+	opacity: "var(--tsu-disabled-opacity)",
+	cursor: "not-allowed"
+});
+var PinInput = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		length: 4,
+		size: "md",
+		type: "numeric",
+		variant: "outline",
+		intent: "default",
+		mask: false,
+		disabled: false,
+		invalid: false
+	}, props), [
+		"value",
+		"onValueChange",
+		"onComplete",
+		"length",
+		"size",
+		"type",
+		"variant",
+		"intent",
+		"mask",
+		"disabled",
+		"invalid",
+		"className",
+		"inputClassName"
+	]);
+	const refs = {};
+	const boxSize = () => read(local.length) || 4;
+	const isNumeric = () => read(local.type) === "numeric";
+	const value = () => (read(local.value) || "").slice(0, boxSize());
+	const clean = (str) => {
+		if (!str) return "";
+		return isNumeric() ? str.replace(/\D/g, "") : str.replace(/[^a-zA-Z0-9]/g, "").toUpperCase();
+	};
+	const focusBox = (index) => {
+		const el = refs[index];
+		if (el && typeof el.focus === "function") el.focus();
+	};
+	const commit = (next) => {
+		local.onValueChange?.(next);
+		if (next.length === boxSize()) local.onComplete?.(next);
+	};
+	const handleInput = (index) => (e) => {
+		const char = clean(e.target.value).slice(0, 1);
+		const base = value();
+		const next = base.slice(0, index) + char + base.slice(index + 1);
+		if (char && index < boxSize() - 1) focusBox(index + 1);
+		commit(next);
+	};
+	const handleKeyDown = (index) => (e) => {
+		if (e.key === "Backspace" && !e.target.value && index > 0) {
+			e.preventDefault();
+			const prev = index - 1;
+			const base = value();
+			commit(base.slice(0, prev) + base.slice(prev + 1));
+			focusBox(prev);
+			return;
+		}
+		if (e.key === "ArrowLeft" && index > 0) {
+			e.preventDefault();
+			focusBox(index - 1);
+			return;
+		}
+		if (e.key === "ArrowRight" && index < boxSize() - 1) {
+			e.preventDefault();
+			focusBox(index + 1);
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault();
+			focusBox(0);
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault();
+			focusBox(boxSize() - 1);
+		}
+	};
+	const handlePaste = (index) => (e) => {
+		e.preventDefault();
+		const text = clean(e.clipboardData?.getData("text")?.trim());
+		if (!text) return;
+		const base = value();
+		commit((base.slice(0, index) + text + base.slice(index + text.length)).slice(0, boxSize()));
+		focusBox(Math.min(index + text.length, boxSize() - 1));
+	};
+	const handleFocus = (e) => e.target.select();
+	const boxClassName = (index) => {
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
+		let intent = read(local.intent);
+		if (intent === "neutral" && variant === "solid") intent = "default";
+		return [
+			boxBaseClass,
+			variantClasses[variant],
+			intentClasses[intent] ?? intentClasses.default,
+			read(local.invalid) && errorClass,
+			read(local.disabled) && disabledClass,
+			read(local.inputClassName)
+		].filter(Boolean).join(" ");
+	};
+	return jsx("div", mergeProps({ className: () => [
+		rootClass,
+		sizeClasses[read(local.size)] ?? sizeClasses.md,
+		read(local.className)
+	].filter(Boolean).join(" ") }, rest, { children: jsx(Loop, mergeProps({
+		each: () => Array.from({ length: boxSize() }),
+		children: (_, indexSignal) => {
+			const index = indexSignal();
+			return (() => {
+				const _el0 = _tmpl.cloneNode(true);
+				setProp(_el0, "key", () => index);
+				setProp(_el0, "ref", (el) => {
+					refs[index] = el;
+				});
+				setProp(_el0, "type", () => read(local.mask) ? "password" : "text");
+				setProp(_el0, "inputMode", () => isNumeric() ? "numeric" : void 0);
+				setProp(_el0, "autoComplete", () => index === 0 ? "one-time-code" : void 0);
+				setProp(_el0, "aria-label", () => `Character ${index + 1} of ${boxSize()}`);
+				setProp(_el0, "aria-invalid", () => read(local.invalid) ? "true" : "false");
+				setProp(_el0, "data-invalid", () => read(local.invalid) ? "" : void 0);
+				setProp(_el0, "value", () => {
+					read(local.mask);
+					return value()[index] || "";
+				});
+				setProp(_el0, "onInput", () => handleInput(index));
+				setProp(_el0, "onKeyDown", () => handleKeyDown(index));
+				setProp(_el0, "onPaste", () => handlePaste(index));
+				setProp(_el0, "onFocus", () => handleFocus);
+				setProp(_el0, "disabled", () => read(local.disabled));
+				setProp(_el0, "className", () => boxClassName(index));
+				return _el0;
+			})();
+		}
+	})) }));
+};
+//#endregion
+export { PinInput as default };

package/dist/index.js

@@ -32,6 +32,7 @@ import Menu, { MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "./compo
 import MoneyInput from "./components/MoneyInput.js";
 import NumberInput from "./components/NumberInput.js";
 import Pagination from "./components/Pagination.js";
+import PinInput from "./components/PinInput.js";
 import Popover from "./components/Popover.js";
 import Presence_default from "./components/Presence.js";
 import Progress, { ProgressLabel } from "./components/Progress.js";
@@ -58,4 +59,4 @@ 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, BackToTop, Badge, 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, DatePicker, 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, Tag, 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, Badge, 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, DatePicker, 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, PinInput, 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, Tag, 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

@@ -716,6 +716,8 @@ A free-form presentation layer: a backdrop, an optional drag grabber, and a scro
 **Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. With the default `lazyMount: true` + `unmountOnExit: true`, a closed sheet that was never opened renders **zero** nodes; after close it stays mounted only long enough for the exit transition, then unmounts. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
 
 > **Design decision:** `content` is a pure container — `display: flex; flex-direction: column` only, with **no padding, no margin, and no scrolling**. Spacing and scrolling are entirely consumer-owned: build your own layout inside `children` (the sheet caps height at `70vh`, so a scrollable section can be a `flex: 1; min-height: 0; overflow-y: auto` child).
+>
+> **Consumer contract:** any scrollable child inside a `BottomSheet` must set `overscroll-behavior: contain` (or `none` if a hard edge is desired). Otherwise, on iOS the rubber-band overscroll at the child's top/bottom chains into the drag-to-dismiss area and shoves the whole sheet.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|---|

package/package.json

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

package/docs/pagination-ellipsis-issue.md

@@ -1,45 +0,0 @@
-# Pagination renders an invisible ellipsis
-
-**Status:** Known issue
-**Affects:** `src/components/Pagination.jsx:55`
-
-## Problem
-
-The `Pages` renderer emits the ellipsis without any content:
-
-```jsx
-// src/components/Pagination.jsx:55
-: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass} />
-```
-
-`ArkPagination.Ellipsis` renders a plain empty `div` (it only spreads
-`getEllipsisProps` — id/data attrs — and never injects text). The tsumiki
-`ellipsisClass` only sizes/colors the box, so the ellipsis shows up as a blank
-gap with no `…` glyph.
-
-With enough pages to trigger the collapsed range, the page-number pattern looks
-random and buggy instead of standard, e.g. with 12 total pages and the default
-`boundaryCount = 1` / `siblingCount = 1`:
-
-- Page 1: `1 2 3 12` (should be `1 2 3 … 12`)
-- Page 4: `1 4 12` (should be `1 … 4 … 12`)
-- Page 10: `1 10 11 12` (should be `1 … 10 11 12`)
-
-Each gap is where the invisible ellipsis box sits.
-
-## Fix
-
-Pass the glyph as children so the ellipsis is visible:
-
-```jsx
-: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass}>…</ArkPagination.Ellipsis>
-```
-
-Consider tightening `ellipsisClass` width (e.g. `28px`) so the visible `…` does
-not consume a full button-sized slot.
-
-## Secondary note (related UX)
-
-Prev/Next reuse `itemClass` (`minWidth: var(--tsu-level-primary-md)`, 40px),
-which is a small tap target. If wider triggers are desired, they need their own
-class, since `Pagination` currently exposes no per-trigger className override.