@scaleflex/ui-tw 0.0.94 → 0.0.96

package/button/button.constants.d.ts

@@ -13,10 +13,10 @@ export declare const buttonSizeOptions: {
     readonly sm: "h-8 px-3 py-2 text-sm";
     readonly md: "h-10 px-4 py-2.5 text-base";
     readonly lg: "h-12 px-6 py-3.5 text-lg";
-    readonly "icon-xs": "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3";
-    readonly "icon-sm": "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5";
-    readonly "icon-md": "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4";
-    readonly "icon-lg": "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5";
+    readonly "icon-xs": "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-4";
+    readonly "icon-sm": "size-8 p-2 [&_svg:not([class*='size-'])]:size-4.5";
+    readonly "icon-md": "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-5";
+    readonly "icon-lg": "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-5.5";
 };
 export declare const buttonEndIconSizes: {
     readonly xs: "ml-1.5 size-3";

package/button/button.constants.js

@@ -9,7 +9,7 @@ export var ButtonSize = {
   IconMd: 'icon-md',
   IconLg: 'icon-lg'
 };
-export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg'), ButtonSize.IconXs, "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3"), ButtonSize.IconSm, "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5"), ButtonSize.IconMd, "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4"), ButtonSize.IconLg, "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5");
+export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg'), ButtonSize.IconXs, "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-4"), ButtonSize.IconSm, "size-8 p-2 [&_svg:not([class*='size-'])]:size-4.5"), ButtonSize.IconMd, "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-5"), ButtonSize.IconLg, "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-5.5");
 export var buttonEndIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5 size-3'), ButtonSize.Sm, 'ml-1.5 size-3.5'), ButtonSize.Md, 'ml-2 size-4'), ButtonSize.Lg, 'ml-2 size-4.5'), ButtonSize.IconXs, 'ml-1.5 size-3'), ButtonSize.IconSm, 'ml-1.5 size-3.5'), ButtonSize.IconMd, 'ml-2 size-4'), ButtonSize.IconLg, 'ml-2 size-4.5');
 export var buttonStartIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5 size-3'), ButtonSize.Sm, 'mr-1.5 size-3.5'), ButtonSize.Md, 'mr-2 size-4'), ButtonSize.Lg, 'mr-2 size-4.5'), ButtonSize.IconXs, 'mr-1.5 size-3'), ButtonSize.IconSm, 'mr-1.5 size-3.5'), ButtonSize.IconMd, 'mr-2 size-4'), ButtonSize.IconLg, 'mr-2 size-4.5');
 export var ButtonVariant = {

package/calendar/calendar.component.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -11,6 +12,7 @@ var _excluded = ["className", "classNames", "showOutsideDays", "captionLayout",
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Button, buttonVariants } from '@scaleflex/ui-tw/button';
+import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import React from 'react';
@@ -50,12 +52,12 @@ function Calendar(_ref) {
       months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
       month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
       nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-      button_previous: cn(buttonVariants({
+      button_previous: cn.apply(void 0, [buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
-      button_next: cn(buttonVariants({
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous].concat(_toConsumableArray(buttonBaseClassNames))),
+      button_next: cn.apply(void 0, [buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next].concat(_toConsumableArray(buttonBaseClassNames))),
       month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
       dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
       dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),

package/color-palette/color-palette.component.js

@@ -36,7 +36,7 @@ function ColorPalette(_ref) {
       key: color,
       value: color,
       "data-slot": "color-palette-item",
-      className: cn('border-border inline-block rounded-lg border-1 p-0.5 hover:opacity-80', focusRingClassNames, colorBoxVariants({
+      className: cn('border-border hover:border-secondary-foreground/50 inline-block rounded-lg border-1 p-0.5 hover:opacity-80', focusRingClassNames, colorBoxVariants({
         size: size
       }), colorBoxClassName, value === color && 'border-primary'),
       "aria-label": "Color ".concat(color)

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

@@ -246,17 +246,18 @@ function CommandUserItem(_ref10) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "shrink-0"
   }, profileUrl ? /*#__PURE__*/React.createElement("img", {
-    className: "size-10 rounded-full",
+    className: "size-8 rounded-full",
     src: profileUrl,
     alt: "profile image"
   }) : /*#__PURE__*/React.createElement(UserCircle2Icon, {
-    className: "size-10"
+    strokeWidth: "1",
+    className: "size-8"
   })), /*#__PURE__*/React.createElement("div", {
     className: "max-w-10/12"
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('w-full overflow-hidden text-ellipsis whitespace-nowrap', textClassName)
+    className: cn('w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap', textClassName)
   }, name), /*#__PURE__*/React.createElement("div", {
-    className: cn('text-secondary-foreground w-full overflow-hidden text-ellipsis whitespace-nowrap', textClassName)
+    className: cn('text-secondary-foreground w-full overflow-hidden text-xs text-ellipsis whitespace-nowrap', textClassName)
   }, email))), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(CheckIcon, {

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.94",
+  "version": "0.0.96",
   "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.94",
+    "@scaleflex/icons-tw": "^0.0.96",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",