@cryptlex/web-components 1.3.1 → 1.3.3

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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1 @@
+{"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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"}

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

@@ -1,35 +1,35 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as a from "react";
+import * as o from "react";
 import { OTPInput as m, OTPInputContext as u } from "input-otp";
-import { cn as n } from "../../utils/index.es.js";
+import { cn as s } from "../../utils/index.es.js";
 import { MinusIcon as f } from "@radix-ui/react-icons";
-const x = a.forwardRef(({ className: e, containerClassName: t, ...o }, s) => /* @__PURE__ */ r(
+const x = o.forwardRef(({ className: e, containerClassName: t, ...a }, n) => /* @__PURE__ */ r(
   m,
   {
-    ref: s,
-    containerClassName: n(
+    ref: n,
+    containerClassName: s(
       "flex items-center gap-2 has-[:disabled]:opacity-50",
       t
     ),
-    className: n("disabled:cursor-not-allowed", e),
-    ...o
+    className: s("disabled:cursor-not-allowed", e),
+    ...a
   }
 ));
 x.displayName = "InputOTP";
-const I = a.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ r("div", { ref: o, className: n("flex items-center", e), ...t }));
+const I = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r("div", { ref: a, className: s("flex items-center", e), ...t }));
 I.displayName = "InputOTPGroup";
-const O = a.forwardRef(({ index: e, className: t, ...o }, s) => {
-  const i = a.useContext(u), { char: d, hasFakeCaret: l, isActive: p } = i.slots[e];
+const O = o.forwardRef(({ index: e, className: t, ...a }, n) => {
+  const i = o.useContext(u), { char: d, hasFakeCaret: l, isActive: p } = i.slots[e];
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: s,
-      className: n(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-body shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        p && "z-10 ring-1 ring-ring",
+      ref: n,
+      className: s(
+        "relative flex h-9 w-9 items-center justify-center border-2 border-input text-body shadow-sm transition-all first:rounded-l-md last:rounded-r-md",
+        p ? "z-10  border-2 border-primary" : "",
         t
       ),
-      ...o,
+      ...a,
       children: [
         d,
         l && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
@@ -38,7 +38,7 @@ const O = a.forwardRef(({ index: e, className: t, ...o }, s) => {
   );
 });
 O.displayName = "InputOTPSlot";
-const P = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ r("div", { ref: t, role: "separator", ...e, children: /* @__PURE__ */ r(f, {}) }));
+const P = o.forwardRef(({ ...e }, t) => /* @__PURE__ */ r("div", { ref: t, role: "separator", ...e, children: /* @__PURE__ */ r(f, {}) }));
 P.displayName = "InputOTPSeparator";
 export {
   x as InputOTP,

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.es.js","sources":["../../../lib/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { cn } from \"@/utils\"\nimport { MinusIcon } from \"@radix-ui/react-icons\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-body shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <MinusIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"names":["InputOTP","React","className","containerClassName","props","ref","jsx","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","jsxs","InputOTPSeparator","MinusIcon"],"mappings":";;;;;AAKM,MAAAA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,KAASC,MAC9C,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,oBAAoBG;AAAA,MAClB;AAAA,MACAL;AAAA,IACF;AAAA,IACA,WAAWK,EAAG,+BAA+BN,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEjB,MAAAS,IAAgBR,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAS,GAAAC,wBACzB,OAAI,EAAA,KAAAA,GAAU,WAAWG,EAAG,qBAAqBN,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDK,EAAc,cAAc;AAEtB,MAAAC,IAAeT,EAAM,WAGzB,CAAC,EAAE,OAAAU,GAAO,WAAAT,GAAW,GAAGE,EAAM,GAAGC,MAAQ;AACnC,QAAAO,IAAkBX,EAAM,WAAWY,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,EAAa,IAAAJ,EAAgB,MAAMD,CAAK;AAGlE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZd;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAU;AAAA,QACAC,uBACE,OAAI,EAAA,WAAU,yEACb,UAAC,gBAAAT,EAAA,OAAA,EAAI,WAAU,2DAA2D,CAAA,EAC5E,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;AACDI,EAAa,cAAc;AAE3B,MAAMQ,IAAoBjB,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,wBACd,OAAI,EAAA,KAAAA,GAAU,MAAK,aAAa,GAAGD,GAClC,UAAC,gBAAAE,EAAAa,GAAA,CAAU,CAAA,GACb,CACD;AACDD,EAAkB,cAAc;"}
+{"version":3,"file":"input-otp.es.js","sources":["../../../lib/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { cn } from \"@/utils\"\nimport { MinusIcon } from \"@radix-ui/react-icons\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-2 border-input text-body shadow-sm transition-all first:rounded-l-md last:rounded-r-md\",\n        isActive ? \"z-10  border-2 border-primary\" : \"\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <MinusIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"names":["InputOTP","React","className","containerClassName","props","ref","jsx","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","jsxs","InputOTPSeparator","MinusIcon"],"mappings":";;;;;AAKM,MAAAA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,KAASC,MAC9C,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,oBAAoBG;AAAA,MAClB;AAAA,MACAL;AAAA,IACF;AAAA,IACA,WAAWK,EAAG,+BAA+BN,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEjB,MAAAS,IAAgBR,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAS,GAAAC,wBACzB,OAAI,EAAA,KAAAA,GAAU,WAAWG,EAAG,qBAAqBN,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDK,EAAc,cAAc;AAEtB,MAAAC,IAAeT,EAAM,WAGzB,CAAC,EAAE,OAAAU,GAAO,WAAAT,GAAW,GAAGE,EAAM,GAAGC,MAAQ;AACnC,QAAAO,IAAkBX,EAAM,WAAWY,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,EAAa,IAAAJ,EAAgB,MAAMD,CAAK;AAGlE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAQ,IAAW,kCAAkC;AAAA,QAC7Cd;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAU;AAAA,QACAC,uBACE,OAAI,EAAA,WAAU,yEACb,UAAC,gBAAAT,EAAA,OAAA,EAAI,WAAU,2DAA2D,CAAA,EAC5E,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;AACDI,EAAa,cAAc;AAE3B,MAAMQ,IAAoBjB,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,wBACd,OAAI,EAAA,KAAAA,GAAU,MAAK,aAAa,GAAGD,GAClC,UAAC,gBAAAE,EAAAa,GAAA,CAAU,CAAA,GACb,CACD;AACDD,EAAkB,cAAc;"}

package/dist/components/ui/mutli-select.es.js

@@ -0,0 +1,197 @@
+import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { Badge as E } from "./badge.es.js";
+import { Button as I } from "./button.es.js";
+import { CommandInput as k, CommandList as P, CommandEmpty as F, CommandGroup as h, CommandItem as d, CommandSeparator as v } from "./command.es.js";
+import "./accordion.es.js";
+import "./avatar.es.js";
+import "./breadcrumb.es.js";
+import "./calendar.es.js";
+import "./card.es.js";
+import "./chart.es.js";
+import "./checkbox.es.js";
+import "@radix-ui/react-collapsible";
+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 D } from "../../utils/index.es.js";
+import { XIcon as O, ChevronDown as y, Command as B, CheckIcon as K } from "lucide-react";
+import "./navigation-menu.es.js";
+import "./pagination.es.js";
+import "./password-input.es.js";
+import "./popover.es.js";
+import "./radio-group.es.js";
+import * as m from "react";
+import "./select.es.js";
+import { Separator as g } from "./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 "@tanstack/react-query";
+import "cmdk";
+import "use-debounce";
+import { Popover as R, PopoverTrigger as M, PopoverContent as A } from "@radix-ui/react-popover";
+import { cva as G } from "class-variance-authority";
+G(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default: "border-foreground/10 drop-shadow-md text-foreground bg-card hover:bg-card/80",
+        secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const L = m.forwardRef(
+  ({
+    className: T,
+    variant: X,
+    asChild: _ = !1,
+    options: p,
+    defaultValue: c,
+    onValueChange: l,
+    disabled: q,
+    placeholder: x,
+    animation: z = 0,
+    ...b
+  }, w) => {
+    const [t, s] = m.useState(c || []), i = m.useRef(new Set(t)), [u, a] = m.useState(!1);
+    m.useEffect(() => {
+      s(c || []), i.current = new Set(c);
+    }, [c]);
+    const N = (r) => {
+      r.key === "Enter" ? a(!0) : r.key === "Backspace" && !r.target.value && (t.pop(), s([...t]), i.current.delete(t[t.length - 1]), l([...t]));
+    }, C = (r) => {
+      i.current.has(r) ? (i.current.delete(r), s(t.filter((o) => o !== r))) : (i.current.add(r), s([...t, r])), l(Array.from(i.current));
+    };
+    return /* @__PURE__ */ n(R, { open: u, onOpenChange: a, children: [
+      /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(
+        I,
+        {
+          ref: w,
+          ...b,
+          onClick: () => a(!u),
+          className: "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-card",
+          children: t.length > 0 ? /* @__PURE__ */ n("div", { className: "flex justify-between items-center w-full", children: [
+            /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center", children: t.map((r) => {
+              const o = p.find((S) => S.value === r), f = o == null ? void 0 : o.icon;
+              return /* @__PURE__ */ n(E, { children: [
+                f && /* @__PURE__ */ e(f, { className: "h-6 w-6 mr-2" }),
+                o == null ? void 0 : o.label
+              ] }, r);
+            }) }),
+            /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  className: "h-4 mx-2 cursor-pointer text-muted-foreground",
+                  onClick: (r) => {
+                    s([]), i.current.clear(), l([]), r.stopPropagation();
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(g, { orientation: "vertical", className: "flex min-h-6 h-full" }),
+              /* @__PURE__ */ e(y, { className: "h-4 mx-2 cursor-pointer text-muted-foreground" })
+            ] })
+          ] }) : /* @__PURE__ */ n("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground mx-3", children: x }),
+            /* @__PURE__ */ e(y, { className: "h-4 cursor-pointer text-muted-foreground mx-2" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          className: "w-[200px] p-0 drop-shadow-sm",
+          align: "start",
+          onEscapeKeyDown: () => a(!1),
+          children: /* @__PURE__ */ n(B, { children: [
+            /* @__PURE__ */ e(k, { placeholder: "Search...", onKeyDown: N }),
+            /* @__PURE__ */ n(P, { children: [
+              /* @__PURE__ */ e(F, { children: "No results found." }),
+              /* @__PURE__ */ e(h, { children: p.map((r) => {
+                const o = i.current.has(r.value);
+                return /* @__PURE__ */ n(
+                  d,
+                  {
+                    onSelect: () => C(r.value),
+                    style: {
+                      pointerEvents: "auto",
+                      opacity: 1
+                    },
+                    className: "cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: D(
+                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                            o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                          ),
+                          children: /* @__PURE__ */ e(K, { className: "h-4 w-4" })
+                        }
+                      ),
+                      r.icon && /* @__PURE__ */ e(r.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                      /* @__PURE__ */ e("span", { children: r.label })
+                    ]
+                  },
+                  r.value
+                );
+              }) }),
+              /* @__PURE__ */ e(v, {}),
+              /* @__PURE__ */ e(h, { children: /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+                t.length > 0 && /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e(
+                    d,
+                    {
+                      onSelect: () => {
+                        s([]), i.current.clear(), l([]);
+                      },
+                      style: {
+                        pointerEvents: "auto",
+                        opacity: 1
+                      },
+                      className: "flex-1 justify-center cursor-pointer",
+                      children: "Clear"
+                    }
+                  ),
+                  /* @__PURE__ */ e(g, { orientation: "vertical", className: "flex min-h-6 h-full" })
+                ] }),
+                /* @__PURE__ */ e(v, {}),
+                /* @__PURE__ */ e(
+                  d,
+                  {
+                    onSelect: () => a(!1),
+                    style: {
+                      pointerEvents: "auto",
+                      opacity: 1
+                    },
+                    className: "flex-1 justify-center cursor-pointer",
+                    children: "Close"
+                  }
+                )
+              ] }) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+L.displayName = "MultiSelectFormField";
+export {
+  L as default
+};
+//# sourceMappingURL=mutli-select.es.js.map

package/dist/components/ui/mutli-select.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutli-select.es.js","sources":["../../../lib/components/ui/mutli-select.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/components/ui/command';\nimport { Separator } from '@/index';\nimport { cn } from '@/utils';\nimport { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CheckIcon, ChevronDown, Command, XIcon } from 'lucide-react';\nimport * as React from 'react';\n\nconst multiSelectVariants = cva(\n  'm-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300',\n  {\n    variants: {\n      variant: {\n        default: 'border-foreground/10 drop-shadow-md text-foreground bg-card hover:bg-card/80',\n        secondary:\n          'border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        inverted: 'inverted',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\ninterface MultiSelectFormFieldProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof multiSelectVariants> {\n  asChild?: boolean;\n  options: {\n    label: string;\n    value: string;\n    icon?: React.ComponentType<{ className?: string }>;\n  }[];\n  defaultValue?: string[];\n  disabled?: boolean;\n  placeholder: string;\n  className?: string;\n  animation?: number;\n  onValueChange: (value: string[]) => void;\n}\n\nconst MultiSelectFormField = React.forwardRef<HTMLButtonElement, MultiSelectFormFieldProps>(\n  (\n    {\n      className,\n      variant,\n      asChild = false,\n      options,\n      defaultValue,\n      onValueChange,\n      disabled,\n      placeholder,\n      animation = 0,\n      ...props\n    },\n    ref,\n  ) => {\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue || []);\n    const selectedValuesSet = React.useRef(new Set(selectedValues));\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n\n    React.useEffect(() => {\n      setSelectedValues(defaultValue || []);\n      selectedValuesSet.current = new Set(defaultValue);\n    }, [defaultValue]);\n\n    const handleInputKeyDown = (event: any) => {\n      if (event.key === 'Enter') {\n        setIsPopoverOpen(true);\n      } else if (event.key === 'Backspace' && !event.target.value) {\n        selectedValues.pop();\n        setSelectedValues([...selectedValues]);\n        selectedValuesSet.current.delete(selectedValues[selectedValues.length - 1]);\n        onValueChange([...selectedValues]);\n      }\n    };\n\n    const toggleOption = (value: string) => {\n      if (selectedValuesSet.current.has(value)) {\n        selectedValuesSet.current.delete(value);\n        setSelectedValues(selectedValues.filter((v) => v !== value));\n      } else {\n        selectedValuesSet.current.add(value);\n        setSelectedValues([...selectedValues, value]);\n      }\n      onValueChange(Array.from(selectedValuesSet.current));\n    };\n\n    return (\n      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            ref={ref}\n            {...props}\n            onClick={() => setIsPopoverOpen(!isPopoverOpen)}\n            className=\"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-card\"\n          >\n            {selectedValues.length > 0 ? (\n              <div className=\"flex justify-between items-center w-full\">\n                <div className=\"flex flex-wrap items-center\">\n                  {selectedValues.map((value) => {\n                    const option = options.find((o) => o.value === value);\n                    const IconComponent = option?.icon;\n                    return (\n                      <Badge key={value}>\n                        {IconComponent && <IconComponent className=\"h-6 w-6 mr-2\" />}\n                        {option?.label}\n                      </Badge>\n                    );\n                  })}\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <XIcon\n                    className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\n                    onClick={(event) => {\n                      setSelectedValues([]);\n                      selectedValuesSet.current.clear();\n                      onValueChange([]);\n                      event.stopPropagation();\n                    }}\n                  />\n                  <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\n                  <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\n                </div>\n              </div>\n            ) : (\n              <div className=\"flex items-center justify-between w-full mx-auto\">\n                <span className=\"text-sm text-muted-foreground mx-3\">{placeholder}</span>\n                <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\n              </div>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-[200px] p-0 drop-shadow-sm\"\n          align=\"start\"\n          onEscapeKeyDown={() => setIsPopoverOpen(false)}\n        >\n          <Command>\n            <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {options.map((option) => {\n                  const isSelected = selectedValuesSet.current.has(option.value);\n                  return (\n                    <CommandItem\n                      key={option.value}\n                      onSelect={() => toggleOption(option.value)}\n                      style={{\n                        pointerEvents: 'auto',\n                        opacity: 1,\n                      }}\n                      className=\"cursor-pointer\"\n                    >\n                      <div\n                        className={cn(\n                          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',\n                          isSelected\n                            ? 'bg-primary text-primary-foreground'\n                            : 'opacity-50 [&_svg]:invisible',\n                        )}\n                      >\n                        <CheckIcon className=\"h-4 w-4\" />\n                      </div>\n                      {option.icon && (\n                        <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                      )}\n                      <span>{option.label}</span>\n                    </CommandItem>\n                  );\n                })}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <div className=\"flex items-center justify-between\">\n                  {selectedValues.length > 0 && (\n                    <>\n                      <CommandItem\n                        onSelect={() => {\n                          setSelectedValues([]);\n                          selectedValuesSet.current.clear();\n                          onValueChange([]);\n                        }}\n                        style={{\n                          pointerEvents: 'auto',\n                          opacity: 1,\n                        }}\n                        className=\"flex-1 justify-center cursor-pointer\"\n                      >\n                        Clear\n                      </CommandItem>\n                      <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\n                    </>\n                  )}\n                  <CommandSeparator />\n                  <CommandItem\n                    onSelect={() => setIsPopoverOpen(false)}\n                    style={{\n                      pointerEvents: 'auto',\n                      opacity: 1,\n                    }}\n                    className=\"flex-1 justify-center cursor-pointer\"\n                  >\n                    Close\n                  </CommandItem>\n                </div>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nMultiSelectFormField.displayName = 'MultiSelectFormField';\n\nexport default MultiSelectFormField;\n"],"names":["cva","MultiSelectFormField","React","className","variant","asChild","options","defaultValue","onValueChange","disabled","placeholder","animation","props","ref","selectedValues","setSelectedValues","selectedValuesSet","isPopoverOpen","setIsPopoverOpen","handleInputKeyDown","event","toggleOption","value","v","jsxs","Popover","jsx","PopoverTrigger","Button","option","o","IconComponent","Badge","XIcon","Separator","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","isSelected","CommandItem","cn","CheckIcon","CommandSeparator","Fragment"],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { Search as u, X as n } from "lucide-react";
+import { useState as f } from "react";
+import { Input as d } from "./input.es.js";
+const N = ({ onChange: t, ...c }) => {
+  const [a, l] = f(""), i = (e) => {
+    const o = e.target.value;
+    l(o), t == null || t(o);
+  }, s = () => {
+    l(""), t == null || t("");
+  }, m = (e) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), s());
+  };
+  return /* @__PURE__ */ p("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ r("div", { className: "absolute left-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ r(u, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ r(
+      d,
+      {
+        ...c,
+        value: a,
+        onChange: i,
+        className: "w-[200px] pl-7 pr-7"
+      }
+    ),
+    a && /* @__PURE__ */ r(
+      n,
+      {
+        onClick: s,
+        onKeyDown: m,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": "Clear search input",
+        className: "absolute right-1 top-1/2 transform -translate-y-1/2 cursor-pointer"
+      }
+    )
+  ] });
+};
+export {
+  N as SearchInput
+};
+//# sourceMappingURL=search-input.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.es.js","sources":["../../../lib/components/ui/search-input.tsx"],"sourcesContent":["import { Search, X } from 'lucide-react'; // Assuming LucideIcon is the type of your icons\nimport React, { useState } from 'react';\nimport { Input, InputProps } from './input'; // Adjust based on your Input import path\n\ninterface SearchInputProps extends Omit<InputProps, 'onChange'> {\n  onChange?: (value: string) => void; // Function to handle input value changes\n}\n\nconst SearchInput: React.FC<SearchInputProps> = ({ onChange, ...props }) => {\n  const [value, setValue] = useState<string>('');\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setValue(newValue);\n    onChange?.(newValue); // Call the custom onChange handler with the new value\n  };\n\n  const handleClearClick = () => {\n    setValue('');\n    onChange?.(''); // Notify the parent that the input has been cleared\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<SVGElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      handleClearClick(); // Trigger the clear action on Enter or Space key press\n    }\n  };\n\n  return (\n    <div className=\"relative flex items-center\">\n      {/* Search Icon */}\n      <div className=\"absolute left-2 top-1/2 transform -translate-y-1/2\">\n        <Search className=\"h-4 w-4\" />\n      </div>\n\n      {/* Input Field */}\n      <Input\n        {...props}\n        value={value}\n        onChange={handleInputChange} // Use the internal handler\n        className={`w-[200px] pl-7 pr-7`}\n      />\n\n      {/* Clear (X) Icon */}\n      {value && (\n        <X\n          onClick={handleClearClick}\n          onKeyDown={handleKeyDown}\n          tabIndex={0}\n          role=\"button\" // Announce it as a button for assistive technologies\n          aria-label=\"Clear search input\" // Accessible label\n          className=\"absolute right-1 top-1/2 transform -translate-y-1/2 cursor-pointer\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport { SearchInput };\n"],"names":["SearchInput","onChange","props","value","setValue","useState","handleInputChange","event","newValue","handleClearClick","handleKeyDown","jsxs","jsx","Search","Input","X"],"mappings":";;;;AAQA,MAAMA,IAA0C,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAAY;AAC1E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,EAAE,GAEvCC,IAAoB,CAACC,MAA+C;AAClE,UAAAC,IAAWD,EAAM,OAAO;AAC9B,IAAAH,EAASI,CAAQ,GACjBP,KAAA,QAAAA,EAAWO;AAAA,EACb,GAEMC,IAAmB,MAAM;AAC7B,IAAAL,EAAS,EAAE,GACXH,KAAA,QAAAA,EAAW;AAAA,EACb,GAEMS,IAAgB,CAACH,MAA2C;AAChE,KAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAe,GACJE,EAAA;AAAA,EAErB;AAGE,SAAA,gBAAAE,EAAC,OAAI,EAAA,WAAU,8BAEb,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,sDACb,4BAACC,GAAO,EAAA,WAAU,WAAU,EAC9B,CAAA;AAAA,IAGA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACE,GAAGZ;AAAA,QACJ,OAAAC;AAAA,QACA,UAAUG;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAGCH,KACC,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAASN;AAAA,QACT,WAAWC;AAAA,QACX,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;"}

package/dist/components/ui/sheet.es.js

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import * as r from "react";
 import * as e from "@radix-ui/react-dialog";
 import { Cross2Icon as c } from "@radix-ui/react-icons";
 import { cva as f } from "class-variance-authority";
+import * as r from "react";
 import { cn as i } from "../../utils/index.es.js";
 const C = e.Root, R = e.Trigger, T = e.Close, p = e.Portal, d = r.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Overlay,
@@ -33,47 +33,21 @@ const h = f(
   }
 ), g = r.forwardRef(({ side: t = "right", className: a, children: s, ...l }, m) => /* @__PURE__ */ n(p, { children: [
   /* @__PURE__ */ o(d, {}),
-  /* @__PURE__ */ n(
-    e.Content,
-    {
-      ref: m,
-      className: i(h({ side: t }), a),
-      ...l,
-      children: [
-        /* @__PURE__ */ n(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ o(c, { className: "h-4 w-4" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-        ] }),
-        s
-      ]
-    }
-  )
+  /* @__PURE__ */ n(e.Content, { ref: m, className: i(h({ side: t }), a), ...l, children: [
+    /* @__PURE__ */ n(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+      /* @__PURE__ */ o(c, { className: "h-4 w-4" }),
+      /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+    ] }),
+    s
+  ] })
 ] }));
 g.displayName = e.Content.displayName;
-const u = ({
-  className: t,
-  ...a
-}) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: i(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      t
-    ),
-    ...a
-  }
-);
+const u = ({ className: t, ...a }) => /* @__PURE__ */ o("div", { className: i("flex flex-col space-y-2 text-center sm:text-left", t), ...a });
 u.displayName = "SheetHeader";
-const y = ({
-  className: t,
-  ...a
-}) => /* @__PURE__ */ o(
+const y = ({ className: t, ...a }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      t
-    ),
+    className: i("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", t),
     ...a
   }
 );

package/dist/components/ui/sheet.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.es.js","sources":["../../../lib/components/ui/sheet.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-heading-3 font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-body text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"],"names":["Sheet","SheetPrimitive","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","React","className","props","ref","jsx","cn","sheetVariants","cva","SheetContent","side","children","jsxs","Cross2Icon","SheetHeader","SheetFooter","SheetTitle","SheetDescription"],"mappings":";;;;;;AAOA,MAAMA,IAAQC,EAAe,MAEvBC,IAAeD,EAAe,SAE9BE,IAAaF,EAAe,OAE5BG,IAAcH,EAAe,QAE7BI,IAAeC,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,WAAWU;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,IACJ,KAAAC;AAAA,EAAA;AACF,CACD;AACDJ,EAAa,cAAcJ,EAAe,QAAQ;AAElD,MAAMW,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,QACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAMMC,IAAeR,EAAM,WAGzB,CAAC,EAAE,MAAAS,IAAO,SAAS,WAAAR,GAAW,UAAAS,GAAU,GAAGR,EAAS,GAAAC,wBACnDL,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAM,EAACL,GAAa,EAAA;AAAA,EACd,gBAAAY;AAAA,IAAChB,EAAe;AAAA,IAAf;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE,EAAGC,EAAc,EAAE,MAAAG,EAAM,CAAA,GAAGR,CAAS;AAAA,MAC/C,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAChB,EAAe,OAAf,EAAqB,WAAU,4OAC9B,UAAA;AAAA,UAAC,gBAAAS,EAAAQ,GAAA,EAAW,WAAU,UAAU,CAAA;AAAA,UAC/B,gBAAAR,EAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,QAAA,GACjC;AAAA,QACCM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACH,GACF,CACD;AACDF,EAAa,cAAcb,EAAe,QAAQ;AAElD,MAAMkB,IAAc,CAAC;AAAA,EACnB,WAAAZ;AAAA,EACA,GAAGC;AACL,MACE,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFW,EAAY,cAAc;AAE1B,MAAMC,IAAc,CAAC;AAAA,EACnB,WAAAb;AAAA,EACA,GAAGC;AACL,MACE,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN;AAEFY,EAAY,cAAc;AAEpB,MAAAC,IAAaf,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,gDAAgDJ,CAAS;AAAA,IACtE,GAAGC;AAAA,EAAA;AACN,CACD;AACDa,EAAW,cAAcpB,EAAe,MAAM;AAExC,MAAAqB,IAAmBhB,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,mCAAmCJ,CAAS;AAAA,IACzD,GAAGC;AAAA,EAAA;AACN,CACD;AACDc,EAAiB,cAAcrB,EAAe,YAAY;"}
+{"version":3,"file":"sheet.es.js","sources":["../../../lib/components/ui/sheet.tsx"],"sourcesContent":["import * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { Cross2Icon } from '@radix-ui/react-icons';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/utils';\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n);\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />\n);\nSheetHeader.displayName = 'SheetHeader';\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n);\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn('text-heading-3 font-semibold text-foreground', className)}\n    {...props}\n  />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-body text-muted-foreground', className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"names":["Sheet","SheetPrimitive","SheetTrigger","SheetClose","SheetPortal","SheetOverlay","React","className","props","ref","jsx","cn","sheetVariants","cva","SheetContent","side","children","jsxs","Cross2Icon","SheetHeader","SheetFooter","SheetTitle","SheetDescription"],"mappings":";;;;;;AAOA,MAAMA,IAAQC,EAAe,MAEvBC,IAAeD,EAAe,SAE9BE,IAAaF,EAAe,OAE5BG,IAAcH,EAAe,QAE7BI,IAAeC,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,WAAWU;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,IACJ,KAAAC;AAAA,EAAA;AACF,CACD;AACDJ,EAAa,cAAcJ,EAAe,QAAQ;AAElD,MAAMW,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,QACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAMMC,IAAeR,EAAM,WAGzB,CAAC,EAAE,MAAAS,IAAO,SAAS,WAAAR,GAAW,UAAAS,GAAU,GAAGR,EAAS,GAAAC,wBACnDL,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAM,EAACL,GAAa,EAAA;AAAA,EACb,gBAAAY,EAAAhB,EAAe,SAAf,EAAuB,KAAAQ,GAAU,WAAWE,EAAGC,EAAc,EAAE,MAAAG,EAAM,CAAA,GAAGR,CAAS,GAAI,GAAGC,GACvF,UAAA;AAAA,IAAA,gBAAAS,EAAChB,EAAe,OAAf,EAAqB,WAAU,4OAC9B,UAAA;AAAA,MAAC,gBAAAS,EAAAQ,GAAA,EAAW,WAAU,UAAU,CAAA;AAAA,MAC/B,gBAAAR,EAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,IAAA,GACjC;AAAA,IACCM;AAAA,EAAA,EACH,CAAA;AAAA,GACF,CACD;AACDF,EAAa,cAAcb,EAAe,QAAQ;AAElD,MAAMkB,IAAc,CAAC,EAAE,WAAAZ,GAAW,GAAGC,EAAM,MACxC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAG,oDAAoDJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAEhGW,EAAY,cAAc;AAE1B,MAAMC,IAAc,CAAC,EAAE,WAAAb,GAAW,GAAGC,EACnC,MAAA,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAG,iEAAiEJ,CAAS;AAAA,IACvF,GAAGC;AAAA,EAAA;AACN;AAEFY,EAAY,cAAc;AAEpB,MAAAC,IAAaf,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,gDAAgDJ,CAAS;AAAA,IACtE,GAAGC;AAAA,EAAA;AACN,CACD;AACDa,EAAW,cAAcpB,EAAe,MAAM;AAExC,MAAAqB,IAAmBhB,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAe;AAAA,EAAf;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE,EAAG,mCAAmCJ,CAAS;AAAA,IACzD,GAAGC;AAAA,EAAA;AACN,CACD;AACDc,EAAiB,cAAcrB,EAAe,YAAY;"}