@safestrong/ppa-component-library 1.3.6 → 1.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +38 -23
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +39 -24
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +0 -21
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -20,6 +20,7 @@ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElemen
20
20
  type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
21
21
  label?: string;
22
22
  labelHtml?: string;
23
+ placeholder?: string;
23
24
  options?: {
24
25
  label: string;
25
26
  value: string;
@@ -98,13 +99,14 @@ type Option = {
98
99
  type MultiSelect = {
99
100
  label?: string;
100
101
  labelHtml?: string;
101
- list: Option[];
102
+ options?: Option[];
103
+ stringOptions?: string[];
102
104
  state: {
103
105
  value: Option[];
104
106
  select: (newVal: Option[]) => void;
105
107
  };
106
108
  };
107
- declare function MultiSelect({ list, state, label, labelHtml, }: Readonly<MultiSelect>): React.JSX.Element;
109
+ declare function MultiSelect({ state, label, labelHtml, ...attr }: Readonly<MultiSelect>): React.JSX.Element;
108
110
 
109
111
  declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
110
112
 
package/dist/index.d.ts CHANGED
@@ -20,6 +20,7 @@ declare function Slider(attr: Readonly<React.InputHTMLAttributes<HTMLInputElemen
20
20
  type SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {
21
21
  label?: string;
22
22
  labelHtml?: string;
23
+ placeholder?: string;
23
24
  options?: {
24
25
  label: string;
25
26
  value: string;
@@ -98,13 +99,14 @@ type Option = {
98
99
  type MultiSelect = {
99
100
  label?: string;
100
101
  labelHtml?: string;
101
- list: Option[];
102
+ options?: Option[];
103
+ stringOptions?: string[];
102
104
  state: {
103
105
  value: Option[];
104
106
  select: (newVal: Option[]) => void;
105
107
  };
106
108
  };
107
- declare function MultiSelect({ list, state, label, labelHtml, }: Readonly<MultiSelect>): React.JSX.Element;
109
+ declare function MultiSelect({ state, label, labelHtml, ...attr }: Readonly<MultiSelect>): React.JSX.Element;
108
110
 
109
111
  declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>): React.JSX.Element;
110
112
 
package/dist/index.js CHANGED
@@ -153,8 +153,8 @@ var import_react4 = __toESM(require("react"));
153
153
  var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
154
154
  var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
155
155
  function SingleSelect(attr) {
156
- var _a;
157
- const { options = [], stringOptions = [] } = attr;
156
+ var _b;
157
+ const _a = attr, { options = [], stringOptions = [] } = _a, attrInput = __objRest(_a, ["options", "stringOptions"]);
158
158
  const [keyword, setKeyword] = (0, import_react4.useState)("");
159
159
  const [selected, setSelected] = (0, import_react4.useState)({
160
160
  label: "",
@@ -162,10 +162,10 @@ function SingleSelect(attr) {
162
162
  });
163
163
  const inputKeyword = (0, import_react4.useDeferredValue)(keyword);
164
164
  function selectItem({ label, value }) {
165
- const triggerManual = attr.onChange;
165
+ const triggerManual = attrInput.onChange;
166
166
  if (triggerManual) {
167
167
  triggerManual == null ? void 0 : triggerManual({
168
- target: { value, name: attr.name }
168
+ target: { value, name: attrInput.name }
169
169
  });
170
170
  }
171
171
  setSelected({ label, value });
@@ -180,7 +180,9 @@ function SingleSelect(attr) {
180
180
  }
181
181
  }
182
182
  const availableOptions = (0, import_react4.useMemo)(() => {
183
- return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
183
+ let typeOption = options && options.length > 0;
184
+ if (!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));
185
+ return options;
184
186
  }, [options, stringOptions]);
185
187
  const filteredOptions = (0, import_react4.useMemo)(() => {
186
188
  return availableOptions.filter(
@@ -188,12 +190,12 @@ function SingleSelect(attr) {
188
190
  );
189
191
  }, [inputKeyword, availableOptions]);
190
192
  (0, import_react4.useEffect)(() => {
191
- attr.value && autoUpdateValue(attr.value);
192
- }, [attr.value]);
193
- return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full group" }, attr.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
193
+ attrInput.value && autoUpdateValue(attrInput.value);
194
+ }, [attrInput.value]);
195
+ return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full group" }, attrInput.label && /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react4.default.createElement(
194
196
  "input",
195
- __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
196
- value: (_a = attr.value) != null ? _a : selected.value,
197
+ __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
198
+ value: (_b = attrInput.value) != null ? _b : selected.value,
197
199
  type: "hidden"
198
200
  })
199
201
  ), /* @__PURE__ */ import_react4.default.createElement(
@@ -201,10 +203,10 @@ function SingleSelect(attr) {
201
203
  {
202
204
  value: keyword,
203
205
  type: "search",
204
- name: `${attr.name}-keyword`,
206
+ name: `${attrInput.name}-keyword`,
205
207
  onChange: (e) => setKeyword(e.target.value),
206
208
  className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
207
- placeholder: selected.value ? selected.label : "Cari opsi ..."
209
+ placeholder: selected.value ? selected.label : attrInput.placeholder
208
210
  }
209
211
  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ import_react4.default.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(
210
212
  "button",
@@ -382,16 +384,26 @@ function Expandable({
382
384
  var import_react10 = __toESM(require("react"));
383
385
  var import_react_fontawesome7 = require("@fortawesome/react-fontawesome");
384
386
  var import_free_solid_svg_icons6 = require("@fortawesome/free-solid-svg-icons");
385
- function MultiSelect({
386
- list: list2,
387
- state,
388
- label,
389
- labelHtml
390
- }) {
387
+ function MultiSelect(_a) {
388
+ var _b = _a, {
389
+ state,
390
+ label,
391
+ labelHtml
392
+ } = _b, attr = __objRest(_b, [
393
+ "state",
394
+ "label",
395
+ "labelHtml"
396
+ ]);
397
+ const { options = [], stringOptions = [] } = attr;
391
398
  const [keyword, setKeyword] = (0, import_react10.useState)("");
392
399
  const inputKeyword = (0, import_react10.useDeferredValue)(keyword);
400
+ const availableOptions = (0, import_react10.useMemo)(() => {
401
+ const typeOption = options && options.length > 0;
402
+ if (!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));
403
+ return options;
404
+ }, [options, stringOptions]);
393
405
  function getFiltered() {
394
- return list2.filter(
406
+ return availableOptions.filter(
395
407
  ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
396
408
  );
397
409
  }
@@ -408,8 +420,8 @@ function MultiSelect({
408
420
  return state.value.find((item) => item.value == value);
409
421
  }
410
422
  const selectUnSelectAll = (0, import_react10.useCallback)(() => {
411
- const isAllSelected = state.value.length == list2.length;
412
- state.select(isAllSelected ? [] : list2);
423
+ const isAllSelected = state.value.length == options.length;
424
+ state.select(isAllSelected ? [] : options);
413
425
  }, [state.value]);
414
426
  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "group" }, label && /* @__PURE__ */ import_react10.default.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ import_react10.default.createElement(
415
427
  "input",
@@ -478,6 +490,7 @@ var list = [
478
490
  { label: "Option 2", value: "option2" },
479
491
  { label: "Option 3", value: "option3" }
480
492
  ];
493
+ var stringList = ["option1", "option2", "option3"];
481
494
  function Dashboard() {
482
495
  const [selectedItem, setSelectedItem] = (0, import_react12.useState)([]);
483
496
  const [sel, setSel] = (0, import_react12.useState)({ label: "", value: "" });
@@ -489,7 +502,7 @@ function Dashboard() {
489
502
  MultiSelect,
490
503
  {
491
504
  label: "Multi Select",
492
- list,
505
+ stringOptions: stringList,
493
506
  state: { value: selectedItem, select: setSelectedItem }
494
507
  }
495
508
  ), /* @__PURE__ */ import_react12.default.createElement(
@@ -497,7 +510,9 @@ function Dashboard() {
497
510
  {
498
511
  label: "Single Select",
499
512
  name: "newinput",
500
- options: list
513
+ stringOptions: stringList,
514
+ placeholder: "-- Pilih Status --",
515
+ value: sel.value
501
516
  }
502
517
  ), /* @__PURE__ */ import_react12.default.createElement(
503
518
  "button",
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"],"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\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attr.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n return options || stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attr.value && autoUpdateValue(attr.value as string);\n }, [attr.value]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attr.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\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};\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={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, 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 list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id || \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\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-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n // value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\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"],"mappings":"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","names":["React","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","list","label","isItemExist","React","input","input__icon","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"],"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\";\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n placeholder?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [], ...attrInput } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attrInput.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attrInput.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n let typeOption = options && options.length > 0\n if(!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attrInput.value && autoUpdateValue(attrInput.value as string);\n }, [attrInput.value]);\n\n return (\n <div className=\"w-full group\">\n {attrInput.label && (\n <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n {attrInput.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attrInput}\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n value={attrInput.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attrInput.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : attrInput.placeholder}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\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};\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={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n options?: Option[];\n stringOptions?: string[],\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n state,\n label,\n labelHtml,\n ...attr\n}: Readonly<MultiSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n const availableOptions = useMemo(() => {\n const typeOption = options && options.length > 0\n if(!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options\n }, [options, stringOptions]);\n\n function getFiltered() {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == options.length;\n state.select(isAllSelected ? [] : options);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id || \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\",\"option2\", \"option3\"];\n\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n function updateState(item: string) {\n const filtered = list.find(({ value }) => value == item);\n filtered && setSel(filtered);\n }\n\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n // options={list}\n stringOptions={stringList}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n // options={list}\n stringOptions={stringList}\n placeholder=\"-- Pilih Status --\"\n value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\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"],"mappings":"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","names":["React","import_react","import_react_fontawesome","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","input__icon","list","import_react","React","import_react","React","import_react","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","React","import_react","import_free_solid_svg_icons","import_react_fontawesome","React","import_react","import_react_fontawesome","import_free_solid_svg_icons","label","isItemExist","React","input","input__icon","import_react","React","import_react","React","import_react","React","import_react","React"]}
package/dist/index.mjs CHANGED
@@ -107,8 +107,8 @@ import React4, { useDeferredValue, useEffect, useMemo, useState } from "react";
107
107
  import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
108
108
  import { faCheck as faCheck2, faChevronDown } from "@fortawesome/free-solid-svg-icons";
109
109
  function SingleSelect(attr) {
110
- var _a;
111
- const { options = [], stringOptions = [] } = attr;
110
+ var _b;
111
+ const _a = attr, { options = [], stringOptions = [] } = _a, attrInput = __objRest(_a, ["options", "stringOptions"]);
112
112
  const [keyword, setKeyword] = useState("");
113
113
  const [selected, setSelected] = useState({
114
114
  label: "",
@@ -116,10 +116,10 @@ function SingleSelect(attr) {
116
116
  });
117
117
  const inputKeyword = useDeferredValue(keyword);
118
118
  function selectItem({ label, value }) {
119
- const triggerManual = attr.onChange;
119
+ const triggerManual = attrInput.onChange;
120
120
  if (triggerManual) {
121
121
  triggerManual == null ? void 0 : triggerManual({
122
- target: { value, name: attr.name }
122
+ target: { value, name: attrInput.name }
123
123
  });
124
124
  }
125
125
  setSelected({ label, value });
@@ -134,7 +134,9 @@ function SingleSelect(attr) {
134
134
  }
135
135
  }
136
136
  const availableOptions = useMemo(() => {
137
- return options || stringOptions.map((opt) => ({ label: opt, value: opt }));
137
+ let typeOption = options && options.length > 0;
138
+ if (!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));
139
+ return options;
138
140
  }, [options, stringOptions]);
139
141
  const filteredOptions = useMemo(() => {
140
142
  return availableOptions.filter(
@@ -142,12 +144,12 @@ function SingleSelect(attr) {
142
144
  );
143
145
  }, [inputKeyword, availableOptions]);
144
146
  useEffect(() => {
145
- attr.value && autoUpdateValue(attr.value);
146
- }, [attr.value]);
147
- return /* @__PURE__ */ React4.createElement("div", { className: "w-full group" }, attr.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attr.labelHtml }, attr.label), /* @__PURE__ */ React4.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React4.createElement(
147
+ attrInput.value && autoUpdateValue(attrInput.value);
148
+ }, [attrInput.value]);
149
+ return /* @__PURE__ */ React4.createElement("div", { className: "w-full group" }, attrInput.label && /* @__PURE__ */ React4.createElement("label", { className: "text-input__label", htmlFor: attrInput.labelHtml }, attrInput.label), /* @__PURE__ */ React4.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React4.createElement(
148
150
  "input",
149
- __spreadProps(__spreadValues(__spreadValues({}, attr), attr.onChange ? { onChange: attr.onChange } : {}), {
150
- value: (_a = attr.value) != null ? _a : selected.value,
151
+ __spreadProps(__spreadValues(__spreadValues({}, attrInput), attrInput.onChange ? { onChange: attrInput.onChange } : {}), {
152
+ value: (_b = attrInput.value) != null ? _b : selected.value,
151
153
  type: "hidden"
152
154
  })
153
155
  ), /* @__PURE__ */ React4.createElement(
@@ -155,10 +157,10 @@ function SingleSelect(attr) {
155
157
  {
156
158
  value: keyword,
157
159
  type: "search",
158
- name: `${attr.name}-keyword`,
160
+ name: `${attrInput.name}-keyword`,
159
161
  onChange: (e) => setKeyword(e.target.value),
160
162
  className: `${input} ${selected.value && "placeholder:text-[var(--color-text-primary)]"}`,
161
- placeholder: selected.value ? selected.label : "Cari opsi ..."
163
+ placeholder: selected.value ? selected.label : attrInput.placeholder
162
164
  }
163
165
  ), /* @__PURE__ */ React4.createElement("div", { className: "select-item__wrapper" }, filteredOptions.length == 0 && keyword != "" && /* @__PURE__ */ React4.createElement("button", { disabled: true, className: "select-item text-[var(--color-danger)]" }, "Tidak ada Item"), filteredOptions.map(({ label, value }) => /* @__PURE__ */ React4.createElement(
164
166
  "button",
@@ -338,19 +340,29 @@ function Expandable({
338
340
  }
339
341
 
340
342
  // src/components/MultiSelect.tsx
341
- import React10, { useCallback, useDeferredValue as useDeferredValue2, useState as useState2 } from "react";
343
+ import React10, { useCallback, useDeferredValue as useDeferredValue2, useMemo as useMemo2, useState as useState2 } from "react";
342
344
  import { FontAwesomeIcon as FontAwesomeIcon7 } from "@fortawesome/react-fontawesome";
343
345
  import { faCheck as faCheck3, faListCheck } from "@fortawesome/free-solid-svg-icons";
344
- function MultiSelect({
345
- list: list2,
346
- state,
347
- label,
348
- labelHtml
349
- }) {
346
+ function MultiSelect(_a) {
347
+ var _b = _a, {
348
+ state,
349
+ label,
350
+ labelHtml
351
+ } = _b, attr = __objRest(_b, [
352
+ "state",
353
+ "label",
354
+ "labelHtml"
355
+ ]);
356
+ const { options = [], stringOptions = [] } = attr;
350
357
  const [keyword, setKeyword] = useState2("");
351
358
  const inputKeyword = useDeferredValue2(keyword);
359
+ const availableOptions = useMemo2(() => {
360
+ const typeOption = options && options.length > 0;
361
+ if (!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));
362
+ return options;
363
+ }, [options, stringOptions]);
352
364
  function getFiltered() {
353
- return list2.filter(
365
+ return availableOptions.filter(
354
366
  ({ label: label2, value }) => label2.toLowerCase().includes(inputKeyword.toLowerCase()) || value.toLowerCase().includes(inputKeyword.toLowerCase())
355
367
  );
356
368
  }
@@ -367,8 +379,8 @@ function MultiSelect({
367
379
  return state.value.find((item) => item.value == value);
368
380
  }
369
381
  const selectUnSelectAll = useCallback(() => {
370
- const isAllSelected = state.value.length == list2.length;
371
- state.select(isAllSelected ? [] : list2);
382
+ const isAllSelected = state.value.length == options.length;
383
+ state.select(isAllSelected ? [] : options);
372
384
  }, [state.value]);
373
385
  return /* @__PURE__ */ React10.createElement("div", { className: "group" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-input__label", htmlFor: labelHtml }, label), /* @__PURE__ */ React10.createElement("div", { className: "text-input__wrapper relative" }, /* @__PURE__ */ React10.createElement(
374
386
  "input",
@@ -437,6 +449,7 @@ var list = [
437
449
  { label: "Option 2", value: "option2" },
438
450
  { label: "Option 3", value: "option3" }
439
451
  ];
452
+ var stringList = ["option1", "option2", "option3"];
440
453
  function Dashboard() {
441
454
  const [selectedItem, setSelectedItem] = useState3([]);
442
455
  const [sel, setSel] = useState3({ label: "", value: "" });
@@ -448,7 +461,7 @@ function Dashboard() {
448
461
  MultiSelect,
449
462
  {
450
463
  label: "Multi Select",
451
- list,
464
+ stringOptions: stringList,
452
465
  state: { value: selectedItem, select: setSelectedItem }
453
466
  }
454
467
  ), /* @__PURE__ */ React12.createElement(
@@ -456,7 +469,9 @@ function Dashboard() {
456
469
  {
457
470
  label: "Single Select",
458
471
  name: "newinput",
459
- options: list
472
+ stringOptions: stringList,
473
+ placeholder: "-- Pilih Status --",
474
+ value: sel.value
460
475
  }
461
476
  ), /* @__PURE__ */ React12.createElement(
462
477
  "button",
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"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attr.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attr.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n return options || stringOptions.map((opt) => ({ label: opt, value: opt }));\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attr.value && autoUpdateValue(attr.value as string);\n }, [attr.value]);\n\n return (\n <div className=\"w-full group\">\n {attr.label && (\n <label className=\"text-input__label\" htmlFor={attr.labelHtml}>\n {attr.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attr}\n {...(attr.onChange ? { onChange: attr.onChange } : {})}\n value={attr.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attr.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : \"Cari opsi ...\"}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\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};\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={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, 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 list: Option[];\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n list,\n state,\n label,\n labelHtml,\n}: Readonly<MultiSelect>) {\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n function getFiltered() {\n return list.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == list.length;\n state.select(isAllSelected ? [] : list);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id || \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\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-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n list={list}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n options={list}\n // value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\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"],"mappings":"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","names":["React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","FontAwesomeIcon","faCheck","input__icon","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useState","FontAwesomeIcon","faCheck","list","label","isItemExist","input","input__icon","React","React","React","useState","useState","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"],"sourcesContent":["import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCircleNotch } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n icon?: IconProp;\n label: string;\n btnType?: \"primary\" | \"secondary\" | \"tertiary\";\n isLoading?: boolean;\n};\n\nexport default function Button({\n label,\n icon,\n isLoading,\n btnType,\n className,\n ...rest\n}: Readonly<Button>) {\n const buttonIcon = isLoading ? faCircleNotch : icon;\n return (\n <button\n {...rest}\n className={`${!icon && \"py-[0.85rem]\"} ${className} ${\n btnType == \"secondary\" && \"btn__secondary\"\n } btn__primary`}\n >\n {buttonIcon && icon && (\n <FontAwesomeIcon\n icon={buttonIcon}\n className={`text-[1.2rem] mr-[0.3rem] ${isLoading && \"animate-spin\"}`}\n />\n )}\n {isLoading ? \"Memproses ...\" : label}\n </button>\n );\n}\n","import React from \"react\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nconst input__icon =\n \"w-[2rem] p-[0.9rem] px-[0.7rem] text-[1.2rem] bg-[var(--color-background-icon)] text-[var(--color-icon-input)] mr-2 group-focus-within:text-[var(--color-primary)]\";\n\nexport default function TextInput({\n label,\n labelFor,\n icon,\n ...attr\n}: Readonly<\n React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelFor?: string;\n icon?: IconProp;\n }\n>) {\n return (\n <div className=\"group ... w-full\">\n {label && (\n <label htmlFor={labelFor} className=\"text-input__label\">\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper overflow-hidden\">\n {icon && <FontAwesomeIcon icon={icon} className={input__icon} />}\n <input\n {...attr}\n className={`text-input w-full ${attr.className} ${\n icon && \"!pl-[0.3rem]\"\n }`}\n />\n </div>\n </div>\n );\n}\n","import React from \"react\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport default function Slider(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <div className=\"slider__wrapper group\">\n <input\n {...attr}\n id=\"slider\"\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <label htmlFor=\"slider\" className=\"slider\">\n <FontAwesomeIcon icon={faCheck} className=\"text-[0.7rem]\" />\n </label>\n </div>\n </div>\n );\n}\n","\"use client\";\nimport React, { useDeferredValue, useEffect, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\ntype SingleSelect = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: string;\n labelHtml?: string;\n placeholder?: string;\n options?: {\n label: string;\n value: string;\n }[];\n stringOptions?: string[];\n};\n\nexport default function SingleSelect(attr: Readonly<SingleSelect>) {\n const { options = [], stringOptions = [], ...attrInput } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const [selected, setSelected] = useState<{ label: string; value: any }>({\n label: \"\",\n value: \"\",\n });\n const inputKeyword = useDeferredValue(keyword);\n\n function selectItem({ label, value }: { label: string; value: any }) {\n const triggerManual = attrInput.onChange;\n if (triggerManual) {\n triggerManual?.({\n target: { value, name: attrInput.name },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n setSelected({ label, value });\n setKeyword(\"\");\n }\n\n function autoUpdateValue(updatedValue: string) {\n if (updatedValue) {\n const filtered = availableOptions.find(\n ({ value }) => value == updatedValue\n );\n if (filtered) setSelected(filtered);\n }\n }\n\n const availableOptions = useMemo(() => {\n let typeOption = options && options.length > 0\n if(!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options\n }, [options, stringOptions]);\n\n const filteredOptions = useMemo(() => {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }, [inputKeyword, availableOptions]);\n\n useEffect(() => {\n attrInput.value && autoUpdateValue(attrInput.value as string);\n }, [attrInput.value]);\n\n return (\n <div className=\"w-full group\">\n {attrInput.label && (\n <label className=\"text-input__label\" htmlFor={attrInput.labelHtml}>\n {attrInput.label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n {...attrInput}\n {...(attrInput.onChange ? { onChange: attrInput.onChange } : {})}\n value={attrInput.value ?? selected.value}\n type=\"hidden\"\n />\n <input\n value={keyword}\n type=\"search\"\n name={`${attrInput.name}-keyword`}\n onChange={(e) => setKeyword(e.target.value)}\n className={`${input} ${\n selected.value && \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n placeholder={selected.value ? selected.label : attrInput.placeholder}\n />\n <div className=\"select-item__wrapper\">\n {filteredOptions.length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {filteredOptions.map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {selected.value == value && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <FontAwesomeIcon icon={faChevronDown} className={input__icon} />\n </div>\n </div>\n );\n}\n\nSingleSelect.autoFill = autoFillInput;\n\nfunction autoFillInput(\n value: string,\n elName: string,\n list: { label: string; value: string }[]\n) {\n const inp = document.querySelector(`[name=\"${elName}\"]`) as HTMLInputElement;\n inp.value = `${value}`;\n const filtered = list.find((item) => item.value == value);\n const el = document.querySelector(`[name=\"${elName}-keyword\"]`);\n el?.setAttribute(\"placeholder\", `${filtered?.label}`);\n}\n\nconst input__icon = \"pr-[0.7rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","import React from \"react\";\n\ntype Tooltip = {\n children: React.ReactNode;\n text: string;\n position: \"top\" | \"bottom\" | \"right\" | \"left\";\n};\n\nexport default function Tooltip({\n children,\n text,\n position = \"top\",\n}: Readonly<Tooltip>) {\n function getAccent() {\n const mapping = {\n top,\n bottom,\n left,\n right,\n };\n return mapping[position];\n }\n return (\n <div className=\"relative\">\n <div className=\"peer\">{children}</div>\n <span className={`tooltip-text ${getAccent()}`}>{text}</span>\n </div>\n );\n}\n\nconst top =\n \"bottom-full translate-y-[-0.3rem] right-0 after:bottom-0 after:translate-y-[0.25rem] \";\nconst bottom =\n \"right-0 top-full translate-y-[0.3rem] after:top-[-0.4rem] after:translate-y-[0.2rem] \";\nconst right =\n \"left-full w-[max-content] translate-x-[0.6rem] after:left-[-0.2rem] top-[-0.2rem] after:top-[0.6rem]\";\nconst left =\n \"right-full w-[max-content] translate-x-[-0.6rem] top-[-0.2rem] after:right-[-0.2rem] after:top-[0.6rem]\";\n","import React from \"react\";\n\ntype Option = {\n label: string;\n value: string;\n};\n\nexport default function NavTabClient({\n items,\n state,\n}: Readonly<{\n items: Option[];\n state: {\n active: string;\n setActive: (val: string) => void;\n };\n}>) {\n return (\n <nav className=\"navtab__wrapper\">\n {items.map(({ label, value }) => (\n <button\n key={value}\n className={`navtab__item ${\n state.active == value\n ? \"navtab__item__active\"\n : \"hover:bg-[var(--color-border)]\"\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};\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={`${className} toast__wrapper group`}>\n <div className=\"toast__body\">\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <div>\n <p className=\"toast__title\">{title}</p>\n <p className=\"toast__description\">{description}</p>\n </div>\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"toast-bg__icon\"\n style={{ color: getColor(type) }}\n />\n </div>\n <p\n className=\"toast__bar toast-bar-animate\"\n style={{ background: getColor(type) }}\n ></p>\n </div>\n );\n}\n\nconst Inline = ({\n className,\n text,\n type,\n}: {\n className?: string;\n text: string;\n type: ToastType;\n}) => {\n return (\n <div\n className={`toast__inline ${className}`}\n style={{ background: `var(--color-${type}-soft)`, opacity: 0.9 }}\n >\n <FontAwesomeIcon\n icon={getIcon(type)}\n className=\"text-[1.2rem]\"\n style={{ color: getColor(type) }}\n />\n <p>{text}</p>\n </div>\n );\n};\n\nToast.Inline = Inline;\n\nfunction getColor(type: string) {\n return `var(--color-${type})`;\n}\n\nfunction getIcon(type: string) {\n const mapping = {\n warning: faQuestionCircle,\n info: faInfoCircle,\n danger: faXmarkCircle,\n success: faCheckCircle,\n };\n //@ts-expect-error call object using array index\n return mapping[type];\n}\n","import React from \"react\";\nimport { faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ntype Expandable = {\n children: React.ReactNode;\n title: string;\n className?: string;\n isOpen?: boolean;\n};\n\nexport default function Expandable({\n children,\n title,\n className,\n isOpen,\n}: Readonly<Expandable>) {\n const name = title.replace(\" \", \"\");\n return (\n <div className={`expandable ${className}`}>\n <input\n id={name}\n type=\"checkbox\"\n defaultChecked={isOpen}\n className=\"opacity-[0] peer absolute top-0 ex-title\"\n />\n <FontAwesomeIcon icon={faCaretRight} className=\"expandable__icon\" />\n <label htmlFor={name} className=\"expandable__title\">\n {title}\n </label>\n <div className=\"expandable__body\">\n <div className=\"p-[0.75rem] px-[1rem]\">{children}</div>\n </div>\n </div>\n );\n}\n","import React, { useCallback, useDeferredValue, useMemo, useState } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faListCheck } from \"@fortawesome/free-solid-svg-icons\";\n\ntype Option = {\n value: string;\n label: string;\n};\n\ntype MultiSelect = {\n label?: string;\n labelHtml?: string;\n options?: Option[];\n stringOptions?: string[],\n state: { value: Option[]; select: (newVal: Option[]) => void };\n};\n\nexport default function MultiSelect({\n state,\n label,\n labelHtml,\n ...attr\n}: Readonly<MultiSelect>) {\n const { options = [], stringOptions = [] } = attr;\n const [keyword, setKeyword] = useState(\"\");\n const inputKeyword = useDeferredValue(keyword);\n\n const availableOptions = useMemo(() => {\n const typeOption = options && options.length > 0\n if(!typeOption) return stringOptions.map((opt) => ({ label: opt, value: opt }));\n return options\n }, [options, stringOptions]);\n\n function getFiltered() {\n return availableOptions.filter(\n ({ label, value }) =>\n label.toLowerCase().includes(inputKeyword.toLowerCase()) ||\n value.toLowerCase().includes(inputKeyword.toLowerCase())\n );\n }\n\n function selectItem({ label, value }: { label: string; value: string }) {\n //@ts-expect-error: avoid check\n state.select((prev) => {\n const isItemExist = prev.find((item: any) => item.value == value);\n if (isItemExist) {\n return prev.filter((item: any) => item.value != value);\n }\n return [...prev, { label, value }];\n });\n }\n\n function isItemExist(value: string) {\n return state.value.find((item: any) => item.value == value);\n }\n\n const selectUnSelectAll = useCallback(() => {\n const isAllSelected = state.value.length == options.length;\n state.select(isAllSelected ? [] : options);\n }, [state.value]);\n\n return (\n <div className=\"group\">\n {label && (\n <label className=\"text-input__label\" htmlFor={labelHtml}>\n {label}\n </label>\n )}\n <div className=\"text-input__wrapper relative\">\n <input\n value={keyword}\n type=\"search\"\n placeholder={`${state.value.length} Dipilih`}\n className={`${input} ${\n state.value.length > 0 &&\n \"placeholder:text-[var(--color-text-primary)]\"\n }`}\n onChange={(e) => setKeyword(e.target.value)}\n />\n <div className=\"select-item__wrapper select-multiple__wrapper\">\n {getFiltered().length == 0 && keyword != \"\" && (\n <button disabled className=\"select-item text-[var(--color-danger)]\">\n Tidak ada Item\n </button>\n )}\n {getFiltered().map(({ label, value }) => (\n <button\n type=\"button\"\n onClick={() => selectItem({ label, value })}\n key={value}\n className=\"select-item\"\n >\n {label}\n {isItemExist(value) && (\n <FontAwesomeIcon\n icon={faCheck}\n className=\"text-[var(--color-primary)]\"\n />\n )}\n </button>\n ))}\n </div>\n <button\n type=\"button\"\n className=\"cursor-pointer\"\n onClick={selectUnSelectAll}\n >\n <FontAwesomeIcon icon={faListCheck} className={input__icon} />\n </button>\n </div>\n </div>\n );\n}\nconst input__icon = \"pr-[0.7rem] text-[1.2rem] text-[var(--color-icon-input)]\";\nconst input = \"text-input peer ... w-full\";\n","\"use client\";\nimport React from \"react\";\n\nexport default function ThemeToggle(\n attr: Readonly<React.InputHTMLAttributes<HTMLInputElement>>\n) {\n return (\n <div className=\"flex items-center h-[3rem]\">\n <label\n htmlFor={`${attr.id || \"theme-toggle\"}`}\n className=\"slider__wrapper slider-theme slider-theme-light\"\n >\n <input\n id=\"theme-toggle\"\n {...attr}\n type=\"checkbox\"\n className=\"peer ... w-[2rem] opacity-[0] cursor-pointer\"\n />\n <span className=\"slider-theme__bullet\"></span>\n </label>\n </div>\n );\n}\n","import React, { useState } from \"react\";\nimport MultiSelect from \"./MultiSelect\";\nimport SingleSelect from \"./SingleSelect\";\n\nconst list = [\n { label: \"Option 1\", value: \"option1\" },\n { label: \"Option 2\", value: \"option2\" },\n { label: \"Option 3\", value: \"option3\" },\n];\nconst stringList = [\"option1\",\"option2\", \"option3\"];\n\nexport default function Dashboard() {\n const [selectedItem, setSelectedItem] = useState<\n { label: string; value: string }[]\n >([]);\n const [sel, setSel] = useState({ label: \"\", value: \"\" });\n\n function updateState(item: string) {\n const filtered = list.find(({ value }) => value == item);\n filtered && setSel(filtered);\n }\n\n return (\n <div className=\"flex items-center gap-[2rem]\">\n <MultiSelect\n label=\"Multi Select\"\n // options={list}\n stringOptions={stringList}\n state={{ value: selectedItem, select: setSelectedItem }}\n />\n <SingleSelect\n label=\"Single Select\"\n name=\"newinput\"\n // options={list}\n stringOptions={stringList}\n placeholder=\"-- Pilih Status --\"\n value={sel.value}\n // onChange={(e) => updateState(e.target.value)}\n />\n <button\n onClick={() => SingleSelect.autoFill(\"option2\", \"newinput\", list)}\n >\n Update {sel.value}\n </button>\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"],"mappings":"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","names":["React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","React","FontAwesomeIcon","faCheck","React","FontAwesomeIcon","faCheck","input__icon","list","React","React","React","React","FontAwesomeIcon","React","FontAwesomeIcon","React","useDeferredValue","useMemo","useState","FontAwesomeIcon","faCheck","useState","useDeferredValue","useMemo","label","isItemExist","React","input","FontAwesomeIcon","faCheck","input__icon","React","React","React","useState","useState","React","React","React"]}
package/dist/styles.css CHANGED
@@ -229,9 +229,6 @@
229
229
  .mr-\[0\.3rem\] {
230
230
  margin-right: 0.3rem;
231
231
  }
232
- .mr-\[0\.5rem\] {
233
- margin-right: 0.5rem;
234
- }
235
232
  .ml-\[5rem\] {
236
233
  margin-left: 5rem;
237
234
  }
@@ -343,9 +340,6 @@
343
340
  .px-\[0\.7rem\] {
344
341
  padding-inline: 0.7rem;
345
342
  }
346
- .px-\[0\.8rem\] {
347
- padding-inline: 0.8rem;
348
- }
349
343
  .px-\[1rem\] {
350
344
  padding-inline: 1rem;
351
345
  }
@@ -355,30 +349,15 @@
355
349
  .pr-\[0\.7rem\] {
356
350
  padding-right: 0.7rem;
357
351
  }
358
- .\!pl-0 {
359
- padding-left: calc(var(--spacing) * 0) !important;
360
- }
361
352
  .\!pl-\[0\.3rem\] {
362
353
  padding-left: 0.3rem !important;
363
354
  }
364
- .\!pl-\[0\.5rem\] {
365
- padding-left: 0.5rem !important;
366
- }
367
355
  .text-\[0\.7rem\] {
368
356
  font-size: 0.7rem;
369
357
  }
370
- .text-\[1\.1rem\] {
371
- font-size: 1.1rem;
372
- }
373
358
  .text-\[1\.2rem\] {
374
359
  font-size: 1.2rem;
375
360
  }
376
- .text-\[1\.3rem\] {
377
- font-size: 1.3rem;
378
- }
379
- .text-\[1\.4rem\] {
380
- font-size: 1.4rem;
381
- }
382
361
  .leading-\[1\] {
383
362
  --tw-leading: 1;
384
363
  line-height: 1;
package/package.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "react-dom": "^18.2.0 || ^19.0.0"
35
35
  },
36
36
  "name": "@safestrong/ppa-component-library",
37
- "version": "1.3.6",
37
+ "version": "1.3.7",
38
38
  "description": "Collection of reusable components for any PPA web applications",
39
39
  "main": "dist/index.cjs",
40
40
  "module": "dist/index.js",