@safestrong/ppa-component-library 1.5.0 → 1.6.0

package/dist/index.d.mts

@@ -143,4 +143,14 @@ declare namespace Navigation {
     }) => React.JSX.Element;
 }
 
-export { Badge, Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
+declare function Confirmation({ type, text, title, secondaryAction, secondaryLabel, mainAction, mainLabel, }: {
+    mainAction: () => void;
+    secondaryAction?: () => void;
+    mainLabel?: string;
+    secondaryLabel?: string;
+    title: string;
+    text: string;
+    type?: "info" | "warning" | "danger" | "success";
+}): React.JSX.Element;
+
+export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.d.ts

@@ -143,4 +143,14 @@ declare namespace Navigation {
     }) => React.JSX.Element;
 }
 
-export { Badge, Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
+declare function Confirmation({ type, text, title, secondaryAction, secondaryLabel, mainAction, mainLabel, }: {
+    mainAction: () => void;
+    secondaryAction?: () => void;
+    mainLabel?: string;
+    secondaryLabel?: string;
+    title: string;
+    text: string;
+    type?: "info" | "warning" | "danger" | "success";
+}): React.JSX.Element;
+
+export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.js

@@ -62,6 +62,7 @@ __export(index_exports, {
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
+  Confirmation: () => Confirmation,
   Dashboard: () => Dashboard,
   Expandable: () => Expandable,
   MultiSelect: () => MultiSelect,
@@ -112,7 +113,7 @@ function Button(_a) {
   );
 }
 var IconButton = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", __spreadValues({ className: "icon__button" }, props), props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }));
+  return /* @__PURE__ */ import_react.default.createElement("button", __spreadProps(__spreadValues({}, props), { className: `${props.className} icon__button` }), props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }));
 };
 var IconButtonGroup = ({ list: list2 }) => {
   function getBtnClass(idx) {
@@ -205,7 +206,7 @@ function SingleSelect(attr) {
   (0, import_react4.useEffect)(() => {
     attrInput.value && autoUpdateValue(attrInput.value);
   }, [attrInput.value]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `w-full group ${attr.outerClass}` }, attrInput.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `w-full group ${attr.outerClass}` }, attrInput.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: `${attrInput.className} text-input__wrapper relative` }, /* @__PURE__ */ import_react4.default.createElement(
     "input",
     __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
       value: (_b = attrInput.value) != null ? _b : selected.value,
@@ -563,11 +564,48 @@ var URLNavigation = (props) => {
 };
 Navigation.URL = URLNavigation;
 var base__anchor = "p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]";
+
+// src/components/Confirmation.tsx
+var import_react16 = __toESM(require("react"));
+function Confirmation({
+  type = "warning",
+  text,
+  title,
+  secondaryAction,
+  secondaryLabel = "Tidak",
+  mainAction,
+  mainLabel = "Ya"
+}) {
+  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__outer" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__card" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: wrapper }, /* @__PURE__ */ import_react16.default.createElement("div", { className: `baloon__${type} baloon` }), /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("h3", { className: "font-semibold" }, title), /* @__PURE__ */ import_react16.default.createElement("p", { className: confirmation__text }, text))), /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__footer" }, secondaryAction && /* @__PURE__ */ import_react16.default.createElement(
+    "button",
+    {
+      onClick: secondaryAction,
+      type: "button",
+      className: "cursor-pointer",
+      style: { color: `var(--color-${type})` }
+    },
+    secondaryLabel
+  ), /* @__PURE__ */ import_react16.default.createElement(
+    "button",
+    {
+      onClick: mainAction,
+      className: "cursor-pointer btn__primary min-w-[8rem]",
+      style: {
+        background: `var(--color-${type})`,
+        border: `1px solid var(--color-${type})`
+      }
+    },
+    mainLabel
+  ))));
+}
+var wrapper = "pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]";
+var confirmation__text = "mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
   Button,
   Card,
