@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Progress.js

@@ -1,7 +1,110 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css, keyframes } from "@emotion/css";
 import { Progress } from "@plastic-js/ark";
+import { createContext, mergeProps as mergeProps$2, splitProps, useContext } from "@plastic-js/plastic";
 //#region src/components/Progress.jsx
-var Progress_default = Progress;
+var ProgressCtx = createContext(() => ({
+	size: "md",
+	striped: false
+}));
+var stripeAnim = keyframes({
+	"0%": { backgroundPosition: "0 0" },
+	"100%": { backgroundPosition: "16px 0" }
+});
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%"
+});
+var trackClass = css({
+	width: "100%",
+	backgroundColor: "var(--tsu-neutral-3)",
+	borderRadius: "999px",
+	overflow: "hidden"
+});
+var rangeClass = css({
+	height: "100%",
+	backgroundColor: "var(--tsu-accent-9)",
+	borderRadius: "999px",
+	transition: "width var(--tsu-transition-normal)"
+});
+var stripedClass = css({
+	backgroundImage: [
+		"linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%)",
+		"linear-gradient(-45deg, transparent 50%, rgba(255,255,255,0.15) 50%)",
+		"linear-gradient(-45deg, rgba(255,255,255,0.15) 75%, transparent 75%)",
+		"linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.15) 75%)"
+	].join(","),
+	backgroundSize: "16px 16px",
+	animation: `${stripeAnim} 1s linear infinite`
+});
+var labelClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	fontWeight: 500
+});
+var sizeHeights = {
+	xs: "4px",
+	sm: "6px",
+	md: "8px",
+	lg: "12px",
+	xl: "16px"
+};
+var read = (v) => typeof v === "function" ? v() : v;
+var ProgressLabel = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Progress.Label, mergeProps(rest, { get className() {
+		return [labelClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ProgressRange = (props = {}) => {
+	const getCtx = useContext(ProgressCtx);
+	const [local, rest] = splitProps(props, ["className"]);
+	return () => {
+		const ctx = getCtx();
+		return jsx(Progress.Range, mergeProps(rest, { get className() {
+			return [
+				rangeClass,
+				ctx.striped && stripedClass,
+				local.className
+			].filter(Boolean).join(" ");
+		} }));
+	};
+};
+var Progress$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		striped: false
+	}, props), [
+		"size",
+		"striped",
+		"className",
+		"children",
+		"label"
+	]);
+	const size = read(local.size);
+	const height = sizeHeights[size];
+	return jsx(ProgressCtx.Provider, mergeProps({
+		value: () => ({
+			size,
+			striped: read(local.striped)
+		}),
+		children: () => jsx(Progress.Root, mergeProps(rest, {
+			get className() {
+				return [rootClass, local.className].filter(Boolean).join(" ");
+			},
+			children: [
+				() => read(local.label) && jsx(ProgressLabel, mergeProps({ children: () => read(local.label) })),
+				() => local.children,
+				jsx(Progress.Track, mergeProps({
+					className: trackClass,
+					style: { height },
+					children: jsx(ProgressRange, {})
+				}))
+			]
+		}))
+	}));
+};
 //#endregion
-export { Progress_default as default };
-
-//# sourceMappingURL=Progress.js.map
+export { ProgressLabel, Progress$1 as default };

package/dist/components/RadioGroup.js

