@safestrong/ppa-component-library 1.8.1 → 1.8.2

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 (5) hide show
  1. package/dist/index.js.map +1 -1
  2. package/dist/index.mjs.map +1 -1
  3. package/dist/styles.css +1 -1
  4. package/package.json +88 -85
  5. package/readme.md +146 -146
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 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"]}
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\";\nexport { default as TextInput } from \"./components/TextInput\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as SingleSelect } from \"./components/SingleSelect\";\nexport { default as Tooltip } from \"./components/Tooltip\";\nexport { default as NavTabClient } from \"./components/NavTabClient\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Toast } from \"./components/Toast\";\nexport { default as Expandable } from \"./components/Expandable\";\nexport { default as MultiSelect } from \"./components/MultiSelect\";\nexport { default as ThemeToggle } from \"./components/ThemeToggle\";\nexport { default as Dashboard } from \"./components/Dashboard\";\nexport { default as Badge } from \"./components/Badge\";\nexport { default as Skeleton } from \"./components/Skeleton\";\nexport { default as Navigation } from \"./components/Navigation\";\nexport { default as Confirmation } from \"./components/Confirmation\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label?: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n const loadingLabel = label && isLoading ? \"Memproses ...\" : \"\";\n return (\n <button\n {...rest}\n disabled={rest.disabled || isLoading}\n className={`${!icon && \"py-[0.84rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary ${label ? \"\" : \"!p-[0.87rem]\"}`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] ${label && \"mr-[0.3rem]\"} ${\n isLoading && \"animate-spin\"\n }`}\n />\n )}\n {isLoading ? loadingLabel : label}\n </button>\n );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n return (\n <button\n {...props}\n className={`${props.className} ${\n props.label ? \"max-w-[content] px-[0.8rem]\" : \"\"\n } icon__button`}\n >\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\n {props.label && (\n <span className=\"inline-block ml-[0.8rem] text-[1rem]\">\n {props.label}\n </span>\n )}\n </button>\n );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n return (\n <div className=\"icon__button_group\">\n {list.map((props, idx) => (\n <button key={idx + 1} className={getBtnClass(idx)} {...props}>\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\n </button>\n ))}\n </div>\n );\n};\n\nconst SSOButton = ({ href, btnclass }: { href: string; btnclass?: string }) => {\n return (\n <a href={href} className={`sso-button ${btnclass}`}>\n <img\n alt=\"logo\"\n className=\"sso-icon\"\n src=\"https://storage.ppa-ho.net/public/ppa-component-library/lock.png\"\n />{\" \"}\n Login dengan SSO\n </a>\n );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\nButton.SSOButton = SSOButton;\n\nfunction getBtnClass(idx: number) {\n return `icon__button !h-[2.95rem] !rounded-[0] border-[0] ${\n idx == 0 ? \"\" : \"border-l border-l-[var(--color-border)]\"\n }`;\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] \";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n outerclass,\n isdarkmode,\n inputclass,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n outerclass?: string;\n isdarkmode?: boolean;\n inputclass?: string;\n }\n>) {\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n return (\n <div className={`group ${outerclass} w-full`}>\n {label && (\n <label\n htmlFor={labelFor}\n className=\"text-input__label\"\n style={{\n color: getThemedClass('-text-secondary')\n }}\n >\n {label}\n </label>\n )}\n <div\n className={`text-input__wrapper overflow-hidden ${attr.className}`}\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${icon && \"!pl-[0.3rem]\"} ${inputclass}`}\n style={{\n color: getThemedClass('-text-primary')\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 relative\">\n <input id=\"slider\" type=\"checkbox\" className={input} {...attr} />\n <label htmlFor={attr.id || \"slider\"} className=\"slider\">\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[0.7rem] translate-x-[0.2px]\"\n />\n </label>\n </div>\n </div>\n );\n}\n\nconst input = \"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\";\n","\"use client\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n placeholder?: string;\n stateaction?: (param: any) => void;\n outerclass?: string;\n isdarkmode?: boolean;\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 = [], isdarkmode, ...attrInput } = attr;\n const inputValue = attrInput.value\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n\n function selectItem(\n { label, value }: { label: string; value: any },\n e: React.MouseEvent<HTMLButtonElement>,\n ) {\n const triggerManual = attrInput.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attrInput.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n\n if (attr.stateaction) {\n if (options?.length > 0) attr.stateaction({ label, value });\n if (stringOptions?.length > 0) attr.stateaction(value);\n }\n\n setKeyword(\"\");\n e.currentTarget.blur();\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n let defaultOptions = options && options.length > 0;\n if (!defaultOptions)\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options;\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\n );\n }, [keyword, availableOptions]);\n\n useEffect(() => {\n inputValue && autoUpdateValue(inputValue as string);\n }, [inputValue]);\n\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\n\n return (\n <div className={`w-full group ${attr.outerclass}`}>\n {attrInput.label && (\n <label\n className=\"text-input__label\"\n htmlFor={attrInput.labelHtml}\n style={{color: getThemedClass('-text-secondary')}}\n >\n {attrInput.label}\n </label>\n )}\n <div\n className={`${attrInput.className} text-input__wrapper relative`}\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n <input\n type=\"hidden\"\n {...attrInput}\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n value={attrInput.value ?? selected.value}\n />\n <input\n type=\"search\"\n value={keyword}\n autoComplete=\"off\"\n onChange={(e) => setKeyword(e.target.value)}\n className={`${attrInput.name}-keyword ${placeholderClass}`}\n placeholder={selected.value ? selected.label : attrInput.placeholder}\n style={{\n color: selected.value ? getThemedClass('-text-primary') : undefined\n }}\n />\n <div\n className=\"select-item__wrapper\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button\n disabled\n className=\"select-item\"\n style={{ color: 'var(--color-danger)' }}\n >\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n key={value}\n type=\"button\"\n className={`select-item ${optionHoverClass}`}\n onClick={(e) => selectItem({ label, value }, e)}\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n style={{ color: 'var(--color-info)' }}\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} style={{ color: getThemedClass('-icon-input'), paddingRight: '0.7rem' }} />\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 = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]/50\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className?: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\n\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`toast__wrapper group ${className}`}>\n <div className=\"toast__body\">\n <div style={{ background: getColor(type) }} className={bullet}></div>\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <div className={`toast__icon toast__icon__${type}`}></div>\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.3rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n\nconst bullet =\n \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, 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 isdarkmode?: boolean;\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 = [], isdarkmode } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\n\n const availableOptions = useMemo(() => {\n const isDefaultOption = options && options.length > 0;\n if (!isDefaultOption)\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options;\n }, [options, stringOptions]);\n\n function getFiltered() {\n return availableOptions.filter(\n ({ label, value }) =>\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == availableOptions.length;\n state.select(isAllSelected ? [] : availableOptions);\n }, [state.value]);\n\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n\n return (\n <div className={`group w-full ${attr.outerclass}`}>\n {label && (\n <label\n htmlFor={labelHtml}\n className=\"text-input__label\"\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n </label>\n )}\n <div\n className=\"text-input__wrapper relative\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n <input\n type=\"search\"\n value={keyword}\n autoComplete=\"off\"\n className={`${input} ${placeholderClass}`}\n onChange={(e) => setKeyword(e.target.value)}\n placeholder={`${state.value.length} Dipilih`}\n style={{\n color: state.value.length > 0 ? getThemedClass('-text-primary') : undefined\n }}\n />\n <div\n className=\"select-item__wrapper select-multiple__wrapper\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {getFiltered().length == 0 && keyword != \"\" && (\n <button\n disabled\n className=\"select-item\"\n style={{ color: 'var(--color-danger)' }}\n >\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n key={value}\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n className={`select-item ${optionHoverClass}`}\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n style={{ color: 'var(--color-info)' }}\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon\n icon={faListCheck}\n style={{\n color: getThemedClass('-icon-input'),\n paddingRight: '0.7rem',\n fontSize: '1.2rem'\n }}\n />\n </button>\n </div>\n </div>\n );\n}\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 relative\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\"\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 isdarkmode={true}\n label=\"Multi Select\"\n stringOptions={stringList}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n stringOptions={stringList}\n placeholder=\"-- Pilih Status --\"\n value={sel.value}\n />\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" | \"danger\" | \"warning\" | \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n list: { label: string; href: string }[];\n activeUrl: string;\n outerclass?: string;\n CustomComponent?: React.ElementType;\n}) => {\n const Component = props.CustomComponent || \"a\";\n function getAnchorClass(href: string) {\n return href === props.activeUrl\n ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n }\n\n return (\n <nav className={`nav__wrapper ${props.outerclass}`}>\n {props.list.map((prop) => (\n <Component\n key={prop.href}\n className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n {...prop}\n >\n {prop.label}\n </Component>\n ))}\n </nav>\n );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n \"p-[0.8rem] h-full grid items-center transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n","import React from \"react\";\n\nexport default function Confirmation({\n type = \"warning\",\n text,\n title,\n secondaryAction,\n secondaryLabel = \"Tidak\",\n mainAction,\n mainLabel = \"Ya\",\n}: {\n mainAction: () => void;\n secondaryAction?: () => void;\n mainLabel?: string;\n secondaryLabel?: string;\n title: string;\n text: string;\n type?: \"info\" | \"warning\" | \"danger\" | \"success\";\n}) {\n return (\n <div className=\"confirmation__outer\">\n <div className=\"confirmation__card\">\n <div className={wrapper}>\n <div className={`baloon__${type} baloon`}></div>\n <div>\n <h3 className=\"font-semibold\">{title}</h3>\n <p className={confirmation__text}>{text}</p>\n </div>\n </div>\n <div className=\"confirmation__footer\">\n {secondaryAction && (\n <button\n onClick={secondaryAction}\n type=\"button\"\n className=\"cursor-pointer\"\n style={{ color: `var(--color-${type})` }}\n >\n {secondaryLabel}\n </button>\n )}\n <button\n onClick={() => {\n mainAction();\n secondaryAction && secondaryAction();\n }}\n className=\"cursor-pointer btn__primary min-w-[8rem]\"\n style={{\n background: `var(--color-${type})`,\n border: `1px solid var(--color-${type})`,\n }}\n >\n {mainLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n\nconst wrapper =\n \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\nconst confirmation__text =\n \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\n"],"mappings":"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","names":["React","list","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","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.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\r\n icon?: IconProp;\r\n label?: string;\r\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\r\n isLoading?: boolean;\r\n};\r\n\r\nexport default function Button({\r\n label,\r\n icon,\r\n isLoading,\r\n btnType,\r\n className,\r\n ...rest\r\n}: Readonly<Button>) {\r\n const buttonIcon = isLoading ? faCircleNotch : icon;\r\n const loadingLabel = label && isLoading ? \"Memproses ...\" : \"\";\r\n return (\r\n <button\r\n {...rest}\r\n 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":["list","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","input","React","FontAwesomeIcon","faCheck","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useMemo","useState","FontAwesomeIcon","faCheck","useState","input","useMemo","label","isItemExist","React","FontAwesomeIcon","faCheck","React","React","React","useState","useState","React","React","React","React","React","React"]}
1
+ {"version":3,"sources":["../src/components/Button.tsx","../src/components/TextInput.tsx","../src/components/Slider.tsx","../src/components/SingleSelect.tsx","../src/components/Tooltip.tsx","../src/components/NavTabClient.tsx","../src/components/Card.tsx","../src/components/Toast.tsx","../src/components/Expandable.tsx","../src/components/MultiSelect.tsx","../src/components/ThemeToggle.tsx","../src/components/Dashboard.tsx","../src/components/Badge.tsx","../src/components/Skeleton.tsx","../src/components/Navigation.tsx","../src/components/Confirmation.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label?: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n const loadingLabel = label && isLoading ? \"Memproses ...\" : \"\";\n return (\n <button\n {...rest}\n disabled={rest.disabled || isLoading}\n className={`${!icon && \"py-[0.84rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary ${label ? \"\" : \"!p-[0.87rem]\"}`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] ${label && \"mr-[0.3rem]\"} ${\n isLoading && \"animate-spin\"\n }`}\n />\n )}\n {isLoading ? loadingLabel : label}\n </button>\n );\n}\n\nconst IconButton = (props: Readonly<Button>) => {\n return (\n <button\n {...props}\n className={`${props.className} ${\n props.label ? \"max-w-[content] px-[0.8rem]\" : \"\"\n } icon__button`}\n >\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\n {props.label && (\n <span className=\"inline-block ml-[0.8rem] text-[1rem]\">\n {props.label}\n </span>\n )}\n </button>\n );\n};\n\nconst IconButtonGroup = ({ list }: { list: Button[] }) => {\n return (\n <div className=\"icon__button_group\">\n {list.map((props, idx) => (\n <button key={idx + 1} className={getBtnClass(idx)} {...props}>\n {props.icon && <FontAwesomeIcon icon={props.icon} />}\n </button>\n ))}\n </div>\n );\n};\n\nconst SSOButton = ({ href, btnclass }: { href: string; btnclass?: string }) => {\n return (\n <a href={href} className={`sso-button ${btnclass}`}>\n <img\n alt=\"logo\"\n className=\"sso-icon\"\n src=\"https://storage.ppa-ho.net/public/ppa-component-library/lock.png\"\n />{\" \"}\n Login dengan SSO\n </a>\n );\n};\n\nButton.IconButton = IconButton;\nButton.IconButtonGroup = IconButtonGroup;\nButton.SSOButton = SSOButton;\n\nfunction getBtnClass(idx: number) {\n return `icon__button !h-[2.95rem] !rounded-[0] border-[0] ${\n idx == 0 ? \"\" : \"border-l border-l-[var(--color-border)]\"\n }`;\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)] \";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n outerclass,\n isdarkmode,\n inputclass,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n outerclass?: string;\n isdarkmode?: boolean;\n inputclass?: string;\n }\n>) {\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n return (\n <div className={`group ${outerclass} w-full`}>\n {label && (\n <label\n htmlFor={labelFor}\n className=\"text-input__label\"\n style={{\n color: getThemedClass('-text-secondary')\n }}\n >\n {label}\n </label>\n )}\n <div\n className={`text-input__wrapper overflow-hidden ${attr.className}`}\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${icon && \"!pl-[0.3rem]\"} ${inputclass}`}\n style={{\n color: getThemedClass('-text-primary')\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 relative\">\n <input id=\"slider\" type=\"checkbox\" className={input} {...attr} />\n <label htmlFor={attr.id || \"slider\"} className=\"slider\">\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[0.7rem] translate-x-[0.2px]\"\n />\n </label>\n </div>\n </div>\n );\n}\n\nconst input = \"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\";\n","\"use client\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n placeholder?: string;\n stateaction?: (param: any) => void;\n outerclass?: string;\n isdarkmode?: boolean;\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 = [], isdarkmode, ...attrInput } = attr;\n const inputValue = attrInput.value\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n\n function selectItem(\n { label, value }: { label: string; value: any },\n e: React.MouseEvent<HTMLButtonElement>,\n ) {\n const triggerManual = attrInput.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attrInput.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n\n if (attr.stateaction) {\n if (options?.length > 0) attr.stateaction({ label, value });\n if (stringOptions?.length > 0) attr.stateaction(value);\n }\n\n setKeyword(\"\");\n e.currentTarget.blur();\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n let defaultOptions = options && options.length > 0;\n if (!defaultOptions)\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options;\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\n );\n }, [keyword, availableOptions]);\n\n useEffect(() => {\n inputValue && autoUpdateValue(inputValue as string);\n }, [inputValue]);\n\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\n\n return (\n <div className={`w-full group ${attr.outerclass}`}>\n {attrInput.label && (\n <label\n className=\"text-input__label\"\n htmlFor={attrInput.labelHtml}\n style={{color: getThemedClass('-text-secondary')}}\n >\n {attrInput.label}\n </label>\n )}\n <div\n className={`${attrInput.className} text-input__wrapper relative`}\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n <input\n type=\"hidden\"\n {...attrInput}\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n value={attrInput.value ?? selected.value}\n />\n <input\n type=\"search\"\n value={keyword}\n autoComplete=\"off\"\n onChange={(e) => setKeyword(e.target.value)}\n className={`${attrInput.name}-keyword ${placeholderClass}`}\n placeholder={selected.value ? selected.label : attrInput.placeholder}\n style={{\n color: selected.value ? getThemedClass('-text-primary') : undefined\n }}\n />\n <div\n className=\"select-item__wrapper\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button\n disabled\n className=\"select-item\"\n style={{ color: 'var(--color-danger)' }}\n >\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n key={value}\n type=\"button\"\n className={`select-item ${optionHoverClass}`}\n onClick={(e) => selectItem({ label, value }, e)}\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n style={{ color: 'var(--color-info)' }}\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} style={{ color: getThemedClass('-icon-input'), paddingRight: '0.7rem' }} />\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 = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]/50\"\n }`}\n onClick={() => state.setActive(value)}\n >\n {label}\n </button>\n ))}\n </nav>\n );\n}\n","import React from \"react\";\n\ntype Card = {\n children: React.ReactNode;\n className?: string;\n};\n\nexport default function Card({ children, className }: Readonly<Card>) {\n return <div className={`card ${className}`}>{children}</div>;\n}\n\nconst Footer = ({\n className,\n children,\n}: {\n className?: string;\n children?: React.ReactNode;\n}) => {\n return (\n <div className={`${className} border-t border-t-[var(--color-border)]`}>\n {children}\n </div>\n );\n};\n\nCard.Footer = Footer;\n","import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faInfoCircle,\n faQuestionCircle,\n faXmarkCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\n\ntype ToastType = \"warning\" | \"success\" | \"info\" | \"danger\";\ntype Toast = {\n title: string;\n className?: string;\n description: string;\n type: ToastType;\n};\n\nexport default function Toast({\n title,\n description,\n type = \"info\",\n className,\n}: Readonly<Toast>) {\n return (\n <div className={`toast__wrapper group ${className}`}>\n <div className=\"toast__body\">\n <div style={{ background: getColor(type) }} className={bullet}></div>\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <div className={`toast__icon toast__icon__${type}`}></div>\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.3rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n\nconst bullet =\n \"w-[2rem] h-[2rem] absolute top-[-0.7rem] left-[-0.7rem] rounded-[50%]\";\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, 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 isdarkmode?: boolean;\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 = [], isdarkmode } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const optionHoverClass = `select-item-hover${isdarkmode?\"-dark\":\"\"}`\n const placeholderClass = `${input} select-item-placeholder-${isdarkmode?\"dark\":\"\"}`\n\n const availableOptions = useMemo(() => {\n const isDefaultOption = options && options.length > 0;\n if (!isDefaultOption)\n return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options;\n }, [options, stringOptions]);\n\n function getFiltered() {\n return availableOptions.filter(\n ({ label, value }) =>\n (label + \"\").toLowerCase().includes(keyword.toLowerCase()) ||\n (value + \"\").toLowerCase().includes(keyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == availableOptions.length;\n state.select(isAllSelected ? [] : availableOptions);\n }, [state.value]);\n\n function getThemedClass(prefix: string){\n return `var(--color${isdarkmode ? \"-dark\":\"\"}${prefix})`\n }\n\n return (\n <div className={`group w-full ${attr.outerclass}`}>\n {label && (\n <label\n htmlFor={labelHtml}\n className=\"text-input__label\"\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n </label>\n )}\n <div\n className=\"text-input__wrapper relative\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n <input\n type=\"search\"\n value={keyword}\n autoComplete=\"off\"\n className={`${input} ${placeholderClass}`}\n onChange={(e) => setKeyword(e.target.value)}\n placeholder={`${state.value.length} Dipilih`}\n style={{\n color: state.value.length > 0 ? getThemedClass('-text-primary') : undefined\n }}\n />\n <div\n className=\"select-item__wrapper select-multiple__wrapper\"\n style={{\n borderColor: getThemedClass('-border'),\n background: getThemedClass('-bg-surface'),\n }}\n >\n {getFiltered().length == 0 && keyword != \"\" && (\n <button\n disabled\n className=\"select-item\"\n style={{ color: 'var(--color-danger)' }}\n >\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n key={value}\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n className={`select-item ${optionHoverClass}`}\n style={{ color: getThemedClass('-text-secondary')}}\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n style={{ color: 'var(--color-info)' }}\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon\n icon={faListCheck}\n style={{\n color: getThemedClass('-icon-input'),\n paddingRight: '0.7rem',\n fontSize: '1.2rem'\n }}\n />\n </button>\n </div>\n </div>\n );\n}\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 relative\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[38px] h-[20px] opacity-[0] cursor-pointer absolute\"\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 isdarkmode={true}\n label=\"Multi Select\"\n stringOptions={stringList}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n stringOptions={stringList}\n placeholder=\"-- Pilih Status --\"\n value={sel.value}\n />\n </div>\n );\n}\n","import React from \"react\";\nexport default function Badge({\n text,\n type,\n className,\n}: {\n text: string;\n type: \"success\" | \"danger\" | \"warning\" | \"info\";\n className?: string;\n}) {\n return (\n <div className=\"badge__wrapper\">\n <span\n style={{\n background: `var(--color-${type})`,\n }}\n className={`badge ${className}`}\n >\n {text}\n </span>\n </div>\n );\n}\n","import React from \"react\";\nexport default function Skeleton({ className }: { className?: string }) {\n return (\n <div className={`${className} skeleton`}>\n <span className=\"skeleton__item skeleton-slide\"></span>\n </div>\n );\n}\n","import React from \"react\";\n\nexport default function Navigation() {\n return <nav></nav>;\n}\n\nconst URLNavigation = (props: {\n list: { label: string; href: string }[];\n activeUrl: string;\n outerclass?: string;\n CustomComponent?: React.ElementType;\n}) => {\n const Component = props.CustomComponent || \"a\";\n function getAnchorClass(href: string) {\n return href === props.activeUrl\n ? \"bg-[var(--color-primary-soft)] text-[var(--color-primary)]\"\n : \"text-[var(--color-text-secondary)]/70 hover:bg-[var(--color-border)]/40\";\n }\n\n return (\n <nav className={`nav__wrapper ${props.outerclass}`}>\n {props.list.map((prop) => (\n <Component\n key={prop.href}\n className={`${base__anchor} ${getAnchorClass(prop.href)}`}\n {...prop}\n >\n {prop.label}\n </Component>\n ))}\n </nav>\n );\n};\n\nNavigation.URL = URLNavigation;\n\nconst base__anchor =\n \"p-[0.8rem] h-full grid items-center transition-all leading-[1] px-[1.2rem] rounded-[0.4rem]\";\n","import React from \"react\";\n\nexport default function Confirmation({\n type = \"warning\",\n text,\n title,\n secondaryAction,\n secondaryLabel = \"Tidak\",\n mainAction,\n mainLabel = \"Ya\",\n}: {\n mainAction: () => void;\n secondaryAction?: () => void;\n mainLabel?: string;\n secondaryLabel?: string;\n title: string;\n text: string;\n type?: \"info\" | \"warning\" | \"danger\" | \"success\";\n}) {\n return (\n <div className=\"confirmation__outer\">\n <div className=\"confirmation__card\">\n <div className={wrapper}>\n <div className={`baloon__${type} baloon`}></div>\n <div>\n <h3 className=\"font-semibold\">{title}</h3>\n <p className={confirmation__text}>{text}</p>\n </div>\n </div>\n <div className=\"confirmation__footer\">\n {secondaryAction && (\n <button\n onClick={secondaryAction}\n type=\"button\"\n className=\"cursor-pointer\"\n style={{ color: `var(--color-${type})` }}\n >\n {secondaryLabel}\n </button>\n )}\n <button\n onClick={() => {\n mainAction();\n secondaryAction && secondaryAction();\n }}\n className=\"cursor-pointer btn__primary min-w-[8rem]\"\n style={{\n background: `var(--color-${type})`,\n border: `1px solid var(--color-${type})`,\n }}\n >\n {mainLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n\nconst wrapper =\n \"pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]\";\nconst confirmation__text =\n \"mt-[0.7rem] w-[90%] text-[var(--color-text-secondary)]\";\n"],"mappings":"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","names":["list","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","input","React","FontAwesomeIcon","faCheck","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useMemo","useState","FontAwesomeIcon","faCheck","useState","input","useMemo","label","isItemExist","React","FontAwesomeIcon","faCheck","React","React","React","useState","useState","React","React","React","React","React","React"]}
package/dist/styles.css CHANGED
@@ -1675,4 +1675,4 @@ h3 {
1675
1675
  --tw-backdrop-sepia: initial;
1676
1676
  }
1677
1677
  }
1678
- }
1678
+ }
package/package.json CHANGED
@@ -1,85 +1,88 @@
1
- {
2
- "devDependencies": {
3
- "@chromatic-com/storybook": "3.2.2",
4
- "@rollup/plugin-commonjs": "^28.0.6",
5
- "@rollup/plugin-node-resolve": "^15.3.1",
6
- "@rollup/plugin-terser": "^1.0.0",
7
- "@rollup/plugin-typescript": "^11.1.6",
8
- "@storybook/addon-essentials": "8.4.2",
9
- "@storybook/addon-interactions": "8.4.2",
10
- "@storybook/addon-onboarding": "8.4.2",
11
- "@storybook/addon-webpack5-compiler-swc": "1.0.5",
12
- "@storybook/blocks": "8.4.2",
13
- "@storybook/react": "8.4.2",
14
- "@storybook/react-webpack5": "8.4.2",
15
- "@storybook/test": "8.4.2",
16
- "@tailwindcss/postcss": "^4.1.13",
17
- "@types/react": "^18.3.12",
18
- "autoprefixer": "^10.4.21",
19
- "concurrently": "^9.2.0",
20
- "postcss": "^8.5.6",
21
- "postcss-cli": "^11.0.1",
22
- "react": "^18.2.0 || ^19.0.0",
23
- "react-dom": "^18.2.0 || ^19.0.0",
24
- "rollup": "^4.46.2",
25
- "rollup-plugin-dts": "^6.2.3",
26
- "rollup-plugin-peer-deps-external": "^2.2.4",
27
- "storybook": "^8.4.2",
28
- "tailwindcss": "^4.1.12",
29
- "tsup": "^8.5.0",
30
- "typescript": "^5.9.2"
31
- },
32
- "peerDependencies": {
33
- "react": "^18.2.0 || ^19.0.0",
34
- "react-dom": "^18.2.0 || ^19.0.0"
35
- },
36
- "name": "@safestrong/ppa-component-library",
37
- "version": "1.8.1",
38
- "description": "Collection of reusable components for any PPA web applications",
39
- "main": "dist/index.cjs",
40
- "module": "dist/index.js",
41
- "types": "dist/index.d.ts",
42
- "files": [
43
- "dist",
44
- "dist/types",
45
- "dist/img"
46
- ],
47
- "repository": {
48
- "type": "git",
49
- "url": "git+https://github.com/safestrong/ppa-component-library.git"
50
- },
51
- "author": "SS6 Development",
52
- "license": "MIT",
53
- "scripts": {
54
- "build": "npm run build:css && tsup src/index.ts --dts --format esm,cjs --sourcemap",
55
- "storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
56
- "build-storybook": "storybook build",
57
- "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
58
- "dev:css": "postcss ./src/styles.css -o ./dist/styles.css --watch",
59
- "rollup": "rollup -c --bundleConfigAsCjs",
60
- "release": "standard-version"
61
- },
62
- "exports": {
63
- ".": {
64
- "types": "./dist/index.d.ts",
65
- "import": "./dist/index.js",
66
- "require": "./dist/index.cjs"
67
- },
68
- "./styles.css": "./dist/styles.css",
69
- "./img/*": "./dist/img/*"
70
- },
71
- "sideEffects": [
72
- "**/*.css"
73
- ],
74
- "publishConfig": {
75
- "access": "public"
76
- },
77
- "dependencies": {
78
- "@fortawesome/fontawesome-svg-core": "^6.7.2",
79
- "@fortawesome/free-brands-svg-icons": "^6.7.2",
80
- "@fortawesome/free-regular-svg-icons": "^6.7.2",
81
- "@fortawesome/free-solid-svg-icons": "^6.7.2",
82
- "@fortawesome/react-fontawesome": "^0.2.2",
83
- "standard-version": "^9.5.0"
84
- }
85
- }
1
+ {
2
+ "devDependencies": {
3
+ "@chromatic-com/storybook": "3.2.2",
4
+ "@rollup/plugin-commonjs": "^28.0.6",
5
+ "@rollup/plugin-node-resolve": "^15.3.1",
6
+ "@rollup/plugin-terser": "^1.0.0",
7
+ "@rollup/plugin-typescript": "^11.1.6",
8
+ "@storybook/addon-essentials": "8.4.2",
9
+ "@storybook/addon-interactions": "8.4.2",
10
+ "@storybook/addon-onboarding": "8.4.2",
11
+ "@storybook/addon-webpack5-compiler-swc": "1.0.5",
12
+ "@storybook/blocks": "8.4.2",
13
+ "@storybook/react": "8.4.2",
14
+ "@storybook/react-webpack5": "8.4.2",
15
+ "@storybook/test": "8.4.2",
16
+ "@tailwindcss/postcss": "^4.1.13",
17
+ "@types/react": "^18.3.12",
18
+ "autoprefixer": "^10.4.21",
19
+ "concurrently": "^9.2.0",
20
+ "postcss": "^8.5.6",
21
+ "postcss-cli": "^11.0.1",
22
+ "react": "^18.2.0 || ^19.0.0",
23
+ "react-dom": "^18.2.0 || ^19.0.0",
24
+ "rollup": "^4.46.2",
25
+ "rollup-plugin-dts": "^6.2.3",
26
+ "rollup-plugin-peer-deps-external": "^2.2.4",
27
+ "storybook": "^8.4.2",
28
+ "tailwindcss": "^4.1.12",
29
+ "tsup": "^8.5.1",
30
+ "typescript": "^5.9.2"
31
+ },
32
+ "peerDependencies": {
33
+ "react": "^18.2.0 || ^19.0.0",
34
+ "react-dom": "^18.2.0 || ^19.0.0"
35
+ },
36
+ "overrides": {
37
+ "esbuild": "^0.28.1",
38
+ "brace-expansion": "^5.0.8",
39
+ "uuid": "^11.1.1"
40
+ },
41
+ "name": "@safestrong/ppa-component-library",
42
+ "version": "1.8.2",
43
+ "description": "Collection of reusable components for any PPA web applications",
44
+ "main": "dist/index.cjs",
45
+ "module": "dist/index.js",
46
+ "types": "dist/index.d.ts",
47
+ "files": [
48
+ "dist",
49
+ "dist/types",
50
+ "dist/img"
51
+ ],
52
+ "repository": {
53
+ "type": "git",
54
+ "url": "git+https://github.com/safestrong/ppa-component-library.git"
55
+ },
56
+ "author": "SS6 Development",
57
+ "license": "MIT",
58
+ "scripts": {
59
+ "build": "npm run build:css && tsup src/index.ts --dts --format esm,cjs --sourcemap",
60
+ "storybook": "concurrently \"npm:dev:css\" \"storybook dev -p 6006\"",
61
+ "build-storybook": "storybook build",
62
+ "build:css": "postcss ./src/styles.css -o ./dist/styles.css",
63
+ "dev:css": "postcss ./src/styles.css -o ./dist/styles.css --watch",
64
+ "rollup": "rollup -c --bundleConfigAsCjs"
65
+ },
66
+ "exports": {
67
+ ".": {
68
+ "types": "./dist/index.d.ts",
69
+ "import": "./dist/index.js",
70
+ "require": "./dist/index.cjs"
71
+ },
72
+ "./styles.css": "./dist/styles.css",
73
+ "./img/*": "./dist/img/*"
74
+ },
75
+ "sideEffects": [
76
+ "**/*.css"
77
+ ],
78
+ "publishConfig": {
79
+ "access": "public"
80
+ },
81
+ "dependencies": {
82
+ "@fortawesome/fontawesome-svg-core": "^6.7.2",
83
+ "@fortawesome/free-brands-svg-icons": "^6.7.2",
84
+ "@fortawesome/free-regular-svg-icons": "^6.7.2",
85
+ "@fortawesome/free-solid-svg-icons": "^6.7.2",
86
+ "@fortawesome/react-fontawesome": "^0.2.2"
87
+ }
88
+ }
package/readme.md CHANGED
@@ -1,146 +1,146 @@
1
- # 📦 PPA Component Library
2
-
3
- Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.
4
-
5
- > You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)
6
-
7
- ## 💻 Installation
8
-
9
- ```bash
10
- npm i @safestrong/ppa-component-library
11
- #OR
12
- yarn add @safestrong/ppa-component-library
13
- #OR
14
- pnpm add @safestrong/ppa-component-library
15
- ```
16
-
17
- ## 🕹 Usage
18
-
19
- Import the component first <br>
20
- `import { Button } from "@safestrong/ppa-component-library"` <br><br>
21
- Use component in your page or your own component <br>
22
- `<Button label="Click me" />`
23
-
24
- ## 📂 List
25
-
26
- ### Button - `<Button />`
27
-
28
- | Prop | Type | Required | Default | Description |
29
- | ----------- | ---------- | -------- | ------- | ---------------------------------- |
30
- | `label` | `string` | ✅ Yes | — | The text inside the button. |
31
- | `isLoading` | `boolean` | ❌ No | false | Loading state waiting |
32
- | `btnType` | `enum` | ❌ No | primary | `primary`, `secondary`, `tertiary` |
33
- | `icon` | `IconProp` | ❌ No | — | Icon inside the button. |
34
- | `className` | `string` | ❌ No | — | Additional class for button. |
35
-
36
- <hr>
37
-
38
- ### Card - `<Card />`
39
-
40
- | Prop | Type | Required | Default | Description |
41
- | ----------- | ----------------- | -------- | ------- | ------------------------- |
42
- | `children` | `React.ReactNode` | ✅ Yes | — | Content inside. |
43
- | `className` | `string` | ❌ No | - | Additional class for card |
44
-
45
- <hr>
46
-
47
- ### Text Input - `<TextInput />`
48
-
49
- | Prop | Type | Required | Default | Description |
50
- | ---------- | ---------- | -------- | ------- | ---------------------------------- |
51
- | `icon` | `IconProp` | ❌ No | — | Icon inside text input |
52
- | `label` | `string` | ❌ No | - | Additional label if needed |
53
- | `labelFor` | `string` | ❌ No | - | Label (if any) `htmlFor` attribute |
54
-
55
- <hr>
56
-
57
- ### Toast - `<Toast />`
58
-
59
- | Prop | Type | Required | Default | Description |
60
- | ------------- | -------- | -------- | ------- | ----------------------------------- |
61
- | `title` | `string` | ✅ Yes | — | Toast Title |
62
- | `description` | `string` | ✅ Yes | - | Description on toast body |
63
- | `type` | `enum` | ❌ No | `info` | `info`,`warning`,`success`,`danger` |
64
- | `className` | `string` | ❌ No | - | Additional className for Toast body |
65
-
66
- <hr>
67
-
68
- ### Expandable - `<Expandable />`
69
-
70
- | Prop | Type | Required | Default | Description |
71
- | ----------- | ----------------- | -------- | ------- | ------------------------------- |
72
- | `title` | `string` | ✅ Yes | — | Title |
73
- | `children` | `React.ReactNode` | ✅ Yes | - | Content inside |
74
- | `isOpen` | `boolean` | ❌ No | false | Auto show/expand content |
75
- | `className` | `string` | ❌ No | - | Additional class for Expandable |
76
-
77
- <hr>
78
-
79
- ### Tooltip - `<Tooltip />`
80
-
81
- | Prop | Type | Required | Default | Description |
82
- | ---------- | ----------------- | -------- | ------- | -------------------------------- |
83
- | `children` | `React.ReactNode` | ✅ Yes | — | Text content |
84
- | `text` | `string` | ✅ Yes | - | Tooltip text |
85
- | `position` | `string` | ❌ No | `top` | `top`, `bottom`, `right`, `left` |
86
-
87
- <hr>
88
-
89
- ### Single Select - `<SingleSelect />` ✅ Client Component
90
-
91
- | Prop | Type | Required | Default | Description |
92
- | ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
93
- | `label` | `string` | ❌ No | — | Additional label |
94
- | `labelHtml` | `string` | ❌ No | - | Label (if any) `htmlFor` attribute |
95
- | `options` | `{label:string, value:string}[]` | ❌ No | - | List Option |
96
- | `stringOptions` | `string[]` | ❌ No | - | List Option |
97
-
98
- <hr>
99
-
100
- ### Multi Select - `<MultiSelect />` ✅ Client Component
101
-
102
- | Prop | Type | Required | Default | Description |
103
- | ------- | --------------------------------- | -------- | ------- | ------------ |
104
- | `state` | `React.useState<{value, select}>` | ✅ Yes | — | Text content |
105
- | `options` | `{label:string, value:string}[]` | ❌ No | - | List Option |
106
- `stringOptions` | `string[]` | ❌ No | - | List Option |
107
-
108
- Example:
109
-
110
- ```bash
111
- export default function Dashboard() {
112
- const [selectedItem, setSelectedItem] = useState([]);
113
- return (
114
- <MultiSelect
115
- list={list}
116
- state={{ value: selectedItem, select: setSelectedItem }}
117
- />
118
- );
119
- }
120
- ```
121
-
122
- <hr>
123
-
124
- ### Slider - `<Slider />`
125
-
126
- | Prop | Type | Required | Default | Description |
127
- | --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
128
- | `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No | — | optinal attribute of input Element |
129
-
130
- <hr>
131
-
132
- ### Theme Toggle - `<ThemeToggle />`
133
-
134
- | Prop | Type | Required | Default | Description |
135
- | --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
136
- | `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No | — | optinal attribute of input Element |
137
-
138
- <hr>
139
-
140
- ### Tab Navigation - `<NavTabClient />` ✅ Client Component
141
-
142
- | Prop | Type | Required | Default | Description |
143
- | ---------- | -------------------------------- | -------- | ------- | ------------ |
144
- | `children` | `React.ReactNode` | ✅ Yes | — | Text content |
145
- | `state` | `string` | ✅ Yes | - | Tooltip text |
146
- | `items` | `{label:string, value:string}[]` | ✅ Ye | - | List Option |
1
+ # 📦 PPA Component Library
2
+
3
+ Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.
4
+
5
+ > You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)
6
+
7
+ ## 💻 Installation
8
+
9
+ ```bash
10
+ npm i @safestrong/ppa-component-library
11
+ #OR
12
+ yarn add @safestrong/ppa-component-library
13
+ #OR
14
+ pnpm add @safestrong/ppa-component-library
15
+ ```
16
+
17
+ ## 🕹 Usage
18
+
19
+ Import the component first <br>
20
+ `import { Button } from "@safestrong/ppa-component-library"` <br><br>
21
+ Use component in your page or your own component <br>
22
+ `<Button label="Click me" />`
23
+
24
+ ## 📂 List
25
+
26
+ ### Button - `<Button />`
27
+
28
+ | Prop | Type | Required | Default | Description |
29
+ | ----------- | ---------- | -------- | ------- | ---------------------------------- |
30
+ | `label` | `string` | ✅ Yes | — | The text inside the button. |
31
+ | `isLoading` | `boolean` | ❌ No | false | Loading state waiting |
32
+ | `btnType` | `enum` | ❌ No | primary | `primary`, `secondary`, `tertiary` |
33
+ | `icon` | `IconProp` | ❌ No | — | Icon inside the button. |
34
+ | `className` | `string` | ❌ No | — | Additional class for button. |
35
+
36
+ <hr>
37
+
38
+ ### Card - `<Card />`
39
+
40
+ | Prop | Type | Required | Default | Description |
41
+ | ----------- | ----------------- | -------- | ------- | ------------------------- |
42
+ | `children` | `React.ReactNode` | ✅ Yes | — | Content inside. |
43
+ | `className` | `string` | ❌ No | - | Additional class for card |
44
+
45
+ <hr>
46
+
47
+ ### Text Input - `<TextInput />`
48
+
49
+ | Prop | Type | Required | Default | Description |
50
+ | ---------- | ---------- | -------- | ------- | ---------------------------------- |
51
+ | `icon` | `IconProp` | ❌ No | — | Icon inside text input |
52
+ | `label` | `string` | ❌ No | - | Additional label if needed |
53
+ | `labelFor` | `string` | ❌ No | - | Label (if any) `htmlFor` attribute |
54
+
55
+ <hr>
56
+
57
+ ### Toast - `<Toast />`
58
+
59
+ | Prop | Type | Required | Default | Description |
60
+ | ------------- | -------- | -------- | ------- | ----------------------------------- |
61
+ | `title` | `string` | ✅ Yes | — | Toast Title |
62
+ | `description` | `string` | ✅ Yes | - | Description on toast body |
63
+ | `type` | `enum` | ❌ No | `info` | `info`,`warning`,`success`,`danger` |
64
+ | `className` | `string` | ❌ No | - | Additional className for Toast body |
65
+
66
+ <hr>
67
+
68
+ ### Expandable - `<Expandable />`
69
+
70
+ | Prop | Type | Required | Default | Description |
71
+ | ----------- | ----------------- | -------- | ------- | ------------------------------- |
72
+ | `title` | `string` | ✅ Yes | — | Title |
73
+ | `children` | `React.ReactNode` | ✅ Yes | - | Content inside |
74
+ | `isOpen` | `boolean` | ❌ No | false | Auto show/expand content |
75
+ | `className` | `string` | ❌ No | - | Additional class for Expandable |
76
+
77
+ <hr>
78
+
79
+ ### Tooltip - `<Tooltip />`
80
+
81
+ | Prop | Type | Required | Default | Description |
82
+ | ---------- | ----------------- | -------- | ------- | -------------------------------- |
83
+ | `children` | `React.ReactNode` | ✅ Yes | — | Text content |
84
+ | `text` | `string` | ✅ Yes | - | Tooltip text |
85
+ | `position` | `string` | ❌ No | `top` | `top`, `bottom`, `right`, `left` |
86
+
87
+ <hr>
88
+
89
+ ### Single Select - `<SingleSelect />` ✅ Client Component
90
+
91
+ | Prop | Type | Required | Default | Description |
92
+ | ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
93
+ | `label` | `string` | ❌ No | — | Additional label |
94
+ | `labelHtml` | `string` | ❌ No | - | Label (if any) `htmlFor` attribute |
95
+ | `options` | `{label:string, value:string}[]` | ❌ No | - | List Option |
96
+ | `stringOptions` | `string[]` | ❌ No | - | List Option |
97
+
98
+ <hr>
99
+
100
+ ### Multi Select - `<MultiSelect />` ✅ Client Component
101
+
102
+ | Prop | Type | Required | Default | Description |
103
+ | ------- | --------------------------------- | -------- | ------- | ------------ |
104
+ | `state` | `React.useState<{value, select}>` | ✅ Yes | — | Text content |
105
+ | `options` | `{label:string, value:string}[]` | ❌ No | - | List Option |
106
+ `stringOptions` | `string[]` | ❌ No | - | List Option |
107
+
108
+ Example:
109
+
110
+ ```bash
111
+ export default function Dashboard() {
112
+ const [selectedItem, setSelectedItem] = useState([]);
113
+ return (
114
+ <MultiSelect
115
+ list={list}
116
+ state={{ value: selectedItem, select: setSelectedItem }}
117
+ />
118
+ );
119
+ }
120
+ ```
121
+
122
+ <hr>
123
+
124
+ ### Slider - `<Slider />`
125
+
126
+ | Prop | Type | Required | Default | Description |
127
+ | --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
128
+ | `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No | — | optinal attribute of input Element |
129
+
130
+ <hr>
131
+
132
+ ### Theme Toggle - `<ThemeToggle />`
133
+
134
+ | Prop | Type | Required | Default | Description |
135
+ | --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
136
+ | `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No | — | optinal attribute of input Element |
137
+
138
+ <hr>
139
+
140
+ ### Tab Navigation - `<NavTabClient />` ✅ Client Component
141
+
142
+ | Prop | Type | Required | Default | Description |
143
+ | ---------- | -------------------------------- | -------- | ------- | ------------ |
144
+ | `children` | `React.ReactNode` | ✅ Yes | — | Text content |
145
+ | `state` | `string` | ✅ Yes | - | Tooltip text |
146
+ | `items` | `{label:string, value:string}[]` | ✅ Ye | - | List Option |