+  Confirmation,
   Dashboard,
   Expandable,
   MultiSelect,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\nexport { default as Dashboard } from \"./components/Dashboard\";\nexport { default as Badge } from \"./components/Badge\";\nexport { default as Skeleton } from \"./components/Skeleton\";\nexport { default as Navigation } from \"./components/Navigation\";\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.84rem]\"} ${className} ${\n        btnType == \"secondary\" && \"btn__secondary\"\n      } btn__primary`}\n    >\n      {buttonIcon && icon && (\n        <FontAwesomeIcon\n          icon={buttonIcon}\n          className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button className=\"icon__button\" {...props}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !rounded-[0] border-[0] ${\n      idx !== 0 ? \"border-l border-l-[var(--color-border)]\" : \"\"\n    }`;\n  }\n  return (\n    <div className=\"icon__button_group\">\n      {list.map((props, idx) => (\n        <button key={idx} className={getBtnClass(idx)} {...props}>\n          {props.icon && <FontAwesomeIcon icon={props.icon} />}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n  \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n  label,\n  labelFor,\n  icon,\n  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... w-full\">\n      {label && (\n        <label htmlFor={labelFor} className=\"text-input__label\">\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper overflow-hidden\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\n        />\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <div className=\"slider__wrapper group\">\n        <input {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"slider\" className=\"slider\">\n          <FontAwesomeIcon\n            icon={faCheck}\n            className=\"text-[0.7rem] translate-x-[0.2px]\"\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n\nconst input = \"peer ... w-[3rem] h-[1.6rem] opacity-[0] cursor-pointer\";\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  labelHtml?: string;\n  placeholder?: string;\n  outerClass?: string;\n  options?: {\n    label: string;\n    value: string;\n  }[];\n  stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const { options = [], stringOptions = [], ...attrInput } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const [selected, setSelected] = useState<{ label: string; value: any }>({\n    label: \"\",\n    value: \"\",\n  });\n  const inputKeyword = useDeferredValue(keyword);\n\n  function selectItem({ label, value }: { label: string; value: any }) {\n    const triggerManual = attrInput.onChange;\n    if (triggerManual) {\n      triggerManual?.({\n        target: { value, name: attrInput.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  function autoUpdateValue(updatedValue: string) {\n    if (updatedValue) {\n      const filtered = availableOptions.find(\n        ({ value }) => value == updatedValue\n      );\n      if (filtered) setSelected(filtered);\n    }\n  }\n\n  const availableOptions = useMemo(() => {\n    let defaultOptions = options && options.length > 0;\n    if (!defaultOptions)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  const filteredOptions = useMemo(() => {\n    return availableOptions.filter(\n      ({ label, value }) =>\n        label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, availableOptions]);\n\n  useEffect(() => {\n    attrInput.value && autoUpdateValue(attrInput.value as string);\n  }, [attrInput.value]);\n\n  return (\n    <div className={`w-full group ${attr.outerClass}`}>\n      {attrInput.label && (\n        <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n          {attrInput.label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          {...attrInput}\n          {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n          value={attrInput.value ?? selected.value}\n          type=\"hidden\"\n        />\n        <input\n          value={keyword}\n          type=\"search\"\n          onChange={(e) => setKeyword(e.target.value)}\n          className={`${attrInput.name}-keyword ${input} ${\n            selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          placeholder={selected.value ? selected.label : attrInput.placeholder}\n        />\n        <div className=\"select-item__wrapper\">\n          {filteredOptions.length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {filteredOptions.map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {selected.value == value && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n      </div>\n    </div>\n  );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n  value: string,\n  elName: string,\n  list: { label: string; value: string }[]\n) {\n  const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n  inp.value = `${value}`;\n  const filtered = list.find((item) => item.value == value);\n  const el = document.querySelector(`.${elName}-keyword`);\n  el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n  children: React.ReactNode;\n  text: string;\n  position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n  children,\n  text,\n  position = \"top\",\n}: Readonly<Tooltip>) {\n  function getAccent() {\n    const mapping = {\n      top,\n      bottom,\n      left,\n      right,\n    };\n    return mapping[position];\n  }\n  return (\n    <div className=\"relative\">\n      <div className=\"peer\">{children}</div>\n      <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n    </div>\n  );\n}\n\nconst top =\n  \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n  \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n  \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n  \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nexport default function NavTabClient({\n  items,\n  state,\n}: Readonly<{\n  items: Option[];\n  state: {\n    active: string;\n    setActive: (val: string) => void;\n  };\n}>) {\n  return (\n    <nav className=\"navtab__wrapper\">\n      {items.map(({ label, value }) => (\n        <button\n          key={value}\n          className={`navtab__item ${\n            state.active == value\n              ? \"navtab__item__active\"\n              : \"hover:bg-[var(--color-border)]/50\"\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};\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={`toast__wrapper group ${className}`}>\n      <div className=\"toast__body\">\n        <div style={{ background: getColor(type) }} className={bullet}></div>\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <div className={`toast__icon toast__icon__${type}`}></div>\n      </div>\n      <p\n        className=\"toast__bar toast-bar-animate\"\n        style={{ background: getColor(type) }}\n      ></p>\n    </div>\n  );\n}\n\nconst Inline = ({\n  className,\n  text,\n  type,\n}: {\n  className?: string;\n  text: string;\n  type: ToastType;\n}) => {\n  return (\n    <div\n      className={`toast__inline ${className}`}\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.2rem]\"\n        style={{ color: getColor(type) }}\n      />\n      <p>{text}</p>\n    </div>\n  );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n  return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n  const mapping = {\n    warning: faQuestionCircle,\n    info: faInfoCircle,\n    danger: faXmarkCircle,\n    success: faCheckCircle,\n  };\n  //@ts-expect-error call object using array index\n  return mapping[type];\n}\n\nconst bullet =\n  \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\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, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n  value: string;\n  label: string;\n};\n\ntype MultiSelect = {\n  label?: string;\n  labelHtml?: string;\n  outerClass?: string;\n  options?: Option[];\n  stringOptions?: string[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n  state,\n  label,\n  labelHtml,\n  ...attr\n}: Readonly<MultiSelect>) {\n  const { options = [], stringOptions = [] } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  const availableOptions = useMemo(() => {\n    const isDefaultOption = options && options.length > 0;\n    if (!isDefaultOption)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  function getFiltered() {\n    return availableOptions.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 == availableOptions.length;\n    state.select(isAllSelected ? [] : availableOptions);\n  }, [state.value]);\n\n  return (\n    <div className={`group w-full ${attr.outerClass}`}>\n      {label && (\n        <label className=\"text-input__label\" htmlFor={labelHtml}>\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className={`${input} ${\n            state.value.length > 0 &&\n            \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          onChange={(e) => setKeyword(e.target.value)}\n        />\n        <div className=\"select-item__wrapper select-multiple__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {isItemExist(value) && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          className=\"cursor-pointer\"\n          onClick={selectUnSelectAll}\n        >\n          <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n        </button>\n      </div>\n    </div>\n  );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <label\n        htmlFor={`${attr.id || \"theme-toggle\"}`}\n        className=\"slider__wrapper slider-theme slider-theme-light\"\n      >\n        <input\n          id=\"theme-toggle\"\n          {...attr}\n          type=\"checkbox\"\n          className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n        />\n        <span className=\"slider-theme__bullet\"></span>\n      </label>\n    </div>\n  );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n  { label: \"Option 1\", value: \"option1\" },\n  { label: \"Option 2\", value: \"option2\" },\n  { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\", \"option2\", \"option3\"];\n\nexport default function Dashboard() {\n  const [selectedItem, setSelectedItem] = useState<\n    { label: string; value: string }[]\n  >([]);\n  const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n  function updateState(item: string) {\n    const filtered = list.find(({ value }) => value == item);\n    filtered && setSel(filtered);\n  }\n\n  return (\n    <div className=\"flex items-center gap-[1rem]\">\n      <MultiSelect\n        label=\"Multi Select\"\n        stringOptions={stringList}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        label=\"Single Select\"\n        name=\"newinput\"\n        stringOptions={stringList}\n        placeholder=\"-- Pilih Status --\"\n        value={sel.value}\n      />\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Badge({\n  text,\n  type,\n  className,\n}: {\n  text: string;\n  type: \"success\" | \"danger\" | \"warning\" | \"info\";\n  className?: string;\n}) {\n  return (\n    <div className=\"badge__wrapper\">\n      <span\n        style={{\n          background: `var(--color-${type})`,\n        }}\n        className={`badge ${className}`}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n  return (\n    <div className={`${className} skeleton`}>\n      <span className=\"skeleton__item skeleton-slide\"></span>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n  return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n  list: { label: string; href: string }[];\n  activeUrl: string;\n  outerClass?: string;\n  CustomComponent?: React.ElementType;\n}) => {\n  const Component = props.CustomComponent || \"a\";\n  function getAnchorClass(href: string) {\n    return href === props.activeUrl\n      ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n      : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n  }\n\n  return (\n    <nav className={`nav__wrapper ${props.outerClass}`}>\n      {props.list.map((prop) => (\n        <Component\n          key={prop.href}\n          className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n          {...prop}\n        >\n          {prop.label}\n        </Component>\n      ))}\n    </nav>\n  );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n  \"p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAElB,+BAAgC;AAChC,kCAA8B;AASf,SAAR,OAAwB,IAOV;AAPU,eAC7B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjBF,IAY+B,IAM1B,iBAN0B,IAM1B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,YAAY,4CAAgB;AAC/C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,GAAG,CAAC,QAAQ,cAAc,IAAI,SAAS,IAChD,WAAW,eAAe,gBAC5B;AAAA;AAAA,IAEC,cAAc,QACb,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,6BAA6B,aAAa,cAAc;AAAA;AAAA,IACrE;AAAA,IAED,YAAY,kBAAkB;AAAA,EACjC;AAEJ;AAEA,IAAM,aAAa,CAAC,UAA4B;AAC9C,SACE,6BAAAA,QAAA,cAAC,2BAAO,WAAU,kBAAmB,QAClC,MAAM,QAAQ,6BAAAA,QAAA,cAAC,4CAAgB,MAAM,MAAM,MAAM,CACpD;AAEJ;AAEA,IAAM,kBAAkB,CAAC,EAAE,MAAAC,MAAK,MAA0B;AACxD,WAAS,YAAY,KAAa;AAChC,WAAO,wCACL,QAAQ,IAAI,4CAA4C,EAC1D;AAAA,EACF;AACA,SACE,6BAAAD,QAAA,cAAC,SAAI,WAAU,wBACZC,MAAK,IAAI,CAAC,OAAO,QAChB,6BAAAD,QAAA,cAAC,2BAAO,KAAK,KAAK,WAAW,YAAY,GAAG,KAAO,QAChD,MAAM,QAAQ,6BAAAA,QAAA,cAAC,4CAAgB,MAAM,MAAM,MAAM,CACpD,CACD,CACH;AAEJ;AAEA,OAAO,aAAa;AACpB,OAAO,kBAAkB;;;ACjEzB,IAAAE,gBAAkB;AAElB,IAAAC,4BAAgC;AAChC,IAAM,cACJ;AAEa,SAAR,UAA2B,IAW/B;AAX+B,eAChC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EATF,IAMkC,IAI7B,iBAJ6B,IAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AASA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,sBACZ,SACC,8BAAAA,QAAA,cAAC,WAAM,SAAS,UAAU,WAAU,uBACjC,KACH,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,yCACZ,QAAQ,8BAAAA,QAAA,cAAC,6CAAgB,MAAY,WAAW,aAAa,GAC9D,8BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,qBAAqB,KAAK,SAAS,IAC5C,QAAQ,cACV;AAAA;AAAA,EACF,CACF,CACF;AAEJ;;;ACpCA,IAAAC,gBAAkB;AAClB,IAAAC,+BAAwB;AACxB,IAAAC,4BAAgC;AAEjB,SAAR,OACL,MACA;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BACb,8BAAAA,QAAA,cAAC,0CAAU,OAAV,EAAgB,IAAG,UAAS,MAAK,YAAW,WAAW,QAAO,GAC/D,8BAAAA,QAAA,cAAC,WAAM,SAAQ,UAAS,WAAU,YAChC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAU;AAAA;AAAA,EACZ,CACF,CACF,CACF;AAEJ;AAEA,IAAM,QAAQ;;;ACrBd,IAAAC,gBAAsE;AACtE,IAAAC,4BAAgC;AAChC,IAAAC,+BAAuC;AAcxB,SAAR,aAA8B,MAA8B;AAjBnE;AAkBE,QAA2D,WAAnD,YAAU,CAAC,GAAG,gBAAgB,CAAC,EAlBzC,IAkB6D,IAAd,sBAAc,IAAd,CAArC,WAAc;AACtB,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,EAAE;AACzC,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAwC;AAAA,IACtE,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AACD,QAAM,mBAAe,gCAAiB,OAAO;AAE7C,WAAS,WAAW,EAAE,OAAO,MAAM,GAAkC;AACnE,UAAM,gBAAgB,UAAU;AAChC,QAAI,eAAe;AACjB,qDAAgB;AAAA,QACd,QAAQ,EAAE,OAAO,MAAM,UAAU,KAAK;AAAA,MACxC;AAAA,IACF;AACA,gBAAY,EAAE,OAAO,MAAM,CAAC;AAC5B,eAAW,EAAE;AAAA,EACf;AAEA,WAAS,gBAAgB,cAAsB;AAC7C,QAAI,cAAc;AAChB,YAAM,WAAW,iBAAiB;AAAA,QAChC,CAAC,EAAE,MAAM,MAAM,SAAS;AAAA,MAC1B;AACA,UAAI,SAAU,aAAY,QAAQ;AAAA,IACpC;AAAA,EACF;AAEA,QAAM,uBAAmB,uBAAQ,MAAM;AACrC,QAAI,iBAAiB,WAAW,QAAQ,SAAS;AACjD,QAAI,CAAC;AACH,aAAO,cAAc,IAAI,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,EAAE;AAChE,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,WAAO,iBAAiB;AAAA,MACtB,CAAC,EAAE,OAAO,MAAM,MACd,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAEnC,+BAAU,MAAM;AACd,cAAU,SAAS,gBAAgB,UAAU,KAAe;AAAA,EAC9D,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,gBAAgB,KAAK,UAAU,MAC5C,UAAU,SACT,8BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,UAAU,aACrD,UAAU,KACb,GAEF,8BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,8BAAAA,QAAA;AAAA,IAAC;AAAA,oDACK,YACC,UAAU,WAAW,EAAE,UAAU,UAAU,SAAS,IAAI,CAAC,IAF/D;AAAA,MAGC,QAAO,eAAU,UAAV,YAAmB,SAAS;AAAA,MACnC,MAAK;AAAA;AAAA,EACP,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAW,GAAG,UAAU,IAAI,YAAYC,MAAK,IAC3C,SAAS,SAAS,8CACpB;AAAA,MACA,aAAa,SAAS,QAAQ,SAAS,QAAQ,UAAU;AAAA;AAAA,EAC3D,GACA,8BAAAD,QAAA,cAAC,SAAI,WAAU,0BACZ,gBAAgB,UAAU,KAAK,WAAW,MACzC,8BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,gBAAgB,IAAI,CAAC,EAAE,OAAO,MAAM,MACnC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAET;AAAA,IACA,SAAS,SAAS,SACjB,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,4CAAe,WAAWE,cAAa,CAChE,CACF;AAEJ;AAEA,aAAa,WAAW;AAExB,SAAS,cACP,OACA,QACAC,OACA;AACA,QAAM,MAAM,SAAS,cAAc,UAAU,MAAM,IAAI;AACvD,MAAI,QAAQ,GAAG,KAAK;AACpB,QAAM,WAAWA,MAAK,KAAK,CAAC,SAAS,KAAK,SAAS,KAAK;AACxD,QAAM,KAAK,SAAS,cAAc,IAAI,MAAM,UAAU;AACtD,2BAAI,aAAa,eAAe,GAAG,qCAAU,KAAK;AACpD;AAEA,IAAMD,eAAc;AACpB,IAAMD,SAAQ;;;ACpId,IAAAG,gBAAkB;AAQH,SAAR,QAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAsB;AACpB,WAAS,YAAY;AACnB,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,cACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,UAAQ,QAAS,GAChC,8BAAAA,QAAA,cAAC,UAAK,WAAW,gBAAgB,UAAU,CAAC,MAAK,IAAK,CACxD;AAEJ;AAEA,IAAM,MACJ;AACF,IAAM,SACJ;AACF,IAAM,QACJ;AACF,IAAM,OACJ;;;ACrCF,IAAAC,gBAAkB;AAOH,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AACF,GAMI;AACF,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAU,qBACZ,MAAM,IAAI,CAAC,EAAE,OAAO,MAAM,MACzB,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,gBACT,MAAM,UAAU,QACZ,yBACA,mCACN;AAAA,MACA,SAAS,MAAM,MAAM,UAAU,KAAK;AAAA;AAAA,IAEnC;AAAA,EACH,CACD,CACH;AAEJ;;;AClCA,IAAAC,gBAAkB;AAOH,SAAR,KAAsB,EAAE,UAAU,UAAU,GAAmB;AACpE,SAAO,8BAAAC,QAAA,cAAC,SAAI,WAAW,QAAQ,SAAS,MAAK,QAAS;AACxD;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,MAGM;AACJ,SACE,8BAAAA,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,8CACzB,QACH;AAEJ;AAEA,KAAK,SAAS;;;ACzBd,IAAAC,gBAAkB;AAClB,IAAAC,4BAAgC;AAChC,IAAAC,+BAKO;AAUQ,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAoB;AAClB,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,wBAAwB,SAAS,MAC/C,8BAAAA,QAAA,cAAC,SAAI,WAAU,iBACb,8BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE,GAAG,WAAW,QAAQ,GAC/D,8BAAAA,QAAA,cAAC,aACC,8BAAAA,QAAA,cAAC,OAAE,WAAU,kBAAgB,KAAM,GACnC,8BAAAA,QAAA,cAAC,OAAE,WAAU,wBAAsB,WAAY,CACjD,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAW,4BAA4B,IAAI,IAAI,CACtD,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE;AAAA;AAAA,EACrC,CACH;AAEJ;AAEA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,SAAS;AAAA,MACrC,OAAO,EAAE,YAAY,eAAe,IAAI,UAAU,SAAS,IAAI;AAAA;AAAA,IAE/D,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,QAAQ,IAAI;AAAA,QAClB,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,SAAS,IAAI,EAAE;AAAA;AAAA,IACjC;AAAA,IACA,8BAAAA,QAAA,cAAC,WAAG,IAAK;AAAA,EACX;AAEJ;AAEA,MAAM,SAAS;AAEf,SAAS,SAAS,MAAc;AAC9B,SAAO,eAAe,IAAI;AAC5B;AAEA,SAAS,QAAQ,MAAc;AAC7B,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAEA,SAAO,QAAQ,IAAI;AACrB;AAEA,IAAM,SACJ;;;ACnFF,IAAAC,gBAAkB;AAClB,IAAAC,+BAA6B;AAC7B,IAAAC,4BAAgC;AASjB,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAClC,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAW,cAAc,SAAS,MACrC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAU;AAAA;AAAA,EACZ,GACA,8BAAAA,QAAA,cAAC,6CAAgB,MAAM,2CAAc,WAAU,oBAAmB,GAClE,8BAAAA,QAAA,cAAC,WAAM,SAAS,MAAM,WAAU,uBAC7B,KACH,GACA,8BAAAA,QAAA,cAAC,SAAI,WAAU,sBACb,8BAAAA,QAAA,cAAC,SAAI,WAAU,2BAAyB,QAAS,CACnD,CACF;AAEJ;;;ACnCA,IAAAC,iBAAwE;AACxE,IAAAC,4BAAgC;AAChC,IAAAC,+BAAqC;AAgBtB,SAAR,YAA6B,IAKV;AALU,eAClC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EArBF,IAkBoC,IAI/B,iBAJ+B,IAI/B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI;AAC7C,QAAM,CAAC,SAAS,UAAU,QAAI,yBAAS,EAAE;AACzC,QAAM,mBAAe,iCAAiB,OAAO;AAE7C,QAAM,uBAAmB,wBAAQ,MAAM;AACrC,UAAM,kBAAkB,WAAW,QAAQ,SAAS;AACpD,QAAI,CAAC;AACH,aAAO,cAAc,IAAI,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,EAAE;AAChE,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,WAAS,cAAc;AACrB,WAAO,iBAAiB;AAAA,MACtB,CAAC,EAAE,OAAAC,QAAO,MAAM,MACdA,OAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC,KACvD,MAAM,YAAY,EAAE,SAAS,aAAa,YAAY,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,WAAS,WAAW,EAAE,OAAAA,QAAO,MAAM,GAAqC;AAEtE,UAAM,OAAO,CAAC,SAAS;AACrB,YAAMC,eAAc,KAAK,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAChE,UAAIA,cAAa;AACf,eAAO,KAAK,OAAO,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,EAAE,OAAAD,QAAO,MAAM,CAAC;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,WAAS,YAAY,OAAe;AAClC,WAAO,MAAM,MAAM,KAAK,CAAC,SAAc,KAAK,SAAS,KAAK;AAAA,EAC5D;AAEA,QAAM,wBAAoB,4BAAY,MAAM;AAC1C,UAAM,gBAAgB,MAAM,MAAM,UAAU,iBAAiB;AAC7D,UAAM,OAAO,gBAAgB,CAAC,IAAI,gBAAgB;AAAA,EACpD,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,+BAAAE,QAAA,cAAC,SAAI,WAAW,gBAAgB,KAAK,UAAU,MAC5C,SACC,+BAAAA,QAAA,cAAC,WAAM,WAAU,qBAAoB,SAAS,aAC3C,KACH,GAEF,+BAAAA,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,aAAa,GAAG,MAAM,MAAM,MAAM;AAAA,MAClC,WAAW,GAAGC,MAAK,IACjB,MAAM,MAAM,SAAS,KACrB,8CACF;AAAA,MACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA;AAAA,EAC5C,GACA,+BAAAD,QAAA,cAAC,SAAI,WAAU,mDACZ,YAAY,EAAE,UAAU,KAAK,WAAW,MACvC,+BAAAA,QAAA,cAAC,YAAO,UAAQ,MAAC,WAAU,4CAAyC,gBAEpE,GAED,YAAY,EAAE,IAAI,CAAC,EAAE,OAAAF,QAAO,MAAM,MACjC,+BAAAE,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,WAAW,EAAE,OAAAF,QAAO,MAAM,CAAC;AAAA,MAC1C,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAETA;AAAA,IACA,YAAY,KAAK,KAChB,+BAAAE,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,EAEJ,CACD,CACH,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAET,+BAAAA,QAAA,cAAC,6CAAgB,MAAM,0CAAa,WAAWE,cAAa;AAAA,EAC9D,CACF,CACF;AAEJ;AACA,IAAMA,eAAc;AACpB,IAAMD,SAAQ;;;ACnHd,IAAAE,iBAAkB;AAEH,SAAR,YACL,MACA;AACA,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,gCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,GAAG,KAAK,MAAM,cAAc;AAAA,MACrC,WAAU;AAAA;AAAA,IAEV,+BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,SACC,OAFL;AAAA,QAGC,MAAK;AAAA,QACL,WAAU;AAAA;AAAA,IACZ;AAAA,IACA,+BAAAA,QAAA,cAAC,UAAK,WAAU,wBAAuB;AAAA,EACzC,CACF;AAEJ;;;ACtBA,IAAAC,iBAAgC;AAIhC,IAAM,OAAO;AAAA,EACX,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AAAA,EACtC,EAAE,OAAO,YAAY,OAAO,UAAU;AACxC;AACA,IAAM,aAAa,CAAC,WAAW,WAAW,SAAS;AAEpC,SAAR,YAA6B;AAClC,QAAM,CAAC,cAAc,eAAe,QAAI,yBAEtC,CAAC,CAAC;AACJ,QAAM,CAAC,KAAK,MAAM,QAAI,yBAAS,EAAE,OAAO,IAAI,OAAO,GAAG,CAAC;AAEvD,WAAS,YAAY,MAAc;AACjC,UAAM,WAAW,KAAK,KAAK,CAAC,EAAE,MAAM,MAAM,SAAS,IAAI;AACvD,gBAAY,OAAO,QAAQ;AAAA,EAC7B;AAEA,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,kCACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAe;AAAA,MACf,OAAO,EAAE,OAAO,cAAc,QAAQ,gBAAgB;AAAA;AAAA,EACxD,GACA,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,MAAK;AAAA,MACL,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,OAAO,IAAI;AAAA;AAAA,EACb,CACF;AAEJ;;;ACtCA,IAAAC,iBAAkB;AACH,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAU,oBACb,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY,eAAe,IAAI;AAAA,MACjC;AAAA,MACA,WAAW,SAAS,SAAS;AAAA;AAAA,IAE5B;AAAA,EACH,CACF;AAEJ;;;ACtBA,IAAAC,iBAAkB;AACH,SAAR,SAA0B,EAAE,UAAU,GAA2B;AACtE,SACE,+BAAAC,QAAA,cAAC,SAAI,WAAW,GAAG,SAAS,eAC1B,+BAAAA,QAAA,cAAC,UAAK,WAAU,iCAAgC,CAClD;AAEJ;;;ACPA,IAAAC,iBAAkB;AAEH,SAAR,aAA8B;AACnC,SAAO,+BAAAC,QAAA,cAAC,WAAI;AACd;AAEA,IAAM,gBAAgB,CAAC,UAKjB;AACJ,QAAM,YAAY,MAAM,mBAAmB;AAC3C,WAAS,eAAe,MAAc;AACpC,WAAO,SAAS,MAAM,YAClB,+DACA;AAAA,EACN;AAEA,SACE,+BAAAA,QAAA,cAAC,SAAI,WAAW,gBAAgB,MAAM,UAAU,MAC7C,MAAM,KAAK,IAAI,CAAC,SACf,+BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,WAAW,GAAG,YAAY,IAAI,eAAe,KAAK,IAAI,CAAC;AAAA,OACnD;AAAA,IAEH,KAAK;AAAA,EACR,CACD,CACH;AAEJ;AAEA,WAAW,MAAM;AAEjB,IAAM,eACJ;","names":["React","list","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","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\nexport { default as Dashboard } from \"./components/Dashboard\";\nexport { default as Badge } from \"./components/Badge\";\nexport { default as Skeleton } from \"./components/Skeleton\";\nexport { default as Navigation } from \"./components/Navigation\";\nexport { default as Confirmation } from \"./components/Confirmation\";\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.84rem]\"} ${className} ${\n        btnType == \"secondary\" && \"btn__secondary\"\n      } btn__primary`}\n    >\n      {buttonIcon && icon && (\n        <FontAwesomeIcon\n          icon={buttonIcon}\n          className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button {...props} className={`${props.className} icon__button`}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !rounded-[0] border-[0] ${\n      idx !== 0 ? \"border-l border-l-[var(--color-border)]\" : \"\"\n    }`;\n  }\n  return (\n    <div className=\"icon__button_group\">\n      {list.map((props, idx) => (\n        <button key={idx} className={getBtnClass(idx)} {...props}>\n          {props.icon && <FontAwesomeIcon icon={props.icon} />}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n  \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n  label,\n  labelFor,\n  icon,\n  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... w-full\">\n      {label && (\n        <label htmlFor={labelFor} className=\"text-input__label\">\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper overflow-hidden\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\n        />\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <div className=\"slider__wrapper group\">\n        <input {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"slider\" className=\"slider\">\n          <FontAwesomeIcon\n            icon={faCheck}\n            className=\"text-[0.7rem] translate-x-[0.2px]\"\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n\nconst input = \"peer ... w-[3rem] h-[1.6rem] opacity-[0] cursor-pointer\";\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  labelHtml?: string;\n  placeholder?: string;\n  outerClass?: string;\n  options?: {\n    label: string;\n    value: string;\n  }[];\n  stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const { options = [], stringOptions = [], ...attrInput } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const [selected, setSelected] = useState<{ label: string; value: any }>({\n    label: \"\",\n    value: \"\",\n  });\n  const inputKeyword = useDeferredValue(keyword);\n\n  function selectItem({ label, value }: { label: string; value: any }) {\n    const triggerManual = attrInput.onChange;\n    if (triggerManual) {\n      triggerManual?.({\n        target: { value, name: attrInput.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  function autoUpdateValue(updatedValue: string) {\n    if (updatedValue) {\n      const filtered = availableOptions.find(\n        ({ value }) => value == updatedValue\n      );\n      if (filtered) setSelected(filtered);\n    }\n  }\n\n  const availableOptions = useMemo(() => {\n    let defaultOptions = options && options.length > 0;\n    if (!defaultOptions)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  const filteredOptions = useMemo(() => {\n    return availableOptions.filter(\n      ({ label, value }) =>\n        label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, availableOptions]);\n\n  useEffect(() => {\n    attrInput.value && autoUpdateValue(attrInput.value as string);\n  }, [attrInput.value]);\n\n  return (\n    <div className={`w-full group ${attr.outerClass}`}>\n      {attrInput.label && (\n        <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n          {attrInput.label}\n        </label>\n      )}\n      <div className={`${attrInput.className} text-input__wrapper relative`}>\n        <input\n          {...attrInput}\n          {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n          value={attrInput.value ?? selected.value}\n          type=\"hidden\"\n        />\n        <input\n          value={keyword}\n          type=\"search\"\n          onChange={(e) => setKeyword(e.target.value)}\n          className={`${attrInput.name}-keyword ${input} ${\n            selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          placeholder={selected.value ? selected.label : attrInput.placeholder}\n        />\n        <div className=\"select-item__wrapper\">\n          {filteredOptions.length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {filteredOptions.map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {selected.value == value && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n      </div>\n    </div>\n  );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n  value: string,\n  elName: string,\n  list: { label: string; value: string }[]\n) {\n  const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n  inp.value = `${value}`;\n  const filtered = list.find((item) => item.value == value);\n  const el = document.querySelector(`.${elName}-keyword`);\n  el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n  children: React.ReactNode;\n  text: string;\n  position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n  children,\n  text,\n  position = \"top\",\n}: Readonly<Tooltip>) {\n  function getAccent() {\n    const mapping = {\n      top,\n      bottom,\n      left,\n      right,\n    };\n    return mapping[position];\n  }\n  return (\n    <div className=\"relative\">\n      <div className=\"peer\">{children}</div>\n      <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n    </div>\n  );\n}\n\nconst top =\n  \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n  \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n  \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n  \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nexport default function NavTabClient({\n  items,\n  state,\n}: Readonly<{\n  items: Option[];\n  state: {\n    active: string;\n    setActive: (val: string) => void;\n  };\n}>) {\n  return (\n    <nav className=\"navtab__wrapper\">\n      {items.map(({ label, value }) => (\n        <button\n          key={value}\n          className={`navtab__item ${\n            state.active == value\n              ? \"navtab__item__active\"\n              : \"hover:bg-[var(--color-border)]/50\"\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};\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={`toast__wrapper group ${className}`}>\n      <div className=\"toast__body\">\n        <div style={{ background: getColor(type) }} className={bullet}></div>\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <div className={`toast__icon toast__icon__${type}`}></div>\n      </div>\n      <p\n        className=\"toast__bar toast-bar-animate\"\n        style={{ background: getColor(type) }}\n      ></p>\n    </div>\n  );\n}\n\nconst Inline = ({\n  className,\n  text,\n  type,\n}: {\n  className?: string;\n  text: string;\n  type: ToastType;\n}) => {\n  return (\n    <div\n      className={`toast__inline ${className}`}\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.2rem]\"\n        style={{ color: getColor(type) }}\n      />\n      <p>{text}</p>\n    </div>\n  );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n  return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n  const mapping = {\n    warning: faQuestionCircle,\n    info: faInfoCircle,\n    danger: faXmarkCircle,\n    success: faCheckCircle,\n  };\n  //@ts-expect-error call object using array index\n  return mapping[type];\n}\n\nconst bullet =\n  \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\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, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n  value: string;\n  label: string;\n};\n\ntype MultiSelect = {\n  label?: string;\n  labelHtml?: string;\n  outerClass?: string;\n  options?: Option[];\n  stringOptions?: string[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n  state,\n  label,\n  labelHtml,\n  ...attr\n}: Readonly<MultiSelect>) {\n  const { options = [], stringOptions = [] } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  const availableOptions = useMemo(() => {\n    const isDefaultOption = options && options.length > 0;\n    if (!isDefaultOption)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  function getFiltered() {\n    return availableOptions.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 == availableOptions.length;\n    state.select(isAllSelected ? [] : availableOptions);\n  }, [state.value]);\n\n  return (\n    <div className={`group w-full ${attr.outerClass}`}>\n      {label && (\n        <label className=\"text-input__label\" htmlFor={labelHtml}>\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className={`${input} ${\n            state.value.length > 0 &&\n            \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          onChange={(e) => setKeyword(e.target.value)}\n        />\n        <div className=\"select-item__wrapper select-multiple__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {isItemExist(value) && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          className=\"cursor-pointer\"\n          onClick={selectUnSelectAll}\n        >\n          <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n        </button>\n      </div>\n    </div>\n  );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <label\n        htmlFor={`${attr.id || \"theme-toggle\"}`}\n        className=\"slider__wrapper slider-theme slider-theme-light\"\n      >\n        <input\n          id=\"theme-toggle\"\n          {...attr}\n          type=\"checkbox\"\n          className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n        />\n        <span className=\"slider-theme__bullet\"></span>\n      </label>\n    </div>\n  );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n  { label: \"Option 1\", value: \"option1\" },\n  { label: \"Option 2\", value: \"option2\" },\n  { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\", \"option2\", \"option3\"];\n\nexport default function Dashboard() {\n  const [selectedItem, setSelectedItem] = useState<\n    { label: string; value: string }[]\n  >([]);\n  const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n  function updateState(item: string) {\n    const filtered = list.find(({ value }) => value == item);\n    filtered && setSel(filtered);\n  }\n\n  return (\n    <div className=\"flex items-center gap-[1rem]\">\n      <MultiSelect\n        label=\"Multi Select\"\n        stringOptions={stringList}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        label=\"Single Select\"\n        name=\"newinput\"\n        stringOptions={stringList}\n        placeholder=\"-- Pilih Status --\"\n        value={sel.value}\n      />\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Badge({\n  text,\n  type,\n  className,\n}: {\n  text: string;\n  type: \"success\" | \"danger\" | \"warning\" | \"info\";\n  className?: string;\n}) {\n  return (\n    <div className=\"badge__wrapper\">\n      <span\n        style={{\n          background: `var(--color-${type})`,\n        }}\n        className={`badge ${className}`}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n  return (\n    <div className={`${className} skeleton`}>\n      <span className=\"skeleton__item skeleton-slide\"></span>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n  return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n  list: { label: string; href: string }[];\n  activeUrl: string;\n  outerClass?: string;\n  CustomComponent?: React.ElementType;\n}) => {\n  const Component = props.CustomComponent || \"a\";\n  function getAnchorClass(href: string) {\n    return href === props.activeUrl\n      ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n      : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n  }\n\n  return (\n    <nav className={`nav__wrapper ${props.outerClass}`}>\n      {props.list.map((prop) => (\n        <Component\n          key={prop.href}\n          className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n          {...prop}\n        >\n          {prop.label}\n        </Component>\n      ))}\n    </nav>\n  );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n  \"p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n","import React from \"react\";\n\nexport default function Confirmation({\n  type = \"warning\",\n  text,\n  title,\n  secondaryAction,\n  secondaryLabel = \"Tidak\",\n  mainAction,\n  mainLabel = \"Ya\",\n}: {\n  mainAction: () => void;\n  secondaryAction?: () => void;\n  mainLabel?: string;\n  secondaryLabel?: string;\n  title: string;\n  text: string;\n  type?: \"info\" | \"warning\" | \"danger\" | \"success\";\n}) {\n  return (\n    <div className=\"confirmation__outer\">\n      <div className=\"confirmation__card\">\n        <div className={wrapper}>\n          <div className={`baloon__${type} baloon`}></div>\n          <div>\n            <h3 className=\"font-semibold\">{title}</h3>\n            <p className={confirmation__text}>{text}</p>\n          </div>\n        </div>\n        <div className=\"confirmation__footer\">\n          {secondaryAction && (\n            <button\n              onClick={secondaryAction}\n              type=\"button\"\n              className=\"cursor-pointer\"\n              style={{ color: `var(--color-${type})` }}\n            >\n              {secondaryLabel}\n            </button>\n          )}\n          <button\n            onClick={mainAction}\n            className=\"cursor-pointer btn__primary min-w-[8rem]\"\n            style={{\n              background: `var(--color-${type})`,\n              border: `1px solid var(--color-${type})`,\n            }}\n          >\n            {mainLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst wrapper =\n  \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\nconst confirmation__text =\n  \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\n"],"mappings":"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","names":["React","list","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","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React"]}

