@safestrong/ppa-component-library 1.1.2 → 1.2.0

package/dist/index.d.mts

@@ -76,7 +76,7 @@ declare namespace Toast {
 type Expandable = {
     children: React.ReactNode;
     title: string;
-    className: string;
+    className?: string;
     isOpen?: boolean;
 };
 declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
@@ -93,6 +93,6 @@ declare function MultiSelect({ list, state, }: Readonly<{
     };
 }>): React.JSX.Element;
 
-declare function Dashboard(): React.JSX.Element;
+declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
 
-export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };
+export { Button, Card, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.d.ts

@@ -76,7 +76,7 @@ declare namespace Toast {
 type Expandable = {
     children: React.ReactNode;
     title: string;
-    className: string;
+    className?: string;
     isOpen?: boolean;
 };
 declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
@@ -93,6 +93,6 @@ declare function MultiSelect({ list, state, }: Readonly<{
     };
 }>): React.JSX.Element;
 
-declare function Dashboard(): React.JSX.Element;
+declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
 
-export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };
+export { Button, Card, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.js

@@ -61,13 +61,13 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
-  Dashboard: () => Dashboard,
   Expandable: () => Expandable,
   MultiSelect: () => MultiSelect,
   NavTabClient: () => NavTabClient,
   SingleSelect: () => SingleSelect,
   Slider: () => Slider,
   TextInput: () => TextInput,
+  ThemeToggle: () => ThemeToggle,
   Toast: () => Toast,
   Tooltip: () => Tooltip
 });
@@ -75,8 +75,8 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/Button.tsx
 var import_react = __toESM(require("react"));
-var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
 function Button(_a) {
   var _b = _a, {
     label,
@@ -95,7 +95,7 @@ function Button(_a) {
   return /* @__PURE__ */ import_react.default.createElement(
     "button",
     __spreadProps(__spreadValues({}, rest), {
-      className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
+      className: `${!icon && "py-[0.85rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
     }),
     buttonIcon && icon && /* @__PURE__ */ import_react.default.createElement(
       import_react_fontawesome.FontAwesomeIcon,
@@ -111,7 +111,7 @@ function Button(_a) {
 // src/components/TextInput.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
-var input__icon = "px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]";
+var input__icon = "px-[0.85rem] text-[1.1rem] text-[var(--color-icon-input)]";
 function TextInput(_a) {
   var _b = _a, {
     label,
@@ -122,10 +122,10 @@ function TextInput(_a) {
     "labelFor",
     "icon"
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "group ..." }, 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" }, 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 ${attr.className} ${icon && "!pl-0"}`
+      className: `text-input w-full ${attr.className} ${icon && "!pl-0"}`
     })
   )));
 }
@@ -135,14 +135,14 @@ var import_react3 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 function Slider(attr) {
-  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     __spreadProps(__spreadValues({}, attr), {
       id: "slider",
       type: "checkbox",
       className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
     })
-  ), /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ import_react3.default.createElement(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faCheck, className: "text-[0.7rem]" })));
+  ), /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ import_react3.default.createElement(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faCheck, className: "text-[0.7rem]" }))));
 }
 
 // src/components/SingleSelect.tsx
@@ -163,7 +163,7 @@ function SingleSelect(attr) {
     setSelected({ label, value });
     setKeyword("");
   }
-  return /* @__PURE__ */ import_react4.default.createElement("div", null, 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(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full" }, 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 } : {}), {
       value: (_a = attr.value) != null ? _a : selected.value,
@@ -175,7 +175,7 @@ function SingleSelect(attr) {
       value: keyword,
       type: "search",
       onChange: (e) => setKeyword(e.target.value),
-      className: "text-input peer ...",
+      className: "text-input peer ... w-full",
       placeholder: selected.value ? selected.label : "Cari opsi ..."
     }, attr)
   ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
@@ -202,7 +202,7 @@ var import_react5 = __toESM(require("react"));
 function Tooltip({
   children,
   text,
-  position
+  position = "top"
 }) {
   function getAccent() {
     const mapping = {
@@ -230,7 +230,7 @@ function NavTabClient({
     "button",
     {
       key: value,
-      className: `navtab__item ${state.active == value && "navtab__item__active"}`,
+      className: `navtab__item ${state.active == value ? "navtab__item__active" : "hover:bg-[var(--color-border)]"}`,
       onClick: () => state.setActive(value)
     },
     label
@@ -257,7 +257,7 @@ var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
 function Toast({
   title,
   description,
-  type,
+  type = "info",
   className
 }) {
   return /* @__PURE__ */ import_react8.default.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement(
@@ -335,13 +335,13 @@ var import_react10 = __toESM(require("react"));
 var import_react_fontawesome7 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons6 = require("@fortawesome/free-solid-svg-icons");
 function MultiSelect({
-  list: list2,
+  list,
   state
 }) {
   const [keyword, setKeyword] = (0, import_react10.useState)("");
   const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
   function getFiltered() {
-    return list2.filter(
+    return list.filter(
       ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }
@@ -358,8 +358,8 @@ function MultiSelect({
     return state.value.find((item) => item.value == value);
   }
   const selectUnSelectAll = (0, import_react10.useCallback)(() => {
-    const isAllSelected = state.value.length == list2.length;
-    state.select(isAllSelected ? [] : list2);
+    const isAllSelected = state.value.length == list.length;
+    state.select(isAllSelected ? [] : list);
   }, [state.value]);
   return /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
     "input",
@@ -389,34 +389,37 @@ function MultiSelect({
 }
 var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
 
-// src/components/Dashboard.tsx
+// src/components/ThemeToggle.tsx
 var import_react11 = __toESM(require("react"));
-var list = [
-  { label: "Option 1", value: "option1" },
-  { label: "Option 2", value: "option2" },
-  { label: "Option 3", value: "option3" }
-];
-function Dashboard() {
-  const [selectedItem, setSelectedItem] = (0, import_react11.useState)([]);
-  return /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(
-    MultiSelect,
+function ThemeToggle(attr) {
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ import_react11.default.createElement(
+    "label",
     {
-      list,
-      state: { value: selectedItem, select: setSelectedItem }
-    }
+      htmlFor: "theme-toggle",
+      className: "slider__wrapper slider-theme slider-theme-light"
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      "input",
+      __spreadProps(__spreadValues({}, attr), {
+        id: "theme-toggle",
+        type: "checkbox",
+        className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
+      })
+    ),
+    /* @__PURE__ */ import_react11.default.createElement("span", { className: "slider-theme__bullet" })
   ));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
-  Dashboard,
   Expandable,
   MultiSelect,
   NavTabClient,
   SingleSelect,
   Slider,
   TextInput,
+  ThemeToggle,
   Toast,
   Tooltip
 });

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/Dashboard.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 Dashboard } from \"./components/Dashboard\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\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.67rem]\"} ${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 = \"px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]\";\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 ...\">\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 ${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=\"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  );\n}\n","\"use client\";\nimport React, { useDeferredValue, 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  return (\n    <div>\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 ...\"\n          placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n          {...attr}\n        />\n        <div className=\"select-item__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <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,\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 && \"navtab__item__active\"\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,\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 className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n    </div>\n  );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n  return (\n    <div\n      className=\"toast__inline\"\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.1rem]\"\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=\"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 className=\"select-item text-[var(--color-danger)]\">\n            Tidak ada Item\n          </button>\n        )}\n        {getFiltered().map(({ label, value }) => (\n          <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  );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\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  return (\n    <div>\n      <MultiSelect\n        list={list}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\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"]}
+{"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"],"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\";\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 = \"px-[0.85rem] text-[1.1rem] text-[var(--color-icon-input)]\";\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, 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  return (\n    <div className=\"w-full\">\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          {...attr}\n        />\n        <div className=\"select-item__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <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 className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n    </div>\n  );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n  return (\n    <div\n      className=\"toast__inline\"\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.1rem]\"\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=\"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 className=\"select-item text-[var(--color-danger)]\">\n            Tidak ada Item\n          </button>\n        )}\n        {getFiltered().map(({ label, value }) => (\n          <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  );\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"],"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","isItemExist","React","input__icon","import_react","React"]}

package/dist/index.mjs

@@ -32,8 +32,8 @@ var __objRest = (source, exclude) => {
 
 // src/components/Button.tsx
 import React from "react";
-import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 function Button(_a) {
   var _b = _a, {
     label,
@@ -52,7 +52,7 @@ function Button(_a) {
   return /* @__PURE__ */ React.createElement(
     "button",
     __spreadProps(__spreadValues({}, rest), {
-      className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
+      className: `${!icon && "py-[0.85rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
     }),
     buttonIcon && icon && /* @__PURE__ */ React.createElement(
       FontAwesomeIcon,
@@ -68,7 +68,7 @@ function Button(_a) {
 // src/components/TextInput.tsx
 import React2 from "react";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-var input__icon = "px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]";
+var input__icon = "px-[0.85rem] text-[1.1rem] text-[var(--color-icon-input)]";
 function TextInput(_a) {
   var _b = _a, {
     label,
@@ -79,10 +79,10 @@ function TextInput(_a) {
     "labelFor",
     "icon"
   ]);
-  return /* @__PURE__ */ React2.createElement("div", { className: "group ..." }, 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" }, icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }), /* @__PURE__ */ React2.createElement(
     "input",
     __spreadProps(__spreadValues({}, attr), {
-      className: `text-input ${attr.className} ${icon && "!pl-0"}`
+      className: `text-input w-full ${attr.className} ${icon && "!pl-0"}`
     })
   )));
 }
@@ -92,14 +92,14 @@ import React3 from "react";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 function Slider(attr) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ React3.createElement("div", { className: "slider__wrapper group" }, /* @__PURE__ */ React3.createElement(
     "input",
     __spreadProps(__spreadValues({}, attr), {
       id: "slider",
       type: "checkbox",
       className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
     })
-  ), /* @__PURE__ */ React3.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ React3.createElement(FontAwesomeIcon3, { icon: faCheck, className: "text-[0.7rem]" })));
+  ), /* @__PURE__ */ React3.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ React3.createElement(FontAwesomeIcon3, { icon: faCheck, className: "text-[0.7rem]" }))));
 }
 
 // src/components/SingleSelect.tsx
@@ -120,7 +120,7 @@ function SingleSelect(attr) {
     setSelected({ label, value });
     setKeyword("");
   }
-  return /* @__PURE__ */ React4.createElement("div", null, 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(
+  return /* @__PURE__ */ React4.createElement("div", { className: "w-full" }, 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 } : {}), {
       value: (_a = attr.value) != null ? _a : selected.value,
@@ -132,7 +132,7 @@ function SingleSelect(attr) {
       value: keyword,
       type: "search",
       onChange: (e) => setKeyword(e.target.value),
-      className: "text-input peer ...",
+      className: "text-input peer ... w-full",
       placeholder: selected.value ? selected.label : "Cari opsi ..."
     }, attr)
   ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React4.createElement(
@@ -159,7 +159,7 @@ import React5 from "react";
 function Tooltip({
   children,
   text,
-  position
+  position = "top"
 }) {
   function getAccent() {
     const mapping = {
@@ -187,7 +187,7 @@ function NavTabClient({
     "button",
     {
       key: value,
-      className: `navtab__item ${state.active == value && "navtab__item__active"}`,
+      className: `navtab__item ${state.active == value ? "navtab__item__active" : "hover:bg-[var(--color-border)]"}`,
       onClick: () => state.setActive(value)
     },
     label
@@ -219,7 +219,7 @@ import {
 function Toast({
   title,
   description,
-  type,
+  type = "info",
   className
 }) {
   return /* @__PURE__ */ React8.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement(
@@ -297,13 +297,13 @@ import React10, { useCallback, useDeferredValue as useDeferredValue2, useState a
 import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawesome";
 import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
 function MultiSelect({
-  list: list2,
+  list,
   state
 }) {
   const [keyword, setKeyword] = useState2("");
   const inputKeyword = useDeferredValue2(keyword);
   function getFiltered() {
-    return list2.filter(
+    return list.filter(
       ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
     );
   }
@@ -320,8 +320,8 @@ function MultiSelect({
     return state.value.find((item) => item.value == value);
   }
   const selectUnSelectAll = useCallback(() => {
-    const isAllSelected = state.value.length == list2.length;
-    state.select(isAllSelected ? [] : list2);
+    const isAllSelected = state.value.length == list.length;
+    state.select(isAllSelected ? [] : list);
   }, [state.value]);
   return /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
     "input",
@@ -351,33 +351,36 @@ function MultiSelect({
 }
 var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
 
-// src/components/Dashboard.tsx
-import React11, { useState as useState3 } from "react";
-var list = [
-  { label: "Option 1", value: "option1" },
-  { label: "Option 2", value: "option2" },
-  { label: "Option 3", value: "option3" }
-];
-function Dashboard() {
-  const [selectedItem, setSelectedItem] = useState3([]);
-  return /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(
-    MultiSelect,
+// src/components/ThemeToggle.tsx
+import React11 from "react";
+function ThemeToggle(attr) {
+  return /* @__PURE__ */ React11.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ React11.createElement(
+    "label",
     {
-      list,
-      state: { value: selectedItem, select: setSelectedItem }
-    }
+      htmlFor: "theme-toggle",
+      className: "slider__wrapper slider-theme slider-theme-light"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "input",
+      __spreadProps(__spreadValues({}, attr), {
+        id: "theme-toggle",
+        type: "checkbox",
+        className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
+      })
+    ),
+    /* @__PURE__ */ React11.createElement("span", { className: "slider-theme__bullet" })
   ));
 }
 export {
   Button,
   Card,
-  Dashboard,
   Expandable,
   MultiSelect,
   NavTabClient,
   SingleSelect,
   Slider,
   TextInput,
+  ThemeToggle,
   Toast,
   Tooltip
 };

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/Dashboard.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\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.67rem]\"} ${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 = \"px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]\";\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 ...\">\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 ${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=\"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  );\n}\n","\"use client\";\nimport React, { useDeferredValue, 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  return (\n    <div>\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 ...\"\n          placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n          {...attr}\n        />\n        <div className=\"select-item__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <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,\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 && \"navtab__item__active\"\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,\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 className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n    </div>\n  );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n  return (\n    <div\n      className=\"toast__inline\"\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.1rem]\"\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=\"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 className=\"select-item text-[var(--color-danger)]\">\n            Tidak ada Item\n          </button>\n        )}\n        {getFiltered().map(({ label, value }) => (\n          <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  );\n}\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\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  return (\n    <div>\n      <MultiSelect\n        list={list}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,WAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AASjB,SAAR,OAAwB,IAOV;AAPU,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAY+B,IAM1B,iBAN0B,IAM1B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,YAAY,gBAAgB;AAC/C,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,GAAG,CAAC,QAAQ,cAAc,IAAI,SAAS,IAChD,WAAW,eAAe,gBAC5B;AAAA;AAAA,IAEC,cAAc,QACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,iBAAiB,aAAa,cAAc;AAAA;AAAA,IACzD;AAAA,IAED,YAAY,kBAAkB;AAAA,EACjC;AAEJ;;;ACrCA,OAAOA,YAAW;AAElB,SAAS,mBAAAC,wBAAuB;AAChC,IAAM,cAAc;AAEL,SAAR,UAA2B,IAW/B;AAX+B,eAChC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EARF,IAKkC,IAI7B,iBAJ6B,IAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AASA,SACE,gBAAAC,OAAA,cAAC,SAAI,WAAU,eACZ,SACC,gBAAAA,OAAA,cAAC,WAAM,SAAS,UAAU,WAAU,uBACjC,KACH,GAEF,gBAAAA,OAAA,cAAC,SAAI,WAAU,yBACZ,QAAQ,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAY,WAAW,aAAa,GAC9D,gBAAAD,OAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,cAAc,KAAK,SAAS,IAAI,QAAQ,OAAO;AAAA;AAAA,EAC5D,CACF,CACF;AAEJ;;;ACjCA,OAAOE,YAAW;AAClB,SAAS,eAAe;AACxB,SAAS,mBAAAC,wBAAuB;AAEjB,SAAR,OACL,MACA;AACA,SACE,gBAAAC,OAAA,cAAC,SAAI,WAAU,2BACb,gBAAAA,OAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,WAAU;AAAA;AAAA,EACZ,GACA,gBAAAA,OAAA,cAAC,WAAM,SAAQ,UAAS,WAAU,YAChC,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAM,SAAS,WAAU,iBAAgB,CAC5D,CACF;AAEJ;;;ACnBA,OAAOC,UAAS,kBAAkB,gBAAgB;AAClD,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,WAAAC,UAAS,qBAAqB;AAWxB,SAAR,aAA8B,MAA8B;AAdnE;AAeE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE,OAAO,IAAI,OAAO,GAAG,CAAC;AACjE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,eAAe,iBAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAO,KAAK,QAAQ;AAAA,MAClB,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAO,MAAM,GAAqC;AACtE,gBAAY,EAAE,OAAO,MAAM,CAAC;AAC5B,eAAW,EAAE;AAAA,EACf;AAEA,SACE,gBAAAC,OAAA,cAAC,aACE,KAAK,SACJ,gBAAAA,OAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,KAAK,aAChD,KAAK,KACR,GAEF,gBAAAA,OAAA,cAAC,SAAI,WAAU,kCACb,gBAAAA,OAAA;AAAA,IAAC;AAAA,oDACK,OACC,KAAK,WAAW,EAAE,UAAU,KAAK,SAAS,IAAI,CAAC,IAFrD;AAAA,MAGC,QAAO,UAAK,UAAL,YAAc,SAAS;AAAA,MAC9B,MAAK;AAAA;AAAA,EACP,GACA,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAU;AAAA,MACV,aAAa,SAAS,QAAQ,SAAS,QAAQ;AAAA,OAC3C;AAAA,EACN,GACA,gBAAAA,OAAA,cAAC,SAAI,WAAU,0BACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,gBAAAA,OAAA,cAAC,YAAO,WAAU,4CAAyC,gBAE3D,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACjC,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,SAAS,SAAS,SACjB,gBAAAA,OAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,gBAAAF,OAAA,cAACC,kBAAA,EAAgB,MAAM,eAAe,WAAWE,cAAa,CAChE,CACF;AAEJ;AAEA,IAAMA,eAAc;;;AClFpB,OAAOC,YAAW;AAQH,SAAR,QAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,WAAS,YAAY;AACnB,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAU,cACb,gBAAAA,OAAA,cAAC,SAAI,WAAU,UAAQ,QAAS,GAChC,gBAAAA,OAAA,cAAC,UAAK,WAAW,gBAAgB,UAAU,CAAC,MAAK,IAAK,CACxD;AAEJ;AAEA,IAAM,MACJ;AACF,IAAM,SACJ;AACF,IAAM,QACJ;AACF,IAAM,OACJ;;;ACrCF,OAAOC,YAAW;AAOH,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AACF,GAMI;AACF,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAU,qBACZ,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,MACzB,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,gBACT,MAAM,UAAU,SAAS,sBAC3B;AAAA,MACA,SAAS,MAAM,MAAM,UAAU,KAAK;AAAA;AAAA,IAEnC;AAAA,EACH,CACD,CACH;AAEJ;;;AChCA,OAAOC,YAAW;AAOH,SAAR,KAAsB,EAAE,UAAU,UAAU,GAAmB;AACpE,SAAO,gBAAAA,OAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,MAAK,QAAS;AACxD;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAGM;AACJ,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,GAAG,SAAS,8CACzB,QACH;AAEJ;AACA,KAAK,SAAS;;;ACxBd,OAAOC,YAAW;AAClB,SAAS,mBAAAC,wBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUQ,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE,gBAAAD,OAAA,cAAC,SAAI,WAAW,GAAG,SAAS,2BAC1B,gBAAAA,OAAA,cAAC,SAAI,WAAU,iBACb,gBAAAA,OAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,GACA,gBAAAD,OAAA,cAAC,aACC,gBAAAA,OAAA,cAAC,OAAE,WAAU,kBAAgB,KAAM,GACnC,gBAAAA,OAAA,cAAC,OAAE,WAAU,wBAAsB,WAAY,CACjD,GACA,gBAAAA,OAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,IAAI;AAAA,MAClB,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,EACjC,CACF,GACA,gBAAAD,OAAA,cAAC,OAAE,WAAU,cAAa,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE,GAAG,CACnE;AAEJ;AAEA,IAAM,SAAS,CAAC,EAAE,MAAM,KAAK,MAAyC;AACpE,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,eAAe,IAAI,UAAU,SAAS,IAAI;AAAA;AAAA,IAE/D,gBAAAA,OAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAM,QAAQ,IAAI;AAAA,QAClB,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,IACjC;AAAA,IACA,gBAAAD,OAAA,cAAC,WAAG,IAAK;AAAA,EACX;AAEJ;AAEA,MAAM,SAAS;AAEf,SAAS,SAAS,MAAc;AAC9B,SAAO,eAAe,IAAI;AAC5B;AAEA,SAAS,QAAQ,MAAc;AAC7B,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAEA,SAAO,QAAQ,IAAI;AACrB;;;AC7EA,OAAOE,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,mBAAAC,wBAAuB;AASjB,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAClC,SACE,gBAAAD,OAAA,cAAC,SAAI,WAAW,cAAc,SAAS,MACrC,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAU;AAAA;AAAA,EACZ,GACA,gBAAAA,OAAA,cAACC,kBAAA,EAAgB,MAAM,cAAc,WAAU,oBAAmB,GAClE,gBAAAD,OAAA,cAAC,WAAM,SAAS,MAAM,WAAU,uBAC7B,KACH,GACA,gBAAAA,OAAA,cAAC,SAAI,WAAU,sBACb,gBAAAA,OAAA,cAAC,SAAI,WAAU,2BAAyB,QAAS,CACnD,CACF;AAEJ;;;ACnCA,OAAOE,WAAS,aAAa,oBAAAC,mBAAkB,YAAAC,iBAAgB;AAC/D,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,WAAAC,UAAS,mBAAmB;AAOtB,SAAR,YAA6B;AAAA,EAClC,MAAAC;AAAA,EACA;AACF,GAGI;AACF,QAAM,CAAC,SAAS,UAAU,IAAIH,UAAS,EAAE;AACzC,QAAM,eAAeD,kBAAiB,OAAO;AAE7C,WAAS,cAAc;AACrB,WAAOI,MAAK;AAAA,MACV,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAO,MAAM,GAAqC;AAEtE,UAAM,OAAO,CAAC,SAAS;AACrB,YAAMC,eAAc,KAAK,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAChE,UAAIA,cAAa;AACf,eAAO,KAAK,OAAO,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,EAAE,OAAO,MAAM,CAAC;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,WAAS,YAAY,OAAe;AAClC,WAAO,MAAM,MAAM,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,EAC5D;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC1C,UAAM,gBAAgB,MAAM,MAAM,UAAUD,MAAK;AACjD,UAAM,OAAO,gBAAgB,CAAC,IAAIA,KAAI;AAAA,EACxC,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,gBAAAL,QAAA,cAAC,SAAI,WAAU,kCACb,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,aAAa,GAAG,MAAM,MAAM,MAAM;AAAA,MAClC,WAAU;AAAA,MACV,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA;AAAA,EAC5C,GACA,gBAAAA,QAAA,cAAC,SAAI,WAAU,mDACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,gBAAAA,QAAA,cAAC,YAAO,WAAU,4CAAyC,gBAE3D,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACjC,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,YAAY,KAAK,KAChB,gBAAAA,QAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAMC;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,gBAAAJ,QAAA,cAAC,YAAO,WAAU,kBAAiB,SAAS,qBAC1C,gBAAAA,QAAA,cAACG,kBAAA,EAAgB,MAAM,aAAa,WAAWI,cAAa,CAC9D,CACF;AAEJ;AACA,IAAMA,eAAc;;;ACpFpB,OAAOC,WAAS,YAAAC,iBAAgB;AAGhC,IAAM,OAAO;AAAA,EACX,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AACxC;AACe,SAAR,YAA6B;AAClC,QAAM,CAAC,cAAc,eAAe,IAAIC,UAEtC,CAAC,CAAC;AACJ,SACE,gBAAAC,QAAA,cAAC,aACC,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,OAAO,cAAc,QAAQ,gBAAgB;AAAA;AAAA,EACxD,CACF;AAEJ;","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","useState","useState","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"],"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 = \"px-[0.85rem] text-[1.1rem] text-[var(--color-icon-input)]\";\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, 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  return (\n    <div className=\"w-full\">\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          {...attr}\n        />\n        <div className=\"select-item__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <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 className=\"toast__bar\" style={{ background: getColor(type) }}></p>\n    </div>\n  );\n}\n\nconst Inline = ({ text, type }: { text: string; type: ToastType }) => {\n  return (\n    <div\n      className=\"toast__inline\"\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.1rem]\"\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=\"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 className=\"select-item text-[var(--color-danger)]\">\n            Tidak ada Item\n          </button>\n        )}\n        {getFiltered().map(({ label, value }) => (\n          <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  );\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"],"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","isItemExist","input__icon","React","React"]}

package/dist/styles.css

@@ -10,7 +10,6 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --font-weight-semibold: 600;
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -212,21 +211,24 @@
   .left-full {
     left: 100%;
   }
-  .my-\[0\.98rem\] {
-    margin-block: 0.98rem;
+  .my-\[0\.85rem\] {
+    margin-block: 0.85rem;
   }
   .mt-\[1\.5rem\] {
     margin-top: 1.5rem;
   }
+  .mt-\[1px\] {
+    margin-top: 1px;
+  }
   .mt-\[1rem\] {
     margin-top: 1rem;
   }
-  .mt-\[2\.2rem\] {
-    margin-top: 2.2rem;
-  }
   .mt-\[2\.5rem\] {
     margin-top: 2.5rem;
   }
+  .mt-\[2\.25rem\] {
+    margin-top: 2.25rem;
+  }
   .mt-\[3rem\] {
     margin-top: 3rem;
   }
@@ -242,6 +244,9 @@
   .inline-block {
     display: inline-block;
   }
+  .h-\[3rem\] {
+    height: 3rem;
+  }
   .w-\[2rem\] {
     width: 2rem;
   }
@@ -254,6 +259,9 @@
   .w-\[max-content\] {
     width: max-content;
   }
+  .w-full {
+    width: 100%;
+  }
   .translate-x-\[-0\.6rem\] {
     --tw-translate-x: -0.6rem;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -279,6 +287,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .items-center {
+    align-items: center;
+  }
   .items-end {
     align-items: flex-end;
   }
@@ -311,14 +322,14 @@
   .p-\[0\.75rem\] {
     padding: 0.75rem;
   }
-  .px-\[0\.7rem\] {
-    padding-inline: 0.7rem;
+  .px-\[0\.85rem\] {
+    padding-inline: 0.85rem;
   }
   .px-\[1rem\] {
     padding-inline: 1rem;
   }
-  .py-\[0\.67rem\] {
-    padding-block: 0.67rem;
+  .py-\[0\.85rem\] {
+    padding-block: 0.85rem;
   }
   .pr-\[0\.7rem\] {
     padding-right: 0.7rem;
@@ -351,18 +362,6 @@
   .opacity-\[0\] {
     opacity: 0;
   }
-  .duration-500 {
-    --tw-duration: 500ms;
-    transition-duration: 500ms;
-  }
-  .duration-2000 {
-    --tw-duration: 2000ms;
-    transition-duration: 2000ms;
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
   .after\:top-\[-0\.4rem\] {
     &::after {
       content: var(--tw-content);
@@ -407,11 +406,24 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .hover\:bg-\[var\(--color-border\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-border);
+      }
+    }
+  }
 }
-body {
-  font-size: 14px;
+html {
+  font-size: 15px;
   color: var(--color-text-primary);
 }
+.slider-theme-light {
+  background-image: url("../dist/img/light.png");
+}
+.slider-theme:has(:checked) {
+  background-image: url("../dist/img/dark.png") !important;
+}
 :root {
   --color-bg-surface: #fff;
   --color-bg-input: #fff;
@@ -426,13 +438,13 @@ body {
   --color-border-soft: #f0f0f0;
   --color-shadow: #e6e9ef78;
   --color-danger: #ff4f60;
-  --color-danger-soft: #ffedee;
+  --color-danger-soft: #ffedeed5;
   --color-info: #1593db;
-  --color-info-soft: #ebf8ff;
+  --color-info-soft: #ebf8ffd5;
   --color-warning: #ffa22f;
-  --color-warning-soft: #fff1e1;
+  --color-warning-soft: #fff1e1d5;
   --color-success: #2b9a62;
-  --color-success-soft: #eafff4;
+  --color-success-soft: #eafff4d5;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -443,17 +455,19 @@ body {
 @layer components {
   .btn__primary {
     display: flex;
+    min-width: max-content;
     cursor: pointer;
     align-items: center;
-    gap: 0.65rem;
+    justify-content: center;
+    gap: 0.6rem;
     border-radius: 0.4rem;
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-primary);
     background-color: var(--color-primary);
-    padding: 0.65rem;
-    --tw-leading: 1.2;
-    line-height: 1.2;
+    padding: 0.84rem;
+    --tw-leading: 1.26;
+    line-height: 1.26;
     color: var(--color-white);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -481,6 +495,7 @@ body {
   }
   .text-input__wrapper {
     display: flex;
+    width: 100%;
     align-items: center;
     border-radius: 0.4rem;
     border-style: var(--tw-border-style);
@@ -495,7 +510,7 @@ body {
     }
   }
   .text-input {
-    padding: 0.69rem;
+    padding: 0.89rem;
     --tw-leading: 1.2;
     line-height: 1.2;
     &:focus {
@@ -512,8 +527,6 @@ body {
     position: relative;
     height: 0.5rem;
     width: 2rem;
-    --tw-translate-y: -0.98rem;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
     cursor: pointer;
     border-radius: 2rem;
     background-color: var(--color-icon-input);
@@ -578,7 +591,7 @@ body {
       z-index: 10000;
     }
     &:is(:where(.peer):focus ~ *) {
-      --tw-translate-y: 1.7rem;
+      --tw-translate-y: 1.9rem;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
     &:is(:where(.peer):focus ~ *) {
@@ -607,7 +620,7 @@ body {
       z-index: 10000;
     }
     &:focus-within {
-      --tw-translate-y: 1.7rem;
+      --tw-translate-y: 1.9rem;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
     &:focus-within {
@@ -675,11 +688,6 @@ body {
     padding: 0.52rem;
     padding-inline: 1rem;
     opacity: 0.5;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-border);
-      }
-    }
   }
   .navtab__item__active {
     border-bottom-color: var(--color-primary);
@@ -777,7 +785,7 @@ body {
     cursor: pointer;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.75rem;
+    padding: 0.95rem;
     padding-inline: 1rem;
     --tw-leading: 1;
     line-height: 1;
@@ -809,8 +817,8 @@ body {
   }
   .expandable__icon {
     position: absolute;
-    top: 0.7rem;
-    right: 0.75rem;
+    top: 0.9rem;
+    right: 0.9rem;
     font-size: 1.1rem;
     color: var(--color-icon-input);
     transition-property: rotate;
@@ -820,6 +828,40 @@ body {
       rotate: 90deg;
     }
   }
+  .slider-theme {
+    display: block;
+    height: 1.5rem !important;
+    width: 3rem !important;
+    border-radius: 5rem;
+    background-size: contain;
+    background-position: center;
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.5s;
+    transition-duration: 0.5s;
+  }
+  .slider-theme__bullet {
+    position: absolute;
+    top: 0.2rem;
+    left: 0.2rem;
+    height: 1.1rem;
+    width: 1.1rem;
+    border-radius: 50%;
+    background-color: #fbd549;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:is(:where(.peer):checked ~ *) {
+      --tw-translate-x: 1.47rem;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    &:is(:where(.peer):checked ~ *) {
+      background-color: #eceff1;
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -865,14 +907,6 @@ body {
   syntax: "*";
   inherits: false;
 }
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -952,6 +986,14 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -970,8 +1012,6 @@ body {
       --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
       --tw-content: "";
       --tw-outline-style: solid;
       --tw-shadow: 0 0 #0000;
@@ -989,6 +1029,8 @@ body {
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-font-weight: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }

package/package.json

@@ -32,7 +32,7 @@
     "react-dom": "^18.2.0"
   },
   "name": "@safestrong/ppa-component-library",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Collection of reusable components for any PPA web applications",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -57,7 +57,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./img/*": "./dist/img/*"
   },
   "sideEffects": [
     "**/*.css"

package/readme.md

@@ -0,0 +1,144 @@
+# 📦 PPA Component Library
+
+Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.
+
+> You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)
+
+## 💻 Installation
+
+```bash
+npm i @safestrong/ppa-component-library
+#OR
+yarn add @safestrong/ppa-component-library
+#OR
+pnpm add @safestrong/ppa-component-library
+```
+
+## 🕹 Usage
+
+Import the component first <br>
+`import { Button } from "@safestrong/ppa-component-library"` <br><br>
+Use component in your page or your own component <br>
+`<Button label="Click me" />`
+
+## 📂 List
+
+### Button - `<Button />`
+
+| Prop        | Type       | Required | Default | Description                        |
+| ----------- | ---------- | -------- | ------- | ---------------------------------- |
+| `label`     | `string`   | ✅ Yes   | —       | The text inside the button.        |
+| `isLoading` | `boolean`  | ❌ No    | false   | Loading state waiting              |
+| `btnType`   | `enum`     | ❌ No    | primary | `primary`, `secondary`, `tertiary` |
+| `icon`      | `IconProp` | ❌ No    | —       | Icon inside the button.            |
+| `className` | `string`   | ❌ No    | —       | Additional class for button.       |
+
+<hr>
+
+### Card - `<Card />`
+
+| Prop        | Type              | Required | Default | Description               |
+| ----------- | ----------------- | -------- | ------- | ------------------------- |
+| `children`  | `React.ReactNode` | ✅ Yes   | —       | Content inside.           |
+| `className` | `string`          | ❌ No    | -       | Additional class for card |
+
+<hr>
+
+### Text Input - `<TextInput />`
+
+| Prop       | Type       | Required | Default | Description                        |
+| ---------- | ---------- | -------- | ------- | ---------------------------------- |
+| `icon`     | `IconProp` | ❌ No    | —       | Icon inside text input             |
+| `label`    | `string`   | ❌ No    | -       | Additional label if needed         |
+| `labelFor` | `string`   | ❌ No    | -       | Label (if any) `htmlFor` attribute |
+
+<hr>
+
+### Toast - `<Toast />`
+
+| Prop          | Type     | Required | Default | Description                         |
+| ------------- | -------- | -------- | ------- | ----------------------------------- |
+| `title`       | `string` | ✅ Yes   | —       | Toast Title                         |
+| `description` | `string` | ✅ Yes   | -       | Description on toast body           |
+| `type`        | `enum`   | ❌ No    | `info`  | `info`,`warning`,`success`,`danger` |
+| `className`   | `string` | ❌ No    | -       | Additional className for Toast body |
+
+<hr>
+
+### Expandable - `<Expandable />`
+
+| Prop        | Type              | Required | Default | Description                     |
+| ----------- | ----------------- | -------- | ------- | ------------------------------- |
+| `title`     | `string`          | ✅ Yes   | —       | Title                           |
+| `children`  | `React.ReactNode` | ✅ Yes   | -       | Content inside                  |
+| `isOpen`    | `boolean`         | ❌ No    | false   | Auto show/expand content        |
+| `className` | `string`          | ❌ No    | -       | Additional class for Expandable |
+
+<hr>
+
+### Tooltip - `<Tooltip />`
+
+| Prop       | Type              | Required | Default | Description                      |
+| ---------- | ----------------- | -------- | ------- | -------------------------------- |
+| `children` | `React.ReactNode` | ✅ Yes   | —       | Text content                     |
+| `text`     | `string`          | ✅ Yes   | -       | Tooltip text                     |
+| `position` | `string`          | ❌ No    | `top`   | `top`, `bottom`, `right`, `left` |
+
+<hr>
+
+### Single Select - `<SingleSelect />` ✅ Client Component
+
+| Prop        | Type                             | Required | Default | Description                        |
+| ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
+| `label`     | `string`                         | ❌ No    | —       | Additional label                   |
+| `labelHtml` | `string`                         | ❌ No    | -       | Label (if any) `htmlFor` attribute |
+| `options`   | `{label:string, value:string}[]` | ❌ No    | -       | List Option                        |
+
+<hr>
+
+### Multi Select - `<MultiSelect />` ✅ Client Component
+
+| Prop    | Type                              | Required | Default | Description  |
+| ------- | --------------------------------- | -------- | ------- | ------------ |
+| `state` | `React.useState<{value, select}>` | ✅ Yes   | —       | Text content |
+| `list`  | `{label:string, value:string}[]`  | ✅ Yes   | -       | List Option  |
+
+Example:
+
+```bash
+export default function Dashboard() {
+  const [selectedItem, setSelectedItem] = useState([]);
+  return (
+      <MultiSelect
+        list={list}
+        state={{ value: selectedItem, select: setSelectedItem }}
+      />
+  );
+}
+```
+
+<hr>
+
+### Slider - `<Slider />`
+
+| Prop                  | Type                  | Required | Default | Description                        |
+| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
+| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
+
+<hr>
+
+### Theme Toggle - `<ThemeToggle />`
+
+| Prop                  | Type                  | Required | Default | Description                        |
+| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
+| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
+
+<hr>
+
+### Tab Navigation - `<NavTabClient />` ✅ Client Component
+
+| Prop       | Type                             | Required | Default | Description  |
+| ---------- | -------------------------------- | -------- | ------- | ------------ |
+| `children` | `React.ReactNode`                | ✅ Yes   | —       | Text content |
+| `state`    | `string`                         | ✅ Yes   | -       | Tooltip text |
+| `items`    | `{label:string, value:string}[]` | ✅ Ye    | -       | List Option  |