nexaas-ui-components 1.0.11 → 1.0.12

package/dist/index.d.cts

@@ -283,6 +283,18 @@ type MaskedInputProps = {
 };
 declare const MaskedInput: ({ type, name, label, placeholder, error, mask, control, required, onKeyUp, maskChar, alwaysShowMask, defaultValue, disabled, }: MaskedInputProps) => react_jsx_runtime.JSX.Element;
 
+type InputTestProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    label?: string;
+    control: Control<any>;
+    name: string;
+    error?: FieldError;
+    required?: boolean;
+};
+declare function InputTest({ label, name, control, error, required, placeholder, disabled, defaultValue, }: InputTestProps): react_jsx_runtime.JSX.Element;
+declare namespace InputTest {
+    var displayName: string;
+}
+
 type ModalProps = {
     open?: boolean;
     onOpen?: () => void;
@@ -451,4 +463,4 @@ interface DataTablePaginationProps<TData> {
 }
 declare function DataTablePagination<TData>({ table, footer, totalData, selectAllOption, onSelectAll, rowsSelected, onRemoveAll, tableRef, paginationScroll, pageSizeOptions, }: DataTablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
 
-export { Badge, Button, Calendar, Checkbox, type CheckboxProps, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, type ModalProps, type OptionType, PaginationSelect, Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
+export { Badge, Button, Calendar, Checkbox, type CheckboxProps, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, InputTest, Logo, MaskedInput, ModalDialog, type ModalProps, type OptionType, PaginationSelect, Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };

package/dist/index.d.ts

@@ -283,6 +283,18 @@ type MaskedInputProps = {
 };
 declare const MaskedInput: ({ type, name, label, placeholder, error, mask, control, required, onKeyUp, maskChar, alwaysShowMask, defaultValue, disabled, }: MaskedInputProps) => react_jsx_runtime.JSX.Element;
 
+type InputTestProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    label?: string;
+    control: Control<any>;
+    name: string;
+    error?: FieldError;
+    required?: boolean;
+};
+declare function InputTest({ label, name, control, error, required, placeholder, disabled, defaultValue, }: InputTestProps): react_jsx_runtime.JSX.Element;
+declare namespace InputTest {
+    var displayName: string;
+}
+
 type ModalProps = {
     open?: boolean;
     onOpen?: () => void;
@@ -451,4 +463,4 @@ interface DataTablePaginationProps<TData> {
 }
 declare function DataTablePagination<TData>({ table, footer, totalData, selectAllOption, onSelectAll, rowsSelected, onRemoveAll, tableRef, paginationScroll, pageSizeOptions, }: DataTablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
 
-export { Badge, Button, Calendar, Checkbox, type CheckboxProps, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, type ModalProps, type OptionType, PaginationSelect, Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
+export { Badge, Button, Calendar, Checkbox, type CheckboxProps, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, InputTest, Logo, MaskedInput, ModalDialog, type ModalProps, type OptionType, PaginationSelect, Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };

package/dist/index.js

@@ -2251,6 +2251,61 @@ var MaskedInput = ({
     }
   );
 };
+function InputTest({
+  label,
+  name,
+  control,
+  error,
+  required,
+  placeholder,
+  disabled,
+  defaultValue
+}) {
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = fieldValidationMessages.some((item) => item !== void 0);
+  const styles = {
+    input: `text-p-md pl-2 peer shadow-input border rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 left-2.5 cursor-text"
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...field,
+              type: "text",
+              id: name,
+              className: clsx7(styles.input),
+              placeholder: !label && placeholder ? placeholder : " ",
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { className: clsx7(styles.label), children: [
+            label,
+            required && label && /* @__PURE__ */ jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+          ] }),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs mt-1 ml-[2px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+}
+InputTest.displayName = "InputTest";
 var Modal = ReactModalNamespace.default || ReactModalNamespace;
 var alertTypes = {
   success: "text-success-500",
@@ -3705,6 +3760,6 @@ function DataTable({
   ] });
 }
 
-export { Badge, Button, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
+export { Badge, Button, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, InputTest, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map