@pagamio/frontend-commons-lib 0.8.287 → 0.8.288

package/lib/components/ui/SidebarHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers/utils';
+import { useSidebar } from '../sidebar-v2';
+import Loader from './Loader';
+const colorMap = {
+    warning: { bg: 'bg-warning/15', bgExpanded: 'bg-warning/10', text: 'text-warning' },
+    success: { bg: 'bg-success/15', bgExpanded: 'bg-success/10', text: 'text-success' },
+    primary: { bg: 'bg-primary/15', bgExpanded: 'bg-primary/10', text: 'text-primary' },
+    destructive: { bg: 'bg-destructive/15', bgExpanded: 'bg-destructive/10', text: 'text-destructive' },
+};
+export function SidebarPortalBadge({ icon: Icon, label, color = 'primary', isLoading = false, }) {
+    const { open } = useSidebar();
+    const colors = colorMap[color];
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center p-4", children: _jsx(Loader, { size: "md" }) }));
+    }
+    if (!open) {
+        return (_jsx("div", { className: "flex items-center justify-center p-2", children: _jsx("div", { className: cn('rounded-md p-2', colors.bg), children: _jsx(Icon, { className: cn('h-5 w-5', colors.text) }) }) }));
+    }
+    return (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('rounded-md border px-3 py-2', colors.bgExpanded), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('h-4 w-4', colors.text) }), _jsx("span", { className: cn('text-sm font-semibold', colors.text), children: label })] }) }) }));
+}

