@scaleflex/ui-tw 0.0.37 → 0.0.39

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, defaultDate, readOnly, size, invalidDateText, disabled, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, ...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", "defaultDate", "readOnly", "size", "invalidDateText", "disabled"];
+var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -19,13 +19,15 @@ import { parseDateString, toHtmlDateString } from './date-picker.utils';
 function DatePicker(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    _ref$defaultDate = _ref.defaultDate,
-    defaultDate = _ref$defaultDate === void 0 ? new Date() : _ref$defaultDate,
     readOnly = _ref.readOnly,
+    _ref$defaultDate = _ref.defaultDate,
+    defaultDate = _ref$defaultDate === void 0 ? undefined : _ref$defaultDate,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     invalidDateText = _ref.invalidDateText,
     disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    popoverClassName = _ref.popoverClassName,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43,7 +45,7 @@ function DatePicker(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     calendarMonth = _useState8[0],
     setCalendarMonth = _useState8[1];
-  var parsedDate = parseDateString(inputValue);
+  var parsedDate = inputValue && parseDateString(inputValue);
   var isInputValid = !inputValue || !!parsedDate;
   var handleInputChange = function handleInputChange(e) {
     var value = e.target.value;
@@ -60,6 +62,7 @@ function DatePicker(_ref) {
       setInputValue(toHtmlDateString(date));
       setCalendarMonth(date);
       setOpen(false);
+      onChange === null || onChange === void 0 || onChange(date);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -106,7 +109,7 @@ function DatePicker(_ref) {
   }), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
   }, "Select date"))), /*#__PURE__*/React.createElement(PopoverContent, {
-    className: "w-auto overflow-hidden p-0",
+    className: cn('w-auto overflow-hidden p-0', popoverClassName),
     align: "end",
     alignOffset: -8,
     sideOffset: 10

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

@@ -6,5 +6,7 @@ export type DatePickerProps = {
     readOnly?: boolean;
     size?: FormSizeType;
     invalidDateText?: string;
+    popoverClassName?: string;
     disabled?: boolean;
+    onChange?: (date: Date) => void;
 };

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

@@ -1,2 +1,2 @@
-export declare function toHtmlDateString(date: Date): string;
+export declare function toHtmlDateString(date: Date | undefined): string | undefined;
 export declare function parseDateString(value: string): Date | undefined;

package/date-picker/date-picker.utils.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 export function toHtmlDateString(date) {
+  if (!date) return undefined;
   var day = String(date.getDate()).padStart(2, '0');
   var month = String(date.getMonth() + 1).padStart(2, '0');
   var year = date.getFullYear();

package/form/components/form-date-picker-field.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import type { FormDatePickerFieldProps } from '../form.types';
+declare function FormDatePickerField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ datePickerProps, ...rest }: FormDatePickerFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormDatePickerField };

package/form/components/form-date-picker-field.component.js

@@ -0,0 +1,43 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["datePickerProps"];
+import { DatePicker } from '@scaleflex/ui-tw/date-picker';
+import { useFormField } from '@scaleflex/ui-tw/form';
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import React from 'react';
+function FormDatePickerInner(_ref) {
+  var field = _ref.field,
+    args = _ref.args,
+    datePickerProps = _ref.datePickerProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled;
+  var _useFormField = useFormField(),
+    error = _useFormField.error;
+  return /*#__PURE__*/React.createElement(DatePicker, _extends({
+    defaultDate: field.value,
+    readOnly: readOnly,
+    disabled: disabled,
+    size: args === null || args === void 0 ? void 0 : args.size,
+    onChange: function onChange(date) {
+      return field.onChange(date);
+    },
+    invalidDateText: error === null || error === void 0 ? void 0 : error.message,
+    "aria-invalid": !!error
+  }, datePickerProps));
+}
+function FormDatePickerField(_ref2) {
+  var datePickerProps = _ref2.datePickerProps,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var readOnly = rest.readOnly,
+    disabled = rest.disabled;
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(FormDatePickerInner, {
+      field: field,
+      args: args,
+      datePickerProps: datePickerProps,
+      readOnly: readOnly,
+      disabled: disabled
+    });
+  });
+}
+export { FormDatePickerField };

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/form/form.types.d.ts

@@ -1,5 +1,6 @@
 import { CheckboxProps } from '@scaleflex/ui-tw/checkbox/checkbox.types';
 import type { ComboboxMultiInlineProps, ComboboxMultiTagProps, ComboboxSingleProps } from '@scaleflex/ui-tw/combobox/combobox.types';
+import type { DatePickerProps } from '@scaleflex/ui-tw/date-picker/date-picker.types';
 import type { InputProps } from '@scaleflex/ui-tw/input';
 import type { RadioGroupItemProps } from '@scaleflex/ui-tw/radio-group/radio-group.types';
 import type { SelectProps } from '@scaleflex/ui-tw/select/select.types';
@@ -116,4 +117,14 @@ export interface FormCheckboxGroupFieldProps<TFieldValues extends FieldValues> e
 export interface FormRadioGroupFieldProps<TFieldValues extends FieldValues> extends BaseFormGroupFieldProps<TFieldValues> {
     options: RadioOption[];
 }
+export type FormDatePickerFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    datePickerProps?: Partial<DatePickerProps>;
+};
+export interface FormDatePickerInnerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    args: FormFieldArgs | undefined;
+    datePickerProps?: Partial<DatePickerProps>;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
 export {};

package/form/index.d.ts

@@ -11,3 +11,4 @@ export { FormComboboxField } from './components/form-combobox-field.component';
 export { FormCheckboxField } from './components/form-checkbox-field.component';
 export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
 export { FormRadioGroupField } from './components/form-radio-group-field.component';
+export { FormDatePickerField } from './components/form-date-picker-field.component';

package/form/index.js

@@ -9,4 +9,5 @@ export { FormSelectField } from './components/form-select-field.component';
 export { FormComboboxField } from './components/form-combobox-field.component';
 export { FormCheckboxField } from './components/form-checkbox-field.component';
 export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
-export { FormRadioGroupField } from './components/form-radio-group-field.component';
+export { FormRadioGroupField } from './components/form-radio-group-field.component';
+export { FormDatePickerField } from './components/form-date-picker-field.component';

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.37",
+  "version": "0.0.39",
   "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.37",
+    "@scaleflex/icons-tw": "^0.0.39",
     "@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, 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", "defaultOpen", "triggerProps"];
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import React from 'react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
@@ -17,19 +18,22 @@ export function Selector(_ref) {
     showGroupSeparator = _ref.showGroupSeparator,
     formItemId = _ref.formItemId,
     popoverClassName = _ref.popoverClassName,
+    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, {
     className: popoverClassName

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,10 @@ export interface SelectorProps {
     size?: FormSizeType;
     className?: string;
     icon?: ReactElement;
-    options: SelectOption[];
+    defaultOpen?: boolean;
     showGroupSeparator?: boolean;
     formItemId?: string;
     popoverClassName?: string;
     '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;