@safestrong/ppa-component-library 1.4.1 → 1.5.1

package/dist/index.js

@@ -112,7 +112,7 @@ function Button(_a) {
   );
 }
 var IconButton = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", __spreadValues({ className: "icon__button" }, props), props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }));
+  return /* @__PURE__ */ import_react.default.createElement("button", __spreadProps(__spreadValues({}, props), { className: `${props.className} icon__button` }), props.icon && /* @__PURE__ */ import_react.default.createElement(import_react_fontawesome.FontAwesomeIcon, { icon: props.icon }));
 };
 var IconButtonGroup = ({ list: list2 }) => {
   function getBtnClass(idx) {
@@ -312,21 +312,7 @@ function Toast({
   type = "info",
   className
 }) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement(
-    import_react_fontawesome5.FontAwesomeIcon,
-    {
-      icon: getIcon(type),
-      className: "text-[1.2rem]",
-      style: { color: getColor(type) }
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ import_react8.default.createElement(
-    import_react_fontawesome5.FontAwesomeIcon,
-    {
-      icon: getIcon(type),
-      className: "toast-bg__icon",
-      style: { color: getColor(type) }
-    }
-  )), /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "toast__body" }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { background: getColor(type) }, className: bullet }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__icon toast__icon__${type}` })), /* @__PURE__ */ import_react8.default.createElement(
     "p",
     {
       className: "toast__bar toast-bar-animate",
@@ -369,6 +355,7 @@ function getIcon(type) {
   };
   return mapping[type];
 }
+var bullet = "w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]";
 
 // src/components/Expandable.tsx
 var import_react9 = __toESM(require("react"));

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"],"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\";\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  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] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button className=\"icon__button\" {...props}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !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  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... 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\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\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 {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"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  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({ label, value }: { label: string; value: any }) {\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    setKeyword(\"\");\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, 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=\"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={() => selectItem({ label, value })}\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        <FontAwesomeIcon\n          icon={getIcon(type)}\n          className=\"text-[1.2rem]\"\n          style={{ color: getColor(type) }}\n        />\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <FontAwesomeIcon\n          icon={getIcon(type)}\n          className=\"toast-bg__icon\"\n          style={{ color: getColor(type) }}\n        />\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.2rem]\"\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","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  const inputKeyword = useDeferredValue(keyword);\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.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] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\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"]}
+{"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"],"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\";\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  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] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button {...props} className={`${props.className} icon__button`}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !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  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... 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\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\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 {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"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  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({ label, value }: { label: string; value: any }) {\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    setKeyword(\"\");\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, 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=\"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={() => selectItem({ label, value })}\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.2rem]\"\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  const inputKeyword = useDeferredValue(keyword);\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.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] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\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"]}

package/dist/index.mjs

@@ -65,7 +65,7 @@ function Button(_a) {
   );
 }
 var IconButton = (props) => {
-  return /* @__PURE__ */ React.createElement("button", __spreadValues({ className: "icon__button" }, props), props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }));
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props), { className: `${props.className} icon__button` }), props.icon && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }));
 };
 var IconButtonGroup = ({ list: list2 }) => {
   function getBtnClass(idx) {
@@ -270,21 +270,7 @@ function Toast({
   type = "info",
   className
 }) {
-  return /* @__PURE__ */ React8.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement(
-    FontAwesomeIcon5,
-    {
-      icon: getIcon(type),
-      className: "text-[1.2rem]",
-      style: { color: getColor(type) }
-    }
-  ), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ React8.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ React8.createElement(
-    FontAwesomeIcon5,
-    {
-      icon: getIcon(type),
-      className: "toast-bg__icon",
-      style: { color: getColor(type) }
-    }
-  )), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement("div", { className: `toast__wrapper group ${className}` }, /* @__PURE__ */ React8.createElement("div", { className: "toast__body" }, /* @__PURE__ */ React8.createElement("div", { style: { background: getColor(type) }, className: bullet }), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "toast__title" }, title), /* @__PURE__ */ React8.createElement("p", { className: "toast__description" }, description)), /* @__PURE__ */ React8.createElement("div", { className: `toast__icon toast__icon__${type}` })), /* @__PURE__ */ React8.createElement(
     "p",
     {
       className: "toast__bar toast-bar-animate",
@@ -327,6 +313,7 @@ function getIcon(type) {
   };
   return mapping[type];
 }
+var bullet = "w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]";
 
 // src/components/Expandable.tsx
 import React9 from "react";

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"],"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  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] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button className=\"icon__button\" {...props}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !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  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... 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\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\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 {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"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  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({ label, value }: { label: string; value: any }) {\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    setKeyword(\"\");\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, 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=\"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={() => selectItem({ label, value })}\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        <FontAwesomeIcon\n          icon={getIcon(type)}\n          className=\"text-[1.2rem]\"\n          style={{ color: getColor(type) }}\n        />\n        <div>\n          <p className=\"toast__title\">{title}</p>\n          <p className=\"toast__description\">{description}</p>\n        </div>\n        <FontAwesomeIcon\n          icon={getIcon(type)}\n          className=\"toast-bg__icon\"\n          style={{ color: getColor(type) }}\n        />\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.2rem]\"\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","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  const inputKeyword = useDeferredValue(keyword);\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.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] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\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"]}
+{"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"],"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  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] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n        />\n      )}\n      {isLoading ? \"Memproses ...\" : label}\n    </button>\n  );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n  return (\n    <button {...props} className={`${props.className} icon__button`}>\n      {props.icon && <FontAwesomeIcon icon={props.icon} />}\n    </button>\n  );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n  function getBtnClass(idx: number) {\n    return `icon__button !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  ...attr\n}: Readonly<\n  React.InputHTMLAttributes<HTMLInputElement> & {\n    label?: string;\n    labelFor?: string;\n    icon?: IconProp;\n  }\n>) {\n  return (\n    <div className=\"group ... 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\">\n        {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n        <input\n          {...attr}\n          className={`text-input w-full ${attr.className} ${\n            icon && \"!pl-[0.3rem]\"\n          }`}\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 {...attr} id=\"slider\" type=\"checkbox\" className={input} />\n        <label htmlFor=\"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  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({ label, value }: { label: string; value: any }) {\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    setKeyword(\"\");\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.toLowerCase())\n    );\n  }, [inputKeyword, 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=\"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={() => selectItem({ label, value })}\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.2rem]\"\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  const inputKeyword = useDeferredValue(keyword);\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(inputKeyword.toLowerCase()) ||\n        value.toLowerCase().includes(inputKeyword.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] transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\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"]}

