@scaleflex/ui-tw 0.0.95 → 0.0.98

package/combobox/combobox-users/combobox-users.component.js

@@ -153,8 +153,13 @@ export function ComboboxUsers(_ref) {
   })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
     className: cn('text-muted-foreground/70 my-auto ml-auto shrink-0', iconSizeInTriggerOptions[size])
   }))), /*#__PURE__*/React.createElement(PopoverContent, _extends({
-    className: cn('p-0', popoverClassName)
-  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
+    className: cn('w-[var(--radix-popover-trigger-width)] max-w-[var(--radix-popover-trigger-width)] min-w-0 p-0', popoverClassName),
+    align: "start"
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, {
+    filter: function filter(value, search) {
+      return value.includes(search.trim().toLowerCase()) ? 1 : 0;
+    }
+  }, /*#__PURE__*/React.createElement(CommandInput, {
     size: size,
     placeholder: searchPlaceholder
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {

package/command/command.component.js

@@ -30,7 +30,7 @@ import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
 import { useCommandState } from 'cmdk';
 import { CheckIcon, SearchIcon, UserCircle2Icon, XIcon } from 'lucide-react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useCallback } from 'react';
 import { selectCommandHeadingOptions } from './command.utils';
 function Command(_ref) {
@@ -133,7 +133,25 @@ function CommandClear(_ref4) {
 function CommandList(_ref5) {
   var className = _ref5.className,
     props = _objectWithoutProperties(_ref5, _excluded5);
+  var listRef = useRef(null);
+  useEffect(function () {
+    var listNode = listRef.current;
+    if (!listNode) return;
+    var observer = new MutationObserver(function () {
+      listNode.scrollTo({
+        top: 0
+      });
+    });
+    observer.observe(listNode, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(CommandPrimitive.List, _extends({
+    ref: listRef,
     "data-slot": "command-list",
     className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)
   }, props));
@@ -250,6 +268,7 @@ function CommandUserItem(_ref10) {
     src: profileUrl,
     alt: "profile image"
   }) : /*#__PURE__*/React.createElement(UserCircle2Icon, {
+    strokeWidth: "1",
     className: "size-8"
   })), /*#__PURE__*/React.createElement("div", {
     className: "max-w-10/12"

package/input/input.component.d.ts

@@ -3,5 +3,5 @@ import type { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare function Input({ className, type, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, type, size, disabled, readOnly, icon: Icon, ...props }: InputProps): React.JSX.Element;
 export { Input, inputVariants };

package/input/input.component.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "type", "size", "disabled", "readOnly"];
+var _excluded = ["className", "type", "size", "disabled", "readOnly", "icon"];
 import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
-import { InputType, inputSizeOptions } from './input.constants';
+import { InputType, inputIconSizeOptions, inputSizeOptions, inputWithIconSizeOptions } from './input.constants';
 var inputVariants = cva('', {
   variants: {
     size: inputSizeOptions
@@ -16,6 +16,22 @@ var inputVariants = cva('', {
     size: FormSize.Md
   }
 });
+var inputIconSizeVariants = cva('', {
+  variants: {
+    size: inputIconSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var inputWithIconVariants = cva('', {
+  variants: {
+    size: inputWithIconSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
 function Input(_ref) {
   var className = _ref.className,
     _ref$type = _ref.type,
@@ -26,8 +42,9 @@ function Input(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    Icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("input", _extends({
+  var inputElement = /*#__PURE__*/React.createElement("input", _extends({
     type: type,
     "data-slot": "input",
     disabled: disabled,
@@ -35,7 +52,19 @@ function Input(_ref) {
     className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants({
       size: size,
       className: className
+    }), Icon && inputWithIconVariants({
+      size: size
     })]))
   }, props));
+  if (!Icon) {
+    return inputElement;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('relative', className)
+  }, inputElement, /*#__PURE__*/React.createElement(Icon, {
+    className: cn(inputIconSizeVariants({
+      size: size
+    }), 'text-muted-foreground absolute top-1/2 -translate-y-1/2 transform', disabled && 'opacity-50')
+  }));
 }
 export { Input, inputVariants };

package/input/input.constants.d.ts

@@ -13,3 +13,13 @@ export declare const InputType: {
     readonly Email: "email";
     readonly Number: "number";
 };
+export declare const inputIconSizeOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const inputWithIconSizeOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/input/input.constants.js

@@ -6,4 +6,6 @@ export var InputType = {
   Text: 'text',
   Email: 'email',
   Number: 'number'
-};
+};
+export var inputIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'right-2 size-3'), FormSize.Md, 'right-3 size-4'), FormSize.Lg, 'right-4 size-5');
+export var inputWithIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-6'), FormSize.Md, 'pr-8'), FormSize.Lg, 'pr-10');

package/input/input.types.d.ts

@@ -1,6 +1,8 @@
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import type { LucideIcon } from 'lucide-react';
 import type { ComponentProps } from 'react';
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     size?: FormSizeType;
     'aria-invalid'?: boolean;
+    icon?: LucideIcon;
 }

package/package.json

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