@apexcura/ui-components 0.0.4 → 0.0.6

package/dist/index.d.mts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string;
+    value?: string | number | boolean | undefined;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -19,7 +19,10 @@ type ElementType = {
     onChange?: (value: string | number | boolean) => void;
 };
 
-declare const TextElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps$2 extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -33,10 +36,18 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
-declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps$1 extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
-declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
 
-export { NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
+declare const ButtonElement: () => React$1.JSX.Element;
+
+export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string;
+    value?: string | number | boolean | undefined;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -19,7 +19,10 @@ type ElementType = {
     onChange?: (value: string | number | boolean) => void;
 };
 
-declare const TextElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps$2 extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -33,10 +36,18 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
-declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps$1 extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
-declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
+interface ElementExecuterProps extends ElementType {
+    onChange: (value: string | number | boolean) => void;
+}
+declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
 
-export { NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
+declare const ButtonElement: () => React$1.JSX.Element;
+
+export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ButtonElement: () => ButtonElement,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
   SelectElement: () => SelectElement,
@@ -42,13 +43,6 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  const [text, setText] = (0, import_react.useState)(props.value || "");
-  const onHandleChange = (e) => {
-    setText(e.target.value);
-    if (props.onChange) {
-      props.onChange(text);
-    }
-  };
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
@@ -60,13 +54,12 @@ var TextElement = (props) => {
       id: props.name,
       prefix: props.prefix,
       type: props.type,
-      value: props.value,
       status: props.status,
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: onHandleChange,
-      name: props.name
+      name: props.name,
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
@@ -100,7 +93,7 @@ var PasswordElement = ({ inputData }) => {
 var import_react3 = __toESM(require("react"));
 var import_antd3 = require("antd");
 var formatNumber = (value) => new Intl.NumberFormat().format(value);
-var NumericInput = (props) => {
+var NumberElement = (props) => {
   const { value, onChange } = props;
   const handleChange = (e) => {
     const { value: inputValue } = e.target;
@@ -110,49 +103,29 @@ var NumericInput = (props) => {
     }
   };
   const handleBlur = () => {
-    let valueTemp = value;
-    if (value.charAt(value.length - 1) === "." || value === "-") {
-      valueTemp = value.slice(0, -1);
+    let val = String({ value });
+    let valueTemp = val;
+    if (val.charAt(val.length - 1) === "." || value === "-") {
+      valueTemp = val.slice(0, -1);
     }
     onChange(valueTemp.replace(/0*(\d+)/, "$1"));
   };
   const title = value ? /* @__PURE__ */ import_react3.default.createElement("span", { className: "numeric-input-title" }, value !== "-" ? formatNumber(Number(value)) : "-") : "Input a number";
-  return /* @__PURE__ */ import_react3.default.createElement(import_antd3.Tooltip, { trigger: ["focus"], title, placement: "topLeft", overlayClassName: "numeric-input" }, /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(import_antd3.Tooltip, { title }, /* @__PURE__ */ import_react3.default.createElement(
     import_antd3.Input,
     {
-      ...props,
       onChange: handleChange,
       onBlur: handleBlur,
-      placeholder: "Input a number",
       maxLength: 16
     }
   ));
 };
-var NumberElement = (props) => {
-  const [value, setValue] = (0, import_react3.useState)("");
-  return /* @__PURE__ */ import_react3.default.createElement(
-    NumericInput,
-    {
-      ...props,
-      style: { width: 120 },
-      value,
-      onChange: setValue
-    }
-  );
-};
 
 // src/Components/TextareaElement.tsx
 var import_react4 = __toESM(require("react"));
 var import_antd4 = require("antd");
 var { TextArea } = import_antd4.Input;
 var TextareaElement = (props) => {
-  const [textarea, setTextarea] = (0, import_react4.useState)(props.value || "");
-  const onHandleChange = (e) => {
-    setTextarea(e.target.value);
-    if (props.onChange) {
-      props.onChange(textarea);
-    }
-  };
   return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ import_react4.default.createElement(
     TextArea,
     {
@@ -161,7 +134,6 @@ var TextareaElement = (props) => {
       defaultValue: props.defaultValue,
       disabled: props.disabled,
       id: props.name,
-      value: props.value,
       status: props.status,
       style: props.styles,
       className: props.classNames,
@@ -169,7 +141,7 @@ var TextareaElement = (props) => {
       name: props.name,
       showCount: true,
       maxLength: props.maxLength,
-      onChange: onHandleChange
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
@@ -178,41 +150,41 @@ var TextareaElement = (props) => {
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
 var options = [
-  {
-    value: "male",
-    label: "male"
-  },
-  {
-    value: "female",
-    label: "female"
-  },
-  {
-    value: "other",
-    label: "other"
-  }
+  { label: "female", value: "female" },
+  { label: "male", value: "male" },
+  { label: "other", value: "other" }
 ];
+var labelRender = (props) => {
+  const { label, value } = props;
+  if (label) {
+    return value;
+  }
+  return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
+};
 var SelectElement = (props) => /* @__PURE__ */ import_react5.default.createElement(
   import_antd5.Select,
   {
+    labelRender,
+    options,
     placeholder: props.placeholder,
     allowClear: true,
     defaultValue: props.defaultValue,
     disabled: props.disabled,
     id: props.name,
-    value: props.value,
     status: props.status,
     style: props.styles,
     className: props.classNames,
-    variant: props.variant,
-    options
+    variant: props.variant
   }
 );
 
 // src/Components/Button.tsx
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
+var ButtonElement = () => /* @__PURE__ */ import_react6.default.createElement(import_antd6.Flex, { gap: "small" }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Button, { type: "primary" }, "Primary Button"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ButtonElement,
   NumberElement,
   PasswordElement,
   SelectElement,

package/dist/index.mjs

@@ -1,14 +1,7 @@
 // src/Components/TextElement.tsx
-import React, { useState } from "react";
+import React from "react";
 import { Input as AntInput } from "antd";
 var TextElement = (props) => {
-  const [text, setText] = useState(props.value || "");
-  const onHandleChange = (e) => {
-    setText(e.target.value);
-    if (props.onChange) {
-      props.onChange(text);
-    }
-  };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
     AntInput,
     {
@@ -20,23 +13,22 @@ var TextElement = (props) => {
       id: props.name,
       prefix: props.prefix,
       type: props.type,
-      value: props.value,
       status: props.status,
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: onHandleChange,
-      name: props.name
+      name: props.name,
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
 
 // src/Components/PasswordElement.tsx
-import React2, { useState as useState2 } from "react";
+import React2, { useState } from "react";
 import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
 import { Button, Input, Space } from "antd";
 var PasswordElement = ({ inputData }) => {
-  const [passwordVisible, setPasswordVisible] = useState2(false);
+  const [passwordVisible, setPasswordVisible] = useState(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
   };
@@ -57,10 +49,10 @@ var PasswordElement = ({ inputData }) => {
 };
 
 // src/Components/NumberElement.tsx
-import React3, { useState as useState3 } from "react";
+import React3 from "react";
 import { Input as Input2, Tooltip } from "antd";
 var formatNumber = (value) => new Intl.NumberFormat().format(value);
-var NumericInput = (props) => {
+var NumberElement = (props) => {
   const { value, onChange } = props;
   const handleChange = (e) => {
     const { value: inputValue } = e.target;
@@ -70,49 +62,29 @@ var NumericInput = (props) => {
     }
   };
   const handleBlur = () => {
-    let valueTemp = value;
-    if (value.charAt(value.length - 1) === "." || value === "-") {
-      valueTemp = value.slice(0, -1);
+    let val = String({ value });
+    let valueTemp = val;
+    if (val.charAt(val.length - 1) === "." || value === "-") {
+      valueTemp = val.slice(0, -1);
     }
     onChange(valueTemp.replace(/0*(\d+)/, "$1"));
   };
   const title = value ? /* @__PURE__ */ React3.createElement("span", { className: "numeric-input-title" }, value !== "-" ? formatNumber(Number(value)) : "-") : "Input a number";
-  return /* @__PURE__ */ React3.createElement(Tooltip, { trigger: ["focus"], title, placement: "topLeft", overlayClassName: "numeric-input" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(Tooltip, { title }, /* @__PURE__ */ React3.createElement(
     Input2,
     {
-      ...props,
       onChange: handleChange,
       onBlur: handleBlur,
-      placeholder: "Input a number",
       maxLength: 16
     }
   ));
 };
-var NumberElement = (props) => {
-  const [value, setValue] = useState3("");
-  return /* @__PURE__ */ React3.createElement(
-    NumericInput,
-    {
-      ...props,
-      style: { width: 120 },
-      value,
-      onChange: setValue
-    }
-  );
-};
 
 // src/Components/TextareaElement.tsx
-import React4, { useState as useState4 } from "react";
+import React4 from "react";
 import { Flex, Input as Input3 } from "antd";
 var { TextArea } = Input3;
 var TextareaElement = (props) => {
-  const [textarea, setTextarea] = useState4(props.value || "");
-  const onHandleChange = (e) => {
-    setTextarea(e.target.value);
-    if (props.onChange) {
-      props.onChange(textarea);
-    }
-  };
   return /* @__PURE__ */ React4.createElement(Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ React4.createElement(
     TextArea,
     {
@@ -121,7 +93,6 @@ var TextareaElement = (props) => {
       defaultValue: props.defaultValue,
       disabled: props.disabled,
       id: props.name,
-      value: props.value,
       status: props.status,
       style: props.styles,
       className: props.classNames,
@@ -129,49 +100,49 @@ var TextareaElement = (props) => {
       name: props.name,
       showCount: true,
       maxLength: props.maxLength,
-      onChange: onHandleChange
+      onChange: (e) => props.onChange(e.target.value)
     }
   ));
 };
 
 // src/Components/SelectElement.tsx
 import React5 from "react";
-import { Select as AntSelect } from "antd";
+import { Select } from "antd";
 var options = [
-  {
-    value: "male",
-    label: "male"
-  },
-  {
-    value: "female",
-    label: "female"
-  },
-  {
-    value: "other",
-    label: "other"
-  }
+  { label: "female", value: "female" },
+  { label: "male", value: "male" },
+  { label: "other", value: "other" }
 ];
+var labelRender = (props) => {
+  const { label, value } = props;
+  if (label) {
+    return value;
+  }
+  return /* @__PURE__ */ React5.createElement("span", null, "select gender");
+};
 var SelectElement = (props) => /* @__PURE__ */ React5.createElement(
-  AntSelect,
+  Select,
   {
+    labelRender,
+    options,
     placeholder: props.placeholder,
     allowClear: true,
     defaultValue: props.defaultValue,
     disabled: props.disabled,
     id: props.name,
-    value: props.value,
     status: props.status,
     style: props.styles,
     className: props.classNames,
-    variant: props.variant,
-    options
+    variant: props.variant
   }
 );
 
 // src/Components/Button.tsx
 import React6 from "react";
 import { Button as Button2, Flex as Flex2 } from "antd";
+var ButtonElement = () => /* @__PURE__ */ React6.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React6.createElement(Button2, { type: "primary" }, "Primary Button"));
 export {
+  ButtonElement,
   NumberElement,
   PasswordElement,
   SelectElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Apex cura React components library",
   "keywords" : ["apex cura", "input", "ui", "react", "react-component"],
   "homepage": "https://www.apexcura.com/",