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

package/src/table/TableCaption.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type TableCaptionProps = {
+    size?: "small" | "medium" | "large" | "xl";
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function TableCaption({ size, class: className, children, ...rest }: TableCaptionProps) {
+    const classes = [
+        "govuk-table__caption",
+        ({ "small": "govuk-table__caption--s", "medium": "govuk-table__caption--m", "large": "govuk-table__caption--l", "xl": "govuk-table__caption--xl" }[size] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <caption className={classes} {...rest}>
+            {children ?? ""}
+        </caption>
+    );
+}

package/src/table/TableCell.tsx

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

package/src/table/TableHead.tsx

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

package/src/table/TableHeader.tsx

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

package/src/table/TableRow.tsx

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

package/src/tabs/Tab.tsx

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

package/src/tabs/TabPanel.tsx

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

package/src/tabs/Tabs.tsx

@@ -0,0 +1,31 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+import { useEffect, useRef } from "react";
+
+type TabsProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Tabs({ class: className, children, ...rest }: TabsProps) {
+    const ref = useRef<HTMLElement>(null);
+    const classes = ["govuk-tabs", 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(({ Tabs }) => {
+            if (!ref.current) return;
+            // Guard double-init (govuk stamps data-<module>-init).
+            if (ref.current.hasAttribute(`data-${Tabs.moduleName}-init`)) return;
+            new Tabs(ref.current);
+        });
+    }, []);
+
+    return (
+        <div className={classes} data-module="govuk-tabs" ref={ref} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/tabs/TabsList.tsx

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

package/src/tabs/TabsTitle.tsx

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

package/src/tag/Tag.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type TagProps = {
+    colour?: "grey" | "green" | "turquoise" | "blue" | "light-blue" | "purple" | "pink" | "red" | "orange" | "yellow";
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function Tag({ colour, class: className, children, ...rest }: TagProps) {
+    const classes = [
+        "govuk-tag",
+        ({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] ?? ""),
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <strong className={classes} {...rest}>
+            {children ?? ""}
+        </strong>
+    );
+}

package/src/task-list/TaskList.tsx

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

package/src/task-list/TaskListHint.tsx

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

package/src/task-list/TaskListItem.tsx

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

package/src/task-list/TaskListLink.tsx

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

package/src/task-list/TaskListNameAndHint.tsx

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

package/src/task-list/TaskListStatus.tsx

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

package/src/textarea/Textarea.tsx

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

package/src/toggle/Toggle.tsx

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

package/src/toggle/ToggleItem.tsx

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

package/src/toggle/ToggleLabel.tsx

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

package/src/warning-text/WarningText.tsx

@@ -0,0 +1,25 @@
+// AUTO-GENERATED from HTML spec. Do not edit by hand.
+
+type WarningTextProps = {
+    class?: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+};
+
+export default function WarningText({ class: className, children, ...rest }: WarningTextProps) {
+    const classes = ["govuk-warning-text", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            <span className="govuk-warning-text__icon" aria-hidden="true">
+                !
+            </span>
+            <strong className="govuk-warning-text__text">
+                <span className="govuk-visually-hidden">
+                    Warning
+                </span>
+                {children ?? ""}
+            </strong>
+        </div>
+    );
+}