@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/theme.js

@@ -1,50 +1,86 @@
-import { fontStack } from './utils/theme.js';
-import { colorSchemes } from './legacy-theme/ts/color-schemes.js';
-
-const animation = {
-  easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)'
-};
-const breakpoints = ['544px', '768px', '1012px', '1280px'];
-const fonts = {
-  normal: fontStack(['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji']),
-  mono: `var(--fontStack-monospace, ${fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace'])})`
-};
-const lineHeights = {
-  condensedUltra: 1,
-  condensed: 1.25,
-  default: 1.5
-};
-const fontWeights = {
-  light: 300,
-  normal: 400,
-  semibold: 500,
-  bold: 600
-};
-const borderWidths = [0, '1px'];
-const radii = ['0', '3px', '6px', '100px'];
-const sizes = {
-  small: '544px',
-  medium: '768px',
-  large: '1012px',
-  xlarge: '1280px'
-};
-const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px', '56px'];
-const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'];
+import { fontStack } from "./utils/theme.js";
+import { colorSchemes } from "./legacy-theme/ts/color-schemes.js";
+//#region src/theme.ts
 const theme = {
-  animation,
-  borderWidths,
-  breakpoints,
-  fonts,
-  fontSizes,
-  fontWeights,
-  lineHeights,
-  radii,
-  sizes,
-  space,
-  colorSchemes
+	animation: { easeOutCubic: "cubic-bezier(0.33, 1, 0.68, 1)" },
+	borderWidths: [0, "1px"],
+	breakpoints: [
+		"544px",
+		"768px",
+		"1012px",
+		"1280px"
+	],
+	fonts: {
+		normal: fontStack([
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Noto Sans",
+			"Helvetica",
+			"Arial",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji"
+		]),
+		mono: `var(--fontStack-monospace, ${fontStack([
+			"SFMono-Regular",
+			"Consolas",
+			"Liberation Mono",
+			"Menlo",
+			"Courier",
+			"monospace"
+		])})`
+	},
+	fontSizes: [
+		"12px",
+		"14px",
+		"16px",
+		"20px",
+		"24px",
+		"32px",
+		"40px",
+		"48px",
+		"56px"
+	],
+	fontWeights: {
+		light: 300,
+		normal: 400,
+		semibold: 500,
+		bold: 600
+	},
+	lineHeights: {
+		condensedUltra: 1,
+		condensed: 1.25,
+		default: 1.5
+	},
+	radii: [
+		"0",
+		"3px",
+		"6px",
+		"100px"
+	],
+	sizes: {
+		small: "544px",
+		medium: "768px",
+		large: "1012px",
+		xlarge: "1280px"
+	},
+	space: [
+		"0",
+		"4px",
+		"8px",
+		"16px",
+		"24px",
+		"32px",
+		"40px",
+		"48px",
+		"64px",
+		"80px",
+		"96px",
+		"112px",
+		"128px"
+	],
+	colorSchemes
 };
-
-// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
-// were exports from primitives (or a different shape but derived from those exports).
-
+//#endregion
 export { theme as default };

package/dist/useTheme.d.ts

