@skyscanner/backpack-web 41.10.0-beta-v1 → 41.11.1

package/bpk-component-layout/src/BpkFlex.js

@@ -1,51 +0,0 @@
-/*
- * 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 { Flex } from '@chakra-ui/react';
-import { processBpkComponentProps } from "./tokenUtils";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkFlex = ({
-  align,
-  basis,
-  children,
-  direction,
-  grow,
-  inline,
-  justify,
-  shrink,
-  wrap,
-  ...props
-}) => {
-  const processedProps = processBpkComponentProps(props, {
-    component: 'BpkFlex',
-    responsiveProps: {
-      flexDirection: direction,
-      justifyContent: justify,
-      alignItems: align,
-      flexWrap: wrap,
-      flexGrow: grow,
-      flexShrink: shrink,
-      flexBasis: basis
-    }
-  });
-  return /*#__PURE__*/_jsx(Flex, {
-    ...processedProps,
-    display: inline ? 'inline-flex' : undefined,
-    children: children
-  });
-};

package/bpk-component-layout/src/BpkGrid.d.ts

@@ -1,3 +0,0 @@
-import type { BpkGridProps } from './types';
-export declare const BpkGrid: ({ align, autoColumns, autoFlow, autoRows, children, column, inline, justify, row, templateAreas, templateColumns, templateRows, ...props }: BpkGridProps) => import("react/jsx-runtime").JSX.Element;
-export type { BpkGridProps };

package/bpk-component-layout/src/BpkGrid.js

@@ -1,57 +0,0 @@
-/*
- * 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 { Grid } from '@chakra-ui/react';
-import { processBpkComponentProps } from "./tokenUtils";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGrid = ({
-  align,
-  autoColumns,
-  autoFlow,
-  autoRows,
-  children,
-  column,
-  inline,
-  justify,
-  row,
-  templateAreas,
-  templateColumns,
-  templateRows,
-  ...props
-}) => {
-  const processedProps = processBpkComponentProps(props, {
-    component: 'BpkGrid',
-    responsiveProps: {
-      justifyContent: justify,
-      alignItems: align,
-      gridTemplateColumns: templateColumns,
-      gridTemplateRows: templateRows,
-      gridTemplateAreas: templateAreas,
-      gridAutoFlow: autoFlow,
-      gridAutoRows: autoRows,
-      gridAutoColumns: autoColumns,
-      gridColumn: column,
-      gridRow: row
-    }
-  });
-  return /*#__PURE__*/_jsx(Grid, {
-    ...processedProps,
-    display: inline ? 'inline-grid' : undefined,
-    children: children
-  });
-};

package/bpk-component-layout/src/BpkGridItem.d.ts

@@ -1,3 +0,0 @@
-import type { BpkGridItemProps } from './types';
-export declare const BpkGridItem: ({ area, children, colEnd, colSpan, colStart, rowEnd, rowSpan, rowStart, ...props }: BpkGridItemProps) => import("react/jsx-runtime").JSX.Element;
-export type { BpkGridItemProps };

package/bpk-component-layout/src/BpkGridItem.js

@@ -1,45 +0,0 @@
-/*
- * 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 { GridItem } from '@chakra-ui/react';
-import { processBpkProps } from "./tokenUtils";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGridItem = ({
-  area,
-  children,
-  colEnd,
-  colSpan,
-  colStart,
-  rowEnd,
-  rowSpan,
-  rowStart,
-  ...props
-}) => {
-  const processedProps = processBpkProps(props);
-  return /*#__PURE__*/_jsx(GridItem, {
-    ...processedProps,
-    area: area,
-    colEnd: colEnd,
-    colStart: colStart,
-    colSpan: colSpan,
-    rowEnd: rowEnd,
-    rowStart: rowStart,
-    rowSpan: rowSpan,
-    children: children
-  });
-};

package/bpk-component-layout/src/BpkProvider.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-export interface BpkProviderProps {
-    children: ReactNode;
-}
-/**
- * BpkProvider - Provides Chakra UI context for Backpack layout components
- *
- * Chakra UI 3.0 requires the `value` prop to be set to a system object.
- * We create a custom system with Backpack tokens using createSystem.
- *
- * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
- */
-export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;

package/bpk-component-layout/src/BpkProvider.js

@@ -1,42 +0,0 @@
-/*
- * 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 { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
-import { createBpkConfig } from "./theme";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Creates a Chakra UI system with Backpack token mappings
- * Chakra UI 3.0 uses `createSystem` with `defaultConfig` and custom config
- */
-const bpkSystem = createSystem(defaultConfig, createBpkConfig());
-
-/**
- * BpkProvider - Provides Chakra UI context for Backpack layout components
- *
- * Chakra UI 3.0 requires the `value` prop to be set to a system object.
- * We create a custom system with Backpack tokens using createSystem.
- *
- * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
- */
-export const BpkProvider = ({
-  children
-}) => /*#__PURE__*/_jsx(ChakraProvider, {
-  value: bpkSystem,
-  children: children
-});

