@safestrong/ppa-component-library 1.3.3 → 1.3.5

package/dist/index.d.mts

@@ -20,10 +20,11 @@ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElemen
 type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelHtml?: string;
-    options: {
+    options?: {
         label: string;
         value: string;
     }[];
+    stringOptions?: string[];
 };
 declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
 
@@ -86,13 +87,16 @@ type Option = {
     value: string;
     label: string;
 };
-declare function MultiSelect({ list, state, }: Readonly<{
+type MultiSelect = {
+    label?: string;
+    labelHtml?: string;
     list: Option[];
     state: {
         value: Option[];
         select: (newVal: Option[]) => void;
     };
-}>): React.JSX.Element;
+};
+declare function MultiSelect({ list, state, label, labelHtml, }: Readonly<MultiSelect>): React.JSX.Element;
 
 declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
 

package/dist/index.d.ts

@@ -20,10 +20,11 @@ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElemen
 type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelHtml?: string;
-    options: {
+    options?: {
         label: string;
         value: string;
     }[];
+    stringOptions?: string[];
 };
 declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
 
@@ -86,13 +87,16 @@ type Option = {
     value: string;
     label: string;
 };
-declare function MultiSelect({ list, state, }: Readonly<{
+type MultiSelect = {
+    label?: string;
+    labelHtml?: string;
     list: Option[];
     state: {
         value: Option[];
         select: (newVal: Option[]) => void;
     };
-}>): React.JSX.Element;
+};
+declare function MultiSelect({ list, state, label, labelHtml, }: Readonly<MultiSelect>): React.JSX.Element;
 
 declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
 

package/dist/index.js

@@ -125,7 +125,7 @@ function TextInput(_a) {
     "labelFor",
     "icon"
   ]);
-  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" }, icon && /* @__PURE__ */ import_react2.default.createElement(import_react_fontawesome2.FontAwesomeIcon, { icon, className: input__icon }), /* @__PURE__ */ import_react2.default.createElement(
+  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"}`
@@ -154,30 +154,30 @@ 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 [selected, setSelected] = (0, import_react4.useState)({ label: "", value: "" });
   const [keyword, setKeyword] = (0, import_react4.useState)("");
+  const { options = [], stringOptions = [] } = attr;
   const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
-  function getFiltered() {
-    return attr.options.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
-    );
-  }
-  function selectItem({ label, value }) {
-    setSelected({ label, value });
+  function selectItem({ value }) {
+    const trigerManual = attr.onChange;
+    trigerManual == null ? void 0 : trigerManual({
+      target: { value, name: attr.name }
+    });
     setKeyword("");
   }
-  (0, import_react4.useEffect)(() => {
-    if (attr.value) {
-      const filtered = attr.options.find((option) => option.value == attr.value);
-      if (filtered) setSelected(filtered);
-    }
-  }, [attr.value, attr.options]);
-  (0, import_react4.useEffect)(() => {
-    const triggerManual = attr.onChange;
-    triggerManual && triggerManual({
-      target: { value: selected.value, name: attr.name }
-    });
-  }, [selected]);
+  const availableOptions = (0, import_react4.useMemo)(() => {
+    return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
+  }, [options, stringOptions]);
+  const filteredOptions = (0, import_react4.useMemo)(() => {
+    return availableOptions.filter(
+      ({ 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]);
   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 } : {}), {
@@ -190,10 +190,10 @@ function SingleSelect(attr) {
       value: keyword,
       type: "search",
       onChange: (e) => setKeyword(e.target.value),
-      className: "text-input peer ... w-full",
+      className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
       placeholder: selected.value ? selected.label : "Cari opsi ..."
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "button",
@@ -212,6 +212,7 @@ function SingleSelect(attr) {
   ))), /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, className: input__icon2 })));
 }
 var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+var input = "text-input peer ... w-full";
 
 // src/components/Tooltip.tsx
 var import_react5 = __toESM(require("react"));
