@cryptlex/web-components 1.3.3 → 1.3.5

package/tailwind.preset.ts

@@ -20,65 +20,65 @@ export default {
     },
     fontSize: {
       // text-caption
-      caption: [
-        "var(--font-sm)",
+      'caption': [
+        'var(--font-sm)',
         {
-          lineHeight: "1.5"
+          lineHeight: '1.5',
         },
       ],
       // text-body
-      body: [
-        "var(--font-base)",
+      'body': [
+        'var(--font-base)',
         {
-          lineHeight: "1.6",
+          lineHeight: '1.6',
         },
       ],
       // text-heading-6
-      "heading-6": [
-        "var(--font-base)",
+      'heading-6': [
+        'var(--font-base)',
         {
-          lineHeight: "1.2",
-          fontWeight: 700
+          lineHeight: '1.2',
+          fontWeight: 700,
         },
       ],
       // text-heading-5
-      "heading-5": [
-        "var(--font-md)",
+      'heading-5': [
+        'var(--font-md)',
         {
-          lineHeight: "1.2"
+          lineHeight: '1.2',
         },
       ],
       // text-heading-4
-      "heading-4": [
-        "var(--font-lg)",
+      'heading-4': [
+        'var(--font-lg)',
         {
-          lineHeight: "1.2",
-          fontWeight: 500
+          lineHeight: '1.2',
+          fontWeight: 500,
         },
       ],
       // text-heading-3
-      "heading-3": [
-        "var(--font-xl)",
+      'heading-3': [
+        'var(--font-xl)',
         {
-          lineHeight: "1.1",
-          fontWeight: 500
+          lineHeight: '1.1',
+          fontWeight: 500,
         },
       ],
 
       // text-heading-2
-      "heading-2": [
-        "var(--font-2xl)",
+      'heading-2': [
+        'var(--font-2xl)',
         {
-          lineHeight: "1",
-          fontWeight: 300
+          lineHeight: '1',
+          fontWeight: 300,
         },
       ],
 
       // text-heading-1
-      "heading-1": [
-        "var(--font-3xl)",
+      'heading-1': [
+        'var(--font-3xl)',
         {
-          lineHeight: "1",
+          lineHeight: '1',
         },
       ],
     },
@@ -100,15 +100,15 @@ export default {
       primary: {
         DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
         foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
-        ...tokenRamps('primary')
+        ...tokenRamps('primary'),
       },
       secondary: {
         DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',
         foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
-        ...tokenRamps('secondary')
+        ...tokenRamps('secondary'),
       },
       neutral: {
-        ...tokenRamps('neutral')
+        ...tokenRamps('neutral'),
       },
       muted: {
         DEFAULT: 'oklch(var(--muted) / <alpha-value>)',
@@ -121,12 +121,12 @@ export default {
       destructive: {
         DEFAULT: 'oklch(var(--destructive) / <alpha-value>)',
         foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
-        ...tokenRamps('destructive')
+        ...tokenRamps('destructive'),
       },
       success: {
         DEFAULT: 'oklch(var(--success) / <alpha-value>)',
         foreground: 'oklch(var(--success-foreground) / <alpha-value>)',
-        ...tokenRamps('success')
+        ...tokenRamps('success'),
       },
       border: 'oklch(var(--border) / <alpha-value>)',
       input: 'oklch(var(--input) / <alpha-value>)',
@@ -142,42 +142,50 @@ export default {
         DEFAULT: 'oklch(var(--sidebar-background) / <alpha-value>)',
         foreground: 'oklch(var(--sidebar-foreground) / <alpha-value>)',
         primary: 'oklch(var(--sidebar-primary) / <alpha-value>)',
-        primaryForeground:
-          'oklch(var(--sidebar-primary-foreground) / <alpha-value>)',
+        primaryForeground: 'oklch(var(--sidebar-primary-foreground) / <alpha-value>)',
         accent: 'oklch(var(--sidebar-accent) / <alpha-value>)',
-        accentForeground:
-          'oklch(var(--sidebar-accent-foreground) / <alpha-value>)',
+        accentForeground: 'oklch(var(--sidebar-accent-foreground) / <alpha-value>)',
         border: 'oklch(var(--sidebar-border) / <alpha-value>)',
         ring: 'oklch(var(--sidebar-ring) / <alpha-value>)',
       },
     },
     extend: {
       gridTemplateColumns: {
-        'fluid': "repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))"
+        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
       },
       keyframes: {
         'accordion-down': {
           from: {
-            height: '0'
+            height: '0',
           },
           to: {
-            height: 'var(--radix-accordion-content-height)'
-          }
+            height: 'var(--radix-accordion-content-height)',
+          },
         },
         'accordion-up': {
           from: {
-            height: 'var(--radix-accordion-content-height)'
+            height: 'var(--radix-accordion-content-height)',
           },
           to: {
-            height: '0'
-          }
-        }
+            height: '0',
+          },
+        },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-out',
       },
-    }
+    },
   },
   plugins: [require('tailwindcss-animate')], // Include any plugins you need
 } satisfies Config;

package/dist/components/data-table/table-utils/fetch.es.js

@@ -1,40 +0,0 @@
-import i from "openapi-fetch";
-const c = "AT";
-function n() {
-  return localStorage.getItem(c);
-}
-const a = localStorage.getItem("apiBaseUrl") ?? "https://api.dev.cryptlex.com", h = async (t, s, o) => {
-  const e = await fetch(`${a}${t}`, {
-    method: s,
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${n()}`
-    },
-    body: o ? JSON.stringify(o) : null
-  });
-  if (e.ok) return await e.json();
-  throw await e.json();
-}, r = i({
-  baseUrl: a
-  // TODO Telemetry signal
-  // headers: {}
-}), l = {
-  async onRequest(t) {
-    return t.headers.set("Authorization", `Bearer ${n()}`), t;
-  }
-}, u = {
-  async onResponse(t) {
-    if (!t.ok)
-      throw await t.json();
-    return t;
-  }
-};
-r.use(l);
-r.use(u);
-export {
-  a as US_BASE_URL,
-  r as ctxClient,
-  h as fetchClient,
-  n as getAccessToken
-};
-//# sourceMappingURL=fetch.es.js.map

package/dist/components/data-table/table-utils/fetch.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fetch.es.js","sources":["../../../../lib/components/data-table/table-utils/fetch.ts"],"sourcesContent":["import type { paths } from '@cryptlex/web-api-types';\nimport createClient, { Middleware } from 'openapi-fetch';\nconst ACCESS_TOKEN = 'AT';\n\nexport function getAccessToken() {\n  return localStorage.getItem(ACCESS_TOKEN);\n}\n// TODO: Use different urls for diff envs\nexport const US_BASE_URL = localStorage.getItem('apiBaseUrl') ?? 'https://api.dev.cryptlex.com';\ntype Methods = 'GET' | 'POST' | 'PATCH' | 'PUT';\n/**\n *\n * @param url\n * @param method\n * @param body\n * @returns\n */\nexport const fetchClient = async (url: string, method: Methods, body?: any) => {\n  const response = await fetch(`${US_BASE_URL}${url}`, {\n    method,\n    headers: {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${getAccessToken()}`,\n    },\n    body: body ? JSON.stringify(body) : null,\n  });\n  if (response.ok) return await response.json();\n  throw await response.json();\n};\n\nexport const ctxClient = createClient<paths>({\n  baseUrl: US_BASE_URL,\n  // TODO Telemetry signal\n  // headers: {}\n});\n\nconst authMiddleware: Middleware = {\n  async onRequest(req) {\n    req.headers.set('Authorization', `Bearer ${getAccessToken()}`);\n    return req;\n  },\n};\n\nconst errorMiddleware: Middleware = {\n  async onResponse(res) {\n    if (!res.ok) {\n      throw await res.json();\n    }\n    return res;\n  },\n};\n\nctxClient.use(authMiddleware);\nctxClient.use(errorMiddleware);\n"],"names":["ACCESS_TOKEN","getAccessToken","US_BASE_URL","fetchClient","url","method","body","response","ctxClient","createClient","authMiddleware","req","errorMiddleware","res"],"mappings":";AAEA,MAAMA,IAAe;AAEd,SAASC,IAAiB;AACxB,SAAA,aAAa,QAAQD,CAAY;AAC1C;AAEO,MAAME,IAAc,aAAa,QAAQ,YAAY,KAAK,gCASpDC,IAAc,OAAOC,GAAaC,GAAiBC,MAAe;AAC7E,QAAMC,IAAW,MAAM,MAAM,GAAGL,CAAW,GAAGE,CAAG,IAAI;AAAA,IACnD,QAAAC;AAAA,IACA,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,eAAiB,UAAUJ,GAAgB;AAAA,IAC7C;AAAA,IACA,MAAMK,IAAO,KAAK,UAAUA,CAAI,IAAI;AAAA,EAAA,CACrC;AACD,MAAIC,EAAS,GAAW,QAAA,MAAMA,EAAS,KAAK;AACtC,QAAA,MAAMA,EAAS,KAAK;AAC5B,GAEaC,IAAYC,EAAoB;AAAA,EAC3C,SAASP;AAAA;AAAA;AAGX,CAAC,GAEKQ,IAA6B;AAAA,EACjC,MAAM,UAAUC,GAAK;AACnB,WAAAA,EAAI,QAAQ,IAAI,iBAAiB,UAAUV,EAAgB,CAAA,EAAE,GACtDU;AAAA,EAAA;AAEX,GAEMC,IAA8B;AAAA,EAClC,MAAM,WAAWC,GAAK;AAChB,QAAA,CAACA,EAAI;AACD,YAAA,MAAMA,EAAI,KAAK;AAEhB,WAAAA;AAAA,EAAA;AAEX;AAEAL,EAAU,IAAIE,CAAc;AAC5BF,EAAU,IAAII,CAAe;"}

package/dist/components/info-card/info-card.es.js

@@ -1,74 +0,0 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { Badge as l } from "../ui/badge.es.js";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import { Card as c, CardHeader as d, CardTitle as f, CardContent as u } from "../ui/card.es.js";
-import "../ui/chart.es.js";
-import "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import "../ui/label.es.js";
-import "lucide-react";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import "react";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import { Skeleton as x } from "../ui/skeleton.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/tooltip.es.js";
-import "@tanstack/react-query";
-import "cmdk";
-import "use-debounce";
-const tr = ({ data: p, label: s, fields: e }) => {
-  const n = (r, t) => {
-    if (r.transform)
-      return r.transform(t);
-    switch (r.type) {
-      case "badge":
-        return /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-1", children: Array.isArray(t) ? t.map((i, m) => /* @__PURE__ */ o(l, { variant: "secondary", children: typeof i == "object" ? i.name || i.id : i }, m)) : t });
-      case "boolean":
-        return t.toString();
-      default:
-        return t ?? "";
-    }
-  };
-  return /* @__PURE__ */ a(c, { children: [
-    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(f, { children: s }) }),
-    /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: p ? e.map((r) => {
-      const t = r.accessor ? r.accessor.split(".").reduce((i, m) => i == null ? void 0 : i[m], p) : null;
-      return /* @__PURE__ */ a(
-        "div",
-        {
-          className: "flex w-full justify-between first:pt-0 last:pb-0",
-          children: [
-            /* @__PURE__ */ o("p", { className: "text-sm flex w-full justify-start  font-semibold text-muted-foreground col-span-1", children: r.display }),
-            /* @__PURE__ */ o("div", { className: "text-sm flex w-full justify-start text-wrap  overflow-auto", children: n(r, t) })
-          ]
-        },
-        r.display
-      );
-    }) : e.map((r, t) => /* @__PURE__ */ o(x, { className: "h-12 w-full" }, t)) }) })
-  ] });
-};
-export {
-  tr as InfoCard
-};
-//# sourceMappingURL=info-card.es.js.map

