@plastic-js/tsumiki 0.1.53 → 0.1.55

package/dist/components/Button.js

@@ -129,13 +129,13 @@ var read = (v) => typeof v === "function" ? v() : v;
 var Button = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		intent: "default",
-		solid: false,
+		variant: "outline",
 		size: "md",
 		disabled: false,
 		loading: false
 	}, props), [
 		"intent",
-		"solid",
+		"variant",
 		"size",
 		"loading",
 		"disabled",
@@ -151,11 +151,10 @@ var Button = (props = {}) => {
 		},
 		className: () => {
 			const size = read(local.size);
-			const solid = read(local.solid);
+			const variant = read(local.variant) === "solid" ? "solid" : "outline";
 			const loading = read(local.loading);
-			const variant = solid ? "solid" : "outline";
 			let intent = read(local.intent);
-			if (intent === "neutral" && solid) intent = "default";
+			if (intent === "neutral" && variant === "solid") intent = "default";
 			return [
 				baseClass,
 				sizeClasses[size],
@@ -167,7 +166,7 @@ var Button = (props = {}) => {
 		},
 		children: [() => local.children, () => {
 			if (!read(local.loading)) return null;
-			const solid = read(local.solid);
+			const variant = read(local.variant) === "solid" ? "solid" : "outline";
 			const size = read(local.size);
 			const spinnerSizeMap = {
 				xs: 14,
@@ -186,7 +185,7 @@ var Button = (props = {}) => {
 						return spinnerSizeMap[size];
 					},
 					strokeWidth: 3,
-					color: solid ? "var(--_btn-solid)" : "var(--_btn-border)"
+					color: variant === "solid" ? "var(--_btn-solid)" : "var(--_btn-border)"
 				})));
 				setProp(_el2, "className", () => loadingSpinnerClass);
 				setProp(_el0, "className", () => loadingOverlayClass);

package/dist/components/Dialog.js

@@ -247,7 +247,7 @@ var Dialog$1 = (props) => {
 			},
 			onClick: handleConfirm,
 			size: "xl",
-			solid: true,
+			variant: "solid",
 			type: "button",
 			children: () => local.confirmText
 		})), _el2);

package/dist/components/FilterGroup.js

