@safestrong/ppa-component-library 1.6.5 → 1.6.6

package/dist/index.d.mts

@@ -28,7 +28,7 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelHtml?: string;
     placeholder?: string;
-    stateAction?: (param: any) => void;
+    stateaction?: (param: any) => void;
     outerclass?: string;
     options?: {
         label: string;

package/dist/index.d.ts

@@ -28,7 +28,7 @@ type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelHtml?: string;
     placeholder?: string;
-    stateAction?: (param: any) => void;
+    stateaction?: (param: any) => void;
     outerclass?: string;
     options?: {
         label: string;

package/dist/index.js

@@ -183,7 +183,6 @@ function SingleSelect(attr) {
     label: "",
     value: ""
   });
-  const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
   function selectItem({ label, value }, e) {
     const triggerManual = attrInput.onChange;
     if (triggerManual) {
@@ -192,9 +191,9 @@ function SingleSelect(attr) {
       });
     }
     setSelected({ label, value });
-    if (attr.stateAction) {
-      if (stringOptions) attr.stateAction(value);
-      if (options) attr.stateAction({ label, value });
+    if (attr.stateaction) {
+      if (stringOptions) attr.stateaction(value);
+      if (options) attr.stateaction({ label, value });
     }
     setKeyword("");
     setTimeout(() => {
@@ -217,9 +216,9 @@ function SingleSelect(attr) {
   }, [options, stringOptions]);
   const filteredOptions = (0, import_react4.useMemo)(() => {
     return availableOptions.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label, value }) => label.toLowerCase().includes(keyword.toLowerCase()) || value.toLowerCase().includes(keyword.toLowerCase())
     );
-  }, [inputKeyword, availableOptions]);
+  }, [keyword, availableOptions]);
   (0, import_react4.useEffect)(() => {
     attrInput.value && autoUpdateValue(attrInput.value);
   }, [attrInput.value]);
@@ -413,7 +412,6 @@ function MultiSelect(_a) {
   ]);
   const { options = [], stringOptions = [] } = attr;
   const [keyword, setKeyword] = (0, import_react10.useState)("");
-  const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
   const availableOptions = (0, import_react10.useMemo)(() => {
     const isDefaultOption = options && options.length > 0;
     if (!isDefaultOption)
@@ -422,7 +420,7 @@ function MultiSelect(_a) {
   }, [options, stringOptions]);
   function getFiltered() {
     return availableOptions.filter(
-      ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label: label2, value }) => label2.toLowerCase().includes(keyword.toLowerCase()) || value.toLowerCase().includes(keyword.toLowerCase())
     );
   }
   function selectItem({ label: label2, value }) {

package/dist/index.js.map

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

package/dist/index.mjs

@@ -124,7 +124,7 @@ function Slider(attr) {
 var input = "peer ... w-[3rem] h-[1.6rem] opacity-[0] cursor-pointer";
 
 // src/components/SingleSelect.tsx
-import React4, { useDeferredValue, useEffect, useMemo, useState } from "react";
+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) {
@@ -135,7 +135,6 @@ function SingleSelect(attr) {
     label: "",
     value: ""
   });
-  const inputKeyword = useDeferredValue(keyword);
   function selectItem({ label, value }, e) {
     const triggerManual = attrInput.onChange;
     if (triggerManual) {
@@ -144,9 +143,9 @@ function SingleSelect(attr) {
       });
     }
     setSelected({ label, value });
-    if (attr.stateAction) {
-      if (stringOptions) attr.stateAction(value);
-      if (options) attr.stateAction({ label, value });
+    if (attr.stateaction) {
+      if (stringOptions) attr.stateaction(value);
+      if (options) attr.stateaction({ label, value });
     }
     setKeyword("");
     setTimeout(() => {
@@ -169,9 +168,9 @@ function SingleSelect(attr) {
   }, [options, stringOptions]);
   const filteredOptions = useMemo(() => {
     return availableOptions.filter(
-      ({ label, value }) => label.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label, value }) => label.toLowerCase().includes(keyword.toLowerCase()) || value.toLowerCase().includes(keyword.toLowerCase())
     );
-  }, [inputKeyword, availableOptions]);
+  }, [keyword, availableOptions]);
   useEffect(() => {
     attrInput.value && autoUpdateValue(attrInput.value);
   }, [attrInput.value]);
