@safestrong/ppa-component-library 1.0.0 → 1.1.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/IconButton.tsx"],"sourcesContent":[null],"names":["label","React","createElement"],"mappings":"uDAEc,UAAqBA,MAAEA,IAClC,OACGC,EAAAC,cAAA,SAAA,KAASF,EAEf"}
+{"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 * from './components'","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faRefresh } 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 ? faRefresh : 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"]}

package/dist/index.mjs

@@ -0,0 +1,384 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/Button.tsx
+import React from "react";
+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+function Button(_a) {
+  var _b = _a, {
+    label,
+    icon,
+    isLoading,
+    btnType,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "icon",
+    "isLoading",
+    "btnType",
+    "className"
+  ]);
+  const buttonIcon = isLoading ? faRefresh : icon;
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    __spreadProps(__spreadValues({}, rest), {
+      className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
+    }),
+    buttonIcon && icon && /* @__PURE__ */ React.createElement(
+      FontAwesomeIcon,
+      {
+        icon: buttonIcon,
+        className: `text-[1.1rem] ${isLoading && "animate-spin"}`
+      }
+    ),
+    isLoading ? "Memproses ..." : label
+  );
+}
+
+// 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)]";
+function TextInput(_a) {
+  var _b = _a, {
+    label,
+    labelFor,
+    icon
+  } = _b, attr = __objRest(_b, [
+    "label",
+    "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(
+    "input",
+    __spreadProps(__spreadValues({}, attr), {
+      className: `text-input ${attr.className} ${icon && "!pl-0"}`
+    })
+  )));
+}
+
+// src/components/Slider.tsx
+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(
+    "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]" })));
+}
+
+// src/components/SingleSelect.tsx
+import React4, { useDeferredValue, useState } from "react";
+import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
+import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+function SingleSelect(attr) {
+  var _a;
+  const [selected, setSelected] = useState({ label: "", value: "" });
+  const [keyword, setKeyword] = useState("");
+  const inputKeyword = useDeferredValue(keyword);
+  function getFiltered() {
+    return attr.options.filter(
+      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+    );
+  }
+  function selectItem({ label, value }) {
+    setSelected({ label, value });
+    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(
+    "input",
+    __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
+      value: (_a = attr.value) != null ? _a : selected.value,
+      type: "hidden"
+    })
+  ), /* @__PURE__ */ React4.createElement(
+    "input",
+    __spreadValues({
+      value: keyword,
+      type: "search",
+      onChange: (e) => setKeyword(e.target.value),
+      className: "text-input peer ...",
+      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(
+    "button",
+    {
+      onClick: () => selectItem({ label, value }),
+      key: value,
+      className: "select-item"
+    },
+    label,
+    selected.value == value && /* @__PURE__ */ React4.createElement(
+      FontAwesomeIcon4,
+      {
+        icon: faCheck2,
+        className: "text-[var(--color-primary)]"
+      }
+    )
+  ))), /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, className: input__icon2 })));
+}
+var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+
+// src/components/Tooltip.tsx
+import React5 from "react";
+function Tooltip({
+  children,
+  text,
+  position
+}) {
+  function getAccent() {
+    const mapping = {
+      top,
+      bottom,
+      left,
+      right
+    };
+    return mapping[position];
+  }
+  return /* @__PURE__ */ React5.createElement("div", { className: "relative" }, /* @__PURE__ */ React5.createElement("div", { className: "peer" }, children), /* @__PURE__ */ React5.createElement("span", { className: `tooltip-text ${getAccent()}` }, text));
+}
+var top = "bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] ";
+var bottom = "right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] ";
+var right = "left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]";
+var left = "right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]";
+
+// src/components/NavTabClient.tsx
+import React6 from "react";
+function NavTabClient({
+  items,
+  state
+}) {
+  return /* @__PURE__ */ React6.createElement("nav", { className: "navtab__wrapper" }, items.map(({ label, value }) => /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      key: value,
+      className: `navtab__item ${state.active == value && "navtab__item__active"}`,
+      onClick: () => state.setActive(value)
+    },
+    label
+  )));
+}
+
+// src/components/Card.tsx
+import React7 from "react";
+function Card({ children, className }) {
+  return /* @__PURE__ */ React7.createElement("div", { className: `card ${className}` }, children);
+}
+var Footer = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ React7.createElement("div", { className: `${className} border-t border-t-[var(--color-border)]` }, children);
+};
+Card.Footer = Footer;
+
+// src/components/Toast.tsx
+import React8 from "react";
+import { FontAwesomeIcon as FontAwesomeIcon5 } from "@fortawesome/react-fontawesome";
+import {
+  faCheckCircle,
+  faInfoCircle,
+  faQuestionCircle,
+  faXmarkCircle
+} from "@fortawesome/free-solid-svg-icons";
+function Toast({
+  title,
+  description,
+  type,
+  className
+}) {
+  return /* @__PURE__ */ React8.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement(
+    FontAwesomeIcon5,
+    {
+      icon: getIcon(type),
+      className: "text-[1.2rem]",
+      style: { color: getColor(type) }
+    }
+  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ React8.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ React8.createElement(
+    FontAwesomeIcon5,
+    {
+      icon: getIcon(type),
+      className: "toast-bg__icon",
+      style: { color: getColor(type) }
+    }
+  )), /* @__PURE__ */ React8.createElement("p", { className: "toast__bar", style: { background: getColor(type) } }));
+}
+var Inline = ({ text, type }) => {
+  return /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "toast__inline",
+      style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
+    },
+    /* @__PURE__ */ React8.createElement(
+      FontAwesomeIcon5,
+      {
+        icon: getIcon(type),
+        className: "text-[1.1rem]",
+        style: { color: getColor(type) }
+      }
+    ),
+    /* @__PURE__ */ React8.createElement("p", null, text)
+  );
+};
+Toast.Inline = Inline;
+function getColor(type) {
+  return `var(--color-${type})`;
+}
+function getIcon(type) {
+  const mapping = {
+    warning: faQuestionCircle,
+    info: faInfoCircle,
+    danger: faXmarkCircle,
+    success: faCheckCircle
+  };
+  return mapping[type];
+}
+
+// src/components/Expandable.tsx
+import React9 from "react";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as FontAwesomeIcon6 } from "@fortawesome/react-fontawesome";
+function Expandable({
+  children,
+  title,
+  className,
+  isOpen
+}) {
+  const name = title.replace(" ", "");
+  return /* @__PURE__ */ React9.createElement("div", { className: `expandable ${className}` }, /* @__PURE__ */ React9.createElement(
+    "input",
+    {
+      id: name,
+      type: "checkbox",
+      defaultChecked: isOpen,
+      className: "opacity-[0] peer absolute top-0 ex-title"
+    }
+  ), /* @__PURE__ */ React9.createElement(FontAwesomeIcon6, { icon: faCaretRight, className: "expandable__icon" }), /* @__PURE__ */ React9.createElement("label", { htmlFor: name, className: "expandable__title" }, title), /* @__PURE__ */ React9.createElement("div", { className: "expandable__body" }, /* @__PURE__ */ React9.createElement("div", { className: "p-[0.75rem] px-[1rem]" }, children)));
+}
+
+// src/components/MultiSelect.tsx
+import React10, { useCallback, useDeferredValue as useDeferredValue2, useState as useState2 } from "react";
+import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawesome";
+import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
+function MultiSelect({
+  list: list2,
+  state
+}) {
+  const [keyword, setKeyword] = useState2("");
+  const inputKeyword = useDeferredValue2(keyword);
+  function getFiltered() {
+    return list2.filter(
+      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+    );
+  }
+  function selectItem({ label, value }) {
+    state.select((prev) => {
+      const isItemExist2 = prev.find((item) => item.value == value);
+      if (isItemExist2) {
+        return prev.filter((item) => item.value != value);
+      }
+      return [...prev, { label, value }];
+    });
+  }
+  function isItemExist(value) {
+    return state.value.find((item) => item.value == value);
+  }
+  const selectUnSelectAll = useCallback(() => {
+    const isAllSelected = state.value.length == list2.length;
+    state.select(isAllSelected ? [] : list2);
+  }, [state.value]);
+  return /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
+    "input",
+    {
+      value: keyword,
+      type: "search",
+      placeholder: `${state.value.length} Dipilih`,
+      className: "text-input peer ...",
+      onChange: (e) => setKeyword(e.target.value)
+    }
+  ), /* @__PURE__ */ React10.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: () => selectItem({ label, value }),
+      key: value,
+      className: "select-item"
+    },
+    label,
+    isItemExist(value) && /* @__PURE__ */ React10.createElement(
+      FontAwesomeIcon7,
+      {
+        icon: faCheck3,
+        className: "text-[var(--color-primary)]"
+      }
+    )
+  ))), /* @__PURE__ */ React10.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 })));
+}
+var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+
+// 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,
+    {
+      list,
+      state: { value: selectedItem, select: setSelectedItem }
+    }
+  ));
+}
+export {
+  Button,
+  Card,
+  Dashboard,
+  Expandable,
+  MultiSelect,
+  NavTabClient,
+  SingleSelect,
+  Slider,
+  TextInput,
+  Toast,
+  Tooltip
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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 { faRefresh } 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 ? faRefresh : 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","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"]}