@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/focus-bookmark/FocusBookmarkProvider.js

@@ -1,38 +1,30 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { FocusBookmarkProviderProvider } from './FocusBookmarkProviderContext.js';
-
+import { FocusBookmarkProviderProvider } from "./FocusBookmarkProviderContext.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/focus-bookmark/FocusBookmarkProvider.tsx
 const BOOKMARK_LIMIT = 5;
-function FocusBookmarkProvider({
-  children,
-  containerRef
-}) {
-  const bookmarksRef = useRef([]);
-  useEffect(() => {
-    const container = containerRef?.current ?? document.body;
-    const listener = (event) => {
-      if ("preventFocusBookmarkDefault" in event && event.preventFocusBookmarkDefault) {
-        return;
-      }
-      if (event.target instanceof HTMLElement) {
-        Object.assign(event, { preventFocusBookmarkDefault: true });
-        if (bookmarksRef.current.includes(event.target)) {
-          bookmarksRef.current = bookmarksRef.current.filter(
-            (element) => element !== event.target
-          );
-        }
-        bookmarksRef.current.push(event.target);
-        if (bookmarksRef.current.length > BOOKMARK_LIMIT) {
-          bookmarksRef.current.shift();
-        }
-      }
-    };
-    container.addEventListener("focusin", listener);
-    return () => container.removeEventListener("focusin", listener);
-  }, [containerRef]);
-  return /* @__PURE__ */ jsx(FocusBookmarkProviderProvider, { bookmarksRef, children });
+function FocusBookmarkProvider({ children, containerRef }) {
+	const bookmarksRef = useRef([]);
+	useEffect(() => {
+		const container = containerRef?.current ?? document.body;
+		const listener = (event) => {
+			if ("preventFocusBookmarkDefault" in event && event.preventFocusBookmarkDefault) return;
+			if (event.target instanceof HTMLElement) {
+				Object.assign(event, { preventFocusBookmarkDefault: true });
+				if (bookmarksRef.current.includes(event.target)) bookmarksRef.current = bookmarksRef.current.filter((element) => element !== event.target);
+				bookmarksRef.current.push(event.target);
+				if (bookmarksRef.current.length > BOOKMARK_LIMIT) bookmarksRef.current.shift();
+			}
+		};
+		container.addEventListener("focusin", listener);
+		return () => container.removeEventListener("focusin", listener);
+	}, [containerRef]);
+	return /* @__PURE__ */ jsx(FocusBookmarkProviderProvider, {
+		bookmarksRef,
+		children
+	});
 }
 FocusBookmarkProvider.displayName = "@optiaxiom/react/FocusBookmarkProvider";
-
+//#endregion
 export { FocusBookmarkProvider };

package/dist/esm/packages/react/src/focus-bookmark/FocusBookmarkProviderContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/focus-bookmark/FocusBookmarkProviderContext.ts
 const [FocusBookmarkProviderProvider, useFocusBookmarkProviderContext] = createContext("@optiaxiom/react/FocusBookmarkProvider");
-
+//#endregion
 export { FocusBookmarkProviderProvider, useFocusBookmarkProviderContext };

package/dist/esm/packages/react/src/focus-bookmark/FocusBookmarkRestore.js

@@ -1,33 +1,23 @@
 "use client";
-import { forwardRef, useImperativeHandle } from 'react';
-import { useFocusBookmarkProviderContext } from './FocusBookmarkProviderContext.js';
-
+import { useFocusBookmarkProviderContext } from "./FocusBookmarkProviderContext.js";
+import { forwardRef, useImperativeHandle } from "react";
+//#region src/focus-bookmark/FocusBookmarkRestore.tsx
 const FocusBookmarkRestore = forwardRef((_props, ref) => {
-  const { bookmarksRef } = useFocusBookmarkProviderContext(
-    "@optiaxiom/react/FocusBookmarkRestore"
-  );
-  useImperativeHandle(
-    ref,
-    () => ({
-      contains: () => false,
-      focus: () => {
-        bookmarksRef.current = bookmarksRef.current.filter(
-          (element) => document.body.contains(element)
-        );
-        while (bookmarksRef.current.length) {
-          const element = bookmarksRef.current.pop();
-          if (!element) {
-            break;
-          }
-          element.focus();
-          break;
-        }
-      }
-    }),
-    [bookmarksRef]
-  );
-  return null;
+	const { bookmarksRef } = useFocusBookmarkProviderContext("@optiaxiom/react/FocusBookmarkRestore");
+	useImperativeHandle(ref, () => ({
+		contains: () => false,
+		focus: () => {
+			bookmarksRef.current = bookmarksRef.current.filter((element) => document.body.contains(element));
+			while (bookmarksRef.current.length) {
+				const element = bookmarksRef.current.pop();
+				if (!element) break;
+				element.focus();
+				break;
+			}
+		}
+	}), [bookmarksRef]);
+	return null;
 });
 FocusBookmarkRestore.displayName = "@optiaxiom/react/FocusBookmarkRestore";
-
+//#endregion
 export { FocusBookmarkRestore };

package/dist/esm/packages/react/src/grid/Grid.js

@@ -1,24 +1,23 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
-const Grid = forwardRef(
-  ({ display = "grid", gap = "16", gridTemplateColumns = "1", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        display,
-        gap,
-        gridTemplateColumns,
-        ref,
-        ...props
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/grid/Grid.tsx
+/**
+* Use `Grid` component to place items in a grid using equal width columns.
+*
+* @since 0.1.0
+* @category layout
+*/
+const Grid = forwardRef(({ display = "grid", gap = "16", gridTemplateColumns = "1", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		display,
+		gap,
+		gridTemplateColumns,
+		ref,
+		...props
+	});
+});
 Grid.displayName = "@optiaxiom/react/Grid";
-
+//#endregion
 export { Grid };

package/dist/esm/packages/react/src/group/Group.js

@@ -1,33 +1,38 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
-const mapDirectionToAlign$1 = {
-  column: "stretch",
-  "column-reverse": "stretch",
-  row: "center",
-  "row-reverse": "center"
+import { mapResponsiveValue } from "../sprinkles/sprinkles.js";
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/group/Group.tsx
+const mapDirectionToAlign = {
+	column: "stretch",
+	"column-reverse": "stretch",
+	row: "center",
+	"row-reverse": "center"
 };
-const Group = forwardRef(
-  ({ alignItems, display = "flex", flexDirection = "row", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: alignItems ?? mapResponsiveValue(
-          flexDirection,
-          (value) => mapDirectionToAlign$1[value]
-        ),
-        display,
-        flexDirection,
-        ref,
-        ...props
-      }
-    );
-  }
-);
+/**
+* A flexbox layout component for grouping items horizontally or vertically.
+*
+* Default Props:
+* - flexDirection: 'row' (CSS standard - horizontal layout)
+* - alignItems: 'center' (when row) or 'stretch' (when column)
+*
+* Common Usage:
+* - Horizontal button groups: <Group gap="8"><Button /><Button /></Group>
+* - Vertical forms: <Group flexDirection="column" gap="16"><Input /><Input /></Group>
+* - Icon + text combos: <Group gap="4" alignItems="center"><Icon /><Text /></Group>
+*
+* @category layout
+*/
+const Group = forwardRef(({ alignItems, display = "flex", flexDirection = "row", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		alignItems: alignItems ?? mapResponsiveValue(flexDirection, (value) => mapDirectionToAlign[value]),
+		display,
+		flexDirection,
+		ref,
+		...props
+	});
+});
 Group.displayName = "@optiaxiom/react/Group";
-
+//#endregion
 export { Group };

package/dist/esm/packages/react/src/heading/Heading.js

@@ -1,52 +1,71 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { Text } from '../text/Text.js';
-
-const Slot$9 = createSlot("@optiaxiom/react/Heading");
+import { Text } from "../text/Text.js";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/heading/Heading.tsx
+const Slot = createSlot("@optiaxiom/react/Heading");
 const mapLevelToTag = {
-  "1": "h1",
-  "2": "h2",
-  "3": "h3",
-  "4": "h4"
+	"1": "h1",
+	"2": "h2",
+	"3": "h3",
+	"4": "h4"
 };
 const mapLevelToFontSize = {
-  "1": "4xl",
-  "2": "3xl",
-  "3": "xl",
-  "4": "lg"
+	"1": "4xl",
+	"2": "3xl",
+	"3": "xl",
+	"4": "lg"
 };
 const mapLevelToFontWeight = {
-  "1": "900",
-  "2": "900",
-  "3": "500",
-  "4": "600"
+	"1": "900",
+	"2": "900",
+	"3": "500",
+	"4": "600"
 };
 const mapLevelToFontFamily = {
-  "1": "heading",
-  "2": "heading",
-  "3": "heading",
-  "4": "sans"
+	"1": "heading",
+	"2": "heading",
+	"3": "heading",
+	"4": "sans"
 };
-const Heading = forwardRef(
-  ({ asChild, children, fontFamily, fontWeight, level = "1", ...props }, ref) => {
-    const Comp = asChild ? Slot$9 : mapLevelToTag[level] ?? "h1";
-    const fontSize = mapLevelToFontSize[level] ?? "4xl";
-    return /* @__PURE__ */ jsx(
-      Text,
-      {
-        asChild: true,
-        fontFamily: fontFamily ?? mapLevelToFontFamily[level] ?? "heading",
-        fontSize,
-        fontWeight: fontWeight ?? mapLevelToFontWeight[level] ?? "700",
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsx(Comp, { children })
-      }
-    );
-  }
-);
+/**
+* Renders semantic heading elements (h1-h4) for document structure and
+* accessibility.
+*
+* Use this for page titles, section headings, and any text that represents a
+* heading in the document outline. Don't use Text with large fontSize and bold
+* fontWeight for headings - Heading provides proper semantics for screen
+* readers and improves accessibility.
+*
+* When to use:
+* - Page titles
+* - Section headings
+* - Card/panel titles
+* - Any text with fontSize='xl'+ and fontWeight='500'+
+*
+* ⚠️ All heading levels (1-4) default to fontWeight="700". If your design shows
+* lighter headings, explicitly set fontWeight="500" or "600".
+*
+* Don't use Text component for headings - it lacks semantic meaning.
+*
+* @category typography
+* @since 0.1.0
+* @extends Text
+*/
+const Heading = forwardRef(({ asChild, children, fontFamily, fontWeight, level = "1", ...props }, ref) => {
+	const Comp = asChild ? Slot : mapLevelToTag[level] ?? "h1";
+	const fontSize = mapLevelToFontSize[level] ?? "4xl";
+	return /* @__PURE__ */ jsx(Text, {
+		asChild: true,
+		fontFamily: fontFamily ?? mapLevelToFontFamily[level] ?? "heading",
+		fontSize,
+		fontWeight: fontWeight ?? mapLevelToFontWeight[level] ?? "700",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(Comp, { children })
+	});
+});
 Heading.displayName = "@optiaxiom/react/Heading";
-
+//#endregion
 export { Heading };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CCChJADv.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var mark$1 = recipeRuntime({base:'_1f976bx'});
-
-export { mark$1 as mark };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/highlight/Highlight.css.ts.vanilla-C0vNV_Os.css";
+//#region src/highlight/Highlight.css.ts
+var mark = recipeRuntime({ base: "_1jrjnq" });
+//#endregion
+export { mark };

package/dist/esm/packages/react/src/highlight/Highlight.js

@@ -1,20 +1,28 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Fragment } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { mark } from './Highlight-css.js';
-import { useHighlightedChunks } from './useHighlightedChunks.js';
-
-const Highlight = forwardRef(
-  ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
-    const chunks = useHighlightedChunks(content || "", query);
-    return /* @__PURE__ */ jsx(Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
-    ) : chunk }, index)) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { mark } from "./Highlight-css.js";
+import { useHighlightedChunks } from "./useHighlightedChunks.js";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/highlight/Highlight.tsx
+/**
+* Highlight query terms within text content.
+*
+* @category data-display
+* @experimental
+*/
+const Highlight = forwardRef(({ children = (chunk) => chunk, content, query, ...props }, ref) => {
+	const chunks = useHighlightedChunks(content || "", query);
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...props,
+		children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(/* @__PURE__ */ jsx(Box, {
+			asChild: true,
+			...mark(),
+			children: /* @__PURE__ */ jsx("mark", { children: chunk })
+		})) : chunk }, index))
+	});
+});
 Highlight.displayName = "@optiaxiom/react/Highlight";
