@skyscanner/backpack-web 42.16.0 → 42.18.0

package/bpk-component-collapsible/src/BpkCollapsibleTrigger.js

@@ -0,0 +1,43 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef } from 'react';
+import { Collapsible, useCollapsibleContext } from '@ark-ui/react';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+// Applies the native HTML `disabled` attribute to the underlying <button> so
+// the trigger is removed from the tab order and announced as disabled by
+// assistive tech. Ark/Zag only emit `data-disabled`, which would otherwise
+// leave the button tabbable and announced as enabled.
+const BpkCollapsibleTrigger = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => {
+  const {
+    disabled
+  } = useCollapsibleContext();
+  return /*#__PURE__*/_jsx(Collapsible.Trigger, {
+    ref: ref,
+    className: getClassName('bpk-collapsible__trigger'),
+    disabled: disabled,
+    children: children
+  });
+});
+BpkCollapsibleTrigger.displayName = 'BpkCollapsibleTrigger';
+export default BpkCollapsibleTrigger;

package/bpk-component-collapsible/src/common-types.d.ts

@@ -0,0 +1,9 @@
+export declare const COLLAPSIBLE_VARIANTS: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type BpkCollapsibleVariant = (typeof COLLAPSIBLE_VARIANTS)[keyof typeof COLLAPSIBLE_VARIANTS];
+export type BpkCollapsibleOpenChangeDetails = {
+    open: boolean;
+};
+export declare const getRootClassName: (variant: BpkCollapsibleVariant) => string;

package/bpk-component-collapsible/src/common-types.js

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+export const COLLAPSIBLE_VARIANTS = {
+  default: 'default',
+  onContrast: 'onContrast'
+};
+const getClassName = cssModules(STYLES);
+export const getRootClassName = variant => {
+  const variantModifier = variant === COLLAPSIBLE_VARIANTS.onContrast ? 'on-contrast' : 'default';
+  return getClassName('bpk-collapsible', `bpk-collapsible--${variantModifier}`);
+};

package/bpk-component-collapsible/src/useBpkCollapsible.d.ts

@@ -0,0 +1,5 @@
+import type { UseCollapsibleProps, UseCollapsibleReturn } from '@ark-ui/react';
+export type BpkUseCollapsibleProps = UseCollapsibleProps;
+export type BpkUseCollapsibleReturn = UseCollapsibleReturn;
+declare const useBpkCollapsible: (props?: BpkUseCollapsibleProps) => BpkUseCollapsibleReturn;
+export default useBpkCollapsible;

package/bpk-component-collapsible/src/useBpkCollapsible.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCollapsible } from '@ark-ui/react';
+const useBpkCollapsible = props => useCollapsible(props);
+export default useBpkCollapsible;

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -17,7 +17,6 @@
  */
 
 import { cloneElement } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
 import BpkLabel from "../../bpk-component-label";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";

package/bpk-component-form-validation/index.d.ts

@@ -0,0 +1,5 @@
+import BpkFormValidation from './src/BpkFormValidation';
+import themeAttributes from './src/themeAttributes';
+export type { Props } from './src/BpkFormValidation';
+export default BpkFormValidation;
+export { themeAttributes };

package/bpk-component-form-validation/src/BpkFormValidation.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Props as AnimateHeightProps } from '../../bpk-animate-height';
+export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    children: ReactNode;
+    id: string;
+    expanded: boolean;
+    isCheckbox?: boolean;
+    className?: string | null;
+    containerProps?: Partial<AnimateHeightProps>;
+};
+declare const BpkFormValidation: ({ children, className, containerProps, expanded, isCheckbox, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkFormValidation;

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { lineHeightSm, iconSizeSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import AnimateHeight from "../../bpk-animate-height";
 import { withAlignment } from "../../bpk-component-icon";
@@ -53,12 +52,4 @@ const BpkFormValidation = ({
     })
   });
 };
