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

package/src/radios/Radios.tsx

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

package/src/select/Select.tsx

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

package/src/select/SelectOption.tsx

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

package/src/service-navigation/ServiceNavigation.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ServiceNavigationProps = {
+type ServiceNavigationProps = ComponentPropsWithoutRef<'section'> & ComponentPropsWithoutRef<'div'> & {
     sideNav?: boolean;
     inverse?: boolean;
     serviceName?: string;
@@ -18,7 +18,6 @@ type ServiceNavigationProps = {
     endSlotInline?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ServiceNavigation({

package/src/service-navigation/ServiceNavigationItem.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type ServiceNavigationItemProps = {
+type ServiceNavigationItemProps = ComponentPropsWithoutRef<'a'> & ComponentPropsWithoutRef<'span'> & {
     href?: string;
     /** Current page — adds active styling + aria-current="page". */
     current?: boolean;
@@ -8,7 +8,6 @@ type ServiceNavigationItemProps = {
     active?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function ServiceNavigationItem({ href, current, active, class: className, children, ...rest }: ServiceNavigationItemProps) {

package/src/side-nav/SideNav.tsx

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

package/src/side-nav/SideNavItem.tsx

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

package/src/side-nav/SideNavList.tsx

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

package/src/side-nav/SideNavSubnavHeading.tsx

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

package/src/side-nav/SideNavSubnavList.tsx

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

package/src/side-nav/SideNavTitle.tsx

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

package/src/skip-link/SkipLink.tsx

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

package/src/summary-card/SummaryCard.tsx

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

package/src/summary-card/SummaryCardAction.tsx

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

package/src/summary-card/SummaryCardActions.tsx

@@ -1,12 +1,11 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type SummaryCardActionsProps = {
+type SummaryCardActionsProps = ComponentPropsWithoutRef<'div'> & ComponentPropsWithoutRef<'ul'> & {
     /** Render as a single-action wrapper (`<div>`) instead of a list (`<ul>`).
      *  govuk uses a div for exactly one action and a ul for multiple. */
     single?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function SummaryCardActions({ single, class: className, children, ...rest }: SummaryCardActionsProps) {

package/src/summary-card/SummaryCardContent.tsx

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

package/src/summary-card/SummaryCardTitle.tsx

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

package/src/summary-card/SummaryCardTitleWrapper.tsx

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

package/src/summary-list/SummaryList.tsx

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

package/src/summary-list/SummaryListActions.tsx

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

package/src/summary-list/SummaryListKey.tsx

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

package/src/summary-list/SummaryListRow.tsx

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

package/src/summary-list/SummaryListValue.tsx

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

package/src/table/Table.tsx

@@ -1,13 +1,12 @@
 /** @jsxImportSource react */
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableProps = {
+type TableProps = ComponentPropsWithoutRef<'table'> & {
     smallTextUntilTablet?: boolean;
     subtle?: boolean;
     summary?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Table({ smallTextUntilTablet, subtle, summary, class: className, children, ...rest }: TableProps) {

package/src/table/TableBody.tsx

@@ -1,11 +1,10 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableBodyProps = {
+type TableBodyProps = ComponentPropsWithoutRef<'tbody'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableBody({ class: className, children, ...rest }: TableBodyProps) {

package/src/table/TableCaption.tsx

@@ -1,12 +1,11 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableCaptionProps = {
+type TableCaptionProps = ComponentPropsWithoutRef<'caption'> & {
     size?: "small" | "medium" | "large" | "xl";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableCaption({ size, class: className, children, ...rest }: TableCaptionProps) {

package/src/table/TableCell.tsx

@@ -1,15 +1,14 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableCellProps = {
+type TableCellProps = ComponentPropsWithoutRef<'td'> & {
     numeric?: boolean;
     stretch?: boolean;
     noWrap?: boolean;
     small?: boolean;
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableCell({ numeric, stretch, noWrap, small, class: className, children, ...rest }: TableCellProps) {

package/src/table/TableHead.tsx

@@ -1,11 +1,10 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableHeadProps = {
+type TableHeadProps = ComponentPropsWithoutRef<'thead'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableHead({ class: className, children, ...rest }: TableHeadProps) {

package/src/table/TableHeader.tsx

@@ -1,13 +1,12 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableHeaderProps = {
+type TableHeaderProps = ComponentPropsWithoutRef<'th'> & {
     numeric?: boolean;
     scope?: "col" | "row" | "colgroup" | "rowgroup";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableHeader({ numeric, scope = "col", class: className, children, ...rest }: TableHeaderProps) {

package/src/table/TableRow.tsx

@@ -1,11 +1,10 @@
 /** @jsxImportSource react */
 
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TableRowProps = {
+type TableRowProps = ComponentPropsWithoutRef<'tr'> & {
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function TableRow({ class: className, children, ...rest }: TableRowProps) {

package/src/tabs/Tab.tsx

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

package/src/tabs/TabPanel.tsx

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

package/src/tabs/Tabs.tsx

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

package/src/tabs/TabsList.tsx

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

package/src/tabs/TabsTitle.tsx

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

package/src/tag/Tag.tsx

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type TagProps = {
+type TagProps = ComponentPropsWithoutRef<'strong'> & {
     colour?: "grey" | "green" | "teal" | "turquoise" | "blue" | "light-blue" | "purple" | "magenta" | "pink" | "red" | "orange" | "yellow";
     class?: string;
     children?: ReactNode;
-    [key: string]: unknown;
 };
 
 export default function Tag({ colour, class: className, children, ...rest }: TagProps) {

package/src/task-list/TaskList.tsx

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

package/src/task-list/TaskListHint.tsx

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

package/src/task-list/TaskListItem.tsx

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

package/src/task-list/TaskListLink.tsx

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

package/src/task-list/TaskListNameAndHint.tsx

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

package/src/task-list/TaskListStatus.tsx

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

package/src/textarea/Textarea.tsx

@@ -1,9 +1,10 @@
-type TextareaProps = {
+import type { ComponentPropsWithoutRef } from 'react';
+
+type TextareaProps = Omit<ComponentPropsWithoutRef<'textarea'>, 'value'> & {
     error?: boolean;
     subtle?: boolean;
     value?: string;
     class?: string;
-    [key: string]: unknown;
 };
 
 export default function Textarea({ error, subtle, value, class: className, ...rest }: TextareaProps) {

package/src/toggle/Toggle.tsx

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

package/src/toggle/ToggleItem.tsx

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

package/src/toggle/ToggleLabel.tsx

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