@hlf-fe/pulmo-ui 1.2.0 → 1.3.0

package/dist/components/layout/container/container.d.ts

@@ -6,5 +6,9 @@ export type ContainerProps = {
     maxWidth?: Sizes;
     className?: string;
 } & CSSTypes;
-export declare const Container: ({ children, className, maxWidth, position, display, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    maxWidth?: Sizes;
+    className?: string;
+} & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/layout/container/container.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
 import styled from "styled-components";
 const MAX_WIDTH = {
@@ -9,9 +10,9 @@ const MAX_WIDTH = {
 const getMaxWidth = (size) => {
     return MAX_WIDTH?.[size];
 };
-export const Container = ({ children, className, maxWidth = "lg", position = "static", display = "block", }) => {
-    return (_jsx(Div, { className: className, maxWidth: getMaxWidth(maxWidth), display: display, position: position, children: children }));
-};
+export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", }, ref) => {
+    return (_jsx(Div, { ref: ref, className: className, maxWidth: getMaxWidth(maxWidth), display: display, position: position, children: children }));
+});
 const Div = styled.div `
   ${({ maxWidth }) => maxWidth};
   display: ${({ display }) => display};

package/dist/components/modules/entry-list/entry-list.d.ts

@@ -4,6 +4,7 @@ export type EntryListProps = {
 };
 export type EntryListItemProps = {
     children: React.ReactNode;
+    as?: "div" | "li";
 };
 export type EntryListHeadingProps = {
     children: React.ReactNode;
@@ -22,6 +23,6 @@ export type EntryListTextProps = {
     color?: string;
 };
 export declare const EntryList: ({ children }: EntryListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const EntryListItem: ({ children }: EntryListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntryListItem: ({ children, as }: EntryListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const EntryListText: ({ children, fontSizeMobile, fontSizeDesktop, breakpoint, bold, as, color, }: EntryListTextProps) => import("react/jsx-runtime").JSX.Element;
 export declare const EntryListHeading: ({ children, fontSizeMobile, fontSizeDesktop, as, breakpoint, }: EntryListHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/entry-list/entry-list.js

@@ -5,8 +5,8 @@ import { media } from "../../../styles/mixins";
 export const EntryList = ({ children }) => {
     return _jsx(List, { children: children });
 };
-export const EntryListItem = ({ children }) => {
-    return _jsx(ListItem, { children: children });
+export const EntryListItem = ({ children, as = "li" }) => {
+    return _jsx(ListItem, { as: as, children: children });
 };
 export const EntryListText = ({ children, fontSizeMobile = 14, fontSizeDesktop = 16, breakpoint = "M", bold = false, as = "p", color, }) => {
     return (_jsx(Text, { as: as, fontSizeMobile: fontSizeMobile, fontSizeDesktop: fontSizeDesktop, breakpoint: breakpoint, bold: bold, color: color, children: children }));

package/dist/components/surfaces/paper/paper.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, THEME_ELEVATION, SIZE_SM, SIZE_MD, SIZE_LG } from "../../../models/theme";
+export type PaperProps = {
+    children: ReactNode;
+    className?: string;
+    backgroundColor?: THEME_COLORS_BY_NAME | THEME_COLORS_BY_HEX;
+    borderRadius?: SIZE_SM | SIZE_MD | SIZE_LG;
+    elevation?: THEME_ELEVATION;
+};
+export declare const Paper: ({ className, children, backgroundColor, borderRadius, elevation, }: PaperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/surfaces/paper/paper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { themeColors, themeBorderRadius, themeElevation, } from "../../../styles/mixins/theme-mixins";
+export const Paper = ({ className, children, backgroundColor = "white", borderRadius = "md", elevation = backgroundColor === "#ffffff" ? 1 : 0, }) => {
+    return (_jsx(Container, { className: className, backgroundColor: backgroundColor, borderRadius: borderRadius, elevation: elevation, children: children }));
+};
+const Container = styled.div `
+  background-color: ${({ backgroundColor }) => themeColors(backgroundColor)};
+  border-radius: ${({ borderRadius }) => themeBorderRadius(borderRadius)};
+  box-shadow: ${({ elevation }) => themeElevation(elevation)};
+`;

package/dist/components/surfaces/paper/paper.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paper } from "./paper";
+declare const meta: Meta<typeof Paper>;
+export default meta;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const Purple: Story;
+export declare const Green: Story;
+export declare const Blue: Story;
+export declare const Pink: Story;
+export declare const Yellow: Story;
+export declare const WhiteWithElevation: Story;

package/dist/components/surfaces/paper/paper.stories.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper } from "./paper";
+import { Decorator } from "../../../components/decorator/decorator";
+import { EntryListHeading, EntryListText, } from "../../../components/modules/entry-list/entry-list";
+const meta = {
+    title: "Surfaces/Paper",
+    component: Paper,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "400px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const DummyContent = () => (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(EntryListText, { fontSizeDesktop: 14, color: "#545454", children: "2025-05-11" }), _jsx(EntryListHeading, { children: "In volutpat est eu dolor efficitur" }), _jsxs(EntryListText, { children: [_jsxs(EntryListText, { as: "span", fontSizeMobile: 12, fontSizeDesktop: 14, children: ["Nulla facilisi:", " "] }), _jsx(EntryListText, { as: "span", fontSizeMobile: 12, fontSizeDesktop: 14, bold: true, children: "volutpat, XiO, MD, Condimentum Ultricies" })] }), _jsx(EntryListText, { children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet." }), _jsx(EntryListText, { children: "Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] }));
+export const Default = {
+    args: {
+        backgroundColor: "white",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Purple = {
+    args: {
+        backgroundColor: "purple",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Green = {
+    args: {
+        backgroundColor: "green",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Blue = {
+    args: {
+        backgroundColor: "blue",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Pink = {
+    args: {
+        backgroundColor: "pink",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Yellow = {
+    args: {
+        backgroundColor: "yellow",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const WhiteWithElevation = {
+    args: {
+        backgroundColor: "white",
+        elevation: 1,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};

package/dist/index.d.ts

@@ -16,7 +16,8 @@ import { type AccordionItemProps } from "./components/layout/accordion/accordion
 import { type NavigationCellProps } from "./components/navigation/nav-cell/nav-cell";
 import { type NavigationItemProps } from "./components/navigation/nav-item/nav-item";
 import { type CardBannerProps } from "./components/surfaces/cards/card-banner/card-banner";
-export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps };
+import { type PaperProps } from "./components/surfaces/paper/paper";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps, PaperProps, };
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
 export { WarningIcon } from "./components/icons/warning-icon/warning-icon";
@@ -49,3 +50,4 @@ export declare const AccordionItem: import("react").FC<AccordionItemProps>;
 export declare const NavigationCell: import("react").FC<NavigationCellProps>;
 export declare const NavigationItem: import("react").FC<NavigationItemProps>;
 export declare const CardBanner: import("react").FC<CardBannerProps>;
+export declare const Paper: import("react").FC<PaperProps>;

package/dist/index.js

@@ -19,6 +19,7 @@ import { Accordion as AccordionComponent, AccordionItem as AccordionItemComponen
 import { NavigationCell as NavigationCellComponent, } from "./components/navigation/nav-cell/nav-cell";
 import { NavigationItem as NavigationItemComponent, } from "./components/navigation/nav-item/nav-item";
 import { CardBanner as CardBannerComponent, } from "./components/surfaces/cards/card-banner/card-banner";
+import { Paper as PaperComponent, } from "./components/surfaces/paper/paper";
 // Icons
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -51,3 +52,4 @@ export const AccordionItem = withDefaultTheme(AccordionItemComponent);
 export const NavigationCell = withDefaultTheme(NavigationCellComponent);
 export const NavigationItem = withDefaultTheme(NavigationItemComponent);
 export const CardBanner = withDefaultTheme(CardBannerComponent);
+export const Paper = withDefaultTheme(PaperComponent);

package/dist/models/theme.d.ts

@@ -0,0 +1,23 @@
+export type THEME_COLOR_HEX_PURPLE = "#e6d1e5";
+export type THEME_COLOR_HEX_GREEN = "#d6ebe3";
+export type THEME_COLOR_HEX_BLUE = "#d1e4ed";
+export type THEME_COLOR_HEX_PINK = "#fbdfd9";
+export type THEME_COLOR_HEX_WHITE = "#ffffff";
+export type THEME_COLORS_YELLOW = "#ffecc4";
+export type THEME_COLORS_TRANSPARENT = "transparent";
+export type THEME_COLOR_PURPLE = "purple";
+export type THEME_COLOR_GREEN = "green";
+export type THEME_COLOR_BLUE = "blue";
+export type THEME_COLOR_PINK = "pink";
+export type THEME_COLOR_WHITE = "white";
+export type THEME_COLOR_YELLOW = "yellow";
+export type THEME_COLOR_TRANSPARENT = "transparent";
+export type SIZE_NONE = "none";
+export type SIZE_SM = "sm";
+export type SIZE_MD = "md";
+export type SIZE_LG = "lg";
+export type SIZE_XL = "xl";
+export type SIZES = SIZE_NONE | SIZE_SM | SIZE_MD | SIZE_LG | SIZE_XL;
+export type THEME_ELEVATION = 0 | 1;
+export type THEME_COLORS_BY_HEX = THEME_COLOR_HEX_PURPLE | THEME_COLOR_HEX_GREEN | THEME_COLOR_HEX_BLUE | THEME_COLOR_HEX_PINK | THEME_COLOR_HEX_WHITE | THEME_COLORS_YELLOW | THEME_COLORS_TRANSPARENT;
+export type THEME_COLORS_BY_NAME = THEME_COLOR_PURPLE | THEME_COLOR_GREEN | THEME_COLOR_BLUE | THEME_COLOR_PINK | THEME_COLOR_WHITE | THEME_COLOR_YELLOW | THEME_COLOR_TRANSPARENT;

package/dist/models/theme.js

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

package/dist/styles/mixins/theme-mixins/theme-mixins.d.ts

@@ -0,0 +1,5 @@
+import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, SIZES } from "../../../models/theme";
+export declare const themeColors: (color: THEME_COLORS_BY_HEX | THEME_COLORS_BY_NAME) => string;
+export declare const themeSpacing: (size: SIZES) => string;
+export declare const themeBorderRadius: (size: "sm" | "md" | "lg") => string;
+export declare const themeElevation: (elevation: 0 | 1) => string;

package/dist/styles/mixins/theme-mixins/theme-mixins.js

@@ -0,0 +1,37 @@
+import { COLORS, THEME_SPACING } from "../../../styles/theme";
+import { rem } from "../../../styles/units";
+export const themeColors = (color) => {
+    const THEME_COLORS = {
+        green: COLORS.mint,
+        blue: COLORS.skyBlue,
+        purple: COLORS.lavender,
+        pink: COLORS.pink,
+        white: COLORS.white,
+    };
+    return THEME_COLORS[color] || color;
+};
+export const themeSpacing = (size) => {
+    const THEME_SPACING_SIZES = {
+        sm: THEME_SPACING.sm,
+        md: THEME_SPACING.md,
+        lg: THEME_SPACING.lg,
+        xl: THEME_SPACING.xl,
+        none: "0",
+    };
+    return THEME_SPACING_SIZES[size] || THEME_SPACING.md;
+};
+export const themeBorderRadius = (size) => {
+    const BORDER_RADIUS = {
+        sm: rem(6),
+        md: rem(8),
+        lg: rem(12),
+    };
+    return BORDER_RADIUS[size] || BORDER_RADIUS.sm;
+};
+export const themeElevation = (elevation) => {
+    const ELEVETION = {
+        0: "none",
+        1: `0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08)`,
+    };
+    return ELEVETION[elevation] || ELEVETION[0];
+};

package/dist/styles/mixins/theme-mixins.d.ts

@@ -0,0 +1,5 @@
+import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, SIZES } from "../../models/theme";
+export declare const themeColors: (color: THEME_COLORS_BY_HEX | THEME_COLORS_BY_NAME) => any;
+export declare const themeSpacing: (size: SIZES) => string;
+export declare const themeBorderRadius: (size: "sm" | "md" | "lg") => string;
+export declare const themeElevation: (elevation: 0 | 1) => string;

package/dist/styles/mixins/theme-mixins.js

@@ -0,0 +1,38 @@
+import { COLORS, THEME_SPACING } from "../../styles/theme";
+import { rem } from "../../styles/units";
+export const themeColors = (color) => {
+    const THEME_COLORS = {
+        green: COLORS.mint,
+        blue: COLORS.skyBlue,
+        purple: COLORS.lavender,
+        pink: COLORS.pink,
+        white: COLORS.white,
+        yellow: COLORS.yellowLight,
+    };
+    return THEME_COLORS[color] || color;
+};
+export const themeSpacing = (size) => {
+    const THEME_SPACING_SIZES = {
+        sm: THEME_SPACING.sm,
+        md: THEME_SPACING.md,
+        lg: THEME_SPACING.lg,
+        xl: THEME_SPACING.xl,
+        none: "0",
+    };
+    return THEME_SPACING_SIZES[size] || THEME_SPACING.md;
+};
+export const themeBorderRadius = (size) => {
+    const BORDER_RADIUS = {
+        sm: rem(6),
+        md: rem(8),
+        lg: rem(12),
+    };
+    return BORDER_RADIUS[size] || BORDER_RADIUS.sm;
+};
+export const themeElevation = (elevation) => {
+    const ELEVETION = {
+        0: "none",
+        1: `0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08)`,
+    };
+    return ELEVETION[elevation] || ELEVETION[0];
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hlf-fe/pulmo-ui",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",