### Vite Project Configuration (Terminal)

Source: https://design.digital.gov.my/en/docs/develop/vite

Example selections for creating a Vite project with React and TypeScript.

```bash
✔ Project name: … project-name
✔ Select a framework: › React
✔ Select a variant: › TypeScript

```

--------------------------------

### Install MYDS Packages in Laravel

Source: https://design.digital.gov.my/en/docs/develop/laravel

Installs the MYDS React components and styling packages. The command differs slightly depending on whether a starter kit (like Breeze or Jetstream) is used.

```bash
# Using a starter kit (Laravel Breeze or Jetstream)
npm i @govtechmy/myds-react @govtechmy/myds-style

# Not using a starter kit
npm i @govtechmy/myds-react @govtechmy/myds-style react react-dom @vitejs/plugin-react
```

--------------------------------

### Create Laravel Project

Source: https://design.digital.gov.my/en/docs/develop/laravel

Command to create a new Laravel project. It prompts for various configurations like starter kits, testing frameworks, and database choices. Starter kits like Breeze or Jetstream handle frontend setup.

```bash
laravel new project-name
```

--------------------------------

### Install MYDS Packages (npm)

Source: https://design.digital.gov.my/en/docs/develop/install

Installs the necessary MYDS React components and styles using npm. This is the first step for manual installation.

```bash
npm i @govtechmy/myds-react @govtechmy/myds-style
```

--------------------------------

### Install MYDS Packages (Terminal)

Source: https://design.digital.gov.my/en/docs/develop/vite

Installs the core MYDS React components and styling packages using npm.

```bash
npm i @govtechmy/myds-react @govtechmy/myds-style 

```

--------------------------------

### Create Vite Project (Terminal)

Source: https://design.digital.gov.my/en/docs/develop/vite

Command to initialize a new Vite project. It prompts the user to select project name, framework (React), and variant (TypeScript).

```bash
npm init vite@latest

```

--------------------------------

### Create Next.js Project

Source: https://design.digital.gov.my/en/docs/develop/nextjs

Command to create a new Next.js project using npx. It prompts the user for configuration choices like TypeScript, ESLint, Tailwind CSS, and App Router.

```bash
npx create-next-app@latest project-name
```

--------------------------------

### Use MYDS Button Component (React)

Source: https://design.digital.gov.my/en/docs/develop/install

Demonstrates how to import and use the MYDS Button component within a React application. This requires the `@govtechmy/myds-react` package to be installed.

```javascript
import { Button } from "@govtechmy/myds-react/button";

export default () => {
  return <Button variant="primary-fill">Hello MYDS</Button>;
};
```

--------------------------------

### Example Social Media Link (React)

Source: https://design.digital.gov.my/en/docs/develop/footer-logo

This example demonstrates how to implement a functional social media link, specifically for Facebook, within the Footer component. It shows how to pass the official URL to the Link component and include the relevant icon.

```jsx
<Link href="https://www.facebook.com/youragency" target="_blank">
  <FacebookIcon scale={32} className="text-[#2563EB]" />
</Link>
```

--------------------------------

### Proper Heading Hierarchy Example (React)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Illustrates the correct use of heading elements (h1-h6) to create a semantic and hierarchical structure for page content. This ensures that the relationships between different sections and sub-sections are clear to users and assistive technologies.

```javascript
// ✅ DO: Use proper heading hierarchy
const PageContent = () => (
  <>
    <h1>Main Page Title</h1>
    <section>
      <h2>Section Heading</h2>
      <p>Content...</p>
      <article>
        <h3>Article Heading</h3>
        <p>More content...</p>
      </article>
    </section>
  </>
);

```

--------------------------------

### Use MYDS Button Component in Next.js

Source: https://design.digital.gov.my/en/docs/develop/nextjs

Example of how to use a MYDS Button component within a Next.js application. It includes the 'use client' directive required for client-side rendering in Next.js App Router.

```typescript
"use client"; // For Next App Router, must include this line
import { Button } from "@govtechmy/myds-react/button";

export default () => {
  return <Button variant="primary-fill">Hello MYDS</Button>;
};

```

--------------------------------

### Summary List Addition Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

An example of the SummaryListAddition component, used to provide supplementary information or additional actions within a summary list row. It extends the row's content.

```javascript
<SummaryListAddition />
```

--------------------------------

### Dropdown Content Alignment Examples

Source: https://design.digital.gov.my/en/docs/develop/dropdown

Provides examples of aligning the DropdownContent relative to the trigger element using the `align` prop. Supported values are 'start', 'center', and 'end'.

```javascript
<DropdownContent align="start">
  ... Content ...
</DropdownContent>
```

```javascript
<DropdownContent align="center">
  ... Content ...
</DropdownContent>
```

```javascript
<DropdownContent align="end">
  ... Content ...
</DropdownContent>
```

--------------------------------

### Summary List Body Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

An example showcasing the SummaryListBody component, which acts as a wrapper for the tabular data within a SummaryList. It can contain one or more SummaryListRows.

```javascript
<SummaryListBody>
  <SummaryListRow>
    <SummaryListTerm />
    <SummaryListDetail />
  </SummaryListRow>
</SummaryListBody>
```

--------------------------------

### Input OTP Component Examples

Source: https://design.digital.gov.my/en/docs/develop/input-otp

Illustrates various states and functionalities of the Input OTP component, including invalid, disabled, controlled, and pattern-based inputs.

```APIDOC
## Input OTP Component Examples

### Invalid State
Set the `invalid` prop to `true` to mark the input as invalid.

### Disabled State
Disable the input by setting the `disabled` prop to `true`.

### Controlled Component
The input can be controlled by setting the `value` and `onChange` props. This example demonstrates controlling `InputOTP` with state and converting values to uppercase on change.

### Using the `pattern` Prop
Pass a regular expression to the `pattern` prop to restrict input to a specific format. For example, use a regex to accept only numbers.
```

--------------------------------

### Controlled MYDS Tooltip Example in React

Source: https://design.digital.gov.my/en/docs/develop/tooltip

This example illustrates how to manage the state of a MYDS Tooltip component programmatically using the `open` and `onOpenChange` props. It allows for external control over the tooltip's visibility, which is useful for dynamic UI interactions.

```javascript
// Example for controlled component
// const [open, setOpen] = useState(false);
// <Tooltip open={open} onOpenChange={setOpen}>
//   <TooltipTrigger />
//   <TooltipContent />
// </Tooltip>
```

--------------------------------

### Basic Skiplink Usage Example (React)

Source: https://design.digital.gov.my/en/docs/develop/skiplink

This example demonstrates the basic anatomy and usage of the Skiplink component in React. It shows how to render the Skiplink component with a link to an element with the ID 'main-content', and how to structure the main content area.

```javascript
export default () => (
  <Skiplink href="#main-content">
    <span>Skip to main content</span>
  </Skiplink>
  <main id="main-content">
    <span className="text-slate-600">
      Main content here
    </span>
  </main>
);
```

--------------------------------

### Summary List Term Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

An example of the SummaryListTerm component, used to display the label or key for a specific item in a summary list row. It typically appears before the SummaryListDetail.

```javascript
<SummaryListTerm />
```

--------------------------------

### Image Accessibility: Alt Text and Descriptions (HTML)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Provides examples of implementing accessible images using HTML. This includes adding descriptive 'alt' text for informative images, empty 'alt' attributes for decorative images, and using 'figure' and 'figcaption' for complex images like charts.

```html
// ✅ DO: Add appropriate alt text
<img src="logo.png" alt="Company Logo" /> 

// For decorative images, use empty alt
<img src="decorative-line.png" alt="" role="presentation" />

// For SVGs, ensure accessibility
<svg aria-hidden="true" focusable="false">
  {/* SVG content */}
</svg>

// For complex images
<figure>
  <img src="chart.png" alt="Bar chart showing sales growth" />
  <figcaption>
    Figure 1: Sales growth from 2020-2023, with 15% increase year over year
  </figcaption>
</figure>
```

--------------------------------

### Use MYDS Button Component (React/TypeScript)

Source: https://design.digital.gov.my/en/docs/develop/vite

Demonstrates how to import and use a basic MYDS Button component within a React application. Requires `@govtechmy/myds-react` package.

```typescript
import { Button } from "@govtechmy/myds-react/button";

function App() {
  return (
      <Button variant="primary-fill">
        Hello MYDS
      </Button>
  )
}

export default App

```

--------------------------------

### Summary List Detail Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

Demonstrates the SummaryListDetail component, which displays the value or detailed information corresponding to a SummaryListTerm. It is used within a SummaryListRow.

```javascript
<SummaryListDetail />
```

--------------------------------

### Summary List Header Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

An example of how to use the SummaryListHeader component to display a title for the summary list. This component is typically placed at the top of the SummaryList.

```javascript
<SummaryListHeader />
```

--------------------------------

### Uncontrolled MYDS Tooltip Example in React

Source: https://design.digital.gov.my/en/docs/develop/tooltip

This example shows how to use the MYDS Tooltip component as an uncontrolled component by utilizing the `defaultOpen` prop. This simplifies implementation when direct programmatic control over the tooltip's state is not required.

```javascript
// Example for uncontrolled component
// <Tooltip defaultOpen>
//   <TooltipTrigger />
//   <TooltipContent />
// </Tooltip>
```

--------------------------------

### CSS for Responsive Text and Layout

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Provides CSS examples using relative units (rem, ch) for font sizes and layout widths to ensure content is resizable and reflows correctly at different zoom levels. This approach supports accessibility by preventing horizontal scrolling and maintaining readability.

```css
/* ✅ DO: Use relative units for text and layout */
body {
  font-size: 16px; /* Base size */
}
 
h1 {
  font-size: 2rem; /* Relative to base size */
}
 
.container {
  max-width: 80ch; /* Character-based width for readability */
  padding: 1rem;
}

```

--------------------------------

### MYDS Dialog Trigger Example (React)

Source: https://design.digital.gov.my/en/docs/develop/dialog

Illustrates how to use the DialogTrigger component to create elements that open the dialog. This example shows multiple buttons triggering the same dialog.

```jsx
<Dialog>
  <DialogTrigger>Open Dialog 1</DialogTrigger>
  <DialogTrigger>Open Dialog 2</DialogTrigger>
  <DialogTrigger>Open Dialog 3</DialogTrigger>
  <DialogBody>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogContent>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogContent>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogBody>
</Dialog>
```

--------------------------------

### Configure Vite for MYDS in Laravel

Source: https://design.digital.gov.my/en/docs/develop/laravel

Sets up Vite to handle asset compilation for Laravel, including React and MYDS components. This configuration is crucial for integrating frontend assets correctly. It's often pre-configured with starter kits like Breeze or Jetstream.

```javascript
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react"; 

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        react(), 
    ],
});
```

--------------------------------

### Create Custom Link with Next.js

Source: https://design.digital.gov.my/en/docs/develop/link

This example shows how to create a custom Link component using the 'asChild' prop, integrating it with Next.js's 'next/link' for advanced routing capabilities.

```javascript
import { Link as LinkPrimitive } from "@govtechmy/myds-react/link";
import NextLink from "next/link";
 
export const Link = (props) => (
  <LinkPrimitive asChild>
    <NextLink {...props} />
  </LinkPrimitive>
);
```

--------------------------------

### Automated Accessibility Testing with jest-axe (React)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Demonstrates an automated accessibility test using `jest-axe` with React components. This example shows how to integrate `jest-axe` into a testing workflow to catch accessibility violations early. It renders a Button component and asserts that the rendered output has no accessibility violations, ensuring compliance with WCAG standards.

```javascript
import { axe } from "jest-axe";
import { render } from "@testing-library/react";
import Button from "./Button";
 
test("Button component should not have accessibility violations", async () => {
  const { container } = render(<Button>Click me</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

```

--------------------------------

### Controlled MYDS Cookie Banner Example (React)

Source: https://design.digital.gov.my/en/docs/develop/cookies-banner

Provides an example of implementing the Cookie Banner as a controlled component. This involves managing the `open` state and handling changes via the `onOpenChange` prop, allowing for programmatic control over the banner's visibility.

```javascript
<CookieBanner open={isOpen} onOpenChange={setIsOpen} />
```

--------------------------------

### DateField Size Prop Example (React)

Source: https://design.digital.gov.my/en/docs/develop/date-field

Illustrates how to change the visual size of the DateField component using the `size` prop. This allows for responsive design adjustments.

```javascript
<DateField size="large" />
```

--------------------------------

### Alert Dialog Trigger Example (React)

Source: https://design.digital.gov.my/en/docs/develop/alert-dialog

Shows how to use `AlertDialogTrigger` to associate trigger elements (like buttons) with an Alert Dialog. Multiple triggers can be linked to the same dialog.

```jsx
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open AlertDialog 1</Button>
  </AlertDialogTrigger>
  <AlertDialogTrigger asChild>
    <Button>Open AlertDialog 2</Button>
  </AlertDialogTrigger>
  <AlertDialogTrigger asChild>
    <Button>Open AlertDialog 3</Button>
  </AlertDialogTrigger>
  <AlertDialogBody>
    {/* ... dialog content ... */}
  </AlertDialogBody>
</AlertDialog>
```

--------------------------------

### MYDS Radio Anatomy Example (React)

Source: https://design.digital.gov.my/en/docs/develop/radio

Demonstrates the basic structure and anatomy of the MYDS Radio component. It shows how to nest RadioButton, RadioLabel, and RadioHintText within RadioItem and Radio components.

```javascript
<Radio>
  <RadioItem>
    <RadioButton value="apple" id="apple" />
    <RadioLabel htmlFor="apple">Apple</RadioLabel>
  </RadioItem>
  <RadioItem>
    <RadioButton value="banana" id="banana" />
    <div>
      <RadioLabel htmlFor="banana">Banana</RadioLabel>
      <RadioHintText htmlFor="banana">Comes pre-packaged.</RadioHintText>
    </div>
  </RadioItem>
</Radio>
```

--------------------------------

### Use MYDS Button in Inertia Page

Source: https://design.digital.gov.my/en/docs/develop/laravel

Shows how to use the MYDS Button component within an Inertia page component in a Laravel application. This example includes necessary Inertia imports and renders the button.

```jsx
import { PageProps } from '@/types';
import { Head, Link } from '@inertiajs/react';
import { Button } from "@govtechmy/myds-react/button";

export default function Welcome() {
    return (
      <>
        <Head title="Welcome" />
        <Button variant="primary-fill">
          Hello MYDS
        </Button>
      </>
    );

}
```

--------------------------------

### Use MYDS Button Component in React App

Source: https://design.digital.gov.my/en/docs/develop/laravel

Demonstrates how to import and use the MYDS Button component within a React application in Laravel. This example shows basic usage with a primary fill variant.

```jsx
import { Button } from "@govtechmy/myds-react/button";

function App() {
  return (
      <Button variant="primary-fill">
        Hello MYDS
      </Button>
  )
}

export default App
```

--------------------------------

### Initialize usePagination Hook

Source: https://design.digital.gov.my/en/docs/develop/use-pagination

This snippet demonstrates the basic initialization of the usePagination hook, showing how to import it and destructure the returned values. It requires 'count', 'page', 'limit', and 'maxDisplay' as arguments to manage pagination state effectively.

```javascript
import { usePagination } from "@govtechmy/myds-react/hooks";

const { visiblePages, max } = usePagination({ count: 10, page: 1, limit: 10, maxDisplay: 4 });
```

--------------------------------

### Configure MYDS CSS Import (CSS)

Source: https://design.digital.gov.my/en/docs/develop/vite

Imports the full MYDS stylesheet directly into the application's CSS file.

```css
@import "@govtechmy/myds-style/full.css";

```

--------------------------------

### Input OTP Component Usage

Source: https://design.digital.gov.my/en/docs/develop/input-otp

Demonstrates how to import and use the InputOTP and InputOTPSlot components.

```APIDOC
## Input OTP Component

### Description
The Input OTP component allows users to enter a code sent to their email or phone to verify their identity. This component is commonly used in two-factor authentication (2FA) and account recovery processes.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { InputOTP, InputOTPSlot } from "@/components/myds";

<InputOTP maxLength={4}>
  <InputOTPSlot index={0} />
  <InputOTPSlot index={1} />
  <InputOTPSlot index={2} />
  <InputOTPSlot index={3} />
</InputOTP>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Blade Integration for MYDS in Laravel

Source: https://design.digital.gov.my/en/docs/develop/laravel

Integrates Vite-processed assets into Laravel Blade views. This ensures that CSS and JavaScript, including MYDS components, are correctly loaded. Specific directives are used for React refresh and asset inclusion, with variations for Inertia setups.

```blade
<head>
  # Non-Inertia setup
  @viteReactRefresh
  @vite(['resources/css/app.css', 'resources/js/app.jsx']) 

  # Inertia setup
  @viteReactRefresh
  @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
  @inertiaHead
</head>
```

--------------------------------

### Import ThemeProvider and ThemeSwitch (React)

Source: https://design.digital.gov.my/en/docs/develop/theme-switch

Demonstrates how to import the necessary components, ThemeProvider and ThemeSwitch, from the @govtechmy/myds-react library for use in a React application.

```javascript
import { ThemeProvider } from "@govtechmy/myds-react/hooks";
import { ThemeSwitch } from "@govtechmy/myds-react/theme-switch";
```

--------------------------------

### Summary List Action Example (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

Shows how to implement the SummaryListAction component, which allows for the inclusion of interactive elements like buttons or links associated with a specific summary list row.

```javascript
<SummaryListAction />
```

--------------------------------

### Integrate MYDS Button into Next.js Page

Source: https://design.digital.gov.my/en/docs/develop/nextjs

Shows how to import and render the MYDS Button component in a Next.js page file. This assumes the Button component is located at '../components/button'.

```typescript
import Button from "../components/button";

export default function Home() {
  return (
    <div>
      <Button />
    </div>
  );
}

```

--------------------------------

### Import MYDS Stylesheet via CSS

Source: https://design.digital.gov.my/en/docs/develop/install

Imports the full MYDS stylesheet using a CSS @import rule. This is typically placed in your project's main CSS entry file.

```css
/* Place in the CSS entry point */
@import "@govtechmy/myds-style/full.css";
```

--------------------------------

### Import MYDS Input Component (React)

Source: https://design.digital.gov.my/en/docs/develop/input

Demonstrates how to import the Input component from the '@govtechmy/myds-react/input' library. This is the first step to using the component in a React application.

```javascript
import { Input } from "@govtechmy/myds-react/input";
```

--------------------------------

### Configure MYDS CSS in Laravel

Source: https://design.digital.gov.my/en/docs/develop/laravel

Configures the MYDS styling within a Laravel project. Two methods are provided: direct CSS import or advanced configuration via Tailwind CSS.

```css
@import "@govtechmy/myds-style/full.css";
```

--------------------------------

### Import MYDS Stylesheet via JS (Bundler)

Source: https://design.digital.gov.my/en/docs/develop/install

Imports the full MYDS stylesheet directly within your JavaScript bundle entry point. This method is suitable for projects using bundlers like Webpack or Rollup.

```javascript
// Place in the bundle entry point (eg. index.{ts,js})
import "@govtechmy/myds-style/full.css";
```

--------------------------------

### Color and Contrast: Accessible Indicators (React)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Illustrates how to implement accessible color and contrast in UI components using React. It shows examples of using sufficient contrast with multiple indicators and avoiding reliance solely on color to convey information.

```jsx
// ✅ DO: Use sufficient contrast and multiple indicators
const ErrorMessage = ({ message }) => (
  <div className="error-container">
    <span aria-hidden="true">❌</span> {/* Visual indicator */}
    <span className="error-text">{message}</span>
  </div>
);

// ❌ DO NOT: Rely solely on color
const StatusIndicator = ({ status }) => (
  // This only uses color to convey status
  <div className={`status-dot status-${status}`}></div>
);

// ✅ DO: Add text or patterns
const BetterStatusIndicator = ({ status }) => (
  <div className={`status-indicator status-${status}`} aria-label={status}>
    {status === "success" && "✓"}
    {status === "error" && "✕"}
    {status === "warning" && "!"}
  </div>
);
```

--------------------------------

### MYDS React Login Template Example

Source: https://design.digital.gov.my/en/docs/develop/login

This code snippet provides a complete React component for a login template using components from the '@govtechmy/myds-react' library. It includes imports for various UI elements like Button, Input, Navbar, Select, and icons. The template is structured into HeaderLogin, BodyLogin, and FooterLogin components.

```javascript
import { Button } from "@govtechmy/myds-react/button";
import { Input } from "@govtechmy/myds-react/input";
import {
  GlobeIcon,
  GoogleIcon,
  JataNegaraIcon,
} from "@govtechmy/myds-react/icon";
import { Navbar, NavbarLogo } from "@govtechmy/myds-react/navbar";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@govtechmy/myds-react/select";
import { ThemeSwitch } from "@govtechmy/myds-react/theme-switch";
import { Link } from "@govtechmy/myds-react/link";
import { clx } from "@govtechmy/myds-react/utils";

export default function LoginTemplate() {
  return (
    <div className="border-otl-gray-200 shadow-card flex min-h-screen flex-col border">
      <HeaderLogin />
      <BodyLogin />
      <FooterLogin />
    </div>
  );
}

function BodyLogin() {
  return (
    <div className="bg-bg-gray-50 flex w-full flex-grow items-center justify-center py-12">
      <form className="mx-auto flex max-w-[400px] flex-col items-center justify-center gap-8 px-4">
        <div className="flex flex-col gap-4 text-center">
          <div className="text-2xl font-semibold">Log in to Brand</div>
          <div className="text-txt-black-700 text-base">
            Welcome back! Please enter your details.
          </div>
        </div>
        <div className="flex w-full flex-col gap-4">
          <div className="flex w-full flex-col gap-1.5">
            <div className="text-txt-black-500 text-sm">Email</div>
            <Input
              size="medium"
              id="email"
              type="email"
              placeholder="yourname@example.com"
              required
            />
          </div>
          <div className="flex w-full flex-col gap-1.5">
            <div className="text-txt-black-500 text-sm">Password</div>
            <Input
              size="medium"
              id="password"
              type="password"
              placeholder="Enter Your Password"
              required
            />
          </div>
        </div>
        <div className="flex w-full flex-col items-center justify-center gap-4">
          <Button size="medium" className="w-full items-center justify-center">
            Log in
          </Button>
          <div className="text-txt-black-500 text-sm">OR</div>
          <Button
            variant={"default-outline"}
            className="w-full items-center justify-center"
            size="medium"
          >
            <GoogleIcon></GoogleIcon> Continue with MyGovUC
          </Button>
        </div>
        <Link
          underline="hover"
          className="text-txt-primary text-sm font-normal"
          href="https://www.google.com"
        >
          Forgot Password?
        </Link>
      </form>
    </div>
  );
}

function HeaderLogin() {
  return (
    <Navbar
      className="bg-bg-gray-50 border-b-0"
      style={{ boxShadow: "0 0 #0000" }}
    >
      <NavbarLogo
        src="https://d2391uizq0pg2.cloudfront.net/common/logo.svg"
        alt="Malaysian Government Design System"
      >
        <div className="text-lg font-semibold">MYDS</div>
        <div className="text-bg-white bg-bg-black-900 font-body rounded-sm px-1.5 py-0.5 text-xs font-medium leading-[18px]">
          DASHBOARD
        </div>
      </NavbarLogo>
      <div className="flex gap-2">
        <ThemeSwitch />
        <div className="hidden sm:block">
          <Select defaultValue="EN" variant="outline" size="small">
            <SelectTrigger aria-label="language-selection">
              <GlobeIcon className="h-4 w-4"></GlobeIcon>
              <SelectValue />
            </SelectTrigger>
            <SelectContent align="end" className="font-body rounded-[4px] py-1">
              <SelectItem value="EN">EN</SelectItem>
              <SelectItem value="BM">BM</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </Navbar>
  );
}

function FooterLogin() {
  return (
    <div className="bg-bg-gray-50">
      <div className="gap-4.5 hidden items-center py-1 pl-6 text-sm font-normal max-[430px]:flex">
        <Navlinks />
      </div>
      <div
        className={clx(
          "relative mx-auto flex h-16 max-w-screen-xl items-center justify-between gap-4 px-6",
          "max-md:h-14",
          "xl:px-0",
        )}
      >
        <div className="flex items-center justify-center max-sm:flex-col">
          <div className="flex items-center justify-center gap-2">
            <JataNegaraIcon></JataNegaraIcon>
            <div className="flex max-sm:flex-col">
              <div className="font-heading font-semibold">
                Government of Malaysia
              </div>
              <div className="font-body text-txt-black-500 flex items-center pl-[10px] text-xs font-normal leading-[18px] max-sm:pl-0">
                © 2024 Government of Malaysia
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```

--------------------------------

### Composition: Anchor Masked as Button with MYDS React

Source: https://design.digital.gov.my/en/docs/develop/usage

Illustrates how to compose MYDS components by using the `asChild` prop to override a parent component's behavior. This example shows an Anchor link styled as a Button.

```javascript
import { Button } from "@govtechmy/myds-react/button";
import { Link } from "@govtechmy/myds-react/link";
 
<Button variant="primary-ghost" size="small" asChild>
  <Link href="#composition">
    <span className="text-txt-primary">Scroll to title</span>
  </Link>
</Button>;
```

--------------------------------

### Composition: Button with Overridden Icon Props using MYDS React

Source: https://design.digital.gov.my/en/docs/develop/usage

Shows how a parent component can override child component props for customization. This example integrates an icon into a Button component, ensuring it conforms to the button's styling.

```javascript
import { Button, ButtonIcon } from "@govtechmy/myds-react/button";
import { ArrowForwardIcon } from "@govtechmy/myds-react/icon";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
  <ButtonIcon>
    <ArrowForward />
  </ButtonIcon>
</Button>;
```

--------------------------------

### MYDS Callout Layout Examples in React

Source: https://design.digital.gov.my/en/docs/develop/callout

Demonstrates the layout behavior of the MYDS Callout component. A basic callout with title and action is displayed inline, while a callout with title, content, and action is displayed in a stacked manner.

```javascript
<Callout>
  <CalloutTitle>Title</CalloutTitle>
  <CalloutAction>
    Call to Action
  </CalloutAction>
</Callout>

<Callout>
  <CalloutTitle>Title</CalloutTitle>
  <CalloutContent>A description to explain the success, warning, info or error event</CalloutContent>
  <CalloutAction>
    Call to Action
  </CalloutAction>
</Callout>
```

--------------------------------

### Basic Button Usage with MYDS React

Source: https://design.digital.gov.my/en/docs/develop/usage

Demonstrates the fundamental way to import and use a Button component from the MYDS React library. It shows how to apply variants and sizes, and attach event handlers.

```javascript
import { Button } from "@govtechmy/myds-react/button";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
</Button>;
```

--------------------------------

### MYDS Input Component with Prepend and Append Addons (React)

Source: https://design.digital.gov.my/en/docs/develop/input

Shows how to add addons to the MYDS Input component using the 'InputAddon' component. Addons can be prepended or appended, useful for currency symbols or buttons.

```javascript
import { Input, InputAddon } from "@govtechmy/myds-react/input";

<Input prepend={<InputAddon>RM</InputAddon>} append={<InputAddon><button>Submit</button></InputAddon>} />
```

--------------------------------

### Minimize Redundant Entry with Multi-Step Forms (React)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Illustrates a React pattern for minimizing redundant data entry in forms, adhering to WCAG 2.2's 'Redundant Entry' criterion. This example uses a multi-step form approach where data is stored and pre-filled across steps using React's `useState` hook. This reduces the need for users to re-enter information.

```javascript
import React, { useState } from 'react';

const MultiStepForm = () => {
  const [userData, setUserData] = useState({});
 
  // Store data between steps and pre-fill when possible
  return (
    <form>
      <StepOne
        onNext={(data) => setUserData({ ...userData, ...data })}
        initialData={userData} // Pre-fill with existing data
      />
      {/* More steps */}
    </form>
  );
};

```

--------------------------------

### Simple Toast Usage with AutoToast - React

Source: https://design.digital.gov.my/en/docs/develop/toast

Demonstrates the basic implementation of the Toast component using the pre-assembled `AutoToast` for common use cases. This requires placing the `AutoToast` component high in the DOM tree.

```jsx
import { AutoToast } from "@govtechmy/myds-react/toast";

// Put the component high up in the DOM tree
<AutoToast />;
```

--------------------------------

### Complete HTML Head with MYDS Styles and Font

Source: https://design.digital.gov.my/en/docs/develop/ta-button

This example shows a complete HTML head section incorporating the Inter font and the necessary MYDS stylesheets (reset, button, button-dark) for consistent styling.

```html
<head>
  <!-- Inter Font -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
 
  <!-- Design System Stylesheet -->
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="button.css" />
  <link rel="stylesheet" href="button-dark.css" />
</head>
```

--------------------------------

### Build Self-Assembled Pagination Component with usePagination

Source: https://design.digital.gov.my/en/docs/develop/use-pagination

This example illustrates how to use the usePagination hook to build a custom, self-assembled pagination component. It utilizes the 'visiblePages' array returned by the hook to render pagination items, including numbers, ellipsis, and navigation controls.

```javascript
import { usePagination } from "@govtechmy/myds-react/hooks";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
  PaginationNumber
} from "@govtechmy/myds-react/pagination";

//... inside your component
const { visiblePages } = usePagination();

// Self assembled Pagination component
<Pagination ref={ref} type={type} {...props}>
  <PaginationContent>
    <PaginationItem>{previous || <PaginationPrevious />}</PaginationItem>
    {visiblePages.map((page, index) => (
      <PaginationItem key={page}>
        {page === "..." ? (
          <PaginationEllipsis />
        ) : (
          typeof page === "number" && <PaginationNumber number={page} />
        )}
      </PaginationItem>
    ))}
    <PaginationItem>{next || <PaginationNext />}</PaginationItem>
  </PaginationContent>
</Pagination>;
```

--------------------------------

### Keyboard Navigation Best Practices in React

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Demonstrates correct and incorrect ways to handle keyboard accessibility for interactive elements in React. It emphasizes using native elements or ensuring custom elements have proper keyboard event handling and focus management.

```javascript
// ✅ DO: Use native elements or ensure custom elements have proper keyboard handling
<button onClick={handleClick}>Submit</button>
 
// ❌ DO NOT: Use divs for interactive elements without keyboard support
<div onClick={handleClick}>Submit</div> // Not keyboard accessible!
```

```javascript
// ✅ DO: Define accessibility properties & implement keyboard handlers for custom components
const CustomButton = (props) => {
  const handleKeyDown = (e) => { ... }; 
 
  return (
    <div
      role="button"
      tabIndex={0} 
      onClick={props.onClick}
      onKeyDown={handleKeyDown} 
    >
      {props.children}
    </div>
  );
};
```

--------------------------------

### Basic Summary List Structure (React)

Source: https://design.digital.gov.my/en/docs/develop/summarylist

Demonstrates the basic anatomy and structure of a Summary List component using React. It shows how to nest the various sub-components within the main SummaryList container.

```javascript
export default () => (
  <SummaryList>
    <SummaryListHeader />
    <SummaryListBody>
      <SummaryListRow>
        <SummaryListTerm />
        <SummaryListDetail />
        <SummaryListAction />
      </SummaryListRow>
    </SummaryListBody>
  </SummaryList>
);
```

--------------------------------

### Page Layout with Landmarks and Skip Link (HTML/React)

Source: https://design.digital.gov.my/en/docs/develop/accessibility

Demonstrates a basic page layout structure using semantic HTML5 landmarks (header, main, aside, footer) and a skip-to-main-content link for improved navigation and accessibility. This pattern helps users with assistive technologies bypass repetitive navigation elements.

```javascript
// ✅ DO: Use landmarks appropriately
const PageLayout = ({ children }) => (
  <>
    <a href="#main-content" className="skip-link">
      Skip to main content
    </a>
    <header>
      <nav aria-label="Main Navigation">{/* Navigation items */}</nav>
    </header>
    <main id="main-content">{children}</main>
    <aside aria-label="Related Information">{/* Sidebar content */}</aside>
    <footer>{/* Footer content */}</footer>
  </>
);

```

--------------------------------

### MYDS Table Skeleton Loading in React

Source: https://design.digital.gov.my/en/docs/develop/table

This example shows the implementation of a skeleton loading state for the MYDS Table component. It uses placeholder rows and cells to indicate that data is being loaded, improving the user experience during data retrieval.

```javascript
<TableSkeleton />
```

--------------------------------

### Input OTP Component Props

Source: https://design.digital.gov.my/en/docs/develop/input-otp

Details the available props for the InputOTP and InputOTPSlot components.

```APIDOC
## InputOTP Props

### Description
`InputOTP` is abstracted from input-otp's `OTPInput`. Please refer to the API references in this documentation.

| Prop | Type | Default |
|---|---|---|
| `maxLength` | `number` | - |
| `defaultValue` | `string` | - |
| `value` | `string` | - |
| `onChange` | `function` | - |
| `disabled` | `boolean` | `false` |
| `invalid` | `boolean` | `false` |
| `pattern` | `string` | - |

## InputOTPSlot Props

### Description
Represents a single slot within the InputOTP component.

| Prop | Type | Default |
|---|---|---|
| `index` | `number` | - |
```

--------------------------------

### MYDS Footer Component

Source: https://design.digital.gov.my/en/docs/develop/footer

This section provides the import statement and a basic anatomy example for using the MYDS Footer component in a React application.

```APIDOC
## MYDS Footer Component

### Description
The MYDS Footer component is a standardized footer for Malaysian government websites. It is designed to be imported and used within a React application.

### Usage

**Import:**
```javascript
import {
  Footer,
  SiteInfo,
  FooterSection,
  SiteLinkGroup,
  SiteLink,
  FooterLogo,
} from "@govtechmy/myds-react/footer";
```

**Anatomy:**
```javascript
export default () => (
  <Footer>
    <FooterSection>
      <SiteInfo>
        <FooterLogo />
      </SiteInfo>
      <SiteLinkGroup>
        <SiteLink />
      </SiteLinkGroup>
    </FooterSection>
  </Footer>
);
```
```

--------------------------------

### Input Component API

Source: https://design.digital.gov.my/en/docs/develop/input

Documentation for the Input component, detailing its props and usage.

```APIDOC
## Input Component

### Description
The Input component is a text input field that allows users to input text. It supports various customization options for size, state, icons, and addons.

### Method
N/A (This is a component documentation, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Input Props
- **size** (enum) - Optional - Specifies the size of the input. Default is `small`.
- **placeholder** (string) - Optional - Placeholder text for the input field.
- **defaultValue** (string) - Optional - The initial value for an uncontrolled input.
- **value** (string) - Optional - The current value for a controlled input.
- **onChange** (function) - Optional - Callback function triggered when the input value changes.
- **disabled** (boolean) - Optional - Disables the input field. Default is `false`.

#### InputIcon Props
- **position** (left | right) - Optional - Specifies the position of the icon (left or right).
- **children** (ReactNode) - Required - The icon element to display.

#### InputAddon Props
- **children** (ReactNode) - Required - The content to display as an addon (e.g., text, buttons).
```