@@ -362,22 +363,24 @@ var import_react_fontawesome7 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons6 = require("@fortawesome/free-solid-svg-icons");
 function MultiSelect({
   list: list2,
-  state
+  state,
+  label,
+  labelHtml
 }) {
   const [keyword, setKeyword] = (0, import_react10.useState)("");
   const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
   function getFiltered() {
     return list2.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }
-  function selectItem({ label, value }) {
+  function selectItem({ label: label2, value }) {
     state.select((prev) => {
       const isItemExist2 = prev.find((item) => item.value == value);
       if (isItemExist2) {
         return prev.filter((item) => item.value != value);
       }
-      return [...prev, { label, value }];
+      return [...prev, { label: label2, value }];
     });
   }
   function isItemExist(value) {
@@ -387,24 +390,24 @@ function MultiSelect({
     const isAllSelected = state.value.length == list2.length;
     state.select(isAllSelected ? [] : list2);
   }, [state.value]);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "group" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "group" }, label && /* @__PURE__ */ import_react10.default.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
     "input",
     {
       value: keyword,
       type: "search",
       placeholder: `${state.value.length} Dipilih`,
-      className: "text-input peer ...",
+      className: `${input2} ${state.value.length > 0 && "placeholder:text-[var(--color-text-primary)]"}`,
       onChange: (e) => setKeyword(e.target.value)
     }
-  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react10.default.createElement(
+  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       type: "button",
-      onClick: () => selectItem({ label, value }),
+      onClick: () => selectItem({ label: label2, value }),
       key: value,
       className: "select-item"
     },
-    label,
+    label2,
     isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
       import_react_fontawesome7.FontAwesomeIcon,
       {
@@ -412,9 +415,18 @@ function MultiSelect({
         className: "text-[var(--color-primary)]"
       }
     )
-  ))), /* @__PURE__ */ import_react10.default.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ import_react10.default.createElement(import_react_fontawesome7.FontAwesomeIcon, { icon: import_free_solid_svg_icons6.faListCheck, className: input__icon3 }))));
+  ))), /* @__PURE__ */ import_react10.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "cursor-pointer",
+      onClick: selectUnSelectAll
+    },
+    /* @__PURE__ */ import_react10.default.createElement(import_react_fontawesome7.FontAwesomeIcon, { icon: import_free_solid_svg_icons6.faListCheck, className: input__icon3 })
+  )));
 }
 var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+var input2 = "text-input peer ... w-full";
 
 // src/components/ThemeToggle.tsx
 var import_react11 = __toESM(require("react"));
@@ -427,8 +439,9 @@ function ThemeToggle(attr) {
     },
     /* @__PURE__ */ import_react11.default.createElement(
       "input",
-      __spreadProps(__spreadValues({}, attr), {
-        id: "theme-toggle",
+      __spreadProps(__spreadValues({
+        id: "theme-toggle"
+      }, attr), {
         type: "checkbox",
         className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
       })
@@ -450,18 +463,20 @@ function Dashboard() {
   return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-[2rem]" }, /* @__PURE__ */ import_react12.default.createElement(
     MultiSelect,
     {
+      label: "Multi Select",
       list,
       state: { value: selectedItem, select: setSelectedItem }
     }
   ), /* @__PURE__ */ import_react12.default.createElement(
     SingleSelect,
     {
+      label: "Single Select",
       name: "newinput",
       options: list,
       value: sel,
-      onChange: () => false
+      onChange: (e) => setSel(e.target.value)
     }
-  ), sel);
+  ));
 }
 
 // src/components/Badge.tsx

package/dist/index.js.map

@@ -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\">\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, useEffect, 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};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const [selected, setSelected] = useState({ label: \"\", value: \"\" });\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  function getFiltered() {\n    return attr.options.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    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  useEffect(() => {\n    if (attr.value) {\n      const filtered = attr.options.find(option => option.value == attr.value);\n      if (filtered) setSelected(filtered);\n    }\n  }, [attr.value, attr.options]);\n\n  useEffect(() => {\n    const triggerManual = attr.onChange;\n    triggerManual &&\n      triggerManual({\n        target: { value: selected.value, name: attr.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n  }, [selected]);\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=\"text-input peer ... w-full\"\n          placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n        />\n        <div className=\"select-item__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              {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)]\";\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\nexport default function MultiSelect({\n  list,\n  state,\n}: Readonly<{\n  list: Option[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n}>) {\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      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className=\"text-input peer ...\"\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 className=\"cursor-pointer\" onClick={selectUnSelectAll}>\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)]\";\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          {...attr}\n          id=\"theme-toggle\"\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        list={list}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        name=\"newinput\"\n        options={list}\n        value={sel}\n        onChange={() => false}\n      />\n      {sel}\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","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","isItemExist","React","input__icon","import_react","React","import_react","React","import_react","React","import_react","React"]}
+{"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":"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","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"]}