package/lib/components/ui/StatCard.d.ts

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const statCardVariants: (props?: ({
-    variant?: "primary" | "light" | "dark" | "green" | "teal" | "orange" | "light-orange" | "light-teal" | "light-green" | null | undefined;
+    variant?: "green" | "orange" | "teal" | "dark" | "light" | "primary" | "light-orange" | "light-teal" | "light-green" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const iconContainerVariants: (props?: ({
-    variant?: "primary" | "light" | "dark" | "green" | "teal" | "orange" | "light-orange" | "light-teal" | "light-green" | null | undefined;
+    variant?: "green" | "orange" | "teal" | "dark" | "light" | "primary" | "light-orange" | "light-teal" | "light-green" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const changeIndicatorVariants: (props?: ({

package/lib/components/ui/StepIndicator.d.ts

@@ -0,0 +1,7 @@
+export interface StepIndicatorProps {
+    stepNumber: number;
+    title: string;
+    subtitle?: string;
+    className?: string;
+}
+export declare function StepIndicator({ stepNumber, title, className }: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/StepIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers/utils';
+export function StepIndicator({ stepNumber, title, className }) {
+    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground", children: stepNumber }), _jsx("h3", { className: "text-sm font-semibold text-foreground", children: title })] }));
+}

package/lib/components/ui/StepProgress.d.ts

@@ -0,0 +1,13 @@
+export interface StepProgressItem {
+    id: string;
+    name: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+}
+export interface StepProgressProps {
+    steps: StepProgressItem[];
+    currentStepIndex: number;
+    className?: string;
+}
+export declare function StepProgress({ steps, currentStepIndex, className }: StepProgressProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/StepProgress.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiCheck } from 'react-icons/hi';
+import { Fragment } from 'react';
+import { cn } from '../../helpers/utils';
+export function StepProgress({ steps, currentStepIndex, className }) {
+    return (_jsx("nav", { "aria-label": "Progress", className: cn('mx-auto w-full max-w-lg px-6 py-4', className), children: _jsx("ol", { role: "list", className: "flex w-full items-start", children: steps.map((step, stepIdx) => {
+                const status = stepIdx < currentStepIndex ? 'complete' : stepIdx === currentStepIndex ? 'current' : 'upcoming';
+                return (_jsxs(Fragment, { children: [_jsxs("li", { className: "flex flex-col items-center gap-1.5", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-full transition-all', status === 'complete'
+                                        ? 'bg-primary'
+                                        : status === 'current'
+                                            ? 'border-2 border-primary/30 bg-primary/10 ring-4 ring-primary/20'
+                                            : 'bg-muted'), children: status === 'complete' ? (_jsx(HiCheck, { className: "h-5 w-5 text-white", "aria-hidden": "true" })) : (_jsx(step.icon, { className: cn('h-5 w-5', status === 'current' ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" })) }), _jsx("span", { className: cn('whitespace-nowrap text-xs font-medium transition-colors', status === 'current'
+                                        ? 'text-primary'
+                                        : status === 'complete'
+                                            ? 'text-foreground'
+                                            : 'text-muted-foreground'), children: step.name })] }), stepIdx !== steps.length - 1 && (_jsx("div", { className: "mt-5 flex flex-1 items-center px-2", children: _jsx("div", { className: cn('h-0.5 w-full rounded-full transition-all', status === 'complete' ? 'bg-primary' : 'bg-muted') }) }))] }, step.id));
+            }) }) }));
+}

package/lib/components/ui/TierConfigBuilder.d.ts

@@ -0,0 +1,13 @@
+export interface TierLevel {
+    name: string;
+    threshold: number;
+    multiplier: number;
+    benefits: string[];
+}
+export type TierConfig = Omit<TierLevel, 'name'>;
+interface TierConfigBuilderProps {
+    value: Record<string, TierConfig> | null;
+    onChange: (config: Record<string, TierConfig>) => void;
+}
+export default function TierConfigBuilder({ value, onChange }: TierConfigBuilderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ui/TierConfigBuilder.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiPlus, HiTrash } from 'react-icons/hi';
+import { useRef, useState } from 'react';
+import Button from './Button';
+import { Card } from './Card';
+import Input from './Input';
+const DEFAULT_TIERS = [
+    {
+        name: 'BRONZE',
+        threshold: 0,
+        multiplier: 1,
+        benefits: ['Birthday discount', 'Email updates'],
+    },
+    {
+        name: 'SILVER',
+        threshold: 5000,
+        multiplier: 1.25,
+        benefits: ['Bronze benefits', 'Early sale access', 'Free shipping on orders over R500'],
+    },
+    {
+        name: 'GOLD',
+        threshold: 15000,
+        multiplier: 1.5,
+        benefits: ['Silver benefits', 'Priority customer support', 'Exclusive member events'],
+    },
+    {
+        name: 'PLATINUM',
+        threshold: 50000,
+        multiplier: 2,
+        benefits: ['Gold benefits', 'Personal account manager', 'VIP lounge access'],
+    },
+];
+export default function TierConfigBuilder({ value, onChange }) {
+    // Ref to scroll to the last tier card after adding a new one
+    const lastTierRef = useRef(null);
+    const [isAdding, setIsAdding] = useState(false);
+    // Convert value object to array for easier manipulation
+    const [tiers, setTiers] = useState(() => {
+        if (!value || Object.keys(value).length === 0) {
+            return DEFAULT_TIERS;
+        }
+        return Object.entries(value).map(([name, config]) => ({
+            name,
+            ...config,
+        }));
+    });
+    const handleTierChange = (index, field, val) => {
+        const updated = [...tiers];
+        if (field === 'benefits') {
+            updated[index][field] = val;
+        }
+        else if (field === 'threshold' || field === 'multiplier') {
+            // Allow empty string for editing, will be converted to 0 on blur
+            updated[index] = { ...updated[index], [field]: val === '' ? 0 : val };
+        }
+        else {
+            updated[index] = { ...updated[index], [field]: val };
+        }
+        setTiers(updated);
+        // Convert back to object format for parent
+        const configObject = updated.reduce((acc, tier) => {
+            const { name, ...rest } = tier;
+            acc[name] = rest;
+            return acc;
+        }, {});
+        onChange(configObject);
+    };
+    const handleAddTier = () => {
+        setIsAdding(true);
+        const newTier = {
+            name: `TIER_${tiers.length + 1}`,
+            threshold: 0,
+            multiplier: 1,
+            benefits: [],
+        };
+        const updated = [...tiers, newTier];
+        setTiers(updated);
+        // Scroll to the new tier after a brief delay to allow rendering
+        setTimeout(() => {
+            lastTierRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+            setIsAdding(false);
+        }, 100);
+    };
+    const handleRemoveTier = (index) => {
+        const updated = tiers.filter((_, i) => i !== index);
+        setTiers(updated);
+        const configObject = updated.reduce((acc, tier) => {
+            const { name, ...rest } = tier;
+            acc[name] = rest;
+            return acc;
+        }, {});
+        onChange(configObject);
+    };
+    const handleBenefitChange = (tierIndex, benefitIndex, value) => {
+        const updated = [...tiers];
+        updated[tierIndex].benefits[benefitIndex] = value;
+        setTiers(updated);
+        const configObject = updated.reduce((acc, tier) => {
+            const { name, ...rest } = tier;
+            acc[name] = rest;
+            return acc;
+        }, {});
+        onChange(configObject);
+    };
+    const handleAddBenefit = (tierIndex) => {
+        const updated = [...tiers];
+        updated[tierIndex].benefits.push('');
+        setTiers(updated);
+    };
+    const handleRemoveBenefit = (tierIndex, benefitIndex) => {
+        const updated = [...tiers];
+        updated[tierIndex].benefits = updated[tierIndex].benefits.filter((_, i) => i !== benefitIndex);
+        setTiers(updated);
+        const configObject = updated.reduce((acc, tier) => {
+            const { name, ...rest } = tier;
+            acc[name] = rest;
+            return acc;
+        }, {});
+        onChange(configObject);
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: "Customer Tiers" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Define tier levels based on lifetime spending" })] }), _jsxs(Button, { onClick: handleAddTier, color: "light", size: "md", disabled: isAdding, children: [_jsx(HiPlus, { className: "mr-1 h-4 w-4" }), isAdding ? 'Adding...' : 'Add Tier'] })] }), _jsx("div", { className: "space-y-3", children: tiers.map((tier, tierIndex) => (_jsx(Card, { ref: tierIndex === tiers.length - 1 ? lastTierRef : null, children: _jsxs("div", { className: "space-y-3 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Input, { value: tier.name, onChange: (e) => handleTierChange(tierIndex, 'name', e.target.value.toUpperCase()), placeholder: "TIER NAME", className: "w-40 font-medium uppercase" }), tiers.length > 1 && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleRemoveTier(tierIndex), className: "text-destructive hover:text-destructive", type: "button", children: _jsx(HiTrash, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-foreground", children: "Minimum Spending Threshold" }), _jsx(Input, { type: "number", value: tier.threshold === 0 ? '' : tier.threshold.toString(), onChange: (e) => {
+                                                    const value = e.target.value;
+                                                    handleTierChange(tierIndex, 'threshold', value === '' ? 0 : Number(value));
+                                                }, placeholder: "0", min: "0" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-foreground", children: "Points Multiplier" }), _jsx(Input, { type: "number", step: "0.1", value: tier.multiplier === 0 ? '' : tier.multiplier.toString(), onChange: (e) => {
+                                                    const value = e.target.value;
+                                                    handleTierChange(tierIndex, 'multiplier', value === '' ? 0 : Number(value));
+                                                }, placeholder: "1.0", min: "0.1" })] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-foreground", children: "Benefits" }), _jsxs(Button, { onClick: () => handleAddBenefit(tierIndex), color: "light", size: "sm", type: "button", children: [_jsx(HiPlus, { className: "mr-1 h-3 w-3" }), "Add Benefit"] })] }), _jsxs("div", { className: "space-y-2", children: [tier.benefits.map((benefit, benefitIndex) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: benefit, onChange: (e) => handleBenefitChange(tierIndex, benefitIndex, e.target.value), placeholder: "Enter benefit description", className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleRemoveBenefit(tierIndex, benefitIndex), className: "text-muted-foreground hover:text-destructive", type: "button", children: _jsx(HiTrash, { className: "h-4 w-4" }) })] }, benefitIndex))), tier.benefits.length === 0 && (_jsx("p", { className: "text-xs italic text-muted-foreground", children: "No benefits defined" }))] })] })] }) }, tier.name))) })] }));
+}

package/lib/components/ui/index.d.ts

@@ -1,3 +1,7 @@
+export { AnimatedBackground, default as AnimatedBackgroundDefault } from './AnimatedBackground';
+export type { AnimatedBackgroundProps } from './AnimatedBackground';
+export { CartDrawer } from './CartDrawer';
+export type { CartDrawerProps } from './CartDrawer';
 export * from './Avatar';
 export * from './Command';
 export * from './Dialog';
@@ -59,3 +63,27 @@ export type { NotificationModalProps } from './NotificationModal';
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './Tooltip';
 export { default as TimerBadge } from './TimerBadge';
 export type { TimerBadgeProps } from './TimerBadge';
+export { Badge, default as BadgeDefault } from './Badge';
+export type { BadgeProps } from './Badge';
+export { RadioPillGroup } from './RadioPillGroup';
+export type { RadioPillGroupProps, RadioPillOption } from './RadioPillGroup';
+export { StepIndicator } from './StepIndicator';
+export type { StepIndicatorProps } from './StepIndicator';
+export { default as BarcodeImageDisplay } from './BarcodeImageDisplay';
+export type { BarcodeImageDisplayProps } from './BarcodeImageDisplay';
+export { default as CustomAttributeBuilder } from './CustomAttributeBuilder';
+export type { CustomAttributeBuilderProps, CustomAttribute } from './CustomAttributeBuilder';
+export { default as TierConfigBuilder } from './TierConfigBuilder';
+export type { TierLevel, TierConfig } from './TierConfigBuilder';
+export { InlineLoginForm } from './InlineLoginForm';
+export type { InlineLoginFormProps } from './InlineLoginForm';
+export { InlineRegisterForm } from './InlineRegisterForm';
+export type { InlineRegisterFormProps, RegisterFormData, RegisterResult } from './InlineRegisterForm';
+export { StepProgress } from './StepProgress';
+export type { StepProgressProps, StepProgressItem } from './StepProgress';
+export { ProgressIndicatorButton } from './ProgressIndicatorButton';
+export type { ProgressIndicatorButtonProps, ProgressIndicatorItem } from './ProgressIndicatorButton';
+export { SidebarPortalBadge } from './SidebarHeader';
+export type { SidebarPortalBadgeProps } from './SidebarHeader';
+export { default as CardInputForm } from './CardInputForm';
+export type { CardInputFormProps, CardDetails } from './CardInputForm';

package/lib/components/ui/index.js

@@ -1,3 +1,6 @@
+export { AnimatedBackground, default as AnimatedBackgroundDefault } from './AnimatedBackground';
+// CartDrawer - generic slide-out cart shell
+export { CartDrawer } from './CartDrawer';
 export * from './Avatar';
 export * from './Command';
 export * from './Dialog';
@@ -59,3 +62,27 @@ export { default as NotificationModal } from './NotificationModal';
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './Tooltip';
 // TimerBadge - elapsed time with urgency coloring (green → amber → red)
 export { default as TimerBadge } from './TimerBadge';
+// Badge - styled pill/tag component
+export { Badge, default as BadgeDefault } from './Badge';
+// RadioPillGroup - selectable pill grid
+export { RadioPillGroup } from './RadioPillGroup';
+// StepIndicator - numbered step display
+export { StepIndicator } from './StepIndicator';
+// BarcodeImageDisplay - barcode viewer with download
+export { default as BarcodeImageDisplay } from './BarcodeImageDisplay';
+// CustomAttributeBuilder - dynamic key-value form builder
+export { default as CustomAttributeBuilder } from './CustomAttributeBuilder';
+// TierConfigBuilder - loyalty tier configuration form
+export { default as TierConfigBuilder } from './TierConfigBuilder';
+// InlineLoginForm - embeddable login form
+export { InlineLoginForm } from './InlineLoginForm';
+// InlineRegisterForm - embeddable registration form
+export { InlineRegisterForm } from './InlineRegisterForm';
+// StepProgress - icon step progress bar (onboarding, wizards)
+export { StepProgress } from './StepProgress';
+// ProgressIndicatorButton - navbar progress badge with tooltip
+export { ProgressIndicatorButton } from './ProgressIndicatorButton';
+// SidebarPortalBadge - sidebar portal badge with icon/label/color
+export { SidebarPortalBadge } from './SidebarHeader';
+// CardInputForm - credit/debit card input with validation
+export { default as CardInputForm } from './CardInputForm';

package/lib/helpers/validations.d.ts

@@ -27,8 +27,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -36,8 +36,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }>, {
@@ -45,8 +45,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -54,8 +54,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }>, {
@@ -63,8 +63,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -72,8 +72,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    emailAddress: string;
     confirmPassword: string;
+    emailAddress: string;
     profile: string;
     role?: string | undefined;
 }>;