package/dist/components/info-card/info-card.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"info-card.es.js","sources":["../../../lib/components/info-card/info-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@/index';\n\nexport type DisplayField = {\n  display: string;\n  accessor: string;\n  type?: 'text' | 'badge' | 'boolean';\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface InfoCardProps {\n  data: Record<string, any>;\n  label: string;\n  fields: DisplayField[];\n  className?: string;\n}\n\nexport const InfoCard: React.FC<InfoCardProps> = ({ data, label, fields }) => {\n  const renderValue = (field: DisplayField, value: any) => {\n    // Custom transform if provided\n    if (field.transform) {\n      return field.transform(value);\n    }\n\n    // Handle specific types\n    switch (field.type) {\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                  <Badge key={index} variant=\"secondary\">\n                    {typeof item === 'object' ? item.name || item.id : item}\n                  </Badge>\n                ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return value.toString();\n      default:\n        return value ?? '';\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-1\">\n          {data\n            ? fields.map((field) => {\n                const value = field.accessor\n                  ? field.accessor.split('.').reduce((obj, key) => obj?.[key], data)\n                  : null;\n\n                return (\n                  <div\n                    key={field.display}\n                    className=\"flex w-full justify-between first:pt-0 last:pb-0\"\n                  >\n                    <p className=\"text-sm flex w-full justify-start  font-semibold text-muted-foreground col-span-1\">\n                      {field.display}\n                    </p>\n                    <div className=\"text-sm flex w-full justify-start text-wrap  overflow-auto\">\n                      {renderValue(field, value)}\n                    </div>\n                  </div>\n                );\n              })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["InfoCard","data","label","fields","renderValue","field","value","jsx","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,KAAoC,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAa;AACtE,QAAAC,IAAc,CAACC,GAAqBC,MAAe;AAEvD,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAI9B,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eACG,gBAAAE,EAAA,OAAA,EAAI,WAAU,wBACZ,UAAM,MAAA,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACE,GAAMC,MACf,gBAAAF,EAACG,GAAkB,EAAA,SAAQ,aACxB,UAAA,OAAOF,KAAS,WAAWA,EAAK,QAAQA,EAAK,KAAKA,EADzC,GAAAC,CAEZ,CACD,IACDH,GACN;AAAA,MAGJ,KAAK;AACH,eAAOA,EAAM,SAAS;AAAA,MACxB;AACE,eAAOA,KAAS;AAAA,IAAA;AAAA,EAEtB;AAEA,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAJ,EAACK,GACC,EAAA,UAAA,gBAAAL,EAACM,GAAW,EAAA,UAAAX,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACO,GACC,EAAA,UAAA,gBAAAP,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AACpB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SAAS,MAAM,GAAG,EAAE,OAAO,CAACU,GAAKC,MAAQD,KAAA,gBAAAA,EAAMC,IAAMf,CAAI,IAC/D;AAGF,aAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAV,EAAC,KAAE,EAAA,WAAU,qFACV,UAAAF,EAAM,SACT;AAAA,8BACC,OAAI,EAAA,WAAU,8DACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QARKD,EAAM;AAAA,MASb;AAAA,IAEH,CAAA,IACDF,EAAO,IAAI,CAACe,GAAGT,MAAW,gBAAAF,EAAAY,GAAA,EAAqB,WAAU,cAAA,GAAjBV,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ui/dynamic-input.es.js

@@ -1,141 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import "./accordion.es.js";
-import "./avatar.es.js";
-import "./badge.es.js";
-import "./breadcrumb.es.js";
-import { Button as N } from "./button.es.js";
-import "./calendar.es.js";
-import "./card.es.js";
-import "./chart.es.js";
-import "./checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "./command.es.js";
-import "./dialog.es.js";
-import "./drawer.es.js";
-import "./dropdown-menu.es.js";
-import "./form.es.js";
-import "./input.es.js";
-import "./input-otp.es.js";
-import "./label.es.js";
-import { cn as f } from "../../utils/index.es.js";
-import { ChevronsUpDown as v, Command as g, Loader as w, Check as x } from "lucide-react";
-import "./mutli-select.es.js";
-import "./navigation-menu.es.js";
-import "./pagination.es.js";
-import "./password-input.es.js";
-import { Popover as T, PopoverTrigger as b, PopoverContent as I } from "./popover.es.js";
-import "./radio-group.es.js";
-import * as h from "react";
-import "./select.es.js";
-import "./separator.es.js";
-import "./sheet.es.js";
-import "./sidebar.es.js";
-import "sonner";
-import "./table.es.js";
-import "./tabs.es.js";
-import "./tooltip.es.js";
-import { useQuery as E } from "@tanstack/react-query";
-import { CommandInput as R, CommandList as O, CommandItem as P } from "cmdk";
-import { useDebounce as A } from "use-debounce";
-import { DYNAMIC_INPUT_TARGET as y } from "../data-table/table-utils/types.es.js";
-import { ctxClient as d } from "../data-table/table-utils/fetch.es.js";
-const C = "w-[250px]";
-function ve({ onChange: r, target: i, placeholder: p }) {
-  const [a, s] = h.useState(!1), [n, o] = h.useState(), c = h.useCallback(
-    (t) => {
-      o(t), r(t.id);
-    },
-    [r]
-  ), m = n ? n.name : `Select ${y[i].toLocaleLowerCase()} `;
-  return /* @__PURE__ */ l(T, { open: a, onOpenChange: s, children: [
-    /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ l(N, { variant: "outline", role: "combobox", className: f("justify-between", C), children: [
-      m,
-      /* @__PURE__ */ e(v, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-    ] }) }),
-    /* @__PURE__ */ e(I, { side: "bottom", className: f("p-0", C), children: /* @__PURE__ */ e(
-      D,
-      {
-        target: i,
-        selectedResult: n,
-        onSelectResult: c,
-        placeholder: p
-      }
-    ) })
-  ] });
-}
-function D({ selectedResult: r, onSelectResult: i, target: p, placeholder: a }) {
-  const [s, n] = h.useState("");
-  return /* @__PURE__ */ l(g, { className: "h-auto rounded-lg border border-b-0 shadow-md", children: [
-    /* @__PURE__ */ e(R, { value: s, onValueChange: (m) => {
-      n(m);
-    }, placeholder: a }),
-    /* @__PURE__ */ e(
-      G,
-      {
-        target: p,
-        query: s,
-        selectedResult: r,
-        onSelectResult: (m) => {
-          i(m);
-        }
-      }
-    )
-  ] });
-}
-function G({ query: r, selectedResult: i, onSelectResult: p, target: a }) {
-  const s = async () => a === y.USER ? await d.GET("/v3/users", {
-    params: {
-      query: {
-        page: 1,
-        limit: 30,
-        query: r,
-        userType: "user"
-      }
-    }
-  }).then((t) => t.data) : a === y.ORGANIZATION ? await d.GET("/v3/organizations", {
-    params: {
-      query: {
-        page: 1,
-        limit: 30,
-        query: r
-      }
-    }
-  }).then((t) => t.data) : await d.GET("/v3/resellers", {
-    params: {
-      query: {
-        page: 1,
-        limit: 30,
-        query: r,
-        userType: "user"
-      }
-    }
-  }).then((t) => t.data), [n] = A(r, 300), { data: o, isLoading: c, isError: m } = E({
-    queryKey: ["search", n],
-    queryFn: s
-  });
-  return /* @__PURE__ */ l(O, { children: [
-    /* @__PURE__ */ e("div", { className: "flex justify-center", children: c && /* @__PURE__ */ e(w, { className: "my-4" }) }),
-    !m && !c && !(o != null && o.length) && /* @__PURE__ */ e("div", { className: "p-4 text-sm text-center", children: "No Match" }),
-    m && /* @__PURE__ */ e("div", { className: "p-4 text-sm text-center", children: "Something went wrong" }),
-    o == null ? void 0 : o.map((t) => {
-      const { id: u, name: S } = t;
-      return /* @__PURE__ */ l(P, { onSelect: () => p({ id: u, name: S }), value: `${u}`, children: [
-        /* @__PURE__ */ e(
-          x,
-          {
-            className: f(
-              "mr-2 h-4 w-4",
-              (i == null ? void 0 : i.id) === u ? "opacity-100" : "opacity-0"
-            )
-          }
-        ),
-        S
-      ] }, u);
-    })
-  ] });
-}
-export {
-  ve as DynamicInput,
-  D as Search
-};
-//# sourceMappingURL=dynamic-input.es.js.map

package/dist/components/ui/dynamic-input.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dynamic-input.es.js","sources":["../../../lib/components/ui/dynamic-input.tsx"],"sourcesContent":["import { DYNAMIC_INPUT_TARGET, ctxClient } from '@/components/data-table';\nimport { Button, Popover, PopoverContent, PopoverTrigger } from '@/index';\nimport { cn } from '@/utils';\nimport type { components } from '@cryptlex/web-api-types';\nimport { useQuery } from '@tanstack/react-query';\nimport { CommandInput, CommandItem, CommandList } from 'cmdk';\nimport { Check, ChevronsUpDown, Command, Loader } from 'lucide-react';\nimport * as React from 'react';\nimport { useDebounce } from 'use-debounce';\n\ntype UserDto = components['schemas']['UserDto'] & { organizationId?: string };\ntype OrganizationDto = components['schemas']['OrganizationDto'];\ntype ResellerDto = components['schemas']['ResellerDto'];\n// width for properly viewing the popover\nconst POPOVER_WIDTH = 'w-[250px]';\n\n/**\n *\n *  @param onChange\n *  @param target fthis is used to make the component generic and reusble for differnt  use cases\n *  @param placeholder placeholder to be showing in the input for searching\n *  @returns return id of the seleced value, can be customized to return full selected value\n */\ninterface DynamicInputProps {\n  onChange: (id: any) => void;\n  target: DYNAMIC_INPUT_TARGET;\n  placeholder: string;\n}\nexport function DynamicInput({ onChange, target, placeholder }: DynamicInputProps) {\n  const [open, setOpen] = React.useState(false);\n  // select option\n  const [selected, setSelected] = React.useState<\n    Partial<UserDto> | Partial<OrganizationDto> | Partial<ResellerDto> | undefined\n  >();\n\n  const handleSetActive = React.useCallback(\n    (dto: Partial<UserDto> | Partial<OrganizationDto> | Partial<ResellerDto>) => {\n      setSelected(dto);\n      onChange(dto.id);\n    },\n    [onChange],\n  );\n  // display selected option with its name\n  const displayName = selected\n    ? selected.name\n    : `Select ${DYNAMIC_INPUT_TARGET[target].toLocaleLowerCase()} `;\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {/* Button to show the selected option  */}\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" role=\"combobox\" className={cn('justify-between', POPOVER_WIDTH)}>\n          {displayName}\n          <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent side=\"bottom\" className={cn('p-0', POPOVER_WIDTH)}>\n        {/*Search input  */}\n        <Search\n          target={target}\n          selectedResult={selected}\n          onSelectResult={handleSetActive}\n          placeholder={placeholder}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\ninterface SearchProps {\n  selectedResult?: Partial<UserDto> | Partial<OrganizationDto> | Partial<ResellerDto>;\n  onSelectResult: (dto: Partial<UserDto> | Partial<OrganizationDto> | Partial<ResellerDto>) => void;\n  target: DYNAMIC_INPUT_TARGET;\n  placeholder: string;\n}\n\nexport function Search({ selectedResult, onSelectResult, target, placeholder }: SearchProps) {\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const handleSelectResult = (\n    dto: Partial<UserDto> | Partial<OrganizationDto> | Partial<ResellerDto>,\n  ) => {\n    onSelectResult(dto);\n  };\n\n  const handleChange = (value: string) => {\n    setSearchQuery(value);\n  };\n\n  return (\n    <Command className=\"h-auto rounded-lg border border-b-0 shadow-md\">\n      <CommandInput value={searchQuery} onValueChange={handleChange} placeholder={placeholder} />\n\n      <SearchResults\n        target={target}\n        query={searchQuery}\n        selectedResult={selectedResult}\n        onSelectResult={handleSelectResult}\n      />\n    </Command>\n  );\n}\n\ninterface SearchResultsProps {\n  query: string;\n  selectedResult: SearchProps['selectedResult'];\n  onSelectResult: SearchProps['onSelectResult'];\n  target: DYNAMIC_INPUT_TARGET;\n}\n\nfunction SearchResults({ query, selectedResult, onSelectResult, target }: SearchResultsProps) {\n  // fetch function that targets different end points based on the DYNAMIC_INPUT_TARGET which can be license USER, ORGANIZATION or RESELLER\n  const fetchFn = async () => {\n    if (target === DYNAMIC_INPUT_TARGET.USER) {\n      return await ctxClient\n        .GET('/v3/users', {\n          params: {\n            query: {\n              page: 1,\n              limit: 30,\n              query,\n              userType: 'user',\n            },\n          },\n        })\n        .then((res) => res.data);\n    } else if (target === DYNAMIC_INPUT_TARGET.ORGANIZATION) {\n      return await ctxClient\n        .GET('/v3/organizations', {\n          params: {\n            query: {\n              page: 1,\n              limit: 30,\n              query,\n            },\n          },\n        })\n        .then((res) => res.data);\n    } else {\n      return await ctxClient\n        .GET('/v3/resellers', {\n          params: {\n            query: {\n              page: 1,\n              limit: 30,\n              query,\n              userType: 'user',\n            },\n          },\n        })\n        .then((res) => res.data);\n    }\n  };\n  //https://github.com/TanStack/query/issues/293#issuecomment-1368066935\n  //https://github.com/TanStack/query/issues/293\n  const [debouncedQuery] = useDebounce(query, 300);\n  const { data, isLoading, isError } = useQuery({\n    queryKey: ['search', debouncedQuery],\n    queryFn: fetchFn,\n  });\n\n  return (\n    <CommandList>\n      <div className=\"flex justify-center\">{isLoading && <Loader className=\"my-4\" />}</div>\n\n      {!isError && !isLoading && !data?.length && (\n        <div className=\"p-4 text-sm text-center\">No Match</div>\n      )}\n      {isError && <div className=\"p-4 text-sm text-center\">Something went wrong</div>}\n      {data?.map((d) => {\n        const { id, name } = d;\n        return (\n          <CommandItem key={id} onSelect={() => onSelectResult({ id, name })} value={`${id}`}>\n            <Check\n              className={cn(\n                'mr-2 h-4 w-4',\n                selectedResult?.id === id ? 'opacity-100' : 'opacity-0',\n              )}\n            />\n            {name}\n          </CommandItem>\n        );\n      })}\n    </CommandList>\n  );\n}\n"],"names":["POPOVER_WIDTH","DynamicInput","onChange","target","placeholder","open","setOpen","React","selected","setSelected","handleSetActive","dto","displayName","DYNAMIC_INPUT_TARGET","jsxs","Popover","jsx","PopoverTrigger","Button","cn","ChevronsUpDown","PopoverContent","Search","selectedResult","onSelectResult","searchQuery","setSearchQuery","Command","CommandInput","value","SearchResults","query","fetchFn","ctxClient","res","debouncedQuery","useDebounce","data","isLoading","isError","useQuery","CommandList","Loader","d","id","name","CommandItem","Check"],"mappings":"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"}