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

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@i-dot-ai-npm/component-library-react",
+  "version": "0.0.1",
+  "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "govuk-frontend": ">=6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/i-dot-ai/component-library.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "license": "MIT"
+}

package/src/accordion/Accordion.tsx

@@ -0,0 +1,31 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { useEffect, useRef } from "react";
+
+type AccordionProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Accordion({ class: className, children, ...rest }: AccordionProps) {
+    const ref = useRef<HTMLElement>(null);
+    const classes = ["govuk-accordion", className ?? ""].filter(Boolean).join(" ");
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        // Dynamic import keeps govuk-frontend out of SSR (it touches
+        // HTMLElement at module load, which is undefined in Node).
+        void import("govuk-frontend").then(({ Accordion }) => {
+            if (!ref.current) return;
+            // Guard double-init (govuk stamps data-<module>-init).
+            if (ref.current.hasAttribute(`data-${Accordion.moduleName}-init`)) return;
+            new Accordion(ref.current);
+        });
+    }, []);
+
+    return (
+        <div className={classes} data-module="govuk-accordion" ref={ref} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/accordion/AccordionSection.tsx

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

package/src/accordion/AccordionSectionContent.tsx

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

package/src/accordion/AccordionSectionHeader.tsx

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

package/src/accordion/AccordionSectionHeading.tsx

@@ -0,0 +1,19 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type AccordionSectionHeadingProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function AccordionSectionHeading({ class: className, children, ...rest }: AccordionSectionHeadingProps) {
+    const classes = ["govuk-accordion__section-button", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <h2 className="govuk-accordion__section-heading">
+            <span className={classes} {...rest}>
+                {children ?? ""}
+            </span>
+        </h2>
+    );
+}

package/src/accordion/AccordionSectionSummary.tsx

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

package/src/back-link/BackLink.tsx

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

package/src/breadcrumbs/BreadcrumbItem.tsx

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

package/src/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type BreadcrumbsProps = {
+    inverse?: boolean;
+    collapseOnMobile?: boolean;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Breadcrumbs({ inverse, collapseOnMobile, class: className, children, ...rest }: BreadcrumbsProps) {
+    const classes = [
+        "govuk-breadcrumbs",
+        inverse ? "govuk-breadcrumbs--inverse" : "",
+        collapseOnMobile ? "govuk-breadcrumbs--collapse-on-mobile" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <nav className={classes} aria-label="Breadcrumb" {...rest}>
+            <ol className="govuk-breadcrumbs__list">
+                {children ?? ""}
+            </ol>
+        </nav>
+    );
+}

package/src/button/Button.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type ButtonProps = {
+    secondary?: boolean;
+    warning?: boolean;
+    inverse?: boolean;
+    href?: string;
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Button({ secondary, warning, inverse, 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>
+        ) : (
+        <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>
+        )
+    );
+}

package/src/button-group/ButtonGroup.tsx

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

package/src/card/Card.tsx

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

package/src/card/CardContent.tsx

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

package/src/card/CardGroup.tsx

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

package/src/card/CardHeading.tsx

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

package/src/card/CardIcon.tsx

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

package/src/card/CardLink.tsx

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

package/src/character-count/CharacterCount.tsx

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

package/src/character-count/CharacterCountMessage.tsx

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

package/src/checkboxes/CheckboxDivider.tsx

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

package/src/checkboxes/CheckboxInput.tsx

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

package/src/checkboxes/CheckboxItem.tsx

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

package/src/checkboxes/CheckboxLabel.tsx

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

package/src/checkboxes/Checkboxes.tsx

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

package/src/cookie-banner/CookieBanner.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type CookieBannerProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function CookieBanner({ class: className, children, ...rest }: CookieBannerProps) {
+    const classes = ["govuk-cookie-banner", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} data-nosnippet="" role="region" aria-label="Cookie banner" {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/cookie-banner/CookieBannerActions.tsx

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

package/src/cookie-banner/CookieBannerContent.tsx

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

package/src/cookie-banner/CookieBannerHeading.tsx

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

package/src/cookie-banner/CookieBannerMessage.tsx

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

package/src/date-input/DateInput.tsx

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

package/src/date-input/DateInputField.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type DateInputFieldProps = {
+    width?: "2" | "3" | "4";
+    class?: string;
+    [key: string]: unknown;
+};
+
+export default function DateInputField({ width = "2", class: className, ...rest }: DateInputFieldProps) {
+    const classes = [
+        "govuk-input govuk-date-input__input",
+        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <input className={classes} type="text" inputmode="numeric" {...rest} />
+    );
+}