@safestrong/ppa-component-library 1.7.3 → 1.8.1

package/dist/index.d.mts

@@ -19,11 +19,13 @@ declare namespace Button {
     }) => React.JSX.Element;
 }
 
-declare function TextInput({ label, labelFor, icon, outerclass, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
+declare function TextInput({ label, labelFor, icon, outerclass, isdarkmode, inputclass, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelFor?: string;
     icon?: IconProp;
     outerclass?: string;
+    isdarkmode?: boolean;
+    inputclass?: string;
 }>): React.JSX.Element;
 
 declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
@@ -34,6 +36,7 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     placeholder?: string;
     stateaction?: (param: any) => void;
     outerclass?: string;
+    isdarkmode?: boolean;
     options?: {
         label: string;
         value: string;
@@ -113,6 +116,7 @@ type MultiSelect = {
     label?: string;
     labelHtml?: string;
     outerclass?: string;
+    isdarkmode?: boolean;
     options?: Option[];
     stringOptions?: string[];
     state: {

package/dist/index.d.ts

@@ -19,11 +19,13 @@ declare namespace Button {
     }) => React.JSX.Element;
 }
 
-declare function TextInput({ label, labelFor, icon, outerclass, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
+declare function TextInput({ label, labelFor, icon, outerclass, isdarkmode, inputclass, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelFor?: string;
     icon?: IconProp;
     outerclass?: string;
+    isdarkmode?: boolean;
+    inputclass?: string;
 }>): React.JSX.Element;
 
 declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
@@ -34,6 +36,7 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     placeholder?: string;
     stateaction?: (param: any) => void;
     outerclass?: string;
+    isdarkmode?: boolean;
     options?: {
         label: string;
         value: string;
@@ -113,6 +116,7 @@ type MultiSelect = {
     label?: string;
     labelHtml?: string;
     outerclass?: string;
+    isdarkmode?: boolean;
     options?: Option[];
     stringOptions?: string[];
     state: {

package/dist/index.js

@@ -147,25 +147,56 @@ function getBtnClass(idx) {
 // src/components/TextInput.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
-var input__icon = "w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]";
+var input__icon = "w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] ";
 function TextInput(_a) {
   var _b = _a, {
     label,
     labelFor,
     icon,
-    outerclass
+    outerclass,
+    isdarkmode,
+    inputclass
   } = _b, attr = __objRest(_b, [
     "label",
     "labelFor",
     "icon",
-    "outerclass"
+    "outerclass",
+    "isdarkmode",
+    "inputclass"
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ import_react2.default.createElement("div", { className: `text-input__wrapper overflow-hidden ${attr.className}` }, icon && /* @__PURE__ */ import_react2.default.createElement(import_react_fontawesome2.FontAwesomeIcon, { icon, className: input__icon }), /* @__PURE__ */ import_react2.default.createElement(
-    "input",
-    __spreadProps(__spreadValues({}, attr), {
-      className: `text-input w-full ${icon && "!pl-[0.3rem]"}`
-    })
-  )));
+  function getThemedClass(prefix) {
+    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
+  }
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ import_react2.default.createElement(
+    "label",
+    {
+      htmlFor: labelFor,
+      className: "text-input__label",
+      style: {
+        color: getThemedClass("-text-secondary")
+      }
+    },
+    label
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      className: `text-input__wrapper overflow-hidden ${attr.className}`,
+      style: {
+        borderColor: getThemedClass("-border"),
+        background: getThemedClass("-bg-surface")
+      }
+    },
+    icon && /* @__PURE__ */ import_react2.default.createElement(import_react_fontawesome2.FontAwesomeIcon, { icon, className: input__icon }),
+    /* @__PURE__ */ import_react2.default.createElement(
+      "input",
+      __spreadProps(__spreadValues({}, attr), {
+        className: `text-input w-full ${icon && "!pl-[0.3rem]"} ${inputclass}`,
+        style: {
+          color: getThemedClass("-text-primary")
+        }
+      })
+    )
+  ));
 }
 
 // src/components/Slider.tsx
@@ -189,7 +220,8 @@ var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
 function SingleSelect(attr) {
   var _b;
-  const _a = attr, { options = [], stringOptions = [] } = _a, attrInput = __objRest(_a, ["options", "stringOptions"]);
+  const _a = attr, { options = [], stringOptions = [], isdarkmode } = _a, attrInput = __objRest(_a, ["options", "stringOptions", "isdarkmode"]);
+  const inputValue = attrInput.value;
   const [keyword, setKeyword] = (0, import_react4.useState)("");
   const [selected, setSelected] = (0, import_react4.useState)({
     label: "",
@@ -204,13 +236,11 @@ function SingleSelect(attr) {
     }
     setSelected({ label, value });
     if (attr.stateaction) {
-      if (stringOptions) attr.stateaction(value);
-      if (options) attr.stateaction({ label, value });
+      if ((options == null ? void 0 : options.length) > 0) attr.stateaction({ label, value });
+      if ((stringOptions == null ? void 0 : stringOptions.length) > 0) attr.stateaction(value);
     }
     setKeyword("");
-    setTimeout(() => {
-      e.target.blur();
-    }, 250);
+    e.currentTarget.blur();
   }
   function autoUpdateValue(updatedValue) {
     if (updatedValue) {
@@ -232,40 +262,91 @@ function SingleSelect(attr) {
     );
   }, [keyword, availableOptions]);
   (0, import_react4.useEffect)(() => {
-    attrInput.value && autoUpdateValue(attrInput.value);
-  }, [attrInput.value]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `w-full group ${attr.outerclass}` }, attrInput.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: `${attrInput.className} text-input__wrapper relative` }, /* @__PURE__ */ import_react4.default.createElement(
-    "input",
-    __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
-      value: (_b = attrInput.value) != null ? _b : selected.value,
-      type: "hidden"
-    })
-  ), /* @__PURE__ */ import_react4.default.createElement(
-    "input",
+    inputValue && autoUpdateValue(inputValue);
+  }, [inputValue]);
+  function getThemedClass(prefix) {
+    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
+  }
+  const placeholderClass = `${input2} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
+  const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `w-full group ${attr.outerclass}` }, attrInput.label && /* @__PURE__ */ import_react4.default.createElement(
+    "label",
     {
-      value: keyword,
-      type: "search",
-      onChange: (e) => setKeyword(e.target.value),
-      className: `${attrInput.name}-keyword ${input2} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
-      placeholder: selected.value ? selected.label : attrInput.placeholder
-    }
-  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
-    "button",
+      className: "text-input__label",
+      htmlFor: attrInput.labelHtml,
+      style: { color: getThemedClass("-text-secondary") }
+    },
+    attrInput.label
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "div",
     {
-      type: "button",
-      onClick: (e) => selectItem({ label, value }, e),
-      key: value,
-      className: "select-item"
+      className: `${attrInput.className} text-input__wrapper relative`,
+      style: {
+        borderColor: getThemedClass("-border"),
+        background: getThemedClass("-bg-surface")
+      }
     },
-    label,
-    selected.value == value && /* @__PURE__ */ import_react4.default.createElement(
-      import_react_fontawesome4.FontAwesomeIcon,
+    /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      __spreadProps(__spreadValues(__spreadValues({
+        type: "hidden"
+      }, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
+        value: (_b = attrInput.value) != null ? _b : selected.value
+      })
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "input",
       {
-        icon: import_free_solid_svg_icons3.faCheck,
-        className: "text-[var(--color-primary)]"
+        type: "search",
+        value: keyword,
+        autoComplete: "off",
+        onChange: (e) => setKeyword(e.target.value),
+        className: `${attrInput.name}-keyword ${placeholderClass}`,
+        placeholder: selected.value ? selected.label : attrInput.placeholder,
+        style: {
+          color: selected.value ? getThemedClass("-text-primary") : void 0
+        }
       }
-    )
-  ))), /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, className: input__icon2 })));
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        className: "select-item__wrapper",
+        style: {
+          borderColor: getThemedClass("-border"),
+          background: getThemedClass("-bg-surface")
+        }
+      },
+      filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          disabled: true,
+          className: "select-item",
+          style: { color: "var(--color-danger)" }
+        },
+        "Tidak ada Item"
+      ),
+      filteredOptions.map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
+        "button",
+        {
+          key: value,
+          type: "button",
+          className: `select-item ${optionHoverClass}`,
+          onClick: (e) => selectItem({ label, value }, e),
+          style: { color: getThemedClass("-text-secondary") }
+        },
+        label,
+        selected.value == value && /* @__PURE__ */ import_react4.default.createElement(
+          import_react_fontawesome4.FontAwesomeIcon,
+          {
+            icon: import_free_solid_svg_icons3.faCheck,
+            style: { color: "var(--color-info)" }
+          }
+        )
+      ))
+    ),
+    /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, style: { color: getThemedClass("-icon-input"), paddingRight: "0.7rem" } })
+  ));
 }
 SingleSelect.autoFill = autoFillInput;
 function autoFillInput(value, elName, list2) {
@@ -275,7 +356,6 @@ function autoFillInput(value, elName, list2) {
   const el = document.querySelector(`.${elName}-keyword`);
   el == null ? void 0 : el.setAttribute("placeholder", `${filtered == null ? void 0 : filtered.label}`);
 }
-var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
 var input2 = "text-input peer ... w-full";
 
 // src/components/Tooltip.tsx
@@ -422,8 +502,10 @@ function MultiSelect(_a) {
     "label",
     "labelHtml"
   ]);
