@safestrong/ppa-component-library 1.0.0 → 1.1.1

package/dist/index.d.mts

@@ -0,0 +1,98 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: IconProp;
+    label: string;
+    btnType?: "primary" | "secondary" | "tertiary";
+    isLoading?: boolean;
+};
+declare function Button({ label, icon, isLoading, btnType, className, ...rest }: Readonly<Button>): React.JSX.Element;
+
+declare function TextInput({ label, labelFor, icon, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    labelFor?: string;
+    icon?: IconProp;
+}>): React.JSX.Element;
+
+declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
+
+type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    labelHtml?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+};
+declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
+
+type Tooltip = {
+    children: React.ReactNode;
+    text: string;
+    position: "top" | "bottom" | "right" | "left";
+};
+declare function Tooltip({ children, text, position, }: Readonly<Tooltip>): React.JSX.Element;
+
+type Option$1 = {
+    label: string;
+    value: string;
+};
+declare function NavTabClient({ items, state, }: Readonly<{
+    items: Option$1[];
+    state: {
+        active: string;
+        setActive: (val: string) => void;
+    };
+}>): React.JSX.Element;
+
+type Card = {
+    children: React.ReactNode;
+    className: string;
+};
+declare function Card({ children, className }: Readonly<Card>): React.JSX.Element;
+declare namespace Card {
+    var Footer: ({ className, children, }: {
+        className?: string;
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+}
+
+type ToastType = "warning" | "success" | "info" | "danger";
+type Toast = {
+    title: string;
+    className?: string;
+    description: string;
+    type: ToastType;
+};
+declare function Toast({ title, description, type, className, }: Readonly<Toast>): React.JSX.Element;
+declare namespace Toast {
+    var Inline: ({ text, type }: {
+        text: string;
+        type: ToastType;
+    }) => React.JSX.Element;
+}
+
+type Expandable = {
+    children: React.ReactNode;
+    title: string;
+    className: string;
+    isOpen?: boolean;
+};
+declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
+
+type Option = {
+    value: string;
+    label: string;
+};
+declare function MultiSelect({ list, state, }: Readonly<{
+    list: Option[];
+    state: {
+        value: Option[];
+        select: (newVal: Option[]) => void;
+    };
+}>): React.JSX.Element;
+
+declare function Dashboard(): React.JSX.Element;
+
+export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };

package/dist/index.d.ts

@@ -1,8 +1,98 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
-declare function IconButton({ label }: Readonly<IconButtonProps>): React.JSX.Element;
-type IconButtonProps = {
+type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: IconProp;
     label: string;
+    btnType?: "primary" | "secondary" | "tertiary";
+    isLoading?: boolean;
 };
+declare function Button({ label, icon, isLoading, btnType, className, ...rest }: Readonly<Button>): React.JSX.Element;
 
-export { IconButton };
+declare function TextInput({ label, labelFor, icon, ...attr }: Readonly<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    labelFor?: string;
+    icon?: IconProp;
+}>): React.JSX.Element;
+
+declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
+
+type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    labelHtml?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+};
+declare function SingleSelect(attr: Readonly<SingleSelect>): React.JSX.Element;
+
+type Tooltip = {
+    children: React.ReactNode;
+    text: string;
+    position: "top" | "bottom" | "right" | "left";
+};
+declare function Tooltip({ children, text, position, }: Readonly<Tooltip>): React.JSX.Element;
+
+type Option$1 = {
+    label: string;
+    value: string;
+};
+declare function NavTabClient({ items, state, }: Readonly<{
+    items: Option$1[];
+    state: {
+        active: string;
+        setActive: (val: string) => void;
+    };
+}>): React.JSX.Element;
+
+type Card = {
+    children: React.ReactNode;
+    className: string;
+};
+declare function Card({ children, className }: Readonly<Card>): React.JSX.Element;
+declare namespace Card {
+    var Footer: ({ className, children, }: {
+        className?: string;
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+}
+
+type ToastType = "warning" | "success" | "info" | "danger";
+type Toast = {
+    title: string;
+    className?: string;
+    description: string;
+    type: ToastType;
+};
+declare function Toast({ title, description, type, className, }: Readonly<Toast>): React.JSX.Element;
+declare namespace Toast {
+    var Inline: ({ text, type }: {
+        text: string;
+        type: ToastType;
+    }) => React.JSX.Element;
+}
+
+type Expandable = {
+    children: React.ReactNode;
+    title: string;
+    className: string;
+    isOpen?: boolean;
+};
+declare function Expandable({ children, title, className, isOpen, }: Readonly<Expandable>): React.JSX.Element;
+
+type Option = {
+    value: string;
+    label: string;
+};
+declare function MultiSelect({ list, state, }: Readonly<{
+    list: Option[];
+    state: {
+        value: Option[];
+        select: (newVal: Option[]) => void;
+    };
+}>): React.JSX.Element;
+
+declare function Dashboard(): React.JSX.Element;
+
+export { Button, Card, Dashboard, Expandable, MultiSelect, NavTabClient, SingleSelect, Slider, TextInput, Toast, Tooltip };

package/dist/index.js

@@ -1,2 +1,423 @@
-"use strict";var t=require("react");exports.IconButton=function({label:e}){return t.createElement("button",null,e)};
-//# sourceMappingURL=index.js.map
+"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, {
+  Button: () => Button,
+  Card: () => Card,
+  Dashboard: () => Dashboard,
+  Expandable: () => Expandable,
+  MultiSelect: () => MultiSelect,
+  NavTabClient: () => NavTabClient,
+  SingleSelect: () => SingleSelect,
+  Slider: () => Slider,
+  TextInput: () => TextInput,
+  Toast: () => Toast,
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button.tsx
+var import_react = __toESM(require("react"));
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome = require("@fortawesome/react-fontawesome");
+function Button(_a) {
+  var _b = _a, {
+    label,
+    icon,
+    isLoading,
+    btnType,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "icon",
+    "isLoading",
+    "btnType",
+    "className"
+  ]);
+  const buttonIcon = isLoading ? import_free_solid_svg_icons.faRefresh : icon;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    __spreadProps(__spreadValues({}, rest), {
+      className: `${!icon && "py-[0.67rem]"} ${className} ${btnType == "secondary" && "btn__secondary"} btn__primary`
+    }),
+    buttonIcon && icon && /* @__PURE__ */ import_react.default.createElement(
+      import_react_fontawesome.FontAwesomeIcon,
+      {
+        icon: buttonIcon,
+        className: `text-[1.1rem] ${isLoading && "animate-spin"}`
+      }
+    ),
+    isLoading ? "Memproses ..." : label
+  );
+}
+
+// src/components/TextInput.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
+var input__icon = "px-[0.7rem] text-[1.1rem] text-[var(--color-icon-input)]";
+function TextInput(_a) {
+  var _b = _a, {
+    label,
+    labelFor,
+    icon
+  } = _b, attr = __objRest(_b, [
+    "label",
+    "labelFor",
+    "icon"
+  ]);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "group ..." }, label && /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ import_react2.default.createElement("div", { className: "text-input__wrapper" }, 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 ${attr.className} ${icon && "!pl-0"}`
+    })
+  )));
+}
+
+// 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: "slider__wrapper group" }, /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    __spreadProps(__spreadValues({}, attr), {
+      id: "slider",
+      type: "checkbox",
+      className: "peer ... w-[2rem] opacity-[0] cursor-pointer"
+    })
+  ), /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "slider", className: "slider" }, /* @__PURE__ */ import_react3.default.createElement(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faCheck, className: "text-[0.7rem]" })));
+}
+
+// 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 _a;
+  const [selected, setSelected] = (0, import_react4.useState)({ label: "", value: "" });
+  const [keyword, setKeyword] = (0, import_react4.useState)("");
+  const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
+  function getFiltered() {
+    return attr.options.filter(
+      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+    );
+  }
+  function selectItem({ label, value }) {
+    setSelected({ label, value });
+    setKeyword("");
+  }
+  return /* @__PURE__ */ import_react4.default.createElement("div", null, attr.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
+      value: (_a = attr.value) != null ? _a : selected.value,
+      type: "hidden"
+    })
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    __spreadValues({
+      value: keyword,
+      type: "search",
+      onChange: (e) => setKeyword(e.target.value),
+      className: "text-input peer ...",
+      placeholder: selected.value ? selected.label : "Cari opsi ..."
+    }, attr)
+  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
+    "button",
+    {
+      onClick: () => selectItem({ label, value }),
+      key: value,
+      className: "select-item"
+    },
+    label,
+    selected.value == value && /* @__PURE__ */ import_react4.default.createElement(
+      import_react_fontawesome4.FontAwesomeIcon,
+      {
+        icon: import_free_solid_svg_icons3.faCheck,
+        className: "text-[var(--color-primary)]"
+      }
+    )
+  ))), /* @__PURE__ */ import_react4.default.createElement(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faChevronDown, className: input__icon2 })));
+}
+var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+
+// src/components/Tooltip.tsx
+var import_react5 = __toESM(require("react"));
+function Tooltip({
+  children,
+  text,
+  position
+}) {
+  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"}`,
+      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,
+  className
+}) {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `${className} toast__wrapper group` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement(
+    import_react_fontawesome5.FontAwesomeIcon,
+    {
+      icon: getIcon(type),
+      className: "text-[1.2rem]",
+      style: { color: getColor(type) }
+    }
+  ), /* @__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(
+    import_react_fontawesome5.FontAwesomeIcon,
+    {
+      icon: getIcon(type),
+      className: "toast-bg__icon",
+      style: { color: getColor(type) }
+    }
+  )), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__bar", style: { background: getColor(type) } }));
+}
+var Inline = ({ text, type }) => {
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "div",
+    {
+      className: "toast__inline",
+      style: { background: `var(--color-${type}-soft)`, opacity: 0.9 }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_react_fontawesome5.FontAwesomeIcon,
+      {
+        icon: getIcon(type),
+        className: "text-[1.1rem]",
+        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];
+}
+
+// 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({
+  list: list2,
+  state
+}) {
+  const [keyword, setKeyword] = (0, import_react10.useState)("");
+  const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
+  function getFiltered() {
+    return list2.filter(
+      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+    );
+  }
+  function selectItem({ label, value }) {
+    state.select((prev) => {
+      const isItemExist2 = prev.find((item) => item.value == value);
+      if (isItemExist2) {
+        return prev.filter((item) => item.value != value);
+      }
+      return [...prev, { label, value }];
+    });
+  }
+  function isItemExist(value) {
+    return state.value.find((item) => item.value == value);
+  }
+  const selectUnSelectAll = (0, import_react10.useCallback)(() => {
+    const isAllSelected = state.value.length == list2.length;
+    state.select(isAllSelected ? [] : list2);
+  }, [state.value]);
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
+    "input",
+    {
+      value: keyword,
+      type: "search",
+      placeholder: `${state.value.length} Dipilih`,
+      className: "text-input peer ...",
+      onChange: (e) => setKeyword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ import_react10.default.createElement("button", { className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label, value }) => /* @__PURE__ */ import_react10.default.createElement(
+    "button",
+    {
+      onClick: () => selectItem({ label, value }),
+      key: value,
+      className: "select-item"
+    },
+    label,
+    isItemExist(value) && /* @__PURE__ */ import_react10.default.createElement(
+      import_react_fontawesome7.FontAwesomeIcon,
+      {
+        icon: import_free_solid_svg_icons6.faCheck,
+        className: "text-[var(--color-primary)]"
+      }
+    )
+  ))), /* @__PURE__ */ import_react10.default.createElement("button", { className: "cursor-pointer", onClick: selectUnSelectAll }, /* @__PURE__ */ import_react10.default.createElement(import_react_fontawesome7.FontAwesomeIcon, { icon: import_free_solid_svg_icons6.faListCheck, className: input__icon3 })));
+}
+var input__icon3 = "pr-[0.7rem] text-[var(--color-icon-input)]";
+
+// src/components/Dashboard.tsx
+var import_react11 = __toESM(require("react"));
+var list = [
+  { label: "Option 1", value: "option1" },
+  { label: "Option 2", value: "option2" },
+  { label: "Option 3", value: "option3" }
+];
+function Dashboard() {
+  const [selectedItem, setSelectedItem] = (0, import_react11.useState)([]);
+  return /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(
+    MultiSelect,
+    {
+      list,
+      state: { value: selectedItem, select: setSelectedItem }
+    }
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  Dashboard,
+  Expandable,
+  MultiSelect,
+  NavTabClient,
+  SingleSelect,
+  Slider,
+  TextInput,
+  Toast,
+  Tooltip
+});
+//# sourceMappingURL=index.js.map