@plutonhq/core-frontend 0.0.1

package/dist/components/common/form/MultiSelect/MultiSelect.js

@@ -0,0 +1,76 @@
+import { jsx as s, jsxs as t, Fragment as k } from "react/jsx-runtime";
+import { useState as f } from "react";
+import l from "./MultiSelect.module.scss.js";
+import a from "../../Icon/Icon.js";
+import z from "../FormField/FormField.js";
+const T = ({
+  label: S = "",
+  title: h = "",
+  options: n = [],
+  description: v,
+  customClasses: w = "",
+  fieldValue: c = [],
+  size: F = "medium",
+  full: $ = !1,
+  disabled: m = !1,
+  hint: N = "",
+  error: u = "",
+  search: y = !1,
+  onUpdate: C
+}) => {
+  const [o, b] = f(!1), [i, p] = f(""), g = n.filter((e) => c.includes(e.value)), x = (e) => {
+    let r;
+    c.includes(e) ? r = c.filter((D) => D !== e) : r = [...c, e], console.log("newValues :", r), C(r);
+  }, d = i ? n.filter((e) => e.label.toLowerCase().includes(i.toLowerCase())) : n;
+  return /* @__PURE__ */ s(
+    z,
+    {
+      type: "multiSelect",
+      label: S,
+      description: v,
+      hint: N,
+      error: u,
+      inline: !1,
+      classes: `${l.multiSelectField} ${w} ${F === "large" ? l.multiSelectFieldLarge : ""} ${o ? l.multiSelectFieldOpen : ""} ${u ? l.fieldHasError : ""} ${$ ? l.multiSelectFieldFull : ""} ${m ? l.multiSelectFieldDisabled : ""}`,
+      children: /* @__PURE__ */ t("div", { className: l.dropdown, children: [
+        /* @__PURE__ */ t("div", { className: l.selected, onClick: () => b(m ? !1 : !o), children: [
+          /* @__PURE__ */ s("span", { children: h ? /* @__PURE__ */ t(k, { children: [
+            h,
+            /* @__PURE__ */ t("i", { children: [
+              c.length,
+              "/",
+              n.length
+            ] })
+          ] }) : g.length > 0 ? `${g.length} items selected` : "Select items..." }),
+          /* @__PURE__ */ s("button", { className: l.dropBtn, children: /* @__PURE__ */ s(a, { type: o ? "caret-up" : "caret-down", size: 12 }) })
+        ] }),
+        o && /* @__PURE__ */ t("div", { children: [
+          y && /* @__PURE__ */ t("div", { className: l.search, children: [
+            /* @__PURE__ */ s(a, { type: "search", size: 15 }),
+            /* @__PURE__ */ s("input", { placeholder: "Search Providers...", value: i, onChange: (e) => p(e.target.value) }),
+            i && /* @__PURE__ */ s("button", { onClick: () => p(""), children: /* @__PURE__ */ s(a, { type: "close", size: 15 }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: `${l.lists} styled__scrollbar`, children: [
+            /* @__PURE__ */ s("ul", { children: d.length > 0 && d.map((e, r) => /* @__PURE__ */ t(
+              "li",
+              {
+                onClick: () => !e.pro && x(e.value),
+                className: `${c.includes(e.value) ? l.selectedItem : ""}`,
+                children: [
+                  /* @__PURE__ */ s(a, { type: "check-circle-filled", size: 13 }),
+                  e.label
+                ]
+              },
+              r
+            )) }),
+            i && !d.length && /* @__PURE__ */ s("div", { children: "No Providers Found" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  T as default
+};
+//# sourceMappingURL=MultiSelect.js.map

package/dist/components/common/form/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../../../src/components/common/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport classes from './MultiSelect.module.scss';\r\nimport Icon from '../../Icon/Icon';\r\nimport FormField from '../FormField/FormField';\r\n\r\ntype MultiMultiSelectOptionType = {\r\n   id?: string;\r\n   icon?: string;\r\n   pro?: boolean;\r\n   image?: JSX.Element;\r\n   label: string;\r\n   value: string;\r\n};\r\n\r\ntype MultiSelectProps = {\r\n   label?: string;\r\n   title?: string;\r\n   size?: 'large' | 'medium' | 'small';\r\n   full?: boolean;\r\n   description?: string;\r\n   customClasses?: string;\r\n   disabled?: boolean;\r\n   hint?: string;\r\n   error?: string;\r\n   search?: boolean;\r\n   fieldValue: string[];\r\n   options: MultiMultiSelectOptionType[];\r\n   onUpdate: (f: string[]) => void;\r\n};\r\n\r\nconst MultiSelect = ({\r\n   label = '',\r\n   title = '',\r\n   options = [],\r\n   description,\r\n   customClasses = '',\r\n   fieldValue = [],\r\n   size = 'medium',\r\n   full = false,\r\n   disabled = false,\r\n   hint = '',\r\n   error = '',\r\n   search = false,\r\n   onUpdate,\r\n}: MultiSelectProps) => {\r\n   const [showDropDown, setShowDropDown] = useState(false);\r\n   const [searchText, setSearchText] = useState('');\r\n\r\n   const selectedItems = options.filter((item) => fieldValue.includes(item.value));\r\n\r\n   const toggleOption = (val: string) => {\r\n      let newValues;\r\n      if (fieldValue.includes(val)) {\r\n         newValues = fieldValue.filter((v) => v !== val);\r\n      } else {\r\n         newValues = [...fieldValue, val];\r\n      }\r\n      console.log('newValues :', newValues);\r\n      onUpdate(newValues);\r\n   };\r\n\r\n   const optionsItems = searchText ? options.filter((s) => s.label.toLowerCase().includes(searchText.toLowerCase())) : options;\r\n\r\n   return (\r\n      <FormField\r\n         type=\"multiSelect\"\r\n         label={label}\r\n         description={description}\r\n         hint={hint}\r\n         error={error}\r\n         inline={false}\r\n         classes={`${classes.multiSelectField} ${customClasses} ${size === 'large' ? classes.multiSelectFieldLarge : ''} ${showDropDown ? classes.multiSelectFieldOpen : ''} ${error ? classes.fieldHasError : ''} ${full ? classes.multiSelectFieldFull : ''} ${disabled ? classes.multiSelectFieldDisabled : ''}`}\r\n      >\r\n         <div className={classes.dropdown}>\r\n            <div className={classes.selected} onClick={() => setShowDropDown(!disabled ? !showDropDown : false)}>\r\n               <span>\r\n                  {title ? (\r\n                     <>\r\n                        {title}\r\n                        <i>\r\n                           {fieldValue.length}/{options.length}\r\n                        </i>\r\n                     </>\r\n                  ) : selectedItems.length > 0 ? (\r\n                     `${selectedItems.length} items selected`\r\n                  ) : (\r\n                     'Select items...'\r\n                  )}\r\n               </span>\r\n               <button className={classes.dropBtn}>\r\n                  <Icon type={showDropDown ? 'caret-up' : 'caret-down'} size={12} />\r\n               </button>\r\n            </div>\r\n            {showDropDown && (\r\n               <div>\r\n                  {search && (\r\n                     <div className={classes.search}>\r\n                        <Icon type=\"search\" size={15} />\r\n                        <input placeholder=\"Search Providers...\" value={searchText} onChange={(e) => setSearchText(e.target.value)} />\r\n                        {searchText && (\r\n                           <button onClick={() => setSearchText('')}>\r\n                              <Icon type=\"close\" size={15} />\r\n                           </button>\r\n                        )}\r\n                     </div>\r\n                  )}\r\n                  <div className={`${classes.lists} styled__scrollbar`}>\r\n                     <ul>\r\n                        {optionsItems.length > 0 &&\r\n                           optionsItems.map((item, indx) => {\r\n                              return (\r\n                                 <li\r\n                                    key={indx}\r\n                                    onClick={() => !item.pro && toggleOption(item.value)}\r\n                                    className={`${fieldValue.includes(item.value) ? classes.selectedItem : ''}`}\r\n                                 >\r\n                                    <Icon type={'check-circle-filled'} size={13} />\r\n                                    {item.label}\r\n                                 </li>\r\n                              );\r\n                           })}\r\n                     </ul>\r\n                     {searchText && !optionsItems.length && <div>No Providers Found</div>}\r\n                  </div>\r\n               </div>\r\n            )}\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default MultiSelect;\r\n"],"names":["MultiSelect","label","title","options","description","customClasses","fieldValue","size","full","disabled","hint","error","search","onUpdate","showDropDown","setShowDropDown","useState","searchText","setSearchText","selectedItems","item","toggleOption","val","newValues","v","optionsItems","s","jsx","FormField","classes","jsxs","Fragment","Icon","indx"],"mappings":"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"}

package/dist/components/common/form/MultiSelect/MultiSelect.module.scss

@@ -0,0 +1,157 @@
+.multiSelectField {
+   .search {
+      border: 1px solid;
+      border-color: var(--field-line-color);
+      border-radius: 4px 4px 0 0;
+      border-bottom: 0;
+      position: relative;
+      top: -1px;
+      color: var(--icon-color);
+      span {
+         position: absolute;
+         margin: 5px;
+      }
+      button {
+         position: absolute;
+         right: 0;
+         margin: 5px;
+         color: var(--icon-color);
+         span {
+            position: relative;
+            margin: 0;
+         }
+      }
+      input {
+         padding: 8px 12px;
+         padding-left: 24px;
+         width: 100%;
+         border: none;
+         box-sizing: border-box;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            background-color: var(--field-line-color);
+         }
+      }
+   }
+
+   .dropdown {
+      width: auto;
+      min-width: 150px;
+      position: relative;
+      margin-top: 0px;
+
+      .selected {
+         padding: 6px 10px;
+         border: 1px solid;
+         background: var(--field-bg);
+         border-color: var(--field-line-color);
+         border-radius: 6px;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         cursor: pointer;
+         span {
+            user-select: none;
+            font-size: 0.75rem;
+            i {
+               padding: 1px 5px;
+               background-color: var(--line-color);
+               border-radius: 20px;
+               font-size: 0.6rem;
+               margin-left: 5px;
+               font-style: normal;
+            }
+         }
+         img {
+            margin-right: 5px;
+            max-height: 16px;
+            width: auto;
+            vertical-align: top;
+         }
+
+         .dropBtn {
+            background: transparent;
+            color: var(--icon-color);
+         }
+      }
+
+      .lists {
+         border: 1px solid var(--line-color);
+         margin-top: -1px;
+         position: absolute;
+         z-index: 9999;
+         background: var(--field-bg);
+         width: calc(100% - 2px);
+         border-radius: 0 0 4px 4px;
+         max-height: 210px;
+         overflow: auto;
+         font-size: 0.75rem;
+         ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+
+            li {
+               padding: 8px 10px;
+               cursor: pointer;
+               text-transform: capitalize;
+               span svg {
+                  color: var(--icon-color);
+               }
+               img {
+                  margin-right: 5px;
+                  max-height: 16px;
+                  width: auto;
+                  vertical-align: top;
+               }
+               :global(.icon) {
+                  margin-right: 5px;
+                  opacity: 0.7;
+               }
+
+               &.selectedItem {
+                  background: var(--primary-color-light);
+                  color: var(--primary-hover-color);
+                  span svg {
+                     color: var(--primary-hover-color);
+                  }
+               }
+
+               &:hover {
+                  background: var(--background-color);
+                  color: inherit;
+               }
+            }
+         }
+      }
+   }
+
+   &.multiSelectFieldFull {
+      .dropdown {
+         width: 100%;
+      }
+   }
+
+   &.multiSelectFieldLarge {
+      .selected {
+         padding: 12px;
+      }
+   }
+   &.multiSelectFieldDisabled {
+      .selected {
+         background-color: var(--line-color);
+      }
+   }
+
+   &.fieldHasError {
+      .selected {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+   &.multiSelectFieldOpen {
+      .selected {
+         border-radius: 6px 6px 0 0;
+      }
+   }
+}

package/dist/components/common/form/MultiSelect/MultiSelect.module.scss.js

@@ -0,0 +1,30 @@
+const e = "MultiSelect-module__multiSelectField___LdoLh", l = "MultiSelect-module__search___rm1lj", t = "MultiSelect-module__dropdown___OI-7Z", _ = "MultiSelect-module__selected___S6iRe", i = "MultiSelect-module__dropBtn___vPEDR", c = "MultiSelect-module__lists___P8hnS", d = "MultiSelect-module__selectedItem___g6s9h", u = "MultiSelect-module__multiSelectFieldFull___tywJ2", o = "MultiSelect-module__multiSelectFieldLarge___iNR7Y", s = "MultiSelect-module__multiSelectFieldDisabled___DPjbL", m = "MultiSelect-module__fieldHasError___UjWN7", S = "MultiSelect-module__multiSelectFieldOpen___u63rb", r = {
+  multiSelectField: e,
+  search: l,
+  dropdown: t,
+  selected: _,
+  dropBtn: i,
+  lists: c,
+  selectedItem: d,
+  multiSelectFieldFull: u,
+  multiSelectFieldLarge: o,
+  multiSelectFieldDisabled: s,
+  fieldHasError: m,
+  multiSelectFieldOpen: S
+};
+export {
+  r as default,
+  i as dropBtn,
+  t as dropdown,
+  m as fieldHasError,
+  c as lists,
+  e as multiSelectField,
+  s as multiSelectFieldDisabled,
+  u as multiSelectFieldFull,
+  o as multiSelectFieldLarge,
+  S as multiSelectFieldOpen,
+  l as search,
+  _ as selected,
+  d as selectedItem
+};
+//# sourceMappingURL=MultiSelect.module.scss.js.map

package/dist/components/common/form/MultiSelect/MultiSelect.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/common/form/NumberInput/NumberInput.d.ts

@@ -0,0 +1,19 @@
+type NumberInputProps = {
+    label?: string;
+    size?: 'large' | 'medium' | 'small';
+    full?: boolean;
+    inline?: boolean;
+    description?: string;
+    placeholder?: string;
+    customClasses?: string;
+    fieldValue: number | '';
+    required?: boolean;
+    min?: number;
+    max?: number;
+    hint?: string;
+    error?: string;
+    onUpdate: (value: number) => void;
+};
+declare const NumberInput: ({ label, size, inline, full, description, placeholder, customClasses, fieldValue, hint, required, min, max, error, onUpdate, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberInput;
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/components/common/form/NumberInput/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,GAAG,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,gIAelB,gBAAgB,4CAoDlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/common/form/NumberInput/NumberInput.js

@@ -0,0 +1,63 @@
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import g from "../FormField/FormField.js";
+import e from "./NumberInput.module.scss.js";
+const k = ({
+  label: c,
+  size: i = "medium",
+  inline: m = !0,
+  full: b = !1,
+  description: d,
+  placeholder: p,
+  customClasses: h = "",
+  fieldValue: l = "",
+  hint: F = "",
+  required: o = !1,
+  min: t,
+  max: s,
+  error: a,
+  onUpdate: u
+}) => {
+  const f = (n) => {
+    u(Number(n.target.value));
+  }, $ = () => {
+    const n = (l || 0) + 1;
+    (s === void 0 || n <= s) && u(n);
+  }, C = () => {
+    const n = (l || 0) - 1;
+    (t === void 0 || n >= t) && u(n);
+  };
+  return /* @__PURE__ */ r(
+    g,
+    {
+      type: "number",
+      label: c,
+      description: d,
+      hint: F,
+      error: a,
+      required: o,
+      inline: m,
+      classes: `${e.numberInputField} ${e.numberField} ${h} ${m ? e.numberFieldInline : ""} ${a ? e.fieldHasError : ""} ${i === "large" ? e.numberFieldLarge : ""} ${b ? e.numberFieldFull : ""}`,
+      children: /* @__PURE__ */ N("div", { className: e.numberInputWrapper, children: [
+        /* @__PURE__ */ r("button", { className: e.numberControl, onClick: C, children: "—" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "number",
+            className: e.input,
+            value: l,
+            onChange: f,
+            placeholder: p,
+            required: o,
+            min: t,
+            max: s
+          }
+        ),
+        /* @__PURE__ */ r("button", { className: e.numberControl, onClick: $, children: "+" })
+      ] })
+    }
+  );
+};
+export {
+  k as default
+};
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/common/form/NumberInput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/common/form/NumberInput/NumberInput.tsx"],"sourcesContent":["import FormField from '../FormField/FormField';\r\nimport classes from './NumberInput.module.scss';\r\n\r\ntype NumberInputProps = {\r\n   label?: string;\r\n   size?: 'large' | 'medium' | 'small';\r\n   full?: boolean;\r\n   inline?: boolean;\r\n   description?: string;\r\n   placeholder?: string;\r\n   customClasses?: string;\r\n   fieldValue: number | '';\r\n   required?: boolean;\r\n   min?: number;\r\n   max?: number;\r\n   hint?: string;\r\n   error?: string;\r\n   onUpdate: (value: number) => void;\r\n};\r\n\r\nconst NumberInput = ({\r\n   label,\r\n   size = 'medium',\r\n   inline = true,\r\n   full = false,\r\n   description,\r\n   placeholder,\r\n   customClasses = '',\r\n   fieldValue = '',\r\n   hint = '',\r\n   required = false,\r\n   min,\r\n   max,\r\n   error,\r\n   onUpdate,\r\n}: NumberInputProps) => {\r\n   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      onUpdate(Number(event.target.value));\r\n   };\r\n\r\n   const handleIncrement = () => {\r\n      const newValue = (fieldValue || 0) + 1;\r\n      if (max === undefined || newValue <= max) {\r\n         onUpdate(newValue);\r\n      }\r\n   };\r\n\r\n   const handleDecrement = () => {\r\n      const newValue = (fieldValue || 0) - 1;\r\n      if (min === undefined || newValue >= min) {\r\n         onUpdate(newValue);\r\n      }\r\n   };\r\n\r\n   return (\r\n      <FormField\r\n         type=\"number\"\r\n         label={label}\r\n         description={description}\r\n         hint={hint}\r\n         error={error}\r\n         required={required}\r\n         inline={inline}\r\n         classes={`${classes.numberInputField} ${classes.numberField} ${customClasses} ${inline ? classes.numberFieldInline : ''} ${error ? classes.fieldHasError : ''} ${\r\n            size === 'large' ? classes.numberFieldLarge : ''\r\n         } ${full ? classes.numberFieldFull : ''}`}\r\n      >\r\n         <div className={classes.numberInputWrapper}>\r\n            <button className={classes.numberControl} onClick={handleDecrement}>\r\n               —\r\n            </button>\r\n            <input\r\n               type=\"number\"\r\n               className={classes.input}\r\n               value={fieldValue}\r\n               onChange={handleChange}\r\n               placeholder={placeholder}\r\n               required={required}\r\n               min={min}\r\n               max={max}\r\n            />\r\n            <button className={classes.numberControl} onClick={handleIncrement}>\r\n               +\r\n            </button>\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default NumberInput;\r\n"],"names":["NumberInput","label","size","inline","full","description","placeholder","customClasses","fieldValue","hint","required","min","max","error","onUpdate","handleChange","event","handleIncrement","newValue","handleDecrement","jsx","FormField","classes","jsxs"],"mappings":";;;AAoBA,MAAMA,IAAc,CAAC;AAAA,EAClB,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACH,MAAwB;AACrB,QAAMC,IAAe,CAACC,MAA+C;AAClE,IAAAF,EAAS,OAAOE,EAAM,OAAO,KAAK,CAAC;AAAA,EACtC,GAEMC,IAAkB,MAAM;AAC3B,UAAMC,KAAYV,KAAc,KAAK;AACrC,KAAII,MAAQ,UAAaM,KAAYN,MAClCE,EAASI,CAAQ;AAAA,EAEvB,GAEMC,IAAkB,MAAM;AAC3B,UAAMD,KAAYV,KAAc,KAAK;AACrC,KAAIG,MAAQ,UAAaO,KAAYP,MAClCG,EAASI,CAAQ;AAAA,EAEvB;AAEA,SACG,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,MAAK;AAAA,MACL,OAAApB;AAAA,MACA,aAAAI;AAAA,MACA,MAAAI;AAAA,MACA,OAAAI;AAAA,MACA,UAAAH;AAAA,MACA,QAAAP;AAAA,MACA,SAAS,GAAGmB,EAAQ,gBAAgB,IAAIA,EAAQ,WAAW,IAAIf,CAAa,IAAIJ,IAASmB,EAAQ,oBAAoB,EAAE,IAAIT,IAAQS,EAAQ,gBAAgB,EAAE,IAC1JpB,MAAS,UAAUoB,EAAQ,mBAAmB,EACjD,IAAIlB,IAAOkB,EAAQ,kBAAkB,EAAE;AAAA,MAEvC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAQ,oBACrB,UAAA;AAAA,QAAA,gBAAAF,EAAC,YAAO,WAAWE,EAAQ,eAAe,SAASH,GAAiB,UAAA,KAEpE;AAAA,QACA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,MAAK;AAAA,YACL,WAAWE,EAAQ;AAAA,YACnB,OAAOd;AAAA,YACP,UAAUO;AAAA,YACV,aAAAT;AAAA,YACA,UAAAI;AAAA,YACA,KAAAC;AAAA,YACA,KAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEF,UAAA,EAAO,WAAWU,EAAQ,eAAe,SAASL,GAAiB,UAAA,IAAA,CAEpE;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGT;"}

package/dist/components/common/form/NumberInput/NumberInput.module.scss

@@ -0,0 +1,102 @@
+.numberInputField {
+   .numberInputWrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      max-width: 150px;
+
+      .input {
+         padding: 8px 12px;
+         padding-left: 40px;
+         padding-right: 40px;
+         text-align: center;
+         border: 1px solid var(--field-line-color);
+         border-radius: 6px;
+         background: transparent;
+         color: var(--content-text-color);
+         font-size: 0.75rem;
+         width: 100%;
+         box-sizing: border-box;
+         transition: all 0.2s ease;
+
+         &:focus {
+            outline: none;
+            border-color: var(--line-active-color);
+         }
+
+         &::placeholder {
+            color: var(--content-text-color-light);
+         }
+
+         &::-webkit-inner-spin-button,
+         &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+         }
+      }
+
+      .numberControl {
+         position: absolute;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         width: 24px;
+         height: 24px;
+         background: transparent;
+         border-radius: 4px;
+         cursor: pointer;
+         color: var(--content-text-color-light);
+         font-size: 1.125rem;
+         font-weight: 600;
+         transition: all 0.2s ease;
+
+         &:hover {
+            color: var(--primary-color);
+         }
+
+         &:first-of-type {
+            left: 7px;
+            font-size: 0.625rem;
+         }
+
+         &:last-of-type {
+            right: 7px;
+         }
+      }
+   }
+
+   &.numberFieldLarge {
+      .input {
+         height: 42px;
+         font-size: 1rem;
+      }
+   }
+
+   &.numberFieldInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+         .fieldLabel {
+            min-width: unset;
+         }
+         .numberInputWrapper {
+            max-width: 50%;
+         }
+      }
+   }
+
+   &.numberFieldFull {
+      width: 100%;
+      .input {
+         width: 100%;
+      }
+   }
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+}

package/dist/components/common/form/NumberInput/NumberInput.module.scss.js

@@ -0,0 +1,22 @@
+const e = "NumberInput-module__numberInputField___iu-mf", u = "NumberInput-module__numberInputWrapper___1jYw3", n = "NumberInput-module__input___i-xTg", r = "NumberInput-module__numberControl___3oSp4", _ = "NumberInput-module__numberFieldLarge___Ygi24", l = "NumberInput-module__numberFieldInline___-Iztq", m = "NumberInput-module__numberFieldFull___vTxe1", t = "NumberInput-module__fieldHasError___dAyyf", o = {
+  numberInputField: e,
+  numberInputWrapper: u,
+  input: n,
+  numberControl: r,
+  numberFieldLarge: _,
+  numberFieldInline: l,
+  numberFieldFull: m,
+  fieldHasError: t
+};
+export {
+  o as default,
+  t as fieldHasError,
+  n as input,
+  r as numberControl,
+  m as numberFieldFull,
+  l as numberFieldInline,
+  _ as numberFieldLarge,
+  e as numberInputField,
+  u as numberInputWrapper
+};
+//# sourceMappingURL=NumberInput.module.scss.js.map

package/dist/components/common/form/NumberInput/NumberInput.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/common/form/PasswordField/PasswordField.d.ts

@@ -0,0 +1,19 @@
+type PasswordFieldProps = {
+    label?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'date';
+    size?: 'large' | 'medium' | 'small';
+    full?: boolean;
+    inline?: boolean;
+    description?: string;
+    placeholder?: string;
+    customClasses?: string;
+    fieldValue: string | number;
+    required?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    error?: string;
+    onUpdate: (value: string) => void;
+};
+declare const PasswordField: ({ label, size, inline, full, description, placeholder, customClasses, fieldValue, hint, error, required, disabled, onUpdate, }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordField;
+//# sourceMappingURL=PasswordField.d.ts.map

package/dist/components/common/form/PasswordField/PasswordField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAKA,KAAK,kBAAkB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACzD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,gIAcpB,kBAAkB,4CAkCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/common/form/PasswordField/PasswordField.js

@@ -0,0 +1,57 @@
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { useState as g } from "react";
+import x from "../../Icon/Icon.js";
+import P from "../FormField/FormField.js";
+import e from "./PasswordField.module.scss.js";
+const N = ({
+  label: l,
+  size: a = "medium",
+  inline: r = !0,
+  full: o = !1,
+  description: p,
+  placeholder: d,
+  customClasses: m = "",
+  fieldValue: u = "",
+  hint: c = "",
+  error: f = "",
+  required: n = !1,
+  disabled: i = !1,
+  onUpdate: h
+}) => {
+  const [t, F] = g(!1), $ = (w) => {
+    h(w.target.value);
+  };
+  return /* @__PURE__ */ y(
+    P,
+    {
+      type: "input",
+      label: l,
+      description: p,
+      hint: c,
+      error: f,
+      required: n,
+      inline: r,
+      classes: `${e.inputField} ${e[a]} ${o ? e.inputFieldFull : ""} 
+         ${o ? e.inputFieldInline : ""} ${a === "large" ? e.inputFieldLarge : ""} ${m}`,
+      children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: t ? "text" : "password",
+            className: `${e.input} ${i ? e.disabled : ""}`,
+            value: u,
+            onChange: $,
+            placeholder: d,
+            required: n,
+            disabled: i
+          }
+        ),
+        /* @__PURE__ */ s("button", { className: e.viewPassBtn, onClick: () => F(!t), type: "button", children: /* @__PURE__ */ s(x, { type: t ? "eye-hide" : "eye" }) })
+      ]
+    }
+  );
+};
+export {
+  N as default
+};
+//# sourceMappingURL=PasswordField.js.map

package/dist/components/common/form/PasswordField/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.js","sources":["../../../../../src/components/common/form/PasswordField/PasswordField.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport Icon from '../../Icon/Icon';\r\nimport FormField from '../FormField/FormField';\r\nimport classes from './PasswordField.module.scss';\r\n\r\ntype PasswordFieldProps = {\r\n   label?: string;\r\n   type?: 'text' | 'password' | 'email' | 'number' | 'date';\r\n   size?: 'large' | 'medium' | 'small';\r\n   full?: boolean;\r\n   inline?: boolean;\r\n   description?: string;\r\n   placeholder?: string;\r\n   customClasses?: string;\r\n   fieldValue: string | number;\r\n   required?: boolean;\r\n   disabled?: boolean;\r\n   hint?: string;\r\n   error?: string;\r\n   onUpdate: (value: string) => void;\r\n};\r\n\r\nconst PasswordField = ({\r\n   label,\r\n   size = 'medium',\r\n   inline = true,\r\n   full = false,\r\n   description,\r\n   placeholder,\r\n   customClasses = '',\r\n   fieldValue = '',\r\n   hint = '',\r\n   error = '',\r\n   required = false,\r\n   disabled = false,\r\n   onUpdate,\r\n}: PasswordFieldProps) => {\r\n   const [showPassword, setShowPassword] = useState(false);\r\n\r\n   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      onUpdate(event.target.value);\r\n   };\r\n\r\n   return (\r\n      <FormField\r\n         type=\"input\"\r\n         label={label}\r\n         description={description}\r\n         hint={hint}\r\n         error={error}\r\n         required={required}\r\n         inline={inline}\r\n         classes={`${classes.inputField} ${classes[size]} ${full ? classes.inputFieldFull : ''} \r\n         ${full ? classes.inputFieldInline : ''} ${size === 'large' ? classes.inputFieldLarge : ''} ${customClasses}`}\r\n      >\r\n         <input\r\n            type={showPassword ? 'text' : 'password'}\r\n            className={`${classes.input} ${disabled ? classes.disabled : ''}`}\r\n            value={fieldValue}\r\n            onChange={handleChange}\r\n            placeholder={placeholder}\r\n            required={required}\r\n            disabled={disabled}\r\n         />\r\n\r\n         <button className={classes.viewPassBtn} onClick={() => setShowPassword(!showPassword)} type=\"button\">\r\n            <Icon type={showPassword ? 'eye-hide' : 'eye'} />\r\n         </button>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default PasswordField;\r\n"],"names":["PasswordField","label","size","inline","full","description","placeholder","customClasses","fieldValue","hint","error","required","disabled","onUpdate","showPassword","setShowPassword","useState","handleChange","event","jsxs","FormField","classes","jsx","Icon"],"mappings":";;;;;AAsBA,MAAMA,IAAgB,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,UAAAC;AACH,MAA0B;AACvB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAe,CAACC,MAA+C;AAClE,IAAAL,EAASK,EAAM,OAAO,KAAK;AAAA,EAC9B;AAEA,SACG,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,MAAK;AAAA,MACL,OAAAnB;AAAA,MACA,aAAAI;AAAA,MACA,MAAAI;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAR;AAAA,MACA,SAAS,GAAGkB,EAAQ,UAAU,IAAIA,EAAQnB,CAAI,CAAC,IAAIE,IAAOiB,EAAQ,iBAAiB,EAAE;AAAA,WACnFjB,IAAOiB,EAAQ,mBAAmB,EAAE,IAAInB,MAAS,UAAUmB,EAAQ,kBAAkB,EAAE,IAAId,CAAa;AAAA,MAE1G,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,MAAMR,IAAe,SAAS;AAAA,YAC9B,WAAW,GAAGO,EAAQ,KAAK,IAAIT,IAAWS,EAAQ,WAAW,EAAE;AAAA,YAC/D,OAAOb;AAAA,YACP,UAAUS;AAAA,YACV,aAAAX;AAAA,YACA,UAAAK;AAAA,YACA,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGF,UAAA,EAAO,WAAWS,EAAQ,aAAa,SAAS,MAAMN,EAAgB,CAACD,CAAY,GAAG,MAAK,UACzF,UAAA,gBAAAQ,EAACC,GAAA,EAAK,MAAMT,IAAe,aAAa,OAAO,EAAA,CAClD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGT;"}