@plastic-js/tsumiki 0.1.71 → 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/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/package.json

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