@safestrong/ppa-component-library 1.7.3 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +5 -1
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +214 -75
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +214 -75
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +31 -19
  8. package/package.json +13 -6
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\r\nexport { default as TextInput } from \"./components/TextInput\";\r\nexport { default as Slider } from \"./components/Slider\";\r\nexport { default as SingleSelect } from \"./components/SingleSelect\";\r\nexport { default as Tooltip } from \"./components/Tooltip\";\r\nexport { default as NavTabClient } from \"./components/NavTabClient\";\r\nexport { default as Card } from \"./components/Card\";\r\nexport { default as Toast } from \"./components/Toast\";\r\nexport { default as Expandable } from \"./components/Expandable\";\r\nexport { default as MultiSelect } from \"./components/MultiSelect\";\r\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\r\nexport { default as Dashboard } from \"./components/Dashboard\";\r\nexport { default as Badge } from \"./components/Badge\";\r\nexport { default as Skeleton } from \"./components/Skeleton\";\r\nexport { default as Navigation } from \"./components/Navigation\";\r\nexport { default as Confirmation } from \"./components/Confirmation\";\r\n","import React from \"react\";\r\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n icon?: IconProp;\r\n label?: string;\r\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\r\n isLoading?: boolean;\r\n};\r\n\r\nexport default function Button({\r\n label,\r\n icon,\r\n isLoading,\r\n btnType,\r\n className,\r\n ...rest\r\n}: Readonly<Button>) {\r\n const buttonIcon = isLoading ? faCircleNotch : icon;\r\n const loadingLabel = label && isLoading ? \"Memproses ...\" : \"\";\r\n return (\r\n <button\r\n {...rest}\r\n disabled={rest.disabled || isLoading}\r\n className={`${!icon && \"py-[0.84rem]\"} ${className} ${\r\n btnType == \"secondary\" && \"btn__secondary\"\r\n } btn__primary ${label ? \"\" : \"!p-[0.87rem]\"}`}\r\n >\r\n {buttonIcon && icon && (\r\n <FontAwesomeIcon\r\n icon={buttonIcon}\r\n className={`text-[1.2rem] ${label && \"mr-[0.3rem]\"} ${\r\n isLoading && \"animate-spin\"\r\n }`}\r\n />\r\n )}\r\n {isLoading ? loadingLabel : label}\r\n </button>\r\n );\r\n}\r\n\r\nconst IconButton = (props: Readonly<Button>) => {\r\n return (\r\n <button\r\n {...props}\r\n className={`${props.className} ${\r\n props.label ? \"max-w-[content] px-[0.8rem]\" : \"\"\r\n } icon__button`}\r\n >\r\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\r\n {props.label && (\r\n <span className=\"inline-block ml-[0.8rem] text-[1rem]\">\r\n {props.label}\r\n </span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\r\n return (\r\n <div className=\"icon__button_group\">\r\n {list.map((props, idx) => (\r\n <button key={idx + 1} className={getBtnClass(idx)} {...props}>\r\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\r\n </button>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nconst SSOButton = ({ href, btnclass }: { href: string; btnclass?: string }) => {\r\n return (\r\n <a href={href} className={`sso-button ${btnclass}`}>\r\n <img\r\n alt=\"logo\"\r\n className=\"sso-icon\"\r\n src=\"https://storage.ppa-ho.net/public/ppa-component-library/lock.png\"\r\n />{\" \"}\r\n Login dengan SSO\r\n </a>\r\n );\r\n};\r\n\r\nButton.IconButton = IconButton;\r\nButton.IconButtonGroup = IconButtonGroup;\r\nButton.SSOButton = SSOButton;\r\n\r\nfunction getBtnClass(idx: number) {\r\n return `icon__button !h-[2.95rem] !rounded-[0] border-[0] ${\r\n idx == 0 ? \"\" : \"border-l border-l-[var(--color-border)]\"\r\n }`;\r\n}\r\n","import React from \"react\";\r\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nconst input__icon =\r\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\r\n\r\nexport default function TextInput({\r\n label,\r\n labelFor,\r\n icon,\r\n outerclass,\r\n ...attr\r\n}: Readonly<\r\n React.InputHTMLAttributes<HTMLInputElement> & {\r\n label?: string;\r\n labelFor?: string;\r\n icon?: IconProp;\r\n outerclass?: string;\r\n }\r\n>) {\r\n return (\r\n <div className={`group ${outerclass} w-full`}>\r\n {label && (\r\n <label htmlFor={labelFor} className=\"text-input__label\">\r\n {label}\r\n </label>\r\n )}\r\n <div className={`text-input__wrapper overflow-hidden ${attr.className}`}>\r\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\r\n <input\r\n {...attr}\r\n className={`text-input w-full ${icon && \"!pl-[0.3rem]\"}`}\r\n />\r\n </div>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\nexport default function Slider(\r\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\r\n) {\r\n return (\r\n <div className=\"flex items-center h-[3rem]\">\r\n <div className=\"slider__wrapper group relative\">\r\n <input id=\"slider\" type=\"checkbox\" className={input} {...attr} />\r\n <label htmlFor={attr.id || \"slider\"} className=\"slider\">\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n className=\"text-[0.7rem] translate-x-[0.2px]\"\r\n />\r\n </label>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst input = \"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\";\r\n","\"use client\";\r\nimport React, { useEffect, useMemo, useState } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\r\n label?: string;\r\n labelHtml?: string;\r\n placeholder?: string;\r\n stateaction?: (param: any) => void;\r\n outerclass?: string;\r\n options?: {\r\n label: string;\r\n value: string;\r\n }[];\r\n stringOptions?: string[];\r\n};\r\n\r\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\r\n const { options = [], stringOptions = [], ...attrInput } = attr;\r\n const [keyword, setKeyword] = useState(\"\");\r\n const [selected, setSelected] = useState<{ label: string; value: any }>({\r\n label: \"\",\r\n value: \"\",\r\n });\r\n\r\n function selectItem(\r\n { label, value }: { label: string; value: any },\r\n e: React.MouseEvent<HTMLButtonElement>\r\n ) {\r\n const triggerManual = attrInput.onChange;\r\n if (triggerManual) {\r\n triggerManual?.({\r\n target: { value, name: attrInput.name },\r\n } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n setSelected({ label, value });\r\n if (attr.stateaction) {\r\n if (stringOptions) attr.stateaction(value);\r\n if (options) attr.stateaction({ label, value });\r\n }\r\n setKeyword(\"\");\r\n setTimeout(() => {\r\n (e.target as HTMLButtonElement).blur();\r\n }, 250);\r\n }\r\n\r\n function autoUpdateValue(updatedValue: string) {\r\n if (updatedValue) {\r\n const filtered = availableOptions.find(\r\n ({ value }) => value == updatedValue\r\n );\r\n if (filtered) setSelected(filtered);\r\n }\r\n }\r\n\r\n const availableOptions = useMemo(() => {\r\n let defaultOptions = options && options.length > 0;\r\n if (!defaultOptions)\r\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\r\n return options;\r\n }, [options, stringOptions]);\r\n\r\n const filteredOptions = useMemo(() => {\r\n return availableOptions.filter(\r\n ({ label, value }) =>\r\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\r\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\r\n );\r\n }, [keyword, availableOptions]);\r\n\r\n useEffect(() => {\r\n attrInput.value && autoUpdateValue(attrInput.value as string);\r\n }, [attrInput.value]);\r\n\r\n return (\r\n <div className={`w-full group ${attr.outerclass}`}>\r\n {attrInput.label && (\r\n <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\r\n {attrInput.label}\r\n </label>\r\n )}\r\n <div className={`${attrInput.className} text-input__wrapper relative`}>\r\n <input\r\n {...attrInput}\r\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\r\n value={attrInput.value ?? selected.value}\r\n type=\"hidden\"\r\n />\r\n <input\r\n value={keyword}\r\n type=\"search\"\r\n onChange={(e) => setKeyword(e.target.value)}\r\n className={`${attrInput.name}-keyword ${input} ${\r\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\r\n }`}\r\n placeholder={selected.value ? selected.label : attrInput.placeholder}\r\n />\r\n <div className=\"select-item__wrapper\">\r\n {filteredOptions.length == 0 && keyword != \"\" && (\r\n <button disabled className=\"select-item text-[var(--color-danger)]\">\r\n Tidak ada Item\r\n </button>\r\n )}\r\n {filteredOptions.map(({ label, value }) => (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => selectItem({ label, value }, e)}\r\n key={value}\r\n className=\"select-item\"\r\n >\r\n {label}\r\n {selected.value == value && (\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n className=\"text-[var(--color-primary)]\"\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nSingleSelect.autoFill = autoFillInput;\r\n\r\nfunction autoFillInput(\r\n value: string,\r\n elName: string,\r\n list: { label: string; value: string }[]\r\n) {\r\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\r\n inp.value = `${value}`;\r\n const filtered = list.find((item) => item.value == value);\r\n const el = document.querySelector(`.${elName}-keyword`);\r\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\r\n}\r\n\r\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\r\nconst input = \"text-input peer ... w-full\";\r\n","import React from \"react\";\r\n\r\ntype Tooltip = {\r\n children: React.ReactNode;\r\n text: string;\r\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\r\n};\r\n\r\nexport default function Tooltip({\r\n children,\r\n text,\r\n position = \"top\",\r\n}: Readonly<Tooltip>) {\r\n function getAccent() {\r\n const mapping = {\r\n top,\r\n bottom,\r\n left,\r\n right,\r\n };\r\n return mapping[position];\r\n }\r\n return (\r\n <div className=\"relative\">\r\n <div className=\"peer\">{children}</div>\r\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\r\n </div>\r\n );\r\n}\r\n\r\nconst top =\r\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\r\nconst bottom =\r\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\r\nconst right =\r\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\r\nconst left =\r\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\r\n","import React from \"react\";\r\n\r\ntype Option = {\r\n label: string;\r\n value: string;\r\n};\r\n\r\nexport default function NavTabClient({\r\n items,\r\n state,\r\n}: Readonly<{\r\n items: Option[];\r\n state: {\r\n active: string;\r\n setActive: (val: string) => void;\r\n };\r\n}>) {\r\n return (\r\n <nav className=\"navtab__wrapper\">\r\n {items.map(({ label, value }) => (\r\n <button\r\n key={value}\r\n className={`navtab__item ${\r\n state.active == value\r\n ? \"navtab__item__active\"\r\n : \"hover:bg-[var(--color-border)]/50\"\r\n }`}\r\n onClick={() => state.setActive(value)}\r\n >\r\n {label}\r\n </button>\r\n ))}\r\n </nav>\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\ntype Card = {\r\n children: React.ReactNode;\r\n className?: string;\r\n};\r\n\r\nexport default function Card({ children, className }: Readonly<Card>) {\r\n return <div className={`card ${className}`}>{children}</div>;\r\n}\r\n\r\nconst Footer = ({\r\n className,\r\n children,\r\n}: {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}) => {\r\n return (\r\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nCard.Footer = Footer;\r\n","import React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCheckCircle,\r\n faInfoCircle,\r\n faQuestionCircle,\r\n faXmarkCircle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\r\ntype Toast = {\r\n title: string;\r\n className?: string;\r\n description: string;\r\n type: ToastType;\r\n};\r\n\r\nexport default function Toast({\r\n title,\r\n description,\r\n type = \"info\",\r\n className,\r\n}: Readonly<Toast>) {\r\n return (\r\n <div className={`toast__wrapper group ${className}`}>\r\n <div className=\"toast__body\">\r\n <div style={{ background: getColor(type) }} className={bullet}></div>\r\n <div>\r\n <p className=\"toast__title\">{title}</p>\r\n <p className=\"toast__description\">{description}</p>\r\n </div>\r\n <div className={`toast__icon toast__icon__${type}`}></div>\r\n </div>\r\n <p\r\n className=\"toast__bar toast-bar-animate\"\r\n style={{ background: getColor(type) }}\r\n ></p>\r\n </div>\r\n );\r\n}\r\n\r\nconst Inline = ({\r\n className,\r\n text,\r\n type,\r\n}: {\r\n className?: string;\r\n text: string;\r\n type: ToastType;\r\n}) => {\r\n return (\r\n <div\r\n className={`toast__inline ${className}`}\r\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\r\n >\r\n <FontAwesomeIcon\r\n icon={getIcon(type)}\r\n className=\"text-[1.3rem]\"\r\n style={{ color: getColor(type) }}\r\n />\r\n <p>{text}</p>\r\n </div>\r\n );\r\n};\r\n\r\nToast.Inline = Inline;\r\n\r\nfunction getColor(type: string) {\r\n return `var(--color-${type})`;\r\n}\r\n\r\nfunction getIcon(type: string) {\r\n const mapping = {\r\n warning: faQuestionCircle,\r\n info: faInfoCircle,\r\n danger: faXmarkCircle,\r\n success: faCheckCircle,\r\n };\r\n //@ts-expect-error call object using array index\r\n return mapping[type];\r\n}\r\n\r\nconst bullet =\r\n \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\r\n","import React from \"react\";\r\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\ntype Expandable = {\r\n children: React.ReactNode;\r\n title: string;\r\n className?: string;\r\n isOpen?: boolean;\r\n};\r\n\r\nexport default function Expandable({\r\n children,\r\n title,\r\n className,\r\n isOpen,\r\n}: Readonly<Expandable>) {\r\n const name = title.replace(\" \", \"\");\r\n return (\r\n <div className={`expandable ${className}`}>\r\n <input\r\n id={name}\r\n type=\"checkbox\"\r\n defaultChecked={isOpen}\r\n className=\"opacity-[0] peer absolute top-0 ex-title\"\r\n />\r\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\r\n <label htmlFor={name} className=\"expandable__title\">\r\n {title}\r\n </label>\r\n <div className=\"expandable__body\">\r\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n","import React, { useCallback, useMemo, useState } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype Option = {\r\n value: string;\r\n label: string;\r\n};\r\n\r\ntype MultiSelect = {\r\n label?: string;\r\n labelHtml?: string;\r\n outerclass?: string;\r\n options?: Option[];\r\n stringOptions?: string[];\r\n state: { value: Option[]; select: (newVal: Option[]) => void };\r\n};\r\n\r\nexport default function MultiSelect({\r\n state,\r\n label,\r\n labelHtml,\r\n ...attr\r\n}: Readonly<MultiSelect>) {\r\n const { options = [], stringOptions = [] } = attr;\r\n const [keyword, setKeyword] = useState(\"\");\r\n\r\n const availableOptions = useMemo(() => {\r\n const isDefaultOption = options && options.length > 0;\r\n if (!isDefaultOption)\r\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\r\n return options;\r\n }, [options, stringOptions]);\r\n\r\n function getFiltered() {\r\n return availableOptions.filter(\r\n ({ label, value }) =>\r\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\r\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\r\n );\r\n }\r\n\r\n function selectItem({ label, value }: { label: string; value: string }) {\r\n //@ts-expect-error: avoid check\r\n state.select((prev) => {\r\n const isItemExist = prev.find((item: any) => item.value == value);\r\n if (isItemExist) {\r\n return prev.filter((item: any) => item.value != value);\r\n }\r\n return [...prev, { label, value }];\r\n });\r\n }\r\n\r\n function isItemExist(value: string) {\r\n return state.value.find((item: any) => item.value == value);\r\n }\r\n\r\n const selectUnSelectAll = useCallback(() => {\r\n const isAllSelected = state.value.length == availableOptions.length;\r\n state.select(isAllSelected ? [] : availableOptions);\r\n }, [state.value]);\r\n\r\n return (\r\n <div className={`group w-full ${attr.outerclass}`}>\r\n {label && (\r\n <label className=\"text-input__label\" htmlFor={labelHtml}>\r\n {label}\r\n </label>\r\n )}\r\n <div className=\"text-input__wrapper relative\">\r\n <input\r\n value={keyword}\r\n type=\"search\"\r\n placeholder={`${state.value.length} Dipilih`}\r\n className={`${input} ${\r\n state.value.length > 0 &&\r\n \"placeholder:text-[var(--color-text-primary)]\"\r\n }`}\r\n onChange={(e) => setKeyword(e.target.value)}\r\n />\r\n <div className=\"select-item__wrapper select-multiple__wrapper\">\r\n {getFiltered().length == 0 && keyword != \"\" && (\r\n <button disabled className=\"select-item text-[var(--color-danger)]\">\r\n Tidak ada Item\r\n </button>\r\n )}\r\n {getFiltered().map(({ label, value }) => (\r\n <button\r\n type=\"button\"\r\n onClick={() => selectItem({ label, value })}\r\n key={value}\r\n className=\"select-item\"\r\n >\r\n {label}\r\n {isItemExist(value) && (\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n className=\"text-[var(--color-primary)]\"\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <button\r\n type=\"button\"\r\n className=\"cursor-pointer\"\r\n onClick={selectUnSelectAll}\r\n >\r\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n}\r\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\r\nconst input = \"text-input peer ... w-full\";\r\n","\"use client\";\r\nimport React from \"react\";\r\n\r\nexport default function ThemeToggle(\r\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\r\n) {\r\n return (\r\n <div className=\"flex items-center h-[3rem]\">\r\n <label\r\n htmlFor={`${attr.id || \"theme-toggle\"}`}\r\n className=\"slider__wrapper slider-theme slider-theme-light relative\"\r\n >\r\n <input\r\n id=\"theme-toggle\"\r\n {...attr}\r\n type=\"checkbox\"\r\n className=\"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\"\r\n />\r\n <span className=\"slider-theme__bullet\"></span>\r\n </label>\r\n </div>\r\n );\r\n}\r\n","import React, { useState } from \"react\";\r\nimport MultiSelect from \"./MultiSelect\";\r\nimport SingleSelect from \"./SingleSelect\";\r\n\r\nconst list = [\r\n { label: \"Option 1\", value: \"option1\" },\r\n { label: \"Option 2\", value: \"option2\" },\r\n { label: \"Option 3\", value: \"option3\" },\r\n];\r\nconst stringList = [\"option1\", \"option2\", \"option3\"];\r\n\r\nexport default function Dashboard() {\r\n const [selectedItem, setSelectedItem] = useState<\r\n { label: string; value: string }[]\r\n >([]);\r\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\r\n\r\n function updateState(item: string) {\r\n const filtered = list.find(({ value }) => value == item);\r\n filtered && setSel(filtered);\r\n }\r\n\r\n return (\r\n <div className=\"flex items-center gap-[1rem]\">\r\n <MultiSelect\r\n label=\"Multi Select\"\r\n stringOptions={stringList}\r\n state={{ value: selectedItem, select: setSelectedItem }}\r\n />\r\n <SingleSelect\r\n label=\"Single Select\"\r\n name=\"newinput\"\r\n stringOptions={stringList}\r\n placeholder=\"-- Pilih Status --\"\r\n value={sel.value}\r\n />\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nexport default function Badge({\r\n text,\r\n type,\r\n className,\r\n}: {\r\n text: string;\r\n type: \"success\" | \"danger\" | \"warning\" | \"info\";\r\n className?: string;\r\n}) {\r\n return (\r\n <div className=\"badge__wrapper\">\r\n <span\r\n style={{\r\n background: `var(--color-${type})`,\r\n }}\r\n className={`badge ${className}`}\r\n >\r\n {text}\r\n </span>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nexport default function Skeleton({ className }: { className?: string }) {\r\n return (\r\n <div className={`${className} skeleton`}>\r\n <span className=\"skeleton__item skeleton-slide\"></span>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\nexport default function Navigation() {\r\n return <nav></nav>;\r\n}\r\n\r\nconst URLNavigation = (props: {\r\n list: { label: string; href: string }[];\r\n activeUrl: string;\r\n outerclass?: string;\r\n CustomComponent?: React.ElementType;\r\n}) => {\r\n const Component = props.CustomComponent || \"a\";\r\n function getAnchorClass(href: string) {\r\n return href === props.activeUrl\r\n ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\r\n : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\r\n }\r\n\r\n return (\r\n <nav className={`nav__wrapper ${props.outerclass}`}>\r\n {props.list.map((prop) => (\r\n <Component\r\n key={prop.href}\r\n className={`${base__anchor} ${getAnchorClass(prop.href)}`}\r\n {...prop}\r\n >\r\n {prop.label}\r\n </Component>\r\n ))}\r\n </nav>\r\n );\r\n};\r\n\r\nNavigation.URL = URLNavigation;\r\n\r\nconst base__anchor =\r\n \"p-[0.8rem] h-full grid items-center transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\r\n","import React from \"react\";\r\n\r\nexport default function Confirmation({\r\n type = \"warning\",\r\n text,\r\n title,\r\n secondaryAction,\r\n secondaryLabel = \"Tidak\",\r\n mainAction,\r\n mainLabel = \"Ya\",\r\n}: {\r\n mainAction: () => void;\r\n secondaryAction?: () => void;\r\n mainLabel?: string;\r\n secondaryLabel?: string;\r\n title: string;\r\n text: string;\r\n type?: \"info\" | \"warning\" | \"danger\" | \"success\";\r\n}) {\r\n return (\r\n <div className=\"confirmation__outer\">\r\n <div className=\"confirmation__card\">\r\n <div className={wrapper}>\r\n <div className={`baloon__${type} baloon`}></div>\r\n <div>\r\n <h3 className=\"font-semibold\">{title}</h3>\r\n <p className={confirmation__text}>{text}</p>\r\n </div>\r\n </div>\r\n <div className=\"confirmation__footer\">\r\n {secondaryAction && (\r\n <button\r\n onClick={secondaryAction}\r\n type=\"button\"\r\n className=\"cursor-pointer\"\r\n style={{ color: `var(--color-${type})` }}\r\n >\r\n {secondaryLabel}\r\n </button>\r\n )}\r\n <button\r\n onClick={() => {\r\n mainAction();\r\n secondaryAction && secondaryAction();\r\n }}\r\n className=\"cursor-pointer btn__primary min-w-[8rem]\"\r\n style={{\r\n background: `var(--color-${type})`,\r\n border: `1px solid var(--color-${type})`,\r\n }}\r\n >\r\n {mainLabel}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst wrapper =\r\n \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\r\nconst confirmation__text =\r\n \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\r\n"],"mappings":"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","names":["React","list","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.tsx"],"sourcesContent":["export { default as Button } from \"./components/Button\";\r\nexport { default as TextInput } from \"./components/TextInput\";\r\nexport { default as Slider } from \"./components/Slider\";\r\nexport { default as SingleSelect } from \"./components/SingleSelect\";\r\nexport { default as Tooltip } from \"./components/Tooltip\";\r\nexport { default as NavTabClient } from \"./components/NavTabClient\";\r\nexport { default as Card } from \"./components/Card\";\r\nexport { default as Toast } from \"./components/Toast\";\r\nexport { default as Expandable } from \"./components/Expandable\";\r\nexport { default as MultiSelect } from \"./components/MultiSelect\";\r\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\r\nexport { default as Dashboard } from \"./components/Dashboard\";\r\nexport { default as Badge } from \"./components/Badge\";\r\nexport { default as Skeleton } from \"./components/Skeleton\";\r\nexport { default as Navigation } from \"./components/Navigation\";\r\nexport { default as Confirmation } from \"./components/Confirmation\";\r\n","import React from \"react\";\r\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n icon?: IconProp;\r\n label?: string;\r\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\r\n isLoading?: boolean;\r\n};\r\n\r\nexport default function Button({\r\n label,\r\n icon,\r\n isLoading,\r\n btnType,\r\n className,\r\n ...rest\r\n}: Readonly<Button>) {\r\n const buttonIcon = isLoading ? faCircleNotch : icon;\r\n const loadingLabel = label && isLoading ? \"Memproses ...\" : \"\";\r\n return (\r\n <button\r\n {...rest}\r\n disabled={rest.disabled || isLoading}\r\n className={`${!icon && \"py-[0.84rem]\"} ${className} ${\r\n btnType == \"secondary\" && \"btn__secondary\"\r\n } btn__primary ${label ? \"\" : \"!p-[0.87rem]\"}`}\r\n >\r\n {buttonIcon && icon && (\r\n <FontAwesomeIcon\r\n icon={buttonIcon}\r\n className={`text-[1.2rem] ${label && \"mr-[0.3rem]\"} ${\r\n isLoading && \"animate-spin\"\r\n }`}\r\n />\r\n )}\r\n {isLoading ? loadingLabel : label}\r\n </button>\r\n );\r\n}\r\n\r\nconst IconButton = (props: Readonly<Button>) => {\r\n return (\r\n <button\r\n {...props}\r\n className={`${props.className} ${\r\n props.label ? \"max-w-[content] px-[0.8rem]\" : \"\"\r\n } icon__button`}\r\n >\r\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\r\n {props.label && (\r\n <span className=\"inline-block ml-[0.8rem] text-[1rem]\">\r\n {props.label}\r\n </span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\r\n return (\r\n <div className=\"icon__button_group\">\r\n {list.map((props, idx) => (\r\n <button key={idx + 1} className={getBtnClass(idx)} {...props}>\r\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\r\n </button>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nconst SSOButton = ({ href, btnclass }: { href: string; btnclass?: string }) => {\r\n return (\r\n <a href={href} className={`sso-button ${btnclass}`}>\r\n <img\r\n alt=\"logo\"\r\n className=\"sso-icon\"\r\n src=\"https://storage.ppa-ho.net/public/ppa-component-library/lock.png\"\r\n />{\" \"}\r\n Login dengan SSO\r\n </a>\r\n );\r\n};\r\n\r\nButton.IconButton = IconButton;\r\nButton.IconButtonGroup = IconButtonGroup;\r\nButton.SSOButton = SSOButton;\r\n\r\nfunction getBtnClass(idx: number) {\r\n return `icon__button !h-[2.95rem] !rounded-[0] border-[0] ${\r\n idx == 0 ? \"\" : \"border-l border-l-[var(--color-border)]\"\r\n }`;\r\n}\r\n","import React from \"react\";\r\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nconst input__icon =\r\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] \";\r\n\r\nexport default function TextInput({\r\n label,\r\n labelFor,\r\n icon,\r\n outerclass,\r\n isdarkmode,\r\n inputclass,\r\n ...attr\r\n}: Readonly<\r\n React.InputHTMLAttributes<HTMLInputElement> & {\r\n label?: string;\r\n labelFor?: string;\r\n icon?: IconProp;\r\n outerclass?: string;\r\n isdarkmode?: boolean;\r\n inputclass?: string;\r\n }\r\n>) {\r\n function getThemedClass(prefix: string){\r\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\r\n }\r\n return (\r\n <div className={`group ${outerclass} w-full`}>\r\n {label && (\r\n <label\r\n htmlFor={labelFor}\r\n className=\"text-input__label\"\r\n style={{\r\n color: getThemedClass('-text-secondary')\r\n }}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div\r\n className={`text-input__wrapper overflow-hidden ${attr.className}`}\r\n style={{\r\n borderColor: getThemedClass('-border'),\r\n background: getThemedClass('-bg-surface'),\r\n }}\r\n >\r\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\r\n <input\r\n {...attr}\r\n className={`text-input w-full ${icon && \"!pl-[0.3rem]\"} ${inputclass}`}\r\n style={{\r\n color: getThemedClass('-text-primary')\r\n }}\r\n />\r\n </div>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\nexport default function Slider(\r\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\r\n) {\r\n return (\r\n <div className=\"flex items-center h-[3rem]\">\r\n <div className=\"slider__wrapper group relative\">\r\n <input id=\"slider\" type=\"checkbox\" className={input} {...attr} />\r\n <label htmlFor={attr.id || \"slider\"} className=\"slider\">\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n className=\"text-[0.7rem] translate-x-[0.2px]\"\r\n />\r\n </label>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst input = \"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\";\r\n","\"use client\";\r\nimport React, { useEffect, useMemo, useState } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\r\n label?: string;\r\n labelHtml?: string;\r\n placeholder?: string;\r\n stateaction?: (param: any) => void;\r\n outerclass?: string;\r\n isdarkmode?: boolean;\r\n options?: {\r\n label: string;\r\n value: string;\r\n }[];\r\n stringOptions?: string[];\r\n};\r\n\r\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\r\n const { options = [], stringOptions = [], isdarkmode, ...attrInput } = attr;\r\n const inputValue = attrInput.value\r\n const [keyword, setKeyword] = useState(\"\");\r\n const [selected, setSelected] = useState<{ label: string; value: any }>({\r\n label: \"\",\r\n value: \"\",\r\n });\r\n\r\n function selectItem(\r\n { label, value }: { label: string; value: any },\r\n e: React.MouseEvent<HTMLButtonElement>,\r\n ) {\r\n const triggerManual = attrInput.onChange;\r\n if (triggerManual) {\r\n triggerManual?.({\r\n target: { value, name: attrInput.name },\r\n } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n setSelected({ label, value });\r\n\r\n if (attr.stateaction) {\r\n if (options?.length > 0) attr.stateaction({ label, value });\r\n if (stringOptions?.length > 0) attr.stateaction(value);\r\n }\r\n\r\n setKeyword(\"\");\r\n e.currentTarget.blur();\r\n }\r\n\r\n function autoUpdateValue(updatedValue: string) {\r\n if (updatedValue) {\r\n const filtered = availableOptions.find(\r\n ({ value }) => value == updatedValue\r\n );\r\n if (filtered) setSelected(filtered);\r\n }\r\n }\r\n\r\n const availableOptions = useMemo(() => {\r\n let defaultOptions = options && options.length > 0;\r\n if (!defaultOptions)\r\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\r\n return options;\r\n }, [options, stringOptions]);\r\n\r\n const filteredOptions = useMemo(() => {\r\n return availableOptions.filter(\r\n ({ label, value }) =>\r\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\r\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\r\n );\r\n }, [keyword, availableOptions]);\r\n\r\n useEffect(() => {\r\n inputValue && autoUpdateValue(inputValue as string);\r\n }, [inputValue]);\r\n\r\n function getThemedClass(prefix: string){\r\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\r\n }\r\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\r\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\r\n\r\n return (\r\n <div className={`w-full group ${attr.outerclass}`}>\r\n {attrInput.label && (\r\n <label\r\n className=\"text-input__label\"\r\n htmlFor={attrInput.labelHtml}\r\n style={{color: getThemedClass('-text-secondary')}}\r\n >\r\n {attrInput.label}\r\n </label>\r\n )}\r\n <div\r\n className={`${attrInput.className} text-input__wrapper relative`}\r\n style={{\r\n borderColor: getThemedClass('-border'),\r\n background: getThemedClass('-bg-surface'),\r\n }}\r\n >\r\n <input\r\n type=\"hidden\"\r\n {...attrInput}\r\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\r\n value={attrInput.value ?? selected.value}\r\n />\r\n <input\r\n type=\"search\"\r\n value={keyword}\r\n autoComplete=\"off\"\r\n onChange={(e) => setKeyword(e.target.value)}\r\n className={`${attrInput.name}-keyword ${placeholderClass}`}\r\n placeholder={selected.value ? selected.label : attrInput.placeholder}\r\n style={{\r\n color: selected.value ? getThemedClass('-text-primary') : undefined\r\n }}\r\n />\r\n <div\r\n className=\"select-item__wrapper\"\r\n style={{\r\n borderColor: getThemedClass('-border'),\r\n background: getThemedClass('-bg-surface'),\r\n }}\r\n >\r\n {filteredOptions.length == 0 && keyword != \"\" && (\r\n <button\r\n disabled\r\n className=\"select-item\"\r\n style={{ color: 'var(--color-danger)' }}\r\n >\r\n Tidak ada Item\r\n </button>\r\n )}\r\n {filteredOptions.map(({ label, value }) => (\r\n <button\r\n key={value}\r\n type=\"button\"\r\n className={`select-item ${optionHoverClass}`}\r\n onClick={(e) => selectItem({ label, value }, e)}\r\n style={{ color: getThemedClass('-text-secondary')}}\r\n >\r\n {label}\r\n {selected.value == value && (\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n style={{ color: 'var(--color-info)' }}\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <FontAwesomeIcon icon={faChevronDown} style={{ color: getThemedClass('-icon-input'), paddingRight: '0.7rem' }} />\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nSingleSelect.autoFill = autoFillInput;\r\n\r\nfunction autoFillInput(\r\n value: string,\r\n elName: string,\r\n list: { label: string; value: string }[]\r\n) {\r\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\r\n inp.value = `${value}`;\r\n const filtered = list.find((item) => item.value == value);\r\n const el = document.querySelector(`.${elName}-keyword`);\r\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\r\n}\r\n\r\nconst input = \"text-input peer ... w-full\";\r\n","import React from \"react\";\r\n\r\ntype Tooltip = {\r\n children: React.ReactNode;\r\n text: string;\r\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\r\n};\r\n\r\nexport default function Tooltip({\r\n children,\r\n text,\r\n position = \"top\",\r\n}: Readonly<Tooltip>) {\r\n function getAccent() {\r\n const mapping = {\r\n top,\r\n bottom,\r\n left,\r\n right,\r\n };\r\n return mapping[position];\r\n }\r\n return (\r\n <div className=\"relative\">\r\n <div className=\"peer\">{children}</div>\r\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\r\n </div>\r\n );\r\n}\r\n\r\nconst top =\r\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\r\nconst bottom =\r\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\r\nconst right =\r\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\r\nconst left =\r\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\r\n","import React from \"react\";\r\n\r\ntype Option = {\r\n label: string;\r\n value: string;\r\n};\r\n\r\nexport default function NavTabClient({\r\n items,\r\n state,\r\n}: Readonly<{\r\n items: Option[];\r\n state: {\r\n active: string;\r\n setActive: (val: string) => void;\r\n };\r\n}>) {\r\n return (\r\n <nav className=\"navtab__wrapper\">\r\n {items.map(({ label, value }) => (\r\n <button\r\n key={value}\r\n className={`navtab__item ${\r\n state.active == value\r\n ? \"navtab__item__active\"\r\n : \"hover:bg-[var(--color-border)]/50\"\r\n }`}\r\n onClick={() => state.setActive(value)}\r\n >\r\n {label}\r\n </button>\r\n ))}\r\n </nav>\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\ntype Card = {\r\n children: React.ReactNode;\r\n className?: string;\r\n};\r\n\r\nexport default function Card({ children, className }: Readonly<Card>) {\r\n return <div className={`card ${className}`}>{children}</div>;\r\n}\r\n\r\nconst Footer = ({\r\n className,\r\n children,\r\n}: {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}) => {\r\n return (\r\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nCard.Footer = Footer;\r\n","import React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCheckCircle,\r\n faInfoCircle,\r\n faQuestionCircle,\r\n faXmarkCircle,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\r\ntype Toast = {\r\n title: string;\r\n className?: string;\r\n description: string;\r\n type: ToastType;\r\n};\r\n\r\nexport default function Toast({\r\n title,\r\n description,\r\n type = \"info\",\r\n className,\r\n}: Readonly<Toast>) {\r\n return (\r\n <div className={`toast__wrapper group ${className}`}>\r\n <div className=\"toast__body\">\r\n <div style={{ background: getColor(type) }} className={bullet}></div>\r\n <div>\r\n <p className=\"toast__title\">{title}</p>\r\n <p className=\"toast__description\">{description}</p>\r\n </div>\r\n <div className={`toast__icon toast__icon__${type}`}></div>\r\n </div>\r\n <p\r\n className=\"toast__bar toast-bar-animate\"\r\n style={{ background: getColor(type) }}\r\n ></p>\r\n </div>\r\n );\r\n}\r\n\r\nconst Inline = ({\r\n className,\r\n text,\r\n type,\r\n}: {\r\n className?: string;\r\n text: string;\r\n type: ToastType;\r\n}) => {\r\n return (\r\n <div\r\n className={`toast__inline ${className}`}\r\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\r\n >\r\n <FontAwesomeIcon\r\n icon={getIcon(type)}\r\n className=\"text-[1.3rem]\"\r\n style={{ color: getColor(type) }}\r\n />\r\n <p>{text}</p>\r\n </div>\r\n );\r\n};\r\n\r\nToast.Inline = Inline;\r\n\r\nfunction getColor(type: string) {\r\n return `var(--color-${type})`;\r\n}\r\n\r\nfunction getIcon(type: string) {\r\n const mapping = {\r\n warning: faQuestionCircle,\r\n info: faInfoCircle,\r\n danger: faXmarkCircle,\r\n success: faCheckCircle,\r\n };\r\n //@ts-expect-error call object using array index\r\n return mapping[type];\r\n}\r\n\r\nconst bullet =\r\n \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\r\n","import React from \"react\";\r\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\ntype Expandable = {\r\n children: React.ReactNode;\r\n title: string;\r\n className?: string;\r\n isOpen?: boolean;\r\n};\r\n\r\nexport default function Expandable({\r\n children,\r\n title,\r\n className,\r\n isOpen,\r\n}: Readonly<Expandable>) {\r\n const name = title.replace(\" \", \"\");\r\n return (\r\n <div className={`expandable ${className}`}>\r\n <input\r\n id={name}\r\n type=\"checkbox\"\r\n defaultChecked={isOpen}\r\n className=\"opacity-[0] peer absolute top-0 ex-title\"\r\n />\r\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\r\n <label htmlFor={name} className=\"expandable__title\">\r\n {title}\r\n </label>\r\n <div className=\"expandable__body\">\r\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n","import React, { useCallback, useMemo, useState } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype Option = {\r\n value: string;\r\n label: string;\r\n};\r\n\r\ntype MultiSelect = {\r\n label?: string;\r\n labelHtml?: string;\r\n outerclass?: string;\r\n isdarkmode?: boolean;\r\n options?: Option[];\r\n stringOptions?: string[];\r\n state: { value: Option[]; select: (newVal: Option[]) => void };\r\n};\r\n\r\nexport default function MultiSelect({\r\n state,\r\n label,\r\n labelHtml,\r\n ...attr\r\n}: Readonly<MultiSelect>) {\r\n const { options = [], stringOptions = [], isdarkmode } = attr;\r\n const [keyword, setKeyword] = useState(\"\");\r\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\r\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\r\n\r\n const availableOptions = useMemo(() => {\r\n const isDefaultOption = options && options.length > 0;\r\n if (!isDefaultOption)\r\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\r\n return options;\r\n }, [options, stringOptions]);\r\n\r\n function getFiltered() {\r\n return availableOptions.filter(\r\n ({ label, value }) =>\r\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\r\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\r\n );\r\n }\r\n\r\n function selectItem({ label, value }: { label: string; value: string }) {\r\n //@ts-expect-error: avoid check\r\n state.select((prev) => {\r\n const isItemExist = prev.find((item: any) => item.value == value);\r\n if (isItemExist) {\r\n return prev.filter((item: any) => item.value != value);\r\n }\r\n return [...prev, { label, value }];\r\n });\r\n }\r\n\r\n function isItemExist(value: string) {\r\n return state.value.find((item: any) => item.value == value);\r\n }\r\n\r\n const selectUnSelectAll = useCallback(() => {\r\n const isAllSelected = state.value.length == availableOptions.length;\r\n state.select(isAllSelected ? [] : availableOptions);\r\n }, [state.value]);\r\n\r\n function getThemedClass(prefix: string){\r\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\r\n }\r\n\r\n return (\r\n <div className={`group w-full ${attr.outerclass}`}>\r\n {label && (\r\n <label\r\n htmlFor={labelHtml}\r\n className=\"text-input__label\"\r\n style={{ color: getThemedClass('-text-secondary')}}\r\n >\r\n {label}\r\n </label>\r\n )}\r\n <div\r\n className=\"text-input__wrapper relative\"\r\n style={{\r\n borderColor: getThemedClass('-border'),\r\n background: getThemedClass('-bg-surface'),\r\n }}\r\n >\r\n <input\r\n type=\"search\"\r\n value={keyword}\r\n autoComplete=\"off\"\r\n className={`${input} ${placeholderClass}`}\r\n onChange={(e) => setKeyword(e.target.value)}\r\n placeholder={`${state.value.length} Dipilih`}\r\n style={{\r\n color: state.value.length > 0 ? getThemedClass('-text-primary') : undefined\r\n }}\r\n />\r\n <div\r\n className=\"select-item__wrapper select-multiple__wrapper\"\r\n style={{\r\n borderColor: getThemedClass('-border'),\r\n background: getThemedClass('-bg-surface'),\r\n }}\r\n >\r\n {getFiltered().length == 0 && keyword != \"\" && (\r\n <button\r\n disabled\r\n className=\"select-item\"\r\n style={{ color: 'var(--color-danger)' }}\r\n >\r\n Tidak ada Item\r\n </button>\r\n )}\r\n {getFiltered().map(({ label, value }) => (\r\n <button\r\n key={value}\r\n type=\"button\"\r\n onClick={() => selectItem({ label, value })}\r\n className={`select-item ${optionHoverClass}`}\r\n style={{ color: getThemedClass('-text-secondary')}}\r\n >\r\n {label}\r\n {isItemExist(value) && (\r\n <FontAwesomeIcon\r\n icon={faCheck}\r\n style={{ color: 'var(--color-info)' }}\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <button\r\n type=\"button\"\r\n className=\"cursor-pointer\"\r\n onClick={selectUnSelectAll}\r\n >\r\n <FontAwesomeIcon\r\n icon={faListCheck}\r\n style={{\r\n color: getThemedClass('-icon-input'),\r\n paddingRight: '0.7rem',\r\n fontSize: '1.2rem'\r\n }}\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n}\r\nconst input = \"text-input peer ... w-full\";\r\n","\"use client\";\r\nimport React from \"react\";\r\n\r\nexport default function ThemeToggle(\r\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\r\n) {\r\n return (\r\n <div className=\"flex items-center h-[3rem]\">\r\n <label\r\n htmlFor={`${attr.id || \"theme-toggle\"}`}\r\n className=\"slider__wrapper slider-theme slider-theme-light relative\"\r\n >\r\n <input\r\n id=\"theme-toggle\"\r\n {...attr}\r\n type=\"checkbox\"\r\n className=\"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\"\r\n />\r\n <span className=\"slider-theme__bullet\"></span>\r\n </label>\r\n </div>\r\n );\r\n}\r\n","import React, { useState } from \"react\";\r\nimport MultiSelect from \"./MultiSelect\";\r\nimport SingleSelect from \"./SingleSelect\";\r\n\r\nconst list = [\r\n { label: \"Option 1\", value: \"option1\" },\r\n { label: \"Option 2\", value: \"option2\" },\r\n { label: \"Option 3\", value: \"option3\" },\r\n];\r\nconst stringList = [\"option1\", \"option2\", \"option3\"];\r\n\r\nexport default function Dashboard() {\r\n const [selectedItem, setSelectedItem] = useState<\r\n { label: string; value: string }[]\r\n >([]);\r\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\r\n\r\n function updateState(item: string) {\r\n const filtered = list.find(({ value }) => value == item);\r\n filtered && setSel(filtered);\r\n }\r\n\r\n return (\r\n <div className=\"flex items-center gap-[1rem]\">\r\n <MultiSelect\r\n isdarkmode={true}\r\n label=\"Multi Select\"\r\n stringOptions={stringList}\r\n state={{ value: selectedItem, select: setSelectedItem }}\r\n />\r\n <SingleSelect\r\n label=\"Single Select\"\r\n name=\"newinput\"\r\n stringOptions={stringList}\r\n placeholder=\"-- Pilih Status --\"\r\n value={sel.value}\r\n />\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nexport default function Badge({\r\n text,\r\n type,\r\n className,\r\n}: {\r\n text: string;\r\n type: \"success\" | \"danger\" | \"warning\" | \"info\";\r\n className?: string;\r\n}) {\r\n return (\r\n <div className=\"badge__wrapper\">\r\n <span\r\n style={{\r\n background: `var(--color-${type})`,\r\n }}\r\n className={`badge ${className}`}\r\n >\r\n {text}\r\n </span>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\nexport default function Skeleton({ className }: { className?: string }) {\r\n return (\r\n <div className={`${className} skeleton`}>\r\n <span className=\"skeleton__item skeleton-slide\"></span>\r\n </div>\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\nexport default function Navigation() {\r\n return <nav></nav>;\r\n}\r\n\r\nconst URLNavigation = (props: {\r\n list: { label: string; href: string }[];\r\n activeUrl: string;\r\n outerclass?: string;\r\n CustomComponent?: React.ElementType;\r\n}) => {\r\n const Component = props.CustomComponent || \"a\";\r\n function getAnchorClass(href: string) {\r\n return href === props.activeUrl\r\n ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\r\n : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\r\n }\r\n\r\n return (\r\n <nav className={`nav__wrapper ${props.outerclass}`}>\r\n {props.list.map((prop) => (\r\n <Component\r\n key={prop.href}\r\n className={`${base__anchor} ${getAnchorClass(prop.href)}`}\r\n {...prop}\r\n >\r\n {prop.label}\r\n </Component>\r\n ))}\r\n </nav>\r\n );\r\n};\r\n\r\nNavigation.URL = URLNavigation;\r\n\r\nconst base__anchor =\r\n \"p-[0.8rem] h-full grid items-center transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\r\n","import React from \"react\";\r\n\r\nexport default function Confirmation({\r\n type = \"warning\",\r\n text,\r\n title,\r\n secondaryAction,\r\n secondaryLabel = \"Tidak\",\r\n mainAction,\r\n mainLabel = \"Ya\",\r\n}: {\r\n mainAction: () => void;\r\n secondaryAction?: () => void;\r\n mainLabel?: string;\r\n secondaryLabel?: string;\r\n title: string;\r\n text: string;\r\n type?: \"info\" | \"warning\" | \"danger\" | \"success\";\r\n}) {\r\n return (\r\n <div className=\"confirmation__outer\">\r\n <div className=\"confirmation__card\">\r\n <div className={wrapper}>\r\n <div className={`baloon__${type} baloon`}></div>\r\n <div>\r\n <h3 className=\"font-semibold\">{title}</h3>\r\n <p className={confirmation__text}>{text}</p>\r\n </div>\r\n </div>\r\n <div className=\"confirmation__footer\">\r\n {secondaryAction && (\r\n <button\r\n onClick={secondaryAction}\r\n type=\"button\"\r\n className=\"cursor-pointer\"\r\n style={{ color: `var(--color-${type})` }}\r\n >\r\n {secondaryLabel}\r\n </button>\r\n )}\r\n <button\r\n onClick={() => {\r\n mainAction();\r\n secondaryAction && secondaryAction();\r\n }}\r\n className=\"cursor-pointer btn__primary min-w-[8rem]\"\r\n style={{\r\n background: `var(--color-${type})`,\r\n border: `1px solid var(--color-${type})`,\r\n }}\r\n >\r\n {mainLabel}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst wrapper =\r\n \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\r\nconst confirmation__text =\r\n \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\r\n"],"mappings":"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","names":["React","list","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","input","React","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","input","label","isItemExist","React","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React","import_react","React"]}
package/dist/index.mjs CHANGED
@@ -99,25 +99,56 @@ function getBtnClass(idx) {
99
99
  // src/components/TextInput.tsx
100
100
  import React2 from "react";
101
101
  import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
102
- var input__icon = "w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]";
102
+ var input__icon = "w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] ";
103
103
  function TextInput(_a) {
104
104
  var _b = _a, {
105
105
  label,
106
106
  labelFor,
107
107
  icon,
108
- outerclass
108
+ outerclass,
109
+ isdarkmode,
110
+ inputclass
109
111
  } = _b, attr = __objRest(_b, [
110
112
  "label",
111
113
  "labelFor",
112
114
  "icon",
113
- "outerclass"
115
+ "outerclass",
116
+ "isdarkmode",
117
+ "inputclass"
114
118
  ]);
115
- return /* @__PURE__ */ React2.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ React2.createElement("label", { htmlFor: labelFor, className: "text-input__label" }, label), /* @__PURE__ */ React2.createElement("div", { className: `text-input__wrapper overflow-hidden ${attr.className}` }, icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }), /* @__PURE__ */ React2.createElement(
116
- "input",
117
- __spreadProps(__spreadValues({}, attr), {
118
- className: `text-input w-full ${icon && "!pl-[0.3rem]"}`
119
- })
120
- )));
119
+ function getThemedClass(prefix) {
120
+ return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
121
+ }
122
+ return /* @__PURE__ */ React2.createElement("div", { className: `group ${outerclass} w-full` }, label && /* @__PURE__ */ React2.createElement(
123
+ "label",
124
+ {
125
+ htmlFor: labelFor,
126
+ className: "text-input__label",
127
+ style: {
128
+ color: getThemedClass("-text-secondary")
129
+ }
130
+ },
131
+ label
132
+ ), /* @__PURE__ */ React2.createElement(
133
+ "div",
134
+ {
135
+ className: `text-input__wrapper overflow-hidden ${attr.className}`,
136
+ style: {
137
+ borderColor: getThemedClass("-border"),
138
+ background: getThemedClass("-bg-surface")
139
+ }
140
+ },
141
+ icon && /* @__PURE__ */ React2.createElement(FontAwesomeIcon2, { icon, className: input__icon }),
142
+ /* @__PURE__ */ React2.createElement(
143
+ "input",
144
+ __spreadProps(__spreadValues({}, attr), {
145
+ className: `text-input w-full ${icon && "!pl-[0.3rem]"} ${inputclass}`,
146
+ style: {
147
+ color: getThemedClass("-text-primary")
148
+ }
149
+ })
150
+ )
151
+ ));
121
152
  }