package/dist/styles.css

@@ -194,6 +194,9 @@
   .top-\[-0\.2rem\] {
     top: -0.2rem;
   }
+  .top-\[-0\.7rem\] {
+    top: -0.7rem;
+  }
   .top-\[9rem\] {
     top: 9rem;
   }
@@ -209,6 +212,9 @@
   .bottom-full {
     bottom: 100%;
   }
+  .left-\[-0\.7rem\] {
+    left: -0.7rem;
+  }
   .left-\[0rem\] {
     left: 0rem;
   }
@@ -251,6 +257,9 @@
   .h-\[1\.6rem\] {
     height: 1.6rem;
   }
+  .h-\[2rem\] {
+    height: 2rem;
+  }
   .h-\[3rem\] {
     height: 3rem;
   }
@@ -341,6 +350,9 @@
   .rounded-\[0\.4rem\] {
     border-radius: 0.4rem;
   }
+  .rounded-\[50\%\] {
+    border-radius: 50%;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -538,10 +550,32 @@ html {
   color: var(--color-text-primary);
 }
 .slider-theme-light {
-  background-image: url("./img/light.png");
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/toggle-bg-light.svg");
 }
 .slider-theme:has(:checked) {
-  background-image: url("./img/dark.png") !important;
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/toggle-bg-dark.svg") !important;
+}
+.toast__icon {
+  position: absolute;
+  top: 1.7rem;
+  right: -1.2rem;
+  height: 60px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 80px;
+}
+.toast__icon__info {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/message-info.svg") !important;
+}
+.toast__icon__warning {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/message-warning.svg") !important;
+}
+.toast__icon__success {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/message-success.svg") !important;
+}
+.toast__icon__danger {
+  background-image: url("https://storage.ppa-ho.net/ppa-component-library/message-danger.svg") !important;
 }
 :root {
   --color-bg-surface: #fff;
@@ -642,10 +676,13 @@ html {
     }
   }
   .btn__secondary {
-    border-color: transparent;
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+    border-color: var(--color-primary-soft);
     --tw-gradient-from: var(--color-primary-soft);
     --tw-gradient-to: var(--color-primary-soft);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    padding-block: 0.845rem !important;
     color: var(--color-primary);
     &:hover {
       @media (hover: hover) {
@@ -677,6 +714,7 @@ html {
     border-width: 1px;
     border-color: var(--color-border);
     background-color: var(--color-bg-surface);
+    padding: 1.2rem;
     font-size: 1rem;
     color: var(--color-icon-input);
     &:hover {
@@ -687,6 +725,7 @@ html {
   }
   .icon__button_group {
     display: flex;
+    width: auto;
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
@@ -732,8 +771,8 @@ html {
   }
   .slider__wrapper {
     position: relative;
-    height: 1.6rem;
-    width: 3rem;
+    height: 1.5rem;
+    width: 2.7rem;
     cursor: pointer;
     border-radius: 2rem;
     background-color: var(--color-icon-input);
@@ -743,10 +782,10 @@ html {
   }
   .slider {
     position: absolute;
-    top: calc(var(--spacing) * 0);
+    top: 0.02rem;
     display: flex;
-    height: 1.3rem;
-    width: 1.3rem;
+    height: 1.13rem;
+    width: 1.13rem;
     --tw-translate-x: 0.2rem;
     --tw-translate-y: 0.15rem;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -760,12 +799,15 @@ html {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:is(:where(.peer):checked ~ *) {
-      --tw-translate-x: 1.5rem;
+      --tw-translate-x: 1.35rem;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
     &:is(:where(.peer):checked ~ *) {
       border-color: var(--color-primary);
     }
+    &:is(:where(.peer):checked ~ *) {
+      background-color: white;
+    }
     &:is(:where(.peer):checked ~ *) {
       color: var(--color-primary);
     }
@@ -947,10 +989,11 @@ html {
     position: relative;
     display: flex;
     gap: 0.9rem;
-    padding: 0.9rem;
+    padding: 1.2rem;
   }
   .toast__description {
     margin-top: 0.7rem;
+    width: 80%;
     color: var(--color-text-secondary);
   }
   .toast__bar {
@@ -1045,9 +1088,12 @@ html {
   }
   .slider-theme {
     display: block;
-    height: 1.5rem !important;
+    height: 1.67rem !important;
     width: 3rem !important;
     border-radius: 5rem;
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--color-white);
     background-size: contain;
     background-position: center;
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1060,17 +1106,17 @@ html {
   }
   .slider-theme__bullet {
     position: absolute;
-    top: 0.2rem;
+    top: 0.14rem;
     left: 0.2rem;
-    height: 1.1rem;
-    width: 1.1rem;
+    height: 1.13rem;
+    width: 1.13rem;
     border-radius: 50%;
     background-color: #fbd549;
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:is(:where(.peer):checked ~ *) {
-      --tw-translate-x: 1.47rem;
+      --tw-translate-x: 1.24rem;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
     &:is(:where(.peer):checked ~ *) {

package/package.json

@@ -35,7 +35,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "name": "@safestrong/ppa-component-library",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Collection of reusable components for any PPA web applications",
   "main": "dist/index.cjs",
   "module": "dist/index.js",