package/bpk-component-layout/src/BpkStack.constant.d.ts

@@ -1,2 +0,0 @@
-declare const StackOptionKeys: readonly ["align", "justify", "wrap", "direction"];
-export default StackOptionKeys;

package/bpk-component-layout/src/BpkStack.constant.js

@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-
-// these options align with Chakra's StackOption excluding separator
-// TODO: add separator to Stack
-const StackOptionKeys = ['align', 'justify', 'wrap', 'direction'];
-export default StackOptionKeys;

package/bpk-component-layout/src/BpkStack.d.ts

@@ -1,5 +0,0 @@
-import type { BpkStackProps } from './types';
-export declare const BpkStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkHStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkVStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export type { BpkStackProps };

package/bpk-component-layout/src/BpkStack.js

@@ -1,57 +0,0 @@
-/*
- * 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 { Stack, VStack, HStack } from '@chakra-ui/react';
-import { processBpkComponentProps } from "./tokenUtils";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkStack = ({
-  children,
-  ...props
-}) => {
-  const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack'
-  });
-  return /*#__PURE__*/_jsx(Stack, {
-    ...processedProps,
-    children: children
-  });
-};
-export const BpkHStack = ({
-  children,
-  ...props
-}) => {
-  const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack'
-  });
-  return /*#__PURE__*/_jsx(HStack, {
-    ...processedProps,
-    children: children
-  });
-};
-export const BpkVStack = ({
-  children,
-  ...props
-}) => {
-  const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack'
-  });
-  return /*#__PURE__*/_jsx(VStack, {
-    ...processedProps,
-    children: children
-  });
-};

package/bpk-component-layout/src/BpkVessel.d.ts