122
153
 
123
154
  // src/components/Slider.tsx
@@ -141,7 +172,8 @@ import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawes
141
172
  import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
142
173
  function SingleSelect(attr) {
143
174
  var _b;
144
- const _a = attr, { options = [], stringOptions = [] } = _a, attrInput = __objRest(_a, ["options", "stringOptions"]);
175
+ const _a = attr, { options = [], stringOptions = [], isdarkmode } = _a, attrInput = __objRest(_a, ["options", "stringOptions", "isdarkmode"]);
176
+ const inputValue = attrInput.value;
145
177
  const [keyword, setKeyword] = useState("");
146
178
  const [selected, setSelected] = useState({
147
179
  label: "",
@@ -156,13 +188,11 @@ function SingleSelect(attr) {
156
188
  }
157
189
  setSelected({ label, value });
158
190
  if (attr.stateaction) {
159
- if (stringOptions) attr.stateaction(value);
160
- if (options) attr.stateaction({ label, value });
191
+ if ((options == null ? void 0 : options.length) > 0) attr.stateaction({ label, value });
192
+ if ((stringOptions == null ? void 0 : stringOptions.length) > 0) attr.stateaction(value);
161
193
  }
162
194
  setKeyword("");
163
- setTimeout(() => {
164
- e.target.blur();
165
- }, 250);
195
+ e.currentTarget.blur();
166
196
  }
167
197
  function autoUpdateValue(updatedValue) {
168
198
  if (updatedValue) {
@@ -184,40 +214,91 @@ function SingleSelect(attr) {
184
214
  );
185
215
  }, [keyword, availableOptions]);
186
216
  useEffect(() => {
187
- attrInput.value && autoUpdateValue(attrInput.value);
188
- }, [attrInput.value]);
189
- return /* @__PURE__ */ React4.createElement("div", { className: `w-full group ${attr.outerclass}` }, attrInput.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ React4.createElement("div", { className: `${attrInput.className} text-input__wrapper relative` }, /* @__PURE__ */ React4.createElement(
190
- "input",
191
- __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
192
- value: (_b = attrInput.value) != null ? _b : selected.value,
193
- type: "hidden"
194
- })
195
- ), /* @__PURE__ */ React4.createElement(
196
- "input",
217
+ inputValue && autoUpdateValue(inputValue);
218
+ }, [inputValue]);
219
+ function getThemedClass(prefix) {
220
+ return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
221
+ }
222
+ const placeholderClass = `${input2} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
223
+ const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
224
+ return /* @__PURE__ */ React4.createElement("div", { className: `w-full group ${attr.outerclass}` }, attrInput.label && /* @__PURE__ */ React4.createElement(
225
+ "label",
197
226
  {
198
- value: keyword,
199
- type: "search",
200
- onChange: (e) => setKeyword(e.target.value),
201
- className: `${attrInput.name}-keyword ${input2} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
202
- placeholder: selected.value ? selected.label : attrInput.placeholder
203
- }
204
- ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ React4.createElement(
205
- "button",
227
+ className: "text-input__label",
228
+ htmlFor: attrInput.labelHtml,
229
+ style: { color: getThemedClass("-text-secondary") }
230
+ },
231
+ attrInput.label
232
+ ), /* @__PURE__ */ React4.createElement(
233
+ "div",
206
234
  {
207
- type: "button",
208
- onClick: (e) => selectItem({ label, value }, e),
209
- key: value,
210
- className: "select-item"
235
+ className: `${attrInput.className} text-input__wrapper relative`,
236
+ style: {
237
+ borderColor: getThemedClass("-border"),
238
+ background: getThemedClass("-bg-surface")
239
+ }
211
240
  },
212
- label,
213
- selected.value == value && /* @__PURE__ */ React4.createElement(
214
- FontAwesomeIcon4,
241
+ /* @__PURE__ */ React4.createElement(
242
+ "input",
243
+ __spreadProps(__spreadValues(__spreadValues({
244
+ type: "hidden"
245
+ }, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
246
+ value: (_b = attrInput.value) != null ? _b : selected.value
247
+ })
248
+ ),
249
+ /* @__PURE__ */ React4.createElement(
250
+ "input",
215
251
  {
216
- icon: faCheck2,
217
- className: "text-[var(--color-primary)]"
252
+ type: "search",
253
+ value: keyword,
254
+ autoComplete: "off",
255
+ onChange: (e) => setKeyword(e.target.value),
256
+ className: `${attrInput.name}-keyword ${placeholderClass}`,
257
+ placeholder: selected.value ? selected.label : attrInput.placeholder,
258
+ style: {
259
+ color: selected.value ? getThemedClass("-text-primary") : void 0
260
+ }
218
261
  }
219
- )
220
- ))), /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, className: input__icon2 })));
262
+ ),
263
+ /* @__PURE__ */ React4.createElement(
264
+ "div",
265
+ {
266
+ className: "select-item__wrapper",
267
+ style: {
268
+ borderColor: getThemedClass("-border"),
269
+ background: getThemedClass("-bg-surface")
270
+ }
271
+ },
272
+ filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement(
273
+ "button",
274
+ {
275
+ disabled: true,
276
+ className: "select-item",
277
+ style: { color: "var(--color-danger)" }
278
+ },
279
+ "Tidak ada Item"
280
+ ),
281
+ filteredOptions.map(({ label, value }) => /* @__PURE__ */ React4.createElement(
282
+ "button",
283
+ {
284
+ key: value,
285
+ type: "button",
286
+ className: `select-item ${optionHoverClass}`,
287
+ onClick: (e) => selectItem({ label, value }, e),
288
+ style: { color: getThemedClass("-text-secondary") }
289
+ },
290
+ label,
291
+ selected.value == value && /* @__PURE__ */ React4.createElement(
292
+ FontAwesomeIcon4,
293
+ {
294
+ icon: faCheck2,
295
+ style: { color: "var(--color-info)" }
296
+ }
297
+ )
298
+ ))
299
+ ),
300
+ /* @__PURE__ */ React4.createElement(FontAwesomeIcon4, { icon: faChevronDown, style: { color: getThemedClass("-icon-input"), paddingRight: "0.7rem" } })
301
+ ));
221
302
  }
