@i-dot-ai-npm/component-library-react 0.0.1

package/src/notification-banner/NotificationBannerTitle.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type NotificationBannerTitleProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function NotificationBannerTitle({ class: className, children, ...rest }: NotificationBannerTitleProps) {
+    const classes = ["govuk-notification-banner__title", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h2 className={classes} id="govuk-notification-banner-title" {...rest}>
+            {children ?? ""}
+        </h2>
+    );
+}

package/src/pagination/Pagination.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PaginationProps = {
+    block?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Pagination({ block, class: className, children, ...rest }: PaginationProps) {
+    const classes = [
+        "govuk-pagination",
+        block ? "govuk-pagination--block" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <nav className={classes} aria-label="Pagination" {...rest}>
+            {children ?? ""}
+        </nav>
+    );
+}

package/src/pagination/PaginationItem.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PaginationItemProps = {
+    current?: boolean;
+    ellipsis?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PaginationItem({ current, ellipsis, class: className, children, ...rest }: PaginationItemProps) {
+
+    return (
+        ellipsis ? (
+        <li className="govuk-pagination__item govuk-pagination__item--ellipsis">
+            {children ?? "⋯"}
+        </li>
+        ) : (
+        <li className={["govuk-pagination__item", current ? "govuk-pagination__item--current" : ""].filter(Boolean).join(" ")}>
+            <a className={["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+                {children ?? ""}
+            </a>
+        </li>
+        )
+    );
+}

package/src/pagination/PaginationList.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PaginationListProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PaginationList({ class: className, children, ...rest }: PaginationListProps) {
+    const classes = ["govuk-pagination__list", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <ul className={classes} {...rest}>
+            {children ?? ""}
+        </ul>
+    );
+}

package/src/pagination/PaginationNext.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PaginationNextProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PaginationNext({ class: className, children, ...rest }: PaginationNextProps) {
+    const classes = ["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className="govuk-pagination__next">
+            <a className={classes} rel="next" {...rest}>
+                <span className="govuk-pagination__link-title">
+                    {children ?? "Next"}
+                    <span className="govuk-visually-hidden">
+                        page
+                    </span>
+                </span>
+                <svg className="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+                    <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+                </svg>
+            </a>
+        </div>
+    );
+}

package/src/pagination/PaginationPrev.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PaginationPrevProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PaginationPrev({ class: className, children, ...rest }: PaginationPrevProps) {
+    const classes = ["govuk-link govuk-pagination__link", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className="govuk-pagination__prev">
+            <a className={classes} rel="prev" {...rest}>
+                <svg className="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+                    <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+                </svg>
+                <span className="govuk-pagination__link-title">
+                    {children ?? "Previous"}
+                    <span className="govuk-visually-hidden">
+                        page
+                    </span>
+                </span>
+            </a>
+        </div>
+    );
+}

package/src/password-input/PasswordInput.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PasswordInputProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PasswordInput({ class: className, children, ...rest }: PasswordInputProps) {
+    const classes = ["govuk-input govuk-password-input__input govuk-js-password-input-input", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className="govuk-input__wrapper govuk-password-input__wrapper">
+            <input className={classes} type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none" {...rest} />
+            <button className="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" type="button" data-module="govuk-button" aria-label="Show password" hidden="">
+                {children ?? "Show"}
+            </button>
+        </div>
+    );
+}

package/src/phase-banner/PhaseBanner.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type PhaseBannerProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function PhaseBanner({ class: className, children, ...rest }: PhaseBannerProps) {
+    const classes = ["govuk-phase-banner", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            <p className="govuk-phase-banner__content">
+                {children ?? ""}
+            </p>
+        </div>
+    );
+}

package/src/radios/RadioDivider.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type RadioDividerProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioDivider({ class: className, children }: RadioDividerProps) {
+    const classes = ["govuk-radios__divider", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes}>
+            {children ?? "or"}
+        </div>
+    );
+}

package/src/radios/RadioInput.tsx

@@ -0,0 +1,14 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type RadioInputProps = {
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function RadioInput({ class: className, ...rest }: RadioInputProps) {
+    const classes = ["govuk-radios__input", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <input className={classes} type="radio" {...rest} />
+    );
+}

package/src/radios/RadioItem.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type RadioItemProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioItem({ class: className, children, ...rest }: RadioItemProps) {
+    const classes = ["govuk-radios__item", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/radios/Radios.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type RadiosProps = {
+    inline?: boolean;
+    small?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Radios({ inline, small, class: className, children, ...rest }: RadiosProps) {
+    const classes = [
+        "govuk-radios",
+        inline ? "govuk-radios--inline" : "",
+        small ? "govuk-radios--small" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} data-module="govuk-radios" {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/select/Select.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SelectProps = {
+    subtle?: boolean;
+    error?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Select({ subtle, error, class: className, children, ...rest }: SelectProps) {
+    const classes = [
+        "govuk-select",
+        subtle ? "govuk-select--subtle" : "",
+        error ? "govuk-select--error" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <select className={classes} {...rest}>
+            {children ?? ""}
+        </select>
+    );
+}

package/src/select/SelectOption.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SelectOptionProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SelectOption({ class: className, children, ...rest }: SelectOptionProps) {
+    const classes = ["", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <option className={classes} {...rest}>
+            {children ?? ""}
+        </option>
+    );
+}

package/src/service-navigation/ServiceNavigation.tsx

@@ -0,0 +1,34 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ServiceNavigationProps = {
+    sideNav?: boolean;
+    inverse?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ServiceNavigation({ sideNav, inverse, class: className, children, ...rest }: ServiceNavigationProps) {
+    const classes = [
+        "govuk-service-navigation",
+        sideNav ? "govuk-service-navigation--side-nav" : "",
+        inverse ? "govuk-service-navigation--inverse" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} data-module="govuk-service-navigation" {...rest}>
+            <div className="govuk-width-container">
+                <div className="govuk-service-navigation__container">
+                    <nav className="govuk-service-navigation__wrapper" aria-label="Menu">
+                        <ul className="govuk-service-navigation__list" id="navigation">
+                            {children ?? ""}
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/service-navigation/ServiceNavigationItem.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ServiceNavigationItemProps = {
+    href?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function ServiceNavigationItem({ href, class: className, children, ...rest }: ServiceNavigationItemProps) {
+    const classes = ["govuk-service-navigation__item", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li className={classes} {...rest}>
+            <a className="govuk-service-navigation__link" href={href}>
+                {children ?? ""}
+            </a>
+        </li>
+    );
+}

package/src/side-nav/SideNav.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNav({ class: className, children, ...rest }: SideNavProps) {
+    const classes = ["side-nav", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <nav className={classes} {...rest}>
+            {children ?? ""}
+        </nav>
+    );
+}

package/src/side-nav/SideNavItem.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavItemProps = {
+    href?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNavItem({ href, class: className, children, ...rest }: SideNavItemProps) {
+    const classes = ["side-nav__item", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <li className={classes} {...rest}>
+            <a className="govuk-link govuk-link--no-visited-state govuk-!-font-size-16 govuk-link--no-underline" href={href}>
+                {children ?? ""}
+            </a>
+        </li>
+    );
+}

package/src/side-nav/SideNavList.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavListProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNavList({ class: className, children, ...rest }: SideNavListProps) {
+    const classes = ["govuk-list govuk-list--spaced", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <ul className={classes} {...rest}>
+            {children ?? ""}
+        </ul>
+    );
+}

package/src/side-nav/SideNavSubnavHeading.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavSubnavHeadingProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNavSubnavHeading({ class: className, children, ...rest }: SideNavSubnavHeadingProps) {
+    const classes = ["side-nav__section-heading", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h3 className={classes} {...rest}>
+            {children ?? ""}
+        </h3>
+    );
+}

package/src/side-nav/SideNavSubnavList.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavSubnavListProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNavSubnavList({ class: className, children, ...rest }: SideNavSubnavListProps) {
+    const classes = ["side-nav__subnav-list", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <ul className={classes} {...rest}>
+            {children ?? ""}
+        </ul>
+    );
+}

package/src/side-nav/SideNavTitle.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SideNavTitleProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SideNavTitle({ class: className, children, ...rest }: SideNavTitleProps) {
+    const classes = ["side-nav__title", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h2 className={classes} {...rest}>
+            {children ?? ""}
+        </h2>
+    );
+}

package/src/skip-link/SkipLink.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SkipLinkProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SkipLink({ class: className, children, ...rest }: SkipLinkProps) {
+    const classes = ["govuk-skip-link", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <a className={classes} data-module="govuk-skip-link" {...rest}>
+            {children ?? ""}
+        </a>
+    );
+}

package/src/summary-list/SummaryList.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SummaryListProps = {
+    noBorder?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryList({ noBorder, class: className, children, ...rest }: SummaryListProps) {
+    const classes = [
+        "govuk-summary-list",
+        noBorder ? "govuk-summary-list--no-border" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <dl className={classes} {...rest}>
+            {children ?? ""}
+        </dl>
+    );
+}

package/src/summary-list/SummaryListActions.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SummaryListActionsProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryListActions({ class: className, children, ...rest }: SummaryListActionsProps) {
+    const classes = ["govuk-summary-list__actions", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <dd className={classes} {...rest}>
+            {children ?? ""}
+        </dd>
+    );
+}

package/src/summary-list/SummaryListKey.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SummaryListKeyProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryListKey({ class: className, children, ...rest }: SummaryListKeyProps) {
+    const classes = ["govuk-summary-list__key", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <dt className={classes} {...rest}>
+            {children ?? ""}
+        </dt>
+    );
+}

package/src/summary-list/SummaryListRow.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SummaryListRowProps = {
+    noActions?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryListRow({ noActions, class: className, children, ...rest }: SummaryListRowProps) {
+    const classes = [
+        "govuk-summary-list__row",
+        noActions ? "govuk-summary-list__row--no-actions" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/summary-list/SummaryListValue.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type SummaryListValueProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function SummaryListValue({ class: className, children, ...rest }: SummaryListValueProps) {
+    const classes = ["govuk-summary-list__value", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <dd className={classes} {...rest}>
+            {children ?? ""}
+        </dd>
+    );
+}

package/src/table/Table.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type TableProps = {
+    smallTextUntilTablet?: boolean;
+    subtle?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Table({ smallTextUntilTablet, subtle, class: className, children, ...rest }: TableProps) {
+    const classes = [
+        "govuk-table",
+        smallTextUntilTablet ? "govuk-table--small-text-until-tablet" : "",
+        subtle ? "govuk-table--subtle" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <table className={classes} {...rest}>
+            {children ?? ""}
+        </table>
+    );
+}

package/src/table/TableBody.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type TableBodyProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function TableBody({ class: className, children, ...rest }: TableBodyProps) {
+    const classes = ["govuk-table__body", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <tbody className={classes} {...rest}>
+            {children ?? ""}
+        </tbody>
+    );
+}