@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/SignaturePad.js

@@ -1,7 +1,80 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { SignaturePad } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/SignaturePad.jsx
-var SignaturePad_default = SignaturePad;
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)"
+});
+var labelClass = css({
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	color: "var(--tsu-fg)",
+	fontWeight: 500
+});
+var canvasClass = css({
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	backgroundColor: "var(--tsu-bg)",
+	touchAction: "none",
+	width: "100%"
+});
+var clearClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "6px",
+	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-md)",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	background: "var(--tsu-bg)",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	fontFamily: "inherit",
+	cursor: "pointer",
+	touchAction: "manipulation",
+	"&:hover": { borderColor: "var(--tsu-focus-border)" },
+	"&:active": { background: "var(--tsu-neutral-3)" }
+});
+var ClearTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(SignaturePad.ClearTrigger, mergeProps(rest, {
+		get className() {
+			return `${clearClass} ${local.className || ""}`;
+		},
+		children: () => local.children || "Clear"
+	}));
+};
+var SignaturePad$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		label: "Signature",
+		height: 160
+	}, props), [
+		"className",
+		"label",
+		"height",
+		"children"
+	]);
+	return jsx(SignaturePad.Root, mergeProps(rest, {
+		get className() {
+			return `${rootClass} ${local.className || ""}`;
+		},
+		children: [
+			jsx(SignaturePad.Label, mergeProps({
+				className: labelClass,
+				children: () => local.label
+			})),
+			jsx(SignaturePad.Canvas, mergeProps({
+				className: canvasClass,
+				get height() {
+					return local.height;
+				}
+			})),
+			() => local.children,
+			jsx(SignaturePad.HiddenInput, {})
+		]
+	}));
+};
 //#endregion
-export { SignaturePad_default as default };
-
-//# sourceMappingURL=SignaturePad.js.map
+export { ClearTrigger, SignaturePad$1 as default };

package/dist/components/Skeleton.js

@@ -4,13 +4,13 @@ import { css, keyframes } from "@emotion/css";
 var _tmpl = template("<span></span>");
 var baseClass = css({
 	display: "block",
-	background: "linear-gradient(90deg, var(--border) 0%, var(--surface) 50%, var(--border) 100%)",
+	background: "linear-gradient(90deg, var(--tsu-neutral-6) 25%, var(--tsu-neutral-7) 50%, var(--tsu-neutral-6) 75%)",
 	backgroundSize: "200% 100%",
 	animation: `${keyframes({
 		"0%": { backgroundPosition: "-200% 0" },
 		"100%": { backgroundPosition: "200% 0" }
 	})} 1.4s ease-in-out infinite`,
-	borderRadius: "6px"
+	borderRadius: "var(--tsu-radius-l2-xs)"
 });
 var Skeleton = ({ width = "100%", height = "14px", radius, className, style }) => (() => {
 	const _el0 = _tmpl.cloneNode(true);
@@ -25,5 +25,3 @@ var Skeleton = ({ width = "100%", height = "14px", radius, className, style }) =
 })();
 //#endregion
 export { Skeleton as default };
-
-//# sourceMappingURL=Skeleton.js.map

package/dist/components/Slider.js

@@ -1,7 +1,115 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Slider } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Slider.jsx
-var Slider_default = Slider;
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	fontFamily: "inherit"
+});
+var labelClass = css({
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontWeight: 500,
+	color: "var(--tsu-fg)"
+});
+var controlClass = css({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	height: "24px",
+	touchAction: "none"
+});
+var trackClass = css({
+	position: "relative",
+	width: "100%",
+	height: "4px",
+	borderRadius: "2px",
+	backgroundColor: "var(--tsu-neutral-7)"
+});
+var rangeClass = css({
+	position: "absolute",
+	height: "100%",
+	borderRadius: "2px",
+	backgroundColor: "var(--tsu-accent-9)"
+});
+var thumbClass = css({
+	width: "20px",
+	height: "20px",
+	borderRadius: "50%",
+	backgroundColor: "var(--tsu-accent-9)",
+	border: "2px solid var(--tsu-accent-9)",
+	boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+	cursor: "pointer",
+	outline: "none",
+	zIndex: 2,
+	transition: "box-shadow var(--tsu-transition-fast)",
+	"&:focus-visible": { boxShadow: "0 0 0 3px var(--tsu-accent-3)" }
+});
+var indicatorClass = css({
+	position: "absolute",
+	top: "-30px",
+	left: "50%",
+	transform: "translateX(-50%)",
+	padding: "4px 8px",
+	borderRadius: "6px",
+	backgroundColor: "var(--tsu-fg)",
+	color: "var(--tsu-bg)",
+	fontSize: "13px",
+	lineHeight: 1,
+	fontFamily: "inherit",
+	whiteSpace: "nowrap",
+	pointerEvents: "none"
+});
+var Slider$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		min: 0,
+		max: 100,
+		step: 1,
+		thumbAlignment: "center"
+	}, props), [
+		"label",
+		"className",
+		"children"
+	]);
+	return () => jsx(Slider.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [() => local.label && jsx(Slider.Label, mergeProps({
+			className: labelClass,
+			children: () => local.label
+		})), jsx(Slider.Control, mergeProps({
+			className: controlClass,
+			children: [
+				jsx(Slider.Track, mergeProps({
+					className: trackClass,
+					children: jsx(Slider.Range, mergeProps({ className: rangeClass }))
+				})),
+				jsx(Slider.Thumb, mergeProps({
+					className: thumbClass,
+					children: [jsx(Slider.DraggingIndicator, mergeProps({
+						className: indicatorClass,
+						children: jsx(Slider.ValueText, {})
+					})), jsx(Slider.HiddenInput, {})]
+				})),
+				() => local.children
+			]
+		}))]
+	}));
+};
+Slider$1.origin = {
+	Root: Slider.Root,
+	Label: Slider.Label,
+	Control: Slider.Control,
+	Track: Slider.Track,
+	Range: Slider.Range,
+	Thumb: Slider.Thumb,
+	DraggingIndicator: Slider.DraggingIndicator,
+	ValueText: Slider.ValueText,
+	HiddenInput: Slider.HiddenInput
+};
 //#endregion
-export { Slider_default as default };
-
-//# sourceMappingURL=Slider.js.map
+export { Slider$1 as default };

package/dist/components/Spinner.js

@@ -0,0 +1,41 @@
+import { setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css, keyframes } from "@emotion/css";
+//#region src/components/Spinner.jsx
+var _tmpl = template("<span aria-label=\"Loading\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path></svg></span>");
+var rotate = keyframes({
+	from: { transform: "rotate(0deg)" },
+	to: { transform: "rotate(360deg)" }
+});
+var Spinner = ({ size = 24, strokeWidth = 2, color = "var(--tsu-accent-9)", duration = "0.8s", easing = "cubic-bezier(0.4, 0, 0.2, 1)", className } = {}) => {
+	const style = {
+		"--spinner-size": typeof size === "number" ? `${size}px` : size,
+		"--spinner-stroke": strokeWidth,
+		"--spinner-color": color,
+		"--spinner-duration": duration,
+		"--spinner-easing": easing
+	};
+	const spinnerClass = css({
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "var(--spinner-size)",
+		height: "var(--spinner-size)",
+		color: "var(--spinner-color)",
+		animation: `${rotate} var(--spinner-duration) var(--spinner-easing) infinite`,
+		"& svg": {
+			width: "100%",
+			height: "100%",
+			display: "block"
+		}
+	});
+	return (() => {
+		const _el0 = _tmpl.cloneNode(true);
+		const _el1 = _el0.firstChild;
+		setProp(_el1, "strokeWidth", () => strokeWidth);
+		setProp(_el0, "className", () => className ? `${spinnerClass} ${className}` : spinnerClass);
+		setProp(_el0, "style", () => style);
+		return _el0;
+	})();
+};
+//#endregion
+export { Spinner as default };

package/dist/components/Splitter.js