222
303
  SingleSelect.autoFill = autoFillInput;
223
304
  function autoFillInput(value, elName, list2) {
@@ -227,7 +308,6 @@ function autoFillInput(value, elName, list2) {
227
308
  const el = document.querySelector(`.${elName}-keyword`);
228
309
  el == null ? void 0 : el.setAttribute("placeholder", `${filtered == null ? void 0 : filtered.label}`);
229
310
  }
230
- var input__icon2 = "pr-[0.7rem] text-[var(--color-icon-input)]";
231
311
  var input2 = "text-input peer ... w-full";
232
312
 
233
313
  // src/components/Tooltip.tsx
@@ -379,8 +459,10 @@ function MultiSelect(_a) {
379
459
  "label",
380
460
  "labelHtml"
381
461
  ]);
382
- const { options = [], stringOptions = [] } = attr;
462
+ const { options = [], stringOptions = [], isdarkmode } = attr;
383
463
  const [keyword, setKeyword] = useState2("");
464
+ const optionHoverClass = `select-item-hover${isdarkmode ? "-dark" : ""}`;
465
+ const placeholderClass = `${input3} select-item-placeholder-${isdarkmode ? "dark" : ""}`;
384
466
  const availableOptions = useMemo2(() => {
385
467
  const isDefaultOption = options && options.length > 0;
386
468
  if (!isDefaultOption)
@@ -408,42 +490,98 @@ function MultiSelect(_a) {
408
490
  const isAllSelected = state.value.length == availableOptions.length;
409
491
  state.select(isAllSelected ? [] : availableOptions);
410
492
  }, [state.value]);
411
- return /* @__PURE__ */ React10.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
412
- "input",
493
+ function getThemedClass(prefix) {
494
+ return `var(--color${isdarkmode ? "-dark" : ""}${prefix})`;
495
+ }
496
+ return /* @__PURE__ */ React10.createElement("div", { className: `group w-full ${attr.outerclass}` }, label && /* @__PURE__ */ React10.createElement(
497
+ "label",
413
498
  {
414
- value: keyword,
415
- type: "search",
416
- placeholder: `${state.value.length} Dipilih`,
417
- className: `${input3} ${state.value.length > 0 && "placeholder:text-[var(--color-text-primary)]"}`,
418
- onChange: (e) => setKeyword(e.target.value)
419
- }
420
- ), /* @__PURE__ */ React10.createElement("div", { className: "select-item__wrapper select-multiple__wrapper" }, getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ React10.createElement(
421
- "button",
499
+ htmlFor: labelHtml,
500
+ className: "text-input__label",
501
+ style: { color: getThemedClass("-text-secondary") }
502
+ },
503
+ label
504
+ ), /* @__PURE__ */ React10.createElement(
505
+ "div",
422
506
  {
423
- type: "button",
424
- onClick: () => selectItem({ label: label2, value }),
425
- key: value,
426
- className: "select-item"
507
+ className: "text-input__wrapper relative",
508
+ style: {
509
+ borderColor: getThemedClass("-border"),
510
+ background: getThemedClass("-bg-surface")
511
+ }
427
512
  },
428
- label2,
429
- isItemExist(value) && /* @__PURE__ */ React10.createElement(
430
- FontAwesomeIcon7,
513
+ /* @__PURE__ */ React10.createElement(
514
+ "input",
431
515
  {
432
- icon: faCheck3,
433
- className: "text-[var(--color-primary)]"
516
+ type: "search",
517
+ value: keyword,
518
+ autoComplete: "off",
519
+ className: `${input3} ${placeholderClass}`,
520
+ onChange: (e) => setKeyword(e.target.value),
521
+ placeholder: `${state.value.length} Dipilih`,
522
+ style: {
523
+ color: state.value.length > 0 ? getThemedClass("-text-primary") : void 0
524
+ }
434
525
  }
526
+ ),
527
+ /* @__PURE__ */ React10.createElement(
528
+ "div",
529
+ {
530
+ className: "select-item__wrapper select-multiple__wrapper",
531
+ style: {
532
+ borderColor: getThemedClass("-border"),
533
+ background: getThemedClass("-bg-surface")
534
+ }
535
+ },
536
+ getFiltered().length == 0 && keyword != "" && /* @__PURE__ */ React10.createElement(
537
+ "button",
538
+ {
539
+ disabled: true,
540
+ className: "select-item",
541
+ style: { color: "var(--color-danger)" }
542
+ },
543
+ "Tidak ada Item"
544
+ ),
545
+ getFiltered().map(({ label: label2, value }) => /* @__PURE__ */ React10.createElement(
546
+ "button",
547
+ {
548
+ key: value,
549
+ type: "button",
550
+ onClick: () => selectItem({ label: label2, value }),
551
+ className: `select-item ${optionHoverClass}`,
552
+ style: { color: getThemedClass("-text-secondary") }
553
+ },
554
+ label2,
555
+ isItemExist(value) && /* @__PURE__ */ React10.createElement(
556
+ FontAwesomeIcon7,
557
+ {
558
+ icon: faCheck3,
559
+ style: { color: "var(--color-info)" }
560
+ }
561
+ )
562
+ ))
563
+ ),
564
+ /* @__PURE__ */ React10.createElement(
565
+ "button",
566
+ {
567
+ type: "button",
568
+ className: "cursor-pointer",
569
+ onClick: selectUnSelectAll
570
+ },
571
+ /* @__PURE__ */ React10.createElement(
572
+ FontAwesomeIcon7,
573
+ {
574
+ icon: faListCheck,
575
+ style: {
576
+ color: getThemedClass("-icon-input"),
577
+ paddingRight: "0.7rem",
578
+ fontSize: "1.2rem"
579
+ }
580
+ }
581
+ )
435
582
  )
436
- ))), /* @__PURE__ */ React10.createElement(
437
- "button",
438
- {
439
- type: "button",
440
- className: "cursor-pointer",
441
- onClick: selectUnSelectAll
442
- },
443
- /* @__PURE__ */ React10.createElement(FontAwesomeIcon7, { icon: faListCheck, className: input__icon3 })
444
- )));
583
+ ));
445
584
  }
446
- var input__icon3 = "pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]";
447
585
  var input3 = "text-input peer ... w-full";
448
586
 
449
587
  // src/components/ThemeToggle.tsx
@@ -486,6 +624,7 @@ function Dashboard() {
486
624
  return /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-[1rem]" }, /* @__PURE__ */ React12.createElement(
487
625
  MultiSelect,
488
626
  {
627
+ isdarkmode: true,
489
628
  label: "Multi Select",
490
629
  stringOptions: stringList,
491
630
  state: { value: selectedItem, select: setSelectedItem }