@apexcura/ui-components 0.0.11-Beta242 → 0.0.11-Beta244

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
+  DateRangePickerElement: () => DateRangePickerElement,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -654,7 +655,7 @@ var ModelElement = (props) => {
         },
         Object.entries(selectedRecord).map(([key, value]) => {
           const record = columns.filter((eachColumn) => eachColumn.key === key);
-          return /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "200", padding: "10px" }, key }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { color: "gray", paddingRight: "10px" } }, record[0].title), String(value));
+          return /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value));
         })
       )
     },
@@ -765,6 +766,27 @@ var DatePickerElement = (props) => {
     }
   ), /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.RightOutlined, null)));
 };
+
+// src/Components/DateRangePickerElement.tsx
+var import_react23 = __toESM(require("react"));
+var import_antd16 = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var { RangePicker } = import_antd16.DatePicker;
+var onRangeChange = (dates, dateStrings) => {
+  if (dates) {
+    console.log("From: ", dates[0], ", to: ", dates[1]);
+    console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
+  } else {
+    console.log("Clear");
+  }
+};
+var rangePresets = [
+  { label: "Last 7 Days", value: [(0, import_dayjs.default)().add(-7, "d"), (0, import_dayjs.default)()] },
+  { label: "Last 14 Days", value: [(0, import_dayjs.default)().add(-14, "d"), (0, import_dayjs.default)()] },
+  { label: "Last 30 Days", value: [(0, import_dayjs.default)().add(-30, "d"), (0, import_dayjs.default)()] },
+  { label: "Last 90 Days", value: [(0, import_dayjs.default)().add(-90, "d"), (0, import_dayjs.default)()] }
+];
+var DateRangePickerElement = (props) => /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: onRangeChange }));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -772,6 +794,7 @@ var DatePickerElement = (props) => {
   CheckboxElement,
   CkEditor,
   DatePickerElement,
+  DateRangePickerElement,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/dist/index.mjs

@@ -603,7 +603,7 @@ var ModelElement = (props) => {
         },
         Object.entries(selectedRecord).map(([key, value]) => {
           const record = columns.filter((eachColumn) => eachColumn.key === key);
-          return /* @__PURE__ */ React19.createElement("p", { style: { fontWeight: "200", padding: "10px" }, key }, /* @__PURE__ */ React19.createElement("span", { style: { color: "gray", paddingRight: "10px" } }, record[0].title), String(value));
+          return /* @__PURE__ */ React19.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ React19.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value));
         })
       )
     },
@@ -714,12 +714,34 @@ var DatePickerElement = (props) => {
     }
   ), /* @__PURE__ */ React21.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ React21.createElement(RightOutlined, null)));
 };