@@ -1,7 +1,54 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Splitter } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Splitter.jsx
-var Splitter_default = Splitter;
+var rootClass = css({
+	display: "flex",
+	width: "100%",
+	"&[data-orientation=\"vertical\"]": { flexDirection: "column" }
+});
+var SplitterPanel = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), ["className", "children"]);
+	return jsx(Splitter.Panel, mergeProps(rest, {
+		get className() {
+			return [local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var SplitterResizeTrigger = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), ["className", "children"]);
+	return jsx(Splitter.ResizeTrigger, mergeProps(rest, {
+		get className() {
+			return [local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var SplitterResizeTriggerIndicator = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), ["className", "children"]);
+	return jsx(Splitter.ResizeTriggerIndicator, mergeProps(rest, {
+		get className() {
+			return [local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var Splitter$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), ["className", "children"]);
+	return jsx(Splitter.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Splitter$1.origin = {
+	Root: Splitter.Root,
+	Panel: Splitter.Panel,
+	ResizeTrigger: Splitter.ResizeTrigger,
+	ResizeTriggerIndicator: Splitter.ResizeTriggerIndicator
+};
 //#endregion
-export { Splitter_default as default };
-
-//# sourceMappingURL=Splitter.js.map
+export { SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Splitter$1 as default };

package/dist/components/Steps.js

@@ -1,7 +1,262 @@
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Steps } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Steps.jsx
-var Steps_default = Steps;
+var _tmpl5 = template("<div><!><!></div>");
+var _tmpl4 = template("<span></span>");
+var _tmpl3 = template("<span class=\"steps-indicator-check\"></span>");
+var _tmpl2 = template("<span class=\"steps-indicator-index\"></span>");
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>");
+var read = (v) => typeof v === "function" ? v() : v;
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-md)"
+});
+var verticalClass = css({
+	"& .steps-list": {
+		flexDirection: "column",
+		gap: 0
+	},
+	"& .steps-item": {
+		flex: "none",
+		minHeight: "40px"
+	},
+	"& .steps-item-trigger": {
+		flexDirection: "row",
+		gap: "var(--tsu-spacing-sm)",
+		alignItems: "center"
+	},
+	"& .steps-separator": {
+		flex: "none",
+		width: "2px",
+		height: "auto",
+		minHeight: "16px",
+		margin: "0 0 0 13px"
+	},
+	"& .steps-content": { marginLeft: "calc(28px + var(--tsu-spacing-sm))" }
+});
+var listClass = css({
+	display: "flex",
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	flex: 1
+});
+var triggerClass = css({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)",
+	cursor: "pointer",
+	border: "none",
+	background: "none",
+	padding: 0,
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	"&[data-complete] .steps-title, &[data-current] .steps-title": {
+		color: "var(--tsu-accent-9)",
+		fontWeight: 600
+	}
+});
+var titleClass = css({
+	fontSize: "var(--tsu-font-size-xs)",
+	color: "var(--tsu-neutral-9)",
+	textAlign: "center"
+});
+var indicatorClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "28px",
+	height: "28px",
+	borderRadius: "50%",
+	border: "2px solid var(--tsu-neutral-5)",
+	backgroundColor: "var(--tsu-bg)",
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 600,
+	color: "var(--tsu-neutral-9)",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	".steps-trigger[data-current] &": {
+		borderColor: "var(--tsu-accent-8)",
+		backgroundColor: "var(--tsu-accent-9)",
+		color: "var(--tsu-bg)"
+	},
+	".steps-trigger[data-complete] &": {
+		borderColor: "var(--tsu-accent-8)",
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-9)"
+	},
+	".steps-trigger[data-complete] & .steps-indicator-index": { display: "none" },
+	".steps-trigger[data-complete] & .steps-indicator-check": { display: "flex" },
+	".steps-indicator-check": { display: "none" },
+	"& svg": {
+		width: "14px",
+		height: "14px",
+		display: "block"
+	}
+});
+var separatorClass = css({
+	flex: 1,
+	height: "2px",
+	backgroundColor: "var(--tsu-neutral-5)",
+	margin: "0 var(--tsu-spacing-xs)",
+	marginBottom: "20px",
+	"&[data-complete]": { backgroundColor: "var(--tsu-accent-9)" }
+});
+var contentClass = css({
+	padding: "var(--tsu-spacing-md)",
+	backgroundColor: "var(--tsu-neutral-2)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-neutral-11)"
+});
+var completedContentClass = css({
+	padding: "var(--tsu-spacing-md)",
+	textAlign: "center",
+	fontSize: "var(--tsu-font-size-md)",
+	fontWeight: 600,
+	color: "var(--tsu-success-9)"
+});
+var navClass = css({
+	display: "flex",
+	gap: "var(--tsu-spacing-sm)",
+	marginTop: "12px"
+});
+var navBtnClass = css({
+	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
+	border: "1px solid var(--tsu-accent-7)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	backgroundColor: "var(--tsu-bg)",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 500,
+	cursor: "pointer",
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	"&:disabled": {
+		opacity: .4,
+		cursor: "not-allowed"
+	}
+});
+var navNextClass = css({
+	backgroundColor: "var(--tsu-accent-9)",
+	borderColor: "var(--tsu-accent-8)",
+	color: "var(--tsu-bg)"
+});
+var checkIcon = _tmpl.cloneNode(true);
+var Steps$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		vertical: false,
+		value: 0
+	}, props), [
+		"items",
+		"vertical",
+		"value",
+		"onValueChange",
+		"completedContent",
+		"className"
+	]);
+	const items = () => read(local.items) ?? [];
+	const count = () => items().length;
+	const vertical = () => read(local.vertical);
+	return jsx(Steps.Root, mergeProps(rest, {
+		count,
+		get step() {
+			return read(local.value);
+		},
+		onStepChange: ({ step }) => local.onValueChange?.(step),
+		get className() {
+			return [rootClass, vertical() && verticalClass].filter(Boolean).join(" ");
+		},
+		children: [
+			jsx(Steps.List, mergeProps({
+				get className() {
+					return [listClass, "steps-list"].filter(Boolean).join(" ");
+				},
+				children: () => items().map((item, i) => jsx(Steps.Item, mergeProps({
+					index: i,
+					get className() {
+						return [itemClass, "steps-item"].filter(Boolean).join(" ");
+					},
+					children: [jsx(Steps.Trigger, mergeProps({
+						get className() {
+							return [
+								triggerClass,
+								"steps-item-trigger",
+								"steps-trigger"
+							].filter(Boolean).join(" ");
+						},
+						children: [jsx(Steps.Indicator, mergeProps({
+							className: indicatorClass,
+							children: [() => {
+								const _el0 = _tmpl2.cloneNode(true);
+								insert(_el0, () => i + 1);
+								return _el0;
+							}, () => {
+								const _el0 = _tmpl3.cloneNode(true);
+								insert(_el0, () => checkIcon);
+								return _el0;
+							}]
+						})), () => {
+							const _el0 = _tmpl4.cloneNode(true);
+							insert(_el0, () => item.title);
+							setProp(_el0, "className", () => ["steps-title", titleClass].filter(Boolean).join(" "));
+							return _el0;
+						}]
+					})), () => i < items().length - 1 && jsx(Steps.Separator, mergeProps({ get className() {
+						return [separatorClass, "steps-separator"].filter(Boolean).join(" ");
+					} }))]
+				})))
+			})),
+			() => items().map((item, i) => jsx(Steps.Content, mergeProps({
+				index: i,
+				get className() {
+					return [contentClass, "steps-content"].filter(Boolean).join(" ");
+				},
+				children: () => item.content
+			}))),
+			() => read(local.completedContent) && jsx(Steps.CompletedContent, mergeProps({
+				className: completedContentClass,
+				children: () => read(local.completedContent)
+			})),
+			() => {
+				const _el0 = _tmpl5.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				insert(_el0, () => jsx(Steps.PrevTrigger, mergeProps({
+					className: navBtnClass,
+					children: "Previous"
+				})), _el1);
+				insert(_el0, () => jsx(Steps.NextTrigger, mergeProps({
+					get className() {
+						return [navBtnClass, navNextClass].filter(Boolean).join(" ");
+					},
+					children: "Next"
+				})), _el2);
+				setProp(_el0, "className", () => navClass);
+				return _el0;
+			}
+		]
+	}));
+};
+Steps$1.origin = {
+	Root: Steps.Root,
+	List: Steps.List,
+	Item: Steps.Item,
+	Trigger: Steps.Trigger,
+	Content: Steps.Content,
+	CompletedContent: Steps.CompletedContent,
+	Separator: Steps.Separator,
+	PrevTrigger: Steps.PrevTrigger,
+	NextTrigger: Steps.NextTrigger,
+	Indicator: Steps.Indicator,
+	Progress: Steps.Progress
+};
 //#endregion
-export { Steps_default as default };
-
-//# sourceMappingURL=Steps.js.map
+export { Steps$1 as default };

package/dist/components/SwipeReveal.js

@@ -10,7 +10,7 @@ var RUBBER_BAND_LIMIT = 50;
 var wrapperClass = css`
 	position: relative;
 	overflow: hidden;
-	border-radius: 12px;
+	border-radius: var(--tsu-radius-l2-md);
 	user-select: none;
 `;
 var trackClass = css`
@@ -32,7 +32,7 @@ var actionBtnClass = css`
 	justify-content: center;
 	border: none;
 	color: #fff;
-	font-size: 14px;
+	font-size: var(--tsu-comp-font-size-md);
 	font-weight: 600;
 	cursor: pointer;
 	font-family: inherit;
@@ -178,5 +178,3 @@ var SwipeReveal = ({ actions, children, onSwipeStart, onOpenChange, activeId, th
 };
 //#endregion
 export { SwipeReveal as default };
-
-//# sourceMappingURL=SwipeReveal.js.map