@@ -355,7 +354,7 @@ function Expandable({
 }
 
 // src/components/MultiSelect.tsx
-import React10, { useCallback, useDeferredValue as useDeferredValue2, useMemo as useMemo2, useState as useState2 } from "react";
+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) {
@@ -370,7 +369,6 @@ function MultiSelect(_a) {
   ]);
   const { options = [], stringOptions = [] } = attr;
   const [keyword, setKeyword] = useState2("");
-  const inputKeyword = useDeferredValue2(keyword);
   const availableOptions = useMemo2(() => {
     const isDefaultOption = options && options.length > 0;
     if (!isDefaultOption)
@@ -379,7 +377,7 @@ function MultiSelect(_a) {
   }, [options, stringOptions]);
   function getFiltered() {
     return availableOptions.filter(
-      ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
+      ({ label: label2, value }) => label2.toLowerCase().includes(keyword.toLowerCase()) || value.toLowerCase().includes(keyword.toLowerCase())
     );
   }
   function selectItem({ label: label2, value }) {

package/dist/index.mjs.map

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

package/dist/styles.css

@@ -1640,4 +1640,4 @@ h3 {
       --tw-backdrop-sepia: initial;
     }
   }
-}
+}

package/package.json

@@ -1,78 +1,78 @@
-{
-  "devDependencies": {
-    "@chromatic-com/storybook": "3.2.2",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^15.3.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "8.4.2",
-    "@storybook/addon-interactions": "8.4.2",
-    "@storybook/addon-onboarding": "8.4.2",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/blocks": "8.4.2",
-    "@storybook/react": "8.4.2",
-    "@storybook/react-webpack5": "8.4.2",
-    "@storybook/test": "8.4.2",
-    "@tailwindcss/postcss": "^4.1.13",
-    "@types/react": "^18.3.12",
-    "autoprefixer": "^10.4.21",
-    "concurrently": "^9.2.0",
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.1",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "rollup": "^4.46.2",
-    "rollup-plugin-dts": "^6.2.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^8.4.2",
-    "tailwindcss": "^4.1.12",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
-  },
-  "name": "@safestrong/ppa-component-library",
-  "version": "1.6.5",
-  "description": "Collection of reusable components for any PPA web applications",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "dist/types",
-    "dist/img"
-  ],
-  "repository": "https://github.com/safestrong/ppa-component-library.git",
-  "author": "SS6 Development",
-  "license": "MIT",
-  "scripts": {
-    "build": "npm run build:css && tsup src/index.ts --dts --format esm,cjs --sourcemap",
-    "storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
-    "build-storybook": "storybook build",
-    "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
-    "dev:css": "postcss ./src/styles.css -o ./dist/styles.css --watch",
-    "rollup": "rollup -c --bundleConfigAsCjs"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./styles.css": "./dist/styles.css",
-    "./img/*": "./dist/img/*"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2"
-  }
-}
+{
+  "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-interactions": "8.4.2",
+    "@storybook/addon-onboarding": "8.4.2",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/blocks": "8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-webpack5": "8.4.2",
+    "@storybook/test": "8.4.2",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/react": "^18.3.12",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "rollup": "^4.46.2",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "storybook": "^8.4.2",
+    "tailwindcss": "^4.1.12",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "name": "@safestrong/ppa-component-library",
+  "version": "1.6.6",
+  "description": "Collection of reusable components for any PPA web applications",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist/types",
+    "dist/img"
+  ],
+  "repository": "https://github.com/safestrong/ppa-component-library.git",
+  "author": "SS6 Development",
+  "license": "MIT",
+  "scripts": {
+    "build": "npm run build:css && tsup src/index.ts --dts --format esm,cjs --sourcemap",
+    "storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
+    "build-storybook": "storybook build",
+    "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
+    "dev:css": "postcss ./src/styles.css -o ./dist/styles.css --watch",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./img/*": "./dist/img/*"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2"
+  }
+}

package/readme.md

@@ -1,146 +1,146 @@
-# 📦 PPA Component Library
-
-Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.
-
-> You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)
-
-## 💻 Installation
-
-```bash
-npm i @safestrong/ppa-component-library
-#OR
-yarn add @safestrong/ppa-component-library
-#OR
-pnpm add @safestrong/ppa-component-library
-```
-
-## 🕹 Usage
-
-Import the component first <br>
-`import { Button } from "@safestrong/ppa-component-library"` <br><br>
-Use component in your page or your own component <br>
-`<Button label="Click me" />`
-
-## 📂 List
-
-### Button - `<Button />`
-
-| Prop        | Type       | Required | Default | Description                        |
-| ----------- | ---------- | -------- | ------- | ---------------------------------- |
-| `label`     | `string`   | ✅ Yes   | —       | The text inside the button.        |
-| `isLoading` | `boolean`  | ❌ No    | false   | Loading state waiting              |
-| `btnType`   | `enum`     | ❌ No    | primary | `primary`, `secondary`, `tertiary` |
-| `icon`      | `IconProp` | ❌ No    | —       | Icon inside the button.            |
-| `className` | `string`   | ❌ No    | —       | Additional class for button.       |
-
-<hr>
-
-### Card - `<Card />`
-
-| Prop        | Type              | Required | Default | Description               |
-| ----------- | ----------------- | -------- | ------- | ------------------------- |
-| `children`  | `React.ReactNode` | ✅ Yes   | —       | Content inside.           |
-| `className` | `string`          | ❌ No    | -       | Additional class for card |
-
-<hr>
-
-### Text Input - `<TextInput />`
-
-| Prop       | Type       | Required | Default | Description                        |
-| ---------- | ---------- | -------- | ------- | ---------------------------------- |
-| `icon`     | `IconProp` | ❌ No    | —       | Icon inside text input             |
-| `label`    | `string`   | ❌ No    | -       | Additional label if needed         |
-| `labelFor` | `string`   | ❌ No    | -       | Label (if any) `htmlFor` attribute |
-
-<hr>
-
-### Toast - `<Toast />`
-
-| Prop          | Type     | Required | Default | Description                         |
-| ------------- | -------- | -------- | ------- | ----------------------------------- |
-| `title`       | `string` | ✅ Yes   | —       | Toast Title                         |
-| `description` | `string` | ✅ Yes   | -       | Description on toast body           |
-| `type`        | `enum`   | ❌ No    | `info`  | `info`,`warning`,`success`,`danger` |
-| `className`   | `string` | ❌ No    | -       | Additional className for Toast body |
-
-<hr>
-
-### Expandable - `<Expandable />`
-
-| Prop        | Type              | Required | Default | Description                     |
-| ----------- | ----------------- | -------- | ------- | ------------------------------- |
-| `title`     | `string`          | ✅ Yes   | —       | Title                           |
-| `children`  | `React.ReactNode` | ✅ Yes   | -       | Content inside                  |
-| `isOpen`    | `boolean`         | ❌ No    | false   | Auto show/expand content        |
-| `className` | `string`          | ❌ No    | -       | Additional class for Expandable |
-
-<hr>
-
-### Tooltip - `<Tooltip />`
-
-| Prop       | Type              | Required | Default | Description                      |
-| ---------- | ----------------- | -------- | ------- | -------------------------------- |
-| `children` | `React.ReactNode` | ✅ Yes   | —       | Text content                     |
-| `text`     | `string`          | ✅ Yes   | -       | Tooltip text                     |
-| `position` | `string`          | ❌ No    | `top`   | `top`, `bottom`, `right`, `left` |
-
-<hr>
-
-### Single Select - `<SingleSelect />` ✅ Client Component
-
-| Prop        | Type                             | Required | Default | Description                        |
-| ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
-| `label`     | `string`                         | ❌ No    | —       | Additional label                   |
-| `labelHtml` | `string`                         | ❌ No    | -       | Label (if any) `htmlFor` attribute |
-| `options`   | `{label:string, value:string}[]` | ❌ No    | -       | List Option                        |
-| `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |
-
-<hr>
-
-### Multi Select - `<MultiSelect />` ✅ Client Component
-
-| Prop    | Type                              | Required | Default | Description  |
-| ------- | --------------------------------- | -------- | ------- | ------------ |
-| `state` | `React.useState<{value, select}>` | ✅ Yes   | —       | Text content |
-| `options`  | `{label:string, value:string}[]`  | ❌ No   | -       | List Option  |
- `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |
-
-Example:
-
-```bash
-export default function Dashboard() {
-  const [selectedItem, setSelectedItem] = useState([]);
-  return (
-      <MultiSelect
-        list={list}
-        state={{ value: selectedItem, select: setSelectedItem }}
-      />
-  );
-}
-```
-
-<hr>
-
-### Slider - `<Slider />`
-
-| Prop                  | Type                  | Required | Default | Description                        |
-| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
-| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
-
-<hr>
-
-### Theme Toggle - `<ThemeToggle />`
-
-| Prop                  | Type                  | Required | Default | Description                        |
-| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
-| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
-
-<hr>
-
-### Tab Navigation - `<NavTabClient />` ✅ Client Component
-
-| Prop       | Type                             | Required | Default | Description  |
-| ---------- | -------------------------------- | -------- | ------- | ------------ |
-| `children` | `React.ReactNode`                | ✅ Yes   | —       | Text content |
-| `state`    | `string`                         | ✅ Yes   | -       | Tooltip text |
-| `items`    | `{label:string, value:string}[]` | ✅ Ye    | -       | List Option  |
+# 📦 PPA Component Library
+
+Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.
+
+> You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)
+
+## 💻 Installation
+
+```bash
+npm i @safestrong/ppa-component-library
+#OR
+yarn add @safestrong/ppa-component-library
+#OR
+pnpm add @safestrong/ppa-component-library
+```
+
+## 🕹 Usage
+
+Import the component first <br>
+`import { Button } from "@safestrong/ppa-component-library"` <br><br>
+Use component in your page or your own component <br>
+`<Button label="Click me" />`
+
+## 📂 List
+
+### Button - `<Button />`
+
+| Prop        | Type       | Required | Default | Description                        |
+| ----------- | ---------- | -------- | ------- | ---------------------------------- |
+| `label`     | `string`   | ✅ Yes   | —       | The text inside the button.        |
+| `isLoading` | `boolean`  | ❌ No    | false   | Loading state waiting              |
+| `btnType`   | `enum`     | ❌ No    | primary | `primary`, `secondary`, `tertiary` |
+| `icon`      | `IconProp` | ❌ No    | —       | Icon inside the button.            |
+| `className` | `string`   | ❌ No    | —       | Additional class for button.       |
+
+<hr>
+
+### Card - `<Card />`
+
+| Prop        | Type              | Required | Default | Description               |
+| ----------- | ----------------- | -------- | ------- | ------------------------- |
+| `children`  | `React.ReactNode` | ✅ Yes   | —       | Content inside.           |
+| `className` | `string`          | ❌ No    | -       | Additional class for card |
+
+<hr>
+
+### Text Input - `<TextInput />`
+
+| Prop       | Type       | Required | Default | Description                        |
+| ---------- | ---------- | -------- | ------- | ---------------------------------- |
+| `icon`     | `IconProp` | ❌ No    | —       | Icon inside text input             |
+| `label`    | `string`   | ❌ No    | -       | Additional label if needed         |
+| `labelFor` | `string`   | ❌ No    | -       | Label (if any) `htmlFor` attribute |
+
+<hr>
+
+### Toast - `<Toast />`
+
+| Prop          | Type     | Required | Default | Description                         |
+| ------------- | -------- | -------- | ------- | ----------------------------------- |
+| `title`       | `string` | ✅ Yes   | —       | Toast Title                         |
+| `description` | `string` | ✅ Yes   | -       | Description on toast body           |
+| `type`        | `enum`   | ❌ No    | `info`  | `info`,`warning`,`success`,`danger` |
+| `className`   | `string` | ❌ No    | -       | Additional className for Toast body |
+
+<hr>
+
+### Expandable - `<Expandable />`
+
+| Prop        | Type              | Required | Default | Description                     |
+| ----------- | ----------------- | -------- | ------- | ------------------------------- |
+| `title`     | `string`          | ✅ Yes   | —       | Title                           |
+| `children`  | `React.ReactNode` | ✅ Yes   | -       | Content inside                  |
+| `isOpen`    | `boolean`         | ❌ No    | false   | Auto show/expand content        |
+| `className` | `string`          | ❌ No    | -       | Additional class for Expandable |
+
+<hr>
+
+### Tooltip - `<Tooltip />`
+
+| Prop       | Type              | Required | Default | Description                      |
+| ---------- | ----------------- | -------- | ------- | -------------------------------- |
+| `children` | `React.ReactNode` | ✅ Yes   | —       | Text content                     |
+| `text`     | `string`          | ✅ Yes   | -       | Tooltip text                     |
+| `position` | `string`          | ❌ No    | `top`   | `top`, `bottom`, `right`, `left` |
+
+<hr>
+
+### Single Select - `<SingleSelect />` ✅ Client Component
+
+| Prop        | Type                             | Required | Default | Description                        |
+| ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
+| `label`     | `string`                         | ❌ No    | —       | Additional label                   |
+| `labelHtml` | `string`                         | ❌ No    | -       | Label (if any) `htmlFor` attribute |
+| `options`   | `{label:string, value:string}[]` | ❌ No    | -       | List Option                        |
+| `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |
+
+<hr>
+
+### Multi Select - `<MultiSelect />` ✅ Client Component
+
+| Prop    | Type                              | Required | Default | Description  |
+| ------- | --------------------------------- | -------- | ------- | ------------ |
+| `state` | `React.useState<{value, select}>` | ✅ Yes   | —       | Text content |
+| `options`  | `{label:string, value:string}[]`  | ❌ No   | -       | List Option  |
+ `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |
+
+Example:
+
+```bash
+export default function Dashboard() {
+  const [selectedItem, setSelectedItem] = useState([]);
+  return (
+      <MultiSelect
+        list={list}
+        state={{ value: selectedItem, select: setSelectedItem }}
+      />
+  );
+}
+```
+
+<hr>
+
+### Slider - `<Slider />`
+
+| Prop                  | Type                  | Required | Default | Description                        |
+| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
+| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
+
+<hr>
+
+### Theme Toggle - `<ThemeToggle />`
+
+| Prop                  | Type                  | Required | Default | Description                        |
+| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
+| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |
+
+<hr>
+
+### Tab Navigation - `<NavTabClient />` ✅ Client Component
+
+| Prop       | Type                             | Required | Default | Description  |
+| ---------- | -------------------------------- | -------- | ------- | ------------ |
+| `children` | `React.ReactNode`                | ✅ Yes   | —       | Text content |
+| `state`    | `string`                         | ✅ Yes   | -       | Tooltip text |
+| `items`    | `{label:string, value:string}[]` | ✅ Ye    | -       | List Option  |