feat: add shadcn/ui + Tailwind CSS v4 + Huge Icons foundation

- Install tailwindcss, @tailwindcss/postcss, clsx, tailwind-merge, class-variance-authority
- Install @hugeicons/react for icons
- Install Radix UI primitives (switch, tabs, label, separator, select, dialog, checkbox, dropdown-menu, popover)
- Install sonner for toast notifications
- Create postcss.config.js with Tailwind v4 PostCSS plugin
- Create jsconfig.json with @ path alias for src/admin
- Create components.json for shadcn configuration
- Update webpack.config.js with @ resolve alias
- Create globals.css with Tailwind v4 CSS-first config + shadcn CSS variables
- Create cn() utility in lib/utils.js
- Create 17 shadcn UI components (button, input, label, checkbox, switch, tabs, alert, separator, badge, textarea, dialog, sonner, table, skeleton, select, dropdown-menu, popover)
- Create async confirm() utility replacing SweetAlert2
- Create toast utility wrapping sonner

.gitignore

@@ -9,4 +9,4 @@ coverage
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?node_modules/

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '1a2b3d6682654786741a');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '9a1a0e2d03b8d775e648');

components.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": false,
+    "tailwind": {
+        "config": "",
+        "css": "src/admin/styles/globals.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "iconLibrary": "hugeicons"
+}

jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/admin/*"]
+        }
+    },
+    "include": ["src/**/*"]
+}

package.json

@@ -15,14 +15,31 @@
     "packages-update": "wp-scripts packages-update"
   },
   "devDependencies": {
-    "@wordpress/scripts": "^27.0.0"
+    "@wordpress/scripts": "^27.0.0",
+    "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
+    "@hugeicons/react": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/postcss": "^4.2.2",
     "@wordpress/api-fetch": "^6.0.0",
     "@wordpress/components": "^25.0.0",
     "@wordpress/data": "^9.0.0",
     "@wordpress/element": "^5.0.0",
     "@wordpress/i18n": "^4.0.0",
-    "@wordpress/icons": "^9.0.0"
+    "@wordpress/icons": "^9.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+    },
+};

src/admin/components/ui/alert.js

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+
+function Alert({ className, variant = "default", ...props }) {
+    return (
+        <div
+            data-slot="alert"
+            role="alert"
+            className={cn(
+                "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+                variant === "default" && "bg-background text-foreground",
+                variant === "destructive" && "border-destructive/50 text-destructive [&>svg]:text-destructive dark:border-destructive [&>svg]:text-destructive",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertTitle({ className, ...props }) {
+    return (
+        <h5 data-slot="alert-title" className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+    );
+}
+
+function AlertDescription({ className, ...props }) {
+    return (
+        <div data-slot="alert-description" className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+    );
+}
+
+export { Alert, AlertTitle, AlertDescription };

src/admin/components/ui/badge.js

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+                outline: "text-foreground",
+                success: "border-transparent bg-green-100 text-green-800",
+                warning: "border-transparent bg-yellow-100 text-yellow-800",
+                info: "border-transparent bg-blue-100 text-blue-800",
+            },
+        },
+        defaultVariants: { variant: "default" },
+    }
+);
+
+function Badge({ className, variant, ...props }) {
+    return <div data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

src/admin/components/ui/button.js

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: { variant: "default", size: "default" },
+    }
+);
+
+function Button({ className, variant, size, ...props }) {
+    return (
+        <button data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
+    );
+}
+
+export { Button, buttonVariants };

src/admin/components/ui/checkbox.js

@@ -0,0 +1,25 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '@/lib/utils';
+
+function Checkbox({ className, checked, onCheckedChange, ...props }) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            className={cn(
+                "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5">
+                    <path d="M20 6 9 17l-5-5"/>
+                </svg>
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    );
+}
+
+export { Checkbox };

src/admin/components/ui/dialog.js

@@ -0,0 +1,86 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib/utils';
+
+function Dialog({ ...props }) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }) {
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }) {
+    return (
+        <DialogPrimitive.Overlay
+            data-slot="dialog-overlay"
+            className={cn(
+                "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function DialogContent({ className, children, ...props }) {
+    return (
+        <DialogPortal>
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                data-slot="dialog-content"
+                className={cn(
+                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    );
+}
+
+function DialogHeader({ className, ...props }) {
+    return (
+        <div data-slot="dialog-header" className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+    );
+}
+
+function DialogFooter({ className, ...props }) {
+    return (
+        <div data-slot="dialog-footer" className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+    );
+}
+
+function DialogTitle({ className, ...props }) {
+    return (
+        <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+    );
+}
+
+function DialogDescription({ className, ...props }) {
+    return (
+        <DialogPrimitive.Description data-slot="dialog-description" className={cn("text-sm text-muted-foreground", className)} {...props} />
+    );
+}
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};

src/admin/components/ui/dropdown-menu.js

@@ -0,0 +1,60 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({ ...props }) {
+    return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }) {
+    return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (
+        <DropdownMenuPrimitive.Portal>
+            <DropdownMenuPrimitive.Content
+                data-slot="dropdown-menu-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+                    className
+                )}
+                {...props}
+            />
+        </DropdownMenuPrimitive.Portal>
+    );
+}
+
+function DropdownMenuItem({ className, ...props }) {
+    return (
+        <DropdownMenuPrimitive.Item
+            data-slot="dropdown-menu-item"
+            className={cn(
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuSeparator({ className, ...props }) {
+    return (
+        <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+    );
+}
+
+function DropdownMenuLabel({ className, ...props }) {
+    return (
+        <DropdownMenuPrimitive.Label data-slot="dropdown-menu-label" className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+    );
+}
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuLabel,
+};

src/admin/components/ui/input.js

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }) {
+    return (
+        <input
+            type={type}
+            data-slot="input"
+            className={cn(
+                "flex h-9 w-full rounded-[30px] border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Input };

src/admin/components/ui/label.js

@@ -0,0 +1,18 @@
+import * as React from '@wordpress/element';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Label };

src/admin/components/ui/popover.js

@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/utils';
+
+function Popover({ ...props }) {
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                data-slot="popover-content"
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+                    className
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    );
+}
+
+export { Popover, PopoverTrigger, PopoverContent };

src/admin/components/ui/select.js

@@ -0,0 +1,103 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/utils';
+import { createRoot } from '@wordpress/element';
+
+function Select({ ...props }) {
+    return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({ className, children, ...props }) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            className={cn(
+                "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-[30px] border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50"><path d="m6 9 6 6 6-6"/></svg>
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    );
+}
+
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                data-slot="select-content"
+                className={cn(
+                    "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
+                    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}
+            >
+                <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50"><path d="m18 15-6-6-6 6"/></svg>
+                </SelectPrimitive.ScrollUpButton>
+                <SelectPrimitive.Viewport className={cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+                    {children}
+                </SelectPrimitive.Viewport>
+                <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50"><path d="m6 9 6 6 6-6"/></svg>
+                </SelectPrimitive.ScrollDownButton>
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({ className, ...props }) {
+    return (
+        <SelectPrimitive.Label data-slot="select-label" className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+    );
+}
+
+function SelectItem({ className, children, ...props }) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                <SelectPrimitive.ItemIndicator>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({ className, ...props }) {
+    return (
+        <SelectPrimitive.Separator data-slot="select-separator" className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+    );
+}
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+};

src/admin/components/ui/separator.js

@@ -0,0 +1,20 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (
+        <SeparatorPrimitive.Root
+            data-slot="separator"
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Separator };

src/admin/components/ui/skeleton.js

@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }) {
+    return (
+        <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
+    );
+}
+
+export { Skeleton };

src/admin/components/ui/sonner.js

@@ -0,0 +1,21 @@
+import { Toaster as SonnerToaster } from 'sonner';
+
+function Toaster({ ...props }) {
+    return (
+        <SonnerToaster
+            data-slot="toaster"
+            className="toaster group"
+            toastOptions={{
+                classNames: {
+                    toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+                    description: "group-[.toast]:text-muted-foreground",
+                    actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+                    cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+                },
+            }}
+            {...props}
+        />
+    );
+}
+
+export { Toaster };

src/admin/components/ui/switch.js

@@ -0,0 +1,25 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '@/lib/utils';
+
+function Switch({ className, checked, onCheckedChange, ...props }) {
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            className={cn(
+                "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+                className
+            )}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                className={cn(
+                    "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+                )}
+            />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export { Switch };

src/admin/components/ui/table.js

@@ -0,0 +1,64 @@
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }) {
+    return (
+        <div data-slot="table-container" className="relative w-full overflow-auto">
+            <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+        </div>
+    );
+}
+
+function TableHeader({ className, ...props }) {
+    return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }) {
+    return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }) {
+    return (
+        <tfoot data-slot="table-footer" className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+    );
+}
+
+function TableRow({ className, ...props }) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+            {...props}
+        />
+    );
+}
+
+function TableHead({ className, ...props }) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCell({ className, ...props }) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({ className, ...props }) {
+    return (
+        <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+    );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

src/admin/components/ui/tabs.js

@@ -0,0 +1,46 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+function Tabs({ className, ...props }) {
+    return (
+        <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
+    );
+}
+
+function TabsList({ className, ...props }) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            className={cn(
+                "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsTrigger({ className, ...props }) {
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="tabs-trigger"
+            className={cn(
+                "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsContent({ className, ...props }) {
+    return (
+        <TabsPrimitive.Content
+            data-slot="tabs-content"
+            className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)}
+            {...props}
+        />
+    );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/admin/components/ui/textarea.js

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }) {
+    return (
+        <textarea
+            data-slot="textarea"
+            className={cn(
+                "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Textarea };

src/admin/index.js

@@ -2,6 +2,7 @@
  * Formipay Admin - React Application Entry Point
  */
 
+import './styles/globals.css';
 import { render } from '@wordpress/element';
 import App from './components/App';
 import CouponMetabox from './components/coupons/CouponMetabox';

src/admin/lib/confirm.js

@@ -0,0 +1,85 @@
+import { createElement, useState, render, unmountComponentAtNode } from '@wordpress/element';
+import { Dialog, DialogOverlay, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Async confirm dialog replacing SweetAlert2's Swal.fire({ showCancelButton: true }).
+ *
+ * Usage:
+ *   const result = await confirm({ title: 'Delete?', message: 'This cannot be undone.', variant: 'destructive' });
+ *   if (result) { // user confirmed }
+ *
+ * @param {Object}  props
+ * @param {string}  props.title        - Dialog title.
+ * @param {string}  props.message      - Dialog description.
+ * @param {string}  [props.confirmText] - Label for the confirm button.
+ * @param {string}  [props.cancelText]  - Label for the cancel button.
+ * @param {string}  [props.variant]     - 'default' | 'destructive'.
+ * @returns {Promise<boolean>} Resolves true on confirm, false on cancel / dismiss.
+ */
+export async function confirm({
+    title,
+    message,
+    confirmText = __('Confirm', 'formipay'),
+    cancelText = __('Cancel', 'formipay'),
+    variant = 'default',
+} = {}) {
+    return new Promise((resolve) => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        const cleanup = (result) => {
+            unmountComponentAtNode(container);
+            container.remove();
+            resolve(result);
+        };
+
+        function ConfirmDialog() {
+            const [open, setOpen] = useState(true);
+
+            return createElement(
+                Dialog,
+                {
+                    open,
+                    onOpenChange: (value) => {
+                        if (!value) {
+                            setOpen(false);
+                            cleanup(false);
+                        }
+                    },
+                },
+                createElement(DialogOverlay),
+                createElement(
+                    DialogContent,
+                    null,
+                    createElement(
+                        DialogHeader,
+                        null,
+                        createElement(DialogTitle, null, title),
+                        createElement(DialogDescription, null, message),
+                    ),
+                    createElement(
+                        DialogFooter,
+                        null,
+                        createElement(
+                            Button,
+                            { variant: 'outline', onClick: () => cleanup(false) },
+                            cancelText,
+                        ),
+                        createElement(
+                            Button,
+                            {
+                                variant: variant === 'destructive' ? 'destructive' : 'default',
+                                onClick: () => cleanup(true),
+                            },
+                            confirmText,
+                        ),
+                    ),
+                ),
+            );
+        }
+
+        render(createElement(ConfirmDialog), container);
+    });
+}

src/admin/lib/toast.js

@@ -0,0 +1 @@
+export { toast } from 'sonner';

src/admin/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

src/admin/styles/globals.css

@@ -0,0 +1,65 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-active: var(--sidebar-active);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.546 0.245 262.881);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.546 0.245 262.881);
+    --sidebar: #2c3e50;
+    --sidebar-foreground: #bec5cb;
+    --sidebar-active: #2985f7;
+}
+
+@layer base {
+    .formipay-design-system * {
+        @apply border-border;
+    }
+}

webpack.config.js

@@ -11,4 +11,11 @@ module.exports = {
         filename: '[name].js',
         chunkFilename: '[name].[contenthash].js',
     },
+    resolve: {
+        ...defaultConfig.resolve,
+        alias: {
+            ...defaultConfig.resolve.alias,
+            '@': path.resolve(__dirname, 'src/admin'),
+        },
+    },
 };