@safestrong/ppa-component-library 1.9.3 → 1.9.4

package/dist/index.js

@@ -1,788 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Badge: () => Badge,
-  Button: () => Button,
-  Card: () => Card,
-  Confirmation: () => Confirmation,
-  Dashboard: () => Dashboard,
-  Expandable: () => Expandable,
-  MultiSelect: () => MultiSelect,
-  NavTabClient: () => NavTabClient,
-  Navigation: () => Navigation,
-  SingleSelect: () => SingleSelect,
-  Skeleton: () => Skeleton,
-  Slider: () => Slider,
-  TextInput: () => TextInput,
-  ThemeToggle: () => ThemeToggle,
-  Toast: () => Toast,
-  Tooltip: () => Tooltip
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/Button.tsx
-var import_react = __toESM(require("react"));
-var import_react_fontawesome = require("@fortawesome/react-fontawesome");
-var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
-function Button(_a) {
-  var _b = _a, {
-    label,
-    icon,
-    isLoading,
-    btnType,
-    className
-  } = _b, rest = __objRest(_b, [
-    "label",
-    "icon",
-    "isLoading",
-    "btnType",
-    "className"
-  ]);
-  const buttonIcon = isLoading ? import_free_solid_svg_icons.faCircleNotch : icon;
-  const loadingLabel = label && isLoading ? "Memproses ..." : "";
-  return /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement(
-      import_react_fontawesome.FontAwesomeIcon,
-      {
-        icon: buttonIcon,
-        className: `text-[1.2rem] ${label && "mr-[0.3rem]"} ${isLoading && "animate-spin"}`
-      }
-    ),
-    isLoading ? loadingLabel : label
-  );
-}
-var IconButton = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    __spreadProps(__spreadValues({}, props), {
-      className: `${props.className} ${props.label ? "max-w-[content] px-[0.8rem]" : ""} icon__button`
-    }),
-    props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }),
-    props.label && /* @__PURE__ */ import_react.default.createElement("span", { className: "inline-block ml-[0.8rem] text-[1rem]" }, props.label)
-  );
-};
-var IconButtonGroup = ({ list: list2 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "icon__button_group" }, list2.map((props, idx) => /* @__PURE__ */ import_react.default.createElement("button", __spreadValues({ key: idx + 1, className: getBtnClass(idx) }, props), props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }), props.isNotif && /* @__PURE__ */ import_react.default.createElement("span", { className: "btn__notif_badge" }))));
-};
-var SSOButton = ({ href, btnclass }) => {
-  return /* @__PURE__ */ import_react.default.createElement("a", { href, className: `sso-button ${btnclass}` }, /* @__PURE__ */ import_react.default.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
-var import_react2 = __toESM(require("react"));
-var import_react_fontawesome2 = require("@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__ */ import_react2.default.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ import_react2.default.createElement(
-    "label",
-    {
-      htmlFor: labelFor,
-      className: "text-input__label",
-      style: {
-        color: getThemedClass("-text-secondary")
-      }
-    },
-    label
-  ), /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      className: `text-input__wrapper overflow-hidden ${attr.className}`,
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    icon && /* @__PURE__ */ import_react2.default.createElement(import_react_fontawesome2.FontAwesomeIcon, { icon, className: input__icon }),
-    /* @__PURE__ */ import_react2.default.createElement(
-      "input",
-      __spreadProps(__spreadValues({}, attr), {
-        className: `text-input w-full ${icon && "!pl-[0.3rem]"} ${inputclass}`,
-        style: {
-          color: getThemedClass("-text-primary")
-        }
-      })
-    )
-  ));
-}
-
-// src/components/Slider.tsx
-var import_react3 = __toESM(require("react"));
-var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
-var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
-function Slider(attr) {
-  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "slider__wrapper group relative" }, /* @__PURE__ */ import_react3.default.createElement("input", __spreadValues({ id: "slider", type: "checkbox", className: input }, attr)), /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: attr.id || "slider", className: "slider" }, /* @__PURE__ */ import_react3.default.createElement(
-    import_react_fontawesome3.FontAwesomeIcon,
-    {
-      icon: import_free_solid_svg_icons2.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
-var import_react4 = __toESM(require("react"));
-var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
-var import_free_solid_svg_icons3 = require("@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] = (0, import_react4.useState)("");
-  const [selected, setSelected] = (0, import_react4.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 = (0, import_react4.useMemo)(() => {
-    let defaultOptions = options && options.length > 0;
-    if (!defaultOptions)
-      return stringOptions.map((opt) => ({ label: opt, value: opt }));
-    return options;
-  }, [options, stringOptions]);
-  const filteredOptions = (0, import_react4.useMemo)(() => {
-    return availableOptions.filter(
-      ({ label, value }) => (label + "").toLowerCase().includes(keyword.toLowerCase()) || (value + "").toLowerCase().includes(keyword.toLowerCase())
-    );
-  }, [keyword, availableOptions]);
-  (0, import_react4.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__ */ 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,
-      style: { color: getThemedClass("-text-secondary") }
-    },
-    attrInput.label
-  ), /* @__PURE__ */ import_react4.default.createElement(
-    "div",
-    {
-      className: `${attrInput.className} text-input__wrapper relative`,
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    /* @__PURE__ */ import_react4.default.createElement(
-      "input",
-      __spreadProps(__spreadValues(__spreadValues({
-        type: "hidden"
-      }, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
-        value: (_b = attrInput.value) != null ? _b : selected.value
-      })
-    ),
-    /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
-      "div",
-      {
-        className: "select-item__wrapper",
-        style: {
-          borderColor: getThemedClass("-border"),
-          background: getThemedClass("-bg-surface")
-        }
-      },
-      filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement(
-        "button",
-        {
-          disabled: true,
-          className: "select-item",
-          style: { color: "var(--color-danger)" }
-        },
-        "Tidak ada Item"
-      ),
-      filteredOptions.map(({ label, value }) => /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
-          import_react_fontawesome4.FontAwesomeIcon,
-          {
-            icon: import_free_solid_svg_icons3.faCheck,
-            style: { color: "var(--color-info)" }
-          }
-        )
-      ))
-    ),
-    /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.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
-var import_react5 = __toESM(require("react"));
-function Tooltip({
-  children,
-  text,
-  position = "top"
-}) {
-  function getAccent() {
-    const mapping = {
-      top,
-      bottom,
-      left,
-      right
-    };
-    return mapping[position];
-  }
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "peer" }, children), /* @__PURE__ */ import_react5.default.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
-var import_react6 = __toESM(require("react"));
-function NavTabClient({
-  items,
-  state
-}) {
-  return /* @__PURE__ */ import_react6.default.createElement("nav", { className: "navtab__wrapper" }, items.map(({ label, value }) => /* @__PURE__ */ import_react6.default.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
-var import_react7 = __toESM(require("react"));
-function Card({ children, className }) {
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: `card ${className}` }, children);
-}
-var Footer = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: `${className} border-t border-t-[var(--color-border)]` }, children);
-};
-Card.Footer = Footer;
-
-// src/components/Toast.tsx
-var import_react8 = __toESM(require("react"));
-var import_react_fontawesome5 = require("@fortawesome/react-fontawesome");
-var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
-function Toast({
-  title,
-  description,
-  type = "info",
-  className
-}) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { background: getColor(type) }, className: bullet }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__icon toast__icon__${type}` })), /* @__PURE__ */ import_react8.default.createElement(
-    "p",
-    {
-      className: "toast__bar toast-bar-animate",
-      style: { background: getColor(type) }
-    }
-  ));
-}
-var Inline = ({
-  className,
-  text,
-  type
-}) => {
-  return /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: `toast__inline ${className}`,
-      style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_react_fontawesome5.FontAwesomeIcon,
-      {
-        icon: getIcon(type),
-        className: "text-[1.3rem]",
-        style: { color: getColor(type) }
-      }
-    ),
-    /* @__PURE__ */ import_react8.default.createElement("p", null, text)
-  );
-};
-Toast.Inline = Inline;
-function getColor(type) {
-  return `var(--color-${type})`;
-}
-function getIcon(type) {
-  const mapping = {
-    warning: import_free_solid_svg_icons4.faQuestionCircle,
-    info: import_free_solid_svg_icons4.faInfoCircle,
-    danger: import_free_solid_svg_icons4.faXmarkCircle,
-    success: import_free_solid_svg_icons4.faCheckCircle
-  };
-  return mapping[type];
-}
-var bullet = "w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]";
-
-// src/components/Expandable.tsx
-var import_react9 = __toESM(require("react"));
-var import_free_solid_svg_icons5 = require("@fortawesome/free-solid-svg-icons");
-var import_react_fontawesome6 = require("@fortawesome/react-fontawesome");
-function Expandable({
-  children,
-  title,
-  className,
-  isOpen
-}) {
-  const name = title.replace(" ", "");
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className: `expandable ${className}` }, /* @__PURE__ */ import_react9.default.createElement(
-    "input",
-    {
-      id: name,
-      type: "checkbox",
-      defaultChecked: isOpen,
-      className: "opacity-[0] peer absolute top-0 ex-title"
-    }
-  ), /* @__PURE__ */ import_react9.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon: import_free_solid_svg_icons5.faCaretRight, className: "expandable__icon" }), /* @__PURE__ */ import_react9.default.createElement("label", { htmlFor: name, className: "expandable__title" }, title), /* @__PURE__ */ import_react9.default.createElement("div", { className: "expandable__body" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "p-[0.75rem] px-[1rem]" }, children)));
-}
-
-// src/components/MultiSelect.tsx
-var import_react10 = __toESM(require("react"));
-var import_react_fontawesome7 = require("@fortawesome/react-fontawesome");
-var import_free_solid_svg_icons6 = require("@fortawesome/free-solid-svg-icons");
-function MultiSelect(_a) {
-  var _b = _a, {
-    state,
-    label,
-    labelHtml
-  } = _b, attr = __objRest(_b, [
-    "state",
-    "label",
-    "labelHtml"
-  ]);
-  const { options = [], stringOptions = [], isdarkmode } = attr;
-  const [keyword, setKeyword] = (0, import_react10.useState)("");
-  const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
-  const placeholderClass = `${input3} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
-  const availableOptions = (0, import_react10.useMemo)(() => {
-    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 = (0, import_react10.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__ */ import_react10.default.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ import_react10.default.createElement(
-    "label",
-    {
-      htmlFor: labelHtml,
-      className: "text-input__label",
-      style: { color: getThemedClass("-text-secondary") }
-    },
-    label
-  ), /* @__PURE__ */ import_react10.default.createElement(
-    "div",
-    {
-      className: "text-input__wrapper relative",
-      style: {
-        borderColor: getThemedClass("-border"),
-        background: getThemedClass("-bg-surface")
-      }
-    },
-    /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement(
-      "div",
-      {
-        className: "select-item__wrapper select-multiple__wrapper",
-        style: {
-          borderColor: getThemedClass("-border"),
-          background: getThemedClass("-bg-surface")
-        }
-      },
-      getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement(
-        "button",
-        {
-          disabled: true,
-          className: "select-item",
-          style: { color: "var(--color-danger)" }
-        },
-        "Tidak ada Item"
-      ),
-      getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ import_react10.default.createElement(
-        "button",
-        {
-          key: value,
-          type: "button",
-          onClick: () => selectItem({ label: label2, value }),
-          className: `select-item ${optionHoverClass}`,
-          style: { color: getThemedClass("-text-secondary") }
-        },
-        label2,
-        isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
-          import_react_fontawesome7.FontAwesomeIcon,
-          {
-            icon: import_free_solid_svg_icons6.faCheck,
-            style: { color: "var(--color-info)" }
-          }
-        )
-      ))
-    ),
-    /* @__PURE__ */ import_react10.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "cursor-pointer",
-        onClick: selectUnSelectAll
-      },
-      /* @__PURE__ */ import_react10.default.createElement(
-        import_react_fontawesome7.FontAwesomeIcon,
-        {
-          icon: import_free_solid_svg_icons6.faListCheck,
-          style: {
-            color: getThemedClass("-icon-input"),
-            paddingRight: "0.7rem",
-            fontSize: "1.2rem"
-          }
-        }
-      )
-    )
-  ));
-}
-var input3 = "text-input peer ... w-full";
-
-// src/components/ThemeToggle.tsx
-var import_react11 = __toESM(require("react"));
-function ThemeToggle(attr) {
-  return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center h-[3rem]" }, /* @__PURE__ */ import_react11.default.createElement(
-    "label",
-    {
-      htmlFor: `${attr.id || "theme-toggle"}`,
-      className: "slider__wrapper slider-theme slider-theme-light relative"
-    },
-    /* @__PURE__ */ import_react11.default.createElement(
-      "input",
-      __spreadProps(__spreadValues({
-        id: "theme-toggle"
-      }, attr), {
-        type: "checkbox",
-        className: "peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute"
-      })
-    ),
-    /* @__PURE__ */ import_react11.default.createElement("span", { className: "slider-theme__bullet" })
-  ));
-}
-
-// src/components/Dashboard.tsx
-var import_react12 = __toESM(require("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] = (0, import_react12.useState)([]);
-  const [sel, setSel] = (0, import_react12.useState)({ label: "", value: "" });
-  function updateState(item) {
-    const filtered = list.find(({ value }) => value == item);
-    filtered && setSel(filtered);
-  }
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-[1rem]" }, /* @__PURE__ */ import_react12.default.createElement(
-    MultiSelect,
-    {
-      isdarkmode: true,
-      label: "Multi Select",
-      stringOptions: stringList,
-      state: { value: selectedItem, select: setSelectedItem }
-    }
-  ), /* @__PURE__ */ import_react12.default.createElement(
-    SingleSelect,
-    {
-      label: "Single Select",
-      name: "newinput",
-      stringOptions: stringList,
-      placeholder: "-- Pilih Status --",
-      value: sel.value
-    }
-  ));
-}
-
-// src/components/Badge.tsx
-var import_react13 = __toESM(require("react"));
-function Badge({
-  text,
-  type,
-  className
-}) {
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "badge__wrapper" }, /* @__PURE__ */ import_react13.default.createElement(
-    "span",
-    {
-      style: {
-        background: `var(--color-${type})`
-      },
-      className: `badge ${className}`
-    },
-    text
-  ));
-}
-
-// src/components/Skeleton.tsx
-var import_react14 = __toESM(require("react"));
-function Skeleton({ className }) {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `${className} skeleton` }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "skeleton__item skeleton-slide" }));
-}
-
-// src/components/Navigation.tsx
-var import_react15 = __toESM(require("react"));
-function Navigation() {
-  return /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("nav", { className: `nav__wrapper ${props.outerclass}` }, props.list.map((prop) => /* @__PURE__ */ import_react15.default.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
-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,
-  NavTabClient,
-  Navigation,
-  SingleSelect,
-  Skeleton,
-  Slider,
-  TextInput,
-  ThemeToggle,
-  Toast,
-  Tooltip
-});
-//# sourceMappingURL=index.js.map