@entur/layout 3.3.3 → 3.4.0

package/dist/beta/types/Grid/Grid.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+import { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+type AlignItems = React.CSSProperties['alignItems'];
+type JustifyContent = React.CSSProperties['justifyContent'];
+type AlignContent = React.CSSProperties['alignContent'];
+export type GridOwnProps = {
+    /** CSS grid-template-columns value (supports responsive objects)
+     * @default "repeat(12, 1fr)"
+     */
+    templateColumns?: string | ResponsiveValue<string>;
+    /** Spacing between grid items (supports responsive objects)
+     * @default "m"
+     */
+    gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;
+    /** Vertical spacing between grid rows (supports responsive objects) */
+    rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;
+    /** Horizontal spacing between grid columns (supports responsive objects) */
+    columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;
+    /** CSS grid-template-rows value (supports responsive objects) */
+    templateRows?: string | ResponsiveValue<string>;
+    /** CSS grid-auto-flow value (supports responsive objects)
+     * @default "row"
+     */
+    autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | ResponsiveValue<'row' | 'column' | 'dense' | 'row dense' | 'column dense'>;
+    /** CSS align-items value (supports responsive objects) */
+    align?: AlignItems | ResponsiveValue<AlignItems>;
+    /** CSS justify-content value (supports responsive objects) */
+    justify?: JustifyContent | ResponsiveValue<JustifyContent>;
+    /** CSS align-content value (supports responsive objects) */
+    alignContent?: AlignContent | ResponsiveValue<AlignContent>;
+    /** The height of the grid container */
+    height?: string;
+    /** HTML element or React component used to render the Grid
+     * @default "div"
+     */
+    as?: string | React.ElementType;
+    /** Additional class names */
+    className?: string;
+    /** Content of the Grid container */
+    children?: React.ReactNode;
+};
+export type GridProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridOwnProps>;
+declare const defaultElement = "div";
+export declare const Grid: <E extends React.ElementType = "div">({ templateColumns, templateRows, gap, rowGap, columnGap, autoFlow, align, justify, alignContent, height, as, className, children, style, ...rest }: GridProps<E>) => JSX.Element;
+export {};

package/dist/beta/types/Grid/GridItem.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+import { ResponsiveValue } from '../LayoutWrapper/utils';
+export type GridItemOwnProps = {
+    /** Number of columns the item should span (supports responsive objects)
+     * If number: adds "span" prefix (e.g., 6 → "span 6")
+     * If string: used directly (e.g., "span 3" or "1 / 3")
+     */
+    colSpan?: number | string | ResponsiveValue<number | string>;
+    /** Number of rows the item should span (supports responsive objects)
+     * @default 1
+     * If number: adds "span" prefix (e.g., 2 → "span 2")
+     * If string: used directly (e.g., "span 2" or "1 / 3")
+     */
+    rowSpan?: number | string | ResponsiveValue<number | string>;
+    /** HTML element or React component used to render the Grid item
+     * @default "div"
+     */
+    as?: string | React.ElementType;
+    /** Additional class names */
+    className?: string;
+    /** Content of the Grid item */
+    children?: React.ReactNode;
+};
+export type GridItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridItemOwnProps>;
+declare const defaultElement = "div";
+export declare const GridItem: <E extends React.ElementType = "div">({ colSpan, rowSpan, as, className, children, style, ...rest }: GridItemProps<E>) => JSX.Element;
+export {};

package/dist/beta/types/Grid/index.d.ts

@@ -0,0 +1,29 @@
+import { Grid as GridParent } from './Grid';
+import { GridItem } from './GridItem';
+type Grid = typeof GridParent & {
+    /**
+     * An item inside a Grid.
+     *
+     * @example
+     * <Grid.Item colSpan={6}>Content</Grid.Item>
+     */
+    Item: typeof GridItem & {
+        displayName?: string;
+    };
+};
+/**
+ * A CSS Grid component for organizing content in a grid.
+ *
+ * @example
+ * <Grid>
+ *   <Grid.Item colSpan={6}>Content</Grid.Item>
+ *   <Grid.Item colSpan={6}>Content</Grid.Item>
+ * </Grid>
+ */
+export declare const GridComponent: Grid;
+export type { GridProps, GridOwnProps } from './Grid';
+export type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+export type { GridItemProps, GridItemOwnProps } from './GridItem';
+export { GridComponent as Grid, GridItem };
+export { LayoutWrapper } from '../LayoutWrapper/LayoutWrapper';
+export { useLayoutValues } from '../LayoutWrapper/useLayoutValues';

package/dist/beta/types/LayoutWrapper/LayoutWrapper.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Breakpoints } from './utils';
+export type LayoutValues = {
+    breakpoints: Breakpoints;
+};
+export type LayoutWrapperProps = {
+    /** Custom breakpoint values to override defaults */
+    breakpoints?: Partial<Breakpoints>;
+    /** Children components that can use layout values */
+    children: React.ReactNode;
+};
+export declare const LayoutWrapper: ({ breakpoints: customBreakpoints, children, }: LayoutWrapperProps) => JSX.Element;
+export declare const useLayoutContext: () => LayoutValues | null;

package/dist/beta/types/LayoutWrapper/index.d.ts

@@ -0,0 +1,6 @@
+export { LayoutWrapper } from './LayoutWrapper';
+export { useLayoutValues } from './useLayoutValues';
+export { useResponsiveValue } from './useResponsiveValue';
+export type { LayoutValues, LayoutWrapperProps } from './LayoutWrapper';
+export type { Breakpoints, GridSpacingValue, ResponsiveValue } from './utils';
+export { DEFAULT_BREAKPOINTS, getSpacingValue } from './utils';

