shared/components/
├── forms/          # Form inputs and wrappers
├── tables/         # Data table components
├── layout/         # Page and section layouts
├── inputs/         # Input components
├── feedback/       # Alerts, toasts, loading
└── display/        # Cards, badges, labels

import { Page, PageHeader, PageContent } from "@/shared/components";

function MyPage() {
  return (
    <Page>
      <PageHeader
        title="Fund Families"
        description="Manage your fund families"
        actions={<Button>Create</Button>}
      />
      <PageContent>
        {/* Page content */}
      </PageContent>
    </Page>
  );
}

import { Section } from "@/shared/components";

<Section
  title="Details"
  description="Fund family information"
  actions={<EditButton />}
>
  <DetailsContent />
</Section>

import { Form, FormField, FormInput } from "@/shared/components";

function MyForm() {
  const methods = useForm<FormData>();
  
  return (
    <Form methods={methods} onSubmit={handleSubmit}>
      <FormField name="name" label="Name" required>
        <FormInput name="name" />
      </FormField>
      
      <FormField name="description" label="Description">
        <FormTextarea name="description" />
      </FormField>
      
      <SubmitButton>Save</SubmitButton>
    </Form>
  );
}

// Text input
<FormInput name="name" placeholder="Enter name" />

// Number input
<FormNumberInput name="amount" prefix="$" />

// Select
<FormSelect name="status" options={statusOptions} />

// Date picker
<FormDatePicker name="effectiveDate" />

// Money input
<FormMoneyInput name="commitment" currency="USD" />

import { DataTable } from "@/shared/components";

function MyTable() {
  const columns = [
    { field: "name", headerName: "Name" },
    { field: "status", headerName: "Status" },
    { field: "amount", headerName: "Amount", type: "money" },
  ];
  
  return (
    <DataTable
      columns={columns}
      data={data}
      onRowClick={handleRowClick}
    />
  );
}

import { AGGridTable } from "@/shared/components";

<AGGridTable
  columnDefs={columnDefs}
  rowData={rowData}
  pagination={true}
  paginationPageSize={25}
  enableRangeSelection={true}
/>

<MoneyInput
  value={amount}
  onChange={setAmount}
  currency="USD"
  allowNegative={false}
/>

<DatePicker
  value={date}
  onChange={setDate}
  minDate={minDate}
  maxDate={maxDate}
/>

<EntitySelect
  entityType="investor"
  value={selectedId}
  onChange={setSelectedId}
  filter={{ status: "active" }}
/>

import { PageLoader, Spinner, Skeleton } from "@/shared/components";

// Full page loader
<PageLoader />

// Inline spinner
<Spinner size="sm" />

// Content skeleton
<Skeleton height="20px" />

import { Alert, ErrorAlert } from "@/shared/components";

<Alert status="warning" title="Pending Changes">
  You have unsaved changes.
</Alert>

<ErrorAlert error={error} onRetry={refetch} />

import { useToast } from "@/shared/hooks";

const toast = useToast();

toast.success("Saved successfully");
toast.error("Failed to save");
toast.warning("Check your input");

import { Modal, Drawer } from "@/shared/components";

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Edit Fund Family"
>
  <ModalBody>
    <EditForm />
  </ModalBody>
  <ModalFooter>
    <Button onClick={onClose}>Cancel</Button>
    <Button colorScheme="blue">Save</Button>
  </ModalFooter>
</Modal>

<Drawer
  isOpen={isOpen}
  onClose={onClose}
  title="Details"
  size="md"
>
  <DrawerBody>
    <DetailPanel />
  </DrawerBody>
</Drawer>

import {
  Page,
  PageHeader,
  Form,
  FormInput,
  DataTable,
  Alert,
} from "@/shared/components";