@datalayer/primer-addons 1.0.2 → 1.0.4

package/lib/components/box/Box.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+import { type SxProp } from './sx';
+type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+export declare const Box: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
+export type BoxProps = ComponentProps<typeof Box>;
+export default Box;

package/lib/components/box/Box.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import styled from 'styled-components';
+import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system';
+import sx from './sx';
+export const Box = styled.div(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+export default Box;

package/lib/components/box/sx.d.ts

@@ -0,0 +1,21 @@
+import type { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
+import type { ColorProps, BorderColorProps, ShadowProps } from 'styled-system';
+import merge from 'deepmerge';
+type ThemeColorPaths = string;
+type ThemeShadowPaths = string;
+export type BetterCssProperties = {
+    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof BorderColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
+};
+export type CSSCustomProperties = {
+    [key: `--${string}`]: string | number;
+};
+type CSSSelectorObject = {
+    [cssSelector: string]: SystemStyleObject | CSSCustomProperties;
+};
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject;
+export interface SxProp {
+    sx?: BetterSystemStyleObject;
+}
+declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
+export default sx;
+export { merge };

package/lib/components/box/sx.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import css from '@styled-system/css';
+import merge from 'deepmerge';
+const sx = (props) => css(props.sx);
+export default sx;
+export { merge };

package/lib/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./box/Box";
+export * from "./card/Card";
+export * from "./content-loader/ContentLoader";
+export * from "./closeable-flash/CloseableFlash";
+export * from "./icons/CircleIcon";
+export * from "./overlay/Overlay";
+export * from "./slider/Slider";

package/lib/components/index.js

@@ -0,0 +1,7 @@
+export * from "./box/Box";
+export * from "./card/Card";
+export * from "./content-loader/ContentLoader";
+export * from "./closeable-flash/CloseableFlash";
+export * from "./icons/CircleIcon";
+export * from "./overlay/Overlay";
+export * from "./slider/Slider";

package/lib/index.d.ts

@@ -1,6 +1,2 @@
-export * from "./components/card/Card";
-export * from "./components/content-loader/ContentLoader";
-export * from "./components/closeable-flash/CloseableFlash";
-export * from "./components/icons/CircleIcon";
-export * from "./components/overlay/Overlay";
-export * from "./components/slider/Slider";
+export * from "./components";
+export * from "./utils";

package/lib/index.js

@@ -1,6 +1,2 @@
-export * from "./components/card/Card";
-export * from "./components/content-loader/ContentLoader";
-export * from "./components/closeable-flash/CloseableFlash";
-export * from "./components/icons/CircleIcon";
-export * from "./components/overlay/Overlay";
-export * from "./components/slider/Slider";
+export * from "./components";
+export * from "./utils";

package/lib/utils/Helper.d.ts

@@ -0,0 +1,32 @@
+import React, { Ref, PropsWithChildren } from 'react';
+import { AnimateProps } from '@primer/react-brand';
+/**
+ * Layout
+ */
+export declare const Container: ({ children, style, }: {
+    children: React.ReactElement[] | React.ReactElement;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+type RedlineBackgroundProps = {
+    height?: number;
+    hasBorder?: boolean;
+};
+export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Base Types
+ *
+ * Component helper type to be extended by component types, e.g.:
+ * type CustomComponentProps = BaseProps<HTMLDivElement> & { ... }
+ *
+ * Example use:
+ *   const CustomComponent = forwardRef<HTMLDivElement, CustomComponentProps>(({className, ...props}, ref) => { ... })
+ *   // OR:
+ *   const CustomComponent = forwardRef(({className: CustomComponentProps, ...props}, ref: Ref<HTMLDivElement>) => { ... })
+ */
+export type BaseProps<T> = {
+    className?: string;
+    id?: string;
+    ref?: Ref<T>;
+    animate?: AnimateProps;
+};
+export {};

package/lib/utils/Helper.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Layout
+ */
+export const Container = ({ children, style, }) => (_jsx("div", { style: { maxWidth: 1024, margin: '0 auto', ...style }, children: children }));
+export function RedlineBackground({ height, hasBorder = true, ...rest }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            overflow: 'hidden',
+            border: hasBorder
+                ? '1px solid var(--base-color-scale-red-2)'
+                : undefined,
+            backgroundImage: 'linear-gradient(45deg, var(--base-color-scale-red-0) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 50%, var(--base-color-scale-red-0) 50%, var(--base-color-scale-red-0) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 100%)',
+            backgroundSize: '5.66px 5.66px',
+            WebkitBoxPack: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height,
+        }, ...rest }));
+}

package/lib/utils/Portals.d.ts

@@ -0,0 +1,10 @@
+import '@primer/react-brand/lib/css/main.css';
+type Colormode = 'light' | 'dark' | 'auto';
+/**
+ * Ensure we define a root for Primer portal root.
+ *
+ *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
+ *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
+ */
+export declare const setupPrimerPortals: (colormode?: Colormode) => void;
+export default setupPrimerPortals;

package/lib/utils/Portals.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { registerPortalRoot } from '@primer/react';
+import '@primer/react-brand/lib/css/main.css';
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Ensure we define a root for Primer portal root.
+ *
+ *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
+ *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
+ */
+export const setupPrimerPortals = (colormode = 'light') => {
+    const body = document.body;
+    body.dataset['portalRoot'] = 'true';
+    body.dataset['colorMode'] = colormode;
+    body.dataset['lightTheme'] = 'light';
+    body.dataset['darkTheme'] = 'dark';
+    body.id = PRIMER_PORTAL_ROOT_ID;
+    registerPortalRoot(body);
+};
+export default setupPrimerPortals;

package/lib/utils/Styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Styles: () => import("react/jsx-runtime").JSX.Element;
+export default Styles;

package/lib/utils/Styles.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ThemeProvider, BaseStyles } from '@primer/react';
+export const Styles = () => {
+    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { children: _jsx(BaseStyles, {}) }) }));
+};
+export default Styles;

package/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Helper';
+export * from './Portals';

package/lib/utils/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './Helper';
+export * from './Portals';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",