@opexa/portal-components 0.0.277 → 0.0.279

package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

package/dist/components/TransactionRecords/TableFilters.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createListCollection } from '@ark-ui/react/collection';
-import { parseDate } from '@ark-ui/react/date-picker';
+import { parseDate, useDatePickerContext } from '@ark-ui/react/date-picker';
 import { endOfDay, startOfDay } from 'date-fns';
 import { useState } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
 import { z } from 'zod';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
@@ -21,7 +23,7 @@ const DEPOSIT_TYPES = [
     'MAYA',
     'MANUAL',
     'ONLINE_BANK',
-    'QR_PH'
+    'QR_PH',
 ];
 const DEPOSIT_TYPES_MAP = {
     BANK: 'Bank',
@@ -165,36 +167,35 @@ export function TableFilters(props) {
             handleChange({ transactionType });
         },
     });
-    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [timestamp?.start, timestamp?.end]
-                    .filter(Boolean)
-                    .map((d) => parseDate(d)), onValueChange: (details) => {
-                    setTimestamp({
-                        start: details.value.at(0)?.toDate(deviceTimezone),
-                        end: details.value.at(1)?.toDate(deviceTimezone),
-                    });
-                }, onOpenChange: (details) => {
-                    if (details.open)
-                        return;
-                    if (timestamp)
-                        return;
-                    setTab('all');
-                }, selectionMode: "range", closeOnSelect: false, positioning: {
-                    gutter: 20,
-                    placement: 'bottom',
-                }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
-                            const value = TabDefinition.parse(details.value);
-                            if (value === 'today') {
-                                const now = new Date();
-                                setTimestamp({
-                                    start: startOfDay(now),
-                                    end: endOfDay(now),
-                                });
-                            }
-                            else {
-                                setTimestamp(null);
-                            }
-                            setTab(value);
-                        }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.depositType && (_jsxs(Select.Root, { collection: depositTypeCollection, value: depositType ? [depositType] : [], onValueChange: (details) => {
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (!open && !timestamp)
+                setTab('all');
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                    const value = TabDefinition.parse(details.value);
+                    if (value === 'today') {
+                        const now = new Date();
+                        setTimestamp({
+                            start: startOfDay(now),
+                            end: endOfDay(now),
+                        });
+                    }
+                    else {
+                        setTimestamp(null);
+                    }
+                    setTab(value);
+                }, className: "w-full lg:w-fit", ids: {
+                    item(value) {
+                        return `segment-group:item:${value}`;
+                    },
+                }, children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "custom", className: "w-full lg:w-auto", onClick: () => {
+                            disclosure.setOpen(true);
+                        }, children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(RangeDatePicker, { value: {
+                    start: timestamp?.start,
+                    end: timestamp?.end,
+                }, onValueChange: setTimestamp, open: disclosure.open, onOpenChange: disclosure.setOpen }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.depositType && (_jsxs(Select.Root, { collection: depositTypeCollection, value: depositType ? [depositType] : [], onValueChange: (details) => {
                     const value = z
                         .enum(DEPOSIT_TYPES)
                         .safeParse(details.value.at(0)).data;
@@ -241,3 +242,42 @@ export function TableFilters(props) {
                                                 e.stopPropagation();
                                             }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: transactionTypeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: transactionTypeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] }))] }));
 }
+function RangeDatePicker(props) {
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: (value) => {
+            props.onValueChange?.(value);
+        },
+    });
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: (open) => {
+            props.onOpenChange?.(open);
+        },
+    });
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    return (_jsx(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [value?.start, value?.end]
+            .filter(Boolean)
+            .map((d) => parseDate(d)), onValueChange: (details) => {
+            setValue({
+                start: details.value.at(0)?.toDate(deviceTimezone),
+                end: details.value.at(1)?.toDate(deviceTimezone),
+            });
+        }, open: open, onOpenChange: (details) => {
+            setOpen(details.open);
+        }, selectionMode: "range", closeOnSelect: false, fixedWeeks: true, numOfMonths: desktop ? 2 : 1, positioning: {
+            gutter: 16,
+            placement: 'bottom',
+        }, ids: {
+            control: 'segment-group:item:custom',
+        }, children: _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { className: "p-0", children: _jsxs("div", { className: "flex", children: [_jsx(RangeDatePickerCalendar, { monthOffset: 0 }), desktop && _jsx(RangeDatePickerCalendar, { monthOffset: 1 })] }) }) }) }) }));
+}
+function RangeDatePickerCalendar({ monthOffset }) {
+    const datePicker = useDatePickerContext();
+    const offset = datePicker.getOffset({
+        months: monthOffset,
+    });
+    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "text-text-secondary-700 text-base font-semibold", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
+}