@@ -1,15 +1,19 @@
-import React from 'react';
-export declare function useTheme(): {
-    theme?: import("./ThemeProvider").Theme;
-    colorScheme?: string;
-    colorMode?: import("./ThemeProvider").ColorModeWithAuto;
-    resolvedColorMode?: import("./ThemeProvider").ColorMode;
-    resolvedColorScheme?: string;
-    dayScheme?: string;
-    nightScheme?: string;
-    setColorMode: React.Dispatch<React.SetStateAction<import("./ThemeProvider").ColorModeWithAuto>>;
-    setDayScheme: React.Dispatch<React.SetStateAction<string>>;
-    setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+import { ColorMode, ColorModeWithAuto, Theme } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/useTheme.d.ts
+declare function useTheme(): {
+  theme?: Theme;
+  colorScheme?: string;
+  colorMode?: ColorModeWithAuto;
+  resolvedColorMode?: ColorMode;
+  resolvedColorScheme?: string;
+  dayScheme?: string;
+  nightScheme?: string;
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>;
 };
-export declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
-//# sourceMappingURL=useTheme.d.ts.map
+declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+//#endregion
+export { useColorSchemeVar, useTheme };

package/dist/useTheme.js

@@ -1,16 +1,13 @@
-import React from 'react';
-import { ThemeContext } from './ThemeContext.js';
-
+import { ThemeContext } from "./ThemeContext.js";
+import React from "react";
+//#region src/useTheme.ts
 function useTheme() {
-  return React.useContext(ThemeContext);
+	return React.useContext(ThemeContext);
 }
 function useColorSchemeVar(values, fallback) {
-  var _values$colorScheme;
-  const {
-    colorScheme: t0
-  } = useTheme();
-  const colorScheme = t0 === undefined ? "" : t0;
-  return (_values$colorScheme = values[colorScheme]) !== null && _values$colorScheme !== void 0 ? _values$colorScheme : fallback;
+	var _values$colorScheme;
+	const { colorScheme: t0 } = useTheme();
+	return (_values$colorScheme = values[t0 === void 0 ? "" : t0]) !== null && _values$colorScheme !== void 0 ? _values$colorScheme : fallback;
 }
-
+//#endregion
 export { useColorSchemeVar, useTheme };

package/dist/utils/as-slot.d.ts

@@ -1,4 +1,6 @@
-import type { WithSlotMarker } from './types';
+import { WithSlotMarker } from "./types/Slots.js";
+
+//#region src/utils/as-slot.d.ts
 /**
  * Copies the `__SLOT__` marker from a slot-aware source component onto another
  * component, returning the same component reference typed as a slot.
@@ -16,5 +18,6 @@ import type { WithSlotMarker } from './types';
  * )
  * ```
  */
-export declare function asSlot<T>(component: T, slotSource: WithSlotMarker<unknown>): WithSlotMarker<T>;
-//# sourceMappingURL=as-slot.d.ts.map
+declare function asSlot<T>(component: T, slotSource: WithSlotMarker<unknown>): WithSlotMarker<T>;
+//#endregion
+export { asSlot };

package/dist/utils/as-slot.js

@@ -1,30 +1,26 @@
-import { warning } from './warning.js';
-
+import { warning } from "./warning.js";
+//#region src/utils/as-slot.ts
 /**
- * Copies the `__SLOT__` marker from a slot-aware source component onto another
- * component, returning the same component reference typed as a slot.
- *
- * Useful when building reusable wrappers around Primer slot components that
- * still need to be recognised by the parent's slot scanner.
- *
- * @example
- * ```tsx
- * const ColoredLeadingVisual = asSlot(
- *   function ColoredLeadingVisual({color, children}) {
- *     return <ActionList.LeadingVisual><span style={{color}}>{children}</span></ActionList.LeadingVisual>
- *   },
- *   ActionList.LeadingVisual,
- * )
- * ```
- */
+* Copies the `__SLOT__` marker from a slot-aware source component onto another
+* component, returning the same component reference typed as a slot.
+*
+* Useful when building reusable wrappers around Primer slot components that
+* still need to be recognised by the parent's slot scanner.
+*
+* @example
+* ```tsx
+* const ColoredLeadingVisual = asSlot(
+*   function ColoredLeadingVisual({color, children}) {
+*     return <ActionList.LeadingVisual><span style={{color}}>{children}</span></ActionList.LeadingVisual>
+*   },
+*   ActionList.LeadingVisual,
+* )
+* ```
+*/
 function asSlot(component, slotSource) {
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(!slotSource.__SLOT__, 'asSlot: the provided slotSource does not have a `__SLOT__` marker. The wrapper will not be recognised by the parent slot scanner.') : void 0;
-  }
-  if (slotSource.__SLOT__) {
-    component.__SLOT__ = slotSource.__SLOT__;
-  }
-  return component;
+	warning(!slotSource.__SLOT__, "asSlot: the provided slotSource does not have a `__SLOT__` marker. The wrapper will not be recognised by the parent slot scanner.");
+	if (slotSource.__SLOT__) component.__SLOT__ = slotSource.__SLOT__;
+	return component;
 }
-
+//#endregion
 export { asSlot };

package/dist/utils/character-counter.js

@@ -1,30 +1,21 @@
+//#region src/utils/character-counter.ts
 /**
- * Shared character counting helpers for text inputs with character limits.
- * Provides the pure derivation used to render the counter and validation state.
- */
-
-const SCREEN_READER_DELAY = 500;
-/**
- * Compute the character count state for a given length and limit. This is a pure
- * function so the counter can be derived during render without component state.
- */
+* Compute the character count state for a given length and limit. This is a pure
+* function so the counter can be derived during render without component state.
+*/
 function getCharacterCountState(currentLength, maxLength) {
-  const charactersRemaining = maxLength - currentLength;
-  if (charactersRemaining >= 0) {
-    const characterText = charactersRemaining === 1 ? 'character' : 'characters';
-    return {
-      count: charactersRemaining,
-      isOverLimit: false,
-      message: `${charactersRemaining} ${characterText} remaining`
-    };
-  }
-  const charactersOver = -charactersRemaining;
-  const characterText = charactersOver === 1 ? 'character' : 'characters';
-  return {
-    count: charactersOver,
-    isOverLimit: true,
-    message: `${charactersOver} ${characterText} over`
-  };
+	const charactersRemaining = maxLength - currentLength;
+	if (charactersRemaining >= 0) return {
+		count: charactersRemaining,
+		isOverLimit: false,
+		message: `${charactersRemaining} ${charactersRemaining === 1 ? "character" : "characters"} remaining`
+	};
+	const charactersOver = -charactersRemaining;
+	return {
+		count: charactersOver,
+		isOverLimit: true,
+		message: `${charactersOver} ${charactersOver === 1 ? "character" : "characters"} over`
+	};
 }
