@tulip-systems/core 0.7.0 → 0.8.0

package/dist/modules/inline-edit/components/toggle.client.mjs

@@ -22,6 +22,7 @@ function InlineToggle({ initialValue, action, children, permission, updateStrate
 		...props,
 		className: cn("flex flex-wrap items-center justify-start gap-1", className),
 		children: /* @__PURE__ */ jsx(Toggle, {
+			"data-inline-input": "toggle",
 			disabled: !isAllowed,
 			variant: "outline",
 			pressed: value ?? void 0,

package/dist/modules/inline-edit/components/toggle.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/toggle.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { Toggle } from \"@/components/ui/toggle.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\nexport type InlineEditToggleProps<Required extends boolean = false> =\n  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;\n\nexport function InlineToggle<Required extends boolean = false>({\n  initialValue,\n  action,\n  children,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineEditToggleProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <div {...props} className={cn(\"flex flex-wrap items-center justify-start gap-1\", className)}>\n      <Toggle\n        disabled={!isAllowed}\n        variant=\"outline\"\n        pressed={value ?? undefined}\n        defaultChecked={initialValue ?? undefined}\n        onPressedChange={(value) => {\n          handleChange(value);\n          handleBlur(value);\n        }}\n      >\n        {children}\n      </Toggle>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,aAA+C,EAC7D,cACA,QACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SAC+B;CAClC,MAAM,EAAE,OAAO,cAAc,YAAY,cAAc,cAAc;EACnE;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,mDAAmD,UAAU;YACzF,oBAAC;GACC,UAAU,CAAC;GACX,SAAQ;GACR,SAAS,SAAS;GAClB,gBAAgB,gBAAgB;GAChC,kBAAkB,UAAU;AAC1B,iBAAa,MAAM;AACnB,eAAW,MAAM;;GAGlB;IACM;GACL"}
+{"version":3,"file":"toggle.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/toggle.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { Toggle } from \"@/components/ui/toggle.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\nexport type InlineEditToggleProps<Required extends boolean = false> =\n  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;\n\nexport function InlineToggle<Required extends boolean = false>({\n  initialValue,\n  action,\n  children,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineEditToggleProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <div {...props} className={cn(\"flex flex-wrap items-center justify-start gap-1\", className)}>\n      <Toggle\n        data-inline-input=\"toggle\"\n        disabled={!isAllowed}\n        variant=\"outline\"\n        pressed={value ?? undefined}\n        defaultChecked={initialValue ?? undefined}\n        onPressedChange={(value) => {\n          handleChange(value);\n          handleBlur(value);\n        }}\n      >\n        {children}\n      </Toggle>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,aAA+C,EAC7D,cACA,QACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SAC+B;CAClC,MAAM,EAAE,OAAO,cAAc,YAAY,cAAc,cAAc;EACnE;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,mDAAmD,UAAU;YACzF,oBAAC;GACC,qBAAkB;GAClB,UAAU,CAAC;GACX,SAAQ;GACR,SAAS,SAAS;GAClB,gBAAgB,gBAAgB;GAChC,kBAAkB,UAAU;AAC1B,iBAAa,MAAM;AACnB,eAAW,MAAM;;GAGlB;IACM;GACL"}

package/dist/modules/inline-edit/lib/variants.d.mts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 //#region src/modules/inline-edit/lib/variants.d.ts
 declare const inlineEditVariants: (props?: ({
   variant?: "default" | "table" | null | undefined;
-  status?: "success" | "error" | "idle" | "pending" | null | undefined;
+  status?: "error" | "success" | "pending" | "idle" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type InlineEditVariantsProps = VariantProps<typeof inlineEditVariants>;
 //#endregion

package/dist/modules/router/handler/context.server.d.mts

@@ -1,14 +1,16 @@
-import { TDatabaseSchema } from "../../config/db/types.mjs";
-import { DatabaseClient } from "../../config/db/init.mjs";
-import { EmailClient } from "../../config/providers/email.mjs";
-import "../../../config/server.mjs";
-import { StorageService } from "../../storage/lib/service.server.mjs";
-import { AuthClient } from "../../auth/handler/init.mjs";
+import { Database } from "../../database/lib/service.server.mjs";
+import "../../../database/server.mjs";
+import { Email } from "../../emails/lib/service.server.mjs";
+import { Auth } from "../../auth/handler/service.server.mjs";
+import { Storage } from "../../storage/lib/service.server.mjs";
 import { TulipContext } from "../../config/lib/context.mjs";
 import "../../../config.mjs";
 import "../../../auth/server.mjs";
+import "../../../emails/server.mjs";
+import "../../../storage/server.mjs";
 import "server-cli-only";
 import * as next_dist_server_web_spec_extension_adapters_headers0 from "next/dist/server/web/spec-extension/adapters/headers";
+import { TDatabaseSchema } from "@/modules/config/db/types";
 
 //#region src/modules/router/handler/context.server.d.ts
 /**
@@ -46,11 +48,11 @@ declare const createRPCContext: <TSchema extends TDatabaseSchema>(props: {
     };
   } | null;
   headers: next_dist_server_web_spec_extension_adapters_headers0.ReadonlyHeaders;
-  db: DatabaseClient<TSchema>;
+  db: Database<TSchema>;
   schema: TSchema;
-  auth: AuthClient;
-  email: EmailClient;
-  storage: StorageService<TSchema>;
+  auth: Auth;
+  email: Email;
+  storage: Storage<TSchema>;
 }>;
 type RPCContext<TSchema extends TDatabaseSchema = any> = Awaited<ReturnType<typeof createRPCContext<TSchema>>>;
 type ProtectedRPCContext<TSchema extends TDatabaseSchema = any> = RPCContext<TSchema> & {

package/dist/modules/router/handler/context.server.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"context.server.d.mts","names":[],"sources":["../../../../src/modules/router/handler/context.server.ts"],"mappings":";;;;;;;;;;;;;;;;cAUa,gBAAA,mBACY,eAAA,EAAe,KAAA;EAAW,OAAA,EAAS,YAAA,CAAa,OAAA;AAAA,MAAU,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KASvE,UAAA,iBAA2B,eAAA,UAAyB,OAAA,CAC9D,UAAA,QAAkB,gBAAA,CAAiB,OAAA;AAAA,KAIzB,mBAAA,iBAAoC,eAAA,UAAyB,UAAA,CAAW,OAAA;EAClF,OAAA,EAAS,WAAA,CAAY,UAAA,CAAW,OAAA;AAAA"}
+{"version":3,"file":"context.server.d.mts","names":[],"sources":["../../../../src/modules/router/handler/context.server.ts"],"mappings":";;;;;;;;;;;;;;;;;;cAUa,gBAAA,mBACY,eAAA,EAAe,KAAA;EAAW,OAAA,EAAS,YAAA,CAAa,OAAA;AAAA,MAAU,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KASvE,UAAA,iBAA2B,eAAA,UAAyB,OAAA,CAC9D,UAAA,QAAkB,gBAAA,CAAiB,OAAA;AAAA,KAIzB,mBAAA,iBAAoC,eAAA,UAAyB,UAAA,CAAW,OAAA;EAClF,OAAA,EAAS,WAAA,CAAY,UAAA,CAAW,OAAA;AAAA"}

package/dist/modules/router/handler/init.server.d.mts

@@ -1,15 +1,17 @@
 import { Permission } from "../../auth/lib/permissions.mjs";
-import { TDatabaseSchema } from "../../config/db/types.mjs";
-import { DatabaseClient } from "../../config/db/init.mjs";
-import { EmailClient } from "../../config/providers/email.mjs";
-import "../../../config/server.mjs";
-import { StorageService } from "../../storage/lib/service.server.mjs";
-import { AuthClient } from "../../auth/handler/init.mjs";
+import { Database } from "../../database/lib/service.server.mjs";
+import "../../../database/server.mjs";
+import { Email } from "../../emails/lib/service.server.mjs";
+import { Auth } from "../../auth/handler/service.server.mjs";
+import { Storage } from "../../storage/lib/service.server.mjs";
 import "../../../auth/server.mjs";
+import "../../../emails/server.mjs";
+import "../../../storage/server.mjs";
 import { ProtectedRPCContext, RPCContext } from "./context.server.mjs";
 import * as _orpc_server0 from "@orpc/server";
 import "server-cli-only";
 import * as next_dist_server_web_spec_extension_adapters_headers0 from "next/dist/server/web/spec-extension/adapters/headers";
+import { TDatabaseSchema } from "@/modules/config/db/types";
 import * as _orpc_contract0 from "@orpc/contract";
 
 //#region src/modules/router/handler/init.server.d.ts
@@ -20,7 +22,7 @@ declare function initRPC<TSchema extends TDatabaseSchema>(): {
   publicProcedure: _orpc_server0.Builder<RPCContext<TSchema> & Record<never, never>, RPCContext<TSchema>, _orpc_contract0.Schema<unknown, unknown>, _orpc_contract0.Schema<unknown, unknown>, Record<never, never>, Record<never, never>>;
   protectedProcedure: _orpc_server0.BuilderWithMiddlewares<_orpc_server0.MergedInitialContext<RPCContext<TSchema> & Record<never, never>, RPCContext<TSchema> & Record<never, never>, RPCContext<TSchema>>, _orpc_server0.MergedCurrentContext<RPCContext<TSchema>, ProtectedRPCContext<TSchema>>, _orpc_contract0.Schema<unknown, unknown>, _orpc_contract0.Schema<unknown, unknown>, Record<never, never>, Record<never, never>>;
   authMiddleware: _orpc_server0.DecoratedMiddleware<RPCContext<TSchema> & Record<never, never>, ProtectedRPCContext<TSchema>, unknown, any, any, Record<never, never>>;
-  permissionMiddleware: (permission: Permission) => _orpc_server0.DecoratedMiddleware<{
+  permissionMiddleware: (permissions: Permission) => _orpc_server0.DecoratedMiddleware<{
     session: {
       session: {
         id: string;
@@ -50,11 +52,11 @@ declare function initRPC<TSchema extends TDatabaseSchema>(): {
       };
     } | null;
     headers: next_dist_server_web_spec_extension_adapters_headers0.ReadonlyHeaders;
-    db: DatabaseClient<TSchema>;
+    db: Database<TSchema>;
     schema: TSchema;
-    auth: AuthClient;
-    email: EmailClient;
-    storage: StorageService<TSchema>;
+    auth: Auth;
+    email: Email;
+    storage: Storage<TSchema>;
   } & {
     session: {
       session: {

package/dist/modules/router/handler/init.server.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"init.server.d.mts","names":[],"sources":["../../../../src/modules/router/handler/init.server.ts"],"mappings":";;;;;;;;;;;;;;;;;;iBAWgB,OAAA,iBAAwB,eAAA,CAAA,CAAA;;;;qCAwBI,UAAA,mBAAU,mBAAA"}
+{"version":3,"file":"init.server.d.mts","names":[],"sources":["../../../../src/modules/router/handler/init.server.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAWgB,OAAA,iBAAwB,eAAA,CAAA,CAAA;;;;sCAwBK,UAAA,mBAAU,mBAAA"}

package/dist/modules/router/handler/init.server.mjs

@@ -24,14 +24,14 @@ function initRPC() {
 	/**
 	* Middleware function to check if the user has the required permission
 	*/
-	function permissionMiddleware(permission) {
+	function permissionMiddleware(permissions) {
 		/**
 		* Middleware function to check if the user has the required permission
 		*/
 		return os.$context().middleware(async (opts) => {
 			const { success, error } = await opts.context.auth.api.userHasPermission({ body: {
 				userId: opts.context.session.user.id,
-				permission
+				permissions
 			} });
 			if (error || !success) throw new ServerError("UNAUTHORIZED", { message: "Jou hebt geen toegang om deze actie uit te voeren" });
 			return opts.next({ context: { ...opts.context } });

package/dist/modules/router/handler/init.server.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"init.server.mjs","names":[],"sources":["../../../../src/modules/router/handler/init.server.ts"],"sourcesContent":["import \"server-cli-only\";\n\nimport { os } from \"@orpc/server\";\nimport type { Permission } from \"@/modules/auth/lib/permissions\";\nimport type { TDatabaseSchema } from \"@/modules/config/db/types\";\nimport { ServerError } from \"../lib/error.server\";\nimport type { ProtectedRPCContext, RPCContext } from \"./context.server\";\n\n/**\n * Initialize TRPC\n */\nexport function initRPC<TSchema extends TDatabaseSchema>() {\n  /**\n   * Create the router\n   */\n  const o = os.$context<RPCContext<TSchema>>();\n\n  /**\n   * Middleware function to check if the user is authenticated\n   */\n  const authMiddleware = o.middleware(async (opts) => {\n    if (!opts.context.session) {\n      throw new ServerError(\"UNAUTHORIZED\", {\n        message: \"Jou hebt geen toegang om deze actie uit te voeren\",\n      });\n    }\n\n    return opts.next({\n      context: { ...opts.context, session: opts.context.session } as ProtectedRPCContext<TSchema>,\n    });\n  });\n\n  /**\n   * Middleware function to check if the user has the required permission\n   */\n  function permissionMiddleware(permission: Permission) {\n    /**\n     * Middleware function to check if the user has the required permission\n     */\n    return os.$context<ProtectedRPCContext<TSchema>>().middleware(async (opts) => {\n      const { success, error } = await opts.context.auth.api.userHasPermission({\n        body: {\n          userId: opts.context.session.user.id,\n          permission,\n        },\n      });\n\n      if (error || !success) {\n        throw new ServerError(\"UNAUTHORIZED\", {\n          message: \"Jou hebt geen toegang om deze actie uit te voeren\",\n        });\n      }\n\n      return opts.next({ context: { ...opts.context } as ProtectedRPCContext<TSchema> });\n    });\n  }\n\n  /**\n   * Public procedures\n   */\n  const publicProcedure = o;\n\n  /**\n   * Protected procedures\n   */\n  const protectedProcedure = o.use(authMiddleware);\n\n  /**\n   * Export\n   */\n  return {\n    publicProcedure,\n    protectedProcedure,\n    authMiddleware,\n    permissionMiddleware,\n  };\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,UAA2C;;;;CAIzD,MAAM,IAAI,GAAG,UAA+B;;;;CAK5C,MAAM,iBAAiB,EAAE,WAAW,OAAO,SAAS;AAClD,MAAI,CAAC,KAAK,QAAQ,QAChB,OAAM,IAAI,YAAY,gBAAgB,EACpC,SAAS,qDACV,CAAC;AAGJ,SAAO,KAAK,KAAK,EACf,SAAS;GAAE,GAAG,KAAK;GAAS,SAAS,KAAK,QAAQ;GAAS,EAC5D,CAAC;GACF;;;;CAKF,SAAS,qBAAqB,YAAwB;;;;AAIpD,SAAO,GAAG,UAAwC,CAAC,WAAW,OAAO,SAAS;GAC5E,MAAM,EAAE,SAAS,UAAU,MAAM,KAAK,QAAQ,KAAK,IAAI,kBAAkB,EACvE,MAAM;IACJ,QAAQ,KAAK,QAAQ,QAAQ,KAAK;IAClC;IACD,EACF,CAAC;AAEF,OAAI,SAAS,CAAC,QACZ,OAAM,IAAI,YAAY,gBAAgB,EACpC,SAAS,qDACV,CAAC;AAGJ,UAAO,KAAK,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,SAAS,EAAkC,CAAC;IAClF;;;;;AAgBJ,QAAO;EACL,iBAXsB;EAYtB,oBAPyB,EAAE,IAAI,eAAe;EAQ9C;EACA;EACD"}
+{"version":3,"file":"init.server.mjs","names":[],"sources":["../../../../src/modules/router/handler/init.server.ts"],"sourcesContent":["import \"server-cli-only\";\n\nimport { os } from \"@orpc/server\";\nimport type { Permission } from \"@/modules/auth/lib/permissions\";\nimport type { TDatabaseSchema } from \"@/modules/config/db/types\";\nimport { ServerError } from \"../lib/error.server\";\nimport type { ProtectedRPCContext, RPCContext } from \"./context.server\";\n\n/**\n * Initialize TRPC\n */\nexport function initRPC<TSchema extends TDatabaseSchema>() {\n  /**\n   * Create the router\n   */\n  const o = os.$context<RPCContext<TSchema>>();\n\n  /**\n   * Middleware function to check if the user is authenticated\n   */\n  const authMiddleware = o.middleware(async (opts) => {\n    if (!opts.context.session) {\n      throw new ServerError(\"UNAUTHORIZED\", {\n        message: \"Jou hebt geen toegang om deze actie uit te voeren\",\n      });\n    }\n\n    return opts.next({\n      context: { ...opts.context, session: opts.context.session } as ProtectedRPCContext<TSchema>,\n    });\n  });\n\n  /**\n   * Middleware function to check if the user has the required permission\n   */\n  function permissionMiddleware(permissions: Permission) {\n    /**\n     * Middleware function to check if the user has the required permission\n     */\n    return os.$context<ProtectedRPCContext<TSchema>>().middleware(async (opts) => {\n      const { success, error } = await opts.context.auth.api.userHasPermission({\n        body: {\n          userId: opts.context.session.user.id,\n          permissions,\n        },\n      });\n\n      if (error || !success) {\n        throw new ServerError(\"UNAUTHORIZED\", {\n          message: \"Jou hebt geen toegang om deze actie uit te voeren\",\n        });\n      }\n\n      return opts.next({ context: { ...opts.context } as ProtectedRPCContext<TSchema> });\n    });\n  }\n\n  /**\n   * Public procedures\n   */\n  const publicProcedure = o;\n\n  /**\n   * Protected procedures\n   */\n  const protectedProcedure = o.use(authMiddleware);\n\n  /**\n   * Export\n   */\n  return {\n    publicProcedure,\n    protectedProcedure,\n    authMiddleware,\n    permissionMiddleware,\n  };\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,UAA2C;;;;CAIzD,MAAM,IAAI,GAAG,UAA+B;;;;CAK5C,MAAM,iBAAiB,EAAE,WAAW,OAAO,SAAS;AAClD,MAAI,CAAC,KAAK,QAAQ,QAChB,OAAM,IAAI,YAAY,gBAAgB,EACpC,SAAS,qDACV,CAAC;AAGJ,SAAO,KAAK,KAAK,EACf,SAAS;GAAE,GAAG,KAAK;GAAS,SAAS,KAAK,QAAQ;GAAS,EAC5D,CAAC;GACF;;;;CAKF,SAAS,qBAAqB,aAAyB;;;;AAIrD,SAAO,GAAG,UAAwC,CAAC,WAAW,OAAO,SAAS;GAC5E,MAAM,EAAE,SAAS,UAAU,MAAM,KAAK,QAAQ,KAAK,IAAI,kBAAkB,EACvE,MAAM;IACJ,QAAQ,KAAK,QAAQ,QAAQ,KAAK;IAClC;IACD,EACF,CAAC;AAEF,OAAI,SAAS,CAAC,QACZ,OAAM,IAAI,YAAY,gBAAgB,EACpC,SAAS,qDACV,CAAC;AAGJ,UAAO,KAAK,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,SAAS,EAAkC,CAAC;IAClF;;;;;AAgBJ,QAAO;EACL,iBAXsB;EAYtB,oBAPyB,EAAE,IAAI,eAAe;EAQ9C;EACA;EACD"}

package/dist/modules/router/handler/route.server.d.mts

@@ -1,6 +1,6 @@
-import { TDatabaseSchema } from "../../config/db/types.mjs";
 import { TulipContext } from "../../config/lib/context.mjs";
 import { AnyRouter } from "@orpc/server";
+import { TDatabaseSchema } from "@/modules/config/db/types";
 
 //#region src/modules/router/handler/route.server.d.ts
 /**

package/dist/modules/storage/components/dropzone.client.d.mts

@@ -36,7 +36,7 @@ type DropzoneContentProps = {
 declare function DropzoneContent({
   children,
   className
-}: DropzoneContentProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null;
+}: DropzoneContentProps): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 /**
  * DropzoneEmptyState
  */
@@ -47,7 +47,7 @@ type DropzoneEmptyStateProps = {
 declare function DropzoneEmptyState({
   children,
   className
-}: DropzoneEmptyStateProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null;
+}: DropzoneEmptyStateProps): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 //#endregion
 export { Dropzone, DropzoneContent, DropzoneContentProps, DropzoneEmptyState, DropzoneEmptyStateProps, DropzoneProps };
 //# sourceMappingURL=dropzone.client.d.mts.map

package/dist/modules/storage/components/dropzone.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"mappings":";;;;;;;;;KAcY,aAAA,GAAgB,IAAA,CAAK,eAAA;EAC/B,GAAA,GAAM,IAAA;EACN,SAAA;EACA,MAAA,IAAU,aAAA,EAAe,IAAA,IAAQ,cAAA,EAAgB,aAAA,IAAiB,KAAA,EAAO,SAAA;EACzE,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,QAAA,CAAA;EACd,MAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KA0CJ,oBAAA;EACV,QAAA,GAAW,SAAA;EACX,SAAA;AAAA;AAAA,iBAKc,eAAA,CAAA;EAAkB,QAAA;EAAU;AAAA,GAAa,oBAAA,qCAAoB,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KA8BjE,uBAAA;EACV,QAAA,GAAW,SAAA;EACX,SAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EAAqB,QAAA;EAAU;AAAA,GAAa,uBAAA,qCAAuB,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dropzone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"mappings":";;;;;;;;;KAcY,aAAA,GAAgB,IAAA,CAAK,eAAA;EAC/B,GAAA,GAAM,IAAA;EACN,SAAA;EACA,MAAA,IAAU,aAAA,EAAe,IAAA,IAAQ,cAAA,EAAgB,aAAA,IAAiB,KAAA,EAAO,SAAA;EACzE,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,QAAA,CAAA;EACd,MAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KA0CJ,oBAAA;EACV,QAAA,GAAW,SAAA;EACX,SAAA;AAAA;AAAA,iBAKc,eAAA,CAAA;EAAkB,QAAA;EAAU;AAAA,GAAa,oBAAA,qCAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA;;;;KA8BjE,uBAAA;EACV,QAAA,GAAW,SAAA;EACX,SAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EAAqB,QAAA;EAAU;AAAA,GAAa,uBAAA,qCAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA"}

package/dist/modules/storage/components/dropzone.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { UploadIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport type { DropEvent, DropzoneOptions, FileRejection } from \"react-dropzone\";\nimport { useDropzone } from \"react-dropzone\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { renderBytes } from \"@/modules/storage/lib/helpers\";\nimport { DropzoneContext, useDropzoneContext } from \"./dropzone-context.client\";\n\n/**\n * Dropzone\n */\nexport type DropzoneProps = Omit<DropzoneOptions, \"onDrop\"> & {\n  src?: File[];\n  className?: string;\n  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;\n  children?: ReactNode;\n};\n\nexport function Dropzone({\n  accept,\n  maxFiles = 1,\n  maxSize,\n  minSize,\n  onDrop,\n  onError,\n  disabled,\n  src,\n  className,\n  children,\n  ...props\n}: DropzoneProps) {\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\n    accept,\n    maxFiles,\n    maxSize,\n    minSize,\n    onError,\n    disabled,\n    onDrop: (acceptedFiles, fileRejections, event) => {\n      if (fileRejections.length > 0) {\n        const message = fileRejections.at(0)?.errors.at(0)?.message;\n        onError?.(new Error(message));\n        return;\n      }\n      onDrop?.(acceptedFiles, fileRejections, event);\n    },\n    ...props,\n  });\n\n  return (\n    <DropzoneContext key={JSON.stringify(src)} value={{ src, accept, maxSize, minSize, maxFiles }}>\n      <Button\n        className={cn(\n          \"relative h-auto w-full flex-col overflow-hidden p-8\",\n          isDragActive && \"outline-none ring-1 ring-ring\",\n          className,\n        )}\n        disabled={disabled}\n        type=\"button\"\n        variant=\"outline\"\n        {...getRootProps()}\n      >\n        <input {...getInputProps()} disabled={disabled} />\n        {children}\n      </Button>\n    </DropzoneContext>\n  );\n}\n\n/**\n * DropzoneContent\n */\nexport type DropzoneContentProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nconst maxLabelItems = 3;\n\nexport function DropzoneContent({ children, className }: DropzoneContentProps) {\n  const { src } = useDropzoneContext();\n  if (!src) return null;\n\n  if (children) return children;\n\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n        <UploadIcon size={16} />\n      </div>\n\n      <p className=\"my-2 w-full truncate font-medium text-sm\">\n        {src.length > maxLabelItems\n          ? `${new Intl.ListFormat(\"en\").format(\n              src.slice(0, maxLabelItems).map((file) => file.name),\n            )} and ${src.length - maxLabelItems} more`\n          : new Intl.ListFormat(\"en\").format(src.map((file) => file.name))}\n      </p>\n\n      <p className=\"w-full text-wrap text-muted-foreground text-xs\">\n        Drag and drop or click to replace\n      </p>\n    </div>\n  );\n}\n\n/**\n * DropzoneEmptyState\n */\nexport type DropzoneEmptyStateProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nexport function DropzoneEmptyState({ children, className }: DropzoneEmptyStateProps) {\n  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();\n  if (src) {\n    return null;\n  }\n  if (children) {\n    return children;\n  }\n  let caption = \"\";\n  if (accept) {\n    caption += \"Accepts \";\n    caption += new Intl.ListFormat(\"en\").format(Object.keys(accept));\n  }\n  if (minSize && maxSize) {\n    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;\n  } else if (minSize) {\n    caption += ` at least ${renderBytes(minSize)}`;\n  } else if (maxSize) {\n    caption += ` less than ${renderBytes(maxSize)}`;\n  }\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n        <UploadIcon size={16} />\n      </div>\n      <p className=\"my-2 w-full truncate text-wrap font-medium text-sm\">\n        Upload {maxFiles === 1 ? \"a file\" : \"files\"}\n      </p>\n      <p className=\"w-full truncate text-wrap text-muted-foreground text-xs\">\n        Drag and drop or click to upload\n      </p>\n      {caption && <p className=\"text-wrap text-muted-foreground text-xs\">{caption}.</p>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,SAAS,EACvB,QACA,WAAW,GACX,SACA,SACA,QACA,SACA,UACA,KACA,WACA,UACA,GAAG,SACa;CAChB,MAAM,EAAE,cAAc,eAAe,iBAAiB,YAAY;EAChE;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,eAAe,gBAAgB,UAAU;AAChD,OAAI,eAAe,SAAS,GAAG;IAC7B,MAAM,UAAU,eAAe,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE;AACpD,cAAU,IAAI,MAAM,QAAQ,CAAC;AAC7B;;AAEF,YAAS,eAAe,gBAAgB,MAAM;;EAEhD,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC;EAA0C,OAAO;GAAE;GAAK;GAAQ;GAAS;GAAS;GAAU;YAC3F,qBAAC;GACC,WAAW,GACT,uDACA,gBAAgB,iCAChB,UACD;GACS;GACV,MAAK;GACL,SAAQ;GACR,GAAI,cAAc;cAElB,oBAAC;IAAM,GAAI,eAAe;IAAY;KAAY,EACjD;IACM;IAdW,KAAK,UAAU,IAAI,CAevB;;AAYtB,MAAM,gBAAgB;AAEtB,SAAgB,gBAAgB,EAAE,UAAU,aAAmC;CAC7E,MAAM,EAAE,QAAQ,oBAAoB;AACpC,KAAI,CAAC,IAAK,QAAO;AAEjB,KAAI,SAAU,QAAO;AAErB,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GAEN,oBAAC;IAAE,WAAU;cACV,IAAI,SAAS,gBACV,GAAG,IAAI,KAAK,WAAW,KAAK,CAAC,OAC3B,IAAI,MAAM,GAAG,cAAc,CAAC,KAAK,SAAS,KAAK,KAAK,CACrD,CAAC,OAAO,IAAI,SAAS,cAAc,SACpC,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,IAAI,KAAK,SAAS,KAAK,KAAK,CAAC;KAChE;GAEJ,oBAAC;IAAE,WAAU;cAAiD;KAE1D;;GACA;;AAYV,SAAgB,mBAAmB,EAAE,UAAU,aAAsC;CACnF,MAAM,EAAE,KAAK,QAAQ,SAAS,SAAS,aAAa,oBAAoB;AACxE,KAAI,IACF,QAAO;AAET,KAAI,SACF,QAAO;CAET,IAAI,UAAU;AACd,KAAI,QAAQ;AACV,aAAW;AACX,aAAW,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,OAAO,KAAK,OAAO,CAAC;;AAElE,KAAI,WAAW,QACb,YAAW,YAAY,YAAY,QAAQ,CAAC,OAAO,YAAY,QAAQ;UAC9D,QACT,YAAW,aAAa,YAAY,QAAQ;UACnC,QACT,YAAW,cAAc,YAAY,QAAQ;AAE/C,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GACN,qBAAC;IAAE,WAAU;eAAqD,WACxD,aAAa,IAAI,WAAW;KAClC;GACJ,oBAAC;IAAE,WAAU;cAA0D;KAEnE;GACH,WAAW,qBAAC;IAAE,WAAU;eAA2C,SAAQ;KAAK;;GAC7E"}
+{"version":3,"file":"dropzone.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { UploadIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport type { DropEvent, DropzoneOptions, FileRejection } from \"react-dropzone\";\nimport { useDropzone } from \"react-dropzone\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { renderBytes } from \"../lib/helpers\";\nimport { DropzoneContext, useDropzoneContext } from \"./dropzone-context.client\";\n\n/**\n * Dropzone\n */\nexport type DropzoneProps = Omit<DropzoneOptions, \"onDrop\"> & {\n  src?: File[];\n  className?: string;\n  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;\n  children?: ReactNode;\n};\n\nexport function Dropzone({\n  accept,\n  maxFiles = 1,\n  maxSize,\n  minSize,\n  onDrop,\n  onError,\n  disabled,\n  src,\n  className,\n  children,\n  ...props\n}: DropzoneProps) {\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\n    accept,\n    maxFiles,\n    maxSize,\n    minSize,\n    onError,\n    disabled,\n    onDrop: (acceptedFiles, fileRejections, event) => {\n      if (fileRejections.length > 0) {\n        const message = fileRejections.at(0)?.errors.at(0)?.message;\n        onError?.(new Error(message));\n        return;\n      }\n      onDrop?.(acceptedFiles, fileRejections, event);\n    },\n    ...props,\n  });\n\n  return (\n    <DropzoneContext key={JSON.stringify(src)} value={{ src, accept, maxSize, minSize, maxFiles }}>\n      <Button\n        className={cn(\n          \"relative h-auto w-full flex-col overflow-hidden p-8\",\n          isDragActive && \"outline-none ring-1 ring-ring\",\n          className,\n        )}\n        disabled={disabled}\n        type=\"button\"\n        variant=\"outline\"\n        {...getRootProps()}\n      >\n        <input {...getInputProps()} disabled={disabled} />\n        {children}\n      </Button>\n    </DropzoneContext>\n  );\n}\n\n/**\n * DropzoneContent\n */\nexport type DropzoneContentProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nconst maxLabelItems = 3;\n\nexport function DropzoneContent({ children, className }: DropzoneContentProps) {\n  const { src } = useDropzoneContext();\n  if (!src) return null;\n\n  if (children) return children;\n\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n        <UploadIcon size={16} />\n      </div>\n\n      <p className=\"my-2 w-full truncate font-medium text-sm\">\n        {src.length > maxLabelItems\n          ? `${new Intl.ListFormat(\"en\").format(\n              src.slice(0, maxLabelItems).map((file) => file.name),\n            )} and ${src.length - maxLabelItems} more`\n          : new Intl.ListFormat(\"en\").format(src.map((file) => file.name))}\n      </p>\n\n      <p className=\"w-full text-wrap text-muted-foreground text-xs\">\n        Drag and drop or click to replace\n      </p>\n    </div>\n  );\n}\n\n/**\n * DropzoneEmptyState\n */\nexport type DropzoneEmptyStateProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nexport function DropzoneEmptyState({ children, className }: DropzoneEmptyStateProps) {\n  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();\n  if (src) {\n    return null;\n  }\n  if (children) {\n    return children;\n  }\n  let caption = \"\";\n  if (accept) {\n    caption += \"Accepts \";\n    caption += new Intl.ListFormat(\"en\").format(Object.keys(accept));\n  }\n  if (minSize && maxSize) {\n    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;\n  } else if (minSize) {\n    caption += ` at least ${renderBytes(minSize)}`;\n  } else if (maxSize) {\n    caption += ` less than ${renderBytes(maxSize)}`;\n  }\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n        <UploadIcon size={16} />\n      </div>\n      <p className=\"my-2 w-full truncate text-wrap font-medium text-sm\">\n        Upload {maxFiles === 1 ? \"a file\" : \"files\"}\n      </p>\n      <p className=\"w-full truncate text-wrap text-muted-foreground text-xs\">\n        Drag and drop or click to upload\n      </p>\n      {caption && <p className=\"text-wrap text-muted-foreground text-xs\">{caption}.</p>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,SAAS,EACvB,QACA,WAAW,GACX,SACA,SACA,QACA,SACA,UACA,KACA,WACA,UACA,GAAG,SACa;CAChB,MAAM,EAAE,cAAc,eAAe,iBAAiB,YAAY;EAChE;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,eAAe,gBAAgB,UAAU;AAChD,OAAI,eAAe,SAAS,GAAG;IAC7B,MAAM,UAAU,eAAe,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE;AACpD,cAAU,IAAI,MAAM,QAAQ,CAAC;AAC7B;;AAEF,YAAS,eAAe,gBAAgB,MAAM;;EAEhD,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC;EAA0C,OAAO;GAAE;GAAK;GAAQ;GAAS;GAAS;GAAU;YAC3F,qBAAC;GACC,WAAW,GACT,uDACA,gBAAgB,iCAChB,UACD;GACS;GACV,MAAK;GACL,SAAQ;GACR,GAAI,cAAc;cAElB,oBAAC;IAAM,GAAI,eAAe;IAAY;KAAY,EACjD;IACM;IAdW,KAAK,UAAU,IAAI,CAevB;;AAYtB,MAAM,gBAAgB;AAEtB,SAAgB,gBAAgB,EAAE,UAAU,aAAmC;CAC7E,MAAM,EAAE,QAAQ,oBAAoB;AACpC,KAAI,CAAC,IAAK,QAAO;AAEjB,KAAI,SAAU,QAAO;AAErB,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GAEN,oBAAC;IAAE,WAAU;cACV,IAAI,SAAS,gBACV,GAAG,IAAI,KAAK,WAAW,KAAK,CAAC,OAC3B,IAAI,MAAM,GAAG,cAAc,CAAC,KAAK,SAAS,KAAK,KAAK,CACrD,CAAC,OAAO,IAAI,SAAS,cAAc,SACpC,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,IAAI,KAAK,SAAS,KAAK,KAAK,CAAC;KAChE;GAEJ,oBAAC;IAAE,WAAU;cAAiD;KAE1D;;GACA;;AAYV,SAAgB,mBAAmB,EAAE,UAAU,aAAsC;CACnF,MAAM,EAAE,KAAK,QAAQ,SAAS,SAAS,aAAa,oBAAoB;AACxE,KAAI,IACF,QAAO;AAET,KAAI,SACF,QAAO;CAET,IAAI,UAAU;AACd,KAAI,QAAQ;AACV,aAAW;AACX,aAAW,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,OAAO,KAAK,OAAO,CAAC;;AAElE,KAAI,WAAW,QACb,YAAW,YAAY,YAAY,QAAQ,CAAC,OAAO,YAAY,QAAQ;UAC9D,QACT,YAAW,aAAa,YAAY,QAAQ;UACnC,QACT,YAAW,cAAc,YAAY,QAAQ;AAE/C,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GACN,qBAAC;IAAE,WAAU;eAAqD,WACxD,aAAa,IAAI,WAAW;KAClC;GACJ,oBAAC;IAAE,WAAU;cAA0D;KAEnE;GACH,WAAW,qBAAC;IAAE,WAAU;eAA2C,SAAQ;KAAK;;GAC7E"}

package/dist/modules/storage/components/image-grid.client.d.mts

@@ -1,4 +1,4 @@
-import { FileNode } from "../lib/validators.mjs";
+import { StorageAsset } from "../lib/validators.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 
@@ -7,7 +7,7 @@ import { ComponentProps } from "react";
  * Image Grid
  */
 type ImageGridProps = ComponentProps<"div"> & {
-  nodes: FileNode[];
+  assets: StorageAsset[];
   disabled?: boolean;
   moveAction: (params: {
     fromIndex: number;
@@ -21,7 +21,7 @@ type ImageGridProps = ComponentProps<"div"> & {
   };
 };
 declare function ImageGrid({
-  nodes,
+  assets,
   moveAction,
   optimistic,
   disabled,

package/dist/modules/storage/components/image-grid.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"image-grid.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"mappings":";;;;;;;;KA4CK,cAAA,GAAiB,cAAA;EACpB,KAAA,EAAO,QAAA;EACP,QAAA;EACA,UAAA,GAAa,MAAA;IAAU,SAAA;IAAmB,OAAA;EAAA,MAAsB,OAAA;EAChE,UAAA;IACE,IAAA,IAAQ,MAAA;MAAU,SAAA;MAAmB,OAAA;IAAA,MAAsB,OAAA;EAAA;AAAA;AAAA,iBAI/C,SAAA,CAAA;EAAY,KAAA;EAAO,UAAA;EAAY,UAAA;EAAY,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsK/E,iBAAA,CAAkB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"image-grid.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"mappings":";;;;;;;;KA4CK,cAAA,GAAiB,cAAA;EACpB,MAAA,EAAQ,YAAA;EACR,QAAA;EACA,UAAA,GAAa,MAAA;IAAU,SAAA;IAAmB,OAAA;EAAA,MAAsB,OAAA;EAChE,UAAA;IACE,IAAA,IAAQ,MAAA;MAAU,SAAA;MAAmB,OAAA;IAAA,MAAsB,OAAA;EAAA;AAAA;AAAA,iBAI/C,SAAA,CAAA;EAAY,MAAA;EAAQ,UAAA;EAAY,UAAA;EAAY,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyKhF,iBAAA,CAAkB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/modules/storage/components/image-grid.client.mjs

@@ -3,28 +3,28 @@
 import { Icons } from "../../../components/common/icons.mjs";
 import { cn } from "../../../lib/utils/cn.mjs";
 import { Button } from "../../../components/ui/button.mjs";
-import { getFileUrl, imageLoader } from "../lib/helpers.mjs";
+import { getAssetURL } from "../lib/helpers.mjs";
 import { Skeleton } from "../../../components/ui/skeleton.mjs";
 import { Input } from "../../../components/ui/input.mjs";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../../components/ui/carousel.client.mjs";
 import { Dialog, DialogContent, DialogTrigger } from "../../../components/ui/dialog.client.mjs";
 import { Card } from "../../../components/ui/card.mjs";
 import { useAction } from "../../../lib/hooks/use-action.mjs";
+import { StorageImage } from "./image.client.mjs";
 import { useUploadZone } from "./upload-zone-context.client.mjs";
 import { GripIcon, UploadIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import Image$1 from "next/image";
 import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 
 //#region src/modules/storage/components/image-grid.client.tsx
-function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }) {
+function ImageGrid({ assets, moveAction, optimistic, disabled, ...props }) {
 	const uploadZone = useUploadZone();
-	const images = nodes.flatMap((node) => ({
-		...node,
-		url: getFileUrl(node.id)
+	const images = assets.flatMap((asset) => ({
+		...asset,
+		url: getAssetURL(asset.id)
 	}));
 	const [current, setCurrent] = React.useState(0);
 	const { setNodeRef } = useDroppable({ id: "image-grid" });
@@ -66,11 +66,11 @@ function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }) {
 				children: /* @__PURE__ */ jsxs(SortableContext, {
 					items: images.map((image) => image.id),
 					strategy: rectSortingStrategy,
-					children: [images.map((node, index) => /* @__PURE__ */ jsx(ImageGridItem, {
-						node,
+					children: [images.map((asset, index) => /* @__PURE__ */ jsx(ImageGridItem, {
+						asset,
 						index,
 						setCurrent
-					}, node.id)), !disabled && /* @__PURE__ */ jsxs("label", {
+					}, asset.id)), !disabled && /* @__PURE__ */ jsxs("label", {
 						htmlFor: "file-upload",
 						className: "relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-muted-foreground border-dashed bg-muted hover:border-primary",
 						children: [/* @__PURE__ */ jsx(UploadIcon, { className: "h-8 w-8" }), /* @__PURE__ */ jsx(Input, {
@@ -97,13 +97,12 @@ function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }) {
 						className: "md:max-h-[80vh]",
 						children: images.map(({ id, url }) => /* @__PURE__ */ jsx(CarouselItem, {
 							className: "overflow-hidden rounded-xl",
-							children: /* @__PURE__ */ jsx(Image$1, {
+							children: /* @__PURE__ */ jsx(StorageImage, {
 								src: url,
 								alt: "Image Preview",
 								width: 1920,
 								height: 1080,
-								className: "h-full w-full rounded-xl object-contain",
-								loader: imageLoader
+								className: "h-full w-full rounded-xl object-contain"
 							})
 						}, id))
 					}),
@@ -114,27 +113,26 @@ function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }) {
 		})]
 	});
 }
-function ImageGridItem({ node, index, setCurrent }) {
+function ImageGridItem({ asset, index, setCurrent }) {
 	const uploadZone = useUploadZone();
-	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: asset.id });
 	return /* @__PURE__ */ jsx(Card, {
-		id: node.id,
+		id: asset.id,
 		ref: setNodeRef,
 		style: {
 			transform: CSS.Transform.toString(transform),
 			transition
 		},
-		className: cn("group relative aspect-square w-full", node.isPending && "opacity-30"),
-		children: !node.isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		className: cn("group relative aspect-square w-full", asset.status === "pending" && "opacity-30"),
+		children: asset.status === "ready" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(DialogTrigger, {
 				onClick: () => setCurrent(index),
-				children: /* @__PURE__ */ jsx(Image$1, {
-					src: node.url,
+				children: /* @__PURE__ */ jsx(StorageImage, {
+					src: asset.url,
 					alt: "Image Preview",
 					width: 100,
 					height: 100,
-					className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain",
-					loader: imageLoader
+					className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain"
 				})
 			}),
 			/* @__PURE__ */ jsx(Button, {
@@ -150,7 +148,7 @@ function ImageGridItem({ node, index, setCurrent }) {
 				type: "button",
 				variant: "destructive",
 				size: "icon",
-				onClick: () => uploadZone.onRemove([node.id]),
+				onClick: () => uploadZone.onRemove([asset.id]),
 				className: "absolute top-2 left-2 hidden p-1 group-hover:flex",
 				children: /* @__PURE__ */ jsx(Icons.trash, { className: "size-4" })
 			})

package/dist/modules/storage/components/image-grid.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-grid.client.mjs","names":["Image"],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { GripIcon, UploadIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport React, { type ComponentProps } from \"react\";\nimport { Icons } from \"@/components/common/icons\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel.client\";\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog.client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useAction } from \"@/lib/entry.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { getFileUrl, imageLoader } from \"../lib/helpers\";\nimport type { FileNode } from \"../lib/validators\";\nimport { useUploadZone } from \"./upload-zone-context.client\";\n\n/**\n * Image Grid\n */\ntype ImageGridProps = ComponentProps<\"div\"> & {\n  nodes: FileNode[];\n  disabled?: boolean;\n  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;\n  optimistic?: {\n    move?: (params: { fromIndex: number; toIndex: number }) => Promise<void> | void;\n  };\n};\n\nexport function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }: ImageGridProps) {\n  const uploadZone = useUploadZone();\n\n  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));\n\n  const [current, setCurrent] = React.useState<number>(0);\n\n  const { setNodeRef } = useDroppable({ id: \"image-grid\" });\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const moveMuration = useAction({\n    mutationFn: async ({ active, over }: DragEndEvent) => {\n      if (!moveAction) return Promise.resolve();\n\n      const activeId = active.id;\n      const overId = over?.id;\n      if (!activeId || !overId || activeId === overId) return Promise.resolve();\n\n      const fromIndex = images.findIndex((image) => image.id === activeId);\n      const toIndex = images.findIndex((image) => image.id === overId);\n\n      await optimistic?.move?.({ fromIndex, toIndex });\n      await moveAction({ fromIndex, toIndex });\n    },\n    onSuccess: async () => {\n      setCurrent(0);\n      await uploadZone.optimistic?.invalidate?.();\n    },\n    onError: (error) => {\n      console.error(\"Error moving image:\", error);\n    },\n  });\n\n  return (\n    <Dialog {...props}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={moveMuration.mutate}\n      >\n        <div\n          ref={setNodeRef}\n          className=\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\"\n        >\n          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>\n            {images.map((node, index) => (\n              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />\n            ))}\n\n            {!disabled && (\n              <label\n                htmlFor=\"file-upload\"\n                className=\"relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-muted-foreground border-dashed bg-muted hover:border-primary\"\n              >\n                <UploadIcon className=\"h-8 w-8\" />\n                <Input\n                  id=\"file-upload\"\n                  type=\"file\"\n                  accept=\"image/jpeg, image/png, image/webp, image/gif\"\n                  className=\"absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0\"\n                  multiple\n                  onChange={(e) => {\n                    if (!e.target.files) return;\n                    return Array.from(e.target.files).map(uploadZone.onUpload);\n                  }}\n                />\n              </label>\n            )}\n          </SortableContext>\n        </div>\n      </DndContext>\n\n      <Carousel className=\"w-full\" opts={{ startIndex: current }}>\n        <DialogContent className=\"border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]\">\n          <CarouselContent className=\"md:max-h-[80vh]\">\n            {images.map(({ id, url }) => (\n              <CarouselItem key={id} className=\"overflow-hidden rounded-xl\">\n                <Image\n                  src={url}\n                  alt=\"Image Preview\"\n                  width={1920}\n                  height={1080}\n                  className=\"h-full w-full rounded-xl object-contain\"\n                  loader={imageLoader}\n                />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          <CarouselPrevious />\n          <CarouselNext />\n        </DialogContent>\n      </Carousel>\n    </Dialog>\n  );\n}\n\n/**\n * Image Grid Item\n */\ntype ImageGridItemProps = {\n  node: FileNode & { url: string };\n  index: number;\n  setCurrent: React.Dispatch<React.SetStateAction<number>>;\n};\n\nfunction ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {\n  const uploadZone = useUploadZone();\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });\n\n  return (\n    <Card\n      id={node.id}\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={cn(\"group relative aspect-square w-full\", node.isPending && \"opacity-30\")}\n    >\n      {!node.isPending ? (\n        <>\n          <DialogTrigger onClick={() => setCurrent(index)}>\n            <Image\n              src={node.url}\n              alt=\"Image Preview\"\n              width={100}\n              height={100}\n              className=\"absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain\"\n              loader={imageLoader}\n            />\n          </DialogTrigger>\n\n          <Button\n            {...attributes}\n            {...listeners}\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"icon\"\n            className=\"absolute top-2 right-2 hidden p-1 group-hover:flex\"\n          >\n            <GripIcon className=\"size-4\" />\n          </Button>\n\n          <Button\n            type=\"button\"\n            variant=\"destructive\"\n            size=\"icon\"\n            onClick={() => uploadZone.onRemove([node.id])}\n            className=\"absolute top-2 left-2 hidden p-1 group-hover:flex\"\n          >\n            <Icons.trash className=\"size-4\" />\n          </Button>\n        </>\n      ) : (\n        <Skeleton className=\"absolute inset-0 h-full w-full rounded-lg\" />\n      )}\n    </Card>\n  );\n}\n\nexport function ImageGridSkeleton(props: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      className={cn(\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\", props.className)}\n    >\n      {Array.from({ length: 12 }).map((_, index) => (\n        <Skeleton key={index} className=\"aspect-square w-full rounded-lg\" />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"image-grid.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { GripIcon, UploadIcon } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\nimport { Icons } from \"@/components/common/icons\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel.client\";\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog.client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useAction } from \"@/lib/entry.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { getAssetURL } from \"../lib/helpers\";\nimport type { StorageAsset } from \"../lib/validators\";\nimport { StorageImage } from \"./image.client\";\nimport { useUploadZone } from \"./upload-zone-context.client\";\n\n/**\n * Image Grid\n */\ntype ImageGridProps = ComponentProps<\"div\"> & {\n  assets: StorageAsset[];\n  disabled?: boolean;\n  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;\n  optimistic?: {\n    move?: (params: { fromIndex: number; toIndex: number }) => Promise<void> | void;\n  };\n};\n\nexport function ImageGrid({ assets, moveAction, optimistic, disabled, ...props }: ImageGridProps) {\n  const uploadZone = useUploadZone();\n\n  const images = assets.flatMap((asset) => ({ ...asset, url: getAssetURL(asset.id) }));\n\n  const [current, setCurrent] = React.useState<number>(0);\n\n  const { setNodeRef } = useDroppable({ id: \"image-grid\" });\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const moveMuration = useAction({\n    mutationFn: async ({ active, over }: DragEndEvent) => {\n      if (!moveAction) return Promise.resolve();\n\n      const activeId = active.id;\n      const overId = over?.id;\n      if (!activeId || !overId || activeId === overId) return Promise.resolve();\n\n      const fromIndex = images.findIndex((image) => image.id === activeId);\n      const toIndex = images.findIndex((image) => image.id === overId);\n\n      await optimistic?.move?.({ fromIndex, toIndex });\n      await moveAction({ fromIndex, toIndex });\n    },\n    onSuccess: async () => {\n      setCurrent(0);\n      await uploadZone.optimistic?.invalidate?.();\n    },\n    onError: (error) => {\n      console.error(\"Error moving image:\", error);\n    },\n  });\n\n  return (\n    <Dialog {...props}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={moveMuration.mutate}\n      >\n        <div\n          ref={setNodeRef}\n          className=\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\"\n        >\n          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>\n            {images.map((asset, index) => (\n              <ImageGridItem key={asset.id} asset={asset} index={index} setCurrent={setCurrent} />\n            ))}\n\n            {!disabled && (\n              <label\n                htmlFor=\"file-upload\"\n                className=\"relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-muted-foreground border-dashed bg-muted hover:border-primary\"\n              >\n                <UploadIcon className=\"h-8 w-8\" />\n                <Input\n                  id=\"file-upload\"\n                  type=\"file\"\n                  accept=\"image/jpeg, image/png, image/webp, image/gif\"\n                  className=\"absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0\"\n                  multiple\n                  onChange={(e) => {\n                    if (!e.target.files) return;\n                    return Array.from(e.target.files).map(uploadZone.onUpload);\n                  }}\n                />\n              </label>\n            )}\n          </SortableContext>\n        </div>\n      </DndContext>\n\n      <Carousel className=\"w-full\" opts={{ startIndex: current }}>\n        <DialogContent className=\"border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]\">\n          <CarouselContent className=\"md:max-h-[80vh]\">\n            {images.map(({ id, url }) => (\n              <CarouselItem key={id} className=\"overflow-hidden rounded-xl\">\n                <StorageImage\n                  src={url}\n                  alt=\"Image Preview\"\n                  width={1920}\n                  height={1080}\n                  className=\"h-full w-full rounded-xl object-contain\"\n                />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          <CarouselPrevious />\n          <CarouselNext />\n        </DialogContent>\n      </Carousel>\n    </Dialog>\n  );\n}\n\n/**\n * Image Grid Item\n */\ntype ImageGridItemProps = {\n  asset: StorageAsset & { url: string };\n  index: number;\n  setCurrent: React.Dispatch<React.SetStateAction<number>>;\n};\n\nfunction ImageGridItem({ asset, index, setCurrent }: ImageGridItemProps) {\n  const uploadZone = useUploadZone();\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n    id: asset.id,\n  });\n\n  return (\n    <Card\n      id={asset.id}\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={cn(\n        \"group relative aspect-square w-full\",\n        asset.status === \"pending\" && \"opacity-30\",\n      )}\n    >\n      {asset.status === \"ready\" ? (\n        <>\n          <DialogTrigger onClick={() => setCurrent(index)}>\n            <StorageImage\n              src={asset.url}\n              alt=\"Image Preview\"\n              width={100}\n              height={100}\n              className=\"absolute inset-0 h-full w-full cursor-pointer rounded-lg bg-muted object-contain\"\n            />\n          </DialogTrigger>\n\n          <Button\n            {...attributes}\n            {...listeners}\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"icon\"\n            className=\"absolute top-2 right-2 hidden p-1 group-hover:flex\"\n          >\n            <GripIcon className=\"size-4\" />\n          </Button>\n\n          <Button\n            type=\"button\"\n            variant=\"destructive\"\n            size=\"icon\"\n            onClick={() => uploadZone.onRemove([asset.id])}\n            className=\"absolute top-2 left-2 hidden p-1 group-hover:flex\"\n          >\n            <Icons.trash className=\"size-4\" />\n          </Button>\n        </>\n      ) : (\n        <Skeleton className=\"absolute inset-0 h-full w-full rounded-lg\" />\n      )}\n    </Card>\n  );\n}\n\nexport function ImageGridSkeleton(props: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      className={cn(\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\", props.className)}\n    >\n      {Array.from({ length: 12 }).map((_, index) => (\n        <Skeleton key={index} className=\"aspect-square w-full rounded-lg\" />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/modules/storage/components/image.client.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ImageProps } from "next/image";
+
+//#region src/modules/storage/components/image.client.d.ts
+declare function StorageImage(props: Omit<ImageProps, "loader">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StorageImage };
+//# sourceMappingURL=image.client.d.mts.map

package/dist/modules/storage/components/image.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/image.client.tsx"],"mappings":";;;;iBAKgB,YAAA,CAAa,KAAA,EAAO,IAAA,CAAK,UAAA,cAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/modules/storage/components/image.client.mjs

@@ -0,0 +1,17 @@
+"use client";
+
+import { imageLoader } from "../lib/helpers.mjs";
+import { jsx } from "react/jsx-runtime";
+import Image from "next/image";
+
+//#region src/modules/storage/components/image.client.tsx
+function StorageImage(props) {
+	return /* @__PURE__ */ jsx(Image, {
+		...props,
+		loader: imageLoader
+	});
+}
+
+//#endregion
+export { StorageImage };
+//# sourceMappingURL=image.client.mjs.map

package/dist/modules/storage/components/image.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/image.client.tsx"],"sourcesContent":["\"use client\";\n\nimport Image, { type ImageProps } from \"next/image\";\nimport { imageLoader } from \"../lib/helpers\";\n\nexport function StorageImage(props: Omit<ImageProps, \"loader\">) {\n  return <Image {...props} loader={imageLoader} />;\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,aAAa,OAAmC;AAC9D,QAAO,oBAAC;EAAM,GAAI;EAAO,QAAQ;GAAe"}

package/dist/modules/storage/components/upload-button.client.d.mts

@@ -0,0 +1,12 @@
+import { Button } from "../../../components/ui/button.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/storage/components/upload-button.client.d.ts
+declare function UploadButton({
+  className,
+  ...props
+}: ComponentProps<typeof Button>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { UploadButton };
+//# sourceMappingURL=upload-button.client.d.mts.map

package/dist/modules/storage/components/upload-button.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-button.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-button.client.tsx"],"mappings":";;;;;iBASgB,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,QAAsB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/modules/storage/components/upload-button.client.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { useUploadZone } from "./upload-zone-context.client.mjs";
+import { UploadIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/storage/components/upload-button.client.tsx
+function UploadButton({ className, ...props }) {
+	const { onUpload } = useUploadZone();
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cn("relative gap-2", className),
+		children: [
+			/* @__PURE__ */ jsx(UploadIcon, { className: "h-3 w-3" }),
+			/* @__PURE__ */ jsx("span", { children: "Upload" }),
+			/* @__PURE__ */ jsx(Input, {
+				type: "file",
+				className: "absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0",
+				multiple: true,
+				onChange: (e) => {
+					if (!e.target.files) return;
+					Array.from(e.target.files).forEach(onUpload);
+				}
+			})
+		]
+	});
+}
+
+//#endregion
+export { UploadButton };
+//# sourceMappingURL=upload-button.client.mjs.map

package/dist/modules/storage/components/upload-button.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-button.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/upload-button.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { UploadIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useUploadZone } from \"./upload-zone-context.client\";\n\nexport function UploadButton({ className, ...props }: ComponentProps<typeof Button>) {\n  const { onUpload } = useUploadZone();\n\n  return (\n    <Button {...props} className={cn(\"relative gap-2\", className)}>\n      <UploadIcon className=\"h-3 w-3\" />\n      <span>Upload</span>\n\n      <Input\n        type=\"file\"\n        className=\"absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0\"\n        multiple\n        onChange={(e) => {\n          if (!e.target.files) return;\n          Array.from(e.target.files).forEach(onUpload);\n        }}\n      />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAwC;CACnF,MAAM,EAAE,aAAa,eAAe;AAEpC,QACE,qBAAC;EAAO,GAAI;EAAO,WAAW,GAAG,kBAAkB,UAAU;;GAC3D,oBAAC,cAAW,WAAU,YAAY;GAClC,oBAAC,oBAAK,WAAa;GAEnB,oBAAC;IACC,MAAK;IACL,WAAU;IACV;IACA,WAAW,MAAM;AACf,SAAI,CAAC,EAAE,OAAO,MAAO;AACrB,WAAM,KAAK,EAAE,OAAO,MAAM,CAAC,QAAQ,SAAS;;KAE9C;;GACK"}

package/dist/modules/storage/components/upload-zone-context.client.d.mts

@@ -1,5 +1,5 @@
-import { FileNode, Node } from "../lib/validators.mjs";
-import { UploadClient } from "../lib/create-upload.client.mjs";
+import { StorageAsset } from "../lib/validators.mjs";
+import { UploadClient } from "../lib/upload.client.mjs";
 import React from "react";
 
 //#region src/modules/storage/components/upload-zone-context.client.d.ts
@@ -8,10 +8,10 @@ import React from "react";
  */
 type UploadZoneContextValue = {
   uploadClient: UploadClient;
-  onUpload: (file: File) => Promise<Node>;
+  onUpload: (file: File) => Promise<StorageAsset>;
   onRemove: (ids: string[]) => Promise<void>;
   optimistic?: {
-    add?: (newValue: FileNode) => Promise<void> | void;
+    add?: (newValue: Omit<StorageAsset, "id" | "key" | "bucket" | "provider" | "createdAt" | "updatedAt">) => Promise<void> | void;
     remove?: (ids: string[]) => Promise<void> | void;
     invalidate?: () => Promise<void> | void;
     cancel?: () => Promise<void> | void;
@@ -21,7 +21,7 @@ type UploadZoneContextValue = {
 /**
  * Upload Zone Context
  */
-declare const UploadZoneContext: React.Context<UploadZoneContextValue>;
+declare const UploadZoneContext: React.Context<UploadZoneContextValue | null>;
 /**
  * Upload Zone Hook
  */

package/dist/modules/storage/components/upload-zone-context.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone-context.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"mappings":";;;;;;;AASA;KAAY,sBAAA;EACV,YAAA,EAAc,YAAA;EACd,QAAA,GAAW,IAAA,EAAM,IAAA,KAAS,OAAA,CAAQ,IAAA;EAClC,QAAA,GAAW,GAAA,eAAkB,OAAA;EAC7B,UAAA;IACE,GAAA,IAAO,QAAA,EAAU,QAAA,KAAa,OAAA;IAC9B,MAAA,IAAU,GAAA,eAAkB,OAAA;IAC5B,UAAA,SAAmB,OAAA;IACnB,MAAA,SAAe,OAAA;EAAA;EAEjB,QAAA;AAAA;;;;cAQW,iBAAA,EAAiB,KAAA,CAAA,OAAA,CAAA,sBAAA;;;;iBAKd,aAAA,CAAA,GAAa,sBAAA"}
+{"version":3,"file":"upload-zone-context.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"mappings":";;;;;;;AASA;KAAY,sBAAA;EACV,YAAA,EAAc,YAAA;EACd,QAAA,GAAW,IAAA,EAAM,IAAA,KAAS,OAAA,CAAQ,YAAA;EAClC,QAAA,GAAW,GAAA,eAAkB,OAAA;EAC7B,UAAA;IACE,GAAA,IACE,QAAA,EAAU,IAAA,CACR,YAAA,wEAGC,OAAA;IACL,MAAA,IAAU,GAAA,eAAkB,OAAA;IAC5B,UAAA,SAAmB,OAAA;IACnB,MAAA,SAAe,OAAA;EAAA;EAEjB,QAAA;AAAA;;;;cAMW,iBAAA,EAAiB,KAAA,CAAA,OAAA,CAAA,sBAAA;;;;iBAKd,aAAA,CAAA,GAAa,sBAAA"}

package/dist/modules/storage/components/upload-zone-context.client.mjs

@@ -6,13 +6,13 @@ import React from "react";
 /**
 * Upload Zone Context
 */
-const UploadZoneContext = React.createContext({});
+const UploadZoneContext = React.createContext(null);
 /**
 * Upload Zone Hook
 */
 function useUploadZone() {
 	const context = React.useContext(UploadZoneContext);
-	if (!context) throw new Error("useUploadZone must be used within an UploadZoneProvider");
+	if (!context) throw new Error("useUploadZone must be used within an UploadZoneContext provider");
 	return context;
 }
 

package/dist/modules/storage/components/upload-zone-context.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone-context.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { UploadClient } from \"../lib/create-upload.client\";\nimport type { FileNode, Node } from \"../lib/validators\";\n\n/**\n * Upload Zone Context Value\n */\nexport type UploadZoneContextValue = {\n  uploadClient: UploadClient;\n  onUpload: (file: File) => Promise<Node>;\n  onRemove: (ids: string[]) => Promise<void>;\n  optimistic?: {\n    add?: (newValue: FileNode) => Promise<void> | void;\n    remove?: (ids: string[]) => Promise<void> | void;\n    invalidate?: () => Promise<void> | void;\n    cancel?: () => Promise<void> | void;\n  };\n  disabled?: boolean;\n  // updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;\n  // invalidateQuery: () => Promise<void> | void;\n};\n\n/**\n * Upload Zone Context\n */\nexport const UploadZoneContext = React.createContext({} as UploadZoneContextValue);\n\n/**\n * Upload Zone Hook\n */\nexport function useUploadZone() {\n  const context = React.useContext(UploadZoneContext);\n  if (!context) {\n    throw new Error(\"useUploadZone must be used within an UploadZoneProvider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;AA2BA,MAAa,oBAAoB,MAAM,cAAc,EAAE,CAA2B;;;;AAKlF,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,0DAA0D;AAE5E,QAAO"}
+{"version":3,"file":"upload-zone-context.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { UploadClient } from \"../lib/upload.client\";\nimport type { StorageAsset } from \"../lib/validators\";\n\n/**\n * Upload Zone Context Value\n */\nexport type UploadZoneContextValue = {\n  uploadClient: UploadClient;\n  onUpload: (file: File) => Promise<StorageAsset>;\n  onRemove: (ids: string[]) => Promise<void>;\n  optimistic?: {\n    add?: (\n      newValue: Omit<\n        StorageAsset,\n        \"id\" | \"key\" | \"bucket\" | \"provider\" | \"createdAt\" | \"updatedAt\"\n      >,\n    ) => Promise<void> | void;\n    remove?: (ids: string[]) => Promise<void> | void;\n    invalidate?: () => Promise<void> | void;\n    cancel?: () => Promise<void> | void;\n  };\n  disabled?: boolean;\n};\n\n/**\n * Upload Zone Context\n */\nexport const UploadZoneContext = React.createContext<UploadZoneContextValue | null>(null);\n\n/**\n * Upload Zone Hook\n */\nexport function useUploadZone() {\n  const context = React.useContext(UploadZoneContext);\n  if (!context) {\n    throw new Error(\"useUploadZone must be used within an UploadZoneContext provider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;AA8BA,MAAa,oBAAoB,MAAM,cAA6C,KAAK;;;;AAKzF,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,kEAAkE;AAEpF,QAAO"}