nexstruct 1.0.0

package/templates/ui/mui/src/app/page.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+
+import MenuIcon from '@mui/icons-material/Menu';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import CodeIcon from '@mui/icons-material/Code';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ViewKanbanIcon from '@mui/icons-material/ViewKanban';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import CloseIcon from '@mui/icons-material/Close';
+
+const navLinks = [
+  { label: 'Home', href: '/' },
+  { label: 'Components', href: '/examples' },
+];
+
+const features = [
+  {
+    icon: <DashboardIcon sx={{ fontSize: 40 }} />,
+    title: '21 UI Primitives',
+    desc: 'Button, Card, Dialog, Table, Tabs, Avatar, Select, Switch, Tooltip, and more — all pre-styled with MUI.',
+    color: '#2563eb',
+  },
+  {
+    icon: <ViewKanbanIcon sx={{ fontSize: 40 }} />,
+    title: 'CustomField System',
+    desc: '15 field types with dual-mode: react-hook-form integration or standalone value/setValue.',
+    color: '#7c3aed',
+  },
+  {
+    icon: <TableChartIcon sx={{ fontSize: 40 }} />,
+    title: 'DynamicTable',
+    desc: 'Config-driven table with loading states, empty states, checkbox selection, and pagination.',
+    color: '#059669',
+  },
+  {
+    icon: <VerifiedIcon sx={{ fontSize: 40 }} />,
+    title: 'Form Validation',
+    desc: 'React Hook Form + Zod schema validation with live error messages and form state tracking.',
+    color: '#dc2626',
+  },
+];
+
+const techStack = [
+  'Material UI', 'React Hook Form', 'Zod', 'Next.js 15', 'TypeScript',
+  '@emotion/react', '@emotion/styled', '@mui/icons-material',
+];
+
+export default function Home() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default' }}>
+
+      {/* Navbar */}
+      <Box sx={{
+        position: 'sticky', top: 0, zIndex: 100,
+        bgcolor: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(16px)',
+        borderBottom: 1, borderColor: 'divider',
+      }}>
+        <Container maxWidth="xl" sx={{ display: 'flex', alignItems: 'center', height: 64, justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{ width: 32, height: 32, borderRadius: 1, bgcolor: 'primary.main', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Typography variant="body2" fontWeight={800} color="white">F</Typography>
+            </Box>
+            <Typography variant="subtitle1" fontWeight={700} sx={{ letterSpacing: '-0.02em' }}>Nexstruct</Typography>
+          </Box>
+
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'center', gap: 1 }}>
+            {navLinks.map((link) => (
+              <Link key={link.href} href={link.href} passHref legacyBehavior>
+                <Button
+                  component="a"
+                  variant={link.href === '/' ? 'contained' : 'text'}
+                  size="small"
+                  sx={{ fontWeight: 500 }}
+                >
+                  {link.label}
+                </Button>
+              </Link>
+            ))}
+            <Box sx={{ width: 1, height: 24, mx: 1 }} />
+            <Tooltip title="View on GitHub">
+              <IconButton size="small" href="https://github.com" target="_blank">
+                <GitHubIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          <IconButton sx={{ display: { xs: 'flex', md: 'none' } }} onClick={() => setMobileOpen(true)}>
+            <MenuIcon />
+          </IconButton>
+        </Container>
+      </Box>
+
+      {/* Mobile Drawer */}
+      <Drawer anchor="right" open={mobileOpen} onClose={() => setMobileOpen(false)}>
+        <Box sx={{ width: 280, p: 2 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+            <Typography variant="subtitle1" fontWeight={700}>Menu</Typography>
+            <IconButton onClick={() => setMobileOpen(false)}><CloseIcon /></IconButton>
+          </Box>
+          <List>
+            {navLinks.map((link) => (
+              <ListItem key={link.href} disablePadding>
+                <Link href={link.href} passHref legacyBehavior>
+                  <ListItemButton component="a" onClick={() => setMobileOpen(false)}>
+                    <ListItemText primary={link.label} />
+                  </ListItemButton>
+                </Link>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+
+      {/* Hero */}
+      <Box sx={{
+        background: 'linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%)',
+        color: 'white', py: { xs: 8, md: 14 },
+        position: 'relative', overflow: 'hidden',
+      }}>
+        <Container maxWidth="md" sx={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
+          <Stack direction="row" spacing={1} justifyContent="center" sx={{ mb: 3 }}>
+            <Chip label="Material UI" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', fontWeight: 600, backdropFilter: 'blur(8px)', bgcolor: 'rgba(255,255,255,0.1)' }} />
+            <Chip label="TypeScript" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', fontWeight: 600, backdropFilter: 'blur(8px)', bgcolor: 'rgba(255,255,255,0.1)' }} />
+            <Chip label="Next.js 15" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', fontWeight: 600, backdropFilter: 'blur(8px)', bgcolor: 'rgba(255,255,255,0.1)' }} />
+          </Stack>
+          <Typography variant="h2" fontWeight={800} sx={{ fontSize: { xs: '2rem', md: '3.5rem' }, lineHeight: 1.15, letterSpacing: '-0.03em' }}>
+            Build Beautiful Apps with{' '}
+            <Box component="span" sx={{ background: 'linear-gradient(135deg, #93c5fd, #c4b5fd)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+              MUI Components
+            </Box>
+          </Typography>
+          <Typography variant="h6" sx={{ mt: 2, opacity: 0.9, fontWeight: 400, maxWidth: 600, mx: 'auto', lineHeight: 1.6 }}>
+            A production-ready component system built on Material UI — with form validation, dynamic tables, dialogs, and 21+ UI primitives.
+          </Typography>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} justifyContent="center" sx={{ mt: 5 }}>
+            <Link href="/examples" passHref legacyBehavior>
+              <Button
+                component="a"
+                variant="contained"
+                size="large"
+                endIcon={<ArrowForwardIcon />}
+                sx={{ bgcolor: 'white', color: '#2563eb', '&:hover': { bgcolor: 'rgba(255,255,255,0.9)' }, fontWeight: 600, px: 4, py: 1.5 }}
+              >
+                Explore Components
+              </Button>
+            </Link>
+            <Button
+              variant="outlined"
+              size="large"
+              startIcon={<CodeIcon />}
+              href="#features"
+              sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', '&:hover': { borderColor: 'white', bgcolor: 'rgba(255,255,255,0.1)' }, fontWeight: 600, px: 4, py: 1.5 }}
+            >
+              Learn More
+            </Button>
+          </Stack>
+        </Container>
+
+        {/* Decorative blobs */}
+        <Box sx={{ position: 'absolute', top: '-20%', right: '-10%', width: 400, height: 400, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.03)', pointerEvents: 'none' }} />
+        <Box sx={{ position: 'absolute', bottom: '-30%', left: '-5%', width: 500, height: 500, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.02)', pointerEvents: 'none' }} />
+      </Box>
+
+      {/* Feature Cards */}
+      <Box id="features" sx={{ py: { xs: 6, md: 10 }, scrollMarginTop: 80 }}>
+        <Container maxWidth="lg">
+          <Box sx={{ textAlign: 'center', mb: 6 }}>
+            <Typography variant="h4" fontWeight={800} gutterBottom>What&apos;s Included</Typography>
+            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 600, mx: 'auto' }}>
+              A complete component ecosystem — every piece is pre-built, pre-styled, and ready for production.
+            </Typography>
+            <Divider sx={{ mt: 2, maxWidth: 80, mx: 'auto', borderWidth: 2, borderColor: 'primary.main', borderRadius: 2 }} />
+          </Box>
+          <Grid container spacing={3}>
+            {features.map((f) => (
+              <Grid size={{ xs: 12, sm: 6 }} key={f.title}>
+                <Card
+                  variant="outlined"
+                  sx={{
+                    height: '100%',
+                    transition: 'all 0.25s ease',
+                    cursor: 'default',
+                    '&:hover': {
+                      boxShadow: 6,
+                      borderColor: f.color,
+                      transform: 'translateY(-4px)',
+                    },
+                  }}
+                >
+                  <CardContent sx={{ p: 3 }}>
+                    <Box sx={{ color: f.color, mb: 2 }}>{f.icon}</Box>
+                    <Typography variant="h6" fontWeight={700} gutterBottom>{f.title}</Typography>
+                    <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7 }}>{f.desc}</Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Tech Stack */}
+      <Box sx={{ py: { xs: 6, md: 8 }, bgcolor: 'grey.50' }}>
+        <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+          <Typography variant="h5" fontWeight={700} gutterBottom>Powered By</Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+            Built on battle-tested libraries you already trust.
+          </Typography>
+          <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap" useFlexGap>
+            {techStack.map((t) => (
+              <Chip key={t} label={t} variant="outlined" sx={{ fontWeight: 500, mb: 1 }} />
+            ))}
+          </Stack>
+        </Container>
+      </Box>
+
+      {/* CTA */}
+      <Box sx={{ py: { xs: 6, md: 10 }, textAlign: 'center' }}>
+        <Container maxWidth="sm">
+          <Typography variant="h4" fontWeight={800} gutterBottom>Ready to Explore?</Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+            See every component in action — buttons, forms, tables, dialogs, and more.
+          </Typography>
+          <Link href="/examples" passHref legacyBehavior>
+            <Button component="a" variant="contained" size="large" endIcon={<ArrowForwardIcon />} sx={{ fontWeight: 600, px: 5, py: 1.5 }}>
+              View Component Showcase
+            </Button>
+          </Link>
+        </Container>
+      </Box>
+
+      {/* Footer */}
+      <Box sx={{ mt: 'auto', bgcolor: 'grey.900', color: 'white', py: 5 }}>
+        <Container maxWidth="lg">
+          <Grid container spacing={3} sx={{ mb: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                <Box sx={{ width: 28, height: 28, borderRadius: 1, bgcolor: 'primary.main', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <Typography variant="caption" fontWeight={800} color="white">F</Typography>
+                </Box>
+                <Typography variant="subtitle2" fontWeight={700}>Nexstruct</Typography>
+              </Box>
+              <Typography variant="body2" sx={{ opacity: 0.6, maxWidth: 360 }}>
+                Scaffolding production-ready Next.js applications with composable, framework-specific component systems.
+              </Typography>
+            </Grid>
+            <Grid size={{ xs: 6, md: 3 }}>
+              <Typography variant="caption" fontWeight={700} sx={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Navigate</Typography>
+              <Stack spacing={0.5} sx={{ mt: 1 }}>
+                {['Home', 'Components', 'GitHub'].map((l) => (
+                  <Link key={l} href={l === 'Home' ? '/' : l === 'Components' ? '/examples' : '#'} style={{ textDecoration: 'none' }}>
+                    <Typography variant="body2" sx={{ opacity: 0.7, '&:hover': { opacity: 1 } }}>{l}</Typography>
+                  </Link>
+                ))}
+              </Stack>
+            </Grid>
+            <Grid size={{ xs: 6, md: 3 }}>
+              <Typography variant="caption" fontWeight={700} sx={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Tech</Typography>
+              <Stack spacing={0.5} sx={{ mt: 1 }}>
+                {['Material UI', 'Next.js 15', 'TypeScript', 'React Hook Form'].map((t) => (
+                  <Typography key={t} variant="body2" sx={{ opacity: 0.7 }}>{t}</Typography>
+                ))}
+              </Stack>
+            </Grid>
+          </Grid>
+          <Divider sx={{ borderColor: 'rgba(255,255,255,0.1)', mb: 3 }} />
+          <Typography variant="caption" sx={{ opacity: 0.4, display: 'block', textAlign: 'center' }}>
+            Scaffolded with Nexstruct — {new Date().getFullYear()}
+          </Typography>
+        </Container>
+      </Box>
+    </Box>
+  );
+}

package/templates/ui/mui/src/components/common/DynamicTable/dynamic-table.component.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export type TableColumn = {
+  key: string;
+  header: string;
+  className?: string;
+  render?: (item: any, index: number) => React.ReactNode;
+};
+
+export type TableConfig = {
+  columns: TableColumn[];
+  emptyMessage?: string;
+  showPagination?: boolean;
+  rowClassName?: (item: any) => string;
+  renderExpandableRow?: (item: any, index: number) => React.ReactNode;
+};
+
+interface Pagination {
+  page: number;
+  total: number;
+  perPage?: number;
+  totalPages: number;
+}
+
+interface DynamicTableProps {
+  isLoading: boolean;
+  pagination?: Pagination;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  config: TableConfig;
+  data: any;
+  isCheckBox?: boolean;
+  selectedIds?: string[];
+  setSelectedIds?: (ids: string[]) => void;
+  setSelectObject?: (data: any[]) => void;
+  renderExpandedRow?: (item: any, index: number) => React.ReactNode;
+}
+
+export function DynamicTable({
+  data, isLoading, config, isCheckBox = false,
+  selectedIds = [], setSelectedIds = () => {}, setSelectObject = () => {},
+}: DynamicTableProps) {
+  const isEmpty = !isLoading && (!data || data.length === 0);
+
+  const isRowSelected = (id: string) => selectedIds?.includes(id);
+
+  const toggleRowSelection = (id: string) => {
+    const newSelectedIds = isRowSelected(id)
+      ? selectedIds.filter((item: string) => item !== id)
+      : [...selectedIds, id];
+    setSelectedIds(newSelectedIds);
+    setSelectObject(data.filter((item: any) => newSelectedIds.includes(item.id)));
+  };
+
+  const toggleSelectAll = () => {
+    const allSelected = data?.every((item: any) => isRowSelected(item.id));
+    const newSelectedIds = allSelected ? [] : data.map((item: any) => item.id);
+    setSelectedIds(newSelectedIds);
+    setSelectObject(allSelected ? [] : data);
+  };
+
+  return (
+    <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {isCheckBox && (
+              <TableCell padding="checkbox">
+                <Checkbox
+                  checked={data?.length > 0 && data?.every((item: any) => isRowSelected(item.id))}
+                  indeterminate={data?.some((item: any) => isRowSelected(item.id)) && !data?.every((item: any) => isRowSelected(item.id))}
+                  onChange={toggleSelectAll}
+                />
+              </TableCell>
+            )}
+            {config.columns.map((column) => (
+              <TableCell key={column.key} className={column.className}>
+                {column.header}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={config.columns.length + (isCheckBox ? 1 : 0)} align="center" sx={{ height: 256 }}>
+                <CircularProgress />
+              </TableCell>
+            </TableRow>
+          ) : isEmpty ? (
+            <TableRow>
+              <TableCell colSpan={config.columns.length + (isCheckBox ? 1 : 0)} align="center" sx={{ height: 256 }}>
+                <Typography color="text.secondary">{config.emptyMessage || 'No data available'}</Typography>
+              </TableCell>
+            </TableRow>
+          ) : (
+            data?.map((row: any, rowIndex: number) => (
+              <TableRow key={rowIndex} hover className={config.rowClassName?.(row)}>
+                {isCheckBox && (
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={isRowSelected(row.id)}
+                      onChange={() => toggleRowSelection(row.id)}
+                    />
+                  </TableCell>
+                )}
+                {config.columns.map((col, colIndex) => (
+                  <TableCell key={colIndex} className={col.className}>
+                    {col.render ? col.render(row, rowIndex) : row[col.key]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

package/templates/ui/mui/src/components/common/button/action-button.component.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Button } from '@/components/ui/button.component';
+import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
+import { forwardRef } from 'react';
+
+interface ActionButtonProps {
+  type?: 'submit' | 'button' | 'reset';
+  btnSize?: 'small' | 'medium' | 'large';
+  btnStyle?: React.CSSProperties;
+  variant?: 'text' | 'outlined' | 'contained';
+  color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+  tooltipContent?: string;
+  buttonContent?: React.ReactNode;
+  icon?: React.ReactNode;
+  lastIcon?: React.ReactNode;
+  isPending?: boolean;
+  handleOpen?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  loadingContent?: React.ReactNode;
+  disabled?: boolean;
+}
+
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ type = 'button', btnSize = 'medium', btnStyle, variant = 'contained', color = 'primary',
+     tooltipContent, buttonContent, icon, lastIcon, isPending = false, handleOpen,
+     side = 'top', loadingContent, disabled = false }, ref) => {
+    const buttonEl = (
+      <Button
+        ref={ref}
+        type={type}
+        size={btnSize}
+        onClick={handleOpen}
+        variant={variant}
+        color={color}
+        disabled={isPending || disabled}
+        startIcon={!isPending && icon ? icon : undefined}
+        endIcon={!isPending && lastIcon ? lastIcon : undefined}
+        isLoading={isPending}
+        sx={{ textTransform: 'none', ...btnStyle }}
+      >
+        {isPending ? (loadingContent ?? buttonContent) : buttonContent}
+      </Button>
+    );
+
+    if (!tooltipContent) return buttonEl;
+    return (
+      <Tooltip title={tooltipContent} placement={side}>
+        <span>{buttonEl}</span>
+      </Tooltip>
+    );
+  }
+);
+ActionButton.displayName = 'ActionButton';
+
+export { ActionButton };

package/templates/ui/mui/src/components/common/dialog/dialog-wrapper.component.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContentText from '@mui/material/DialogContentText';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import type { ReactNode } from 'react';
+
+interface DialogWrapperProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerContent?: ReactNode;
+  title?: ReactNode;
+  description?: string;
+  children: ReactNode;
+  closer?: boolean;
+  footer?: ReactNode;
+  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export function DialogWrapper({
+  open, setOpen, triggerContent, title, description,
+  children, closer = true, footer, maxWidth = 'sm',
+}: DialogWrapperProps) {
+  return (
+    <>
+      {triggerContent}
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth={maxWidth} fullWidth scroll="paper">
+        {closer && (
+          <IconButton
+            onClick={() => setOpen(false)}
+            sx={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
+        {(title || description) && (
+          <DialogTitle sx={{ borderBottom: 1, borderColor: 'divider', pb: 2 }}>
+            {title && typeof title === 'string' ? title : title}
+            {description && (
+              <DialogContentText variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                {description}
+              </DialogContentText>
+            )}
+          </DialogTitle>
+        )}
+        <DialogContent sx={{ py: 3 }}>{children}</DialogContent>
+        {footer && <DialogActions sx={{ borderTop: 1, borderColor: 'divider', px: 3, py: 2 }}>{footer}</DialogActions>}
+      </Dialog>
+    </>
+  );
+}

package/templates/ui/mui/src/components/common/fields/assets/components/check-field.component.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Checkbox from '@mui/material/Checkbox';
+import type { CheckboxProps } from '../../assets/interface/input-props.type';
+
+export function CheckField({ form, name, labelName, required, disabled, options = [] }: CheckboxProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue={[]}
+        render={({ field, fieldState }) => (
+          <FormControl error={!!fieldState.error} required={required} disabled={disabled} component="fieldset">
+            {labelName && <FormLabel component="legend">{labelName}</FormLabel>}
+            <FormGroup>
+              {options.map((opt) => (
+                <FormControlLabel
+                  key={opt.value}
+                  control={
+                    <Checkbox
+                      checked={(field.value || []).includes(opt.value)}
+                      onChange={(e) => {
+                        const newVal = e.target.checked
+                          ? [...(field.value || []), opt.value]
+                          : (field.value || []).filter((v: string) => v !== opt.value);
+                        field.onChange(newVal);
+                      }}
+                    />
+                  }
+                  label={opt.label}
+                />
+              ))}
+            </FormGroup>
+            {fieldState.error && <FormHelperText>{fieldState.error.message}</FormHelperText>}
+          </FormControl>
+        )}
+      />
+    );
+  }
+
+  return null;
+}

package/templates/ui/mui/src/components/common/fields/assets/components/date-picker-field.component.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import type { DatePickerProps } from '../../assets/interface/input-props.type';
+
+export function DatePickerField({ form, name, labelName, placeholder, required, disabled, viewOnly, customMessage }: DatePickerProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue=""
+        render={({ field, fieldState }) => (
+          <TextField
+            fullWidth
+            variant="outlined"
+            label={labelName}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled || viewOnly}
+            type="date"
+            error={!!fieldState.error}
+            helperText={fieldState.error?.message || customMessage}
+            InputLabelProps={{ shrink: true }}
+            InputProps={{ readOnly: viewOnly }}
+            {...field}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant="outlined"
+      label={labelName}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled || viewOnly}
+      type="date"
+      helperText={customMessage}
+      InputLabelProps={{ shrink: true }}
+      InputProps={{ readOnly: viewOnly }}
+    />
+  );
+}

package/templates/ui/mui/src/components/common/fields/assets/components/multi-check-field.component.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Checkbox from '@mui/material/Checkbox';
+import type { CheckboxProps } from '../../assets/interface/input-props.type';
+
+export function MultiCheckField({ form, name, labelName, required, disabled, options = [] }: CheckboxProps) {
+  return <CheckField form={form} name={name} labelName={labelName} required={required} disabled={disabled} options={options} />;
+}