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

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
-    "./*": "./src/*"
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*",
+      "default": "./src/*"
+    }
   },
+  "types": "./src/index.ts",
   "files": [
     "src"
   ],
   "peerDependencies": {
+    "govuk-frontend": ">=6",
     "react": ">=18",
-    "govuk-frontend": ">=6"
+    "react-dom": ">=18"
   },
   "repository": {
     "type": "git",
@@ -23,5 +31,8 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "devDependencies": {
+    "govuk-frontend": "^6.5.0"
+  }
+}

package/src/accordion/Accordion.tsx

@@ -1,14 +1,14 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 import { useEffect, useRef } from "react";
 
 type AccordionProps = {
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
 export default function Accordion({ class: className, children, ...rest }: AccordionProps) {
-    const ref = useRef<HTMLElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const classes = ["govuk-accordion", className ?? ""].filter(Boolean).join(" ");
     useEffect(() => {
         const el = ref.current;

package/src/accordion/AccordionSection.tsx

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

package/src/accordion/AccordionSectionContent.tsx

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

package/src/accordion/AccordionSectionHeader.tsx

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

package/src/accordion/AccordionSectionHeading.tsx

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

package/src/accordion/AccordionSectionSummary.tsx

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

package/src/back-link/BackLink.tsx

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

package/src/breadcrumbs/BreadcrumbItem.tsx

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

package/src/breadcrumbs/Breadcrumbs.tsx

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

package/src/button/Button.tsx

@@ -1,26 +1,28 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { ReactNode } from 'react';
 
 type ButtonProps = {
     secondary?: boolean;
+    tertiary?: boolean;
     warning?: boolean;
     inverse?: boolean;
+    small?: boolean;
     href?: string;
     class?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function Button({ secondary, warning, inverse, href, class: className, children, ...rest }: ButtonProps) {
+export default function Button({ secondary, tertiary, warning, inverse, small, href, class: className, children, ...rest }: ButtonProps) {
 
     return (
         href ? (
-        <a href={href} role="button" className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
-            {children ?? ""}
-        </a>
+            <a href={href} role="button" className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+                {children ?? ""}
+            </a>
         ) : (
-        <button className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", className ?? ""].filter(Boolean).join(" ")} data-module="govuk-button" {...rest}>
-            {children ?? ""}
-        </button>
+            <button className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} data-module="govuk-button" {...rest}>
+                {children ?? ""}
+            </button>
         )
     );
 }

package/src/button-group/ButtonGroup.tsx

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

package/src/card/Card.tsx

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

package/src/card/CardContent.tsx

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

package/src/card/CardGroup.tsx

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

package/src/card/CardHeading.tsx

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

package/src/card/CardIcon.tsx

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

package/src/card/CardLink.tsx

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

package/src/character-count/CharacterCount.tsx

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

package/src/character-count/CharacterCountMessage.tsx

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

package/src/checkboxes/CheckboxDivider.tsx

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

package/src/checkboxes/CheckboxInput.tsx

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

package/src/checkboxes/CheckboxItem.tsx

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

package/src/checkboxes/CheckboxLabel.tsx

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

package/src/checkboxes/Checkboxes.tsx

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

package/src/cookie-banner/CookieBanner.tsx

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

package/src/cookie-banner/CookieBannerActions.tsx

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

package/src/cookie-banner/CookieBannerContent.tsx

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

package/src/cookie-banner/CookieBannerHeading.tsx

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

package/src/cookie-banner/CookieBannerMessage.tsx

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

package/src/date-input/DateInput.tsx

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

package/src/date-input/DateInputField.tsx

@@ -1,5 +1,3 @@
-// AUTO-GENERATED from HTML spec. Do not edit by hand.
-
 type DateInputFieldProps = {
     width?: "2" | "3" | "4";
     class?: string;
@@ -16,6 +14,6 @@ export default function DateInputField({ width = "2", class: className, ...rest
         .join(" ");
 
     return (
-        <input className={classes} type="text" inputmode="numeric" {...rest} />
+        <input className={classes} type="text" inputMode="numeric" {...rest} />
     );
 }

package/src/date-input/DateInputItem.tsx

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

package/src/details/Details.tsx

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

package/src/details/DetailsSummary.tsx

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

package/src/details/DetailsText.tsx

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

package/src/error-message/ErrorMessage.tsx

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

package/src/error-summary/ErrorSummary.tsx

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

package/src/error-summary/ErrorSummaryBody.tsx

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

package/src/error-summary/ErrorSummaryItem.tsx

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

package/src/error-summary/ErrorSummaryList.tsx

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

package/src/error-summary/ErrorSummaryTitle.tsx

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

package/src/fieldset/Fieldset.tsx

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

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;
+}