@konstructio/ui 0.1.2-alpha.33 → 0.1.2-alpha.34

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,12 +1,12 @@
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
-import { useRef as y, useCallback as m } from "react";
-import { Typography as w } from "../../../Typography/Typography.js";
-import { cn as f } from "../../../../utils/index.js";
-import { listItemVariants as C } from "./ListItem.variants.js";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { useRef as N, useCallback as u } from "react";
+import { cn as r } from "../../../../utils/index.js";
+import { Typography as C } from "../../../Typography/Typography.js";
+import { listItemVariants as I } from "./ListItem.variants.js";
 import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
-function I(r, n) {
-  const o = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = new RegExp(`(${o})`, "gi");
-  return r.split(c).map((t, a) => t.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ l(
+function V(o, s) {
+  const c = s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = new RegExp(`(${c})`, "gi");
+  return o.split(i).map((t, a) => t.toLowerCase() === s.toLowerCase() ? /* @__PURE__ */ l(
     "mark",
     {
       className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
@@ -15,43 +15,53 @@ function I(r, n) {
     a
   ) : /* @__PURE__ */ l("span", { children: t }, a));
 }
-const $ = ({
-  isClickable: r,
-  className: n,
-  inputRef: o,
-  listItemSecondRowClassName: c,
+const P = ({
+  isClickable: o,
+  className: s,
+  inputRef: c,
+  listItemSecondRowClassName: i,
   ...t
 }) => {
-  const { searchTerm: a, highlightSearchEnabled: d, setValue: h, toggleOpen: u } = L(), p = y(null), i = m(
+  const { searchTerm: a, highlightSearchEnabled: d, setValue: h, toggleOpen: p } = L(), k = N(null), m = u(
     (e) => {
-      h(e.value, o), u(!1);
+      h(e.value, c), p(!1);
     },
-    [h, u]
-  ), x = m(
-    (e, s) => {
-      e.key === "Enter" && (e.stopPropagation(), i(s));
+    [h, p]
+  ), y = u(
+    (e, n) => {
+      e.key === "Enter" && (e.stopPropagation(), m(n));
     },
-    [i]
-  ), b = m(
-    (e, s) => {
+    [m]
+  ), b = u(
+    ({ label: e, rightComponent: n, subLabel: g, rightComponentClassName: w }) => {
       if (typeof e != "string")
         return e;
-      const k = d && a.length > 0 ? I(e, a) : [e];
-      return /* @__PURE__ */ g(
-        w,
+      const x = d && a.length > 0 ? V(e, a) : [e];
+      return /* @__PURE__ */ f(
+        C,
         {
           variant: "body2",
           className: "text-zinc-700 dark:text-slate-50 font-medium",
           children: [
-            k,
-            s ? /* @__PURE__ */ l(
+            n ? /* @__PURE__ */ f(
               "span",
               {
-                className: f(
+                className: r("flex gap-2 items-center", w),
+                children: [
+                  x,
+                  " ",
+                  n
+                ]
+              }
+            ) : x,
+            g ? /* @__PURE__ */ l(
+              "span",
+              {
+                className: r(
                   "block font-normal text-sm text-slate-800 dark:text-slate-50",
-                  c
+                  i
                 ),
-                children: s
+                children: g
               }
             ) : null
           ]
@@ -60,34 +70,38 @@ const $ = ({
     },
     [d, a]
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(
     "li",
     {
-      ref: p,
+      ref: k,
       role: "option",
       "data-action": "false",
-      className: f(C({ className: n })),
+      className: r(I({ className: s })),
       tabIndex: 0,
       onClick: (e) => {
-        r && (i(t), e.stopPropagation());
+        o && (m(t), e.stopPropagation());
       },
-      onKeyDown: (e) => x(e, t),
+      onKeyDown: (e) => y(e, t),
       children: [
         t.leftIcon ? /* @__PURE__ */ l(
           "span",
           {
-            className: f("w-4 h-4 flex justify-center", {
-              "items-center": !t.subLabel,
-              "items-baseline -translate-y-2": !!t.subLabel
-            }),
+            className: r(
+              "w-4 h-4 flex justify-center",
+              {
+                "items-center": !t.subLabel,
+                "items-baseline -translate-y-2": !!t.subLabel
+              },
+              t.leftIconClassName
+            ),
             children: t.leftIcon
           }
         ) : null,
-        b(t.label, t.subLabel)
+        b(t)
       ]
     }
   );
 };
 export {
-  $ as ListItem
+  P as ListItem
 };

package/dist/index.d.ts

@@ -475,6 +475,9 @@ declare type Option_3 = {
     label: string;
     subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
+    leftIconClassName?: string;
+    rightComponent?: ReactNode | string;
+    rightComponentClassName?: string;
     value: string;
 };
 

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.32",
+  "version": "0.1.2-alpha.33",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.33",
+  "version": "0.1.2-alpha.34",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",