@scaleflex/ui-tw 0.0.49 → 0.0.50

package/combobox/combobox-multi-tag/combobox-multi-tag.component.js

@@ -103,6 +103,7 @@ export function ComboboxMultiTag(_ref) {
       size: size,
       variant: "default",
       removable: true,
+      className: "max-w-xs",
       onRemove: function onRemove(event) {
         event.preventDefault();
         event.stopPropagation();

package/command/command.component.js

@@ -12,7 +12,7 @@ var _excluded = ["className"],
 import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
-import { selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
+import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
 import { switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
@@ -120,20 +120,26 @@ function CommandItem(_ref8) {
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
-    className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectTriggerVariants({
+    className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
       size: size,
       className: className
-    }), isGroup && getOptionInGroupPaddingLeft(size), selected && 'text-primary', className)
+    }), isGroup && getOptionInGroupPaddingLeft(size), selected && 'text-primary pr-7', className)
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center"
+    className: "flex flex-1 items-center overflow-hidden"
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
     size: size,
     icon: icon,
-    className: cn('text-muted-foreground hover:text-primary', selected && 'text-primary')
-  }), /*#__PURE__*/React.createElement("span", null, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
+    className: cn('text-muted-foreground hover:text-primary shrink-0', selected && 'text-primary')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-1 overflow-hidden"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "line-clamp-2 overflow-hidden text-left break-words text-ellipsis"
+  }, children), tooltip && /*#__PURE__*/React.createElement("div", {
+    className: "flex shrink-0 items-center"
+  }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     tooltip: tooltip
-  })), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, null, shortcut), /*#__PURE__*/React.createElement("span", {
+  })))), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, null, shortcut), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(CheckIcon, {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')

package/dialog/dialog.component.js

@@ -70,9 +70,9 @@ function DialogWideContent(_ref6) {
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
     size: "icon-md"
-  }, /*#__PURE__*/React.createElement(XIcon, null)), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Close"))));
+  }, "Close")))));
 }
 function DialogFormContent(_ref7) {
   var className = _ref7.className,
@@ -85,13 +85,14 @@ function DialogFormContent(_ref7) {
     className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
+    asChild: true,
     className: cn('text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
     size: "icon-md"
-  }, /*#__PURE__*/React.createElement(XIcon, null)), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Close"))));
+  }, "Close")))));
 }
 function DialogWideHeader(_ref8) {
   var className = _ref8.className,

package/input/input.constants.d.ts

@@ -3,6 +3,11 @@ export declare const inputSizeOptions: {
     readonly md: "py-3 px-4 h-10 text-base ";
     readonly lg: "py-3 px-4 h-12 text-lg ";
 };
+export declare const inputItemSizeOptions: {
+    readonly sm: "py-2 px-3 min-h-[2rem] text-sm";
+    readonly md: "py-3 px-4 min-h-[2.5rem] text-base ";
+    readonly lg: "py-3 px-4 min-h-[3rem] text-lg ";
+};
 export declare const InputType: {
     readonly Text: "text";
     readonly Email: "email";

package/input/input.constants.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-sm'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');
+export var inputItemSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 min-h-[2rem] text-sm'), FormSize.Md, 'py-3 px-4 min-h-[2.5rem] text-base '), FormSize.Lg, 'py-3 px-4 min-h-[3rem] text-lg ');
 export var InputType = {
   Text: 'text',
   Email: 'email',

package/input-tags/input-tags.component.js

@@ -146,6 +146,7 @@ export function InputTags(_ref) {
     className: "text-muted-foreground"
   }, placeholder) : value.map(function (tag) {
     return /*#__PURE__*/React.createElement(Pill, {
+      className: "max-w-xs",
       key: tag[valueProp],
       size: size,
       removable: true,
@@ -202,7 +203,9 @@ export function InputTags(_ref) {
         return handleAddTag(tag);
       },
       isGroup: true
-    }, tag.label);
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
+    }, tag.label));
   })), filteredAll.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
     size: size,
     heading: "All Tags"
@@ -214,7 +217,9 @@ export function InputTags(_ref) {
         return handleAddTag(tag);
       },
       isGroup: true
-    }, tag.label);
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
+    }, tag.label));
   })), !canCreate && filteredSuggested.length === 0 && filteredAll.length === 0 && /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), canCreate && /*#__PURE__*/React.createElement(CommandItem, {
     size: size,
     onSelect: function onSelect() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "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.49",
+    "@scaleflex/icons-tw": "^0.0.50",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/pill/pill.component.js

@@ -42,7 +42,7 @@ function Pill(_ref) {
       variant: variant
     }), className)
   }, props), /*#__PURE__*/React.createElement("span", {
-    className: "select-none"
+    className: "overflow-hidden text-ellipsis whitespace-nowrap select-none"
   }, props.children), removable && /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onRemove,

package/select/select.component.d.ts

@@ -7,6 +7,9 @@ declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive
 export declare const selectTriggerVariants: (props?: ({
     size?: "md" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const selectItemVariants: (props?: ({
+    size?: "md" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function SelectTrigger({ className, size, children, readOnly, icon, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
 declare function SelectLabel({ className, size, ...props }: SelectLabelProps): React.JSX.Element;

package/select/select.component.js

@@ -10,7 +10,7 @@ var _excluded = ["className", "size", "children", "readOnly", "icon"],
   _excluded6 = ["className"],
   _excluded7 = ["className"];
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
+import { inputItemSizeOptions, inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
@@ -47,6 +47,14 @@ export var selectTriggerVariants = cva('', {
     size: FormSize.Md
   }
 });
+export var selectItemVariants = cva('', {
+  variants: {
+    size: inputItemSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
 var selectLabelVariants = cva('', {
   variants: {
     size: selectLabelSizeOptions
@@ -72,11 +80,13 @@ function SelectTrigger(_ref4) {
       className: className
     }), readOnly && selectReadOnlyClassNames, className]))
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center"
+    className: "flex flex-1 items-center gap-2 overflow-hidden"
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
     size: size,
     icon: icon
-  }), children), /*#__PURE__*/React.createElement(SelectPrimitive.Icon, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "truncate overflow-hidden text-ellipsis whitespace-nowrap"
+  }, children)), /*#__PURE__*/React.createElement(SelectPrimitive.Icon, {
     asChild: true
   }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
     className: cn('opacity-50', size === FormSize.Lg ? 'size-5' : 'size-4.5')
@@ -117,7 +127,7 @@ function SelectItem(_ref7) {
     props = _objectWithoutProperties(_ref7, _excluded4);
   return /*#__PURE__*/React.createElement(SelectPrimitive.Item, _extends({
     "data-slot": "select-item",
-    className: cn('relative flex w-full cursor-pointer items-center gap-2 outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[state=checked]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectTriggerVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[state=checked]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
       size: size
     }), isGroup && getOptionInGroupPaddingLeft(size), className)
   }, props), /*#__PURE__*/React.createElement("span", {
@@ -130,7 +140,9 @@ function SelectItem(_ref7) {
     size: size,
     icon: icon,
     className: "text-muted-foreground data-[state=checked]:text-primary"
-  }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, null, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
+  }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, {
+    className: "line-clamp-2 overflow-hidden break-words text-ellipsis"
+  }, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     tooltip: tooltip
   })));