@nattstack/ui 0.0.105 → 0.0.107

package/dist/baseline/index.css

@@ -165,10 +165,10 @@ body > * {
 /*
     Debug helper for visualizing element bounds
 */
-.d {
+@utility d {
   border: 1px dashed red;
-}
 
-.dark .d {
-  border-color: yellow;
+  @variant dark {
+    border-color: yellow;
+  }
 }

package/dist/components/button/button.css

@@ -118,51 +118,17 @@
   }
 
   .button-module_variant_primary_4nLWdW {
-    background-color: var(--color-primary);
-    box-shadow: inset 0 0 0 1px var(--color-primary),
-      inset 0 1px 0 1px #ffffff40;
-    color: #fff;
-    isolation: isolate;
-  }
-
-  .button-module_variant_primary_4nLWdW:after {
-    content: "";
-    mix-blend-mode: overlay;
-    pointer-events: none;
-    transition-duration: inherit;
-    background-image: radial-gradient(75% 100% at 50% -50%, #ffffff40, #0000);
-    transition-property: opacity;
-    position: absolute;
-    inset: 0;
-  }
-
-  .button-module_variant_primary_4nLWdW:hover:not(:disabled):after {
-    opacity: 0;
-  }
-
-  .dark .button-module_variant_primary_4nLWdW {
-    box-shadow: inset 0 1px #ffffff40;
+    --color: #fff;
+    background-color: var(--color-gray-12);
+    color: var(--color);
   }
 
   .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
-    --color-mixed: #000;
-    background-color: color-mix(in oklab, var(--color-primary) 100%, var(--color-mixed) 10%);
-    box-shadow: none;
-  }
-
-  .dark .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
-    --color-mixed: #fff;
+    background-color: color-mix(in oklab, var(--color-gray-12) 100%, var(--color) 25%);
   }
 