package/dist/handlers/postTransformIdFrontImage.d.ts

@@ -0,0 +1,3 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+export declare function postTransformIdFrontImage(request: NextRequest): Promise<NextResponse<unknown>>;

package/dist/handlers/postTransformIdFrontImage.js

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server';
+import sharp from 'sharp';
+import { z } from 'zod';
+import { validateFile } from '../utils/validateFile.js';
+const TransformIdFrontImageDefinition = z.object({
+    image: z.instanceof(File).superRefine((file, context) => {
+        const error = validateFile(file);
+        if (error) {
+            context.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: error.message,
+            });
+        }
+    }),
+    cropTop: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropLeft: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropWidth: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropHeight: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+});
+export async function postTransformIdFrontImage(request) {
+    const form = await request.formData();
+    const parsed = TransformIdFrontImageDefinition.safeParse({
+        image: form.get('image'),
+        cropTop: form.get('cropTop'),
+        cropLeft: form.get('cropLeft'),
+        cropWidth: form.get('cropWidth'),
+        cropHeight: form.get('cropHeight'),
+    });
+    if (!parsed.success) {
+        return NextResponse.json({
+            ok: false,
+            message: parsed.error.issues[0].message,
+            __error: parsed.error,
+        }, { status: 400 });
+    }
+    const file = parsed.data.image;
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const cropped = await sharp(buffer)
+        .extract({
+        top: parsed.data.cropTop,
+        left: parsed.data.cropLeft,
+        width: parsed.data.cropWidth,
+        height: parsed.data.cropHeight,
+    })
+        .resize({
+        fit: 'contain',
+        width: 1200,
+        height: 757,
+        kernel: sharp.kernel.lanczos3,
+        withoutEnlargement: true,
+    })
+        .modulate({
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
+        .sharpen({
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
+    })
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
+    })
+        .toBuffer();
+    return new NextResponse(cropped, {
+        headers: {
+            'Content-Type': 'image/webp',
+            'Content-Disposition': `inline; filename="id-front-${Date.now()}.webp"`,
+        },
+    });
+}

package/dist/handlers/postTransformSelfieImage.d.ts

@@ -0,0 +1,3 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+export declare function postTransformSelfieImage(request: NextRequest): Promise<NextResponse<unknown>>;

package/dist/handlers/postTransformSelfieImage.js

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server';
+import sharp from 'sharp';
+import { z } from 'zod';
+import { validateFile } from '../utils/validateFile.js';
+const TransformSelfieImageDefinition = z.object({
+    image: z.instanceof(File).superRefine((file, context) => {
+        const error = validateFile(file);
+        if (error) {
+            context.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: error.message,
+            });
+        }
+    }),
+    cropTop: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropLeft: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropWidth: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropHeight: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+});
+export async function postTransformSelfieImage(request) {
+    const form = await request.formData();
+    const parsed = TransformSelfieImageDefinition.safeParse({
+        image: form.get('image'),
+        cropTop: form.get('cropTop'),
+        cropLeft: form.get('cropLeft'),
+        cropWidth: form.get('cropWidth'),
+        cropHeight: form.get('cropHeight'),
+    });
+    if (!parsed.success) {
+        return NextResponse.json({
+            ok: false,
+            message: parsed.error.issues[0].message,
+            __error: parsed.error,
+        }, { status: 400 });
+    }
+    const file = parsed.data.image;
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const cropped = await sharp(buffer)
+        .extract({
+        top: parsed.data.cropTop,
+        left: parsed.data.cropLeft,
+        width: parsed.data.cropWidth,
+        height: parsed.data.cropHeight,
+    })
+        .resize({
+        fit: 'contain',
+        width: 1200,
+        height: 1200,
+        kernel: sharp.kernel.lanczos3,
+        withoutEnlargement: true,
+    })
+        .modulate({
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
+        .sharpen({
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
+    })
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
+    })
+        .toBuffer();
+    return new NextResponse(cropped, {
+        headers: {
+            'Content-Type': 'image/webp',
+            'Content-Disposition': `inline; filename="selfie-${Date.now()}.webp"`,
+        },
+    });
+}