package/dist/index.mjs

@@ -79,7 +79,7 @@ function TextInput(_a) {
     "labelFor",
     "icon"
   ]);
-  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" }, icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }), /* @__PURE__ */ React2.createElement(
+  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"}`
@@ -103,35 +103,35 @@ function Slider(attr) {
 }
 
 // src/components/SingleSelect.tsx
-import React4, { useDeferredValue, useEffect, useState } from "react";
+import React4, { useDeferredValue, 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 [selected, setSelected] = useState({ label: "", value: "" });
   const [keyword, setKeyword] = useState("");
+  const { options = [], stringOptions = [] } = attr;
   const inputKeyword = useDeferredValue(keyword);
-  function getFiltered() {
-    return attr.options.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
-    );
-  }
-  function selectItem({ label, value }) {
-    setSelected({ label, value });
+  function selectItem({ value }) {
+    const trigerManual = attr.onChange;
+    trigerManual == null ? void 0 : trigerManual({
+      target: { value, name: attr.name }
+    });
     setKeyword("");
   }
-  useEffect(() => {
-    if (attr.value) {
-      const filtered = attr.options.find((option) => option.value == attr.value);
-      if (filtered) setSelected(filtered);
-    }
-  }, [attr.value, attr.options]);
-  useEffect(() => {
-    const triggerManual = attr.onChange;
-    triggerManual && triggerManual({
-      target: { value: selected.value, name: attr.name }
-    });
-  }, [selected]);
+  const availableOptions = useMemo(() => {
+    return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
+  }, [options, stringOptions]);
+  const filteredOptions = useMemo(() => {
+    return availableOptions.filter(
+      ({ 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]);
   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 } : {}), {
@@ -144,10 +144,10 @@ function SingleSelect(attr) {
       value: keyword,
       type: "search",
       onChange: (e) => setKeyword(e.target.value),
-      className: "text-input peer ... w-full",
+      className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
       placeholder: selected.value ? selected.label : "Cari opsi ..."
     }
-  ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ React4.createElement(
     "button",
     {
       type: "button",
@@ -166,6 +166,7 @@ function SingleSelect(attr) {
   ))), /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, className: input__icon2 })));
 }
 var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+var input = "text-input peer ... w-full";
 
 // src/components/Tooltip.tsx
 import React5 from "react";
@@ -321,22 +322,24 @@ import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawes
 import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
 function MultiSelect({
   list: list2,
-  state
+  state,
+  label,
+  labelHtml
 }) {
   const [keyword, setKeyword] = useState2("");
   const inputKeyword = useDeferredValue2(keyword);
   function getFiltered() {
     return list2.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }
-  function selectItem({ label, value }) {
+  function selectItem({ label: label2, value }) {
     state.select((prev) => {
       const isItemExist2 = prev.find((item) => item.value == value);
       if (isItemExist2) {
         return prev.filter((item) => item.value != value);
       }
-      return [...prev, { label, value }];
+      return [...prev, { label: label2, value }];
     });
   }
   function isItemExist(value) {
@@ -346,24 +349,24 @@ function MultiSelect({
     const isAllSelected = state.value.length == list2.length;
     state.select(isAllSelected ? [] : list2);
   }, [state.value]);
-  return /* @__PURE__ */ React10.createElement("div", { className: "group" }, /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "group" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
     "input",
     {
       value: keyword,
       type: "search",
       placeholder: `${state.value.length} Dipilih`,
-      className: "text-input peer ...",
+      className: `${input2} ${state.value.length > 0 && "placeholder:text-[var(--color-text-primary)]"}`,
       onChange: (e) => setKeyword(e.target.value)
     }
-  ), /* @__PURE__ */ React10.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React10.createElement(
+  ), /* @__PURE__ */ React10.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ React10.createElement(
     "button",
     {
       type: "button",
-      onClick: () => selectItem({ label, value }),
+      onClick: () => selectItem({ label: label2, value }),
       key: value,
       className: "select-item"
     },
-    label,
+    label2,
     isItemExist(value) && /* @__PURE__ */ React10.createElement(
       FontAwesomeIcon7,
       {
@@ -371,9 +374,18 @@ function MultiSelect({
         className: "text-[var(--color-primary)]"
       }
     )
-  ))), /* @__PURE__ */ React10.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 }))));
+  ))), /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      type: "button",
+      className: "cursor-pointer",
+      onClick: selectUnSelectAll
+    },
+    /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 })
+  )));
 }
 var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+var input2 = "text-input peer ... w-full";
 
 // src/components/ThemeToggle.tsx
 import React11 from "react";
