npm - @safestrong/ppa-component-library - Versions diffs - 1.3.5 → 1.3.6 - Mend

@safestrong/ppa-component-library 1.3.5 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -27,6 +27,14 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     stringOptions?: string[];
 };
 declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
+declare namespace SingleSelect {
+    var autoFill: typeof autoFillInput;
+}
+declare function autoFillInput(value: string, elName: string, list: {
+    label: string;
+    value: string;
+}[]): void;
 type Tooltip = {
     children: React.ReactNode;

package/dist/index.d.ts CHANGED Viewed

@@ -27,6 +27,14 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     stringOptions?: string[];
 };
 declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
+declare namespace SingleSelect {
+    var autoFill: typeof autoFillInput;
+}
+declare function autoFillInput(value: string, elName: string, list: {
+    label: string;
+    value: string;
+}[]): void;
 type Tooltip = {
     children: React.ReactNode;

package/dist/index.js CHANGED Viewed

@@ -104,7 +104,7 @@ function Button(_a) {
       import_react_fontawesome.FontAwesomeIcon,
       {
         icon: buttonIcon,
-        className: `text-[1.1rem] ${isLoading && "animate-spin"}`
+        className: `text-[1.2rem] mr-[0.3rem] ${isLoading && "animate-spin"}`
       }
     ),
     isLoading ? "Memproses ..." : label
@@ -114,7 +114,7 @@ function Button(_a) {
 // 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.8rem] text-[1.4rem] 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,
@@ -128,7 +128,7 @@ function TextInput(_a) {
   return /* @__PURE__ */ import_react2.default.createElement("div", { className: "group ... 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" }, 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 ${attr.className} ${icon && "!pl-0"}`
+      className: `text-input w-full ${attr.className} ${icon && "!pl-[0.3rem]"}`
     })
   )));
 }
@@ -154,16 +154,31 @@ var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
 function SingleSelect(attr) {
   var _a;
-  const [keyword, setKeyword] = (0, import_react4.useState)("");
   const { options = [], stringOptions = [] } = attr;
+  const [keyword, setKeyword] = (0, import_react4.useState)("");
+  const [selected, setSelected] = (0, import_react4.useState)({
+    label: "",
+    value: ""
+  });
   const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
-  function selectItem({ value }) {
-    const trigerManual = attr.onChange;
-    trigerManual == null ? void 0 : trigerManual({
-      target: { value, name: attr.name }
-    });
+  function selectItem({ label, value }) {
+    const triggerManual = attr.onChange;
+    if (triggerManual) {
+      triggerManual == null ? void 0 : triggerManual({
+        target: { value, name: attr.name }
+      });
+    }
+    setSelected({ label, value });
     setKeyword("");
   }
+  function autoUpdateValue(updatedValue) {
+    if (updatedValue) {
+      const filtered = availableOptions.find(
+        ({ value }) => value == updatedValue
+      );
+      if (filtered) setSelected(filtered);
+    }
+  }
   const availableOptions = (0, import_react4.useMemo)(() => {
     return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
   }, [options, stringOptions]);
@@ -172,12 +187,9 @@ function SingleSelect(attr) {
       ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }, [inputKeyword, availableOptions]);
-  const selected = (0, import_react4.useMemo)(() => {
-    return availableOptions.find(({ value }) => value === attr.value) || {
-      label: "",
-      value: ""
-    };
-  }, [attr.value, availableOptions]);
+  (0, import_react4.useEffect)(() => {
+    attr.value && autoUpdateValue(attr.value);
+  }, [attr.value]);
   return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full group" }, attr.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
     "input",
     __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
@@ -189,6 +201,7 @@ function SingleSelect(attr) {
     {
       value: keyword,
       type: "search",
+      name: `${attr.name}-keyword`,
       onChange: (e) => setKeyword(e.target.value),
       className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
       placeholder: selected.value ? selected.label : "Cari opsi ..."
@@ -211,6 +224,14 @@ function SingleSelect(attr) {
     )
   ))), /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, className: input__icon2 })));
 }
+SingleSelect.autoFill = autoFillInput;
+function autoFillInput(value, elName, list2) {
+  const inp = document.querySelector(`[name="${elName}"]`);
+  inp.value = `${value}`;
+  const filtered = list2.find((item) => item.value == value);
+  const el = document.querySelector(`[name="${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 input = "text-input peer ... w-full";
@@ -425,7 +446,7 @@ function MultiSelect({
     /* @__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-[var(--color-icon-input)]";
+var input__icon3 = "pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]";
 var input2 = "text-input peer ... w-full";
 // src/components/ThemeToggle.tsx
@@ -434,7 +455,7 @@ function ThemeToggle(attr) {
   return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ import_react11.default.createElement(
     "label",
     {
-      htmlFor: "theme-toggle",
+      htmlFor: `${attr.id || "theme-toggle"}`,
       className: "slider__wrapper slider-theme slider-theme-light"
     },
     /* @__PURE__ */ import_react11.default.createElement(
@@ -459,7 +480,11 @@ var list = [
 ];
 function Dashboard() {
   const [selectedItem, setSelectedItem] = (0, import_react12.useState)([]);
-  const [sel, setSel] = (0, import_react12.useState)("");
+  const [sel, setSel] = (0, import_react12.useState)({ label: "", value: "" });
+  function updateState(item) {
+    const filtered = list.find(({ value }) => value == item);
+    filtered && setSel(filtered);
+  }
   return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-[2rem]" }, /* @__PURE__ */ import_react12.default.createElement(
     MultiSelect,
     {
@@ -472,10 +497,15 @@ function Dashboard() {
     {
       label: "Single Select",
       name: "newinput",
-      options: list,
-      value: sel,
-      onChange: (e) => setSel(e.target.value)
+      options: list
     }
+  ), /* @__PURE__ */ import_react12.default.createElement(
+    "button",
+    {
+      onClick: () => SingleSelect.autoFill("option2", "newinput", list)
+    },
+    "Update ",
+    sel.value
   ));
 }

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\nexport { default as Dashboard } from \"./components/Dashboard\";\nexport { default as Badge } from \"./components/Badge\";\nexport { default as Skeleton } from \"./components/Skeleton\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" \| \"secondary\" \| \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.1rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.8rem] text-[1.4rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${icon && \"!pl-0\"}`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const { options = [], stringOptions = [] } = attr;\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ value }: { label: string; value: string }) {\n const trigerManual = attr.onChange;\n trigerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n setKeyword(\"\");\n }\n\n const availableOptions = useMemo(() => {\n return options \|\| stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n const selected = useMemo(() => {\n return (\n availableOptions.find(({ value }) => value === attr.value) \|\| {\n label: \"\",\n value: \"\",\n }\n );\n }, [attr.value, availableOptions]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" \| \"success\" \| \"info\" \| \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor=\"theme-toggle\"\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState(\"\");\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n value={sel}\n onChange={(e) => setSel(e.target.value)}\n />\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" \| \"danger\" \| \"warning\" \| \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAElB,+BAAgC;AAChC,kCAA8B;AASf,SAAR,OAAwB,IAOV;AAPU,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAY+B,IAM1B,iBAN0B,IAM1B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,YAAY,4CAAgB;AAC/C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,GAAG,CAAC,QAAQ,cAAc,IAAI,SAAS,IAChD,WAAW,eAAe,gBAC5B;AAAA;AAAA,IAEC,cAAc,QACb,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,iBAAiB,aAAa,cAAc;AAAA;AAAA,IACzD;AAAA,IAED,YAAY,kBAAkB;AAAA,EACjC;AAEJ;;;ACrCA,IAAAC,gBAAkB;AAElB,IAAAC,4BAAgC;AAChC,IAAM,cACJ;AAEa,SAAR,UAA2B,IAW/B;AAX+B,eAChC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EATF,IAMkC,IAI7B,iBAJ6B,IAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AASA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,sBACZ,SACC,8BAAAA,QAAA,cAAC,WAAM,SAAS,UAAU,WAAU,uBACjC,KACH,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,yCACZ,QAAQ,8BAAAA,QAAA,cAAC,6CAAgB,MAAY,WAAW,aAAa,GAC9D,8BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,qBAAqB,KAAK,SAAS,IAAI,QAAQ,OAAO;AAAA;AAAA,EACnE,CACF,CACF;AAEJ;;;AClCA,IAAAC,gBAAkB;AAClB,IAAAC,+BAAwB;AACxB,IAAAC,4BAAgC;AAEjB,SAAR,OACL,MACA;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BACb,8BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,WAAU;AAAA;AAAA,EACZ,GACA,8BAAAA,QAAA,cAAC,WAAM,SAAQ,UAAS,WAAU,YAChC,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,sCAAS,WAAU,iBAAgB,CAC5D,CACF,CACF;AAEJ;;;ACrBA,IAAAC,gBAA2D;AAC3D,IAAAC,4BAAgC;AAChC,IAAAC,+BAAuC;AAYxB,SAAR,aAA8B,MAA8B;AAfnE;AAgBE,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,EAAE;AACzC,QAAM,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI;AAC7C,QAAM,mBAAe,gCAAiB,OAAO;AAE7C,WAAS,WAAW,EAAE,MAAM,GAAqC;AAC/D,UAAM,eAAe,KAAK;AAC1B,iDAAe;AAAA,MACb,QAAQ,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACnC;AACA,eAAW,EAAE;AAAA,EACf;AAEA,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,WAAO,WAAW,cAAc,IAAI,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,EAAE;AAAA,EAC3E,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,WAAO,iBAAiB;AAAA,MACtB,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,QAAM,eAAW,uBAAQ,MAAM;AAC7B,WACE,iBAAiB,KAAK,CAAC,EAAE,MAAM,MAAM,UAAU,KAAK,KAAK,KAAK;AAAA,MAC5D,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,KAAK,OAAO,gBAAgB,CAAC;AAEjC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,kBACZ,KAAK,SACJ,8BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,KAAK,aAChD,KAAK,KACR,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,8BAAAA,QAAA;AAAA,IAAC;AAAA,oDACK,OACC,KAAK,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,IAFrD;AAAA,MAGC,QAAO,UAAK,UAAL,YAAc,SAAS;AAAA,MAC9B,MAAK;AAAA;AAAA,EACP,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAW,GAAG,KAAK,IACjB,SAAS,SAAS,8CACpB;AAAA,MACA,aAAa,SAAS,QAAQ,SAAS,QAAQ;AAAA;AAAA,EACjD,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAU,0BACZ,gBAAgB,UAAU,KAAK,WAAW,MACzC,8BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,gBAAgB,IAAI,CAAC,EAAE,OAAO,MAAM,MACnC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,SAAS,SAAS,SACjB,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,4CAAe,WAAWC,cAAa,CAChE,CACF;AAEJ;AAEA,IAAMA,eAAc;AACpB,IAAM,QAAQ;;;ACtGd,IAAAC,gBAAkB;AAQH,SAAR,QAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAsB;AACpB,WAAS,YAAY;AACnB,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,cACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,UAAQ,QAAS,GAChC,8BAAAA,QAAA,cAAC,UAAK,WAAW,gBAAgB,UAAU,CAAC,MAAK,IAAK,CACxD;AAEJ;AAEA,IAAM,MACJ;AACF,IAAM,SACJ;AACF,IAAM,QACJ;AACF,IAAM,OACJ;;;ACrCF,IAAAC,gBAAkB;AAOH,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AACF,GAMI;AACF,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,qBACZ,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,MACzB,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,gBACT,MAAM,UAAU,QACZ,yBACA,gCACN;AAAA,MACA,SAAS,MAAM,MAAM,UAAU,KAAK;AAAA;AAAA,IAEnC;AAAA,EACH,CACD,CACH;AAEJ;;;AClCA,IAAAC,gBAAkB;AAOH,SAAR,KAAsB,EAAE,UAAU,UAAU,GAAmB;AACpE,SAAO,8BAAAC,QAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,MAAK,QAAS;AACxD;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAGM;AACJ,SACE,8BAAAA,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,8CACzB,QACH;AAEJ;AACA,KAAK,SAAS;;;ACxBd,IAAAC,gBAAkB;AAClB,IAAAC,4BAAgC;AAChC,IAAAC,+BAKO;AAUQ,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAoB;AAClB,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,2BAC1B,8BAAAA,QAAA,cAAC,SAAI,WAAU,iBACb,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,GACA,8BAAAA,QAAA,cAAC,aACC,8BAAAA,QAAA,cAAC,OAAE,WAAU,kBAAgB,KAAM,GACnC,8BAAAA,QAAA,cAAC,OAAE,WAAU,wBAAsB,WAAY,CACjD,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,CACF,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE;AAAA;AAAA,EACrC,CACH;AAEJ;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,SAAS;AAAA,MACrC,OAAO,EAAE,YAAY,eAAe,IAAI,UAAU,SAAS,IAAI;AAAA;AAAA,IAE/D,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,QAAQ,IAAI;AAAA,QAClB,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,IACjC;AAAA,IACA,8BAAAA,QAAA,cAAC,WAAG,IAAK;AAAA,EACX;AAEJ;AAEA,MAAM,SAAS;AAEf,SAAS,SAAS,MAAc;AAC9B,SAAO,eAAe,IAAI;AAC5B;AAEA,SAAS,QAAQ,MAAc;AAC7B,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAEA,SAAO,QAAQ,IAAI;AACrB;;;ACxFA,IAAAC,gBAAkB;AAClB,IAAAC,+BAA6B;AAC7B,IAAAC,4BAAgC;AASjB,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAClC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,cAAc,SAAS,MACrC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAU;AAAA;AAAA,EACZ,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,2CAAc,WAAU,oBAAmB,GAClE,8BAAAA,QAAA,cAAC,WAAM,SAAS,MAAM,WAAU,uBAC7B,KACH,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAU,sBACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BAAyB,QAAS,CACnD,CACF;AAEJ;;;ACnCA,IAAAC,iBAA+D;AAC/D,IAAAC,4BAAgC;AAChC,IAAAC,+BAAqC;AActB,SAAR,YAA6B;AAAA,EAClC,MAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,yBAAS,EAAE;AACzC,QAAM,mBAAe,iCAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAOA,MAAK;AAAA,MACV,CAAC,EAAE,OAAAC,QAAO,MAAM,MACdA,OAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAAA,QAAO,MAAM,GAAqC;AAEtE,UAAM,OAAO,CAAC,SAAS;AACrB,YAAMC,eAAc,KAAK,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAChE,UAAIA,cAAa;AACf,eAAO,KAAK,OAAO,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,EAAE,OAAAD,QAAO,MAAM,CAAC;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,WAAS,YAAY,OAAe;AAClC,WAAO,MAAM,MAAM,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,EAC5D;AAEA,QAAM,wBAAoB,4BAAY,MAAM;AAC1C,UAAM,gBAAgB,MAAM,MAAM,UAAUD,MAAK;AACjD,UAAM,OAAO,gBAAgB,CAAC,IAAIA,KAAI;AAAA,EACxC,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,+BAAAG,QAAA,cAAC,SAAI,WAAU,WACZ,SACC,+BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,aAC3C,KACH,GAEF,+BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,aAAa,GAAG,MAAM,MAAM,MAAM;AAAA,MAClC,WAAW,GAAGC,MAAK,IACjB,MAAM,MAAM,SAAS,KACrB,8CACF;AAAA,MACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA;AAAA,EAC5C,GACA,+BAAAD,QAAA,cAAC,SAAI,WAAU,mDACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,+BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAAF,QAAO,MAAM,MACjC,+BAAAE,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAAF,QAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAETA;AAAA,IACA,YAAY,KAAK,KAChB,+BAAAE,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAET,+BAAAA,QAAA,cAAC,6CAAgB,MAAM,0CAAa,WAAWE,cAAa;AAAA,EAC9D,CACF,CACF;AAEJ;AACA,IAAMA,eAAc;AACpB,IAAMD,SAAQ;;;ACzGd,IAAAE,iBAAkB;AAEH,SAAR,YACL,MACA;AACA,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA;AAAA,IAEV,+BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,SACC,OAFL;AAAA,QAGC,MAAK;AAAA,QACL,WAAU;AAAA;AAAA,IACZ;AAAA,IACA,+BAAAA,QAAA,cAAC,UAAK,WAAU,wBAAuB;AAAA,EACzC,CACF;AAEJ;;;ACtBA,IAAAC,iBAAgC;AAIhC,IAAM,OAAO;AAAA,EACX,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AACxC;AACe,SAAR,YAA6B;AAClC,QAAM,CAAC,cAAc,eAAe,QAAI,yBAEtC,CAAC,CAAC;AACJ,QAAM,CAAC,KAAK,MAAM,QAAI,yBAAS,EAAE;AACjC,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,OAAO,EAAE,OAAO,cAAc,QAAQ,gBAAgB;AAAA;AAAA,EACxD,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK;AAAA;AAAA,EACxC,CACF;AAEJ;;;AC9BA,IAAAC,iBAAkB;AACH,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,oBACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY,eAAe,IAAI;AAAA,MACjC;AAAA,MACA,WAAW,SAAS,SAAS;AAAA;AAAA,IAE5B;AAAA,EACH,CACF;AAEJ;;;ACtBA,IAAAC,iBAAkB;AACH,SAAR,SAA0B,EAAE,UAAU,GAA2B;AACtE,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,eAC1B,+BAAAA,QAAA,cAAC,UAAK,WAAU,iCAAgC,CAClD;AAEJ;","names":["React","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input__icon","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","list","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\nexport { default as Dashboard } from \"./components/Dashboard\";\nexport { default as Badge } from \"./components/Badge\";\nexport { default as Skeleton } from \"./components/Skeleton\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" \| \"secondary\" \| \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"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)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attr.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n return options \|\| stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attr.value && autoUpdateValue(attr.value as string);\n }, [attr.value]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attr.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" \| \"success\" \| \"info\" \| \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id \|\| \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n function updateState(item: string) {\n const filtered = list.find(({ value }) => value == item);\n filtered && setSel(filtered);\n }\n\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n // value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" \| \"danger\" \| \"warning\" \| \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAElB,+BAAgC;AAChC,kCAA8B;AASf,SAAR,OAAwB,IAOV;AAPU,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAY+B,IAM1B,iBAN0B,IAM1B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,YAAY,4CAAgB;AAC/C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,GAAG,CAAC,QAAQ,cAAc,IAAI,SAAS,IAChD,WAAW,eAAe,gBAC5B;AAAA;AAAA,IAEC,cAAc,QACb,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,6BAA6B,aAAa,cAAc;AAAA;AAAA,IACrE;AAAA,IAED,YAAY,kBAAkB;AAAA,EACjC;AAEJ;;;ACrCA,IAAAC,gBAAkB;AAElB,IAAAC,4BAAgC;AAChC,IAAM,cACJ;AAEa,SAAR,UAA2B,IAW/B;AAX+B,eAChC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EATF,IAMkC,IAI7B,iBAJ6B,IAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AASA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,sBACZ,SACC,8BAAAA,QAAA,cAAC,WAAM,SAAS,UAAU,WAAU,uBACjC,KACH,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,yCACZ,QAAQ,8BAAAA,QAAA,cAAC,6CAAgB,MAAY,WAAW,aAAa,GAC9D,8BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,qBAAqB,KAAK,SAAS,IAC5C,QAAQ,cACV;AAAA;AAAA,EACF,CACF,CACF;AAEJ;;;ACpCA,IAAAC,gBAAkB;AAClB,IAAAC,+BAAwB;AACxB,IAAAC,4BAAgC;AAEjB,SAAR,OACL,MACA;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BACb,8BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,WAAU;AAAA;AAAA,EACZ,GACA,8BAAAA,QAAA,cAAC,WAAM,SAAQ,UAAS,WAAU,YAChC,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,sCAAS,WAAU,iBAAgB,CAC5D,CACF,CACF;AAEJ;;;ACrBA,IAAAC,gBAAsE;AACtE,IAAAC,4BAAgC;AAChC,IAAAC,+BAAuC;AAYxB,SAAR,aAA8B,MAA8B;AAfnE;AAgBE,QAAM,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI;AAC7C,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,EAAE;AACzC,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAwC;AAAA,IACtE,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AACD,QAAM,mBAAe,gCAAiB,OAAO;AAE7C,WAAS,WAAW,EAAE,OAAO,MAAM,GAAkC;AACnE,UAAM,gBAAgB,KAAK;AAC3B,QAAI,eAAe;AACjB,qDAAgB;AAAA,QACd,QAAQ,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,MACnC;AAAA,IACF;AACA,gBAAY,EAAE,OAAO,MAAM,CAAC;AAC5B,eAAW,EAAE;AAAA,EACf;AAEA,WAAS,gBAAgB,cAAsB;AAC7C,QAAI,cAAc;AAChB,YAAM,WAAW,iBAAiB;AAAA,QAChC,CAAC,EAAE,MAAM,MAAM,SAAS;AAAA,MAC1B;AACA,UAAI,SAAU,aAAY,QAAQ;AAAA,IACpC;AAAA,EACF;AAEA,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,WAAO,WAAW,cAAc,IAAI,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,EAAE;AAAA,EAC3E,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,WAAO,iBAAiB;AAAA,MACtB,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,+BAAU,MAAM;AACd,SAAK,SAAS,gBAAgB,KAAK,KAAe;AAAA,EACpD,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,kBACZ,KAAK,SACJ,8BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,KAAK,aAChD,KAAK,KACR,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,8BAAAA,QAAA;AAAA,IAAC;AAAA,oDACK,OACC,KAAK,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,IAFrD;AAAA,MAGC,QAAO,UAAK,UAAL,YAAc,SAAS;AAAA,MAC9B,MAAK;AAAA;AAAA,EACP,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,MAAM,GAAG,KAAK,IAAI;AAAA,MAClB,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAW,GAAG,KAAK,IACjB,SAAS,SAAS,8CACpB;AAAA,MACA,aAAa,SAAS,QAAQ,SAAS,QAAQ;AAAA;AAAA,EACjD,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAU,0BACZ,gBAAgB,UAAU,KAAK,WAAW,MACzC,8BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,gBAAgB,IAAI,CAAC,EAAE,OAAO,MAAM,MACnC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,SAAS,SAAS,SACjB,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,4CAAe,WAAWC,cAAa,CAChE,CACF;AAEJ;AAEA,aAAa,WAAW;AAExB,SAAS,cACP,OACA,QACAC,OACA;AACA,QAAM,MAAM,SAAS,cAAc,UAAU,MAAM,IAAI;AACvD,MAAI,QAAQ,GAAG,KAAK;AACpB,QAAM,WAAWA,MAAK,KAAK,CAAC,SAAS,KAAK,SAAS,KAAK;AACxD,QAAM,KAAK,SAAS,cAAc,UAAU,MAAM,YAAY;AAC9D,2BAAI,aAAa,eAAe,GAAG,qCAAU,KAAK;AACpD;AAEA,IAAMD,eAAc;AACpB,IAAM,QAAQ;;;AChId,IAAAE,gBAAkB;AAQH,SAAR,QAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAsB;AACpB,WAAS,YAAY;AACnB,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,cACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,UAAQ,QAAS,GAChC,8BAAAA,QAAA,cAAC,UAAK,WAAW,gBAAgB,UAAU,CAAC,MAAK,IAAK,CACxD;AAEJ;AAEA,IAAM,MACJ;AACF,IAAM,SACJ;AACF,IAAM,QACJ;AACF,IAAM,OACJ;;;ACrCF,IAAAC,gBAAkB;AAOH,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AACF,GAMI;AACF,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,qBACZ,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,MACzB,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,gBACT,MAAM,UAAU,QACZ,yBACA,gCACN;AAAA,MACA,SAAS,MAAM,MAAM,UAAU,KAAK;AAAA;AAAA,IAEnC;AAAA,EACH,CACD,CACH;AAEJ;;;AClCA,IAAAC,gBAAkB;AAOH,SAAR,KAAsB,EAAE,UAAU,UAAU,GAAmB;AACpE,SAAO,8BAAAC,QAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,MAAK,QAAS;AACxD;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAGM;AACJ,SACE,8BAAAA,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,8CACzB,QACH;AAEJ;AACA,KAAK,SAAS;;;ACxBd,IAAAC,gBAAkB;AAClB,IAAAC,4BAAgC;AAChC,IAAAC,+BAKO;AAUQ,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAoB;AAClB,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,2BAC1B,8BAAAA,QAAA,cAAC,SAAI,WAAU,iBACb,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,GACA,8BAAAA,QAAA,cAAC,aACC,8BAAAA,QAAA,cAAC,OAAE,WAAU,kBAAgB,KAAM,GACnC,8BAAAA,QAAA,cAAC,OAAE,WAAU,wBAAsB,WAAY,CACjD,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,CACF,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE;AAAA;AAAA,EACrC,CACH;AAEJ;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,SAAS;AAAA,MACrC,OAAO,EAAE,YAAY,eAAe,IAAI,UAAU,SAAS,IAAI;AAAA;AAAA,IAE/D,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,QAAQ,IAAI;AAAA,QAClB,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,IACjC;AAAA,IACA,8BAAAA,QAAA,cAAC,WAAG,IAAK;AAAA,EACX;AAEJ;AAEA,MAAM,SAAS;AAEf,SAAS,SAAS,MAAc;AAC9B,SAAO,eAAe,IAAI;AAC5B;AAEA,SAAS,QAAQ,MAAc;AAC7B,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAEA,SAAO,QAAQ,IAAI;AACrB;;;ACxFA,IAAAC,gBAAkB;AAClB,IAAAC,+BAA6B;AAC7B,IAAAC,4BAAgC;AASjB,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAClC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,cAAc,SAAS,MACrC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAU;AAAA;AAAA,EACZ,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,2CAAc,WAAU,oBAAmB,GAClE,8BAAAA,QAAA,cAAC,WAAM,SAAS,MAAM,WAAU,uBAC7B,KACH,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAU,sBACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BAAyB,QAAS,CACnD,CACF;AAEJ;;;ACnCA,IAAAC,iBAA+D;AAC/D,IAAAC,4BAAgC;AAChC,IAAAC,+BAAqC;AActB,SAAR,YAA6B;AAAA,EAClC,MAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,yBAAS,EAAE;AACzC,QAAM,mBAAe,iCAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAOA,MAAK;AAAA,MACV,CAAC,EAAE,OAAAC,QAAO,MAAM,MACdA,OAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAAA,QAAO,MAAM,GAAqC;AAEtE,UAAM,OAAO,CAAC,SAAS;AACrB,YAAMC,eAAc,KAAK,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAChE,UAAIA,cAAa;AACf,eAAO,KAAK,OAAO,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,EAAE,OAAAD,QAAO,MAAM,CAAC;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,WAAS,YAAY,OAAe;AAClC,WAAO,MAAM,MAAM,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,EAC5D;AAEA,QAAM,wBAAoB,4BAAY,MAAM;AAC1C,UAAM,gBAAgB,MAAM,MAAM,UAAUD,MAAK;AACjD,UAAM,OAAO,gBAAgB,CAAC,IAAIA,KAAI;AAAA,EACxC,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,+BAAAG,QAAA,cAAC,SAAI,WAAU,WACZ,SACC,+BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,aAC3C,KACH,GAEF,+BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,aAAa,GAAG,MAAM,MAAM,MAAM;AAAA,MAClC,WAAW,GAAGC,MAAK,IACjB,MAAM,MAAM,SAAS,KACrB,8CACF;AAAA,MACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA;AAAA,EAC5C,GACA,+BAAAD,QAAA,cAAC,SAAI,WAAU,mDACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,+BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAAF,QAAO,MAAM,MACjC,+BAAAE,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAAF,QAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAETA;AAAA,IACA,YAAY,KAAK,KAChB,+BAAAE,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAET,+BAAAA,QAAA,cAAC,6CAAgB,MAAM,0CAAa,WAAWE,cAAa;AAAA,EAC9D,CACF,CACF;AAEJ;AACA,IAAMA,eAAc;AACpB,IAAMD,SAAQ;;;ACzGd,IAAAE,iBAAkB;AAEH,SAAR,YACL,MACA;AACA,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,GAAG,KAAK,MAAM,cAAc;AAAA,MACrC,WAAU;AAAA;AAAA,IAEV,+BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,SACC,OAFL;AAAA,QAGC,MAAK;AAAA,QACL,WAAU;AAAA;AAAA,IACZ;AAAA,IACA,+BAAAA,QAAA,cAAC,UAAK,WAAU,wBAAuB;AAAA,EACzC,CACF;AAEJ;;;ACtBA,IAAAC,iBAAgC;AAIhC,IAAM,OAAO;AAAA,EACX,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AACxC;AACe,SAAR,YAA6B;AAClC,QAAM,CAAC,cAAc,eAAe,QAAI,yBAEtC,CAAC,CAAC;AACJ,QAAM,CAAC,KAAK,MAAM,QAAI,yBAAS,EAAE,OAAO,IAAI,OAAO,GAAG,CAAC;AAEvD,WAAS,YAAY,MAAc;AACjC,UAAM,WAAW,KAAK,KAAK,CAAC,EAAE,MAAM,MAAM,SAAS,IAAI;AACvD,gBAAY,OAAO,QAAQ;AAAA,EAC7B;AAEA,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,OAAO,EAAE,OAAO,cAAc,QAAQ,gBAAgB;AAAA;AAAA,EACxD,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAS;AAAA;AAAA,EAGX,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,aAAa,SAAS,WAAW,YAAY,IAAI;AAAA;AAAA,IACjE;AAAA,IACS,IAAI;AAAA,EACd,CACF;AAEJ;;;ACzCA,IAAAC,iBAAkB;AACH,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,oBACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY,eAAe,IAAI;AAAA,MACjC;AAAA,MACA,WAAW,SAAS,SAAS;AAAA;AAAA,IAE5B;AAAA,EACH,CACF;AAEJ;;;ACtBA,IAAAC,iBAAkB;AACH,SAAR,SAA0B,EAAE,UAAU,GAA2B;AACtE,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,eAC1B,+BAAAA,QAAA,cAAC,UAAK,WAAU,iCAAgC,CAClD;AAEJ;","names":["React","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","list","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React"]}

package/dist/index.mjs CHANGED Viewed

@@ -58,7 +58,7 @@ function Button(_a) {
       FontAwesomeIcon,
       {
         icon: buttonIcon,
-        className: `text-[1.1rem] ${isLoading && "animate-spin"}`
+        className: `text-[1.2rem] mr-[0.3rem] ${isLoading && "animate-spin"}`
       }
     ),
     isLoading ? "Memproses ..." : label
@@ -68,7 +68,7 @@ function Button(_a) {
 // src/components/TextInput.tsx
 import React2 from "react";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-var input__icon = "w-[2rem] p-[0.8rem] text-[1.4rem] 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,
@@ -82,7 +82,7 @@ function TextInput(_a) {
   return /* @__PURE__ */ React2.createElement("div", { className: "group ... w-full" }, label && /* @__PURE__ */ React2.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ React2.createElement("div", { className: "text-input__wrapper overflow-hidden" }, icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }), /* @__PURE__ */ React2.createElement(
     "input",
     __spreadProps(__spreadValues({}, attr), {
-      className: `text-input w-full ${attr.className} ${icon && "!pl-0"}`
+      className: `text-input w-full ${attr.className} ${icon && "!pl-[0.3rem]"}`
     })
   )));
 }
@@ -103,21 +103,36 @@ function Slider(attr) {
 }
 // src/components/SingleSelect.tsx
-import React4, { useDeferredValue, useMemo, useState } from "react";
+import React4, { useDeferredValue, useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
 import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 function SingleSelect(attr) {
   var _a;
-  const [keyword, setKeyword] = useState("");
   const { options = [], stringOptions = [] } = attr;
+  const [keyword, setKeyword] = useState("");
+  const [selected, setSelected] = useState({
+    label: "",
+    value: ""
+  });
   const inputKeyword = useDeferredValue(keyword);
-  function selectItem({ value }) {
-    const trigerManual = attr.onChange;
-    trigerManual == null ? void 0 : trigerManual({
-      target: { value, name: attr.name }
-    });
+  function selectItem({ label, value }) {
+    const triggerManual = attr.onChange;
+    if (triggerManual) {
+      triggerManual == null ? void 0 : triggerManual({
+        target: { value, name: attr.name }
+      });
+    }
+    setSelected({ label, value });
     setKeyword("");
   }
+  function autoUpdateValue(updatedValue) {
+    if (updatedValue) {
+      const filtered = availableOptions.find(
+        ({ value }) => value == updatedValue
+      );
+      if (filtered) setSelected(filtered);
+    }
+  }
   const availableOptions = useMemo(() => {
     return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
   }, [options, stringOptions]);
@@ -126,12 +141,9 @@ function SingleSelect(attr) {
       ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }, [inputKeyword, availableOptions]);
-  const selected = useMemo(() => {
-    return availableOptions.find(({ value }) => value === attr.value) || {
-      label: "",
-      value: ""
-    };
-  }, [attr.value, availableOptions]);
+  useEffect(() => {
+    attr.value && autoUpdateValue(attr.value);
+  }, [attr.value]);
   return /* @__PURE__ */ React4.createElement("div", { className: "w-full group" }, attr.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ React4.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React4.createElement(
     "input",
     __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
@@ -143,6 +155,7 @@ function SingleSelect(attr) {
     {
       value: keyword,
       type: "search",
+      name: `${attr.name}-keyword`,
       onChange: (e) => setKeyword(e.target.value),
       className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
       placeholder: selected.value ? selected.label : "Cari opsi ..."
@@ -165,6 +178,14 @@ function SingleSelect(attr) {
     )
   ))), /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, className: input__icon2 })));
 }
+SingleSelect.autoFill = autoFillInput;
+function autoFillInput(value, elName, list2) {
+  const inp = document.querySelector(`[name="${elName}"]`);
+  inp.value = `${value}`;
+  const filtered = list2.find((item) => item.value == value);
+  const el = document.querySelector(`[name="${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 input = "text-input peer ... w-full";
@@ -384,7 +405,7 @@ function MultiSelect({
     /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 })
   )));
 }
-var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+var input__icon3 = "pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]";
 var input2 = "text-input peer ... w-full";
 // src/components/ThemeToggle.tsx
@@ -393,7 +414,7 @@ function ThemeToggle(attr) {
   return /* @__PURE__ */ React11.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ React11.createElement(
     "label",
     {
-      htmlFor: "theme-toggle",
+      htmlFor: `${attr.id || "theme-toggle"}`,
       className: "slider__wrapper slider-theme slider-theme-light"
     },
     /* @__PURE__ */ React11.createElement(
@@ -418,7 +439,11 @@ var list = [
 ];
 function Dashboard() {
   const [selectedItem, setSelectedItem] = useState3([]);
-  const [sel, setSel] = useState3("");
+  const [sel, setSel] = useState3({ label: "", value: "" });
+  function updateState(item) {
+    const filtered = list.find(({ value }) => value == item);
+    filtered && setSel(filtered);
+  }
   return /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-[2rem]" }, /* @__PURE__ */ React12.createElement(
     MultiSelect,
     {
@@ -431,10 +456,15 @@ function Dashboard() {
     {
       label: "Single Select",
       name: "newinput",
-      options: list,
-      value: sel,
-      onChange: (e) => setSel(e.target.value)
+      options: list
     }
+  ), /* @__PURE__ */ React12.createElement(
+    "button",
+    {
+      onClick: () => SingleSelect.autoFill("option2", "newinput", list)
+    },
+    "Update ",
+    sel.value
   ));
 }

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" \| \"secondary\" \| \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.1rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.8rem] text-[1.4rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${icon && \"!pl-0\"}`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const { options = [], stringOptions = [] } = attr;\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ value }: { label: string; value: string }) {\n const trigerManual = attr.onChange;\n trigerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n setKeyword(\"\");\n }\n\n const availableOptions = useMemo(() => {\n return options \|\| stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n const selected = useMemo(() => {\n return (\n availableOptions.find(({ value }) => value === attr.value) \|\| {\n label: \"\",\n value: \"\",\n }\n );\n }, [attr.value, availableOptions]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" \| \"success\" \| \"info\" \| \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor=\"theme-toggle\"\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState(\"\");\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n value={sel}\n onChange={(e) => setSel(e.target.value)}\n />\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" \| \"danger\" \| \"warning\" \| \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n"],"mappings":"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","names":["React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","FontAwesomeIcon","faCheck","input__icon","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useState","FontAwesomeIcon","faCheck","list","label","isItemExist","input","input__icon","React","React","React","useState","useState","React","React","React"]}
1	+ {"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" \| \"secondary\" \| \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"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)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attr.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n return options \|\| stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attr.value && autoUpdateValue(attr.value as string);\n }, [attr.value]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attr.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" \| \"bottom\" \| \"right\" \| \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" \| \"success\" \| \"info\" \| \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) \|\|\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id \|\| \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n function updateState(item: string) {\n const filtered = list.find(({ value }) => value == item);\n filtered && setSel(filtered);\n }\n\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n // value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" \| \"danger\" \| \"warning\" \| \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n"],"mappings":"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","names":["React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","FontAwesomeIcon","faCheck","input__icon","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useState","FontAwesomeIcon","faCheck","list","label","isItemExist","input","input__icon","React","React","React","useState","useState","React","React","React"]}

package/dist/styles.css CHANGED Viewed

@@ -226,6 +226,12 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-\[0\.3rem\] {
+    margin-right: 0.3rem;
+  }
+  .mr-\[0\.5rem\] {
+    margin-right: 0.5rem;
+  }
   .ml-\[5rem\] {
     margin-left: 5rem;
   }
@@ -328,9 +334,18 @@
   .p-\[0\.8rem\] {
     padding: 0.8rem;
   }
+  .p-\[0\.9rem\] {
+    padding: 0.9rem;
+  }
   .p-\[0\.75rem\] {
     padding: 0.75rem;
   }
+  .px-\[0\.7rem\] {
+    padding-inline: 0.7rem;
+  }
+  .px-\[0\.8rem\] {
+    padding-inline: 0.8rem;
+  }
   .px-\[1rem\] {
     padding-inline: 1rem;
   }
@@ -343,6 +358,12 @@
   .\!pl-0 {
     padding-left: calc(var(--spacing) * 0) !important;
   }
+  .\!pl-\[0\.3rem\] {
+    padding-left: 0.3rem !important;
+  }
+  .\!pl-\[0\.5rem\] {
+    padding-left: 0.5rem !important;
+  }
   .text-\[0\.7rem\] {
     font-size: 0.7rem;
   }
@@ -352,6 +373,9 @@
   .text-\[1\.2rem\] {
     font-size: 1.2rem;
   }
+  .text-\[1\.3rem\] {
+    font-size: 1.3rem;
+  }
   .text-\[1\.4rem\] {
     font-size: 1.4rem;
   }

package/package.json CHANGED Viewed

@@ -34,7 +34,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "name": "@safestrong/ppa-component-library",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Collection of reusable components for any PPA web applications",
   "main": "dist/index.cjs",
   "module": "dist/index.js",