@plastic-js/tsumiki 0.1.46 → 0.1.48

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/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/dist/components/Select.js

@@ -16,15 +16,13 @@ var chevronDownSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" hei
 var checkSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
 var searchSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M21 21l-4.35-4.35\"/></svg>";
 var xSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>";
-var triggerClass = css({
+var triggerBaseClass = css({
 	flexShrink: 0,
 	width: "100%",
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between",
 	gap: "4px",
-	background: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-accent-8)",
 	color: "var(--tsu-fg)",
 	fontFamily: "inherit",
 	textAlign: "left",
@@ -39,6 +37,13 @@ var triggerClass = css({
 		cursor: "not-allowed"
 	}
 });
+var triggerVariants = {
+	solid: css({
+		backgroundColor: "var(--tsu-surface)",
+		border: "1px solid transparent"
+	}),
+	outline: css({ border: "1px solid var(--tsu-accent-8)" })
+};
 var sizeClasses = {
 	xs: css({
 		height: "var(--tsu-comp-height-xs)",
@@ -192,7 +197,10 @@ var read = (source) => {
 	return typeof source === "function" ? source() : source;
 };
 var Select = (props) => {
-	const [local, rest] = splitProps(mergeProps$1({ size: "md" }, props), [
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		solid: false
+	}, props), [
 		"value",
 		"onValueChange",
 		"items",
@@ -205,7 +213,8 @@ var Select = (props) => {
 		"size",
 		"backdropClassName",
 		"backdropStyle",
-		"filter"
+		"filter",
+		"solid"
 	]);
 	const open = (v) => {
 		if (v === void 0) return read(local.open);
@@ -258,6 +267,7 @@ var Select = (props) => {
 		setValue,
 		disabled: () => local.disabled ?? false,
 		size: () => read(local.size),
+		solid: () => read(local.solid),
 		backdropClassName: local.backdropClassName,
 		backdropStyle: local.backdropStyle,
 		filter: local.filter,
@@ -278,7 +288,7 @@ var SelectTrigger = (props) => {
 	]);
 	return jsx("div", mergeProps(() => part("trigger"), {
 		get className() {
-			return `${triggerClass} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
+			return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
 		},
 		"data-disabled": () => ctx.disabled() ? "" : void 0,
 		onClick: () => {

package/docs/api.md

@@ -137,6 +137,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. |
 
@@ -329,6 +330,7 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 | `open` | `(() => boolean)` | — | **Required** controlled open state. |
 | `onOpenChange` | `(open) => void` | — | Open/close callback. |
 | `disabled` | `boolean` | `false` | Disabled. |
+| `solid` | `boolean` | `false` | Filled trigger variant instead of outline. |
 | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
 | `placeholder` | `string` | — | Trigger placeholder. |
 | `backdropClassName` | `string` | — | Backdrop class. |

package/package.json

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