package/dist/beta/types/LayoutWrapper/useLayoutValues.d.ts

@@ -0,0 +1,2 @@
+import { LayoutValues } from './LayoutWrapper';
+export declare const useLayoutValues: () => LayoutValues;

package/dist/beta/types/LayoutWrapper/useResponsiveValue.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveValue } from './utils';
+export declare const useResponsiveValue: <T>(value: ResponsiveValue<T> | undefined) => T | undefined;

package/dist/beta/types/LayoutWrapper/utils.d.ts

@@ -0,0 +1,15 @@
+declare const VALID_SPACING_VALUES: readonly ["2xs", "xs", "s", "s-m", "m", "m-l", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl", "10xl", "11xl", "none"];
+export type GridSpacingValue = (typeof VALID_SPACING_VALUES)[number];
+export type ResponsiveValue<T> = T | {
+    sm?: T;
+    md?: T;
+    lg?: T;
+};
+export type Breakpoints = {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const DEFAULT_BREAKPOINTS: Breakpoints;
+export declare const getSpacingValue: (spacing: GridSpacingValue | undefined, componentName?: string) => string | undefined;
+export {};

package/dist/beta/types/index.d.ts

@@ -0,0 +1,7 @@
+export { Grid, GridItem } from './Grid';
+export { LayoutWrapper, useLayoutValues } from './LayoutWrapper';
+export { Flex, FlexSpacer } from './Flex';
+export { Template } from './templates';
+export type { GridProps, GridOwnProps, GridItemProps, GridItemOwnProps, GridSpacingValue, ResponsiveValue, } from './Grid';
+export type { FlexProps, FlexOwnProps, FlexSpacingValue, FlexSpacerProps, FlexSpacerOwnProps, } from './Flex';
+export type { PortalComponent, PortalMainProps, PortalProps, SidebarComponent, SidebarProps, SidebarSectionProps, TemplateComponent, } from './templates';

package/dist/beta/types/templates/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type SidebarProps = React.HTMLAttributes<HTMLElement> & {
+    /** Toggle contrast styling for the sidebar */
+    contrast?: boolean;
+};
+export type SidebarSectionProps = React.HTMLAttributes<HTMLElement>;
+declare const SidebarLogo: React.FC<SidebarSectionProps>;
+declare const SidebarUser: React.FC<SidebarSectionProps>;
+declare const SidebarData: React.FC<SidebarSectionProps>;
+declare const SidebarNavigation: React.FC<SidebarSectionProps>;
+declare const SidebarFooter: React.FC<SidebarSectionProps>;
+declare const SidebarRoot: React.FC<SidebarProps>;
+export type SidebarComponent = typeof SidebarRoot & {
+    Logo: typeof SidebarLogo;
+    User: typeof SidebarUser;
+    Data: typeof SidebarData;
+    Navigation: typeof SidebarNavigation;
+    Footer: typeof SidebarFooter;
+};
+export declare const Sidebar: SidebarComponent;
+export {};

package/dist/beta/types/templates/index.d.ts

@@ -0,0 +1,7 @@
+import { PortalComponent, PortalMainProps, PortalProps } from './portal';
+import { SidebarComponent, SidebarProps, SidebarSectionProps } from './Sidebar';
+export type TemplateComponent = {
+    Portal: PortalComponent;
+};
+export declare const Template: TemplateComponent;
+export type { PortalComponent, PortalMainProps, PortalProps, SidebarComponent, SidebarProps, SidebarSectionProps, };

package/dist/beta/types/templates/portal/Portal.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { SidebarComponent } from '../Sidebar';
+export type PortalProps = React.HTMLAttributes<HTMLDivElement>;
+export type PortalMainProps = React.HTMLAttributes<HTMLElement>;
+declare const PortalRoot: React.FC<PortalProps>;
+declare const PortalMain: React.FC<PortalMainProps>;
+export type PortalComponent = typeof PortalRoot & {
+    Sidebar: SidebarComponent;
+    Main: typeof PortalMain;
+};
+export declare const Portal: PortalComponent;
+export {};

package/dist/beta/types/templates/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { Portal } from './Portal';
+export type { PortalComponent, PortalMainProps, PortalProps } from './Portal';

package/package.json

@@ -1,10 +1,31 @@
 {
   "name": "@entur/layout",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "license": "EUPL-1.2",
   "main": "dist/layout.cjs.js",
   "module": "dist/layout.esm.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/layout.esm.js",
+      "require": "./dist/layout.cjs.js",
+      "default": "./dist/layout.esm.js"
+    },
+    "./beta": {
+      "types": "./dist/beta/types/index.d.ts",
+      "import": "./dist/beta/esm/index.mjs",
+      "require": "./dist/beta/cjs/index.cjs",
+      "default": "./dist/beta/esm/index.mjs"
+    },
+    "./beta/styles": "./dist/beta/styles/index.css",
+    "./dist/*": "./dist/*",
+    "./dist/beta": null,
+    "./dist/beta/*": null
+  },
+  "sideEffects": [
+    "./dist/**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -18,7 +39,10 @@
   },
   "scripts": {
     "start": "vite build --watch",
-    "build": "vite build",
+    "start:beta": "vite build --config vite.config.beta.ts --watch",
+    "build": "yarn build:main && yarn build:beta",
+    "build:main": "vite build",
+    "build:beta": "vite build --config vite.config.beta.ts",
     "test": "jest",
     "lint": "eslint src"
   },
@@ -46,5 +70,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "0cea7db16c0411fe1f55f12ffb9c06cdc6e44ad3"
+  "gitHead": "6ccfa209ff0606983e817dc86e9081c1a0b1a6f0"
 }