@baseline-ui/core 0.58.0 → 0.60.0

package/dist/react-aria.d.ts

@@ -0,0 +1,2 @@
+export { useButton, useFocusManager, useTextField, useFocusWithin, } from "react-aria";
+export type { AriaButtonProps, AriaTextFieldOptions, DroppableCollectionReorderEvent, GridListItemAria, } from "react-aria";

package/dist/react-stately.d.ts

@@ -0,0 +1,2 @@
+export { useListData, useTreeData } from "react-stately";
+export type { ListData, Color, TreeData } from "react-stately";

package/dist/utils/a11y.d.ts

@@ -0,0 +1 @@
+export declare function cleanKeyFromGlobImport(modules: Record<string, Record<string, string>>): Record<string, Record<string, string>>;

package/dist/utils/classNames.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This utility function is used to create a class name string from the given
+ * arguments. It supports strings, undefined, null, boolean and objects. If an
+ * object is passed, the keys will be used as class names and the values will be
+ * used as a boolean to determine if the class name should be included.
+ *
+ * Example:
+ *
+ * ```js
+ * classNames("foo", "bar", { baz: true, qux: false }); // "foo bar baz"
+ * classNames(null, undefined, false, "foo", { bar: true }); // "foo bar"
+ * classNames(["foo", { bar: true }]); // "foo bar"
+ * ```
+ *
+ * @param args
+ */
+export declare function classNames(...args: any[]): string;

package/dist/utils/colors.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Lightens a color by a percentage.
+ *
+ * ```ts
+ * lightenColor("#000000", 10); // #1a1a1a
+ * ```
+ *
+ * @param color
+ * @param percent
+ */
+export declare function lightenColor(color: string, percent: number): string;

package/dist/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const MINIMUM_ACCESSIBLE_SIZE = 24;

package/dist/utils/devWarn.d.ts

@@ -0,0 +1 @@
+export declare function devWarnOnce(key: string, message: string): void;

package/dist/utils/dom.d.ts

@@ -0,0 +1,130 @@
+import type React from "react";
+/**
+ * Returns the HTMLElement from a string selector, HTMLElement, or React
+ * RefObject.
+ *
+ * @param element - A string selector, HTMLElement, or React RefObject.
+ * @param ownerDocument - The document to use for the querySelector call.
+ * @returns The HTMLElement or null if not found.
+ */
+export declare function getHTMLElement(element: string | HTMLElement | React.RefObject<HTMLElement> | null | undefined, ownerDocument: Document): HTMLElement | null | undefined;
+interface FontProperties {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    font?: string;
+}
+/**
+ * Returns the width and height of the text with the given font properties.
+ *
+ * ```ts
+ * const { width, height } = getTextDimensions({
+ *   text: "Hello world!",
+ *   fontSize: 16,
+ *   fontFamily: "Arial",
+ *   fontWeight: "normal",
+ *   fontStyle: "normal",
+ * });
+ * ```
+ *
+ * @param options - The options for calculating the text dimensions.
+ * @param options.text - The text to measure.
+ * @param options.fontSize - The font size in pixels. Defaults to 16.
+ * @param options.fontFamily - The font family. Defaults to 'Arial'.
+ * @param options.fontWeight - The font weight. Defaults to 'normal'.
+ * @param options.fontStyle - The font style. Defaults to 'normal'.
+ * @param options.font - The full font string. Overrides fontSize, fontFamily,
+ *   fontWeight, and fontStyle.
+ */
+export declare function getTextDimensions({ text, fontSize, fontFamily, fontWeight, fontStyle, font, }: {
+    text: string;
+} & FontProperties): {
+    width: number;
+    height: number;
+};
+/**
+ * Returns the font size that will fit the given text within the given width.
+ * The font size is calculated by starting with the initial font size and
+ * decreasing it until the text fits within the desired width.
+ *
+ * @example
+ *   const fontSize = calculateFontSizeToFitWidth({
+ *     text: "Hello world!",
+ *     maxWidth: 100,
+ *     initialFontSize: 16,
+ *     fontFamily: "Arial",
+ *     fontWeight: "normal",
+ *     fontStyle: "normal",
+ *   });
+ *
+ * @param options - The options for calculating the font size.
+ * @param options.text - The text to fit within the width.
+ * @param options.maxWidth - The maximum width the text should fit within.
+ * @param options.initialFontSize - The starting font size to use for
+ *   calculations. Defaults to 50.
+ * @param options.fontFamily - The font family to use. Defaults to 'Arial'.
+ * @param options.fontWeight - The font weight to use. Defaults to 'normal'.
+ * @param options.fontStyle - The font style to use. Defaults to 'normal'.
+ * @returns The calculated font size that fits the text within the given width.
+ */
+export declare function calculateFontSizeToFitWidth({ text, maxWidth, initialFontSize, fontFamily, fontWeight, fontStyle, }: {
+    text: string;
+    maxWidth: number;
+    initialFontSize: number;
+} & Omit<FontProperties, "fontSize">): number;
+/**
+ * Returns true if the element is focusable.
+ *
+ * @param element - The element to check.
+ */
+export declare function isFocusableElement(element: HTMLElement): boolean;
+export declare function findFocusableElements(element: HTMLElement): NodeListOf<Element>;
+/**
+ * Returns the active element of the given node. If the node is within a shadow
+ * root, the active element of the shadow root will be returned, otherwise the
+ * active element of the document will be returned.
+ *
+ * @param node - The node to get the active element from.
+ * @returns The active element of the given node.
+ */
+export declare function getActiveElement(node?: Node): Element | null;
+/**
+ * Returns true if the target is an input that will cause the software keyboard
+ * to appear.
+ *
+ * @param target Element - The element to check.
+ */
+export declare function isInputThatOpensKeyboard(target: Element): boolean;
+/**
+ * Returns the absolute bounds of the element. If the element is within a shadow
+ * root, the bounds will be relative to the host element. If the element is not
+ * within a shadow root, the bounds will be relative to the document.
+ *
+ * @param element - The element to get the absolute bounds of.
+ * @returns The absolute bounds of the element.
+ */
+export declare function getAbsoluteBounds(element: HTMLElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Returns the absolute position of the element that can go correctly with
+ * position: fixed. If the element is within a shadow root, the position will be
+ * relative to the host element so that the element can be positioned correctly
+ * within the shadow root.
+ *
+ * @param element - The element to get the absolute position of.
+ * @param coordinates - The coordinates of the element.
+ * @returns The absolute position of the element.
+ */
+export declare function getAbsolutePosition(element: HTMLElement, coordinates?: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,18 @@
+export * from "./types/Shared";
+export * from "./overlays";
+export * from "./isRect";
+export * from "./invariant";
+export * from "./classNames";
+export * from "./dom";
+export * from "./svgs";
+export * from "./a11y";
+export * from "./objects";
+export * from "./colors";
+export * from "./validations";
+export * from "./keyboards";
+export * from "./math";
+export * from "./strings";
+export * from "./isInIframe";
+export * from "./isInShadowDOM";
+export * from "./reactAriaCompat";
+export * from "./devWarn";

package/dist/utils/invariant.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Throws an error if the condition is falsy. This is used to check for
+ * impossible conditions, such as unreachable code or invalid inputs. This is
+ * also used to narrow types in TypeScript. For example:
+ *
+ * ```ts
+ * function example(value: string | number) {
+ *   invariant(typeof value === "string");
+ *   // value is now a string
+ *   value.split("");
+ *   // ...
+ * }
+ * ```
+ *
+ * @param condition The condition to check
+ * @param message The message to throw if the condition is falsy
+ */
+export declare function invariant(condition: unknown, message?: string): asserts condition;

package/dist/utils/isInIframe.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Checks whether a given DOM node is inside an iframe.
+ *
+ * This function compares the node's owning document's `defaultView` to
+ * `window.top`. If they're different, the node is inside an iframe. Handles
+ * cross-origin iframes safely using try/catch.
+ *
+ * @param {Node} node - The DOM node to check.
+ * @returns {boolean} `true` if the node is inside an iframe, `false` otherwise.
+ * @see https://stackoverflow.com/a/326076
+ */
+export declare function isInIframe(el: Node): boolean;

package/dist/utils/isInShadowDOM.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Checks whether a given node is inside a Shadow DOM.
+ *
+ * This function uses `getRootNode()` to determine if the node's root is a
+ * `ShadowRoot`, which indicates that the node is part of a shadow tree.
+ *
+ * @param {Node} node - The DOM node to check.
+ * @returns {boolean} `true` if the node is inside a Shadow DOM, `false`
+ *   otherwise.
+ */
+export declare function isInShadowDOM(element: Node | null | undefined): boolean;

package/dist/utils/isRect.d.ts

@@ -0,0 +1,7 @@
+import type { Rect } from "./types/Shared";
+/**
+ * Check if the given object is a `Rect`.
+ *
+ * @param rect
+ */
+export declare function isRect(rect: Rect): rect is Rect;

package/dist/utils/keyboards.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns the keyboard shortcut label with the correct symbols for the current
+ * OS.
+ *
+ * ```tsx
+ * getOsSpecificKeyboardShortcutLabel("Ctrl+Alt+Shift+Enter", true); // "⌘⌥⇧↩"
+ * getOsSpecificKeyboardShortcutLabel("Ctrl+Alt+Shift+Enter"); // "Cmd+Option+Shift+Enter"
+ * ```
+ *
+ * @param keyboardShortcut - The Windows keyboard shortcut to format.
+ * @param useSymbol - Whether to use symbols for the modifier keys.
+ */
+export declare function getOsSpecificKeyboardShortcutLabel(keyboardShortcut: string, useSymbol?: boolean): string;

package/dist/utils/math.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/utils/objects.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This function filters out falsy values from an object.
+ *
+ * @template T - A type that extends Record<string, unknown>.
+ * @param {T} obj - The object to filter.
+ * @returns {Partial<T>} - A new object that only includes the truthy values
+ *   from the original object.
+ */
+export declare function filterTruthyValues<T extends Record<string, unknown>>(obj: T): Partial<T>;
+/**
+ * This function converts a boolean or an object to a config object. If the
+ * value is a boolean, the defaults will be returned. If the value is an object,
+ * the defaults will be merged with the value.
+ *
+ * @template T - A type that extends Record<string, unknown>.
+ * @param {boolean | Partial<T>} value - The value to convert.
+ * @param {T} defaults - The defaults to use if the value is a boolean.
+ * @returns {T} - A new object that includes the defaults and the value.
+ */
+export declare function booleanOrObjectToConfig<T extends Record<string, unknown>>(value: boolean | Partial<T>, defaults: T): T | undefined;

package/dist/utils/overlays.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if the selector is inside an overlay content
+ *
+ * @param selector
+ */
+export declare function isInsideOverlayContent(selector: HTMLElement): Element | null;

package/dist/utils/reactAriaCompat.d.ts

@@ -0,0 +1,22 @@
+import type { DOMAttributes } from "@react-types/shared";
+import type { HTMLAttributes } from "react";
+/**
+ * Keys whose types in `@react-types/shared`'s `DOMAttributes` are incompatible
+ * with React's `HTMLAttributes` after the React 18 → 19 typings shift
+ * (`onBeforeInput` event signature changed; `children` is structurally typed).
+ *
+ * Single source of truth — also referenced by `BoxProps` so the omit list
+ * cannot drift between the type and the runtime helper.
+ */
+export declare const REACT_ARIA_INCOMPATIBLE_KEYS: readonly ["onBeforeInput", "children"];
+export type ReactAriaIncompatibleKey = (typeof REACT_ARIA_INCOMPATIBLE_KEYS)[number];
+export type SafeDOMAttributes<T> = Omit<DOMAttributes<T>, ReactAriaIncompatibleKey>;
+/**
+ * Strips keys whose React Aria types are incompatible with React's
+ * `HTMLAttributes` so the result can be spread onto a DOM element.
+ *
+ * If React Aria ever returns a real `onBeforeInput` handler we drop it here.
+ * Logged via `console.error` (deduped per call site) so a regression is
+ * visible in production telemetry, not just in dev.
+ */
+export declare function safeSpreadProps<T extends HTMLElement>(ariaProps: DOMAttributes<T>): HTMLAttributes<T>;

package/dist/utils/reactAriaComponentsCompat.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Filters out `data-*` attributes to keep them from being passed down and duplicated.
+ */
+export declare function removeDataAttributes<T>(props: T): T;

package/dist/utils/resolveAriaLabelAttrs.d.ts

@@ -0,0 +1,22 @@
+import type { AriaLabelingProps } from "@react-types/shared";
+/**
+ * Utility function to resolve aria-labeling attributes for a component. It also
+ * handles the fallback of aria-labelledby and aria-describedby attributes based
+ * on provided IDs. This function makes sure that if `aria-label` is passed by
+ * the user, it is prioritised over using `aria-labelledby` with fallback
+ * value.
+ *
+ * **Note**: If both `aria-label` and `aria-describedby` are passed, the
+ * VoiceOver (on OSX) is going to read only `aria-label` and ignore
+ * `aria-describedby`.
+ */
+export declare function resolveAriaLabelAttrs({ ariaProps, fallbackLabelId, fallbackDescriptionId, }: {
+    ariaProps: AriaLabelingProps;
+    fallbackLabelId?: string;
+    fallbackDescriptionId?: string;
+}): {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+};

package/dist/utils/resolvePublicUrl.d.ts

@@ -0,0 +1 @@
+export declare function resolvePublicUrl(path: string): string;

package/dist/utils/strings.d.ts

@@ -0,0 +1,6 @@
+export declare const capitalize: (str: string) => string;
+/**
+ * Parses the given text using DOMParser and retrieves the plain text content of
+ * the HTML document body.
+ */
+export declare const getPlainText: (text: string) => string;

package/dist/utils/style.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+export declare function getDynamicClassNameForCollectionItem<U, V, T extends (item: U, options: V) => string | undefined>(className: string | T | undefined, item: U, options: V): string | undefined;
+export declare function getDynamicStyleForCollectionItem<U, V, T extends (item: U, options: V) => React.CSSProperties | undefined>(style: React.CSSProperties | T | undefined, item: U, options: V): React.CSSProperties | undefined;
+export declare function getDynamicClassName<U, T extends (state: U) => string | undefined>(className: string | T | undefined, state: U): string | undefined;
+export declare function getDynamicStyle<U, T extends (state: U) => React.CSSProperties | undefined>(style: React.CSSProperties | T | undefined, state: U): React.CSSProperties | undefined;

package/dist/utils/styleMixins.css.d.ts

@@ -0,0 +1,16 @@
+export declare const contentsCn: string;
+export declare const rowCn: string;
+export declare const disabledCn: string;
+export declare const checkeredCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        xs: {
+            backgroundSize: "4px 4px";
+        };
+        sm: {
+            backgroundSize: "6px 6px";
+        };
+    };
+}>;
+export declare const ellipsisCn: string;
+export declare const fullWidthTouchTargetCn: Record<"always" | "touch", string>;
+export declare const touchTargetCn: Record<"always" | "touch", string>;

package/dist/utils/svgs.d.ts

@@ -0,0 +1,15 @@
+/**
+ * This function takes a list of [x, y] coordinates representing a stroke and
+ * returns a SVG path string.
+ *
+ * @example
+ *   ```ts
+ *   const stroke = [[0, 0], [1, 1], [2, 2]];
+ *   const path = getSvgPathFromStroke(stroke);
+ *   // path === "M0,0Q0.5,0.5,1,1Q1.5,1.5,2,2Z"
+ *   ```;
+ *
+ * @param stroke The stroke to convert to an SVG path
+ * @param closed Wether to close the path
+ */
+export declare function getSvgPathFromStroke(stroke: number[][], closed?: boolean): string;

package/dist/utils/types/Shared.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+export interface BlockProps {
+    /**
+     * The unique identifier for the block. This is used to identify the block in
+     * the DOM and in the block map. It is added as a data attribute
+     * `data-block-id` to the root element of the block if a DOM node is
+     * rendered.
+     */
+    "data-block-id"?: string;
+    /**
+     * Represents a data block group. This is similar to `data-block-id` but it
+     * doesn't have to be unique just like `class`. This is used to group blocks
+     * together in the DOM and in the block map. It is added as a data attribute
+     * `data-block-class` to the root element of the block if a DOM node is
+     * rendered.
+     */
+    "data-block-class"?: string;
+}
+export interface StylingProps extends BlockProps {
+    /** The className applied to the root element of the component. */
+    className?: string;
+    /** The style applied to the root element of the component. */
+    style?: React.CSSProperties;
+}
+export interface Rect {
+    /** The left position of the rectangle. */
+    left: number;
+    /** The top position of the rectangle. */
+    top: number;
+    /** The width of the rectangle. */
+    width?: number;
+    /** The height of the rectangle. */
+    height?: number;
+}

