@safestrong/ppa-component-library 1.9.2 → 1.9.4

package/dist/index.mjs

@@ -1,747 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/components/Button.tsx
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
-function Button(_a) {
-  var _b = _a, {
-    label,
-    icon,
-    isLoading,
-    btnType,
-    className
-  } = _b, rest = __objRest(_b, [
-    "label",
-    "icon",
-    "isLoading",
-    "btnType",
-    "className"
-  ]);
-  const buttonIcon = isLoading ? faCircleNotch : icon;
-  const loadingLabel = label && isLoading ? "Memproses ..." : "";
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    __spreadProps(__spreadValues({}, rest), {
-      disabled: rest.disabled || isLoading,
-      className: `${!icon && "py-[0.84rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary ${label ? "" : "!p-[0.87rem]"}`
-    }),
-    buttonIcon && icon && /* @__PURE__ */ React.createElement(
-      FontAwesomeIcon,
-      {
-        icon: buttonIcon,
-        className: `text-[1.2rem] ${label && "mr-[0.3rem]"} ${isLoading && "animate-spin"}`
-      }
-    ),
-    isLoading ? loadingLabel : label
-  );
-}
-var IconButton = (props) => {
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    __spreadProps(__spreadValues({}, props), {
-      className: `${props.className} ${props.label ? "max-w-[content] px-[0.8rem]" : ""} icon__button`
-    }),
-    props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }),
-    props.label && /* @__PURE__ */ React.createElement("span", { className: "inline-block ml-[0.8rem] text-[1rem]" }, props.label)
-  );
-};
-var IconButtonGroup = ({ list: list2 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "icon__button_group" }, list2.map((props, idx) => /* @__PURE__ */ React.createElement("button", __spreadValues({ key: idx + 1, className: getBtnClass(idx) }, props), props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }), props.isNotif && /* @__PURE__ */ React.createElement("span", { className: "btn__notif_badge" }))));
-};
-var SSOButton = ({ href, btnclass }) => {
-  return /* @__PURE__ */ React.createElement("a", { href, className: `sso-button ${btnclass}` }, /* @__PURE__ */ React.createElement(
-    "img",
-    {
-      alt: "logo",
-      className: "sso-icon",
-      src: "https://storage.ppa-ho.net/public/ppa-component-library/lock.png"
-    }
-  ), " ", "Login dengan SSO");
-};
-Button.IconButton = IconButton;
-Button.IconButtonGroup = IconButtonGroup;
-Button.SSOButton = SSOButton;
-function getBtnClass(idx) {
-  return `icon__button !h-[2.95rem] !rounded-[0] border-[0] relative ${idx == 0 ? "" : "border-l border-l-[var(--color-border)]"}`;
-}
-
-// src/components/TextInput.tsx
-import React2 from "react";
-import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-var input__icon = "w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] ";
-function TextInput(_a) {
-  var _b = _a, {
-    label,
-    labelFor,
-    icon,
-    outerclass,
-    isdarkmode,
-    inputclass
-  } = _b, attr = __objRest(_b, [
-    "label",
-    "labelFor",
-    "icon",
-    "outerclass",
-    "isdarkmode",
-    "inputclass"
-  ]);
-  function getThemedClass(prefix) {
-    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
-  }
-  return /* @__PURE__ */ React2.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ React2.createElement(
-    "label",
-    {
-      htmlFor: labelFor,
-      className: "text-input__label",
-      style: {
-        color: getThemedClass("-text-secondary")
-      }
-    },
-    label
-  ), /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      className: `text-input__wrapper overflow-hidden ${attr.className}`,
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }),
-    /* @__PURE__ */ React2.createElement(
-      "input",
-      __spreadProps(__spreadValues({}, attr), {
-        className: `text-input w-full ${icon && "!pl-[0.3rem]"} ${inputclass}`,
-        style: {
-          color: getThemedClass("-text-primary")
-        }
-      })
-    )
-  ));
-}
-
-// src/components/Slider.tsx
-import React3 from "react";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
-function Slider(attr) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ React3.createElement("div", { className: "slider__wrapper group relative" }, /* @__PURE__ */ React3.createElement("input", __spreadValues({ id: "slider", type: "checkbox", className: input }, attr)), /* @__PURE__ */ React3.createElement("label", { htmlFor: attr.id || "slider", className: "slider" }, /* @__PURE__ */ React3.createElement(
-    FontAwesomeIcon3,
-    {
-      icon: faCheck,
-      className: "text-[0.7rem] translate-x-[0.2px]"
-    }
-  ))));
-}
-var input = "peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute";
-
-// src/components/SingleSelect.tsx
-import React4, { useEffect, useMemo, useState } from "react";
-import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
-import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
-function SingleSelect(attr) {
-  var _b;
-  const _a = attr, { options = [], stringOptions = [], isdarkmode } = _a, attrInput = __objRest(_a, ["options", "stringOptions", "isdarkmode"]);
-  const inputValue = attrInput.value;
-  const [keyword, setKeyword] = useState("");
-  const [selected, setSelected] = useState({
-    label: "",
-    value: ""
-  });
-  function selectItem({ label, value }, e) {
-    const triggerManual = attrInput.onChange;
-    if (triggerManual) {
-      triggerManual == null ? void 0 : triggerManual({
-        target: { value, name: attrInput.name }
-      });
-    }
-    setSelected({ label, value });
-    if (attr.stateaction) {
-      if ((options == null ? void 0 : options.length) > 0) attr.stateaction({ label, value });
-      if ((stringOptions == null ? void 0 : stringOptions.length) > 0) attr.stateaction(value);
-    }
-    setKeyword("");
-    e.currentTarget.blur();
-  }
-  function autoUpdateValue(updatedValue) {
-    if (updatedValue) {
-      const filtered = availableOptions.find(
-        ({ value }) => value == updatedValue
-      );
-      if (filtered) setSelected(filtered);
-    }
-  }
-  const availableOptions = useMemo(() => {
-    let defaultOptions = options && options.length > 0;
-    if (!defaultOptions)
-      return stringOptions.map((opt) => ({ label: opt, value: opt }));
-    return options;
-  }, [options, stringOptions]);
-  const filteredOptions = useMemo(() => {
-    return availableOptions.filter(
-      ({ label, value }) => (label + "").toLowerCase().includes(keyword.toLowerCase()) || (value + "").toLowerCase().includes(keyword.toLowerCase())
-    );
-  }, [keyword, availableOptions]);
-  useEffect(() => {
-    inputValue && autoUpdateValue(inputValue);
-  }, [inputValue]);
-  function getThemedClass(prefix) {
-    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
-  }
-  const placeholderClass = `${input2} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
-  const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
-  return /* @__PURE__ */ React4.createElement("div", { className: `w-full group ${attr.outerclass}` }, attrInput.label && /* @__PURE__ */ React4.createElement(
-    "label",
-    {
-      className: "text-input__label",
-      htmlFor: attrInput.labelHtml,
-      style: { color: getThemedClass("-text-secondary") }
-    },
-    attrInput.label
-  ), /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      className: `${attrInput.className} text-input__wrapper relative`,
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    /* @__PURE__ */ React4.createElement(
-      "input",
-      __spreadProps(__spreadValues(__spreadValues({
-        type: "hidden"
-      }, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
-        value: (_b = attrInput.value) != null ? _b : selected.value
-      })
-    ),
-    /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "search",
-        value: keyword,
-        autoComplete: "off",
-        onChange: (e) => setKeyword(e.target.value),
-        className: `${attrInput.name}-keyword ${placeholderClass}`,
-        placeholder: selected.value ? selected.label : attrInput.placeholder,
-        style: {
-          color: selected.value ? getThemedClass("-text-primary") : void 0
-        }
-      }
-    ),
-    /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        className: "select-item__wrapper",
-        style: {
-          borderColor: getThemedClass("-border"),
-          background: getThemedClass("-bg-surface")
-        }
-      },
-      filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement(
-        "button",
-        {
-          disabled: true,
-          className: "select-item",
-          style: { color: "var(--color-danger)" }
-        },
-        "Tidak ada Item"
-      ),
-      filteredOptions.map(({ label, value }) => /* @__PURE__ */ React4.createElement(
-        "button",
-        {
-          key: value,
-          type: "button",
-          className: `select-item ${optionHoverClass}`,
-          onClick: (e) => selectItem({ label, value }, e),
-          style: { color: getThemedClass("-text-secondary") }
-        },
-        label,
-        selected.value == value && /* @__PURE__ */ React4.createElement(
-          FontAwesomeIcon4,
-          {
-            icon: faCheck2,
-            style: { color: "var(--color-info)" }
-          }
-        )
-      ))
-    ),
-    /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, style: { color: getThemedClass("-icon-input"), paddingRight: "0.7rem" } })
-  ));
-}
-SingleSelect.autoFill = autoFillInput;
-function autoFillInput(value, elName, list2) {
-  const inp = document.querySelector(`[name="${elName}"]`);
-  inp.value = `${value}`;
-  const filtered = list2.find((item) => item.value == value);
-  const el = document.querySelector(`.${elName}-keyword`);
-  el == null ? void 0 : el.setAttribute("placeholder", `${filtered == null ? void 0 : filtered.label}`);
-}
-var input2 = "text-input peer ... w-full";
-
-// src/components/Tooltip.tsx
-import React5 from "react";
-function Tooltip({
-  children,
-  text,
-  position = "top"
-}) {
-  function getAccent() {
-    const mapping = {
-      top,
-      bottom,
-      left,
-      right
-    };
-    return mapping[position];
-  }
-  return /* @__PURE__ */ React5.createElement("div", { className: "relative" }, /* @__PURE__ */ React5.createElement("div", { className: "peer" }, children), /* @__PURE__ */ React5.createElement("span", { className: `tooltip-text ${getAccent()}` }, text));
-}
-var top = "bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] ";
-var bottom = "right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] ";
-var right = "left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]";
-var left = "right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]";
-
-// src/components/NavTabClient.tsx
-import React6 from "react";
-function NavTabClient({
-  items,
-  state
-}) {
-  return /* @__PURE__ */ React6.createElement("nav", { className: "navtab__wrapper" }, items.map(({ label, value }) => /* @__PURE__ */ React6.createElement(
-    "button",
-    {
-      key: value,
-      className: `navtab__item ${state.active == value ? "navtab__item__active" : "hover:bg-[var(--color-border)]/50"}`,
-      onClick: () => state.setActive(value)
-    },
-    label
-  )));
-}
-
-// src/components/Card.tsx
-import React7 from "react";
-function Card({ children, className }) {
-  return /* @__PURE__ */ React7.createElement("div", { className: `card ${className}` }, children);
-}
-var Footer = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ React7.createElement("div", { className: `${className} border-t border-t-[var(--color-border)]` }, children);
-};
-Card.Footer = Footer;
-
-// src/components/Toast.tsx
-import React8 from "react";
-import { FontAwesomeIcon as FontAwesomeIcon5 } from "@fortawesome/react-fontawesome";
-import {
-  faCheckCircle,
-  faInfoCircle,
-  faQuestionCircle,
-  faXmarkCircle
-} from "@fortawesome/free-solid-svg-icons";
-function Toast({
-  title,
-  description,
-  type = "info",
-  className
-}) {
-  return /* @__PURE__ */ React8.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement("div", { style: { background: getColor(type) }, className: bullet }), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ React8.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ React8.createElement("div", { className: `toast__icon toast__icon__${type}` })), /* @__PURE__ */ React8.createElement(
-    "p",
-    {
-      className: "toast__bar toast-bar-animate",
-      style: { background: getColor(type) }
-    }
-  ));
-}
-var Inline = ({
-  className,
-  text,
-  type
-}) => {
-  return /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      className: `toast__inline ${className}`,
-      style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
-    },
-    /* @__PURE__ */ React8.createElement(
-      FontAwesomeIcon5,
-      {
-        icon: getIcon(type),
-        className: "text-[1.3rem]",
-        style: { color: getColor(type) }
-      }
-    ),
-    /* @__PURE__ */ React8.createElement("p", null, text)
-  );
-};
-Toast.Inline = Inline;
-function getColor(type) {
-  return `var(--color-${type})`;
-}
-function getIcon(type) {
-  const mapping = {
-    warning: faQuestionCircle,
-    info: faInfoCircle,
-    danger: faXmarkCircle,
-    success: faCheckCircle
-  };
-  return mapping[type];
-}
-var bullet = "w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]";
-
-// src/components/Expandable.tsx
-import React9 from "react";
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as FontAwesomeIcon6 } from "@fortawesome/react-fontawesome";
-function Expandable({
-  children,
-  title,
-  className,
-  isOpen
-}) {
-  const name = title.replace(" ", "");
-  return /* @__PURE__ */ React9.createElement("div", { className: `expandable ${className}` }, /* @__PURE__ */ React9.createElement(
-    "input",
-    {
-      id: name,
-      type: "checkbox",
-      defaultChecked: isOpen,
-      className: "opacity-[0] peer absolute top-0 ex-title"
-    }
-  ), /* @__PURE__ */ React9.createElement(FontAwesomeIcon6, { icon: faCaretRight, className: "expandable__icon" }), /* @__PURE__ */ React9.createElement("label", { htmlFor: name, className: "expandable__title" }, title), /* @__PURE__ */ React9.createElement("div", { className: "expandable__body" }, /* @__PURE__ */ React9.createElement("div", { className: "p-[0.75rem] px-[1rem]" }, children)));
-}
-
-// src/components/MultiSelect.tsx
-import React10, { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
-import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawesome";
-import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
-function MultiSelect(_a) {
-  var _b = _a, {
-    state,
-    label,
-    labelHtml
-  } = _b, attr = __objRest(_b, [
-    "state",
-    "label",
-    "labelHtml"
-  ]);
-  const { options = [], stringOptions = [], isdarkmode } = attr;
-  const [keyword, setKeyword] = useState2("");
-  const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
-  const placeholderClass = `${input3} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
-  const availableOptions = useMemo2(() => {
-    const isDefaultOption = options && options.length > 0;
-    if (!isDefaultOption)
-      return stringOptions.map((opt) => ({ label: opt, value: opt }));
-    return options;
-  }, [options, stringOptions]);
-  function getFiltered() {
-    return availableOptions.filter(
-      ({ label: label2, value }) => (label2 + "").toLowerCase().includes(keyword.toLowerCase()) || (value + "").toLowerCase().includes(keyword.toLowerCase())
-    );
-  }
-  function selectItem({ label: label2, value }) {
-    state.select((prev) => {
-      const isItemExist2 = prev.find((item) => item.value == value);
-      if (isItemExist2) {
-        return prev.filter((item) => item.value != value);
-      }
-      return [...prev, { label: label2, value }];
-    });
-  }
-  function isItemExist(value) {
-    return state.value.find((item) => item.value == value);
-  }
-  const selectUnSelectAll = useCallback(() => {
-    const isAllSelected = state.value.length == availableOptions.length;
-    state.select(isAllSelected ? [] : availableOptions);
-  }, [state.value]);
-  function getThemedClass(prefix) {
-    return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
-  }
-  return /* @__PURE__ */ React10.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ React10.createElement(
-    "label",
-    {
-      htmlFor: labelHtml,
-      className: "text-input__label",
-      style: { color: getThemedClass("-text-secondary") }
-    },
-    label
-  ), /* @__PURE__ */ React10.createElement(
-    "div",
-    {
-      className: "text-input__wrapper relative",
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    /* @__PURE__ */ React10.createElement(
-      "input",
-      {
-        type: "search",
-        value: keyword,
-        autoComplete: "off",
-        className: `${input3} ${placeholderClass}`,
-        onChange: (e) => setKeyword(e.target.value),
-        placeholder: `${state.value.length} Dipilih`,
-        style: {
-          color: state.value.length > 0 ? getThemedClass("-text-primary") : void 0
-        }
-      }
-    ),
-    /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        className: "select-item__wrapper select-multiple__wrapper",
-        style: {
-          borderColor: getThemedClass("-border"),
-          background: getThemedClass("-bg-surface")
-        }
-      },
-      getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement(
-        "button",
-        {
-          disabled: true,
-          className: "select-item",
-          style: { color: "var(--color-danger)" }
-        },
-        "Tidak ada Item"
-      ),
-      getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ React10.createElement(
-        "button",
-        {
-          key: value,
-          type: "button",
-          onClick: () => selectItem({ label: label2, value }),
-          className: `select-item ${optionHoverClass}`,
-          style: { color: getThemedClass("-text-secondary") }
-        },
-        label2,
-        isItemExist(value) && /* @__PURE__ */ React10.createElement(
-          FontAwesomeIcon7,
-          {
-            icon: faCheck3,
-            style: { color: "var(--color-info)" }
-          }
-        )
-      ))
-    ),
-    /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        type: "button",
-        className: "cursor-pointer",
-        onClick: selectUnSelectAll
-      },
-      /* @__PURE__ */ React10.createElement(
-        FontAwesomeIcon7,
-        {
-          icon: faListCheck,
-          style: {
-            color: getThemedClass("-icon-input"),
-            paddingRight: "0.7rem",
-            fontSize: "1.2rem"
-          }
-        }
-      )
-    )
-  ));
-}
-var input3 = "text-input peer ... w-full";
-
-// src/components/ThemeToggle.tsx
-import React11 from "react";
-function ThemeToggle(attr) {
-  return /* @__PURE__ */ React11.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ React11.createElement(
-    "label",
-    {
-      htmlFor: `${attr.id || "theme-toggle"}`,
-      className: "slider__wrapper slider-theme slider-theme-light relative"
-    },
-    /* @__PURE__ */ React11.createElement(
-      "input",
-      __spreadProps(__spreadValues({
-        id: "theme-toggle"
-      }, attr), {
-        type: "checkbox",
-        className: "peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute"
-      })
-    ),
-    /* @__PURE__ */ React11.createElement("span", { className: "slider-theme__bullet" })
-  ));
-}
-
-// src/components/Dashboard.tsx
-import React12, { useState as useState3 } from "react";
-var list = [
-  { label: "Option 1", value: "option1" },
-  { label: "Option 2", value: "option2" },
-  { label: "Option 3", value: "option3" }
-];
-var stringList = ["option1", "option2", "option3"];
-function Dashboard() {
-  const [selectedItem, setSelectedItem] = useState3([]);
-  const [sel, setSel] = useState3({ label: "", value: "" });
-  function updateState(item) {
-    const filtered = list.find(({ value }) => value == item);
-    filtered && setSel(filtered);
-  }
-  return /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-[1rem]" }, /* @__PURE__ */ React12.createElement(
-    MultiSelect,
-    {
-      isdarkmode: true,
-      label: "Multi Select",
-      stringOptions: stringList,
-      state: { value: selectedItem, select: setSelectedItem }
-    }
-  ), /* @__PURE__ */ React12.createElement(
-    SingleSelect,
-    {
-      label: "Single Select",
-      name: "newinput",
-      stringOptions: stringList,
-      placeholder: "-- Pilih Status --",
-      value: sel.value
-    }
-  ));
-}
-
-// src/components/Badge.tsx
-import React13 from "react";
-function Badge({
-  text,
-  type,
-  className
-}) {
-  return /* @__PURE__ */ React13.createElement("div", { className: "badge__wrapper" }, /* @__PURE__ */ React13.createElement(
-    "span",
-    {
-      style: {
-        background: `var(--color-${type})`
-      },
-      className: `badge ${className}`
-    },
-    text
-  ));
-}
-
-// src/components/Skeleton.tsx
-import React14 from "react";
-function Skeleton({ className }) {
-  return /* @__PURE__ */ React14.createElement("div", { className: `${className} skeleton` }, /* @__PURE__ */ React14.createElement("span", { className: "skeleton__item skeleton-slide" }));
-}
-
-// src/components/Navigation.tsx
-import React15 from "react";
-function Navigation() {
-  return /* @__PURE__ */ React15.createElement("nav", null);
-}
-var URLNavigation = (props) => {
-  const Component = props.CustomComponent || "a";
-  function getAnchorClass(href) {
-    return href === props.activeUrl ? "bg-[var(--color-primary-soft)] text-[var(--color-primary)]" : "text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40";
-  }
-  return /* @__PURE__ */ React15.createElement("nav", { className: `nav__wrapper ${props.outerclass}` }, props.list.map((prop) => /* @__PURE__ */ React15.createElement(
-    Component,
-    __spreadValues({
-      key: prop.href,
-      className: `${base__anchor} ${getAnchorClass(prop.href)}`
-    }, prop),
-    prop.label
-  )));
-};
-Navigation.URL = URLNavigation;
-var base__anchor = "p-[0.8rem] h-full grid items-center 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();
-        secondaryAction && secondaryAction();
-      },
-      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,
-  NavTabClient,
-  Navigation,
-  SingleSelect,
-  Skeleton,
-  Slider,
-  TextInput,
-  ThemeToggle,
-  Toast,
-  Tooltip
-};
-//# sourceMappingURL=index.mjs.map