@nattstack/ui 0.0.54 → 0.0.56

package/dist/components/index.d.ts

@@ -392,6 +392,7 @@ declare const TEXTAREA_CLASS_NAME: {
 //#region src/components/tooltip/tooltip.d.ts
 interface TooltipProps extends Omit<Tooltip$1.Root.Props, "disabled"> {
   isDisabled?: Tooltip$1.Root.Props["disabled"];
+  isDisableHoverablePopup?: Tooltip$1.Root.Props["disableHoverablePopup"];
 }
 declare function Tooltip(props: TooltipProps): JSX.Element;
 //#endregion

package/dist/components/index.js

@@ -22,7 +22,8 @@ var button_spinner_module_default = {
 //#endregion
 //#region src/components/button/button-spinner.tsx
 function ButtonSpinner(props) {
-	const { size = 20 } = props;
+	const DEFAULT_SIZE = 20;
+	const { size = DEFAULT_SIZE } = props;
 	return /* @__PURE__ */ jsx("div", {
 		className: button_spinner_module_default.button_spinner,
 		style: { "--size": `${size}px` },
@@ -50,7 +51,8 @@ var button_module_default = {
 //#endregion
 //#region src/components/button/button.tsx
 function Button(props) {
-	const { children = "", className: customClassName = "", iconEnd = "", iconStart = "", isActive = false, isDisabled = false, isFullWidth = false, isIconOnly = false, isLoading = false, isRounded = false, size = 40, type = "button", variant = "primary", ...rest } = props;
+	const DEFAULT_SIZE = 40;
+	const { children = "", className: customClassName = "", iconEnd = "", iconStart = "", isActive = false, isDisabled = false, isFullWidth = false, isIconOnly = false, isLoading = false, isRounded = false, size = DEFAULT_SIZE, type = "button", variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-pressed": isActive,
 		className: normalizeWhitespace(`
@@ -100,7 +102,8 @@ const BUTTON_CLASS_NAME = {
 //#endregion
 //#region src/components/button-link/button-link.tsx
 function ButtonLink(props) {
-	const { as = "a", className: customClassName = "", isFullWidth = false, isIconOnly = false, isRounded = false, size = 40, variant = "primary", ...rest } = props;
+	const DEFAULT_SIZE = 40;
+	const { as = "a", className: customClassName = "", isFullWidth = false, isIconOnly = false, isRounded = false, size = DEFAULT_SIZE, variant = "primary", ...rest } = props;
 	return createElement(as, {
 		className: normalizeWhitespace(`
     ${BUTTON_CLASS_NAME.BASE}
@@ -265,7 +268,8 @@ var input_module_default = {
 //#endregion
 //#region src/components/input/input.tsx
 function Input(props) {
-	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = 48, type = "text", ...rest } = props;
+	const DEFAULT_SIZE = 48;
+	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = DEFAULT_SIZE, type = "text", ...rest } = props;
 	return /* @__PURE__ */ jsx("input", {
 		className: normalizeWhitespace(`
     ${INPUT_CLASS_NAME.BASE}
@@ -422,7 +426,8 @@ function MenuCheckboxItem(props) {
 //#endregion
 //#region src/components/menu/menu-content.tsx
 function MenuContent(props) {
-	const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, side = "bottom", sideOffset = 8, sticky = void 0, ...rest } = props;
+	const DEFAULT_SIDE_OFFSET = 8;
+	const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, side = "bottom", sideOffset = DEFAULT_SIDE_OFFSET, sticky = void 0, ...rest } = props;
 	const combinedClassName = getMenuClassName(MENU_CLASS_NAME.CONTENT, customClassName);
 	return /* @__PURE__ */ jsx(Menu$1.Portal, {
 		container,
@@ -700,7 +705,8 @@ var switch_module_default = {
 //#endregion
 //#region src/components/switch/switch.tsx
 function Switch(props) {
-	const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = 24, ...rest } = props;
+	const DEFAULT_SIZE = 24;
+	const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = DEFAULT_SIZE, ...rest } = props;
 	const combinedClassName = normalizeWhitespace(`
     ${SWITCH_CLASS_NAME.BASE}
     ${SWITCH_CLASS_NAME.SIZE[size]}
@@ -948,7 +954,8 @@ var textarea_module_default = { "textarea": "textarea-module_textarea_JqpxFq" };
 //#endregion
 //#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 DEFAULT_ROWS = 2;
+	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = DEFAULT_ROWS, ...rest } = props;
 	return /* @__PURE__ */ jsx("textarea", {
 		className: normalizeWhitespace(`
     ${TEXTAREA_CLASS_NAME.INPUT}
@@ -977,11 +984,11 @@ const TEXTAREA_CLASS_NAME = {
 //#endregion
 //#region src/components/tooltip/tooltip.tsx
 function Tooltip(props) {
-	const { isDisabled = false, ...rest } = props;
+	const { isDisabled = false, isDisableHoverablePopup = true, ...rest } = props;
 	return /* @__PURE__ */ jsx(Tooltip$1.Root, {
 		"data-slot": "tooltip",
 		disabled: isDisabled,
-		disableHoverablePopup: true,
+		disableHoverablePopup: isDisableHoverablePopup,
 		...rest
 	});
 }
@@ -989,27 +996,30 @@ function Tooltip(props) {
 //#region src/components/tooltip/tooltip-content.module.css
 var tooltip_content_module_default = {
 	"tooltip_content": "tooltip-content-module_tooltip_content_j-Z8kW",
-	"tooltip_content_positioner": "tooltip-content-module_tooltip_content_positioner_j-Z8kW"
+	"tooltip_content_portal": "tooltip-content-module_tooltip_content_portal_j-Z8kW"
 };
 //#endregion
 //#region src/components/tooltip/tooltip-content.tsx
 function TooltipContent(props) {
-	const { children, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
+	const DEFAULT_SIDE_OFFSET = 4;
+	const { children = "", className: customClassName = "", side = "top", sideOffset = DEFAULT_SIDE_OFFSET, ...rest } = props;
 	const combinedClassName = normalizeWhitespace(`
     ${TOOLTIP_CONTENT_CLASS_NAME.BASE}
     ${customClassName}
   `);
-	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(Tooltip$1.Positioner, {
-		className: tooltip_content_module_default.tooltip_content_positioner,
-		side,
-		sideOffset,
-		children: [/* @__PURE__ */ jsx(Tooltip$1.Popup, {
-			className: combinedClassName,
-			"data-slot": "tooltip-content",
-			...rest,
-			children
-		}), /* @__PURE__ */ jsx(Tooltip$1.Arrow, {})]
-	}) });
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+		className: tooltip_content_module_default.tooltip_content_portal,
+		children: /* @__PURE__ */ jsxs(Tooltip$1.Positioner, {
+			side,
+			sideOffset,
+			children: [/* @__PURE__ */ jsx(Tooltip$1.Popup, {
+				className: combinedClassName,
+				"data-slot": "tooltip-content",
+				...rest,
+				children
+			}), /* @__PURE__ */ jsx(Tooltip$1.Arrow, {})]
+		})
+	});
 }
 const TOOLTIP_CONTENT_CLASS_NAME = { BASE: tooltip_content_module_default.tooltip_content };
 //#endregion

package/dist/components/style.css

@@ -349,7 +349,7 @@
 }
 .input-module_input_dWvcHW {
   appearance: none;
-  background-color: var(--color-bg-primary);
+  background-color: var(--color-bg-shell-inner);
   box-shadow: 0 0 0 1px var(--color-border) inset;
   color: var(--color-text-primary);
   cursor: text;
@@ -956,19 +956,27 @@
   padding: 12px !important;
 }
 .tooltip-content-module_tooltip_content_j-Z8kW {
+  --scale: .975;
   background-color: var(--color-gray-dark-1);
   color: var(--color-gray-dark-12);
+  transform-origin: var(--transform-origin);
   border-radius: 8px;
   padding: 4px 8px;
   font-size: 13px;
   font-weight: 500;
+  transition-property: opacity, scale, translate;
+  transition-duration: .15s;
 }
 
-.tooltip-content-module_tooltip_content_positioner_j-Z8kW {
-  isolation: isolate;
+.tooltip-content-module_tooltip_content_portal_j-Z8kW {
   z-index: 50;
 }
 
+.tooltip-content-module_tooltip_content_j-Z8kW[data-ending-style], .tooltip-content-module_tooltip_content_j-Z8kW[data-starting-style] {
+  opacity: 0;
+  scale: var(--scale);
+}
+
 .dark .tooltip-content-module_tooltip_content_j-Z8kW {
   background-color: var(--color-gray-light-1);
   color: var(--color-gray-light-12);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",
@@ -45,12 +45,12 @@
     "release": "bun publish"
   },
   "dependencies": {
-    "@base-ui/react": "1.4.0"
+    "@base-ui/react": "1.4.1"
   },
   "devDependencies": {
-    "@tsdown/css": "0.21.9",
-    "@types/bun": "1.3.12",
-    "tsdown": "0.21.9",
+    "@tsdown/css": "0.21.10",
+    "@types/bun": "1.3.13",
+    "tsdown": "0.21.10",
     "typescript": "6.0.3"
   },
   "peerDependencies": {