@@ -1,7 +1,107 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { RadioGroup } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/RadioGroup.jsx
-var RadioGroup_default = RadioGroup;
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)",
+	"&[data-orientation=\"horizontal\"]": {
+		flexDirection: "row",
+		gap: "var(--tsu-spacing-xl)"
+	}
+});
+var labelClass = css({
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	fontWeight: 600,
+	color: "var(--tsu-fg)",
+	marginBottom: "var(--tsu-spacing-sm)"
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-sm)",
+	cursor: "pointer",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	color: "var(--tsu-fg)",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	"&:active": { backgroundColor: "transparent" },
+	"&[data-disabled]": {
+		color: "var(--tsu-disabled-fg)",
+		cursor: "not-allowed"
+	}
+});
+var itemControlClass = css({
+	width: "20px",
+	height: "20px",
+	borderRadius: "50%",
+	border: "2px solid var(--tsu-accent-8)",
+	background: "var(--tsu-bg)",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
+	"&:active": { backgroundColor: "transparent" },
+	"&[data-state=\"checked\"]": { borderColor: "var(--tsu-accent-9)" },
+	"&[data-disabled]": {
+		borderColor: "var(--tsu-disabled-border)",
+		background: "var(--tsu-disabled-bg)"
+	}
+});
+var indicatorClass = css({
+	width: "10px",
+	height: "10px",
+	borderRadius: "50%",
+	background: "var(--tsu-accent-9)",
+	"&[data-disabled]": { background: "var(--tsu-disabled-fg)" }
+});
+var RadioGroup$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), [
+		"label",
+		"className",
+		"items"
+	]);
+	const classNames = [rootClass, local.className].filter(Boolean).join(" ");
+	return jsx(RadioGroup.Root, mergeProps(rest, {
+		className: classNames,
+		children: [() => local.label && jsx(RadioGroup.Label, mergeProps({
+			className: labelClass,
+			children: () => local.label
+		})), () => local.items?.map((item) => jsx(RadioGroup.Item, mergeProps({
+			get key() {
+				return item.value;
+			},
+			get value() {
+				return item.value;
+			},
+			get disabled() {
+				return item.disabled;
+			},
+			className: itemClass,
+			children: [
+				jsx(RadioGroup.ItemControl, mergeProps({
+					className: itemControlClass,
+					children: jsx(RadioGroup.Indicator, mergeProps({ className: indicatorClass }))
+				})),
+				jsx(RadioGroup.ItemText, mergeProps({ children: () => item.label })),
+				jsx(RadioGroup.ItemHiddenInput, {})
+			]
+		})))]
+	}));
+};
+RadioGroup$1.origin = {
+	Root: RadioGroup.Root,
+	Label: RadioGroup.Label,
+	Item: RadioGroup.Item,
+	ItemControl: RadioGroup.ItemControl,
+	ItemText: RadioGroup.ItemText,
+	ItemHiddenInput: RadioGroup.ItemHiddenInput,
+	Indicator: RadioGroup.Indicator
+};
 //#endregion
-export { RadioGroup_default as default };
-
-//# sourceMappingURL=RadioGroup.js.map
+export { RadioGroup$1 as default };

package/dist/components/RatingGroup.js

@@ -1,7 +1,78 @@
+import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { RatingGroup } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/RatingGroup.jsx
-var RatingGroup_default = RatingGroup;
+var _tmpl = template("<div><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"1em\" height=\"1em\" aria-hidden=\"true\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z\"></path></svg></div>");
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-xs)"
+});
+var labelClass = css({
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	fontWeight: 500,
+	color: "var(--tsu-neutral-11)"
+});
+var controlClass = css({
+	display: "flex",
+	gap: "var(--tsu-spacing-xxs)"
+});
+var itemClass = css({
+	background: "none",
+	border: "none",
+	padding: 0,
+	cursor: "pointer",
+	lineHeight: 0,
+	color: "var(--tsu-neutral-6)",
+	transition: "color var(--tsu-transition-fast)",
+	"&[data-highlighted]": { color: "var(--tsu-warning-9)" },
+	"&[data-checked]": { color: "var(--tsu-warning-9)" },
+	"&[data-disabled]": {
+		opacity: .4,
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	}
+});
+var itemTextClass = css({
+	display: "block",
+	color: "inherit",
+	fontSize: "24px",
+	"& svg": { display: "block" }
+});
+var RatingGroup$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({ count: 5 }, props), ["label", "className"]);
+	return jsx(RatingGroup.Root, mergeProps(rest, {
+		className: () => [rootClass, local.className].filter(Boolean).join(" "),
+		children: [
+			() => local.label && jsx(RatingGroup.Label, mergeProps({
+				className: labelClass,
+				children: () => local.label
+			})),
+			jsx(RatingGroup.Control, mergeProps({
+				className: controlClass,
+				children: () => Array.from({ length: rest.count }, (_, i) => jsx(RatingGroup.Item, mergeProps({
+					key: i,
+					index: i + 1,
+					className: itemClass,
+					children: (() => {
+						const _el0 = _tmpl.cloneNode(true);
+						setProp(_el0, "className", () => itemTextClass);
+						return _el0;
+					})()
+				})))
+			})),
+			jsx(RatingGroup.HiddenInput, {})
+		]
+	}));
+};
+RatingGroup$1.origin = {
+	Root: RatingGroup.Root,
+	Label: RatingGroup.Label,
+	Control: RatingGroup.Control,
+	Item: RatingGroup.Item,
+	ItemText: RatingGroup.ItemText,
+	HiddenInput: RatingGroup.HiddenInput
+};
 //#endregion