+
+// src/Components/DateRangePickerElement.tsx
+import React22 from "react";
+import { DatePicker as DatePicker2, Space as Space2 } from "antd";
+import dayjs from "dayjs";
+var { RangePicker } = DatePicker2;
+var onRangeChange = (dates, dateStrings) => {
+  if (dates) {
+    console.log("From: ", dates[0], ", to: ", dates[1]);
+    console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
+  } else {
+    console.log("Clear");
+  }
+};
+var rangePresets = [
+  { label: "Last 7 Days", value: [dayjs().add(-7, "d"), dayjs()] },
+  { label: "Last 14 Days", value: [dayjs().add(-14, "d"), dayjs()] },
+  { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
+  { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
+];
+var DateRangePickerElement = (props) => /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: onRangeChange }));
 export {
   AddMoreTable,
   ButtonElement,
   CheckboxElement,
   CkEditor,
   DatePickerElement,
+  DateRangePickerElement,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.11-Beta242",
+  "version": "0.0.11-Beta244",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",

package/dist/index.d.mts

@@ -1,112 +0,0 @@
-import React$1 from 'react';
-import { SizeType } from 'antd/es/config-provider/SizeContext';
-
-type ElementType = {
-    [x: string]: any;
-    selectedStyle: boolean;
-    style: boolean;
-    className: string | undefined;
-    placeholder?: string;
-    addonBefore?: React.ReactNode;
-    defaultValue?: string;
-    disabled?: boolean;
-    prefix?: React.ReactNode;
-    type?: string;
-    size?: SizeType;
-    value?: string | number | boolean | any[] | null | undefined;
-    status?: "error" | "warning";
-    styles?: React.CSSProperties;
-    variant?: "outlined" | "borderless" | "filled";
-    label?: string;
-    name?: string;
-    suffix?: React.ReactNode;
-    maxLength?: number;
-    fieldNames?: any[];
-    fields?: any[];
-    schema?: any[];
-    options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
-    dropDownOptions?: any[];
-    id?: number;
-    thead?: any[];
-    tbody?: any[];
-    variable_data?: any[];
-    optionType?: string;
-    selectedClassName?: string;
-    action?: React.MouseEventHandler<HTMLElement> | string;
-    listClassName?: string;
-    listItemClassName?: string;
-    img?: string;
-    items?: any[];
-    primaryText?: string;
-    secondaryText?: string;
-    count?: number;
-    icon?: string;
-    placement?: string;
-    profileImage?: string;
-    buttonClassName?: string;
-    profileImageClassName?: string;
-    profileSubClassName?: string;
-    subContainerClassName?: string;
-    element?: string;
-    secondTextClassName?: string;
-    iconsClassName?: string;
-    labelClassName?: string;
-    containerClassName?: string;
-};
-
-interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
-}
-declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
-
-interface InputData {
-    placeholder?: string;
-    id?: string;
-    prefix?: React$1.ReactNode;
-    addonBefore?: React$1.ReactNode;
-    type?: string;
-}
-interface PasswordProps {
-    inputData: InputData;
-}
-declare const PasswordElement: React$1.FC<PasswordProps>;
-
-interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
-}
-declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
-
-interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
-}
-declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
-
-declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
-
-interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
-}
-declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
-
-declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const ButtonElement: React$1.FC<ElementType>;
-
-declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
-
-declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
-
-declare const Navbar: (props: ElementType) => React$1.JSX.Element;
-
-declare const TableElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
-
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -1,112 +0,0 @@
-import React$1 from 'react';
-import { SizeType } from 'antd/es/config-provider/SizeContext';
-
-type ElementType = {
-    [x: string]: any;
-    selectedStyle: boolean;
-    style: boolean;
-    className: string | undefined;
-    placeholder?: string;
-    addonBefore?: React.ReactNode;
-    defaultValue?: string;
-    disabled?: boolean;
-    prefix?: React.ReactNode;
-    type?: string;
-    size?: SizeType;
-    value?: string | number | boolean | any[] | null | undefined;
-    status?: "error" | "warning";
-    styles?: React.CSSProperties;
-    variant?: "outlined" | "borderless" | "filled";
-    label?: string;
-    name?: string;
-    suffix?: React.ReactNode;
-    maxLength?: number;
-    fieldNames?: any[];
-    fields?: any[];
-    schema?: any[];
-    options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
-    dropDownOptions?: any[];
-    id?: number;
-    thead?: any[];
-    tbody?: any[];
-    variable_data?: any[];
-    optionType?: string;
-    selectedClassName?: string;
-    action?: React.MouseEventHandler<HTMLElement> | string;
-    listClassName?: string;
-    listItemClassName?: string;
-    img?: string;
-    items?: any[];
-    primaryText?: string;
-    secondaryText?: string;
-    count?: number;
-    icon?: string;
-    placement?: string;
-    profileImage?: string;
-    buttonClassName?: string;
-    profileImageClassName?: string;
-    profileSubClassName?: string;
-    subContainerClassName?: string;
-    element?: string;
-    secondTextClassName?: string;
-    iconsClassName?: string;
-    labelClassName?: string;
-    containerClassName?: string;
-};
-
-interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
-}
-declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
-
-interface InputData {
-    placeholder?: string;
-    id?: string;
-    prefix?: React$1.ReactNode;
-    addonBefore?: React$1.ReactNode;
-    type?: string;
-}
-interface PasswordProps {
-    inputData: InputData;
-}
-declare const PasswordElement: React$1.FC<PasswordProps>;
-
-interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
-}
-declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
-
-interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
-}
-declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
-
-declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
-
-interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
-}
-declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
-
-declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const ButtonElement: React$1.FC<ElementType>;
-
-declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
-
-declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
-
-declare const Navbar: (props: ElementType) => React$1.JSX.Element;
-
-declare const TableElement: (props: ElementType) => React$1.JSX.Element;
-
-declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
-
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };