@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-chatbot-input/src/hooks/useChatbotInput.js

@@ -0,0 +1,111 @@
+/*
+ * 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 { useCallback, useRef, useState } from 'react';
+import { CHATBOT_INPUT_TYPES } from "../common-types";
+import { MAX_CHARACTERS } from "../constants";
+import useTextAreaAutoResize from "./useTextAreaAutoResize";
+const useChatbotInput = ({
+  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
+  inputValue,
+  isPolling = false,
+  isSending = false,
+  maxCharacters = MAX_CHARACTERS,
+  onInputBlur,
+  onInputChange,
+  onInputClick = () => {},
+  onInputFocus,
+  onKeyDown = () => {},
+  onSubmit,
+  placeholder
+}) => {
+  const isCars = inputType === CHATBOT_INPUT_TYPES.CARS;
+  const isMultiLine = inputType === CHATBOT_INPUT_TYPES.CARS_COMPOSER || inputType === CHATBOT_INPUT_TYPES.COMPOSER;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const isOverLimit = inputValue.length > maxCharacters;
+  const isDisabled = isSending || isPolling;
+  const {
+    containerHeight,
+    isCapped,
+    isExpanding,
+    textareaHeight
+  } = useTextAreaAutoResize({
+    ref: inputRef,
+    value: inputValue,
+    enabled: isMultiLine
+  });
+  const handleSubmit = useCallback(() => {
+    if (inputValue.trim() && !isDisabled && !isOverLimit) {
+      onSubmit();
+    }
+  }, [inputValue, onSubmit, isDisabled, isOverLimit]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      if (!isMultiLine) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+      if (!e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+    }
+    onKeyDown?.(e);
+  }, [isMultiLine, handleSubmit, onKeyDown]);
+  const handleInputFocus = useCallback(() => {
+    setIsFocused(true);
+    onInputFocus();
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(() => {
+    setIsFocused(false);
+    onInputBlur();
+  }, [onInputBlur]);
+  const inputProps = {
+    value: inputValue,
+    placeholder,
+    disabled: isDisabled,
+    isOverLimit,
+    onInputChange,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onInputClick,
+    onKeyDown: handleKeyDown,
+    dataTestId: isMultiLine ? 'bpk-chatbot-textarea-field' : 'bpk-chatbot-input-field'
+  };
+  const sendButtonDisabled = isCars ? isFocused && !inputValue.trim() || isDisabled || isOverLimit : !inputValue.trim() || isDisabled || isOverLimit;
+  return {
+    inputRef,
+    isFocused,
+    isDisabled,
+    isOverLimit,
+    isExpanding,
+    isCars,
+    sendButtonDisabled,
+    inputProps,
+    handleSubmit,
+    containerHeight,
+    textareaHeight,
+    isCapped
+  };
+};
+export default useChatbotInput;

package/bpk-component-chatbot-input/src/hooks/useChatbotInputManager.d.ts

@@ -0,0 +1,20 @@
+interface UseChatbotInputManagerOptions {
+    isSending?: boolean;
+    onSubmit: (value: string) => void;
+    sendMessage?: (message: string) => Promise<void>;
+    onPromptClick?: (id: string, promptText?: string) => void;
+    isModalOpen?: boolean;
+    autoClearOnSendingComplete?: boolean;
+    autoClearOnModalClose?: boolean;
+    autoClearOnClose?: boolean;
+    isOpen?: boolean;
+}
+interface UseChatbotInputManagerReturn {
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    handleInputChange: (value: string) => void;
+    handleSubmit: () => Promise<void> | void;
+    handlePromptClick?: (id: string, promptText?: string) => void;
+}
+declare const useChatbotInputManager: ({ autoClearOnClose, autoClearOnModalClose, autoClearOnSendingComplete, isModalOpen, isOpen, isSending, onPromptClick, onSubmit, sendMessage, }: UseChatbotInputManagerOptions) => UseChatbotInputManagerReturn;
+export default useChatbotInputManager;

package/bpk-component-chatbot-input/src/hooks/useChatbotInputManager.js

@@ -0,0 +1,83 @@
+/*
+ * 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 { useState, useEffect, useRef, useCallback } from 'react';
+const useChatbotInputManager = ({
+  autoClearOnClose = false,
+  autoClearOnModalClose = false,
+  autoClearOnSendingComplete = false,
+  isModalOpen = false,
+  isOpen,
+  isSending = false,
+  onPromptClick,
+  onSubmit,
+  sendMessage
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const previousIsSending = useRef(isSending);
+  const previousIsModalOpen = useRef(isModalOpen);
+  const previousIsOpen = useRef(isOpen);
+  useEffect(() => {
+    if (autoClearOnSendingComplete && previousIsSending.current && !isSending) {
+      setInputValue('');
+    }
+    previousIsSending.current = isSending;
+  }, [isSending, autoClearOnSendingComplete]);
+  useEffect(() => {
+    if (autoClearOnModalClose && previousIsModalOpen.current && !isModalOpen) {
+      setInputValue('');
+    }
+    previousIsModalOpen.current = isModalOpen;
+  }, [isModalOpen, autoClearOnModalClose]);
+  useEffect(() => {
+    if (autoClearOnClose && previousIsOpen.current && !isOpen) {
+      setInputValue('');
+    }
+    previousIsOpen.current = isOpen;
+  }, [isOpen, autoClearOnClose]);
+  const handleInputChange = useCallback(value => {
+    setInputValue(value);
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    const userMessage = inputValue.trim();
+    if (!userMessage || isSending) {
+      return;
+    }
+    setInputValue('');
+    onSubmit(userMessage);
+    if (sendMessage) {
+      await sendMessage(userMessage);
+    }
+  }, [inputValue, isSending, onSubmit, sendMessage]);
+  const handlePromptClick = useCallback((id, promptText) => {
+    if (promptText && !isSending && onPromptClick) {
+      setInputValue(promptText);
+    }
+    onPromptClick?.(id, promptText);
+  }, [isSending, onPromptClick]);
+  return {
+    inputValue,
+    setInputValue,
+    handleInputChange,
+    handleSubmit,
+    ...(onPromptClick && {
+      handlePromptClick
+    })
+  };
+};
+export default useChatbotInputManager;

package/bpk-component-chatbot-input/src/hooks/useInputHandlers.d.ts

@@ -0,0 +1,8 @@
+import type { ChangeEvent, ForwardedRef, MouseEvent, TouchEvent } from 'react';
+declare const useInputHandlers: <T extends HTMLInputElement | HTMLTextAreaElement>(ref: ForwardedRef<T>, onInputChange: (value: string) => void, onInputClick: () => void) => {
+    handleInputChange: (e: ChangeEvent<T>) => void;
+    handleInputClick: (e: MouseEvent<T>) => void;
+    handleTouchStart: (e: TouchEvent<T>) => void;
+    handleTouchEnd: (e: TouchEvent<T>) => void;
+};
+export default useInputHandlers;

package/bpk-component-chatbot-input/src/hooks/useInputHandlers.js

@@ -0,0 +1,54 @@
+/*
+ * 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 { useCallback, useRef } from 'react';
+const useInputHandlers = (ref, onInputChange, onInputClick) => {
+  const touchStartTargetRef = useRef(null);
+  const handleInputChange = useCallback(e => {
+    onInputChange(e.target.value);
+  }, [onInputChange]);
+  const handleInputClick = useCallback(e => {
+    e.stopPropagation();
+    if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+      ref.current.focus();
+      onInputClick();
+    }
+  }, [onInputClick, ref]);
+  const handleTouchStart = useCallback(e => {
+    e.stopPropagation();
+    touchStartTargetRef.current = e.target;
+  }, []);
+  const handleTouchEnd = useCallback(e => {
+    e.stopPropagation();
+    if (touchStartTargetRef.current === e.target) {
+      if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+        e.preventDefault();
+        ref.current.focus();
+        onInputClick();
+      }
+    }
+    touchStartTargetRef.current = null;
+  }, [onInputClick, ref]);
+  return {
+    handleInputChange,
+    handleInputClick,
+    handleTouchStart,
+    handleTouchEnd
+  };
+};
+export default useInputHandlers;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+interface UseTextAreaAutoResizeProps {
+    ref: RefObject<HTMLTextAreaElement>;
+    value: string;
+    enabled?: boolean;
+}
+interface UseTextAreaAutoResizeReturn {
+    isExpanding: boolean;
+    textareaHeight: number;
+    containerHeight: number;
+    isCapped: boolean;
+    scrollToBottom: () => void;
+}
+export declare const LINE_HEIGHT = 24;
+export declare const MIN_INPUT_HEIGHT = 24;
+export declare const MAX_INPUT_HEIGHT_PHASE_1: number;
+export declare const MAX_INPUT_HEIGHT_PHASE_2: number;
+export declare const MIN_CONTAINER_HEIGHT = 24;
+export declare const MAX_CONTAINER_HEIGHT = 96;
+export declare const PARENT_PADDING_TOP = 16;
+declare const useTextAreaAutoResize: ({ enabled, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
+export default useTextAreaAutoResize;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.js

@@ -0,0 +1,137 @@
+/*
+ * 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 { useCallback, useLayoutEffect, useRef, useState } from 'react';
+export const LINE_HEIGHT = 24;
+export const MIN_INPUT_HEIGHT = LINE_HEIGHT;
+export const MAX_INPUT_HEIGHT_PHASE_1 = LINE_HEIGHT * 4;
+export const MAX_INPUT_HEIGHT_PHASE_2 = LINE_HEIGHT * 5;
+export const MIN_CONTAINER_HEIGHT = 24;
+export const MAX_CONTAINER_HEIGHT = 96;
+export const PARENT_PADDING_TOP = 16;
+const useTextAreaAutoResize = ({
+  enabled = true,
+  ref,
+  value
+}) => {
+  const [dimensions, setDimensions] = useState({
+    isExpanding: false,
+    textareaHeight: MIN_INPUT_HEIGHT,
+    containerHeight: MIN_CONTAINER_HEIGHT,
+    isCapped: false
+  });
+  const [containerWidth, setContainerWidth] = useState(0);
+  const measureElementRef = useRef(null);
+  const lineHeightRef = useRef(LINE_HEIGHT);
+  const previousValueRef = useRef('');
+  const shouldScrollRef = useRef(false);
+  const isInitialRenderRef = useRef(true);
+  const scrollToBottom = useCallback(() => {
+    if (ref?.current) {
+      const textarea = ref.current;
+      requestAnimationFrame(() => {
+        textarea.scrollTop = textarea.scrollHeight;
+      });
+    }
+  }, [ref]);
+  useLayoutEffect(() => {
+    if (!enabled || !ref?.current) {
+      return undefined;
+    }
+    const textarea = ref.current;
+    const computedStyle = getComputedStyle(textarea);
+    const parsedLineHeight = parseFloat(computedStyle.lineHeight);
+    if (!Number.isNaN(parsedLineHeight) && parsedLineHeight > 0) {
+      lineHeightRef.current = parsedLineHeight;
+    }
+    const tempTextarea = document.createElement('textarea');
+    tempTextarea.style.position = 'absolute';
+    tempTextarea.style.visibility = 'hidden';
+    tempTextarea.style.height = 'auto';
+    tempTextarea.style.fontSize = computedStyle.fontSize;
+    tempTextarea.style.fontFamily = computedStyle.fontFamily;
+    tempTextarea.style.lineHeight = computedStyle.lineHeight;
+    tempTextarea.style.padding = computedStyle.padding;
+    tempTextarea.style.border = computedStyle.border;
+    tempTextarea.style.boxSizing = computedStyle.boxSizing;
+    tempTextarea.style.whiteSpace = 'pre-wrap';
+    tempTextarea.style.overflowWrap = 'break-word';
+    tempTextarea.style.width = `${textarea.offsetWidth}px`;
+    tempTextarea.rows = 1;
+    document.body.appendChild(tempTextarea);
+    measureElementRef.current = tempTextarea;
+    const resizeObserver = new ResizeObserver(entries => {
+      setContainerWidth(Math.round(entries[0].contentRect.width));
+    });
+    resizeObserver.observe(textarea);
+    return () => {
+      if (measureElementRef.current) {
+        measureElementRef.current.remove();
+        measureElementRef.current = null;
+      }
+      resizeObserver.disconnect();
+    };
+  }, [enabled, ref]);
+  useLayoutEffect(() => {
+    if (!enabled || !ref?.current || !measureElementRef.current) {
+      return;
+    }
+    const textarea = ref.current;
+    const measureEl = measureElementRef.current;
+    measureEl.style.width = `${textarea.offsetWidth}px`;
+    measureEl.value = value || ' ';
+    const {
+      scrollHeight
+    } = measureEl;
+    const lines = Math.max(1, Math.ceil(scrollHeight / lineHeightRef.current));
+    const isCapped = lines >= 5;
+    const maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    const targetInputHeight = Math.max(MIN_INPUT_HEIGHT, Math.min(scrollHeight, maxInputHeight));
+    const extraSpace = isCapped ? PARENT_PADDING_TOP : 0;
+    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, MAX_CONTAINER_HEIGHT));
+    setDimensions(prev => {
+      const isContentAdded = value.length > previousValueRef.current.length;
+      const isAppending = value.startsWith(previousValueRef.current);
+      const prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      const isInitialRender = isInitialRenderRef.current;
+      const shouldScroll = isContentAdded && isAppending && textarea.scrollHeight > prevMaxHeight || isInitialRender && scrollHeight > maxInputHeight;
+      shouldScrollRef.current = shouldScroll;
+      if (isInitialRender) {
+        isInitialRenderRef.current = false;
+      }
+      return {
+        isExpanding: lines > 1,
+        textareaHeight: targetInputHeight,
+        containerHeight: targetContainerHeight,
+        isCapped
+      };
+    });
+    previousValueRef.current = value;
+  }, [value, ref, enabled, containerWidth]);
+  useLayoutEffect(() => {
+    if (shouldScrollRef.current) {
+      scrollToBottom();
+      shouldScrollRef.current = false;
+    }
+  }, [dimensions, scrollToBottom]);
+  return {
+    ...dimensions,
+    scrollToBottom
+  };
+};
+export default useTextAreaAutoResize;

package/bpk-component-chatbot-input/src/themeAttributes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Theme attributes for BpkChatbotInput.
+ *
+ * Usage with BpkThemeProvider:
+ *
+ *   import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ *   import BpkChatbotInput, { themeAttributes } from '@skyscanner/backpack-web/bpk-component-chatbot-input';
+ *
+ *   <BpkThemeProvider theme={{ chatbotInputBorderRadius: '999px', chatbotInputFocusBorderColor: '#FF6600' }} themeAttributes={themeAttributes}>
+ *     <BpkChatbotInput ... />
+ *   </BpkThemeProvider>
+ */
+declare const themeAttributes: string[];
+export default themeAttributes;

package/bpk-component-chatbot-input/src/themeAttributes.js

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+/**
+ * Theme attributes for BpkChatbotInput.
+ *
+ * Usage with BpkThemeProvider:
+ *
+ *   import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ *   import BpkChatbotInput, { themeAttributes } from '@skyscanner/backpack-web/bpk-component-chatbot-input';
+ *
+ *   <BpkThemeProvider theme={{ chatbotInputBorderRadius: '999px', chatbotInputFocusBorderColor: '#FF6600' }} themeAttributes={themeAttributes}>
+ *     <BpkChatbotInput ... />
+ *   </BpkThemeProvider>
+ */
+const themeAttributes = [/** Border radius for the input container. Applies to both cars and composer modes. */
+'chatbotInputBorderRadius', /** Border colour for hover and focus states. Only applies to the cars (single-line) mode. */
+'chatbotInputFocusBorderColor'];
+export default themeAttributes;

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

@@ -1,11 +1,11 @@
 import BpkCheckbox, { type Props as BpkCheckboxProps } from './src/BpkCheckbox';
-import BpkCheckboxV2 from './src/BpkCheckboxV2/BpkCheckbox';
-import { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from './src/BpkCheckboxV2/themeAttributes';
 import themeAttributes from './src/themeAttributes';
-export type { BpkCheckboxProps };
-export type { BpkCheckboxRootProps, BpkCheckedState } from './src/BpkCheckboxV2/BpkCheckboxRoot';
-export type { BpkCheckboxControlProps } from './src/BpkCheckboxV2/BpkCheckboxControl';
-export type { BpkCheckboxLabelProps } from './src/BpkCheckboxV2/BpkCheckboxLabel';
-export type { BpkCheckboxDescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxDescription';
 export default BpkCheckbox;
-export { themeAttributes, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2, };
+export type { BpkCheckboxProps };
+export { themeAttributes };
+export { default as BpkCheckboxV2 } from './src/BpkCheckboxV2/BpkCheckboxV2';
+export { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, } from './src/BpkCheckboxV2/themeAttributes';
+export type { BpkCheckboxV2RootProps, BpkCheckboxV2CheckedState } from './src/BpkCheckboxV2/BpkCheckboxV2Root';
+export type { BpkCheckboxV2ControlProps } from './src/BpkCheckboxV2/BpkCheckboxV2Control';
+export type { BpkCheckboxV2LabelProps } from './src/BpkCheckboxV2/BpkCheckboxV2Label';
+export type { BpkCheckboxV2DescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxV2Description';

package/bpk-component-checkbox/index.js

@@ -17,8 +17,8 @@
  */
 
 import BpkCheckbox from "./src/BpkCheckbox";
-import BpkCheckboxV2 from "./src/BpkCheckboxV2/BpkCheckbox";
-import { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from "./src/BpkCheckboxV2/themeAttributes";
 import themeAttributes from "./src/themeAttributes";
 export default BpkCheckbox;
-export { themeAttributes, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2 };
+export { themeAttributes };
+export { default as BpkCheckboxV2 } from "./src/BpkCheckboxV2/BpkCheckboxV2";
+export { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from "./src/BpkCheckboxV2/themeAttributes";

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts

@@ -0,0 +1,9 @@
+declare const BpkCheckboxV2: {
+    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => null;
+    Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children }: import("./BpkCheckboxV2Description").BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckbox.js → BpkCheckboxV2.js}

@@ -16,18 +16,18 @@
  * limitations under the License.
  */
 
-import BpkCheckboxControl from "./BpkCheckboxControl";
-import BpkCheckboxDescription from "./BpkCheckboxDescription";
-import BpkCheckboxHiddenInput from "./BpkCheckboxHiddenInput";
-import BpkCheckboxIndicator from "./BpkCheckboxIndicator";
-import BpkCheckboxLabel from "./BpkCheckboxLabel";
-import BpkCheckboxRoot from "./BpkCheckboxRoot";
-const BpkCheckbox = {
-  Root: BpkCheckboxRoot,
-  Control: BpkCheckboxControl,
-  Indicator: BpkCheckboxIndicator,
-  Label: BpkCheckboxLabel,
-  Description: BpkCheckboxDescription,
-  HiddenInput: BpkCheckboxHiddenInput
+import BpkCheckboxV2Control from "./BpkCheckboxV2Control";
+import BpkCheckboxV2Description from "./BpkCheckboxV2Description";
+import BpkCheckboxV2HiddenInput from "./BpkCheckboxV2HiddenInput";
+import BpkCheckboxV2Indicator from "./BpkCheckboxV2Indicator";
+import BpkCheckboxV2Label from "./BpkCheckboxV2Label";
+import BpkCheckboxV2Root from "./BpkCheckboxV2Root";
+const BpkCheckboxV2 = {
+  Root: BpkCheckboxV2Root,
+  Control: BpkCheckboxV2Control,
+  Indicator: BpkCheckboxV2Indicator,
+  Label: BpkCheckboxV2Label,
+  Description: BpkCheckboxV2Description,
+  HiddenInput: BpkCheckboxV2HiddenInput
 };
-export default BpkCheckbox;
+export default BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Control.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxV2ControlProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxV2Control: ({ children }: BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxV2Control;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxControl.js → BpkCheckboxV2Control.js}

@@ -18,13 +18,13 @@
 
 import { Checkbox } from '@ark-ui/react';
 import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckboxControl = ({
+const BpkCheckboxV2Control = ({
   children
 }) => /*#__PURE__*/_jsx(Checkbox.Control, {
   className: getClassName('bpk-checkbox-v2__control'),
   children: children
 });
-export default BpkCheckboxControl;
+export default BpkCheckboxV2Control;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Description.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxV2DescriptionProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxV2Description: ({ children }: BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxV2Description;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxDescription.js → BpkCheckboxV2Description.js}

@@ -17,16 +17,16 @@
  */
 
 import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 // Description renders as a <span> inside the Checkbox.Root <label>.
 // Being inside the <label> element means screen readers announce its text
 // as part of the checkbox's accessible name.
-const BpkCheckboxDescription = ({
+const BpkCheckboxV2Description = ({
   children
 }) => /*#__PURE__*/_jsx("span", {
   className: getClassName('bpk-checkbox-v2__description'),
   children: children
 });
-export default BpkCheckboxDescription;
+export default BpkCheckboxV2Description;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.d.ts

@@ -0,0 +1,2 @@
+declare const BpkCheckboxV2HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxHiddenInput.js → BpkCheckboxV2HiddenInput.js}

@@ -21,5 +21,5 @@ import { Checkbox } from '@ark-ui/react';
 // Renders Ark's visually hidden native <input type="checkbox">.
 // Include when the checkbox is inside a <form> for native form submission.
 import { jsx as _jsx } from "react/jsx-runtime";
-const BpkCheckboxHiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
-export default BpkCheckboxHiddenInput;
+const BpkCheckboxV2HiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
+export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Indicator.d.ts

@@ -0,0 +1,2 @@
+declare const BpkCheckboxV2Indicator: () => null;
+export default BpkCheckboxV2Indicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxIndicator.js → BpkCheckboxV2Indicator.js}

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-// The checkmark and indeterminate bar are rendered via CSS on BpkCheckboxControl
+// The checkmark and indeterminate bar are rendered via CSS on BpkCheckboxV2Control
 // (bpk-checkbox__checkmark mixin + ::before pseudo-element), so this slot
 // component intentionally renders nothing.
-const BpkCheckboxIndicator = () => null;
-export default BpkCheckboxIndicator;
+const BpkCheckboxV2Indicator = () => null;
+export default BpkCheckboxV2Indicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Label.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxV2LabelProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxV2Label: ({ children }: BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxV2Label;