-export { RatingGroup_default as default };
-
-//# sourceMappingURL=RatingGroup.js.map
+export { RatingGroup$1 as default };

package/dist/components/SearchInput.js

@@ -1,66 +1,71 @@
+import Input from "./Input.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { splitProps } from "@plastic-js/plastic";
+import { createSignal, splitProps } from "@plastic-js/plastic";
 //#region src/components/SearchInput.jsx
-var _tmpl2 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"M21 21l-4.35-4.35\"></path></svg>");
-var _tmpl = template("<div><span aria-hidden=\"true\"></span><!></div>");
-var wrapperClass = css({
-	flex: 1,
-	minWidth: 0,
-	position: "relative"
-});
-var inputClass = css({
-	width: "100%",
-	height: "44px",
-	background: "var(--surface)",
-	border: "1px solid var(--border)",
-	borderRadius: "10px",
-	padding: "0 14px 0 44px",
-	color: "var(--ink)",
-	fontSize: "15px",
-	fontFamily: "inherit",
-	outline: "none",
-	"&::placeholder": { color: "var(--muted)" },
-	"&:focus": { borderColor: "var(--accent)" }
-});
-var iconClass = css({
-	position: "absolute",
-	left: "13px",
-	top: "50%",
-	transform: "translateY(-50%)",
-	color: "var(--muted)",
-	pointerEvents: "none",
+var _tmpl3 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
+var _tmpl2 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>");
+var _tmpl = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"M21 21l-4.35-4.35\"></path></svg>");
+var clearButtonClass = css({
+	width: "28px",
+	height: "28px",
+	padding: "4px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	background: "none",
+	border: "none",
+	color: "inherit",
+	cursor: "pointer",
 	"& svg": {
-		width: "18px",
-		height: "18px"
-	}
+		width: "100%",
+		height: "100%"
+	},
+	"&:hover": { color: "var(--tsu-fg)" }
 });
+function SearchIcon() {
+	return _tmpl.cloneNode(true);
+}
+function XIcon() {
+	return _tmpl2.cloneNode(true);
+}
 var SearchInput = (props) => {
 	const [local, rest] = splitProps(props, ["placeholder", "onInput"]);
-	return () => {
-		const _el0 = _tmpl.cloneNode(true);
-		const _el1 = _el0.firstChild;
-		const _el2 = _el0.firstChild.nextSibling;
-		insert(_el1, () => jsx(SearchIcon, {}));
-		setProp(_el1, "className", () => iconClass);
-		insert(_el0, () => jsx("input", mergeProps({
-			className: inputClass,
-			get onInput() {
-				return local.onInput;
-			},
-			get placeholder() {
-				return local.placeholder ?? "Search...";
-			},
-			type: "search"
-		}, rest)), _el2);
-		setProp(_el0, "className", () => wrapperClass);
-		return _el0;
+	const hasValue = createSignal(false);
+	let inputEl = null;
+	const handleInput = (e) => {
+		hasValue(e.target.value.length > 0);
+		if (local.onInput) local.onInput(e);
+	};
+	const handleClear = () => {
+		if (!inputEl) return;
+		hasValue(false);
+		Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(inputEl, "");
+		inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+		inputEl.focus();
 	};
+	return jsx(Input, mergeProps({
+		ref: (el) => {
+			inputEl = el;
+		},
+		type: "search",
+		size: "lg",
+		solid: true,
+		get placeholder() {
+			return local.placeholder ?? "Search...";
+		},
+		onInput: handleInput,
+		get prefix() {
+			return jsx(SearchIcon, {});
+		},
+		suffix: () => hasValue() ? () => {
+			const _el0 = _tmpl3.cloneNode(true);
+			insert(_el0, () => jsx(XIcon, {}));
+			setProp(_el0, "className", () => clearButtonClass);
+			setProp(_el0, "onClick", () => handleClear);
+			return _el0;
+		} : null
+	}, rest));
 };
-function SearchIcon() {
-	return _tmpl2.cloneNode(true);
-}
 //#endregion
 export { SearchInput as default };
-
-//# sourceMappingURL=SearchInput.js.map