@@ -79,8 +79,8 @@ var FilterGroup = (props = {}) => {
 			get size() {
 				return local.size;
 			},
-			get solid() {
-				return allActive();
+			get variant() {
+				return allActive() ? "solid" : "outline";
 			},
 			className: buttonClassNames,
 			onClick: handleAllClick,

package/dist/components/Input.js

@@ -142,13 +142,13 @@ var read = (v) => typeof v === "function" ? v() : v;
 var Input = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		intent: "default",
-		solid: false,
+		variant: "outline",
 		size: "md",
 		disabled: false,
 		invalid: false
 	}, props), [
 		"intent",
-		"solid",
+		"variant",
 		"size",
 		"disabled",
 		"invalid",
@@ -169,13 +169,13 @@ var Input = (props = {}) => {
 	const effectiveInvalid = () => read(local.invalid) || fieldInvalid();
 	const effectiveDisabled = () => read(local.disabled) || fieldDisabled();
 	const wrapperClassName = () => {
-		const solid = read(local.solid);
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
 		let intent = read(local.intent);
-		if (intent === "neutral" && solid) intent = "default";
+		if (intent === "neutral" && variant === "solid") intent = "default";
 		return [
 			wrapperClass,
 			sizeClasses[read(local.size)],
-			solid ? variantClasses.solid : variantClasses.outline,
+			variant === "solid" ? variantClasses.solid : variantClasses.outline,
 			intentClasses[intent],
 			effectiveInvalid() && errorClass,
 			effectiveDisabled() && disabledClass,

package/dist/components/NumberInput.js

@@ -87,25 +87,25 @@ var read = (v) => typeof v === "function" ? v() : v;
 var NumberInput$1 = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		size: "md",
-		solid: false,
+		variant: "outline",
 		disabled: false
 	}, props), [
 		"size",
-		"solid",
+		"variant",
 		"disabled",
 		"className",
 		"children"
 	]);
 	return () => {
 		const size = read(local.size);
-		const solid = read(local.solid);
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
 		const disabled = read(local.disabled);
 		return jsx(NumberInput.Root, mergeProps(rest, {
 			disabled,
 			get className() {
 				return [
 					rootBaseClass,
-					variantClasses[solid ? "solid" : "outline"],
+					variantClasses[variant],
 					sizeClasses[size],
 					disabled && disabledClass,
 					local.className

package/dist/components/Select.js

@@ -212,7 +212,7 @@ var read = (source) => {
 var Select = (props) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		size: "md",
-		solid: false,
+		variant: "outline",
 		intent: "default"
 	}, props), [
 		"value",
@@ -228,7 +228,7 @@ var Select = (props) => {
 		"backdropClassName",
 		"backdropStyle",
 		"filter",
-		"solid",
+		"variant",
 		"intent"
 	]);
 	const open = (v) => {
@@ -282,10 +282,10 @@ var Select = (props) => {
 		setValue,
 		disabled: () => local.disabled ?? false,
 		size: () => read(local.size),
-		solid: () => read(local.solid),
+		variant: () => read(local.variant),
 		intent: () => {
 			const intent = read(local.intent);
-			return intent === "neutral" && read(local.solid) ? "default" : intent;
+			return intent === "neutral" && read(local.variant) === "solid" ? "default" : intent;
 		},
 		backdropClassName: local.backdropClassName,
 		backdropStyle: local.backdropStyle,
@@ -307,7 +307,7 @@ var SelectTrigger = (props) => {
 	]);
 	return jsx("div", mergeProps(() => part("trigger"), {
 		get className() {
-			return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${intentClasses[ctx.intent()]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
+			return `${triggerBaseClass} ${triggerVariants[ctx.variant() === "solid" ? "solid" : "outline"]} ${intentClasses[ctx.intent()]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
 		},
 		"data-disabled": () => ctx.disabled() ? "" : void 0,
 		onClick: () => {

package/dist/components/SelectPc.js

@@ -69,7 +69,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-outline-border)",
+		border: "1px solid var(--_sel-border)",
 		"&:active:not(:disabled)": {
 			backgroundColor: "var(--tsu-pressed-accent)",
 			borderColor: "var(--tsu-accent-solid-bg)"
@@ -80,6 +80,11 @@ var variantClasses = {
 		}
 	})
 };
+var intentClasses = {
+	default: css({ "--_sel-border": "var(--tsu-accent-outline-border)" }),
+	neutral: css({ "--_sel-border": "var(--tsu-neutral-outline-border)" }),
+	danger: css({ "--_sel-border": "var(--tsu-danger-outline-border)" })
+};
 var errorClass = css({
 	borderColor: "var(--tsu-danger-outline-border) !important",
 	"&:focus-visible": { borderColor: "var(--tsu-danger-outline-border) !important" }
@@ -164,13 +169,15 @@ var SelectItem = (props = {}) => {
 };
 var SelectPc = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
-		solid: false,
+		variant: "outline",
+		intent: "default",
 		size: "md",
 		disabled: false,
 		invalid: false,
 		positioning: { sameWidth: true }
 	}, props), [
-		"solid",
+		"variant",
+		"intent",
 		"size",
 		"disabled",
 		"invalid",
@@ -186,14 +193,20 @@ var SelectPc = (props = {}) => {
 		itemToValue: local.itemToValue ?? ((item) => String(item?.value ?? item?.id ?? item)),
 		itemToString: local.itemToString ?? ((item) => String(item?.label ?? item?.name ?? item))
 	});
-	const triggerClassName = () => [
-		triggerBaseClass,
-		sizeClasses[read(local.size)],
-		read(local.solid) ? variantClasses.solid : variantClasses.outline,
-		read(local.invalid) && errorClass,
-		read(local.disabled) && disabledClass,
-		read(local.className)
-	].filter(Boolean).join(" ");
+	const triggerClassName = () => {
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
+		let intent = read(local.intent);
+		if (intent === "neutral" && variant === "solid") intent = "default";
+		return [
+			triggerBaseClass,
+			sizeClasses[read(local.size)],
+			variant === "solid" ? variantClasses.solid : variantClasses.outline,
+			intentClasses[intent] ?? intentClasses.default,
+			read(local.invalid) && errorClass,
+			read(local.disabled) && disabledClass,
+			read(local.className)
+		].filter(Boolean).join(" ");
+	};
 	return jsx(Select.Root, mergeProps({
 		disabled: () => read(local.disabled),
 		collection

package/dist/components/Tag.js

@@ -0,0 +1,170 @@
+import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { ark } from "@plastic-js/ark/factory";
+//#region src/components/Tag.jsx
+var _tmpl = template("<button type=\"button\" data-part=\"close\" aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"10\" height=\"10\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg></button>");
+var baseClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)",
+	whiteSpace: "nowrap",
+	userSelect: "none",
+	borderRadius: "var(--tsu-radius-round)",
+	fontFamily: "inherit",
+	lineHeight: 1,
+	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)"
+});
+var solidClass = css({
+	backgroundColor: "var(--_tag-bg)",
+	color: "var(--_tag-solid-fg)",
+	border: "1px solid transparent"
+});
+var outlineClass = css({
+	backgroundColor: "transparent",
+	color: "var(--_tag-outline-fg)",
+	border: "1px solid var(--_tag-border)"
+});
+var intentClasses = {
+	neutral: css({
+		"--_tag-bg": "var(--tsu-neutral-solid-bg)",
+		"--_tag-solid-fg": "var(--tsu-neutral-solid-fg)",
+		"--_tag-outline-fg": "var(--tsu-text-primary)",
+		"--_tag-border": "var(--tsu-neutral-outline-border)"
+	}),
+	success: css({
+		"--_tag-bg": "var(--tsu-success-solid-bg)",
+		"--_tag-solid-fg": "var(--tsu-success-solid-fg)",
+		"--_tag-outline-fg": "var(--tsu-success-outline-fg)",
+		"--_tag-border": "var(--tsu-success-outline-border)"
+	}),
+	warning: css({
+		"--_tag-bg": "var(--tsu-warning-solid-bg)",
+		"--_tag-solid-fg": "var(--tsu-warning-solid-fg)",
+		"--_tag-outline-fg": "var(--tsu-warning-outline-fg)",
+		"--_tag-border": "var(--tsu-warning-outline-border)"
+	}),
+	danger: css({
+		"--_tag-bg": "var(--tsu-danger-solid-bg)",
+		"--_tag-solid-fg": "var(--tsu-danger-solid-fg)",
+		"--_tag-outline-fg": "var(--tsu-danger-outline-fg)",
+		"--_tag-border": "var(--tsu-danger-outline-border)"
+	}),
+	accent: css({
+		"--_tag-bg": "var(--tsu-accent-solid-bg)",
+		"--_tag-solid-fg": "var(--tsu-accent-solid-fg)",
+		"--_tag-outline-fg": "var(--tsu-accent-outline-fg)",
+		"--_tag-border": "var(--tsu-accent-outline-border)"
+	})
+};
+var sizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-secondary-height-xs)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-xs))",
+		padding: "0 6px",
+		fontSize: "var(--tsu-comp-font-size-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-secondary-height-sm)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-sm))",
+		padding: "0 8px",
+		fontSize: "11px"
+	}),
+	md: css({
+		height: "var(--tsu-comp-secondary-height-md)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-md))",
+		padding: "0 10px",
+		fontSize: "var(--tsu-comp-font-size-sm)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-secondary-height-lg)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-lg))",
+		padding: "0 12px",
+		fontSize: "13px"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-secondary-height-xl)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-xl))",
+		padding: "0 14px",
+		fontSize: "var(--tsu-comp-font-size-md)"
+	}),
+	"2xl": css({
+		height: "var(--tsu-comp-secondary-height-xxl)",
+		minWidth: "calc(2 * var(--tsu-comp-secondary-height-xxl))",
+		padding: "0 18px",
+		fontSize: "var(--tsu-comp-font-size-lg)"
+	})
+};
+var closeClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 0,
+	margin: 0,
+	marginRight: "-2px",
+	border: "none",
+	background: "none",
+	color: "inherit",
+	cursor: "pointer",
+	borderRadius: "var(--tsu-radius-round)",
+	opacity: .6,
+	transition: "opacity var(--tsu-transition-fast)",
+	"& svg": {
+		display: "block",
+		flexShrink: 0
+	},
+	"@media (hover: hover)": { "&:hover": { opacity: 1 } },
+	"&:active": { opacity: 1 }
+});
+var intentMap = {
+	default: "neutral",
+	info: "accent"
+};
+var read = (v) => typeof v === "function" ? v() : v;
+var variantClass = {
+	solid: solidClass,
+	outline: outlineClass
+};
+var Tag = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		variant: "solid",
+		intent: "default",
+		size: "sm",
+		closable: false
+	}, props), [
+		"variant",
+		"intent",
+		"size",
+		"closable",
+		"onClose",
+		"className",
+		"children"
+	]);
+	return jsx(ark.span, mergeProps(rest, {
+		"data-part": "root",
+		className: () => {
+			const variant = read(local.variant) === "outline" ? "outline" : "solid";
+			const intent = intentMap[read(local.intent)] || read(local.intent);
+			const size = read(local.size);
+			return [
+				baseClass,
+				variantClass[variant],
+				intentClasses[intent],
+				sizeClasses[size],
+				local.className
+			].filter(Boolean).join(" ");
+		},
+		children: [() => local.children, () => read(local.closable) && (() => {
+			const _el0 = _tmpl.cloneNode(true);
+			setProp(_el0, "className", () => closeClass);
+			setProp(_el0, "onClick", (e) => {
+				e.stopPropagation();
+				local.onClose?.();
+			});
+			return _el0;
+		})()]
+	}));
+};
+Tag.origin = { Root: ark.span };
+//#endregion
+export { Tag as default };

package/dist/index.js

@@ -49,6 +49,7 @@ import StickyHeader from "./components/StickyHeader.js";
 import SwipeReveal from "./components/SwipeReveal.js";
 import Switch from "./components/Switch.js";
 import Tabs from "./components/Tabs.js";
+import Tag from "./components/Tag.js";
 import TagsInput from "./components/TagsInput.js";
 import Toast, { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster } from "./components/Toast.js";
 import Toggle from "./components/Toggle.js";
@@ -56,4 +57,4 @@ import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
 import FilterGroup from "./components/FilterGroup.js";
 import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
 import TreeView, { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem } from "./components/TreeView.js";
-export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DatePicker, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
+export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DatePicker, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, Tag, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };

package/docs/api.md

@@ -128,8 +128,8 @@ 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`). |
+| `variant` | `'outline' \| 'solid'` | `'outline'` | Filled background instead of outlined. |
+| `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`, `'danger'`). `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
 | `size` | `string` | `md` | See size values. |
 | `disabled` | `boolean` | `false` | Disables the input. |
 | `invalid` | `boolean` | `false` | Renders the error/invalid style. |
@@ -242,8 +242,8 @@ 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. |
-| `intent` | `'default' \| 'neutral' \| 'danger'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `solid`). |
+| `variant` | `'outline' \| 'solid'` | `'outline'` | Filled trigger variant instead of outline. |
+| `intent` | `'default' \| 'neutral' \| 'danger'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
 | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
 | `placeholder` | `string` | — | Trigger placeholder. |
 | `backdropClassName` | `string` | — | Backdrop class. |
@@ -259,7 +259,7 @@ Desktop (popover-style) select built on Ark `Select`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `solid` | `boolean` | `false` | Filled trigger variant. |
+| `variant` | `'outline' \| 'solid'` | `'outline'` | Filled trigger variant. |
 | `size` | `string` | `md` | See size values. |
 | `disabled` | `boolean` | `false` | Disabled. |
 | `invalid` | `boolean` | `false` | Error state. |

package/docs/component-api-pattern.md

@@ -255,7 +255,7 @@ export { Root as FileUpload }
 import { Button } from '@plastic-js/tsumiki'
 
 // Primary usage: tsumiki-styled
-<Button solid>Click me</Button>
+<Button variant="solid">Click me</Button>
 
 // Escape hatch: raw Ark API
 <Button.origin.Root>...</Button.origin.Root>

package/package.json

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