TypeScript

Both packages are written in TypeScript and ship their own declarations. There's nothing extra to install.

Where the types come from

Each entry point has its own declarations, listed in the package's exports:

To resolve the subpaths, TypeScript needs a moduleResolution that reads exports: bundler, node16 or nodenext.

The declarations need TypeScript 5.4 or later. They use the NoInfer utility type (in SelectProps, for example), which TypeScript 5.3 and earlier don't have, so an older compiler reports an unresolved name inside the package's declarations unless skipLibCheck is on.

Naming

Each component exports its props type as <Component>Props, and the types its props use alongside it:

import type {
  ButtonProps,
  ButtonColor,
  ButtonVariant,
  ButtonPart,
  SelectOption,
  TableColumn,
} from '@artisanpack-ui/react';

• <Component>Part is the union of part names that classes accepts.
• Value types are named after the component: ButtonSize, DialogSize, DatePickerValue, ComboboxValue, RangeValue.
• Item data types end in Data or Item: TabData, MenuItemData, AccordionItemData, StepItem, BreadcrumbItem.

Extending a component

The props types extend the native attributes of the element they spread onto, so a wrapper can pass everything through:

import { forwardRef } from 'react';
import { Button, type ButtonProps } from '@artisanpack-ui/react';

export const SaveButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
  (props, ref) => <Button ref={ref} color="primary" {...props} />,
);

Generic components

Select is generic over its option values, and Table over its rows. TableColumn<Row> types the row its render function receives; key is a dot path into the row, such as 'author.name':

import { Table, type TableColumn } from '@artisanpack-ui/react';

interface User {
  id: number;
  name: string;
  email: string;
}

const columns: TableColumn<User>[] = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
];

<Table headers={columns} rows={users} keyBy="id" />;

Shared Inertia props

SharedPageProps in @artisanpack-ui/react-laravel types Inertia's shared props. Add your own with module augmentation; see Laravel and Inertia.