@@ -386,8 +398,9 @@ function ThemeToggle(attr) {
     },
     /* @__PURE__ */ React11.createElement(
       "input",
-      __spreadProps(__spreadValues({}, attr), {
-        id: "theme-toggle",
+      __spreadProps(__spreadValues({
+        id: "theme-toggle"
+      }, attr), {
         type: "checkbox",
         className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
       })
@@ -409,18 +422,20 @@ function Dashboard() {
   return /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-[2rem]" }, /* @__PURE__ */ React12.createElement(
     MultiSelect,
     {
+      label: "Multi Select",
       list,
       state: { value: selectedItem, select: setSelectedItem }
     }
   ), /* @__PURE__ */ React12.createElement(
     SingleSelect,
     {
+      label: "Single Select",
       name: "newinput",
       options: list,
       value: sel,
-      onChange: () => false
+      onChange: (e) => setSel(e.target.value)
     }
-  ), sel);
+  ));
 }
 
 // src/components/Badge.tsx

package/dist/index.mjs.map

@@ -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\">\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, useEffect, 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};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const [selected, setSelected] = useState({ label: \"\", value: \"\" });\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  function getFiltered() {\n    return attr.options.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    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  useEffect(() => {\n    if (attr.value) {\n      const filtered = attr.options.find(option => option.value == attr.value);\n      if (filtered) setSelected(filtered);\n    }\n  }, [attr.value, attr.options]);\n\n  useEffect(() => {\n    const triggerManual = attr.onChange;\n    triggerManual &&\n      triggerManual({\n        target: { value: selected.value, name: attr.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n  }, [selected]);\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=\"text-input peer ... w-full\"\n          placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n        />\n        <div className=\"select-item__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              {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)]\";\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\nexport default function MultiSelect({\n  list,\n  state,\n}: Readonly<{\n  list: Option[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n}>) {\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      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className=\"text-input peer ...\"\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 className=\"cursor-pointer\" onClick={selectUnSelectAll}>\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)]\";\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          {...attr}\n          id=\"theme-toggle\"\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        list={list}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        name=\"newinput\"\n        options={list}\n        value={sel}\n        onChange={() => false}\n      />\n      {sel}\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","isItemExist","input__icon","React","React","React","useState","useState","React","React","React"]}
+{"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"]}

package/dist/styles.css

@@ -305,6 +305,9 @@
   .gap-\[3rem\] {
     gap: 3rem;
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -373,6 +376,11 @@
       color: var(--color-primary);
     }
   }
+  .placeholder\:text-\[var\(--color-text-primary\)\] {
+    &::placeholder {
+      color: var(--color-text-primary);
+    }
+  }
   .after\:top-\[-0\.4rem\] {
     &::after {
       content: var(--tw-content);
@@ -444,7 +452,7 @@ html {
   --color-surface-hover: #fafafa;
   --color-primary-dark: #046c9d;
   --color-primary-soft: #e6f8ffda;
-  --color-text-primary: #343c42;
+  --color-text-primary: #090b0c;
   --color-text-secondary: #50565b;
   --color-background-icon: #fbfbfb;
   --color-icon-input: #a9b0b7;
@@ -549,6 +557,7 @@ html {
     padding: 0.89rem;
     --tw-leading: 1.2;
     line-height: 1.2;
+    color: var(--color-text-primary);
     &:focus {
       --tw-outline-style: none;
       outline-style: none;
@@ -797,7 +806,7 @@ html {
     align-items: center;
     gap: 0.9rem;
     border-radius: 0.4rem;
-    padding: 0.9rem;
+    padding: 1rem;
     --tw-leading: 1;
     line-height: 1;
   }

package/package.json

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

package/readme.md

@@ -93,6 +93,7 @@ Use component in your page or your own component <br>
 | `label`     | `string`                         | ❌ No    | —       | Additional label                   |
 | `labelHtml` | `string`                         | ❌ No    | -       | Label (if any) `htmlFor` attribute |
 | `options`   | `{label:string, value:string}[]` | ❌ No    | -       | List Option                        |
+| `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |
 
 <hr>