@scaleflex/ui-tw 0.0.139 → 0.0.141

package/input/input.component.js

@@ -70,17 +70,16 @@ function Input(_ref) {
     readOnly: readOnly,
     value: value,
     className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants({
-      size: size,
-      className: hasAddon ? undefined : className
+      size: size
     }), (Icon || suffix) && !clearable && inputWithIconVariants({
       size: size
-    }), clearable && inputClearablePaddingOptions[size]]))
+    }), clearable && inputClearablePaddingOptions[size], className]))
   }, props));
   if (!hasAddon) {
     return inputElement;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: cn('relative', className, wrapperClassName)
+    className: cn('relative', wrapperClassName)
   }, inputElement, Icon && /*#__PURE__*/React.createElement(Icon, {
     className: cn(inputIconSizeVariants({
       size: size

package/label/label.component.js

@@ -34,7 +34,7 @@ function Label(_ref) {
       className: className
     }))
   }, props), noTruncate ? children : /*#__PURE__*/React.createElement("span", {
-    className: cn('min-w-0 flex-1 truncate')
+    className: "min-w-0 truncate"
   }, children), (icon || tooltip || disabledTooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     icon: icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.139",
+    "@scaleflex/icons-tw": "^0.0.141",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/search/search.component.d.ts

@@ -1,3 +1,3 @@
 import type { InputProps } from '@scaleflex/ui-tw/input';
 import React from 'react';
-export declare function Search({ className, wrapperClassName, size, disabled, readOnly, onChange, ...rest }: InputProps): React.JSX.Element;
+export declare function Search({ className, wrapperClassName, size, disabled, readOnly, onChange, value: controlledValue, defaultValue, clearable, onClear, icon, suffix, ...rest }: InputProps): React.JSX.Element;

package/search/search.component.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "wrapperClassName", "size", "disabled", "readOnly", "onChange"];
+var _excluded = ["className", "wrapperClassName", "size", "disabled", "readOnly", "onChange", "value", "defaultValue", "clearable", "onClear", "icon", "suffix"];
 import { buttonVariants } from '@scaleflex/ui-tw/button';
 import { ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -11,48 +11,62 @@ import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { Search as SearchIcon, XIcon } from 'lucide-react';
 import React, { useState } from 'react';
 export function Search(_ref) {
-  var _rest$value$toString, _rest$value;
+  var _defaultValue$toStrin;
   var className = _ref.className,
     wrapperClassName = _ref.wrapperClassName,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
+    controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    clearable = _ref.clearable,
+    onClear = _ref.onClear,
+    icon = _ref.icon,
+    suffix = _ref.suffix,
     rest = _objectWithoutProperties(_ref, _excluded);
+  void clearable, onClear, icon, suffix;
   var padding = searchPaddingMap[size];
   var iconSize = iconSizeOptions[size];
   var crossSize = crossSizeOptions[size];
-  var _useState = useState((_rest$value$toString = (_rest$value = rest.value) === null || _rest$value === void 0 ? void 0 : _rest$value.toString()) !== null && _rest$value$toString !== void 0 ? _rest$value$toString : ''),
+  var isControlled = controlledValue !== undefined;
+  var _useState = useState((_defaultValue$toStrin = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) !== null && _defaultValue$toStrin !== void 0 ? _defaultValue$toStrin : ''),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var value = isControlled ? controlledValue : internalValue;
+  var handleChange = function handleChange(e) {
+    if (!isControlled) {
+      setInternalValue(e.target.value);
+    }
+    onChange === null || onChange === void 0 || onChange(e);
+  };
   var handleClear = function handleClear() {
     var syntheticEvent = {
       target: {
         value: ''
       }
     };
-    setValue('');
-    _onChange === null || _onChange === void 0 || _onChange(syntheticEvent);
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    onChange === null || onChange === void 0 || onChange(syntheticEvent);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cn('relative w-full', wrapperClassName)
   }, /*#__PURE__*/React.createElement(SearchIcon, {
-    className: cn('text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2', iconSize, padding.icon)
+    className: cn('text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2', iconSize, padding.icon, disabled && 'opacity-50')
   }), /*#__PURE__*/React.createElement(Input, _extends({
     value: value,
-    onChange: function onChange(e) {
-      setValue(e.target.value);
-      _onChange === null || _onChange === void 0 || _onChange(e);
-    },
+    onChange: handleChange,
     type: "search",
     size: size,
     disabled: disabled,
     readOnly: readOnly,
     className: cn('[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:appearance-none', padding.input, className)
   }, rest)), value && !readOnly && !disabled && /*#__PURE__*/React.createElement("button", {
-    role: "button",
+    type: "button",
     tabIndex: 0,
     onClick: handleClear,
     "data-clear-icon": "true",
@@ -63,6 +77,6 @@ export function Search(_ref) {
     }), 'absolute top-1/2 right-2 -translate-y-1/2')
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')
+    className: "text-muted-foreground/70 hover:text-muted-foreground shrink-0"
   })));
 }