-  const { options = [], stringOptions = [] } = attr;
+  const { options = [], stringOptions = [], isdarkmode } = attr;
   const [keyword, setKeyword] = (0, import_react10.useState)("");
+  const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
+  const placeholderClass = `${input3} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
   const availableOptions = (0, import_react10.useMemo)(() => {
     const isDefaultOption = options && options.length > 0;
     if (!isDefaultOption)
@@ -451,42 +533,98 @@ function MultiSelect(_a) {
     const isAllSelected = state.value.length == availableOptions.length;
     state.select(isAllSelected ? [] : availableOptions);
   }, [state.value]);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ import_react10.default.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
-    "input",
+  function getThemedClass(prefix) {
+    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
+  }
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ import_react10.default.createElement(
+    "label",
     {
-      value: keyword,
-      type: "search",
-      placeholder: `${state.value.length} Dipilih`,
-      className: `${input3} ${state.value.length > 0 && "placeholder:text-[var(--color-text-primary)]"}`,
-      onChange: (e) => setKeyword(e.target.value)
-    }
-  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ import_react10.default.createElement(
-    "button",
+      htmlFor: labelHtml,
+      className: "text-input__label",
+      style: { color: getThemedClass("-text-secondary") }
+    },
+    label
+  ), /* @__PURE__ */ import_react10.default.createElement(
+    "div",
     {
-      type: "button",
-      onClick: () => selectItem({ label: label2, value }),
-      key: value,
-      className: "select-item"
+      className: "text-input__wrapper relative",
+      style: {
+        borderColor: getThemedClass("-border"),
+        background: getThemedClass("-bg-surface")
+      }
     },
-    label2,
-    isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
-      import_react_fontawesome7.FontAwesomeIcon,
+    /* @__PURE__ */ import_react10.default.createElement(
+      "input",
       {
-        icon: import_free_solid_svg_icons6.faCheck,
-        className: "text-[var(--color-primary)]"
+        type: "search",
+        value: keyword,
+        autoComplete: "off",
+        className: `${input3} ${placeholderClass}`,
+        onChange: (e) => setKeyword(e.target.value),
+        placeholder: `${state.value.length} Dipilih`,
+        style: {
+          color: state.value.length > 0 ? getThemedClass("-text-primary") : void 0
+        }
       }
+    ),
+    /* @__PURE__ */ import_react10.default.createElement(
+      "div",
+      {
+        className: "select-item__wrapper select-multiple__wrapper",
+        style: {
+          borderColor: getThemedClass("-border"),
+          background: getThemedClass("-bg-surface")
+        }
+      },
+      getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement(
+        "button",
+        {
+          disabled: true,
+          className: "select-item",
+          style: { color: "var(--color-danger)" }
+        },
+        "Tidak ada Item"
+      ),
+      getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ import_react10.default.createElement(
+        "button",
+        {
+          key: value,
+          type: "button",
+          onClick: () => selectItem({ label: label2, value }),
+          className: `select-item ${optionHoverClass}`,
+          style: { color: getThemedClass("-text-secondary") }
+        },
+        label2,
+        isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
+          import_react_fontawesome7.FontAwesomeIcon,
+          {
+            icon: import_free_solid_svg_icons6.faCheck,
+            style: { color: "var(--color-info)" }
+          }
+        )
+      ))
+    ),
+    /* @__PURE__ */ import_react10.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "cursor-pointer",
+        onClick: selectUnSelectAll
+      },
+      /* @__PURE__ */ import_react10.default.createElement(
+        import_react_fontawesome7.FontAwesomeIcon,
+        {
+          icon: import_free_solid_svg_icons6.faListCheck,
+          style: {
+            color: getThemedClass("-icon-input"),
+            paddingRight: "0.7rem",
+            fontSize: "1.2rem"
+          }
+        }
+      )
     )
-  ))), /* @__PURE__ */ import_react10.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: "cursor-pointer",
-      onClick: selectUnSelectAll
-    },
-    /* @__PURE__ */ import_react10.default.createElement(import_react_fontawesome7.FontAwesomeIcon, { icon: import_free_solid_svg_icons6.faListCheck, className: input__icon3 })
-  )));
+  ));
 }
-var input__icon3 = "pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]";
 var input3 = "text-input peer ... w-full";
 
 // src/components/ThemeToggle.tsx
@@ -529,6 +667,7 @@ function Dashboard() {
   return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-[1rem]" }, /* @__PURE__ */ import_react12.default.createElement(
     MultiSelect,
     {
+      isdarkmode: true,
       label: "Multi Select",
       stringOptions: stringList,
       state: { value: selectedItem, select: setSelectedItem }