@raspberrypifoundation/design-system-react 2.0.0 → 2.2.0-beta.1

package/dist/types/components/Accordion/index.d.ts

@@ -0,0 +1,16 @@
+export function Accordion({ content, title, className, id }: {
+    content: any;
+    title: any;
+    className: any;
+    id?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Accordion {
+    namespace propTypes {
+        let content: PropTypes.Validator<string>;
+        let title: PropTypes.Validator<string>;
+        let id: PropTypes.Requireable<string>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+export default Accordion;
+import PropTypes from "prop-types";

package/dist/types/components/Alert/index.d.ts

@@ -0,0 +1,24 @@
+export function Alert({ title, text, children, type, actions, onClose }: {
+    title: any;
+    text: any;
+    children: any;
+    type: any;
+    actions: any;
+    onClose: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Alert {
+    namespace propTypes {
+        let title: PropTypes.Requireable<string>;
+        let text: PropTypes.Requireable<string>;
+        let type: PropTypes.Requireable<string>;
+        let actions: PropTypes.Requireable<(PropTypes.InferProps<{
+            href: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+export default Alert;
+import PropTypes from "prop-types";

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,36 @@
+export function Button({ text, href, title, className, type, variant, size, icon, iconOnly, iconPosition, fullWidth, disabled, onClick, "aria-label": ariaLabel, }: {
+    text: any;
+    href: any;
+    title: any;
+    className: any;
+    type?: string | undefined;
+    variant?: string | undefined;
+    size?: string | undefined;
+    icon?: string | undefined;
+    iconOnly?: boolean | undefined;
+    iconPosition?: string | undefined;
+    fullWidth?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    "aria-label"?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Button {
+    let propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
+        href: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        text: PropTypes.Requireable<string>;
+        iconOnly: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<string>;
+        iconPosition: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        "aria-label": PropTypes.Requireable<string>;
+        fullWidth: PropTypes.Requireable<boolean>;
+        variant: PropTypes.Requireable<string>;
+    };
+}
+export default Button;
+import PropTypes from "prop-types";

package/dist/types/components/Form/CheckboxInput/index.d.ts

@@ -0,0 +1,26 @@
+export function CheckboxInput({ id, label, name, checked, disabled, error, onChange, value, className, }: {
+    id: any;
+    label: any;
+    name: any;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    onChange?: (() => void) | undefined;
+    value?: string | undefined;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace CheckboxInput {
+    namespace propTypes {
+        let checked: PropTypes.Requireable<boolean>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let id: PropTypes.Validator<string>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let name: PropTypes.Validator<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let value: PropTypes.Requireable<string>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+export default CheckboxInput;
+import PropTypes from "prop-types";

package/dist/types/components/Form/Fieldset/index.d.ts

@@ -0,0 +1,20 @@
+export function Fieldset({ disabled, errorText, fullWidth, legendText, legendHintText, children, }: {
+    disabled?: boolean | undefined;
+    errorText?: string | undefined;
+    fullWidth?: boolean | undefined;
+    legendText: any;
+    legendHintText?: string | undefined;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Fieldset {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let errorText: PropTypes.Requireable<string>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let legendText: PropTypes.Validator<string>;
+        let legendHintText: PropTypes.Requireable<string>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+export default Fieldset;
+import PropTypes from "prop-types";

package/dist/types/components/Form/InputField/index.d.ts

@@ -0,0 +1,20 @@
+export function InputField({ id, label, children, disabled, error, hint, }: {
+    id: any;
+    label: any;
+    children: any;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    hint?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace InputField {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let id: PropTypes.Validator<string>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+export default InputField;
+import PropTypes from "prop-types";

package/dist/types/components/Form/InputLabel/index.d.ts

@@ -0,0 +1,16 @@
+export function InputLabel({ label, inputFieldId, disabled, hint, }: {
+    label: any;
+    inputFieldId: any;
+    disabled?: boolean | undefined;
+    hint?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace InputLabel {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let inputFieldId: PropTypes.Validator<string>;
+    }
+}
+export default InputLabel;
+import PropTypes from "prop-types";

package/dist/types/components/Form/RadioInput/index.d.ts

@@ -0,0 +1,24 @@
+export function RadioInput({ id, label, name, checked, disabled, fullWidth, onChange, value, }: {
+    id: any;
+    label: any;
+    name: any;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    onChange?: (() => void) | undefined;
+    value?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace RadioInput {
+    namespace propTypes {
+        let checked: PropTypes.Requireable<boolean>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let name: PropTypes.Validator<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let value: PropTypes.Requireable<string>;
+    }
+}
+export default RadioInput;
+import PropTypes from "prop-types";

package/dist/types/components/Form/SearchInput/index.d.ts

@@ -0,0 +1,26 @@
+export function SearchInput({ label, inputFieldId, disabled, error, hint, placeholder, defaultValue, onClick, onChange, }: {
+    label: any;
+    inputFieldId: any;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    hint?: string | undefined;
+    placeholder?: string | undefined;
+    defaultValue?: string | undefined;
+    onClick?: (() => void) | undefined;
+    onChange?: ((event: any) => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace SearchInput {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let hint: PropTypes.Requireable<string>;
+        let inputFieldId: PropTypes.Validator<string>;
+        let label: PropTypes.Validator<string>;
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let placeholder: PropTypes.Requireable<string>;
+        let defaultValue: PropTypes.Requireable<string>;
+    }
+}
+export default SearchInput;
+import PropTypes from "prop-types";

package/dist/types/components/Form/SelectInput/index.d.ts

@@ -0,0 +1,30 @@
+export function SelectInput({ id, label, name, options, disabled, error, fullWidth, hint, onChange, placeholder, value, }: {
+    id: any;
+    label: any;
+    name: any;
+    options: any;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    fullWidth?: boolean | undefined;
+    hint?: string | undefined;
+    onChange?: (() => void) | undefined;
+    placeholder?: string | undefined;
+    value?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace SelectInput {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let id: PropTypes.Validator<string>;
+        let name: PropTypes.Validator<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let options: PropTypes.Validator<any[]>;
+        let placeholder: PropTypes.Requireable<string>;
+        let value: PropTypes.Requireable<string>;
+    }
+}
+export default SelectInput;
+import PropTypes from "prop-types";

package/dist/types/components/Form/TextInput/index.d.ts

@@ -0,0 +1,26 @@
+export function TextInput({ id, label, name, value, disabled, error, fullWidth, hint, onChange, }: {
+    id: any;
+    label: any;
+    name: any;
+    value: any;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    fullWidth?: boolean | undefined;
+    hint?: string | undefined;
+    onChange?: (() => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace TextInput {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let id: PropTypes.Validator<string>;
+        let name: PropTypes.Validator<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let value: PropTypes.Validator<string>;
+    }
+}
+export default TextInput;
+import PropTypes from "prop-types";

package/dist/types/components/Form/TextareaInput/index.d.ts

@@ -0,0 +1,28 @@
+export function TextareaInput({ id, label, name, value, disabled, readOnly, error, fullWidth, hint, onChange, }: {
+    id: any;
+    label: any;
+    name: any;
+    value: any;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: string | undefined;
+    fullWidth?: boolean | undefined;
+    hint?: string | undefined;
+    onChange?: (() => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace TextareaInput {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let readOnly: PropTypes.Requireable<boolean>;
+        let error: PropTypes.Requireable<string>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let hint: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        let label: PropTypes.Validator<NonNullable<NonNullable<string | object | null | undefined>>>;
+        let id: PropTypes.Validator<string>;
+        let name: PropTypes.Validator<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let value: PropTypes.Validator<string>;
+    }
+}
+export default TextareaInput;
+import PropTypes from "prop-types";

package/dist/types/components/ProgressBar/index.d.ts

@@ -0,0 +1,12 @@
+export function ProgressBar({ text, percent }: {
+    text?: string | undefined;
+    percent: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ProgressBar {
+    namespace propTypes {
+        let text: PropTypes.Requireable<string>;
+        let percent: PropTypes.Validator<number>;
+    }
+}
+export default ProgressBar;
+import PropTypes from "prop-types";

package/dist/types/components/Table/BodyCell/index.d.ts

@@ -0,0 +1,10 @@
+export function BodyCell({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace BodyCell {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+export default BodyCell;
+import PropTypes from "prop-types";

package/dist/types/components/Table/HeaderCell/index.d.ts

@@ -0,0 +1,12 @@
+export function HeaderCell({ sortDirection, children }: {
+    sortDirection: any;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace HeaderCell {
+    namespace propTypes {
+        let sortDirection: PropTypes.Requireable<string>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+export default HeaderCell;
+import PropTypes from "prop-types";

package/dist/types/components/Table/Table/index.d.ts

@@ -0,0 +1,14 @@
+export function Table({ headerRow, bodyRows, fullWidth }: {
+    headerRow: any;
+    bodyRows: any;
+    fullWidth: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Table {
+    namespace propTypes {
+        let headerRow: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let bodyRows: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+    }
+}
+export default Table;
+import PropTypes from "prop-types";

package/dist/types/components/Tag/index.d.ts

@@ -0,0 +1,18 @@
+export function Tag({ text, variant, secondary, icon, iconPosition }: {
+    text: any;
+    variant: any;
+    secondary: any;
+    icon: any;
+    iconPosition: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Tag {
+    namespace propTypes {
+        let text: PropTypes.Validator<string>;
+        let variant: PropTypes.Requireable<string>;
+        let secondary: PropTypes.Requireable<boolean>;
+        let icon: PropTypes.Requireable<string>;
+        let iconPosition: PropTypes.Requireable<string>;
+    }
+}
+export default Tag;
+import PropTypes from "prop-types";

package/dist/types/index.d.ts

@@ -0,0 +1,17 @@
+export * from './components/Accordion';
+export * from './components/Alert';
+export * from './components/Button';
+export * from './components/Form/CheckboxInput';
+export * from './components/Form/Fieldset';
+export * from './components/Form/InputField';
+export * from './components/Form/InputLabel';
+export * from './components/Form/RadioInput';
+export * from './components/Form/SearchInput';
+export * from './components/Form/SelectInput';
+export * from './components/Form/TextInput';
+export * from './components/Form/TextareaInput';
+export * from './components/ProgressBar';
+export * from './components/Table/BodyCell';
+export * from './components/Table/HeaderCell';
+export * from './components/Table/Table';
+export * from './components/Tag';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "version": "2.0.0",
+  "version": "2.2.0-beta.1",
   "type": "module",
   "main": "./dist/rpf-design-system-react.umd.cjs",
   "files": [
     "dist"
   ],
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/rpf-design-system-react.js",
@@ -17,7 +18,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "yarn run build-core-scss && vite build",
+    "build": "yarn run build-core-scss && vite build && yarn run generate-types",
     "lint": "eslint .",
     "format": "prettier . --write",
     "preview": "vite preview",
@@ -25,7 +26,8 @@
     "build-core-scss": "rm -r public/scss/* && cp -R node_modules/@raspberrypifoundation/design-system-core/scss/* public/scss",
     "build-storybook": "storybook build",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "generate-types": "tsc && node scripts/generate-types-index.cjs"
   },
   "dependencies": {
     "@raspberrypifoundation/design-system-core": "^2.0.0",
@@ -33,38 +35,38 @@
     "material-symbols": "^0.27.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.2"
+    "react-router-dom": "^7.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.15.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
+    "@eslint/js": "^9.21.0",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-interactions": "^8.6.0",
+    "@storybook/blocks": "^8.6.0",
+    "@storybook/preview-api": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@storybook/test": "^8.6.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.9",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.1",
+    "@vitest/coverage-v8": "^3.0.7",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.11.3",
     "eslint-plugin-vitest-globals": "^1.5.0",
-    "globals": "^15.12.0",
+    "globals": "^15.15.0",
     "jsdom": "^25.0.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.2",
     "prop-types": "^15.8.1",
-    "sass-embedded": "^1.83.1",
-    "storybook": "^8.4.7",
-    "vite": "^6.1.0",
-    "vitest": "^2.1.9"
+    "sass-embedded": "^1.85.1",
+    "storybook": "^8.6.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.7"
   },
   "peerDependencies": {
     "react-router-dom": "^6.24.0"