-
+//#endregion
 export { Highlight };

package/dist/esm/packages/react/src/highlight/useHighlightedChunks.js

@@ -1,24 +1,21 @@
 "use client";
-import { useMemo } from 'react';
-
+"use client";
+import { useMemo } from "react";
+//#region src/highlight/useHighlightedChunks.ts
 const useHighlightedChunks = (content, query) => {
-  const terms = useMemo(
-    () => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean),
-    [query]
-  );
-  if (terms.length === 0) {
-    return [{ chunk: content, highlighted: false }];
-  }
-  const pattern = new RegExp(
-    "(" + terms.map(
-      (term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`
-    ).join("|") + ")",
-    "gi"
-  );
-  return content.split(pattern).map((chunk) => ({ chunk, highlighted: pattern.test(chunk) }));
+	const terms = useMemo(() => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean), [query]);
+	if (terms.length === 0) return [{
+		chunk: content,
+		highlighted: false
+	}];
+	const pattern = new RegExp("(" + terms.map((term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`).join("|") + ")", "gi");
+	return content.split(pattern).map((chunk) => ({
+		chunk,
+		highlighted: pattern.test(chunk)
+	}));
 };
 function escapeRegExp(string) {
-  return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
+	return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
 }
-
+//#endregion
 export { useHighlightedChunks };

package/dist/esm/packages/react/src/hooks/useEffectEvent.js

@@ -1,14 +1,15 @@
 "use client";
-import { useRef, useEffect, useCallback } from 'react';
-
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/useEffectEvent.ts
 function useEffectEvent(callback) {
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	return useCallback((...args) => {
+		return callbackRef.current(...args);
+	}, []);
 }
-
+//#endregion
 export { useEffectEvent };

package/dist/esm/packages/react/src/hooks/useFieldLabelTrigger.js

@@ -1,22 +1,18 @@
-import { useEffect } from 'react';
-import { useFieldContext } from '../field/FieldContext.js';
-
+import { useFieldContext } from "../field/FieldContext.js";
+import { useEffect } from "react";
+//#region src/hooks/useFieldLabelTrigger.ts
 const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
-  const { labelId = ariaLabelledBy } = useFieldContext("useFieldLabelTrigger");
-  useEffect(() => {
-    if (!labelId || !ref.current) {
-      return;
-    }
-    const button = ref.current;
-    const label = document.getElementById(labelId);
-    if (!label) {
-      return;
-    }
-    const onLabelClick = () => button.focus();
-    label.addEventListener("click", onLabelClick);
-    return () => label.removeEventListener("click", onLabelClick);
-  }, [labelId, ref]);
-  return labelId;
+	const { labelId = ariaLabelledBy } = useFieldContext("useFieldLabelTrigger");
+	useEffect(() => {
+		if (!labelId || !ref.current) return;
+		const button = ref.current;
+		const label = document.getElementById(labelId);
+		if (!label) return;
+		const onLabelClick = () => button.focus();
+		label.addEventListener("click", onLabelClick);
+		return () => label.removeEventListener("click", onLabelClick);
+	}, [labelId, ref]);
+	return labelId;
 };
