@safestrong/ppa-component-library 1.9.4 → 1.10.0

package/dist/index.js

@@ -0,0 +1,815 @@
+"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) => {
+  const btnIcon = props.isloading ? import_free_solid_svg_icons.faCircleNotch : props.icon;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    __spreadProps(__spreadValues({}, props), {
+      disabled: props.disabled || props.isloading,
+      className: `${props.className} ${props.label ? "max-w-[content] px-[0.8rem]" : ""} icon__button`
+    }),
+    btnIcon && /* @__PURE__ */ import_react.default.createElement(
+      import_react_fontawesome.FontAwesomeIcon,
+      {
+        icon: btnIcon,
+        className: props.isloading ? "animate-spin" : ""
+      }
+    ),
+    props.label && /* @__PURE__ */ import_react.default.createElement("span", { className: "inline-block ml-[0.8rem] text-[1rem]" }, props.label)
+  );
+};
+var IconButtonGroup = ({ list: list2 }) => {
+  function getIcon2(props) {
+    return props.isloading ? import_free_solid_svg_icons.faCircleNotch : props.icon;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "icon__button_group" }, list2.map((props, idx) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    __spreadProps(__spreadValues({
+      key: idx + 1
+    }, props), {
+      disabled: props.disabled || props.isloading,
+      className: getBtnClass(idx)
+    }),
+    getIcon2(props) && /* @__PURE__ */ import_react.default.createElement(
+      import_react_fontawesome.FontAwesomeIcon,
+      {
+        icon: getIcon2(props),
+        className: props.isloading ? "animate-spin" : ""
+      }
+    ),
+    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