-  .button-module_variant_primary_4nLWdW > * {
-    --opacity: .25;
-    filter: drop-shadow(0 1px 1px hsla(0, 0%, 0%, var(--opacity)));
-    transition-duration: inherit;
-    transition-property: filter;
-  }
-
-  .button-module_variant_primary_4nLWdW:hover:not(:disabled) > * {
-    --opacity: 0;
+  .dark .button-module_variant_primary_4nLWdW {
+    --color: #000;
   }
 
   .button-module_variant_secondary_4nLWdW {

package/dist/components/column/column.js

@@ -4,18 +4,21 @@ import { createElement } from "react";
 //#region src/components/column/column.tsx
 function Column(props) {
 	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
-	return createElement(as, {
-		className: columnVariants({ className: customClassName }),
+	const Component = as;
+	const combinedClassName = columnVariants({ className: customClassName });
+	const combinedStyle = {
+		...customStyle,
+		...gap === void 0 ? {} : { gap },
+		...gapX === void 0 ? {} : { columnGap: gapX },
+		...gapY === void 0 ? {} : { rowGap: gapY },
+		...flexWrap === void 0 ? {} : { flexWrap },
+		...alignItems === void 0 ? {} : { alignItems },
+		...justifyContent === void 0 ? {} : { justifyContent }
+	};
+	return createElement(Component, {
+		className: combinedClassName,
 		"data-slot": "column",
-		style: {
-			...customStyle,
-			...gap === void 0 ? {} : { gap },
-			...gapX === void 0 ? {} : { columnGap: gapX },
-			...gapY === void 0 ? {} : { rowGap: gapY },
-			...flexWrap === void 0 ? {} : { flexWrap },
-			...alignItems === void 0 ? {} : { alignItems },
-			...justifyContent === void 0 ? {} : { justifyContent }
-		},
+		style: combinedStyle,
 		...rest
 	});
 }

package/dist/components/combobox/combobox-search.js

@@ -5,8 +5,9 @@ import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-search.tsx
 function ComboboxSearch(props) {
 	const { className: customClassName = "", isDisabled = false, ...rest } = props;
+	const combinedClassName = comboboxSearchVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs("div", {
-		className: comboboxSearchVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "combobox-search",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: combobox_search_module_default.icon,

package/dist/components/dialog-responsive/dialog-responsive-bar.js

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/dialog-responsive/dialog-responsive-bar.tsx
 function DialogResponsiveBar(props) {
 	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = dialogResponsiveBarVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx("div", {
-		className: dialogResponsiveBarVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "dialog-responsive-bar",
 		...rest
 	});

package/dist/components/input/input.js

@@ -4,13 +4,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/input/input.tsx
 function Input(props) {
 	const { className: customClassName = "", isActive = false, isAutoFocus = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = 48, type = "text", ...rest } = props;
+	const combinedClassName = inputVariants({
+		className: customClassName,
+		isRounded,
+		size
+	});
 	return /* @__PURE__ */ jsx("input", {
 		autoFocus: isAutoFocus,
-		className: inputVariants({
-			className: customClassName,
-			isRounded,
-			size
-		}),
+		className: combinedClassName,
 		"data-is-active": isActive,
 		"data-is-invalid": isInvalid,
 		"data-is-valid": isValid,

package/dist/components/label/label.js

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/label/label.tsx
 function Label(props) {
 	const { className: customClassName = "", htmlFor = void 0, children = void 0, ...rest } = props;
+	const combinedClassName = labelVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx("label", {
-		className: labelVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "label",
 		htmlFor,
 		...rest,

package/dist/components/row/row.js

@@ -4,18 +4,21 @@ import { createElement } from "react";
 //#region src/components/row/row.tsx
 function Row(props) {
 	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
-	return createElement(as, {
-		className: rowVariants({ className: customClassName }),
+	const Component = as;
+	const combinedClassName = rowVariants({ className: customClassName });
+	const combinedStyle = {
+		...customStyle,
+		...gap === void 0 ? {} : { gap },
+		...gapX === void 0 ? {} : { columnGap: gapX },
+		...gapY === void 0 ? {} : { rowGap: gapY },
+		...flexWrap === void 0 ? {} : { flexWrap },
+		...alignItems === void 0 ? {} : { alignItems },
+		...justifyContent === void 0 ? {} : { justifyContent }
+	};
+	return createElement(Component, {
+		className: combinedClassName,
 		"data-slot": "row",
-		style: {
-			...customStyle,
-			...gap === void 0 ? {} : { gap },
-			...gapX === void 0 ? {} : { columnGap: gapX },
-			...gapY === void 0 ? {} : { rowGap: gapY },
-			...flexWrap === void 0 ? {} : { flexWrap },
-			...alignItems === void 0 ? {} : { alignItems },
-			...justifyContent === void 0 ? {} : { justifyContent }
-		},
+		style: combinedStyle,
 		...rest
 	});
 }

package/dist/components/spacer/spacer.js

@@ -4,14 +4,16 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/spacer/spacer.tsx
 function Spacer(props) {
 	const { className: customClassName = "", height, style: customStyle, width, ...rest } = props;
+	const combinedClassName = spacerVariants({ className: customClassName });
+	const combinedStyle = {
+		...customStyle,
+		...width === void 0 ? {} : { width },
+		...height === void 0 ? {} : { height }
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: spacerVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "spacer",
-		style: {
-			...customStyle,
-			...width === void 0 ? {} : { width },
-			...height === void 0 ? {} : { height }
-		},
+		style: combinedStyle,
 		...rest
 	});
 }

package/dist/components/textarea/textarea.js

@@ -5,11 +5,12 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
 function Textarea(props) {
 	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = 2, ...rest } = props;
+	const combinedClassName = textareaVariants({
+		className: customClassName,
+		isRounded
+	});
 	return /* @__PURE__ */ jsx("textarea", {
-		className: textareaVariants({
-			className: customClassName,
-			isRounded
-		}),
+		className: combinedClassName,
 		"data-is-active": isActive,
 		"data-is-invalid": isInvalid,
 		"data-is-valid": isValid,

package/dist/components/toggle-group/toggle-group-item.js

@@ -5,8 +5,9 @@ import { Toggle } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group-item.tsx
 function ToggleGroupItem(props) {
 	const { className: customClassName = "", isDisabled = false, isNativeButton = true, ...rest } = props;
+	const combinedClassName = toggleGroupItemVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Toggle, {
-		className: toggleGroupItemVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "toggle-group-item",
 		disabled: isDisabled,
 		nativeButton: isNativeButton,

package/dist/components/toggle-group/toggle-group.js

@@ -5,8 +5,9 @@ import { ToggleGroup } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group.tsx
 function ToggleGroup$1(props) {
 	const { className: customClassName = "", isDisabled = false, isLoopFocus = true, isMultiple = false, ...rest } = props;
+	const combinedClassName = toggleGroupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(ToggleGroup, {
-		className: toggleGroupVariants({ className: customClassName }),
+		className: combinedClassName,
 		"data-slot": "toggle-group",
 		disabled: isDisabled,
 		loopFocus: isLoopFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.105",
+  "version": "0.0.107",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",
@@ -48,7 +48,7 @@
     "release": "bun publish"
   },
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.7.0",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {