@scaleflex/ui-tw 0.0.38 → 0.0.40

package/combobox/combobox-multi-inline/combobox-multi-inline.component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ComboboxMultiInlineProps } from '../combobox.types';
-export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;
+export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, ...rest }: ComboboxMultiInlineProps): React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import React from 'react';
@@ -27,8 +27,11 @@ export function ComboboxMultiInline(_ref) {
     onBlur = _ref.onBlur,
     _ref$showGroupSeparat = _ref.showGroupSeparator,
     showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    popoverContentProps = _ref.popoverContentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
+  var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -62,6 +65,7 @@ export function ComboboxMultiInline(_ref) {
   };
   return /*#__PURE__*/React.createElement(Popover, {
     open: open,
+    defaultOpen: defaultOpen,
     onOpenChange: onOpenChange
   }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
     open: open,
@@ -80,6 +84,7 @@ export function ComboboxMultiInline(_ref) {
     value: value,
     onSelect: toggleValue,
     size: size,
-    multiple: true
+    multiple: true,
+    popoverContentProps: popoverContentProps
   }));
 }

package/combobox/combobox-multi-tag/combobox-multi-tag.component.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { ComboboxMultiTagProps } from '../combobox.types';
-export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, ...rest }: ComboboxMultiTagProps): React.JSX.Element;
+export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, ...rest }: ComboboxMultiTagProps): React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { createClearHandlers } from '@scaleflex/ui-tw/combobox/combobox.utils';
@@ -34,10 +34,13 @@ export function ComboboxMultiTag(_ref) {
     onBlur = _ref.onBlur,
     _ref$showGroupSeparat = _ref.showGroupSeparator,
     showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    popoverContentProps = _ref.popoverContentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
-  var _useState = useState(false),
+  var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -73,6 +76,7 @@ export function ComboboxMultiTag(_ref) {
     handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
   return /*#__PURE__*/React.createElement(Popover, {
     open: open,
+    defaultOpen: defaultOpen,
     onOpenChange: onOpenChange
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
     asChild: true
@@ -128,6 +132,7 @@ export function ComboboxMultiTag(_ref) {
     size: size,
     multiple: true,
     className: popoverClassName,
-    showGroupSeparator: showGroupSeparator
+    showGroupSeparator: showGroupSeparator,
+    popoverContentProps: popoverContentProps
   }));
 }

package/combobox/combobox-single/combobox-single.component.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { ComboboxSingleProps } from '../combobox.types';
-export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, showGroupSeparator, ...rest }: ComboboxSingleProps): React.JSX.Element;
+export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, formItemId, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, ...rest }: ComboboxSingleProps): React.JSX.Element;

package/combobox/combobox-single/combobox-single.component.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps"];
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import * as React from 'react';
@@ -29,8 +29,11 @@ export function ComboboxSingle(_ref) {
     onBlur = _ref.onBlur,
     _ref$showGroupSeparat = _ref.showGroupSeparator,
     showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    popoverContentProps = _ref.popoverContentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
+  var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -55,6 +58,7 @@ export function ComboboxSingle(_ref) {
   };
   return /*#__PURE__*/React.createElement(Popover, {
     open: open,
+    defaultOpen: defaultOpen,
     onOpenChange: onOpenChange
   }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
     open: open,
@@ -73,6 +77,7 @@ export function ComboboxSingle(_ref) {
     value: value,
     onSelect: onSelect,
     size: size,
-    showGroupSeparator: showGroupSeparator
+    showGroupSeparator: showGroupSeparator,
+    popoverContentProps: popoverContentProps
   }));
 }

package/combobox/combobox.component.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { ComboboxContentProps, ComboboxTriggerProps } from './combobox.types';
 export declare function ComboboxTrigger({ children, open, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, ...rest }: ComboboxTriggerProps): React.JSX.Element;
-export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, }: ComboboxContentProps): React.JSX.Element;
+export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, }: ComboboxContentProps): React.JSX.Element;

package/combobox/combobox.component.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "open", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId"];
@@ -86,10 +87,11 @@ export function ComboboxContent(_ref2) {
     multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
     className = _ref2.className,
     _ref2$showGroupSepara = _ref2.showGroupSeparator,
-    showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara;
-  return /*#__PURE__*/React.createElement(PopoverContent, {
+    showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara,
+    popoverContentProps = _ref2.popoverContentProps;
+  return /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: cn('p-0', className)
-  }, /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
     size: size,
     placeholder: "Search..."
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, {

package/combobox/combobox.types.d.ts

@@ -1,3 +1,4 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { Command as CommandPrimitive } from 'cmdk';
@@ -26,6 +27,7 @@ export type ComboboxContentProps = {
     multiple?: boolean;
     className?: string;
     showGroupSeparator?: boolean;
+    popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
 };
 export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
     size?: FormSizeType;
@@ -48,11 +50,13 @@ interface ComboboxCommonProps {
     className?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    defaultOpen?: boolean;
     size?: FormSizeType;
     popoverClassName?: string;
     'aria-invalid'?: boolean;
     formItemId?: string;
     showGroupSeparator?: boolean;
+    popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
 }
 export interface ComboboxSingleProps extends ComboboxCommonProps {
     value: string;

package/date-picker/date-picker.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './date-picker.types';
-declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, ...rest }: DatePickerProps): React.JSX.Element;
 export { DatePicker };

package/date-picker/date-picker.component.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange"];
+var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -27,8 +27,12 @@ function DatePicker(_ref) {
     invalidDateText = _ref.invalidDateText,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
+    popoverClassName = _ref.popoverClassName,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    popoverContentProps = _ref.popoverContentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
+  var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -89,6 +93,7 @@ function DatePicker(_ref) {
     }
   }, rest)), /*#__PURE__*/React.createElement(Popover, {
     open: open,
+    defaultOpen: defaultOpen,
     onOpenChange: setOpen
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
     asChild: true
@@ -107,12 +112,12 @@ function DatePicker(_ref) {
     className: iconSizeInTriggerOptions[size]
   }), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Select date"))), /*#__PURE__*/React.createElement(PopoverContent, {
-    className: "w-auto overflow-hidden p-0",
+  }, "Select date"))), /*#__PURE__*/React.createElement(PopoverContent, _extends({
+    className: cn('w-auto overflow-hidden p-0', popoverClassName),
     align: "end",
     alignOffset: -8,
     sideOffset: 10
-  }, /*#__PURE__*/React.createElement(Calendar, {
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Calendar, {
     mode: "single",
     selected: selectedDate,
     captionLayout: "dropdown",

package/date-picker/date-picker.types.d.ts

@@ -1,4 +1,6 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { ComponentProps } from 'react';
 export type DatePickerProps = {
     minDate?: Date;
     maxDate?: Date;
@@ -6,6 +8,9 @@ export type DatePickerProps = {
     readOnly?: boolean;
     size?: FormSizeType;
     invalidDateText?: string;
+    popoverClassName?: string;
     disabled?: boolean;
+    defaultOpen?: boolean;
     onChange?: (date: Date) => void;
+    popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
 };

package/form/components/form-password-field.component.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["inputProps"];
-import { PasswordInput } from '@scaleflex/ui-tw/input';
+import { Password } from '@scaleflex/ui-tw/password';
 import React from 'react';
 import { FormFieldGroup } from './form-field-group.component';
 function FormPasswordField(_ref) {
   var inputProps = _ref.inputProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
-    return /*#__PURE__*/React.createElement(PasswordInput, _extends({
+    return /*#__PURE__*/React.createElement(Password, _extends({
       placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder
     }, args, inputProps, field));
   });

package/input/index.d.ts

@@ -1,4 +1,3 @@
 export { Input, inputVariants } from './input.component';
 export type { InputProps } from './input.types';
 export { InputType } from './input.constants';
-export { PasswordInput } from './components/password-input.component';

package/input/index.js

@@ -1,3 +1,2 @@
 export { Input, inputVariants } from './input.component';
-export { InputType } from './input.constants';
-export { PasswordInput } from './components/password-input.component';
+export { InputType } from './input.constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -22,7 +22,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.38",
+    "@scaleflex/icons-tw": "^0.0.40",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",

package/password/index.d.ts

@@ -0,0 +1 @@
+export { Password } from './password.component';

package/password/index.js

@@ -0,0 +1 @@
+export { Password } from './password.component';

package/password/password.component.d.ts

@@ -0,0 +1,3 @@
+import type { InputProps } from '@scaleflex/ui-tw/input';
+import React from 'react';
+export declare function Password({ className, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;

package/{input/components/password-input.component.js → password/password.component.js}

@@ -4,10 +4,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "size", "disabled", "readOnly"];
 import EyeClosed from '@scaleflex/icons-tw/eye-closed';
 import EyeOpen from '@scaleflex/icons-tw/eye-open';
+import { Input } from '@scaleflex/ui-tw/input';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import React, { useState } from 'react';
-import { Input } from '../input.component';
-export function PasswordInput(_ref) {
+export function Password(_ref) {
   var className = _ref.className,
     size = _ref.size,
     disabled = _ref.disabled,

package/search/index.d.ts

@@ -0,0 +1 @@
+export { Search } from './search.component';

package/search/index.js

@@ -0,0 +1 @@
+export { Search } from './search.component';

package/search/search.component.d.ts

@@ -0,0 +1,3 @@
+import type { InputProps } from '@scaleflex/ui-tw/input';
+import React from 'react';
+export declare function Search({ className, size, disabled, readOnly, ...rest }: InputProps): React.JSX.Element;

package/search/search.component.js

@@ -0,0 +1,70 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size", "disabled", "readOnly"];
+import { buttonVariants } from '@scaleflex/ui-tw/button';
+import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { Input } from '@scaleflex/ui-tw/input';
+import { crossSizeOptions, iconSizeOptions, searchPaddingMap } from '@scaleflex/ui-tw/search/search.constants';
+import { focusRingClassNames } 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 { Search as SearchIcon, XIcon } from 'lucide-react';
+import React, { useState } from 'react';
+export function Search(_ref) {
+  var _rest$value$toString, _rest$value;
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  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 : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleClear = function handleClear() {
+    var _rest$onChange;
+    var syntheticEvent = {
+      target: {
+        value: ''
+      }
+    };
+    setValue('');
+    (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 || _rest$onChange.call(rest, syntheticEvent);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative w-full"
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    className: cn('text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2', iconSize, padding.icon)
+  }), /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    onChange: function onChange(e) {
+      var _rest$onChange2;
+      setValue(e.target.value);
+      (_rest$onChange2 = rest.onChange) === null || _rest$onChange2 === void 0 || _rest$onChange2.call(rest, e);
+    },
+    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",
+    tabIndex: 0,
+    onClick: handleClear,
+    "data-clear-icon": "true",
+    "aria-label": "Clear",
+    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+      size: crossSize,
+      variant: ButtonVariant.GhostSecondary
+    }), 'absolute top-1/2 right-2 -translate-y-1/2']))
+  }, /*#__PURE__*/React.createElement(XIcon, {
+    "data-clear-icon": true,
+    className: cn('shrink-0 hover:opacity-80')
+  })));
+}

package/search/search.constants.d.ts

@@ -0,0 +1,24 @@
+export declare const searchPaddingMap: {
+    readonly sm: {
+        readonly icon: "left-2.5";
+        readonly input: "pl-7 pr-9";
+    };
+    readonly md: {
+        readonly icon: "left-3.5";
+        readonly input: "pl-9 pr-11";
+    };
+    readonly lg: {
+        readonly icon: "left-3.5";
+        readonly input: "pl-10 pr-12";
+    };
+};
+export declare const iconSizeOptions: {
+    readonly sm: "size-3";
+    readonly md: "size-4";
+    readonly lg: "size-4.5";
+};
+export declare const crossSizeOptions: {
+    readonly sm: "icon-xs";
+    readonly md: "icon-sm";
+    readonly lg: "icon-md";
+};

package/search/search.constants.js

@@ -0,0 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ButtonSize } from '@scaleflex/ui-tw/button';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var searchPaddingMap = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, {
+  icon: 'left-2.5',
+  input: 'pl-7 pr-9'
+}), FormSize.Md, {
+  icon: 'left-3.5',
+  input: 'pl-9 pr-11'
+}), FormSize.Lg, {
+  icon: 'left-3.5',
+  input: 'pl-10 pr-12'
+});
+export var iconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-4.5');
+export var crossSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, ButtonSize.IconXs), FormSize.Md, ButtonSize.IconSm), FormSize.Lg, ButtonSize.IconMd);

package/select/components/selector.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { SelectorProps } from '../select.types';
-export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, popoverClassName, ...rest }: SelectorProps): React.JSX.Element;
+export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, popoverClassName, selectorContentProps, defaultOpen, triggerProps, ...rest }: SelectorProps): React.JSX.Element;

package/select/components/selector.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName"];
+var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName", "selectorContentProps", "defaultOpen", "triggerProps"];
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import React from 'react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
@@ -17,23 +18,27 @@ export function Selector(_ref) {
     showGroupSeparator = _ref.showGroupSeparator,
     formItemId = _ref.formItemId,
     popoverClassName = _ref.popoverClassName,
+    selectorContentProps = _ref.selectorContentProps,
+    defaultOpen = _ref.defaultOpen,
+    triggerProps = _ref.triggerProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/React.createElement(Select, _extends({
     value: value,
     onValueChange: readOnly ? undefined : onChange,
-    disabled: disabled || readOnly
-  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    disabled: disabled || readOnly,
+    defaultOpen: defaultOpen
+  }, rest), /*#__PURE__*/React.createElement(SelectTrigger, _extends({
     id: formItemId,
     "aria-invalid": rest['aria-invalid'],
     size: size,
     readOnly: readOnly,
     className: className,
     icon: icon
-  }, /*#__PURE__*/React.createElement(SelectValue, {
+  }, triggerProps), /*#__PURE__*/React.createElement(SelectValue, {
     placeholder: placeholder
-  })), /*#__PURE__*/React.createElement(SelectContent, {
+  })), /*#__PURE__*/React.createElement(SelectContent, _extends({
     className: popoverClassName
-  }, options.map(function (option, groupIndex) {
+  }, selectorContentProps), options.map(function (option, groupIndex) {
     if (isOptionGroup(option)) {
       return /*#__PURE__*/React.createElement(SelectGroup, {
         key: groupIndex

package/select/select.types.d.ts

@@ -21,7 +21,8 @@ export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.
 }
 export interface SelectIconProps extends ComponentProps<'span'>, Pick<SelectTriggerProps, 'size' | 'icon'> {
 }
-export interface SelectorProps {
+export interface SelectorProps extends SelectProps {
+    options: SelectOption[];
     value?: string;
     onChange?: (value: string) => void;
     placeholder?: string;
@@ -30,9 +31,11 @@ export interface SelectorProps {
     size?: FormSizeType;
     className?: string;
     icon?: ReactElement;
-    options: SelectOption[];
+    defaultOpen?: boolean;
     showGroupSeparator?: boolean;
     formItemId?: string;
     popoverClassName?: string;
+    selectorContentProps?: ComponentProps<typeof SelectPrimitive.Content>;
     'aria-invalid'?: boolean;
+    triggerProps?: Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'aria-invalid'>;
 }

package/input/components/password-input.component.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { InputProps } from '../input.types';
-export declare function PasswordInput({ className, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;