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

package/src/fieldset/FieldsetLegend.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type FieldsetLegendProps = {
     size?: "small" | "medium" | "large" | "xl";
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/file-upload/FileUpload.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type FileUploadProps = {
     class?: string;
     [key: string]: unknown;

package/src/form-group/FormGroup.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type FormGroupProps = {
     inline?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/govuk-frontend.d.ts

@@ -0,0 +1,13 @@
+// govuk-frontend ships no type declarations and there is no @types package.
+// Minimal ambient declaration covering the components initialised by this library.
+declare module "govuk-frontend" {
+    interface GOVUKComponent {
+        moduleName: string;
+        new (element: Element): unknown;
+    }
+
+    export const Accordion: GOVUKComponent;
+    export const Tabs: GOVUKComponent;
+
+    export function initAll(): void;
+}

package/src/header/Header.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type HeaderProps = {
     href?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/hint/Hint.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type HintProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/index.ts

@@ -1,4 +1,3 @@
-// AUTO-GENERATED barrel. Do not edit by hand.
 export { default as AccordionSectionContent } from "./accordion/AccordionSectionContent";
 export { default as AccordionSectionHeader } from "./accordion/AccordionSectionHeader";
 export { default as AccordionSectionHeading } from "./accordion/AccordionSectionHeading";
@@ -18,6 +17,7 @@ export { default as CardLink } from "./card/CardLink";
 export { default as Card } from "./card/Card";
 export { default as CharacterCountMessage } from "./character-count/CharacterCountMessage";
 export { default as CharacterCount } from "./character-count/CharacterCount";
+export { default as CheckboxConditional } from "./checkboxes/CheckboxConditional";
 export { default as CheckboxDivider } from "./checkboxes/CheckboxDivider";
 export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
 export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
@@ -64,9 +64,11 @@ export { default as PaginationPrev } from "./pagination/PaginationPrev";
 export { default as Pagination } from "./pagination/Pagination";
 export { default as PasswordInput } from "./password-input/PasswordInput";
 export { default as PhaseBanner } from "./phase-banner/PhaseBanner";
+export { default as RadioConditional } from "./radios/RadioConditional";
 export { default as RadioDivider } from "./radios/RadioDivider";
 export { default as RadioInput } from "./radios/RadioInput";
 export { default as RadioItem } from "./radios/RadioItem";
+export { default as RadioLabel } from "./radios/RadioLabel";
 export { default as Radios } from "./radios/Radios";
 export { default as SelectOption } from "./select/SelectOption";
 export { default as Select } from "./select/Select";

package/src/input/Input.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type InputProps = {
     error?: boolean;
     extraLetterSpacing?: boolean;

package/src/input-label/InputLabel.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type InputLabelProps = {
     size?: "small" | "medium" | "large" | "xl";
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/inset-text/InsetText.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type InsetTextProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/link/Link.tsx

@@ -1,11 +1,11 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type LinkProps = {
     noUnderline?: boolean;
     noVisitedState?: boolean;
     variant?: "warning" | "inverse";
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/list/List.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ListProps = {
     spaced?: boolean;
     numbered?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
@@ -12,13 +12,13 @@ export default function List({ spaced, numbered, class: className, children, ...
 
     return (
         numbered ? (
-        <ol className={["govuk-list govuk-list--number", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
-            {children ?? ""}
-        </ol>
+            <ol className={["govuk-list govuk-list--number", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+                {children ?? ""}
+            </ol>
         ) : (
-        <ul className={["govuk-list", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
-            {children ?? ""}
-        </ul>
+            <ul className={["govuk-list", spaced ? "govuk-list--spaced" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+                {children ?? ""}
+            </ul>
         )
     );
 }

package/src/list/ListItem.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ListItemProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/notification-banner/NotificationBanner.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type NotificationBannerProps = {
     success?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
@@ -11,13 +11,13 @@ export default function NotificationBanner({ success, class: className, children
 
     return (
         success ? (
-        <div className={["govuk-notification-banner govuk-notification-banner--success", className ?? ""].filter(Boolean).join(" ")} role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
-            {children ?? ""}
-        </div>
+            <div className={["govuk-notification-banner govuk-notification-banner--success", className ?? ""].filter(Boolean).join(" ")} role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
+                {children ?? ""}
+            </div>
         ) : (
-        <div className={["govuk-notification-banner", className ?? ""].filter(Boolean).join(" ")} role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
-            {children ?? ""}
-        </div>
+            <div className={["govuk-notification-banner", className ?? ""].filter(Boolean).join(" ")} role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" {...rest}>
+                {children ?? ""}
+            </div>
         )
     );
 }

package/src/notification-banner/NotificationBannerContent.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type NotificationBannerContentProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/notification-banner/NotificationBannerHeader.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type NotificationBannerHeaderProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/notification-banner/NotificationBannerHeading.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type NotificationBannerHeadingProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/notification-banner/NotificationBannerTitle.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type NotificationBannerTitleProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/pagination/Pagination.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PaginationProps = {
     block?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/pagination/PaginationItem.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PaginationItemProps = {
     current?: boolean;
     ellipsis?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
@@ -12,15 +12,15 @@ export default function PaginationItem({ current, ellipsis, class: className, ch
 
     return (
         ellipsis ? (
-        <li className="govuk-pagination__item govuk-pagination__item--ellipsis">
-            {children ?? "⋯"}
-        </li>
+            <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>
+            <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

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PaginationListProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/pagination/PaginationNext.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PaginationNextProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/pagination/PaginationPrev.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PaginationPrevProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/password-input/PasswordInput.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PasswordInputProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
@@ -11,8 +11,8 @@ export default function PasswordInput({ class: className, children, ...rest }: P
 
     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="">
+            <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

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type PhaseBannerProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/radios/RadioConditional.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type RadioConditionalProps = {
+    hidden?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioConditional({ hidden = true, class: className, children, ...rest }: RadioConditionalProps) {
+    const classes = [
+        "govuk-radios__conditional",
+        hidden ? "govuk-radios__conditional--hidden" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/radios/RadioDivider.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type RadioDividerProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/radios/RadioInput.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type RadioInputProps = {
     class?: string;
     [key: string]: unknown;

package/src/radios/RadioItem.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type RadioItemProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/radios/RadioLabel.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type RadioLabelProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioLabel({ class: className, children, ...rest }: RadioLabelProps) {
+    const classes = ["govuk-label govuk-radios__label", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <label className={classes} {...rest}>
+            {children ?? ""}
+        </label>
+    );
+}

package/src/radios/Radios.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type RadiosProps = {
     inline?: boolean;
     small?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/select/Select.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SelectProps = {
     subtle?: boolean;
     error?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/select/SelectOption.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SelectOptionProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/service-navigation/ServiceNavigation.tsx

@@ -1,10 +1,10 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ServiceNavigationProps = {
     sideNav?: boolean;
     inverse?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/service-navigation/ServiceNavigationItem.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ServiceNavigationItemProps = {
     href?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNav.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNavItem.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavItemProps = {
     href?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNavList.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavListProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNavSubnavHeading.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavSubnavHeadingProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNavSubnavList.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavSubnavListProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/side-nav/SideNavTitle.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SideNavTitleProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/skip-link/SkipLink.tsx

@@ -1,8 +1,8 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SkipLinkProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 

package/src/summary-list/SummaryList.tsx

@@ -1,9 +1,9 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type SummaryListProps = {
     noBorder?: boolean;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };