@splunk/react-ui 5.1.0 → 5.3.0

package/Typography.js

@@ -77,8 +77,8 @@
     const s = require("@splunk/themes/mixins");
     var u =  e.n(s);
     // CONCATENATED MODULE: ./src/Typography/Typography.tsx
-    function p() {
-        return p = Object.assign ? Object.assign.bind() : function(e) {
+    function f() {
+        return f = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -86,31 +86,31 @@
                 }
             }
             return e;
-        }, p.apply(null, arguments);
+        }, f.apply(null, arguments);
     }
-    function c(e, r) {
+    function p(e, r) {
         if (null == e) return {};
-        var t, n, o = f(e, r);
+        var t, n, o = y(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
-                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function f(e, r) {
+    function y(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         return t;
     }
-    var y = {
+    var c = {
         as: a().string.isRequired,
         children: a().node.isRequired,
         color: a().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
@@ -132,7 +132,7 @@
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, f = e.variant, y = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = c(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
+        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, y = e.variant, c = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = p(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
         // @docs-props-type TypographyPropsBase
                 var m = (0, t.useMemo)((function() {
             return {
@@ -140,20 +140,20 @@
                 family: l,
                 lineHeight: s,
                 size: u,
-                weight: y,
+                weight: c,
                 withReset: h
             };
-        }), [ a, l, s, u, y, h ]);
+        }), [ a, l, s, u, c, h ]);
         
-        return n().createElement(d, p({
+        return n().createElement(d, f({
             as: r,
             "data-test": "typography",
             ref: i,
             $typographyParams: m,
-            $variant: f
+            $variant: y
         }, v), o);
     }
-    g.propTypes = y;
+    g.propTypes = c;
     /* harmony default export */    const h = g;
     // CONCATENATED MODULE: ./src/Typography/index.ts
     module.exports = r;

package/WaitSpinner.js

@@ -79,11 +79,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var u = c().div.withConfig({
+    var d = c().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
     })([ "", ";align-items:center;" ], f.mixins.reset("inline-flex"));
-    var d = (0, l.keyframes)([ "100%{transform:rotate(360deg);}" ]);
+    var u = (0, l.keyframes)([ "100%{transform:rotate(360deg);}" ]);
     var m = (0, l.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
     var p = "2.07s";
     var y = c().svg.withConfig({
@@ -95,7 +95,7 @@
         large: (0, l.css)([ "width:40px;height:40px;" ])
     }), (function(e) {
         var t = e.$animated;
-        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], d, p, m);
+        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], u, p, m);
     }));
     var v = (0, l.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
     var h = (0, l.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
@@ -131,7 +131,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -141,7 +141,7 @@
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
@@ -157,7 +157,7 @@
         // @docs-props-type WaitSpinnerPropsBase
                 var f = (0, s.useAnimationToggle)() === "on";
         
-        return n().createElement(u, k({
+        return n().createElement(d, k({
             "data-test": "wait-spinner",
             ref: t
         }, c),  n().createElement(y, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -11,7 +11,7 @@
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
     "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
-    "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
+    "eslint": "eslint --rulesdir ../../infra/eslint/rules src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "lint": "yarn run eslint && yarn run stylelint",
@@ -29,8 +29,8 @@
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
-    "types:build": "yarn types:build:cypress && tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
-    "types:build:cypress": "tsc --p cypress/tsconfig.cypress.json",
+    "types:build": "yarn types:noemit && yarn tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
+    "types:noemit": "tsc --p cypress/tsconfig.check-cypress.json && tsc --p tsconfig.check-docs.json",
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
@@ -44,8 +44,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.1.0",
-    "@splunk/themes": "^1.1.0",
+    "@splunk/react-icons": "^5.3.0",
+    "@splunk/themes": "^1.2.1",
     "@splunk/ui-utils": "^1.10.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
@@ -57,21 +57,21 @@
     "use-typed-event-listener": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.0.0",
+    "@splunk/docs-gen": "^1.1.1",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.1.0",
+    "@splunk/react-docs": "^1.3.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
     "@storybook/csf": "^0.0.1",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/manager-api": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^10.4.0",
@@ -85,17 +85,15 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
-    "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
-    "axe-html-reporter": "^2.2.3",
+    "axe-html-reporter": "^2.2.11",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
-    "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-require-context": "^0.1.1",
@@ -128,20 +126,18 @@
     "mkdirp": "^0.5.1",
     "playwright": "^1.45.0",
     "prismjs": "^1.29.0",
-    "prompt": "^1.0.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-docgen": "^5.4.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^16.13.1",
-    "sinon": "^2.1.0",
-    "storybook": "^7.6.17",
+    "storybook": "^7.6.20",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
     "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.9.0"
   },
   "engines": {

package/tsconfig.check-docs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["stubs-*.d.ts", "src/docs/**/*"],
+  "exclude": []
+}

package/types/src/Accordion/docs/examples/Controlled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Controlled
+ */
 declare function Controlled(): React.JSX.Element;
 export default Controlled;

package/types/src/Accordion/docs/examples/Inset.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Inset
+ * @description inset adds padding to the Accordion Panel. This can be set on the Accordion, or individual Panels. Individual Panels can override inset from their parent Accordion.
+ */
 declare const Inset: () => React.JSX.Element;
 export default Inset;

package/types/src/Accordion/docs/examples/Uncontrolled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/Anchor/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description `Anchor` can be added to any `Heading` level.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+/**
+ * @name Controlling animation via a provider
+ * @description Shows how to control animation using an AnimationToggleProvider. This can be used to disable animation for most components included in this library.
+ */
 declare class Provider extends Component<object, {
     animatedTransitions: boolean;
     open: boolean;

package/types/src/AnimationToggle/docs/examples/ReducedMotionComponent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Support reduced motion with a component
+ * @description Shows how to use the Animation Toggle component to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled or no reduced motion alternative is set, Animation Toggle considers animations to be disabled.
+ */
 declare const ReducedMotionComponent: () => React.JSX.Element;
 export default ReducedMotionComponent;

package/types/src/AnimationToggle/docs/examples/ReducedMotionHook.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Support reduced motion with a hook
+ * @description Shows how to use the useAnimationToggle hook to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled useAnimationToggle returns 'off'.
+ */
 declare const ReducedMotionHook: () => React.JSX.Element;
 export default ReducedMotionHook;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+/**
+ * @name Offering animation control with a component
+ * @description Shows how to use the Animation Toggle component to render different content based on current animation settings.
+ */
 declare class ToggleComponent extends Component<object, {
     animatedTransitions: boolean;
 }> {

package/types/src/Avatar/docs/examples/BackgroundColor.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Background color
+ * @description An Avatar can render a provided background color and will automatically change the text color to satisfy accessibility contrast requirements. For the automatic text color change, backgroundColor must be provided as a string without a represented alpha value.
+ */
 export default function BackgroundColor(): React.JSX.Element;

package/types/src/Avatar/docs/examples/Basic.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description An Avatar can show one to three characters. You can use the `getInitials` helper to shorten a name.
+ */
 export default function Basic(): React.JSX.Element;

package/types/src/Avatar/docs/examples/Image.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Image
+ * @description An Avatar can show an image provided as an icon, <img>, or asset.
+ */
 export default function Image(): React.JSX.Element;

package/types/src/Avatar/docs/examples/Interactive.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Interactive
+ * @description Avatars can be interactive by including the appropriate props to make them buttons or links.
+ */
 export default function Interactive(): React.JSX.Element;

package/types/src/Avatar/docs/examples/Size.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Size
+ * @description Avatars can be one of three standard sizes: small, medium (default), or large. The size prop can also be a string if the standard size doesn't fit your use case. Note: using a non-standard size may have unexpected layouts when combined with other components.
+ */
 export default function Size(): React.JSX.Element;

package/types/src/Breadcrumbs/docs/examples/Adornments.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Adornments
+ * @description A startAdornment and/or endAdornment can be added to a Breadcrumbs.Item. Icons should be decorative.
+ */
 declare function Adornments(): React.JSX.Element;
 export default Adornments;

package/types/src/Breadcrumbs/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Breadcrumbs/docs/examples/CustomizedClick.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customized click
+ * @description A custom onClick handler can be set on the root Breadcrumbs component or individual Breadcrumbs.Item components. If both components have onClick handlers, both handlers will be called when the Breadcrumbs.Item is clicked.
+ */
 declare function CustomizedClick(): React.JSX.Element;
 export default CustomizedClick;

package/types/src/Button/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Button/docs/examples/Block.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Block sized
+ * @description By default, Buttons exist in inline blocks. Set inline to false to make the Button the full width of the parent container.
+ */
 declare function Block(): React.JSX.Element;
 export default Block;

package/types/src/Button/docs/examples/Disabled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Consider keeping Buttons enabled and inform the user why the action may have failed or can't be completed. Disabling buttons creates barriers for all users and can exclude people with disabilities. If a Button is passed disabled the default behavior is to render a 'dimmed' button. This ensures the button is still discoverable and can receive focus, but the button cannot not be activated by the user. If necessary, a Button can be completely disabled by setting disabled='disabled'. In these cases, consider contacting us to collaborate on alternatives for a more inclusive experience.
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/Button/docs/examples/Icons.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With icons
+ * @description By default, icons appear to the left of Button text. If you want an icon to appear the right of Button text, add it as a child and correct margins or other positioning as necessary.
+ */
 declare function Icons(): React.JSX.Element;
 export default Icons;

package/types/src/Button/docs/examples/Menus.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With menu indicator
+ * @description Add the isMenu prop to display the menu indicator to the right of Button text. See [Dropdown](Dropdown) to learn how to create a dropdown menu.
+ */
 declare function Menus(): React.JSX.Element;
 export default Menus;

package/types/src/Button/docs/examples/To.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name As a link
+ * @description Add the to prop to indicate that the Button behaves as a link. The openInNewContext prop will open the link in a new window or tab and display the external link indicator
+ */
 declare function To(): React.JSX.Element;
 export default To;

package/types/src/ButtonGroup/docs/examples/Basic.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 export default function Basic(): React.JSX.Element;

package/types/src/Card/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description A Card with a title and body. In this example, the content determines the width of the Card. Otherwise, pass in a width to fix the Card width.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Card/docs/examples/Clickable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Clickable card
+ * @description A Card that goes to a URL or performs an action when clicked.
+ */
 declare function Clickable(): React.JSX.Element;
 export default Clickable;

package/types/src/Card/docs/examples/Full.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Full card
+ * @description A Card with a header, body, and footer. In this example, the height and width of the Card are set. Card.Footer must always be last in a Card.
+ */
 declare function FullCard(): React.JSX.Element;
 export default FullCard;

package/types/src/Card/docs/examples/HeadingTitle.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Card with heading
+ * @description Pass the Heading component into the title prop when there is content underneath to satisfy accessibility requirements.
+ */
 declare function HeadingTitle(): React.JSX.Element;
 export default HeadingTitle;

package/types/src/Card/docs/examples/Images.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Card with images
+ * @description A Card with Images. You can switch the order of Card.Header and Card.Body.
+ */
 declare function Images(): React.JSX.Element;
 export default Images;

package/types/src/Card/docs/examples/Selectable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Selectable card
+ * @description A Card that is selected when clicked. The card must be provided an onClick in order to use the selected prop.
+ */
 declare function Selectable(): React.JSX.Element;
 export default Selectable;

package/types/src/CardLayout/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/CardLayout/docs/examples/Interactive.d.ts

@@ -11,6 +11,10 @@ interface InteractiveState {
     setAsWidth: boolean;
     hasMaxWidth: boolean;
 }
+/**
+ * @name Interactive card layout
+ * @description The default layout scales cards equally and wraps them. As a best practice, pass in a minWidth style to each Card to prevent an overly narrow width when the screen is resized. You can pass in a maxWidth style so the Card doesn't get too wide. In this example, the minWidth is initially set to 200.
+ */
 declare class Interactive extends Component<object, InteractiveState> {
     constructor(props: object);
     handleChangeAmount: NumberChangeHandler;

package/types/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type CheckboxChangeHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
+    checked: boolean;
+    name?: string;
+    value?: string;
+}) => void;
+interface CheckboxPropsBase {
+    /**
+     * Setting this value makes the component controlled. If set, the onChange callback is required.
+     * A setting of "indeterminate" is considered unchecked for the purposes of form submission.
+     */
+    checked?: boolean | 'indeterminate';
+    /** The content to display inside the checkbox label. */
+    children?: React.ReactNode;
+    /** Set this property instead of checked to make the component uncontrolled. */
+    defaultChecked?: boolean;
+    /**
+     * The id of the description.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's help component.
+     */
+    describedBy?: string;
+    disabled?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Mark the component as having an error.
+     */
+    error?: boolean;
+    inert?: boolean;
+    /**
+     * A React ref which is set to the input element when the component mounts and null when it unmounts.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The id of the label.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's label.
+     */
+    labelledBy?: string;
+    /**
+     * The name is returned with onChange events, which can be used to identify the
+     * control when multiple controls share an onChange callback.
+     */
+    name?: string;
+    /**
+     * Fires when the checked state changes.
+     */
+    onChange?: CheckboxChangeHandler;
+    /** @private. */
+    required?: boolean;
+    /**
+     * Returned by the onChange handler and submitted during form submission if the checkbox is checked.
+     * This defaults to "on" if the input is checked.
+     */
+    value?: string;
+}
+interface CheckboxPropsBaseControlled extends CheckboxPropsBase {
+    defaultChecked?: never;
+    onChange: CheckboxChangeHandler;
+}
+interface CheckboxPropsBaseUncontrolled extends CheckboxPropsBase {
+    defaultChecked?: boolean;
+    checked?: never;
+}
+type CheckboxProps = ComponentProps<CheckboxPropsBaseControlled | CheckboxPropsBaseUncontrolled, 'input'>;
+declare const Checkbox: {
+    ({ checked, children, defaultChecked, describedBy, disabled, elementRef, error, id, inert, inputRef, labelledBy, name, onChange, required, role, tabIndex, value, ...otherProps }: CheckboxProps): React.JSX.Element;
+    propTypes: {
+        checked: PropTypes.Requireable<string | boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        inert: PropTypes.Requireable<boolean>;
+        inputRef: PropTypes.Requireable<object>;
+        labelledBy: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        required: PropTypes.Requireable<boolean>;
+    };
+};
+export default Checkbox;
+export { CheckboxChangeHandler, CheckboxPropsBase, CheckboxPropsBaseControlled, CheckboxPropsBaseUncontrolled, };

package/types/src/Checkbox/docs/examples/Basic.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Controlled
+ * @description Checkbox can be controlled using the checked prop and an onChange callback.
+ */
+declare const Basic: () => React.JSX.Element;
+export default Basic;

package/types/src/Checkbox/docs/examples/Disabled.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Disabled
+ */
+declare const Disabled: () => React.JSX.Element;
+export default Disabled;