@i-dot-ai-npm/component-library-react 0.0.7 → 0.0.9

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.7",
-  "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
+  "version": "0.0.9",
+  "description": "React components for i.AI GOV.UK.",
   "type": "module",
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
   "exports": {
     ".": {
       "types": "./src/index.ts",
@@ -18,6 +21,7 @@
     "src"
   ],
   "peerDependencies": {
+    "@i-dot-ai-npm/component-library-frontend": ">=0.0.9",
     "govuk-frontend": ">=6",
     "react": ">=18",
     "react-dom": ">=18"
@@ -33,6 +37,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "govuk-frontend": "^6.5.0"
+    "@i-dot-ai-npm/component-library-frontend": "workspace:*",
+    "@types/react": "^19.3.0",
+    "govuk-frontend": "^6.5.0",
+    "react": "^19.3.0",
+    "typescript": "^5.9.3"
   }
 }

package/src/accordion/Accordion.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { useEffect, useRef } from "react";
 
-type AccordionProps = {
+type AccordionProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Accordion({ class: className, children, ...rest }: AccordionProps) {

package/src/accordion/AccordionSection.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type AccordionSectionProps = {
+type AccordionSectionProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function AccordionSection({ class: className, children, ...rest }: AccordionSectionProps) {

package/src/accordion/AccordionSectionContent.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type AccordionSectionContentProps = {
+type AccordionSectionContentProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function AccordionSectionContent({ class: className, children, ...rest }: AccordionSectionContentProps) {

package/src/accordion/AccordionSectionHeader.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type AccordionSectionHeaderProps = {
+type AccordionSectionHeaderProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function AccordionSectionHeader({ class: className, children, ...rest }: AccordionSectionHeaderProps) {

package/src/accordion/AccordionSectionHeading.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type AccordionSectionHeadingProps = {
+type AccordionSectionHeadingProps = ComponentPropsWithoutRef<'span'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function AccordionSectionHeading({ class: className, children, ...rest }: AccordionSectionHeadingProps) {

package/src/accordion/AccordionSectionSummary.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type AccordionSectionSummaryProps = {
+type AccordionSectionSummaryProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function AccordionSectionSummary({ class: className, children, ...rest }: AccordionSectionSummaryProps) {

package/src/back-link/BackLink.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type BackLinkProps = {
+type BackLinkProps = ComponentPropsWithoutRef<'a'> & {
     inverse?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function BackLink({ inverse, class: className, children, ...rest }: BackLinkProps) {

package/src/breadcrumbs/BreadcrumbItem.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type BreadcrumbItemProps = {
+type BreadcrumbItemProps = ComponentPropsWithoutRef<'li'> & {
     href?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function BreadcrumbItem({ href, class: className, children, ...rest }: BreadcrumbItemProps) {

package/src/breadcrumbs/Breadcrumbs.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type BreadcrumbsProps = {
+type BreadcrumbsProps = ComponentPropsWithoutRef<'nav'> & {
     inverse?: boolean;
     collapseOnMobile?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Breadcrumbs({ inverse, collapseOnMobile, class: className, children, ...rest }: BreadcrumbsProps) {

package/src/button/Button.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ButtonProps = {
+type ButtonProps = Omit<ComponentPropsWithoutRef<'a'> & ComponentPropsWithoutRef<'button'>, 'type' | 'href'> & {
     secondary?: boolean;
     tertiary?: boolean;
     warning?: boolean;
@@ -11,7 +11,6 @@ type ButtonProps = {
     type?: "button" | "reset" | "submit";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 const StartIcon = () => (

package/src/button-group/ButtonGroup.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ButtonGroupProps = {
+type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ButtonGroup({ class: className, children, ...rest }: ButtonGroupProps) {

package/src/card/Card.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardProps = {
+type CardProps = ComponentPropsWithoutRef<'div'> & {
     secondary?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Card({ secondary, class: className, children, ...rest }: CardProps) {

package/src/card/CardContent.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardContentProps = {
+type CardContentProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CardContent({ class: className, children, ...rest }: CardContentProps) {

package/src/card/CardGroup.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardGroupProps = {
+type CardGroupProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CardGroup({ class: className, children, ...rest }: CardGroupProps) {

package/src/card/CardHeading.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardHeadingProps = {
+type CardHeadingProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CardHeading({ class: className, children, ...rest }: CardHeadingProps) {

package/src/card/CardIcon.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardIconProps = {
+type CardIconProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CardIcon({ class: className, children, ...rest }: CardIconProps) {

package/src/card/CardLink.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CardLinkProps = {
+type CardLinkProps = ComponentPropsWithoutRef<'a'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CardLink({ class: className, children, ...rest }: CardLinkProps) {

package/src/character-count/CharacterCount.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CharacterCountProps = {
+type CharacterCountProps = ComponentPropsWithoutRef<'textarea'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CharacterCount({ class: className, children, ...rest }: CharacterCountProps) {

package/src/character-count/CharacterCountMessage.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CharacterCountMessageProps = {
+type CharacterCountMessageProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CharacterCountMessage({ class: className, children, ...rest }: CharacterCountMessageProps) {

package/src/checkboxes/CheckboxConditional.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CheckboxConditionalProps = {
+type CheckboxConditionalProps = ComponentPropsWithoutRef<'div'> & {
     hidden?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CheckboxConditional({ hidden = true, class: className, children, ...rest }: CheckboxConditionalProps) {

package/src/checkboxes/CheckboxDivider.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type CheckboxDividerProps = {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CheckboxDivider({ class: className, children }: CheckboxDividerProps) {

package/src/checkboxes/CheckboxInput.tsx

@@ -1,6 +1,7 @@
-type CheckboxInputProps = {
+import type { ComponentPropsWithoutRef } from 'react';
+
+type CheckboxInputProps = ComponentPropsWithoutRef<'input'> & {
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function CheckboxInput({ class: className, ...rest }: CheckboxInputProps) {

package/src/checkboxes/CheckboxItem.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CheckboxItemProps = {
+type CheckboxItemProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CheckboxItem({ class: className, children, ...rest }: CheckboxItemProps) {

package/src/checkboxes/CheckboxLabel.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CheckboxLabelProps = {
+type CheckboxLabelProps = ComponentPropsWithoutRef<'label'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CheckboxLabel({ class: className, children, ...rest }: CheckboxLabelProps) {

package/src/checkboxes/Checkboxes.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CheckboxesProps = {
+type CheckboxesProps = ComponentPropsWithoutRef<'div'> & {
     small?: boolean;
     subtle?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Checkboxes({ small, subtle, class: className, children, ...rest }: CheckboxesProps) {

package/src/contents-panel/ContentsPanel.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ContentsPanelProps = {
+type ContentsPanelProps = ComponentPropsWithoutRef<'nav'> & {
     heading?: string;
     headingId?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ContentsPanel({

package/src/contents-panel/ContentsPanelItem.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ContentsPanelItemProps = {
+type ContentsPanelItemProps = ComponentPropsWithoutRef<'li'> & {
     href?: string;
     current?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ContentsPanelItem({

package/src/contents-panel/ContentsPanelList.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ContentsPanelListProps = {
+type ContentsPanelListProps = ComponentPropsWithoutRef<'ul'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ContentsPanelList({ class: className, children, ...rest }: ContentsPanelListProps) {

package/src/contents-panel/ContentsPanelListHeading.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ContentsPanelListHeadingProps = {
+type ContentsPanelListHeadingProps = ComponentPropsWithoutRef<'h3'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ContentsPanelListHeading({ class: className, children, ...rest }: ContentsPanelListHeadingProps) {

package/src/cookie-banner/CookieBanner.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CookieBannerProps = {
+type CookieBannerProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CookieBanner({ class: className, children, ...rest }: CookieBannerProps) {

package/src/cookie-banner/CookieBannerActions.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CookieBannerActionsProps = {
+type CookieBannerActionsProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CookieBannerActions({ class: className, children, ...rest }: CookieBannerActionsProps) {

package/src/cookie-banner/CookieBannerContent.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CookieBannerContentProps = {
+type CookieBannerContentProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CookieBannerContent({ class: className, children, ...rest }: CookieBannerContentProps) {

package/src/cookie-banner/CookieBannerHeading.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CookieBannerHeadingProps = {
+type CookieBannerHeadingProps = ComponentPropsWithoutRef<'h2'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CookieBannerHeading({ class: className, children, ...rest }: CookieBannerHeadingProps) {

package/src/cookie-banner/CookieBannerMessage.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type CookieBannerMessageProps = {
+type CookieBannerMessageProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function CookieBannerMessage({ class: className, children, ...rest }: CookieBannerMessageProps) {

package/src/date-input/DateInput.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DateInputProps = {
+type DateInputProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function DateInput({ class: className, children, ...rest }: DateInputProps) {

package/src/date-input/DateInputField.tsx

@@ -1,13 +1,14 @@
-type DateInputFieldProps = {
-    width?: "2" | "3" | "4";
+import type { ComponentPropsWithoutRef } from 'react';
+
+type DateInputFieldProps = Omit<ComponentPropsWithoutRef<'input'>, 'width'> & {
+    width?: 2 | 3 | 4;
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function DateInputField({ width, class: className, ...rest }: DateInputFieldProps) {
     const classes = [
         "govuk-input govuk-date-input__input",
-        (width ? { "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width] : ""),
+        (width ? { 2: "govuk-input--width-2", 3: "govuk-input--width-3", 4: "govuk-input--width-4" }[width] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/date-input/DateInputItem.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DateInputItemProps = {
+type DateInputItemProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function DateInputItem({ class: className, children, ...rest }: DateInputItemProps) {

package/src/details/Details.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DetailsProps = {
+type DetailsProps = ComponentPropsWithoutRef<'details'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Details({ class: className, children, ...rest }: DetailsProps) {

package/src/details/DetailsSummary.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DetailsSummaryProps = {
+type DetailsSummaryProps = ComponentPropsWithoutRef<'summary'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function DetailsSummary({ class: className, children, ...rest }: DetailsSummaryProps) {

package/src/details/DetailsText.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DetailsTextProps = {
+type DetailsTextProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function DetailsText({ class: className, children, ...rest }: DetailsTextProps) {

package/src/error-message/ErrorMessage.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorMessageProps = {
+type ErrorMessageProps = ComponentPropsWithoutRef<'p'> & {
     visuallyHiddenText?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorMessage({ visuallyHiddenText = "Error", class: className, children, ...rest }: ErrorMessageProps) {

package/src/error-summary/ErrorSummary.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorSummaryProps = {
+type ErrorSummaryProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorSummary({ class: className, children, ...rest }: ErrorSummaryProps) {

package/src/error-summary/ErrorSummaryBody.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorSummaryBodyProps = {
+type ErrorSummaryBodyProps = ComponentPropsWithoutRef<'div'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorSummaryBody({ class: className, children, ...rest }: ErrorSummaryBodyProps) {

package/src/error-summary/ErrorSummaryItem.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorSummaryItemProps = {
+type ErrorSummaryItemProps = ComponentPropsWithoutRef<'a'> & {
     href?: string;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorSummaryItem({ href, class: className, children, ...rest }: ErrorSummaryItemProps) {

package/src/error-summary/ErrorSummaryList.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ErrorSummaryListProps = {
+type ErrorSummaryListProps = ComponentPropsWithoutRef<'ul'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ErrorSummaryList({ class: className, children, ...rest }: ErrorSummaryListProps) {