@plastic-js/tsumiki 0.1.47 → 0.1.49

package/README.md

@@ -487,6 +487,11 @@ const intentClasses = {
     '--_btn-solid-active': 'var(--tsu-accent-8)',
     '--_btn-border': 'var(--tsu-accent-9)',
   }),
+  neutral: css({
+    '--_btn-solid': 'var(--tsu-neutral-9)',
+    '--_btn-solid-active': 'var(--tsu-neutral-8)',
+    '--_btn-border': 'var(--tsu-neutral-9)',
+  }),
   danger: css({
     '--_btn-solid': 'var(--tsu-danger-9)',
     '--_btn-solid-active': 'var(--tsu-danger-8)',
@@ -495,6 +500,8 @@ const intentClasses = {
 }
 ```
 
+`intent` takes one of `'default' | 'neutral' | 'danger'` (selected via a single prop, not booleans). `neutral` is only valid on the outline variant — when combined with `solid` it is ignored and falls back to `default`.
+
 ### 5.5 Class Name Composition (Reactive)
 
 ```js

package/dist/components/Button.js

@@ -89,6 +89,13 @@ var intentClasses = {
 		"--_btn-border-active": "var(--tsu-accent-10)",
 		"--_btn-tint-bg": "var(--tsu-accent-3)"
 	}),
+	neutral: css({
+		"--_btn-solid": "var(--tsu-neutral-9)",
+		"--_btn-solid-active": "var(--tsu-neutral-8)",
+		"--_btn-border": "var(--tsu-neutral-6)",
+		"--_btn-border-active": "var(--tsu-neutral-7)",
+		"--_btn-tint-bg": "var(--tsu-neutral-3)"
+	}),
 	danger: css({
 		"--_btn-solid": "var(--tsu-danger-9)",
 		"--_btn-solid-active": "var(--tsu-danger-8)",
@@ -124,14 +131,14 @@ var loadingClass = css({ pointerEvents: "none" });
 var read = (v) => typeof v === "function" ? v() : v;
 var Button = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$1({
+		intent: "default",
 		solid: false,
-		danger: false,
 		size: "md",
 		disabled: false,
 		loading: false
 	}, props), [
+		"intent",
 		"solid",
-		"danger",
 		"size",
 		"loading",
 		"disabled",
@@ -148,10 +155,10 @@ var Button = (props = {}) => {
 		className: () => {
 			const size = read(local.size);
 			const solid = read(local.solid);
-			const danger = read(local.danger);
 			const loading = read(local.loading);
 			const variant = solid ? "solid" : "outline";
-			const intent = danger ? "danger" : "default";
+			let intent = read(local.intent);
+			if (intent === "neutral" && solid) intent = "default";
 			return [
 				baseClass,
 				sizeClasses[size],

package/dist/components/CardNumberInput.js

@@ -27,8 +27,6 @@ var CardNumberInput = (props) => {
 		"placeholder"
 	]);
 	return jsx(Input, mergeProps({
-		size: "lg",
-		solid: true,
 		get invalid() {
 			return local.invalid;
 		},

package/dist/components/ConfirmDialog.js

@@ -14,7 +14,7 @@ var messageBodyClass = css({
 var DEFAULT_PROPS = {
 	confirmText: "Confirm",
 	cancelText: "Cancel",
-	danger: false,
+	intent: "default",
 	loading: false,
 	title: "Confirm"
 };
@@ -30,7 +30,7 @@ function ConfirmDialog(props) {
 		"message",
 		"confirmText",
 		"cancelText",
-		"danger"
+		"intent"
 	]);
 	const handleConfirm = () => {
 		local.onConfirm?.();
@@ -42,8 +42,8 @@ function ConfirmDialog(props) {
 		get confirmText() {
 			return local.confirmText;
 		},
-		get danger() {
-			return local.danger;
+		get intent() {
+			return local.intent;
 		},
 		get loading() {
 			return local.loading;
@@ -124,8 +124,8 @@ function ensureInit() {
 			get cancelText() {
 				return s.cancelText || "Cancel";
 			},
-			get danger() {
-				return s.danger || false;
+			get intent() {
+				return s.intent || "default";
 			},
 			get title() {
 				return s.title || "Confirm";
@@ -152,7 +152,7 @@ function ensureInit() {
 *     title: 'Delete Item',
 *     message: 'This action cannot be undone.',
 *     confirmText: 'Delete',
-*     danger: true,
+*     intent: 'danger',
 *   })
 * } catch (err) {
 *   if (err.code === 'CANCEL') { ... }
@@ -164,7 +164,7 @@ function ensureInit() {
 *   message?: string,
 *   confirmText?: string,
 *   cancelText?: string,
-*   danger?: boolean,
+*   intent?: 'default' | 'neutral' | 'danger',
 *   noCancel?: boolean
 * }} options
 * @returns {Promise<void>}

package/dist/components/Dialog.js

@@ -172,7 +172,7 @@ var Dialog$1 = (props) => {
 		cancelText: "Cancel",
 		confirmText: "Confirm",
 		loading: false,
-		danger: false,
+		intent: "default",
 		closeable: true,
 		lazyMount: true,
 		unmountOnExit: true,
@@ -192,7 +192,7 @@ var Dialog$1 = (props) => {
 		"onCancel",
 		"onConfirm",
 		"loading",
-		"danger",
+		"intent",
 		"closeable",
 		"lazyMount",
 		"unmountOnExit",
@@ -241,8 +241,8 @@ var Dialog$1 = (props) => {
 		insert(_el0, () => local.showConfirm && jsx(Button, mergeProps({
 			className: positiveBtnClass,
 			"data-part": "positive-trigger",
-			get danger() {
-				return local.danger;
+			get intent() {
+				return local.intent;
 			},
 			get loading() {
 				return read(local.loading);

package/dist/components/Input.js

@@ -65,7 +65,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-8)",
+		border: "1px solid var(--_input-border, var(--tsu-accent-8))",
 		color: "var(--tsu-fg)",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -73,6 +73,11 @@ var variantClasses = {
 		}
 	})
 };
+var intentClasses = {
+	default: css({ "--_input-border": "var(--tsu-accent-8)" }),
+	neutral: css({ "--_input-border": "var(--tsu-neutral-6)" }),
+	danger: css({ "--_input-border": "var(--tsu-danger-9)" })
+};
 var errorClass = css({
 	borderColor: "var(--tsu-danger-9) !important",
 	"&:focus-within": { borderColor: "var(--tsu-danger-9) !important" }
@@ -136,11 +141,13 @@ var eyeButtonClass = css({
 var read = (v) => typeof v === "function" ? v() : v;
 var Input = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
+		intent: "default",
 		solid: false,
 		size: "md",
 		disabled: false,
 		invalid: false
 	}, props), [
+		"intent",
 		"solid",
 		"size",
 		"disabled",
@@ -161,16 +168,22 @@ var Input = (props = {}) => {
 	const fieldDisabled = () => field?.disabled?.() ?? false;
 	const effectiveInvalid = () => read(local.invalid) || fieldInvalid();
 	const effectiveDisabled = () => read(local.disabled) || fieldDisabled();
-	const wrapperClassName = () => [
-		wrapperClass,
-		sizeClasses[read(local.size)],
-		read(local.solid) ? variantClasses.solid : variantClasses.outline,
-		effectiveInvalid() && errorClass,
-		effectiveDisabled() && disabledClass,
-		hasPrefix() && hasPrefixClass,
-		hasSuffix() && hasSuffixClass,
-		read(local.className)
-	].filter(Boolean).join(" ");
+	const wrapperClassName = () => {
+		const solid = read(local.solid);
+		let intent = read(local.intent);
+		if (intent === "neutral" && solid) intent = "default";
+		return [
+			wrapperClass,
+			sizeClasses[read(local.size)],
+			solid ? variantClasses.solid : variantClasses.outline,
+			intentClasses[intent],
+			effectiveInvalid() && errorClass,
+			effectiveDisabled() && disabledClass,
+			hasPrefix() && hasPrefixClass,
+			hasSuffix() && hasSuffixClass,
+			read(local.className)
+		].filter(Boolean).join(" ");
+	};
 	const inputType = () => {
 		if (!isPassword) return read(local.type);
 		return showPassword() ? "text" : "password";

package/dist/components/MoneyInput.js

@@ -29,8 +29,6 @@ var MoneyInput = (props) => {
 		"disabled"
 	]);
 	return jsx(Input, mergeProps({
-		size: "lg",
-		solid: true,
 		get invalid() {
 			return local.invalid;
 		},

package/dist/components/NumberInput.js

@@ -5,15 +5,29 @@ import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/NumberInput.jsx
 var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M12 5v14M5 12h14\"></path></svg>");
 var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M5 12h14\"></path></svg>");
-var rootClass = css({
+var rootBaseClass = css({
 	display: "inline-flex",
 	alignItems: "center",
-	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "var(--tsu-radius-l1-md)",
-	backgroundColor: "var(--tsu-surface)",
-	overflow: "hidden",
-	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
+	overflow: "hidden"
 });
+var variantClasses = {
+	solid: css({
+		backgroundColor: "var(--tsu-surface)",
+		border: "1px solid transparent",
+		"&:focus-within": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	}),
+	outline: css({
+		border: "1px solid var(--tsu-accent-8)",
+		"&:focus-within": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	})
+};
 var disabledClass = css({
 	borderColor: "var(--tsu-disabled-border)",
 	"& *": { color: "var(--tsu-disabled-fg)" }
@@ -75,21 +89,25 @@ var read = (v) => typeof v === "function" ? v() : v;
 var NumberInput$1 = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		size: "md",
+		solid: false,
 		disabled: false
 	}, props), [
 		"size",
+		"solid",
 		"disabled",
 		"className",
 		"children"
 	]);
 	return () => {
 		const size = read(local.size);
+		const solid = read(local.solid);
 		const disabled = read(local.disabled);
 		return jsx(NumberInput.Root, mergeProps(rest, {
 			disabled,
 			get className() {
 				return [
-					rootClass,
+					rootBaseClass,
+					variantClasses[solid ? "solid" : "outline"],
 					sizeClasses[size],
 					disabled && disabledClass,
 					local.className

package/dist/components/SearchInput.js

@@ -49,8 +49,6 @@ var SearchInput = (props) => {
 			inputEl = el;
 		},
 		type: "search",
-		size: "lg",
-		solid: true,
 		get placeholder() {
 			return local.placeholder ?? "Search...";
 		},

package/docs/api.md

@@ -91,6 +91,7 @@ Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `solid` | `boolean` | `false` | Filled background instead of outlined. |
+| `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`, `'danger'`). `neutral` applies only to the outline variant (ignored when `solid`). |
 | `size` | `string` | `md` | See size values. |
 | `disabled` | `boolean` | `false` | Disables the input. |
 | `invalid` | `boolean` | `false` | Renders the error/invalid style. |
@@ -137,6 +138,7 @@ Currency-formatted numeric input.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `size` | `string` | `md` | See size values. |
+| `solid` | `boolean` | `false` | Filled background instead of outlined. |
 | `disabled` | `boolean` | `false` | Disabled. |
 | `children` | `node` | — | Custom triggers, if any. |
 
@@ -218,7 +220,7 @@ Passthrough: Ark `Root` props (`value`, `onValueChange`, …).
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `solid` | `boolean` | `false` | Filled (solid) variant instead of outline. |
-| `danger` | `boolean` | `false` | Destructive (red) variant. |
+| `intent` | `string` | `'default'` | `'default'`, `'neutral'`, or `'danger'`. `neutral` applies only to the outline variant (ignored when `solid`). |
 | `size` | `string` | `md` | See size values. |
 | `disabled` | `boolean` | `false` | Disabled. |
 | `loading` | `boolean` | `false` | Shows a spinner and blocks interaction. |
@@ -663,7 +665,7 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 | `onCancel` | `() => void` | — | Cancel callback. |
 | `onConfirm` | `() => void` | — | Confirm callback. |
 | `loading` | `boolean` | `false` | Confirm button shows a spinner. |
-| `danger` | `boolean` | `false` | Confirm button uses the danger style. |
+| `intent` | `string` | `'default'` | Confirm button intent (`'default'`, `'neutral'`, `'danger'`). |
 | `closeable` | `boolean` | `true` | Show the close (✕) trigger. |
 | `lazyMount` | `boolean` | `true` | Mount content lazily. |
 | `unmountOnExit` | `boolean` | `true` | Unmount content when closed. |
@@ -703,12 +705,12 @@ Imperative + declarative confirm dialog built on `Dialog`.
 | `message` | `string` | — | Body message. |
 | `confirmText` | `string` | — | Confirm button label. |
 | `cancelText` | `string` | — | Cancel button label. |
-| `danger` | `boolean` | `false` | Danger-styled confirm button. |
+| `intent` | `string` | `'default'` | Confirm button intent (`'default'`, `'neutral'`, `'danger'`). |
 
 Imperative API:
 
 ```js
-await confirm({ title, message, danger, confirmText })
+await confirm({ title, message, intent, confirmText })
 // resolves true/false
 ```
 

package/package.json

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