-
+//#endregion
 export { useFieldLabelTrigger };

package/dist/esm/packages/react/src/hooks/useObserveValue.js

@@ -1,34 +1,27 @@
-import { useEffect } from 'react';
-
+import { useEffect } from "react";
+//#region src/hooks/useObserveValue.ts
 const useObserveValue = (inputRef, setValue) => {
-  useEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-    const descriptor = Object.getOwnPropertyDescriptor(
-      input.constructor.prototype,
-      "value"
-    );
-    Object.defineProperty(input, "value", {
-      configurable: true,
-      enumerable: true,
-      get: function() {
-        return descriptor?.get?.call(input);
-      },
-      set: function(value) {
-        descriptor?.set?.call(input, value);
-        setValue(value);
-      }
-    });
-  }, [inputRef, setValue]);
-  return (value) => {
-    if (!inputRef.current) {
-      return;
-    }
-    inputRef.current.value = value;
-    inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
-  };
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		const descriptor = Object.getOwnPropertyDescriptor(input.constructor.prototype, "value");
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			enumerable: true,
+			get: function() {
+				return descriptor?.get?.call(input);
+			},
+			set: function(value) {
+				descriptor?.set?.call(input, value);
+				setValue(value);
+			}
+		});
+	}, [inputRef, setValue]);
+	return (value) => {
+		if (!inputRef.current) return;
+		inputRef.current.value = value;
+		inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+	};
 };
-
+//#endregion
 export { useObserveValue };

package/dist/esm/packages/react/src/hooks/useResponsiveMatches.js

@@ -1,23 +1,17 @@
 "use client";
-import { conditions } from '../utils/conditions.js';
-import 'react';
-import 'react/jsx-runtime';
-import '../utils/isHoverSupported.js';
-import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
-
+"use client";
+import { conditions } from "../utils/conditions.js";
+import { useMediaQuery } from "../../../../node_modules/.pnpm/@mantine_hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js";
+//#region src/hooks/useResponsiveMatches.ts
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {
-  const matches = {
-    base: true,
-    sm: useMediaQuery(conditions.conditions.sm["@media"], true),
-    md: useMediaQuery(conditions.conditions.md["@media"])
-  };
-  for (const name of list) {
-    if (config[name] && matches[name]) {
-      return config[name];
-    }
-  }
-  return config.base;
+	const matches = {
+		base: true,
+		sm: useMediaQuery(conditions.conditions.sm["@media"], true),
+		md: useMediaQuery(conditions.conditions.md["@media"])
+	};
+	for (const name of list) if (config[name] && matches[name]) return config[name];
+	return config.base;
 };
-
+//#endregion
 export { useResponsiveMatches };