@skyscanner/backpack-web 41.6.0 → 41.7.0-beta-v1

package/bpk-component-breakpoint/src/useMediaQuery.js

@@ -19,7 +19,14 @@
 import { useEffect, useState } from 'react';
 const useMediaQuery = (query, matchSSR = false) => {
   const isClient = typeof window !== 'undefined' && !!window.matchMedia;
-  const [matches, setMatches] = useState(isClient ? window.matchMedia(query).matches : matchSSR);
+  const [matches, setMatches] = useState(() => {
+    // When matchSSR=true: use matchSSR value to match server-rendered HTML
+    // This prevents hydration errors when User-Agent (server) != viewport size (client)
+    if (!isClient || matchSSR) {
+      return matchSSR;
+    }
+    return window.matchMedia(query).matches;
+  });
   useEffect(() => {
     if (isClient) {
       const media = window.matchMedia(query);

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

@@ -0,0 +1,16 @@
+export { BpkProvider } from './src/BpkProvider';
+export { BpkBox } from './src/BpkBox';
+export { BpkFlex } from './src/BpkFlex';
+export { BpkGrid } from './src/BpkGrid';
+export { BpkGridItem } from './src/BpkGridItem';
+export type { BpkProviderProps } from './src/BpkProvider';
+export type { BpkBoxProps } from './src/BpkBox';
+export type { BpkFlexProps } from './src/BpkFlex';
+export type { BpkGridProps } from './src/BpkGrid';
+export type { BpkGridItemProps } from './src/BpkGridItem';
+export { BpkStack, BpkHStack, BpkVStack } from './src/BpkStack';
+export type { BpkStackProps } from './src/BpkStack';
+export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, BpkGridSpecificProps, BpkGridItemSpecificProps, } from './src/types';
+export type { BpkStackSpecificProps } from './src/types';
+export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';

package/bpk-component-layout/index.js

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export { BpkProvider } from "./src/BpkProvider";
+export { BpkBox } from "./src/BpkBox";
+export { BpkFlex } from "./src/BpkFlex";
+export { BpkGrid } from "./src/BpkGrid";
+export { BpkGridItem } from "./src/BpkGridItem";
+export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
+
+// Export token types and utilities
+
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { BpkFlexProps } from './types';
+export declare const BpkFlex: ({ align, basis, children, direction, grow, inline, justify, shrink, wrap, ...props }: BpkFlexProps) => import("react/jsx-runtime").JSX.Element;
+export type { BpkFlexProps };

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

@@ -0,0 +1,51 @@
+/*
+ * 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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,57 @@
+/*
+ * 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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,45 @@
+/*
+ * 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,42 @@
+/*
+ * 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

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

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

@@ -0,0 +1,22 @@
+/*
+ * 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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,57 @@
+/*
+ * 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/commonProps.d.ts

@@ -0,0 +1,86 @@
+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

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

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

@@ -0,0 +1,36 @@
+/**
+ * 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;