package/dist/index.mjs

@@ -65,7 +65,7 @@ function Button(_a) {
   );
 }
 var IconButton = (props) => {
-  return /* @__PURE__ */ React.createElement("button", __spreadValues({ className: "icon__button" }, props), props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }));
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props), { className: `${props.className} icon__button` }), props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }));
 };
 var IconButtonGroup = ({ list: list2 }) => {
   function getBtnClass(idx) {
@@ -158,7 +158,7 @@ function SingleSelect(attr) {
   useEffect(() => {
     attrInput.value && autoUpdateValue(attrInput.value);
   }, [attrInput.value]);
-  return /* @__PURE__ */ React4.createElement("div", { className: `w-full group ${attr.outerClass}` }, attrInput.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ React4.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: `w-full group ${attr.outerClass}` }, attrInput.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ React4.createElement("div", { className: `${attrInput.className} text-input__wrapper relative` }, /* @__PURE__ */ React4.createElement(
     "input",
     __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
       value: (_b = attrInput.value) != null ? _b : selected.value,
@@ -521,10 +521,47 @@ var URLNavigation = (props) => {
 };
 Navigation.URL = URLNavigation;
 var base__anchor = "p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]";
+
+// src/components/Confirmation.tsx
+import React16 from "react";
+function Confirmation({
+  type = "warning",
+  text,
+  title,
+  secondaryAction,
+  secondaryLabel = "Tidak",
+  mainAction,
+  mainLabel = "Ya"
+}) {
+  return /* @__PURE__ */ React16.createElement("div", { className: "confirmation__outer" }, /* @__PURE__ */ React16.createElement("div", { className: "confirmation__card" }, /* @__PURE__ */ React16.createElement("div", { className: wrapper }, /* @__PURE__ */ React16.createElement("div", { className: `baloon__${type} baloon` }), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement("h3", { className: "font-semibold" }, title), /* @__PURE__ */ React16.createElement("p", { className: confirmation__text }, text))), /* @__PURE__ */ React16.createElement("div", { className: "confirmation__footer" }, secondaryAction && /* @__PURE__ */ React16.createElement(
+    "button",
+    {
+      onClick: secondaryAction,
+      type: "button",
+      className: "cursor-pointer",
+      style: { color: `var(--color-${type})` }
+    },
+    secondaryLabel
+  ), /* @__PURE__ */ React16.createElement(
+    "button",
+    {
+      onClick: mainAction,
+      className: "cursor-pointer btn__primary min-w-[8rem]",
+      style: {
+        background: `var(--color-${type})`,
+        border: `1px solid var(--color-${type})`
+      }
+    },
+    mainLabel
+  ))));
+}
+var wrapper = "pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]";
+var confirmation__text = "mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]";
 export {
   Badge,
   Button,
   Card,
+  Confirmation,
   Dashboard,
   Expandable,
   MultiSelect,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.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.84rem]\"} ${className} ${\n        btnType == \"secondary\" && \"btn__secondary\"\n      } btn__primary`}\n    >\n      {buttonIcon && icon && (\n        <FontAwesomeIcon\n          icon={buttonIcon}\n          className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button className=\"icon__button\" {...props}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !rounded-[0] border-[0] ${\n      idx !== 0 ? \"border-l border-l-[var(--color-border)]\" : \"\"\n    }`;\n  }\n  return (\n    <div className=\"icon__button_group\">\n      {list.map((props, idx) => (\n        <button key={idx} className={getBtnClass(idx)} {...props}>\n          {props.icon && <FontAwesomeIcon icon={props.icon} />}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n  \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n  label,\n  labelFor,\n  icon,\n  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... w-full\">\n      {label && (\n        <label htmlFor={labelFor} className=\"text-input__label\">\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper overflow-hidden\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\n        />\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <div className=\"slider__wrapper group\">\n        <input {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"slider\" className=\"slider\">\n          <FontAwesomeIcon\n            icon={faCheck}\n            className=\"text-[0.7rem] translate-x-[0.2px]\"\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n\nconst input = \"peer ... w-[3rem] h-[1.6rem] opacity-[0] cursor-pointer\";\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  labelHtml?: string;\n  placeholder?: string;\n  outerClass?: string;\n  options?: {\n    label: string;\n    value: string;\n  }[];\n  stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const { options = [], stringOptions = [], ...attrInput } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const [selected, setSelected] = useState<{ label: string; value: any }>({\n    label: \"\",\n    value: \"\",\n  });\n  const inputKeyword = useDeferredValue(keyword);\n\n  function selectItem({ label, value }: { label: string; value: any }) {\n    const triggerManual = attrInput.onChange;\n    if (triggerManual) {\n      triggerManual?.({\n        target: { value, name: attrInput.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  function autoUpdateValue(updatedValue: string) {\n    if (updatedValue) {\n      const filtered = availableOptions.find(\n        ({ value }) => value == updatedValue\n      );\n      if (filtered) setSelected(filtered);\n    }\n  }\n\n  const availableOptions = useMemo(() => {\n    let defaultOptions = options && options.length > 0;\n    if (!defaultOptions)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  const filteredOptions = useMemo(() => {\n    return availableOptions.filter(\n      ({ label, value }) =>\n        label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, availableOptions]);\n\n  useEffect(() => {\n    attrInput.value && autoUpdateValue(attrInput.value as string);\n  }, [attrInput.value]);\n\n  return (\n    <div className={`w-full group ${attr.outerClass}`}>\n      {attrInput.label && (\n        <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n          {attrInput.label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          {...attrInput}\n          {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n          value={attrInput.value ?? selected.value}\n          type=\"hidden\"\n        />\n        <input\n          value={keyword}\n          type=\"search\"\n          onChange={(e) => setKeyword(e.target.value)}\n          className={`${attrInput.name}-keyword ${input} ${\n            selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          placeholder={selected.value ? selected.label : attrInput.placeholder}\n        />\n        <div className=\"select-item__wrapper\">\n          {filteredOptions.length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {filteredOptions.map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {selected.value == value && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n      </div>\n    </div>\n  );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n  value: string,\n  elName: string,\n  list: { label: string; value: string }[]\n) {\n  const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n  inp.value = `${value}`;\n  const filtered = list.find((item) => item.value == value);\n  const el = document.querySelector(`.${elName}-keyword`);\n  el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n  children: React.ReactNode;\n  text: string;\n  position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n  children,\n  text,\n  position = \"top\",\n}: Readonly<Tooltip>) {\n  function getAccent() {\n    const mapping = {\n      top,\n      bottom,\n      left,\n      right,\n    };\n    return mapping[position];\n  }\n  return (\n    <div className=\"relative\">\n      <div className=\"peer\">{children}</div>\n      <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n    </div>\n  );\n}\n\nconst top =\n  \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n  \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n  \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n  \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nexport default function NavTabClient({\n  items,\n  state,\n}: Readonly<{\n  items: Option[];\n  state: {\n    active: string;\n    setActive: (val: string) => void;\n  };\n}>) {\n  return (\n    <nav className=\"navtab__wrapper\">\n      {items.map(({ label, value }) => (\n        <button\n          key={value}\n          className={`navtab__item ${\n            state.active == value\n              ? \"navtab__item__active\"\n              : \"hover:bg-[var(--color-border)]/50\"\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};\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={`toast__wrapper group ${className}`}>\n      <div className=\"toast__body\">\n        <div style={{ background: getColor(type) }} className={bullet}></div>\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <div className={`toast__icon toast__icon__${type}`}></div>\n      </div>\n      <p\n        className=\"toast__bar toast-bar-animate\"\n        style={{ background: getColor(type) }}\n      ></p>\n    </div>\n  );\n}\n\nconst Inline = ({\n  className,\n  text,\n  type,\n}: {\n  className?: string;\n  text: string;\n  type: ToastType;\n}) => {\n  return (\n    <div\n      className={`toast__inline ${className}`}\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.2rem]\"\n        style={{ color: getColor(type) }}\n      />\n      <p>{text}</p>\n    </div>\n  );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n  return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n  const mapping = {\n    warning: faQuestionCircle,\n    info: faInfoCircle,\n    danger: faXmarkCircle,\n    success: faCheckCircle,\n  };\n  //@ts-expect-error call object using array index\n  return mapping[type];\n}\n\nconst bullet =\n  \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\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, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n  value: string;\n  label: string;\n};\n\ntype MultiSelect = {\n  label?: string;\n  labelHtml?: string;\n  outerClass?: string;\n  options?: Option[];\n  stringOptions?: string[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n  state,\n  label,\n  labelHtml,\n  ...attr\n}: Readonly<MultiSelect>) {\n  const { options = [], stringOptions = [] } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  const availableOptions = useMemo(() => {\n    const isDefaultOption = options && options.length > 0;\n    if (!isDefaultOption)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  function getFiltered() {\n    return availableOptions.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 == availableOptions.length;\n    state.select(isAllSelected ? [] : availableOptions);\n  }, [state.value]);\n\n  return (\n    <div className={`group w-full ${attr.outerClass}`}>\n      {label && (\n        <label className=\"text-input__label\" htmlFor={labelHtml}>\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className={`${input} ${\n            state.value.length > 0 &&\n            \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          onChange={(e) => setKeyword(e.target.value)}\n        />\n        <div className=\"select-item__wrapper select-multiple__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {isItemExist(value) && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          className=\"cursor-pointer\"\n          onClick={selectUnSelectAll}\n        >\n          <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n        </button>\n      </div>\n    </div>\n  );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <label\n        htmlFor={`${attr.id || \"theme-toggle\"}`}\n        className=\"slider__wrapper slider-theme slider-theme-light\"\n      >\n        <input\n          id=\"theme-toggle\"\n          {...attr}\n          type=\"checkbox\"\n          className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n        />\n        <span className=\"slider-theme__bullet\"></span>\n      </label>\n    </div>\n  );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n  { label: \"Option 1\", value: \"option1\" },\n  { label: \"Option 2\", value: \"option2\" },\n  { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\", \"option2\", \"option3\"];\n\nexport default function Dashboard() {\n  const [selectedItem, setSelectedItem] = useState<\n    { label: string; value: string }[]\n  >([]);\n  const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n  function updateState(item: string) {\n    const filtered = list.find(({ value }) => value == item);\n    filtered && setSel(filtered);\n  }\n\n  return (\n    <div className=\"flex items-center gap-[1rem]\">\n      <MultiSelect\n        label=\"Multi Select\"\n        stringOptions={stringList}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        label=\"Single Select\"\n        name=\"newinput\"\n        stringOptions={stringList}\n        placeholder=\"-- Pilih Status --\"\n        value={sel.value}\n      />\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Badge({\n  text,\n  type,\n  className,\n}: {\n  text: string;\n  type: \"success\" | \"danger\" | \"warning\" | \"info\";\n  className?: string;\n}) {\n  return (\n    <div className=\"badge__wrapper\">\n      <span\n        style={{\n          background: `var(--color-${type})`,\n        }}\n        className={`badge ${className}`}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n  return (\n    <div className={`${className} skeleton`}>\n      <span className=\"skeleton__item skeleton-slide\"></span>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n  return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n  list: { label: string; href: string }[];\n  activeUrl: string;\n  outerClass?: string;\n  CustomComponent?: React.ElementType;\n}) => {\n  const Component = props.CustomComponent || \"a\";\n  function getAnchorClass(href: string) {\n    return href === props.activeUrl\n      ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n      : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n  }\n\n  return (\n    <nav className={`nav__wrapper ${props.outerClass}`}>\n      {props.list.map((prop) => (\n        <Component\n          key={prop.href}\n          className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n          {...prop}\n        >\n          {prop.label}\n        </Component>\n      ))}\n    </nav>\n  );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n  \"p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n"],"mappings":"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","names":["list","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","input","FontAwesomeIcon","faCheck","input__icon","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useMemo","useState","FontAwesomeIcon","faCheck","useState","useDeferredValue","useMemo","label","isItemExist","React","input","FontAwesomeIcon","faCheck","input__icon","React","React","React","useState","useState","React","React","React","React","React"]}
+{"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.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.84rem]\"} ${className} ${\n        btnType == \"secondary\" && \"btn__secondary\"\n      } btn__primary`}\n    >\n      {buttonIcon && icon && (\n        <FontAwesomeIcon\n          icon={buttonIcon}\n          className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button {...props} className={`${props.className} icon__button`}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !rounded-[0] border-[0] ${\n      idx !== 0 ? \"border-l border-l-[var(--color-border)]\" : \"\"\n    }`;\n  }\n  return (\n    <div className=\"icon__button_group\">\n      {list.map((props, idx) => (\n        <button key={idx} className={getBtnClass(idx)} {...props}>\n          {props.icon && <FontAwesomeIcon icon={props.icon} />}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n  \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n  label,\n  labelFor,\n  icon,\n  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... w-full\">\n      {label && (\n        <label htmlFor={labelFor} className=\"text-input__label\">\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper overflow-hidden\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\n        />\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <div className=\"slider__wrapper group\">\n        <input {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"slider\" className=\"slider\">\n          <FontAwesomeIcon\n            icon={faCheck}\n            className=\"text-[0.7rem] translate-x-[0.2px]\"\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n\nconst input = \"peer ... w-[3rem] h-[1.6rem] opacity-[0] cursor-pointer\";\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  labelHtml?: string;\n  placeholder?: string;\n  outerClass?: string;\n  options?: {\n    label: string;\n    value: string;\n  }[];\n  stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n  const { options = [], stringOptions = [], ...attrInput } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const [selected, setSelected] = useState<{ label: string; value: any }>({\n    label: \"\",\n    value: \"\",\n  });\n  const inputKeyword = useDeferredValue(keyword);\n\n  function selectItem({ label, value }: { label: string; value: any }) {\n    const triggerManual = attrInput.onChange;\n    if (triggerManual) {\n      triggerManual?.({\n        target: { value, name: attrInput.name },\n      } as React.ChangeEvent<HTMLInputElement>);\n    }\n    setSelected({ label, value });\n    setKeyword(\"\");\n  }\n\n  function autoUpdateValue(updatedValue: string) {\n    if (updatedValue) {\n      const filtered = availableOptions.find(\n        ({ value }) => value == updatedValue\n      );\n      if (filtered) setSelected(filtered);\n    }\n  }\n\n  const availableOptions = useMemo(() => {\n    let defaultOptions = options && options.length > 0;\n    if (!defaultOptions)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  const filteredOptions = useMemo(() => {\n    return availableOptions.filter(\n      ({ label, value }) =>\n        label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, availableOptions]);\n\n  useEffect(() => {\n    attrInput.value && autoUpdateValue(attrInput.value as string);\n  }, [attrInput.value]);\n\n  return (\n    <div className={`w-full group ${attr.outerClass}`}>\n      {attrInput.label && (\n        <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n          {attrInput.label}\n        </label>\n      )}\n      <div className={`${attrInput.className} text-input__wrapper relative`}>\n        <input\n          {...attrInput}\n          {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n          value={attrInput.value ?? selected.value}\n          type=\"hidden\"\n        />\n        <input\n          value={keyword}\n          type=\"search\"\n          onChange={(e) => setKeyword(e.target.value)}\n          className={`${attrInput.name}-keyword ${input} ${\n            selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          placeholder={selected.value ? selected.label : attrInput.placeholder}\n        />\n        <div className=\"select-item__wrapper\">\n          {filteredOptions.length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {filteredOptions.map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {selected.value == value && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n      </div>\n    </div>\n  );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n  value: string,\n  elName: string,\n  list: { label: string; value: string }[]\n) {\n  const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n  inp.value = `${value}`;\n  const filtered = list.find((item) => item.value == value);\n  const el = document.querySelector(`.${elName}-keyword`);\n  el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n  children: React.ReactNode;\n  text: string;\n  position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n  children,\n  text,\n  position = \"top\",\n}: Readonly<Tooltip>) {\n  function getAccent() {\n    const mapping = {\n      top,\n      bottom,\n      left,\n      right,\n    };\n    return mapping[position];\n  }\n  return (\n    <div className=\"relative\">\n      <div className=\"peer\">{children}</div>\n      <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n    </div>\n  );\n}\n\nconst top =\n  \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n  \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n  \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n  \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nexport default function NavTabClient({\n  items,\n  state,\n}: Readonly<{\n  items: Option[];\n  state: {\n    active: string;\n    setActive: (val: string) => void;\n  };\n}>) {\n  return (\n    <nav className=\"navtab__wrapper\">\n      {items.map(({ label, value }) => (\n        <button\n          key={value}\n          className={`navtab__item ${\n            state.active == value\n              ? \"navtab__item__active\"\n              : \"hover:bg-[var(--color-border)]/50\"\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};\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={`toast__wrapper group ${className}`}>\n      <div className=\"toast__body\">\n        <div style={{ background: getColor(type) }} className={bullet}></div>\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <div className={`toast__icon toast__icon__${type}`}></div>\n      </div>\n      <p\n        className=\"toast__bar toast-bar-animate\"\n        style={{ background: getColor(type) }}\n      ></p>\n    </div>\n  );\n}\n\nconst Inline = ({\n  className,\n  text,\n  type,\n}: {\n  className?: string;\n  text: string;\n  type: ToastType;\n}) => {\n  return (\n    <div\n      className={`toast__inline ${className}`}\n      style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n    >\n      <FontAwesomeIcon\n        icon={getIcon(type)}\n        className=\"text-[1.2rem]\"\n        style={{ color: getColor(type) }}\n      />\n      <p>{text}</p>\n    </div>\n  );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n  return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n  const mapping = {\n    warning: faQuestionCircle,\n    info: faInfoCircle,\n    danger: faXmarkCircle,\n    success: faCheckCircle,\n  };\n  //@ts-expect-error call object using array index\n  return mapping[type];\n}\n\nconst bullet =\n  \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\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, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n  value: string;\n  label: string;\n};\n\ntype MultiSelect = {\n  label?: string;\n  labelHtml?: string;\n  outerClass?: string;\n  options?: Option[];\n  stringOptions?: string[];\n  state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n  state,\n  label,\n  labelHtml,\n  ...attr\n}: Readonly<MultiSelect>) {\n  const { options = [], stringOptions = [] } = attr;\n  const [keyword, setKeyword] = useState(\"\");\n  const inputKeyword = useDeferredValue(keyword);\n\n  const availableOptions = useMemo(() => {\n    const isDefaultOption = options && options.length > 0;\n    if (!isDefaultOption)\n      return stringOptions.map((opt) => ({ label: opt, value: opt }));\n    return options;\n  }, [options, stringOptions]);\n\n  function getFiltered() {\n    return availableOptions.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 == availableOptions.length;\n    state.select(isAllSelected ? [] : availableOptions);\n  }, [state.value]);\n\n  return (\n    <div className={`group w-full ${attr.outerClass}`}>\n      {label && (\n        <label className=\"text-input__label\" htmlFor={labelHtml}>\n          {label}\n        </label>\n      )}\n      <div className=\"text-input__wrapper relative\">\n        <input\n          value={keyword}\n          type=\"search\"\n          placeholder={`${state.value.length} Dipilih`}\n          className={`${input} ${\n            state.value.length > 0 &&\n            \"placeholder:text-[var(--color-text-primary)]\"\n          }`}\n          onChange={(e) => setKeyword(e.target.value)}\n        />\n        <div className=\"select-item__wrapper select-multiple__wrapper\">\n          {getFiltered().length == 0 && keyword != \"\" && (\n            <button disabled className=\"select-item text-[var(--color-danger)]\">\n              Tidak ada Item\n            </button>\n          )}\n          {getFiltered().map(({ label, value }) => (\n            <button\n              type=\"button\"\n              onClick={() => selectItem({ label, value })}\n              key={value}\n              className=\"select-item\"\n            >\n              {label}\n              {isItemExist(value) && (\n                <FontAwesomeIcon\n                  icon={faCheck}\n                  className=\"text-[var(--color-primary)]\"\n                />\n              )}\n            </button>\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          className=\"cursor-pointer\"\n          onClick={selectUnSelectAll}\n        >\n          <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n        </button>\n      </div>\n    </div>\n  );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n  attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n  return (\n    <div className=\"flex items-center h-[3rem]\">\n      <label\n        htmlFor={`${attr.id || \"theme-toggle\"}`}\n        className=\"slider__wrapper slider-theme slider-theme-light\"\n      >\n        <input\n          id=\"theme-toggle\"\n          {...attr}\n          type=\"checkbox\"\n          className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n        />\n        <span className=\"slider-theme__bullet\"></span>\n      </label>\n    </div>\n  );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n  { label: \"Option 1\", value: \"option1\" },\n  { label: \"Option 2\", value: \"option2\" },\n  { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\", \"option2\", \"option3\"];\n\nexport default function Dashboard() {\n  const [selectedItem, setSelectedItem] = useState<\n    { label: string; value: string }[]\n  >([]);\n  const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n  function updateState(item: string) {\n    const filtered = list.find(({ value }) => value == item);\n    filtered && setSel(filtered);\n  }\n\n  return (\n    <div className=\"flex items-center gap-[1rem]\">\n      <MultiSelect\n        label=\"Multi Select\"\n        stringOptions={stringList}\n        state={{ value: selectedItem, select: setSelectedItem }}\n      />\n      <SingleSelect\n        label=\"Single Select\"\n        name=\"newinput\"\n        stringOptions={stringList}\n        placeholder=\"-- Pilih Status --\"\n        value={sel.value}\n      />\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Badge({\n  text,\n  type,\n  className,\n}: {\n  text: string;\n  type: \"success\" | \"danger\" | \"warning\" | \"info\";\n  className?: string;\n}) {\n  return (\n    <div className=\"badge__wrapper\">\n      <span\n        style={{\n          background: `var(--color-${type})`,\n        }}\n        className={`badge ${className}`}\n      >\n        {text}\n      </span>\n    </div>\n  );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n  return (\n    <div className={`${className} skeleton`}>\n      <span className=\"skeleton__item skeleton-slide\"></span>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n  return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n  list: { label: string; href: string }[];\n  activeUrl: string;\n  outerClass?: string;\n  CustomComponent?: React.ElementType;\n}) => {\n  const Component = props.CustomComponent || \"a\";\n  function getAnchorClass(href: string) {\n    return href === props.activeUrl\n      ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n      : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n  }\n\n  return (\n    <nav className={`nav__wrapper ${props.outerClass}`}>\n      {props.list.map((prop) => (\n        <Component\n          key={prop.href}\n          className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n          {...prop}\n        >\n          {prop.label}\n        </Component>\n      ))}\n    </nav>\n  );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n  \"p-[0.8rem] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n","import React from \"react\";\n\nexport default function Confirmation({\n  type = \"warning\",\n  text,\n  title,\n  secondaryAction,\n  secondaryLabel = \"Tidak\",\n  mainAction,\n  mainLabel = \"Ya\",\n}: {\n  mainAction: () => void;\n  secondaryAction?: () => void;\n  mainLabel?: string;\n  secondaryLabel?: string;\n  title: string;\n  text: string;\n  type?: \"info\" | \"warning\" | \"danger\" | \"success\";\n}) {\n  return (\n    <div className=\"confirmation__outer\">\n      <div className=\"confirmation__card\">\n        <div className={wrapper}>\n          <div className={`baloon__${type} baloon`}></div>\n          <div>\n            <h3 className=\"font-semibold\">{title}</h3>\n            <p className={confirmation__text}>{text}</p>\n          </div>\n        </div>\n        <div className=\"confirmation__footer\">\n          {secondaryAction && (\n            <button\n              onClick={secondaryAction}\n              type=\"button\"\n              className=\"cursor-pointer\"\n              style={{ color: `var(--color-${type})` }}\n            >\n              {secondaryLabel}\n            </button>\n          )}\n          <button\n            onClick={mainAction}\n            className=\"cursor-pointer btn__primary min-w-[8rem]\"\n            style={{\n              background: `var(--color-${type})`,\n              border: `1px solid var(--color-${type})`,\n            }}\n          >\n            {mainLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst wrapper =\n  \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\nconst confirmation__text =\n  \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\n"],"mappings":"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","names":["list","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","input","FontAwesomeIcon","faCheck","input__icon","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useMemo","useState","FontAwesomeIcon","faCheck","useState","useDeferredValue","useMemo","label","isItemExist","React","input","FontAwesomeIcon","faCheck","input__icon","React","React","React","useState","useState","React","React","React","React","React","React"]}

package/dist/styles.css

@@ -224,6 +224,9 @@
   .left-full {
     left: 100%;
   }
+  .mt-\[0\.7rem\] {
+    margin-top: 0.7rem;
+  }
   .mt-\[1px\] {
     margin-top: 1px;
   }
@@ -248,6 +251,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -284,6 +290,9 @@
   .w-\[30rem\] {
     width: 30rem;
   }
+  .w-\[90\%\] {
+    width: 90%;
+  }
   .w-\[900px\] {
     width: 900px;
   }
@@ -294,6 +303,9 @@
   .w-full {
     width: 100%;
   }
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
   .translate-x-\[-0\.6rem\] {
     --tw-translate-x: -0.6rem;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -332,6 +344,12 @@
   .items-start {
     align-items: flex-start;
   }
+  .gap-\[0\.5rem\] {
+    gap: 0.5rem;
+  }
+  .gap-\[1\.5rem\] {
+    gap: 1.5rem;
+  }
   .gap-\[1rem\] {
     gap: 1rem;
   }
@@ -341,6 +359,9 @@
   .gap-\[3rem\] {
     gap: 3rem;
   }
+  .gap-\[4rem\] {
+    gap: 4rem;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -402,6 +423,9 @@
   .px-\[1\.2rem\] {
     padding-inline: 1.2rem;
   }
+  .px-\[1\.8rem\] {
+    padding-inline: 1.8rem;
+  }
   .px-\[1rem\] {
     padding-inline: 1rem;
   }
@@ -411,6 +435,9 @@
   .py-\[1rem\] {
     padding-block: 1rem;
   }
+  .pt-\[0\.5rem\] {
+    padding-top: 0.5rem;
+  }
   .pr-\[0\.7rem\] {
     padding-right: 0.7rem;
   }
@@ -449,6 +476,9 @@
   .text-\[var\(--color-primary\)\] {
     color: var(--color-primary);
   }
+  .text-\[var\(--color-text-secondary\)\] {
+    color: var(--color-text-secondary);
+  }
   .text-\[var\(--color-text-secondary\)\]\/70 {
     color: var(--color-text-secondary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -472,6 +502,11 @@
       color: var(--color-primary);
     }
   }
+  .peer-checked\:flex {
+    &:is(:where(.peer):checked ~ *) {
+      display: flex;
+    }
+  }
   .placeholder\:text-\[var\(--color-text-primary\)\] {
     &::-moz-placeholder {
       color: var(--color-text-primary);
@@ -546,9 +581,12 @@
   }
 }
 html {
-  font-size: 15px;
+  font-size: 13px;
   color: var(--color-text-primary);
 }
+h3 {
+  font-size: 1.5rem;
+}
 .slider-theme-light {
   background-image: url("https://storage.ppa-ho.net/ppa-component-library/toggle-bg-light.svg");
 }
@@ -577,6 +615,28 @@ html {
 .toast__icon__danger {
   background-image: url("https://storage.ppa-ho.net/ppa-component-library/message-danger.svg") !important;
 }
+.baloon {
+  height: 70px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 70px;
+  position: absolute;
+  top: -0.6rem;
+  right: -0.8rem;
+}
+.baloon__info {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/baloon_info.svg") !important;
+}
+.baloon__warning {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/baloon_warning.svg") !important;
+}
+.baloon__danger {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/baloon_danger.svg") !important;
+}
+.baloon__success {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/baloon_success.svg") !important;
+}
 :root {
   --color-bg-surface: #fff;
   --color-bg-input: #fff;
@@ -619,6 +679,16 @@ html {
     margin-left: 100%;
   }
 }
+@keyframes showup {
+  from {
+    opacity: 0;
+    transform: translateY(0.2rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .skeleton-slide {
   animation: skeleton-slide 1.5s ease-in-out infinite;
 }
@@ -714,6 +784,7 @@ html {
     border-width: 1px;
     border-color: var(--color-border);
     background-color: var(--color-bg-surface);
+    padding: 1.2rem;
     font-size: 1rem;
     color: var(--color-icon-input);
     &:hover {
@@ -724,6 +795,7 @@ html {
   }
   .icon__button_group {
     display: flex;
+    width: auto;
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
@@ -1086,7 +1158,7 @@ html {
   }
   .slider-theme {
     display: block;
-    height: 1.67rem !important;
+    height: 1.8rem !important;
     width: 3rem !important;
     border-radius: 5rem;
     border-style: var(--tw-border-style);
@@ -1104,10 +1176,10 @@ html {
   }
   .slider-theme__bullet {
     position: absolute;
-    top: 0.14rem;
+    top: 0.24rem;
     left: 0.2rem;
-    height: 1.13rem;
-    width: 1.13rem;
+    height: 1rem;
+    width: 1rem;
     border-radius: 50%;
     background-color: #fbd549;
     transition-property: all;
@@ -1150,6 +1222,48 @@ html {
     --tw-blur: blur(2rem);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .confirmation__outer {
+    position: absolute;
+    inset: calc(var(--spacing) * 0);
+    z-index: 1500;
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background-color: var(--color-bg-surface);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-bg-surface) 50%, transparent);
+    }
+    padding: 2rem;
+    --tw-backdrop-blur: blur(0.5rem);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .confirmation__card {
+    position: relative;
+    width: 100%;
+    animation: showup 0.4s ease;
+    overflow: hidden;
+    border-radius: 0.8rem;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border-soft);
+    background-color: var(--color-bg-surface);
+    padding-top: 1rem;
+    --tw-shadow: 2px 2px 4px 0 var(--tw-shadow-color, var(--color-shadow));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    @media (width >= 48rem) {
+      width: 420px;
+    }
+  }
+  .confirmation__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 2rem;
+    padding: 1rem;
+    padding-top: 0.5rem;
+  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -1382,6 +1496,42 @@ html {
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1442,6 +1592,15 @@ html {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
     }
   }
 }

package/package.json

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