package/dist/utils/validations.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Checks whether the given value is a valid URL.
+ *
+ * ```ts
+ * isUrl("https://example.com"); // true
+ * isUrl("example.com"); // false
+ * ```
+ *
+ * @param {string} value - The value to be checked.
+ * @param {boolean} lenient - Whether to be lenient when checking the URL.
+ * @returns {boolean} - True if the value is a valid URL, false otherwise.
+ */
+export declare function isUrl(value: string, lenient?: boolean): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseline-ui/core",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "description": "Baseline UI is a set of accessible components and tools for building accessible, customizable, production-ready user interfaces",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -36,9 +36,9 @@
     "slate-hyperscript": "^0.100.0",
     "tailwind-merge": "^3.5.0",
     "use-sync-external-store": "1.6.0",
-    "@baseline-ui/css": "0.58.0",
-    "@baseline-ui/icons": "0.58.0",
-    "@baseline-ui/tokens": "0.58.0"
+    "@baseline-ui/css": "0.60.0",
+    "@baseline-ui/icons": "0.60.0",
+    "@baseline-ui/tokens": "0.60.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -49,15 +49,15 @@
     "@types/dompurify": "3.2.0",
     "@types/markdown-it": "^14.1.2",
     "@vanilla-extract/recipes": "0.5.7",
-    "@baseline-ui/translations": "0.58.0"
+    "@baseline-ui/translations": "0.60.0"
   },
   "license": "SEE LICENSE IN https://pspdfkit.com/legal/License.pdf",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --clean --dts --minify --treeshake",
-    "build:dts": "pnpx rollup -c rollup.config.js",
+    "build": "tsup src/index.ts --format cjs,esm --clean --minify --treeshake --no-dts && pnpm run build:dts",
+    "build:dts": "tsc -p tsconfig.dts.json",
     "build:docs": "typedoc --useCodeBlocks --enumMembersFormat table --hidePageTitle --parametersFormat table --propertiesFormat table --hidePageHeader --indexFormat table --typeDeclarationFormat table --hideBreadcrumbs --outputFileStrategy modules",
     "acknowledgements": "pnpm-licenses generate-disclaimer --prod --output-file=Acknowledgements.md"
   }