@inspirecn/react 1.0.0

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,216 @@
+import { ChevronRightIcon as b, ChevronLeftIcon as j } from "lucide-react";
+import { cn as m } from "@inspirecn/ui/lib/utils";
+import { Button as x } from "../button/Button.js";
+import { PaginationProvider as w, usePagination as u } from "./PaginationProvider.js";
+import { Select as I, SelectTrigger as z, SelectValue as B, SelectContent as $, SelectItem as k } from "../select/Select.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+function v({
+  children: t,
+  className: s,
+  ...r
+}) {
+  return /* @__PURE__ */ e(w, {
+    ...r,
+    children: /* @__PURE__ */ e("div", {
+      className: m("flex w-full flex-col items-center gap-y-3 sm:flex-row sm:justify-between sm:gap-x-4", s),
+      children: t
+    })
+  });
+}
+function N({
+  renderText: t,
+  className: s,
+  ...r
+}) {
+  const {
+    showingStart: i,
+    showingEnd: a,
+    totalItems: n
+  } = u(), c = t ? t(i, a, n) : `Showing ${i} - ${a} of ${n} result`;
+  return /* @__PURE__ */ e("p", {
+    className: m("text-text-secondary! text-heading-xs flex-1 text-left", s),
+    ...r,
+    children: c
+  });
+}
+function A({
+  options: t = [10, 20, 50],
+  className: s,
+  ...r
+}) {
+  const {
+    itemsPerPage: i,
+    handleItemsPerPageChange: a
+  } = u();
+  return /* @__PURE__ */ e("div", {
+    className: m("flex items-center justify-between gap-4 sm:gap-2 md:justify-start", s),
+    ...r,
+    children: /* @__PURE__ */ l(I, {
+      value: i.toString(),
+      onValueChange: (n) => a(Number(n)),
+      children: [/* @__PURE__ */ e(z, {
+        size: "sm",
+        className: "text-text-secondary min-w-0 cursor-pointer p-2 shadow-none outline-none!",
+        children: /* @__PURE__ */ e(B, {})
+      }), /* @__PURE__ */ e($, {
+        children: t.map((n) => /* @__PURE__ */ l(k, {
+          value: n.toString(),
+          children: [n, " items"]
+        }, n))
+      })]
+    })
+  });
+}
+function M({
+  page: t,
+  formatNumber: s = (a) => a.toString(),
+  className: r,
+  ...i
+}) {
+  const {
+    currentPage: a,
+    handlePageChange: n
+  } = u();
+  return /* @__PURE__ */ e(x, {
+    variant: "secondary",
+    size: "sm",
+    onClick: () => n(t),
+    className: m("bg-cta-secondary hover:bg-cta-secondary/90 h-8 w-fit sm:h-8 sm:text-sm", a === t && "border-focused border", r),
+    ...i,
+    children: s(t)
+  });
+}
+function y({
+  maxVisible: t = 4,
+  showEllipsis: s = !0,
+  className: r,
+  formatNumber: i,
+  ...a
+}) {
+  const {
+    currentPage: n,
+    totalPages: c
+  } = u(), S = (() => {
+    if (c <= t)
+      return Array.from({
+        length: c
+      }, (h, C) => C + 1);
+    const o = [], d = Math.floor((t - 2) / 2);
+    o.push(1), s && n > 3 && o.push("...");
+    let g = Math.max(2, n - d), f = Math.min(c - 1, n + d);
+    n <= 3 && (g = 2, f = t - 1), n >= c - 2 && (g = c - (t - 2), f = c - 1);
+    for (let h = g; h <= f; h++)
+      o.push(h);
+    return s && n < c - 2 && o.push("..."), o.push(c), o;
+  })();
+  return /* @__PURE__ */ e("div", {
+    className: m("flex items-center gap-2", r),
+    ...a,
+    children: S.map((o, d) => o === "..." ? /* @__PURE__ */ e("span", {
+      className: "bg-cta-secondary text-muted-foreground flex h-8 w-8 items-center justify-center rounded-md sm:h-8",
+      children: "..."
+    }, `ellipsis-${d}`) : /* @__PURE__ */ e(M, {
+      page: o,
+      formatNumber: i
+    }, o))
+  });
+}
+const p = ({
+  label: t,
+  showIcon: s = !0,
+  className: r,
+  ...i
+}) => {
+  const {
+    hasNextPage: a,
+    handleNextPage: n
+  } = u();
+  return /* @__PURE__ */ l(x, {
+    variant: "secondary",
+    size: "sm",
+    onClick: n,
+    disabled: !a,
+    className: m("h-8 w-fit min-w-8 gap-2 px-2 sm:px-3", r),
+    ...i,
+    children: [t && /* @__PURE__ */ e("span", {
+      children: t
+    }), s && /* @__PURE__ */ e(b, {
+      className: "h-3 w-3 sm:h-4 sm:w-4"
+    })]
+  });
+}, P = ({
+  label: t,
+  showIcon: s = !0,
+  className: r,
+  ...i
+}) => {
+  const {
+    hasPreviousPage: a,
+    handlePreviousPage: n
+  } = u();
+  return /* @__PURE__ */ l(x, {
+    variant: "secondary",
+    size: "sm",
+    onClick: n,
+    disabled: !a,
+    className: m("h-8 w-fit min-w-8 gap-2 px-2 sm:px-3", r),
+    ...i,
+    children: [s && /* @__PURE__ */ e(j, {
+      className: "h-3 w-3 sm:h-4 sm:w-4"
+    }), t && /* @__PURE__ */ e("span", {
+      children: t
+    })]
+  });
+};
+function D({
+  className: t,
+  ...s
+}) {
+  return /* @__PURE__ */ e(w, {
+    ...s,
+    children: /* @__PURE__ */ l("div", {
+      className: m("flex items-center gap-1 sm:gap-2", t),
+      children: [/* @__PURE__ */ e(P, {}), /* @__PURE__ */ e(p, {})]
+    })
+  });
+}
+function E({
+  className: t,
+  ...s
+}) {
+  return /* @__PURE__ */ l(v, {
+    className: m("flex flex-col items-center justify-between gap-4 sm:flex-row", t),
+    ...s,
+    children: [/* @__PURE__ */ e(N, {}), /* @__PURE__ */ l("div", {
+      className: "flex items-center gap-x-2 sm:gap-x-2",
+      children: [/* @__PURE__ */ e(P, {}), /* @__PURE__ */ e(y, {}), /* @__PURE__ */ e(p, {})]
+    })]
+  });
+}
+function G({
+  className: t,
+  ...s
+}) {
+  return /* @__PURE__ */ e(v, {
+    className: t,
+    ...s,
+    children: /* @__PURE__ */ l("div", {
+      className: "flex w-full flex-col justify-between gap-4 md:flex-row md:items-center",
+      children: [/* @__PURE__ */ e(N, {}), /* @__PURE__ */ l("div", {
+        className: "flex items-center gap-x-2 sm:gap-x-2",
+        children: [/* @__PURE__ */ e(P, {}), /* @__PURE__ */ e(y, {}), /* @__PURE__ */ e(p, {})]
+      }), /* @__PURE__ */ e(A, {})]
+    })
+  });
+}
+export {
+  v as Pagination,
+  D as PaginationCompact,
+  y as PaginationContent,
+  G as PaginationFull,
+  A as PaginationItemsPerPage,
+  p as PaginationNextButton,
+  P as PaginationPreviousButton,
+  N as PaginationSummary,
+  E as PaginationWithSummary
+};