-
-export { SCREEN_READER_DELAY, getCharacterCountState };
+//#endregion
+export { getCharacterCountState };

package/dist/utils/create-component.d.ts

@@ -1,5 +1,7 @@
-import type { EventName } from '@lit-labs/react';
+import { EventName } from "@lit-labs/react";
+
+//#region src/utils/create-component.d.ts
 type EventNames = Record<string, EventName | string>;
-export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(elementClass: new () => I, tagName: string, events?: E | undefined) => import("@lit-labs/react").ReactWebComponent<I, E>;
-export default createComponent;
-//# sourceMappingURL=create-component.d.ts.map
+declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(elementClass: new () => I, tagName: string, events?: E | undefined) => import("@lit-labs/react").ReactWebComponent<I, E>;
+//#endregion
+export { createComponent, createComponent as default };

package/dist/utils/create-component.js

@@ -1,17 +1,16 @@
-import React from 'react';
-import { createComponent as createComponent$1 } from '@lit-labs/react';
-
-const rename = str => str[0].toUpperCase() + str.slice(1).replace(/(-\w)/g, s => s[1].toUpperCase());
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-const createComponent = (elementClass, tagName, events = undefined) => {
-  const component = createComponent$1({
-    tagName,
-    elementClass,
-    react: React,
-    events
-  });
-  component.displayName = rename(tagName);
-  return component;
+import React from "react";
+import { createComponent } from "@lit-labs/react";
+//#region src/utils/create-component.ts
+const rename = (str) => str[0].toUpperCase() + str.slice(1).replace(/(-\w)/g, (s) => s[1].toUpperCase());
+const createComponent$1 = (elementClass, tagName, events = void 0) => {
+	const component = createComponent({
+		tagName,
+		elementClass,
+		react: React,
+		events
+	});
+	component.displayName = rename(tagName);
+	return component;
 };
-
-export { createComponent };
+//#endregion
+export { createComponent$1 as createComponent, createComponent$1 as default };

package/dist/utils/descendant-registry.d.ts

@@ -1,32 +1 @@
-import { type Dispatch, type ReactNode } from 'react';
-export interface ProviderProps<T> {
-    children: ReactNode;
-    /** State setter from `useRegistryState`. */
-    setRegistry: Dispatch<React.SetStateAction<ReadonlyMap<string, T> | undefined>>;
-}
-/**
- * Create a "descendant registry" for a component. This allows a parent to store and track an ordered registry of
- * child components, even if they are deeply nested in the tree. For example, a menu component can use this to track
- * every menu item inside of it, including menu items inside of fragments and subcomponents. The order of the resulting
- * `Map` will match the render order in the React tree.
- *
- * Usage:
- * 1. Create a registry at the file level in a similar manner to creating a new React context. Set `T` to the data type
- *    of the registry - this can be anything **except** a function.
- * 2. In the parent component, instantiate the registry state via `useRegistryState`. Then wrap `children` in the
- *    registry context `Provider` with `setRegistry` set to the state setter function.
- * 3. Register child components via `useRegisterDescendant` or `useRegisterDescendantCallback`.
- * 4. Access the registered data using the value from `useRegistryState`. This will be a map of `string` to `T`, where
- *    the string key is a unique and stable identifier for each component which can be used as a `key` if necessary.
- *
- * @note Note that this pattern is not SSR compatible. It won't raise errors or hydration mismatches, but the
- * registry will not be available during SSR. The registry is built during the effect phase, so it will be populated
- * after hydration on the client. The initial `undefined` value can be used to safely show loading UI during SSR/initial
- * render if necessary.
- */
-export declare function createDescendantRegistry<T>(): {
-    Provider: ({ children, setRegistry }: ProviderProps<T>) => import("react").JSX.Element;
-    useRegistryState: () => [ReadonlyMap<string, T> | undefined, Dispatch<import("react").SetStateAction<ReadonlyMap<string, T> | undefined>>];
-    useRegisterDescendant: (value: T) => string;
-};
-//# sourceMappingURL=descendant-registry.d.ts.map
+export { };