@scaleflex/ui-tw 0.0.36 → 0.0.38

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, ...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"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -19,13 +19,14 @@ 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,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -43,7 +44,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 +61,7 @@ function DatePicker(_ref) {
       setInputValue(toHtmlDateString(date));
       setCalendarMonth(date);
       setOpen(false);
+      onChange === null || onChange === void 0 || onChange(date);
     }
   };
   return /*#__PURE__*/React.createElement("div", {

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

@@ -7,4 +7,5 @@ export type DatePickerProps = {
     size?: FormSizeType;
     invalidDateText?: 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/dialog/dialog.component.js

@@ -62,7 +62,7 @@ function DialogWideContent(_ref6) {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', '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)
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', '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",
     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)
@@ -81,7 +81,7 @@ function DialogFormContent(_ref7) {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background 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)
+    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",
     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)
@@ -97,7 +97,7 @@ function DialogWideHeader(_ref8) {
     props = _objectWithoutProperties(_ref8, _excluded4);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-header",
-    className: cn('border-border flex h-16 items-center justify-center border-b', className)
+    className: cn('border-border text-foreground flex h-16 items-center justify-center border-b', className)
   }, props));
 }
 function DialogFormHeader(_ref9) {
@@ -105,7 +105,7 @@ function DialogFormHeader(_ref9) {
     props = _objectWithoutProperties(_ref9, _excluded5);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-header",
-    className: cn('flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+    className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
   }, props));
 }
 function DialogWideBody(_ref10) {
@@ -137,7 +137,7 @@ function DialogFormTitle(_ref13) {
     props = _objectWithoutProperties(_ref13, _excluded9);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
     "data-slot": "dialog-title",
-    className: cn('text-lg leading-7 font-medium', className)
+    className: cn('text-foreground text-lg leading-7 font-medium', className)
   }, props));
 }
 function DialogFormDescription(_ref14) {

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "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.36",
+    "@scaleflex/icons-tw": "^0.0.38",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",