package/dist/components/pagination/PaginationProvider.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface PaginationState {
+    currentPage: number;
+    totalPages: number;
+    itemsPerPage: number;
+    totalItems: number;
+    showingStart: number;
+    showingEnd: number;
+    hasPreviousPage: boolean;
+    hasNextPage: boolean;
+}
+export interface PaginationActions {
+    handlePageChange: (page: number) => void;
+    handleNextPage: () => void;
+    handlePreviousPage: () => void;
+    handleItemsPerPageChange: (itemsPerPage: number) => void;
+    jumpToFirstPage: () => void;
+    jumpToLastPage: () => void;
+    jumpToPage: (page: number) => void;
+}
+export interface PaginationContextValue extends PaginationState, PaginationActions {
+}
+export interface PaginationProviderProps {
+    children: React.ReactNode;
+    totalItems: number;
+    currentPage?: number;
+    itemsPerPage?: number;
+    onPageChange?: (page: number) => void;
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+}
+export declare const usePagination: () => PaginationContextValue;
+export declare function PaginationProvider({ children, ...props }: PaginationProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaginationProvider.d.ts.map

package/dist/components/pagination/PaginationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationProvider.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/PaginationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,wBAAwB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,sBACf,SAAQ,eAAe,EACrB,iBAAiB;CAAG;AAExB,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAMD,eAAO,MAAM,aAAa,8BAMzB,CAAC;AA+FF,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB"}

package/dist/components/pagination/PaginationProvider.js

@@ -0,0 +1,65 @@
+import * as t from "react";
+import { jsx as T } from "react/jsx-runtime";
+const P = t.createContext(null), N = () => {
+  const c = t.useContext(P);
+  if (!c)
+    throw new Error("usePagination must be used within a PaginationProvider");
+  return c;
+}, m = ({
+  totalItems: c,
+  currentPage: u = 1,
+  itemsPerPage: r = 10,
+  onPageChange: a,
+  onItemsPerPageChange: i
+}) => {
+  const [n, l] = t.useState(u), [f, x] = t.useState(r), o = Math.ceil(c / f), k = (n - 1) * f, v = c > 0 ? k + 1 : 0, S = Math.min(k + f, c), d = n > 1, b = n < o, s = t.useCallback((e) => {
+    e < 1 || e > o || (l(e), a == null || a(e));
+  }, [o, a]), h = t.useCallback(() => {
+    b && s(n + 1);
+  }, [n, b, s]), j = t.useCallback(() => {
+    d && s(n - 1);
+  }, [n, d, s]), p = t.useCallback((e) => {
+    x(e), l(1), i == null || i(e);
+  }, [i]), w = t.useCallback(() => {
+    s(1);
+  }, [s]), E = t.useCallback(() => {
+    s(o);
+  }, [s, o]), C = t.useCallback((e) => {
+    s(e);
+  }, [s]);
+  return t.useEffect(() => {
+    u > o ? l(o > 0 ? o : 1) : l(u);
+  }, [u, o]), t.useEffect(() => {
+    x(r);
+  }, [r]), {
+    currentPage: n,
+    totalPages: o,
+    itemsPerPage: f,
+    totalItems: c,
+    showingStart: v,
+    showingEnd: S,
+    hasPreviousPage: d,
+    hasNextPage: b,
+    handlePageChange: s,
+    handleNextPage: h,
+    handlePreviousPage: j,
+    handleItemsPerPageChange: p,
+    jumpToFirstPage: w,
+    jumpToLastPage: E,
+    jumpToPage: C
+  };
+};
+function F({
+  children: c,
+  ...u
+}) {
+  const r = m(u);
+  return /* @__PURE__ */ T(P.Provider, {
+    value: r,
+    children: c
+  });
+}
+export {
+  F as PaginationProvider,
+  N as usePagination
+};

package/dist/components/pagination/types.d.ts

@@ -0,0 +1,22 @@
+export interface PaginationState {
+    currentPage: number;
+    totalPages: number;
+    itemsPerPage: number;
+    totalItems: number;
+    showingStart: number;
+    showingEnd: number;
+    hasPreviousPage: boolean;
+    hasNextPage: boolean;
+}
+export interface PaginationActions {
+    handlePageChange: (page: number) => void;
+    handleNextPage: () => void;
+    handlePreviousPage: () => void;
+    handleItemsPerPageChange: (itemsPerPage: number) => void;
+    jumpToFirstPage: () => void;
+    jumpToLastPage: () => void;
+    jumpToPage: (page: number) => void;
+}
+export interface PaginationContextValue extends PaginationState, PaginationActions {
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/pagination/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,wBAAwB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,sBACf,SAAQ,eAAe,EAAE,iBAAiB;CAAG"}

package/dist/components/pagination/types.js

@@ -0,0 +1 @@
+

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAevD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/popover/Popover.js

@@ -0,0 +1,49 @@
+import * as t from "@radix-ui/react-popover";
+import { cn as i } from "@inspirecn/ui/lib/utils";
+import { jsx as e } from "react/jsx-runtime";
+function p({
+  ...o
+}) {
+  return /* @__PURE__ */ e(t.Root, {
+    "data-slot": "popover",
+    ...o
+  });
+}
+function m({
+  ...o
+}) {
+  return /* @__PURE__ */ e(t.Trigger, {
+    "data-slot": "popover-trigger",
+    ...o
+  });
+}
+function f({
+  className: o,
+  align: r = "center",
+  sideOffset: a = 4,
+  ...n
+}) {
+  return /* @__PURE__ */ e(t.Portal, {
+    children: /* @__PURE__ */ e(t.Content, {
+      "data-slot": "popover-content",
+      align: r,
+      sideOffset: a,
+      className: i("bg-surface-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md", o),
+      ...n
+    })
+  });
+}
+function c({
+  ...o
+}) {
+  return /* @__PURE__ */ e(t.Anchor, {
+    "data-slot": "popover-anchor",
+    ...o
+  });
+}
+export {
+  p as Popover,
+  c as PopoverAnchor,
+  f as PopoverContent,
+  m as PopoverTrigger
+};

package/dist/components/profile-pic-uploader/ProfilePicUploader.d.ts

@@ -0,0 +1,12 @@
+export type ProfilePictureProps = {
+    name: string;
+    profilePicture?: string;
+    className?: string;
+    uploaderFn: (image: File, fileName: string) => Promise<string | null>;
+    onUpdateProfilePicture: (profilePicture: string) => Promise<void>;
+    maxFileSize?: number;
+    acceptedFileTypes?: string[];
+    onValidationError?: (error: string) => void;
+};
+export declare const ProfilePictureUploader: ({ name, profilePicture, className, uploaderFn, onUpdateProfilePicture, maxFileSize, acceptedFileTypes, onValidationError, }: ProfilePictureProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfilePicUploader.d.ts.map

package/dist/components/profile-pic-uploader/ProfilePicUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePicUploader.d.ts","sourceRoot":"","sources":["../../../src/components/profile-pic-uploader/ProfilePicUploader.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACtE,sBAAsB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAgJF,eAAO,MAAM,sBAAsB,GAAI,6HASpC,mBAAmB,4CAqMrB,CAAC"}

package/dist/components/profile-pic-uploader/ProfilePicUploader.js

@@ -0,0 +1,233 @@
+import { VisuallyHidden as q } from "@radix-ui/react-visually-hidden";
+import { useImageCrop as W } from "@inspirecn/ui/hooks/useImageCrop";
+import { cn as X } from "@inspirecn/ui/lib/utils";
+import { Camera as Y, AlertCircle as Z } from "lucide-react";
+import { useState as F, useMemo as G, useCallback as n, useTransition as J } from "react";
+import Q from "react-image-crop";
+import { toast as C } from "sonner";
+import { Alert as ee } from "../alert/Alert.js";
+import { Avatar as ae } from "../avatar/Avatar.js";
+import { Button as A } from "../button/Button.js";
+import { Dialog as ie, DialogContent as re, DialogTitle as te } from "../dialog/Dialog.js";
+import { Input as oe } from "../input/Input.js";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+const le = ["image/jpeg", "image/jpg", "image/png", "image/webp"], se = 250 * 1024, ne = (l, e, a) => {
+  const [d, r] = F(null), o = n((g) => e.includes(g.type) ? g.size > l ? {
+    isValid: !1,
+    error: `File size too large. Maximum size: ${Math.round(l / 1024)}KB`
+  } : {
+    isValid: !0
+  } : {
+    isValid: !1,
+    error: `Invalid file type. Allowed types: ${e.map((c) => {
+      var h;
+      return ((h = c.split("/")[1]) == null ? void 0 : h.toUpperCase()) || c;
+    }).join(", ")}`
+  }, [e, l]), m = n((g) => {
+    r(null);
+    const p = o(g);
+    if (!p.isValid) {
+      const c = p.error || "Invalid file";
+      r(c), C.error(c), a == null || a(c);
+    }
+    return p.isValid;
+  }, [o, a]), f = n(() => {
+    r(null);
+  }, []);
+  return {
+    validationError: d,
+    validateFile: o,
+    handleFileValidation: m,
+    clearValidationError: f
+  };
+}, ce = () => {
+  const [l, e] = F(!1), [a, d] = J(), r = n(() => {
+    e(!0);
+  }, []), o = n(() => {
+    e(!1);
+  }, []), m = n((f) => {
+    e(f);
+  }, []);
+  return {
+    isOpen: l,
+    isLoading: a,
+    startTransition: d,
+    openDialog: r,
+    closeDialog: o,
+    handleDialogChange: m
+  };
+}, de = (l, e, a) => ({
+  handleUpload: n(async (r) => {
+    if (!r) {
+      C.error("Failed to process image");
+      return;
+    }
+    try {
+      const o = await l(r.file, r.file.name);
+      if (!o) {
+        C.error("Failed to upload image");
+        return;
+      }
+      await e(o), C.success("Profile picture updated successfully"), a == null || a();
+    } catch (o) {
+      console.error("Upload error:", o), C.error("Failed to upload image. Please try again.");
+    }
+  }, [l, e, a])
+}), me = () => ({
+  formatFileSize: n((e) => {
+    if (e === 0) return "0 Bytes";
+    const a = 1024, d = ["Bytes", "KB", "MB"], r = Math.floor(Math.log(e) / Math.log(a));
+    return parseFloat((e / Math.pow(a, r)).toFixed(2)) + " " + d[r];
+  }, [])
+}), Ne = ({
+  name: l,
+  profilePicture: e,
+  className: a,
+  uploaderFn: d,
+  onUpdateProfilePicture: r,
+  maxFileSize: o = se,
+  acceptedFileTypes: m = le,
+  onValidationError: f
+}) => {
+  const [g, p] = F(null), {
+    validationError: c,
+    handleFileValidation: h,
+    clearValidationError: w
+  } = ne(o, m, f), {
+    isOpen: E,
+    isLoading: v,
+    startTransition: z,
+    openDialog: D,
+    closeDialog: L,
+    handleDialogChange: N
+  } = ce(), {
+    handleUpload: S
+  } = de(d, r, L), {
+    formatFileSize: j
+  } = me(), {
+    imgSrc: I,
+    imgRef: B,
+    crop: V,
+    completedCrop: _,
+    setCrop: x,
+    setCompletedCrop: y,
+    onSelectFile: U,
+    onImageLoad: T,
+    getCroppedImage: b,
+    aspectRatio: k,
+    minDimension: O,
+    setImgSrc: M
+  } = W(), K = G(() => m.join(","), [m]), R = n((i) => {
+    var P;
+    const u = (P = i.target.files) == null ? void 0 : P[0];
+    u && (U(i), D(), h(u));
+  }, [U, D, h]), H = n(async () => {
+    z(async () => {
+      const i = await b();
+      p((i == null ? void 0 : i.base64Image) || null), await S(i);
+    });
+  }, [b, S, z]), $ = n((i) => {
+    N(i), i || (w(), M(""), x(void 0), y(void 0));
+  }, [N, w, M, x, y]);
+  return /* @__PURE__ */ s("div", {
+    children: [/* @__PURE__ */ s("div", {
+      className: "group relative",
+      children: [/* @__PURE__ */ t(ae, {
+        name: l,
+        src: g ?? e,
+        className: X("size-12", a)
+      }), /* @__PURE__ */ s(A, {
+        variant: "ghost",
+        size: "icon",
+        className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-transparent text-white opacity-0 transition-opacity duration-300 hover:cursor-pointer hover:bg-transparent group-hover:opacity-100",
+        disabled: v,
+        children: [/* @__PURE__ */ t(Y, {
+          size: 24
+        }), /* @__PURE__ */ t(oe, {
+          type: "file",
+          accept: K,
+          className: "absolute inset-0 cursor-pointer opacity-0",
+          onChange: R,
+          disabled: v
+        })]
+      })]
+    }), /* @__PURE__ */ t(ie, {
+      open: E || v,
+      onOpenChange: $,
+      children: /* @__PURE__ */ s(re, {
+        className: "sm:max-w-[425px]",
+        children: [/* @__PURE__ */ t(q, {
+          children: /* @__PURE__ */ t(te, {
+            children: "Profile Picture"
+          })
+        }), /* @__PURE__ */ s("div", {
+          className: "grid gap-4 py-4",
+          children: [/* @__PURE__ */ t("div", {
+            className: "bg-muted/50 text-muted-foreground rounded-lg p-3 text-sm",
+            children: /* @__PURE__ */ s("div", {
+              className: "flex items-start gap-2",
+              children: [/* @__PURE__ */ t(Z, {
+                size: 16,
+                className: "mt-0.5 flex-shrink-0"
+              }), /* @__PURE__ */ s("div", {
+                className: "space-y-1",
+                children: [/* @__PURE__ */ t("p", {
+                  className: "font-medium",
+                  children: "File Requirements:"
+                }), /* @__PURE__ */ s("ul", {
+                  className: "space-y-0.5 text-xs",
+                  children: [/* @__PURE__ */ s("li", {
+                    children: ["• Accepted formats:", " ", m.map((i) => {
+                      var u;
+                      return ((u = i.split("/")[1]) == null ? void 0 : u.toUpperCase()) || i;
+                    }).join(", ")]
+                  }), /* @__PURE__ */ s("li", {
+                    children: ["• Maximum size: ", j(o)]
+                  }), /* @__PURE__ */ t("li", {
+                    children: "• Image will be cropped to a circle"
+                  })]
+                })]
+              })]
+            })
+          }), c && /* @__PURE__ */ t(ee, {
+            variant: "danger",
+            title: "File Size is too large"
+          }), I && /* @__PURE__ */ s("div", {
+            className: "space-y-4",
+            children: [/* @__PURE__ */ t(Q, {
+              crop: V,
+              onChange: (i, u) => x(u),
+              onComplete: (i) => y(i),
+              circularCrop: !0,
+              keepSelection: !0,
+              aspect: k,
+              minWidth: O,
+              children: /* @__PURE__ */ t("img", {
+                ref: B,
+                alt: "Profile Picture",
+                src: I,
+                onLoad: T,
+                loading: "lazy",
+                width: 375,
+                height: 375,
+                className: "max-h-[375px] w-auto object-contain"
+              })
+            }), _ && /* @__PURE__ */ t(A, {
+              disabled: v || !!c,
+              isLoading: v,
+              onClick: H,
+              variant: "default",
+              size: "lg",
+              loadingLabel: "Uploading",
+              className: "w-full",
+              children: c ? "Upload Error" : "Upload Profile Picture"
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};
+export {
+  Ne as ProfilePictureUploader
+};

package/dist/components/profile-pic-uploader/index.d.ts

@@ -0,0 +1,3 @@
+export { ProfilePictureUploader } from './ProfilePicUploader';
+export type { ProfilePictureProps } from './ProfilePicUploader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/profile-pic-uploader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/profile-pic-uploader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/profile-pic-uploader/index.js

@@ -0,0 +1,4 @@
+import { ProfilePictureUploader as o } from "./ProfilePicUploader.js";
+export {
+  o as ProfilePictureUploader
+};