-BpkFormValidation.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  isCheckbox: PropTypes.bool,
-  className: PropTypes.string,
-  containerProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
-};
 export default BpkFormValidation;

package/bpk-component-form-validation/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/bpk-component-horizontal-nav/index.d.ts

@@ -0,0 +1,6 @@
+import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES, type Props as NavProps } from './src/BpkHorizontalNav';
+import BpkHorizontalNavItem, { type Props as ItemProps, themeAttributes } from './src/BpkHorizontalNavItem';
+export type BpkHorizontalNavProps = NavProps;
+export type BpkHorizontalNavItemProps = ItemProps;
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/index.js

@@ -14,7 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
+ */
+
+import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
 import BpkHorizontalNavItem, { themeAttributes } from "./src/BpkHorizontalNavItem";
 export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
 export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+declare const HORIZONTAL_NAV_TYPES: {
+    readonly default: "default";
+    readonly light: "light";
+};
+type Props = {
+    children: ReactNode;
+    ariaLabel?: string | null;
+    /**
+     * Ensures that the selected item is within view when loaded on narrow-screened devices.
+     */
+    autoScrollToSelected?: boolean;
+    className?: string | null;
+    leadingScrollIndicatorClassName?: string | null;
+    /**
+     * When set to "false", the bottom border on the component isn't included. This refers
+     * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
+     */
+    showUnderline?: boolean;
+    trailingScrollIndicatorClassName?: string | null;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNav: ({ ariaLabel, autoScrollToSelected, children: rawChildren, className, leadingScrollIndicatorClassName, showUnderline, trailingScrollIndicatorClassName, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export type { Props };
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -14,8 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { Component, Children, cloneElement } from 'react';
+ */
+
+import { Children, cloneElement, useCallback, useEffect, useRef } from 'react';
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkHorizontalNav.module.css";
@@ -29,138 +30,102 @@ const getPos = ref => {
   if (!ref) {
     return null;
   }
-  const pos = ref.getBoundingClientRect();
-  return pos;
+  return ref.getBoundingClientRect();
 };
-class BpkHorizontalNav extends Component {
-  constructor(props) {
-    super(props);
-    this.scrollRef = null;
-    this.selectedItemRef = null;
-  }
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      this.scrollSelectedIntoView(false);
-    });
-  }
-  componentDidUpdate() {
-    this.scrollSelectedIntoView(true);
-  }
-  scrollSelectedIntoView = useSmoothScroll => {
-    if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
-      return;
-    }
-    if (!this.scrollRef) {
+const BpkHorizontalNav = ({
+  ariaLabel = null,
+  autoScrollToSelected = false,
+  children: rawChildren,
+  className = null,
+  leadingScrollIndicatorClassName = null,
+  showUnderline = true,
+  trailingScrollIndicatorClassName = null,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}) => {
+  const scrollRef = useRef(null);
+  const selectedItemRef = useRef(null);
+  const isMounted = useRef(false);
+  const scrollSelectedIntoView = useCallback(useSmoothScroll => {
+    if (!autoScrollToSelected || !scrollRef.current || !selectedItemRef.current) {
       return;
     }
-    const selectedItemPos = getPos(this.selectedItemRef);
+    const selectedItemPos = getPos(selectedItemRef.current);
     if (!selectedItemPos) {
       return;
     }
-    const scrollPos = getPos(this.scrollRef);
+    const scrollPos = getPos(scrollRef.current);
     if (!scrollPos) {
       return;
     }
-
-    // We only need to carry out a scroll if the element is not already fully within the scroll view
     const needsScroll = selectedItemPos.left < scrollPos.left || selectedItemPos.right > scrollPos.right;
     if (!needsScroll) {
       return;
     }
     const scrollAdjustment = selectedItemPos.left - scrollPos.left;
-    // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
-    if (this.scrollRef && this.scrollRef.scroll && typeof this.scrollRef.scroll === 'function' && useSmoothScroll) {
-      this.scrollRef.scroll({
+    if (scrollRef.current.scroll && typeof scrollRef.current.scroll === 'function' && useSmoothScroll) {
+      scrollRef.current.scroll({
         left: scrollAdjustment,
         behavior: 'smooth'
       });
-    } else if (this.scrollRef) {
-      this.scrollRef.scrollLeft = scrollAdjustment;
+    } else {
+      scrollRef.current.scrollLeft = scrollAdjustment;
     }
-  };
-  render() {
-    const {
-      ariaLabel,
-      autoScrollToSelected,
-      children: rawChildren,
-      className,
-      leadingScrollIndicatorClassName,
-      showUnderline,
-      trailingScrollIndicatorClassName,
-      type,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
-    let children = rawChildren;
-    if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
-      children = Children.map(rawChildren, child => {
-        const childProps = {};
-        let childRef;
-        if (autoScrollToSelected) {
-          if (child && child.props && child.props.selected) {
-            childRef = ref => {
-              this.selectedItemRef = ref;
-            };
-          }
-        }
-        if (type === HORIZONTAL_NAV_TYPES.light) {
-          childProps.type = HORIZONTAL_NAV_TYPES.light;
-        }
-        return child ? /*#__PURE__*/_jsx("div", {
-          ref: childRef,
-          children: /*#__PURE__*/cloneElement(child, childProps)
-        }) : null;
-      });
+  }, [autoScrollToSelected]);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      scrollSelectedIntoView(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (isMounted.current) {
+      scrollSelectedIntoView(true);
+    } else {
+      isMounted.current = true;
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("div", {
-        className: classNames,
-        children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
-          ariaLabel: ariaLabel,
-          innerContainerTagName: "nav",
-          leadingIndicatorClassName: leadingScrollIndicatorClassName,
-          trailingIndicatorClassName: trailingScrollIndicatorClassName,
-          scrollerRef: ref => {
-            this.scrollRef = ref;
-          },
-          ...rest,
-          children: /*#__PURE__*/_jsx("div", {
-            className: getClassName('bpk-horizontal-nav__list'),
-            role: "tablist",
-            children: children
-          })
-        })
-      })
-    );
+  });
+  const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
+  let children = rawChildren;
+  if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
+    children = Children.map(rawChildren, child => {
+      const isElement = typeof child === 'object' && child !== null && 'props' in child;
+      const childProps = {};
+      let childRef;
+      if (autoScrollToSelected) {
+        if (isElement && child.props.selected) {
+          childRef = ref => {
+            selectedItemRef.current = ref;
+          };
+        }
+      }
+      if (type === HORIZONTAL_NAV_TYPES.light) {
+        childProps.type = HORIZONTAL_NAV_TYPES.light;
+      }
+      return isElement ? /*#__PURE__*/_jsx("div", {
+        ref: childRef,
+        children: /*#__PURE__*/cloneElement(child, childProps)
+      }) : null;
+    });
   }
-}
-BpkHorizontalNav.propTypes = {
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  /**
-   * Ensures that the selected item is within view when loaded on narrow-screened devices.
-   */
-  autoScrollToSelected: PropTypes.bool,
-  className: PropTypes.string,
-  leadingScrollIndicatorClassName: PropTypes.string,
-  /**
-   * When set to "false", the bottom border on the component isn't included. This refers
-   * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
-   */
-  showUnderline: PropTypes.bool,
-  trailingScrollIndicatorClassName: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNav.defaultProps = {
-  ariaLabel: null,
-  autoScrollToSelected: false,
-  className: null,
-  leadingScrollIndicatorClassName: null,
-  showUnderline: true,
-  trailingScrollIndicatorClassName: null,
-  type: HORIZONTAL_NAV_TYPES.default
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+      ariaLabel: ariaLabel ?? undefined,
+      innerContainerTagName: "nav",
+      leadingIndicatorClassName: leadingScrollIndicatorClassName ?? undefined,
+      trailingIndicatorClassName: trailingScrollIndicatorClassName ?? undefined,
+      scrollerRef: ref => {
+        scrollRef.current = ref;
+      },
+      ...rest,
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-horizontal-nav__list'),
+        role: "tablist",
+        children: children
+      })
+    })
+  });
 };
 export default BpkHorizontalNav;
 export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';
+type Props = {
+    children: ReactNode;
+    className?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    disabled?: boolean;
+    href?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    selected?: boolean;
+    spaceAround?: boolean;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNavItem: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const themeAttributes: string[];
+export type { Props };
+export { themeAttributes };
+export default BpkHorizontalNavItem;

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -14,84 +14,49 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { Component } from 'react';
+ */
+
+import { forwardRef } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
 import STYLES from "./BpkHorizontalNavItem.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-// In order to be able to access refs on the HorizontalNavItems, they need to be a fully defined
-// React Component class.
-// eslint-disable-next-line react/prefer-stateless-function
-class BpkHorizontalNavItem extends Component {
-  render() {
-    const {
-      children,
-      className,
-      disabled,
-      href,
-      selected,
-      spaceAround,
-      type,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
-    const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
-    const clickableElement = href ?
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("a", {
-      href: href,
-      className: innerClassNames,
-      "aria-disabled": disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    }) :
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: "button",
-      className: innerClassNames,
-      disabled: disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    });
-    return /*#__PURE__*/_jsx("div", {
-      className: classNames,
-      children: clickableElement
-    });
-  }
-}
-BpkHorizontalNavItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  selected: PropTypes.bool,
-  spaceAround: PropTypes.bool,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNavItem.defaultProps = {
-  className: null,
-  disabled: false,
-  href: null,
-  selected: false,
-  spaceAround: false,
-  type: HORIZONTAL_NAV_TYPES.default
-};
+const BpkHorizontalNavItem = /*#__PURE__*/forwardRef(({
+  children,
+  className = null,
+  disabled = false,
+  href = null,
+  selected = false,
+  spaceAround = false,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}, ref) => {
+  const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
+  const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
+  const clickableElement = href ? /*#__PURE__*/_jsx("a", {
+    href: href,
+    className: innerClassNames,
+    "aria-disabled": disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: innerClassNames,
+    disabled: disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: classNames,
+    children: clickableElement
+  });
+});
 const themeAttributes = ['horizontalNavLinkColor', 'horizontalNavLinkHoverColor', 'horizontalNavLinkActiveColor', 'horizontalNavLinkSelectedColor', 'horizontalNavBarSelectedColor'];
 export { themeAttributes };
 export default BpkHorizontalNavItem;

package/bpk-component-radio/index.d.ts

@@ -0,0 +1,5 @@
+import BpkRadio, { type Props as BpkRadioProps } from './src/BpkRadio';
+import themeAttributes from './src/themeAttributes';
+export default BpkRadio;
+export type { BpkRadioProps };
+export { themeAttributes };

package/bpk-component-radio/index.js

@@ -14,7 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkRadio from "./src/BpkRadio";
+ */
+
+import BpkRadio from "./src/BpkRadio";
 import themeAttributes from "./src/themeAttributes";
 export default BpkRadio;
 export { themeAttributes };

package/bpk-component-radio/src/BpkRadio.d.ts

@@ -0,0 +1,13 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+type NativeInputProps = InputHTMLAttributes<HTMLInputElement>;
+export type Props = Omit<NativeInputProps, 'type' | 'className'> & {
+    name: string;
+    label: ReactNode;
+    ariaLabel?: string | null;
+    className?: string | null;
+    disabled?: boolean;
+    white?: boolean;
+    valid?: boolean | null;
+};
+declare const BpkRadio: ({ ariaLabel, className, disabled, label, name, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkRadio;