@datalayer/primer-addons 1.0.21 → 1.0.23

package/lib/theme/palettes/ColorPalette.d.ts

@@ -21,12 +21,12 @@ export declare function getColorPalette(theme?: ThemeVariant, colorMode?: 'light
 export declare function useColorPalette(): ColorPalette;
 /** @deprecated Use `useColorPalette` instead. */
 export declare const useBlogColorPalette: typeof useColorPalette;
-export declare const LightBoostFilter: () => import("react/jsx-runtime").JSX.Element;
+export declare const LightBoostFilter: () => import("react").JSX.Element;
 export declare const SharedDefs: ({ p }: {
     p: ColorPalette;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const svgLightFilter: (p: ColorPalette) => "url(#svgLightBoost)" | undefined;
 export declare const BgGrid: ({ w, h }: {
     w?: number;
     h?: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/lib/theme/palettes/ColorPalette.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 /**
  * Shared palette types, theme-aware colour resolution, and reusable

package/lib/theme/palettes/index.js

@@ -1,6 +1,5 @@
 /*
  * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 export * from './ColorPalette';

package/lib/theme/portableTheme.d.ts

@@ -0,0 +1,32 @@
+import { type ColorMode } from './DatalayerBrandThemeProvider';
+import { type ThemeVariant } from './themeRegistry';
+/** A valid CSS custom-property name. */
+export type CssVariableName = `--${string}`;
+/**
+ * A JSON-safe CSS-variable map.
+ *
+ * Theme values retain Primer's canonical functional and component token names
+ * (`--bgColor-*`, `--fgColor-*`, `--button-*`, and so on), allowing consumers
+ * to use the map without depending on React, styled-components, or Primer.
+ */
+export type CssVariableMap = Record<CssVariableName, string>;
+/** A portable theme with explicit light and dark CSS-variable modes. */
+export interface PortableTheme {
+    id: ThemeVariant;
+    label: string;
+    description: string;
+    defaultColorMode: ColorMode;
+    modes: {
+        light: CssVariableMap;
+        dark: CssVariableMap;
+    };
+}
+/**
+ * Export a Primer Addons theme as a framework-neutral, JSON-safe token map.
+ *
+ * Framework adapters should consume these canonical CSS variables directly
+ * instead of translating them into framework-specific color names.
+ */
+export declare function exportPortableTheme(variant: ThemeVariant): PortableTheme;
+/** Serialize a trusted portable map for a CSS declaration block. */
+export declare function cssVariableDeclarations(tokens: CssVariableMap): string;

package/lib/theme/portableTheme.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { systemFontStack } from './fontStacks';
+import { themeConfigs } from './themeRegistry';
+function cssVariables(styles) {
+    const variables = Object.fromEntries(Object.entries(styles)
+        .filter(([name, value]) => name.startsWith('--') && value !== undefined && value !== null)
+        .map(([name, value]) => [name, String(value)]));
+    const fontFamily = variables['--fontStack-sansSerif'] ??
+        styles.fontFamily ??
+        systemFontStack;
+    return {
+        '--fontStack-sansSerif': fontFamily,
+        '--fontStack-sansSerifDisplay': fontFamily,
+        '--fontStack-system': fontFamily,
+        ...variables,
+    };
+}
+/**
+ * Export a Primer Addons theme as a framework-neutral, JSON-safe token map.
+ *
+ * Framework adapters should consume these canonical CSS variables directly
+ * instead of translating them into framework-specific color names.
+ */
+export function exportPortableTheme(variant) {
+    const config = themeConfigs[variant];
+    return {
+        id: variant,
+        label: config.label,
+        description: config.description,
+        defaultColorMode: config.defaultColorMode,
+        modes: {
+            light: cssVariables(config.themeStyles.light),
+            dark: cssVariables(config.themeStyles.dark),
+        },
+    };
+}
+/** Serialize a trusted portable map for a CSS declaration block. */
+export function cssVariableDeclarations(tokens) {
+    return Object.entries(tokens)
+        .map(([name, value]) => `${name}:${value}`)
+        .join(';');
+}

package/lib/utils/Helper.d.ts

@@ -6,12 +6,12 @@ import type { AnimateProps } from '@primer/react-brand';
 export declare const Container: ({ children, style, }: {
     children: React.ReactElement[] | React.ReactElement;
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 type RedlineBackgroundProps = {
     height?: number;
     hasBorder?: boolean;
 };
-export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): import("react/jsx-runtime").JSX.Element;
+export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): React.JSX.Element;
 /**
  * Base Types
  *

package/lib/utils/Portals.js

@@ -119,7 +119,9 @@ export const setupPrimerPortals = (colormode) => {
  * `setupPrimerPortals` creates it; before that call there is none, and this
  * answers `null` rather than inventing one.
  */
-export const getPrimerPortalRoot = () => document.getElementById(PRIMER_PORTAL_ROOT_ID);
+export const getPrimerPortalRoot = () => typeof document === 'undefined'
+    ? null
+    : document.getElementById(PRIMER_PORTAL_ROOT_ID);
 /* ─── camelCase → kebab-case ─────────────────────────────────────────── */
 const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 /**

package/lib/utils/Styles.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "npm run build:lib",
@@ -33,16 +33,23 @@
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
-    "@primer/octicons-react": "^19.29.1",
+    "@datalayer/reactor": "^1.0.0",
+    "@primer/octicons-react": "^19.35.0",
     "@primer/primitives": "^10.7.0",
     "@primer/react": "^37.31.0",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0",
+    "@primer/react-brand": "^0.58.2",
     "react-loading-skeleton": "^3.5.0",
     "styled-components": "^5.3.10",
     "zustand": "^5.0.0"
   },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
   "devDependencies": {
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "rimraf": "^6.0.1",
     "@storybook/addon-docs": "^9.0.15",
     "@storybook/addon-essentials": "9.0.0-alpha.12",
     "@storybook/addon-interactions": "^9.0.0-alpha.10",
@@ -52,21 +59,21 @@
     "@storybook/react-vite": "^9.0.15",
     "@storybook/testing-library": "^0.2.2",
     "@types/prettier": "^3.0.0",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.69.0",
+    "@typescript-eslint/parser": "^8.69.0",
     "@vitejs/plugin-react": "^4.5.2",
     "crypto-browserify": "^3.12.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^10.9.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.5",
+    "eslint-plugin-storybook": "^10.5.10",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "storybook": "^9.0.15",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.0"
+    "typescript": "5.9.3",
+    "vite": "7.3.6"
   }
 }

package/lib/components/logo/DI.d.ts

@@ -1,19 +0,0 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface DIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
-    size?: number;
-    variant?: ThemeVariant;
-    colorMode?: 'light' | 'dark' | 'auto';
-    /** Colour of the "I" glyph. */
-    primaryColor?: string;
-    /** Colour of the "D" glyph. */
-    secondaryColor?: string;
-}
-/**
- * DI glyph mark.
- *
- * Uses the same public API and semantic color mapping as AI:
- * primaryColor styles the "I", secondaryColor styles the "D".
- */
-export declare const DI: import("react").ForwardRefExoticComponent<DIProps & import("react").RefAttributes<SVGSVGElement>>;
-export default DI;

package/lib/components/logo/DI.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { forwardRef } from 'react';
-import { getLogoColors } from './DatalayerLogo';
-/**
- * DI glyph mark.
- *
- * Uses the same public API and semantic color mapping as AI:
- * primaryColor styles the "I", secondaryColor styles the "D".
- */
-export const DI = forwardRef(function DI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
-    const themed = getLogoColors(variant, colorMode);
-    const resolvedPrimary = primaryColor ?? themed.primary;
-    const resolvedSecondary = secondaryColor ?? themed.textColor;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "DI", ref: ref, ...svgProps, children: [_jsx("path", { d: "M2 3.932H5V20.068075H2ZM3.5 3.932H6.5L12.933 20.068075H9.933ZM2 17.068075H11.4V20.068075H2Z", fill: resolvedSecondary, strokeWidth: 0.25 }), _jsx("path", { d: "m10.788825 3.932 6.43325 16.136075h3.5279L14.316725 3.932H10.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 })] }));
-});
-export default DI;