@plastic-js/tsumiki 0.1.46 → 0.1.47

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

@@ -329,6 +329,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.47",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",