@@ -1,46 +0,0 @@
-import type { BpkVesselProps } from './types';
-/**
- * A "migration hatch" layout primitive designed to ease component migration.
- *
- * BpkVessel renders an HTML element (default: div) and accepts all standard
- * HTML attributes for maximum migration flexibility.
- *
- * **When to use:**
- * - During component migration when you need to maintain existing className/style usage
- * - When you need to pass testing attributes (data-testid) or accessibility props
- * - As a temporary solution while refactoring components
- *
- * **Important:**
- * - This is a temporary migration tool, not a permanent solution
- * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
- * - Plan to migrate to BpkBox once legacy styling is removed
- *
- * @example
- * ```tsx
- * <BpkVessel
- *   className="legacy-class"
- *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
- *   data-testid="migration-wrapper"
- *   onClick={handleClick}
- * >
- *   Content
- * </BpkVessel>
- *
- * <BpkVessel
- *   as="section"
- *   className="legacy-section"
- *   aria-label="Main content"
- *   role="region"
- *   dir="rtl"
- * >
- *   Section Content
- * </BpkVessel>
- * ```
- *
- * @todo Migration component - pending removal after component migration is complete.
- *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
- *
- * @returns {JSX.Element} An HTML element with all props applied.
- */
-export declare const BpkVessel: ({ as: Element, children, ...restProps }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
-export type { BpkVesselProps };

package/bpk-component-layout/src/BpkVessel.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * 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.
- */
-
-/**
- * A "migration hatch" layout primitive designed to ease component migration.
- *
- * BpkVessel renders an HTML element (default: div) and accepts all standard
- * HTML attributes for maximum migration flexibility.
- *
- * **When to use:**
- * - During component migration when you need to maintain existing className/style usage
- * - When you need to pass testing attributes (data-testid) or accessibility props
- * - As a temporary solution while refactoring components
- *
- * **Important:**
- * - This is a temporary migration tool, not a permanent solution
- * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
- * - Plan to migrate to BpkBox once legacy styling is removed
- *
- * @example
- * ```tsx
- * <BpkVessel
- *   className="legacy-class"
- *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
- *   data-testid="migration-wrapper"
- *   onClick={handleClick}
- * >
- *   Content
- * </BpkVessel>
- *
- * <BpkVessel
- *   as="section"
- *   className="legacy-section"
- *   aria-label="Main content"
- *   role="region"
- *   dir="rtl"
- * >
- *   Section Content
- * </BpkVessel>
- * ```
- *
- * @todo Migration component - pending removal after component migration is complete.
- *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
- *
- * @returns {JSX.Element} An HTML element with all props applied.
- */
-export const BpkVessel = ({
-  as: Element = 'div',
-  children,
-  ...restProps
-}) => /*#__PURE__*/_jsx(Element, {
-  ...restProps,
-  children: children
-});

package/bpk-component-layout/src/commonProps.d.ts

@@ -1,86 +0,0 @@
-import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
-/**
- * Common spacing-related props shared by all Backpack layout components
- * All spacing props must use Backpack spacing tokens or percentages
- */
-export interface BpkSpacingProps {
-    padding?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingTop?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingRight?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingBottom?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingLeft?: BpkResponsiveValue<BpkSpacingValue>;
-    margin?: BpkResponsiveValue<BpkSpacingValue>;
-    marginTop?: BpkResponsiveValue<BpkSpacingValue>;
-    marginRight?: BpkResponsiveValue<BpkSpacingValue>;
-    marginBottom?: BpkResponsiveValue<BpkSpacingValue>;
-    marginLeft?: BpkResponsiveValue<BpkSpacingValue>;
-    marginStart?: BpkResponsiveValue<BpkSpacingValue>;
-    marginEnd?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingStart?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingEnd?: BpkResponsiveValue<BpkSpacingValue>;
-    marginInline?: BpkResponsiveValue<BpkSpacingValue>;
-    paddingInline?: BpkResponsiveValue<BpkSpacingValue>;
-    gap?: BpkResponsiveValue<BpkSpacingValue>;
-    width?: BpkResponsiveValue<BpkSizeValue>;
-    height?: BpkResponsiveValue<BpkSizeValue>;
-    minWidth?: BpkResponsiveValue<BpkSizeValue>;
-    minHeight?: BpkResponsiveValue<BpkSizeValue>;
-    maxWidth?: BpkResponsiveValue<BpkSizeValue>;
-    maxHeight?: BpkResponsiveValue<BpkSizeValue>;
-    top?: BpkResponsiveValue<BpkPositionValue>;
-    right?: BpkResponsiveValue<BpkPositionValue>;
-    bottom?: BpkResponsiveValue<BpkPositionValue>;
-    left?: BpkResponsiveValue<BpkPositionValue>;
-}
-/**
- * Common props for all Backpack layout components
- * Combines spacing and color props, and explicitly excludes className and
- * certain props (e.g. typography, composite borders, transitions) to keep
- * layout components purely structural.
- *
- * NOTE:
- * - Layout components other than BpkBox do not expose event handlers.
- * - BpkBox reintroduces a minimal set of events (onClick, onFocus, onBlur)
- *   on its own props type.
- */
-export interface BpkCommonLayoutProps extends BpkSpacingProps {
-    className?: never;
-    style?: never;
-    'data-testid'?: string;
-    'data-cy'?: string;
-    color?: never;
-    background?: never;
-    backgroundColor?: never;
-    borderColor?: never;
-    borderTopColor?: never;
-    borderRightColor?: never;
-    borderBottomColor?: never;
-    borderLeftColor?: never;
-    borderWidth?: never;
-    borderTopWidth?: never;
-    borderRightWidth?: never;
-    borderBottomWidth?: never;
-    borderLeftWidth?: never;
-    borderRadius?: never;
-    borderTopLeftRadius?: never;
-    borderTopRightRadius?: never;
-    borderBottomLeftRadius?: never;
-    borderBottomRightRadius?: never;
-    boxShadow?: never;
-    border?: never;
-    borderTop?: never;
-    borderRight?: never;
-    borderBottom?: never;
-    borderLeft?: never;
-    borderInline?: never;
-    borderBlock?: never;
-    borderX?: never;
-    borderY?: never;
-    transition?: never;
-    transitionProperty?: never;
-    transitionDuration?: never;
-    transitionTimingFunction?: never;
-    transitionDelay?: never;
-    transform?: never;
-    transformOrigin?: never;
-}

package/bpk-component-layout/src/commonProps.js

@@ -1 +0,0 @@
-export {};

package/bpk-component-layout/src/theme.d.ts

@@ -1,36 +0,0 @@
-/**
- * Exports spacing map for use in tokenUtils
- * This allows tokenUtils to look up actual spacing values
- *
- * @returns {Record<string, string>} A map of spacing token names to values.
- */
-export declare function getSpacingMap(): Record<string, string>;
-/**
- * Gets the actual spacing value for a Backpack spacing token
- *
- * @param {string} token - Backpack spacing token name.
- * @returns {string | undefined} The actual spacing value.
- */
-export declare function getSpacingValue(token: string): string | undefined;
-/**
- * Gets the actual border width value for a Backpack border size token
- *
- * @param {string} token - Backpack border size token name.
- * @returns {string | undefined} The actual border width value.
- */
-export declare function getBorderSizeValue(token: string): string | undefined;
-/**
- * Gets the actual border radius value for a Backpack border radius token
- *
- * @param {string} token - Backpack border radius token name.
- * @returns {string | undefined} The actual border radius value.
- */
-export declare function getBorderRadiusValue(token: string): string | undefined;
-/**
- * Gets the actual box-shadow value for a Backpack shadow token
- *
- * @param {string} token - Backpack shadow token name.
- * @returns {string | undefined} The actual box-shadow value.
- */
-export declare function getShadowValue(token: string): string | undefined;
-export declare function createBpkConfig(): import("@chakra-ui/react").SystemConfig;