@skyscanner/backpack-web 42.0.0 → 42.2.0

package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.d.ts

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+import type { CheckboxCardVariant, CheckboxCardRadius } from './common-types';
+export type RootProps = {
+    /**
+     * Children components (HiddenInput, Content, slots, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Controlled checked state.
+     * When provided, component operates in controlled mode.
+     */
+    checked?: boolean;
+    /**
+     * Default checked state for uncontrolled mode.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback invoked when checked state changes.
+     * @param checked - New checked state
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the checkbox card is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the card is in a loading state.
+     * Non-interactive (cursor not-allowed, clicks blocked) but not visually disabled.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Form name attribute.
+     */
+    name?: string;
+    /**
+     * Form value attribute.
+     */
+    value?: string;
+    /**
+     * Visual variant based on background context.
+     * @default "onCanvasDefault"
+     */
+    variant?: CheckboxCardVariant;
+    /**
+     * Border radius style.
+     * @default "rounded"
+     */
+    radius?: CheckboxCardRadius;
+    /**
+     * ARIA label for accessibility.
+     * Provide if no visible label is present.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this component.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this component.
+     */
+    'aria-describedby'?: string;
+};
+/**
+ * BpkCheckboxCard.Root - Root container for checkbox card compound component.
+ *
+ * Built on Ark UI's CheckboxRoot which renders as a <label> element, providing
+ * built-in accessibility, keyboard navigation, and form integration.
+ *
+ * @example Controlled mode
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @example Uncontrolled mode
+ * <BpkCheckboxCard.Root defaultChecked={false}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @returns {JSX.Element} The rendered checkbox card root element.
+ */
+export declare function Root({ 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, children, defaultChecked, disabled, loading, name, onCheckedChange, radius, required, value, variant, }: RootProps): import("react/jsx-runtime").JSX.Element;

package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.js

@@ -0,0 +1,101 @@
+/*
+ * 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 { useMemo } from 'react';
+import { CheckboxRoot } from '@ark-ui/react';
+import { withButtonAlignment } from "../../bpk-component-icon";
+import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+import { cssModules } from "../../bpk-react-utils";
+import { CheckboxCardContext } from "./CheckboxCardContext";
+import { CHECKBOX_CARD_VARIANTS, CHECKBOX_CARD_RADIUS } from "./common-types";
+import STYLES from "./BpkCheckboxCard.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
+/**
+ * BpkCheckboxCard.Root - Root container for checkbox card compound component.
+ *
+ * Built on Ark UI's CheckboxRoot which renders as a <label> element, providing
+ * built-in accessibility, keyboard navigation, and form integration.
+ *
+ * @example Controlled mode
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @example Uncontrolled mode
+ * <BpkCheckboxCard.Root defaultChecked={false}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @returns {JSX.Element} The rendered checkbox card root element.
+ */
+
+export function Root({
+  'aria-describedby': ariaDescribedby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  checked,
+  children,
+  defaultChecked,
+  disabled = false,
+  loading = false,
+  name,
+  onCheckedChange,
+  radius = CHECKBOX_CARD_RADIUS.rounded,
+  required = false,
+  value,
+  variant = CHECKBOX_CARD_VARIANTS.onCanvasDefault
+}) {
+  const contextValue = useMemo(() => ({
+    variant,
+    radius,
+    loading
+  }), [variant, radius, loading]);
+  return /*#__PURE__*/_jsx(CheckboxCardContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(CheckboxRoot, {
+      checked: checked,
+      defaultChecked: defaultChecked,
+      onCheckedChange: details => onCheckedChange?.(details.checked),
+      disabled: disabled || loading,
+      name: name,
+      value: value,
+      required: required,
+      asChild: true,
+      children: /*#__PURE__*/_jsxs("label", {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "data-loading": loading || undefined,
+        className: getClassName('bpk-checkbox-card-root', `bpk-checkbox-card-root--${variant}`, `bpk-checkbox-card-root--radius-${radius}`),
+        children: [variant === CHECKBOX_CARD_VARIANTS.cars && /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-checkbox-card-indicator'),
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx(AlignedTickCircleIcon, {})
+        }), children]
+      })
+    })
+  });
+}

package/bpk-component-checkbox-card/src/CheckboxCardContext.d.ts

@@ -0,0 +1,27 @@
+import type { CheckboxCardVariant, CheckboxCardRadius } from './common-types';
+/**
+ * Context value for checkbox card components.
+ * Holds only Backpack-specific props (variant, radius, size).
+ * Checkbox state (checked, disabled, etc.) is accessed via Ark UI's useCheckboxContext().
+ */
+export type CheckboxCardContextValue = {
+    /** Visual variant based on background context */
+    variant: CheckboxCardVariant;
+    /** Border radius style */
+    radius: CheckboxCardRadius;
+    /** Whether the card is in a loading state (non-interactive, cursor not-allowed) */
+    loading: boolean;
+};
+/**
+ * React Context for BPK-specific checkbox card configuration.
+ * Checkbox state is managed by Ark UI's CheckboxRoot and accessed via useCheckboxContext().
+ */
+export declare const CheckboxCardContext: import("react").Context<CheckboxCardContextValue | null>;
+/**
+ * Hook to access BPK checkbox card context.
+ * Must be used within a BpkCheckboxCard.Root component.
+ *
+ * @throws Error if used outside of BpkCheckboxCard.Root
+ * @returns {CheckboxCardContextValue} The checkbox card context value.
+ */
+export declare function useCheckboxCardContext(): CheckboxCardContextValue;

package/bpk-component-checkbox-card/src/CheckboxCardContext.js

@@ -0,0 +1,47 @@
+/*
+ * 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 { createContext, useContext } from 'react';
+
+/**
+ * Context value for checkbox card components.
+ * Holds only Backpack-specific props (variant, radius, size).
+ * Checkbox state (checked, disabled, etc.) is accessed via Ark UI's useCheckboxContext().
+ */
+
+/**
+ * React Context for BPK-specific checkbox card configuration.
+ * Checkbox state is managed by Ark UI's CheckboxRoot and accessed via useCheckboxContext().
+ */
+export const CheckboxCardContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Hook to access BPK checkbox card context.
+ * Must be used within a BpkCheckboxCard.Root component.
+ *
+ * @throws Error if used outside of BpkCheckboxCard.Root
+ * @returns {CheckboxCardContextValue} The checkbox card context value.
+ */
+
+export function useCheckboxCardContext() {
+  const context = useContext(CheckboxCardContext);
+  if (!context) {
+    throw new Error('CheckboxCard compound components must be used within BpkCheckboxCard.Root. ' + 'Make sure you have wrapped your components in <BpkCheckboxCard.Root>.');
+  }
+  return context;
+}

package/bpk-component-checkbox-card/src/common-types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Variant types for visual presentation based on canvas/surface background
+ * - onCanvasDefault: For use on default/white backgrounds (selected: dark blue #05203C)
+ * - onCanvasContrast: For use on contrast/colored backgrounds (selected: dark blue #05203C)
+ * - onSurfaceContrast: For use on contrast surfaces (selected: accent blue #0062E3)
+ * - cars: For use in cars product context — same styling as onCanvasDefault but with
+ *   the corner Indicator automatically rendered (no need to add <BpkCheckboxCard.Indicator />)
+ */
+export declare const CHECKBOX_CARD_VARIANTS: {
+    readonly onCanvasDefault: "on-canvas-default";
+    readonly onCanvasContrast: "on-canvas-contrast";
+    readonly onSurfaceContrast: "on-surface-contrast";
+    readonly cars: "cars";
+};
+export type CheckboxCardVariant = (typeof CHECKBOX_CARD_VARIANTS)[keyof typeof CHECKBOX_CARD_VARIANTS];
+/**
+ * Radius types for border-radius
+ */
+export declare const CHECKBOX_CARD_RADIUS: {
+    readonly square: "square";
+    readonly rounded: "rounded";
+};
+export type CheckboxCardRadius = (typeof CHECKBOX_CARD_RADIUS)[keyof typeof CHECKBOX_CARD_RADIUS];
+/**
+ * Change handler signature for checkbox card
+ */
+export type CheckboxCardChangeHandler = (checked: boolean) => void;

package/bpk-component-checkbox-card/src/common-types.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.
+ */
+
+/**
+ * Variant types for visual presentation based on canvas/surface background
+ * - onCanvasDefault: For use on default/white backgrounds (selected: dark blue #05203C)
+ * - onCanvasContrast: For use on contrast/colored backgrounds (selected: dark blue #05203C)
+ * - onSurfaceContrast: For use on contrast surfaces (selected: accent blue #0062E3)
+ * - cars: For use in cars product context — same styling as onCanvasDefault but with
+ *   the corner Indicator automatically rendered (no need to add <BpkCheckboxCard.Indicator />)
+ */
+export const CHECKBOX_CARD_VARIANTS = {
+  onCanvasDefault: 'on-canvas-default',
+  onCanvasContrast: 'on-canvas-contrast',
+  onSurfaceContrast: 'on-surface-contrast',
+  cars: 'cars'
+};
+/**
+ * Radius types for border-radius
+ */
+export const CHECKBOX_CARD_RADIUS = {
+  square: 'square',
+  rounded: 'rounded'
+};
+
+/**
+ * Change handler signature for checkbox card
+ */

package/bpk-component-checkbox-card/src/themeAttributes.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+declare const CHECKBOX_CARD_THEME_ATTRIBUTES: readonly ["checkboxCardDefaultBackgroundColor", "checkboxCardDefaultTextColor", "checkboxCardSecondaryTextColor", "checkboxCardHoverBackgroundColor", "checkboxCardDefaultBorderColor", "checkboxCardHoverBorderColor", "checkboxCardCheckedBackgroundColor", "checkboxCardCheckedTextColor", "checkboxCardCheckedBorderColor", "checkboxCardDisabledBackgroundColor", "checkboxCardDisabledTextColor", "checkboxCardIndicatorBackgroundColor", "checkboxCardIndicatorTextColor"];
+type CheckboxCardThemeKey = (typeof CHECKBOX_CARD_THEME_ATTRIBUTES)[number];
+type CheckboxCardTheme = Record<CheckboxCardThemeKey, string>;
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+export declare function createCheckboxCardTheme(overrides?: Partial<CheckboxCardTheme>): CheckboxCardTheme;
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;

package/bpk-component-checkbox-card/src/themeAttributes.js

@@ -0,0 +1,87 @@
+/*
+ * 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 { canvasDay, coreAccentDay, colorWhite, lineDay, surfaceContrastDay, surfaceLowContrastDay, textDisabledDay, textOnDarkDay, textPrimaryDay, textSecondaryDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+const CHECKBOX_CARD_THEME_ATTRIBUTES = ['checkboxCardDefaultBackgroundColor', 'checkboxCardDefaultTextColor', 'checkboxCardSecondaryTextColor', 'checkboxCardHoverBackgroundColor', 'checkboxCardDefaultBorderColor', 'checkboxCardHoverBorderColor', 'checkboxCardCheckedBackgroundColor', 'checkboxCardCheckedTextColor', 'checkboxCardCheckedBorderColor', 'checkboxCardDisabledBackgroundColor', 'checkboxCardDisabledTextColor', 'checkboxCardIndicatorBackgroundColor', 'checkboxCardIndicatorTextColor'];
+/** Default theme values matching the SCSS token fallbacks */
+const CHECKBOX_CARD_DEFAULT_THEME = {
+  checkboxCardDefaultBackgroundColor: canvasDay,
+  checkboxCardDefaultTextColor: textPrimaryDay,
+  checkboxCardSecondaryTextColor: textSecondaryDay,
+  checkboxCardHoverBackgroundColor: surfaceLowContrastDay,
+  checkboxCardDefaultBorderColor: lineDay,
+  checkboxCardHoverBorderColor: lineDay,
+  checkboxCardCheckedBackgroundColor: surfaceContrastDay,
+  checkboxCardCheckedTextColor: textOnDarkDay,
+  checkboxCardCheckedBorderColor: 'transparent',
+  checkboxCardDisabledBackgroundColor: canvasDay,
+  checkboxCardDisabledTextColor: textDisabledDay,
+  checkboxCardIndicatorBackgroundColor: coreAccentDay,
+  checkboxCardIndicatorTextColor: colorWhite
+};
+
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+
+export function createCheckboxCardTheme(overrides = {}) {
+  return {
+    ...CHECKBOX_CARD_DEFAULT_THEME,
+    ...overrides
+  };
+}
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;