@myrjfa/ui 2.0.1 → 2.1.1

package/dist/misc/pwa-install-button.js

@@ -0,0 +1,158 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+/**
+ * #9 — Floating PWA Install Button
+ * Premium banner aligned with Trippeaze brand.
+ * - Only shows on mobile (beforeinstallprompt)
+ * - Auto-hides after 10 s
+ * - Animated entrance / exit
+ */
+export function PwaInstallButton() {
+    const [show, setShow] = useState(false);
+    const [hiding, setHiding] = useState(false);
+    const promptRef = useRef(null);
+    const timerRef = useRef(null);
+    const dismiss = () => {
+        setHiding(true);
+        setTimeout(() => setShow(false), 350);
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        if (!isMobile)
+            return;
+        const handler = (e) => {
+            e.preventDefault();
+            promptRef.current = e;
+            setShow(true);
+            setHiding(false);
+            timerRef.current = setTimeout(dismiss, 10000);
+        };
+        window.addEventListener('beforeinstallprompt', handler);
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handler);
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    const handleInstall = async () => {
+        if (!promptRef.current)
+            return;
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        promptRef.current.prompt();
+        const { outcome } = await promptRef.current.userChoice;
+        if (outcome === 'accepted')
+            dismiss();
+    };
+    if (!show)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+                @keyframes tpz-slide-up {
+                    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+                    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+                }
+                @keyframes tpz-slide-down {
+                    from { opacity: 1; transform: translateX(-50%) translateY(0); }
+                    to   { opacity: 0; transform: translateX(-50%) translateY(20px); }
+                }
+                @keyframes tpz-orbit {
+                    from { transform: rotate(0deg) translateX(22px) rotate(0deg); }
+                    to   { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
+                }
+                @keyframes tpz-shimmer {
+                    0%   { background-position: -200% center; }
+                    100% { background-position: 200% center; }
+                }
+            ` }), _jsxs("div", { style: {
+                    position: 'fixed',
+                    bottom: '88px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 9999,
+                    animation: hiding
+                        ? 'tpz-slide-down 0.35s cubic-bezier(.4,0,.2,1) forwards'
+                        : 'tpz-slide-up 0.4s cubic-bezier(.16,1,.3,1) forwards',
+                    // Prevent layout shift during animation
+                    willChange: 'transform, opacity',
+                }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            inset: '-3px',
+                            borderRadius: '9999px',
+                            background: 'linear-gradient(135deg, #f97316, #fb923c, #22d3ee, #0891b2)',
+                            opacity: 0.3,
+                            filter: 'blur(8px)',
+                            zIndex: 0,
+                        } }), _jsxs("button", { onClick: handleInstall, style: {
+                            position: 'relative',
+                            zIndex: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            padding: '10px 18px 10px 12px',
+                            borderRadius: '9999px',
+                            border: '1px solid rgba(0,0,0,0.06)',
+                            background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+                            boxShadow: '0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9)',
+                            cursor: 'pointer',
+                            whiteSpace: 'nowrap',
+                            backdropFilter: 'blur(8px)',
+                        }, children: [_jsx("div", { style: {
+                                    width: '36px',
+                                    height: '36px',
+                                    borderRadius: '50%',
+                                    overflow: 'hidden',
+                                    flexShrink: 0,
+                                    boxShadow: '0 2px 8px rgba(249,115,22,0.2)',
+                                }, children: _jsx(Image, { src: "/images/logoicon.webp", alt: "Trippeaze", width: 36, height: 36, style: { objectFit: 'cover' } }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '1px' }, children: [_jsx("span", { style: {
+                                            fontSize: '11px',
+                                            fontWeight: 500,
+                                            letterSpacing: '0.08em',
+                                            textTransform: 'uppercase',
+                                            color: '#64748b',
+                                            lineHeight: 1,
+                                        }, children: "Get the app" }), _jsx("span", { style: {
+                                            fontSize: '15px',
+                                            fontWeight: 700,
+                                            letterSpacing: '-0.01em',
+                                            lineHeight: 1.2,
+                                            // Shimmer text using logo colors
+                                            background: 'linear-gradient(90deg, #fb923c, #fbbf24, #22d3ee, #fb923c)',
+                                            backgroundSize: '200% auto',
+                                            WebkitBackgroundClip: 'text',
+                                            WebkitTextFillColor: 'transparent',
+                                            backgroundClip: 'text',
+                                            animation: 'tpz-shimmer 3s linear infinite',
+                                        }, children: "Install Trippeaze" })] }), _jsx("div", { style: {
+                                    marginLeft: '4px',
+                                    width: '28px',
+                                    height: '28px',
+                                    borderRadius: '50%',
+                                    background: 'linear-gradient(135deg, #f97316, #dc2626)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    flexShrink: 0,
+                                    boxShadow: '0 2px 8px rgba(249,115,22,0.5)',
+                                }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: _jsx("path", { d: "M7 2v7M4 6.5l3 3 3-3M2.5 11h9", stroke: "white", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsx("button", { onClick: (e) => { e.stopPropagation(); dismiss(); }, "aria-label": "Dismiss", style: {
+                            position: 'absolute',
+                            top: '-6px',
+                            right: '-6px',
+                            zIndex: 2,
+                            width: '20px',
+                            height: '20px',
+                            borderRadius: '50%',
+                            background: '#ffffff',
+                            border: '1px solid rgba(0,0,0,0.1)',
+                            color: '#64748b',
+                            fontSize: '11px',
+                            lineHeight: '20px',
+                            textAlign: 'center',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
+                        }, children: "\u2715" })] })] }));
+}

package/dist/misc/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/misc/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAgBtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA4BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/misc/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAgBtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA6BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}

package/dist/misc/select.js

@@ -16,9 +16,9 @@ function SelectTrigger({ className, children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
-                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[310] max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md pointer-events-auto", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, onWheel: (e) => e.stopPropagation(), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-full max-h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1 overflow-y-auto touch-pan-y"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-sm font-medium", className), ...props }));

package/dist/misc/skeleton.d.ts

@@ -1,3 +1,38 @@
+import * as React from "react";
+/**
+ * Base Skeleton component
+ * Centralized pulse animation and color.
+ */
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+/** Horizontal Tile pattern */
+declare function SkeletonTile({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Vertical List pattern */
+declare function SkeletonList({ count, className }: {
+    count?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Full-page loading skeleton (Default Export)
+ * Displayed while data is loading.
+ */
+export default function LoadingSkeleton({ count }: {
+    count?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** Card skeleton for feed-style layouts */
+declare function CardSkeleton({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Feed grid skeleton (6 cards by default) */
+declare function FeedSkeleton({ count }: {
+    count?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** Page-level skeleton for detail pages (opportunity/package/blog) */
+declare function DetailPageSkeleton(): import("react/jsx-runtime").JSX.Element;
+/** Form field skeleton */
+declare function FormSkeleton({ fields }: {
+    fields?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, CardSkeleton, SkeletonTile, SkeletonList, DetailPageSkeleton, FormSkeleton, FeedSkeleton };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/misc/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/misc/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/misc/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,8BAA8B;AAC9B,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY1D;AAED,4BAA4B;AAC5B,iBAAS,YAAY,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAQrF;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAiBxE;AAED,2CAA2C;AAC3C,iBAAS,YAAY,CAAC,EAAE,SAAc,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAe/D;AAED,8CAA8C;AAC9C,iBAAS,YAAY,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAQtD;AAED,sEAAsE;AACtE,iBAAS,kBAAkB,4CA8C1B;AAED,0BAA0B;AAC1B,iBAAS,YAAY,CAAC,EAAE,MAAU,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CAYxD;AAGD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACb,CAAA"}

package/dist/misc/skeleton.js

@@ -1,6 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@myrjfa/state";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+/**
+ * Base Skeleton component
+ * Centralized pulse animation and color.
+ */
 function Skeleton({ className, ...props }) {
     return (_jsx("div", { "data-slot": "skeleton", className: cn("bg-primary/10 animate-pulse rounded-md", className), ...props }));
 }
-export { Skeleton };
+/** Horizontal Tile pattern */
+function SkeletonTile({ className }) {
+    return (_jsxs("div", { className: cn("flex gap-3 items-start p-3 rounded-lg border border-border", className), children: [_jsx(Skeleton, { className: "h-20 w-20 rounded-lg shrink-0" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" }), _jsx(Skeleton, { className: "h-5 w-24 rounded-full" })] })] }));
+}
+/** Vertical List pattern */
+function SkeletonList({ count = 4, className }) {
+    return (_jsx("div", { className: cn("space-y-3", className), children: Array.from({ length: count }).map((_, i) => (_jsx(SkeletonTile, {}, i))) }));
+}
+/**
+ * Full-page loading skeleton (Default Export)
+ * Displayed while data is loading.
+ */
+export default function LoadingSkeleton({ count = 4 }) {
+    return (_jsx("div", { className: "w-full h-screen flex items-center justify-center", children: _jsx("div", { className: "w-full max-w-2xl p-6 space-y-4", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "animate-pulse space-y-3", children: [_jsx("div", { className: "h-4 bg-muted rounded w-3/4" }), _jsx("div", { className: "h-4 bg-muted rounded w-1/2" }), _jsx("div", { className: "h-3 bg-muted rounded w-full" })] }, i))) }) }));
+}
+/** Card skeleton for feed-style layouts */
+function CardSkeleton({ className = '' }) {
+    return (_jsxs("div", { className: `rounded-xl overflow-hidden border border-border animate-pulse ${className}`, children: [_jsx("div", { className: "h-48 bg-muted w-full" }), _jsxs("div", { className: "p-4 space-y-3", children: [_jsx("div", { className: "h-4 bg-muted rounded w-3/4" }), _jsx("div", { className: "h-3 bg-muted rounded w-full" }), _jsx("div", { className: "h-3 bg-muted rounded w-5/6" }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsx("div", { className: "h-6 bg-muted rounded-full w-16" }), _jsx("div", { className: "h-6 bg-muted rounded-full w-16" })] })] })] }));
+}
+/** Feed grid skeleton (6 cards by default) */
+function FeedSkeleton({ count = 6 }) {
+    return (_jsx("div", { className: "w-full p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: Array.from({ length: count }).map((_, i) => (_jsx(CardSkeleton, {}, i))) }));
+}
+/** Page-level skeleton for detail pages (opportunity/package/blog) */
+function DetailPageSkeleton() {
+    return (_jsx("div", { className: "min-h-screen bg-slate-50 mt-15", children: _jsxs("div", { className: "container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-10", children: [_jsx("div", { className: "lg:w-80 shrink-0", children: _jsxs("div", { className: "bg-white rounded-lg shadow-sm p-4 animate-pulse space-y-3", children: [_jsx("div", { className: "h-5 bg-muted rounded w-1/2" }), [1, 2, 3, 4, 5].map(i => (_jsx("div", { className: "h-4 bg-muted rounded w-3/4" }, i)))] }) }), _jsxs("main", { className: "flex-1 lg:pr-5 flex flex-col gap-6", children: [_jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden animate-pulse", children: [_jsx("div", { className: "h-72 bg-muted" }), _jsxs("div", { className: "p-6 space-y-3", children: [_jsx("div", { className: "h-6 bg-muted rounded w-2/3" }), _jsx("div", { className: "h-4 bg-muted rounded w-1/2" })] })] }), _jsxs("div", { className: "bg-white rounded-lg shadow-sm p-6 animate-pulse space-y-4", children: [_jsx("div", { className: "h-5 bg-muted rounded w-1/4" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [1, 2, 3].map(i => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-muted rounded w-1/2" }), _jsx("div", { className: "h-3 bg-muted rounded w-3/4" })] }, i))) })] }), _jsxs("div", { className: "bg-white rounded-lg shadow-sm p-6 animate-pulse space-y-3", children: [_jsx("div", { className: "h-5 bg-muted rounded w-1/4" }), [1, 2, 3, 4].map(i => (_jsx("div", { className: "h-3 bg-muted rounded", style: { width: `${60 + Math.random() * 40}%` } }, i)))] })] })] }) }));
+}
+/** Form field skeleton */
+function FormSkeleton({ fields = 4 }) {
+    return (_jsxs("div", { className: "space-y-6", children: [Array.from({ length: fields }).map((_, i) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-1/4" }), _jsx(Skeleton, { className: "h-10 w-full" })] }, i))), _jsx(Skeleton, { className: "h-12 w-full" })] }));
+}
+// Aliases for backward compatibility or different naming preferences
+export { Skeleton, CardSkeleton, SkeletonTile, SkeletonList, DetailPageSkeleton, FormSkeleton, FeedSkeleton };

package/dist/misc/tile.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { toggleUserWishlist } from "@myrjfa/state";
-import { userAtom, userLoadingAtom } from "@myrjfa/state";
-import { cn, formatDate, truncateText } from "@myrjfa/state";
+import { toggleUserWishlist } from "@myrjfa/state/dist/lib/actions/actions";
+import { userAtom, userLoadingAtom } from "@myrjfa/state/dist/lib/userAtom";
+import { cn, formatDate, truncateText } from "@myrjfa/state/dist/lib/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { Clock, Heart, Loader2, MapPin, Star } from "lucide-react";
 import Image from "next/image";

package/dist/misc/whatsapp-help.d.ts

@@ -0,0 +1,9 @@
+/**
+ * #21 — Floating WhatsApp Help Button
+ * Fixed bottom-right pill button that opens a WhatsApp chat with support.
+ * Matches the "Need help? Chat with us" pill + green icon design.
+ */
+export declare function WhatsAppHelpButton({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=whatsapp-help.d.ts.map

package/dist/misc/whatsapp-help.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-help.d.ts","sourceRoot":"","sources":["../../src/misc/whatsapp-help.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CAyClE"}

package/dist/misc/whatsapp-help.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WhatsappIcon } from 'react-share';
+import Link from 'next/link';
+/**
+ * #21 — Floating WhatsApp Help Button
+ * Fixed bottom-right pill button that opens a WhatsApp chat with support.
+ * Matches the "Need help? Chat with us" pill + green icon design.
+ */
+export function WhatsAppHelpButton({ message }) {
+    const whatsappUrl = `https://wa.me/918482944029?text=${encodeURIComponent(message)}`;
+    return (_jsxs(Link, { href: whatsappUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "Get help on WhatsApp", className: "\n                fixed bottom-6 right-6 z-[9998]\n                flex items-center gap-0\n                rounded-full\n                bg-white\n                shadow-[0_2px_12px_rgba(0,0,0,0.15)]\n                hover:shadow-[0_4px_16px_rgba(0,0,0,0.2)]\n                border border-gray-200\n                transition-all duration-200\n                hover:scale-[1.03]\n                overflow-hidden\n                no-underline\n                group\n            ", children: [_jsx("span", { className: "\n                pl-4 pr-3 py-2.5\n                text-sm font-medium text-gray-700\n                whitespace-nowrap\n                group-hover:text-gray-900\n                transition-colors\n            ", children: "Need help? Chat with us" }), _jsx("span", { className: "flex-shrink-0 pr-0.5 py-0.5", children: _jsx(WhatsappIcon, { size: 42, round: true }) })] }));
+}

package/dist/profile/socialLink.d.ts

@@ -1,4 +1,4 @@
-export type SocialPlatformType = "instagram" | "youtube" | "linkedin" | "googleBusiness";
+import { SocialPlatformType } from "@myrjfa/state/dist/lib/utils/socialMediaUrl";
 interface SocialLinkFieldProps {
     platform: SocialPlatformType;
     url?: string;

package/dist/profile/socialLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"socialLink.d.ts","sourceRoot":"","sources":["../../src/profile/socialLink.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzF,UAAU,oBAAoB;IAC1B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvF;AAYD,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,GAAG,EACH,aAAa,EACb,oBAAoB,GACvB,EAAE,oBAAoB,kDA8CtB"}
+{"version":3,"file":"socialLink.d.ts","sourceRoot":"","sources":["../../src/profile/socialLink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AAGrG,UAAU,oBAAoB;IAC1B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvF;AAeD,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,GAAG,EACH,aAAa,EACb,oBAAoB,GACvB,EAAE,oBAAoB,kDAgFtB"}

package/dist/profile/socialLink.js

@@ -3,30 +3,60 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Input } from "../misc/input";
 import { Button } from "../misc/button";
-import { InstagramIcon, YoutubeIcon, LinkedinIcon, StoreIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { GithubIcon, InstagramIcon, StoreIcon, YoutubeIcon } from "lucide-react";
+import { normalizeSocialUrl } from "@myrjfa/state/dist/lib/utils/socialMediaUrl";
+import { FacebookIcon, LinkedinIcon, TwitterIcon } from "react-share";
 const platformConfig = {
-    instagram: { label: "Instagram", icon: InstagramIcon, color: "hover:text-pink-600" },
-    youtube: { label: "YouTube", icon: YoutubeIcon, color: "hover:text-red-600" },
-    linkedin: { label: "LinkedIn", icon: LinkedinIcon, color: "hover:text-blue-600" },
-    googleBusiness: { label: "Google Business", icon: StoreIcon, color: "hover:text-green-600" },
+    instagram: { label: "Instagram", icon: InstagramIcon, color: "hover:text-pink-600", hint: "Enter username or profile URL" },
+    youtube: { label: "YouTube", icon: YoutubeIcon, color: "hover:text-red-600", hint: "Enter @handle or profile URL" },
+    twitter: { label: "Twitter", icon: TwitterIcon, color: "hover:text-blue-600", hint: "Enter @handle or profile URL" },
+    facebook: { label: "Facebook", icon: FacebookIcon, color: "hover:text-blue-600", hint: "Enter @handle or profile URL" },
+    github: { label: "GitHub", icon: GithubIcon, color: "hover:text-blue-600", hint: "Enter @handle or profile URL" },
+    linkedin: { label: "LinkedIn", icon: LinkedinIcon, color: "hover:text-blue-600", hint: "Enter username or profile URL" },
+    googleBusiness: { label: "Google Business", icon: StoreIcon, color: "hover:text-green-600", hint: "Enter full Google Business URL" },
 };
 export function SocialLinkField({ platform, url, isCurrentUser, updateUserSocialLink, }) {
-    const [input, setInput] = useState(url);
+    const [input, setInput] = useState(url !== null && url !== void 0 ? url : "");
+    const [urlError, setUrlError] = useState(null);
     const [loading, setLoading] = useState(false);
-    const router = useRouter();
-    const { label, icon: Icon, color } = platformConfig[platform];
+    const { label, icon: Icon, color, hint } = platformConfig[platform];
+    // #13: Validate and normalize the URL when focus leaves the input
+    const handleBlur = () => {
+        if (!input.trim() || platform === "googleBusiness")
+            return;
+        const { url: normalized, error } = normalizeSocialUrl(platform, input);
+        setUrlError(error);
+        if (!error)
+            setInput(normalized); // auto-correct the field to canonical URL
+    };
+    const handleSave = async () => {
+        if (!input.trim() || !updateUserSocialLink)
+            return;
+        // Final normalization before saving
+        let finalUrl = input;
+        if (platform !== "googleBusiness") {
+            const { url: normalized, error } = normalizeSocialUrl(platform, input);
+            if (error) {
+                setUrlError(error);
+                return;
+            }
+            finalUrl = normalized;
+            setInput(normalized);
+        }
+        try {
+            setLoading(true);
+            await updateUserSocialLink(platform, finalUrl);
+            setUrlError(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
     if (isCurrentUser) {
-        return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: "url", placeholder: `${label} profile url`, value: input, onChange: (e) => setInput(e.target.value) }), updateUserSocialLink &&
-                    _jsx(Button, { disabled: loading || !input, onClick: async () => {
-                            try {
-                                setLoading(true);
-                                await updateUserSocialLink(platform, input);
-                            }
-                            finally {
-                                setLoading(false);
-                            }
-                        }, children: "Add" })] }));
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { className: `h-5 w-5 shrink-0 text-gray-400 ${color}` }), _jsx(Input, { type: "text", placeholder: hint, value: input, onChange: (e) => {
+                                setInput(e.target.value);
+                                setUrlError(null);
+                            }, onBlur: handleBlur, className: urlError ? "border-red-400 focus:ring-red-400" : "" }), _jsx(Button, { disabled: loading || !input.trim(), onClick: handleSave, children: loading ? "Adding..." : "Add" })] }), urlError && (_jsx("p", { className: "text-xs text-red-500 ml-6", children: urlError }))] }));
     }
     else if (url) {
         return (_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `text-gray-500 ${color} flex flex-row gap-1`, children: _jsx(Icon, { className: "h-5 w-5" }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrjfa/ui",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
@@ -9,6 +9,7 @@
   "description": "Shared UI components for my apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -42,7 +43,7 @@
     "embla-carousel-react": "^8.5.2",
     "emoji-picker-react": "^4.18.0",
     "leaflet": "1.9.4",
-    "pnpm": "^10.14.0",
+    "react-easy-crop": "^5.5.6",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.5.0",
     "react-leaflet": "^5.0.0",
@@ -55,11 +56,11 @@
     "lucide-react": "*",
     "next": "*",
     "react": "*",
-    "react-dom": "",
+    "react-dom": "*",
     "zod": "*"
   },
   "devDependencies": {
-    "@myrjfa/state": "2.0.1",
+    "@myrjfa/state": "2.1.1",
     "@types/leaflet": "1.9.21",
     "@types/react": "19.0.10",
     "@types/react-dom": "^19.0.4",