@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-W6TFYAEF.js

@@ -0,0 +1,256 @@
+import {
+  FieldGroupIcon,
+  FieldGroupSuffix,
+  decoratorPadding,
+  useOptionalFieldGroup
+} from "./chunk-3CPLJJWX.js";
+import {
+  TextFieldDescription,
+  TextFieldError,
+  TextFieldField,
+  TextFieldLabel,
+  TextFieldRoot,
+  useTextField
+} from "./chunk-5YZUYSV7.js";
+import {
+  FIELD_GLYPH_SIZES
+} from "./chunk-43S673KF.js";
+import {
+  CloseButtonBase,
+  closeButtonGeometry
+} from "./chunk-4BAKKBHJ.js";
+import {
+  createRecipe
+} from "./chunk-DKVXTMIJ.js";
+import {
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/search-field/search-field-clear.tsx
+import { forwardRef, useCallback } from "react";
+
+// src/components/search-field/search-field.context.ts
+var [SearchFieldProvider, useSearchField] = createSlotContext("SearchField");
+
+// src/components/search-field/search-field-clear.tsx
+import { jsx } from "react/jsx-runtime";
+var SearchFieldClear = forwardRef(
+  function SearchFieldClear2({ onPress, ...props }, ref) {
+    const { query, clear, clearStyle, clearGlyphStyle } = useSearchField();
+    const { isDisabled } = useTextField();
+    const handlePress = useCallback(
+      (event) => {
+        clear();
+        onPress?.(event);
+      },
+      [clear, onPress]
+    );
+    if (query.length === 0) return null;
+    return /* @__PURE__ */ jsx(FieldGroupSuffix, { children: /* @__PURE__ */ jsx(
+      CloseButtonBase,
+      {
+        ref,
+        name: "SearchField.Clear",
+        baseStyle: clearStyle,
+        glyphStyle: clearGlyphStyle,
+        isDisabled,
+        ...props,
+        onPress: handlePress
+      }
+    ) });
+  }
+);
+SearchFieldClear.displayName = "XAUI.SearchField.Clear";
+
+// src/components/search-field/search-field-field.tsx
+import { forwardRef as forwardRef2, useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SearchFieldField = forwardRef2(
+  function SearchFieldField2({ style, ...props }, ref) {
+    const { query, onType, submit, boxStyle } = useSearchField();
+    const [styleProps, rest] = useStyleProps(props);
+    const group = useOptionalFieldGroup();
+    const padding = useMemo(
+      () => decoratorPadding(group?.prefixWidth ?? 0, group?.suffixWidth ?? 0),
+      [group?.prefixWidth, group?.suffixWidth]
+    );
+    return /* @__PURE__ */ jsx2(
+      TextFieldField,
+      {
+        ref,
+        accessibilityRole: "search",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        returnKeyType: "search",
+        ...rest,
+        value: query,
+        onChangeText: onType,
+        onSubmitEditing: submit,
+        style: [boxStyle, padding, styleProps, style]
+      }
+    );
+  }
+);
+SearchFieldField.displayName = "XAUI.SearchField.Field";
+
+// src/components/search-field/search-icon.tsx
+import { Circle, Path, Svg } from "react-native-svg";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SearchIcon({
+  size = 20,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx3(Circle, { cx: 11, cy: 11, r: 7, stroke: color, strokeWidth: 2 }),
+    /* @__PURE__ */ jsx3(
+      Path,
+      {
+        d: "m20 20-3.5-3.5",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+SearchIcon.displayName = "XAUI.SearchIcon";
+
+// src/components/search-field/search-field-icon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SearchFieldIcon({
+  as = SearchIcon,
+  size,
+  color
+}) {
+  return /* @__PURE__ */ jsx4(FieldGroupIcon, { as, size, color });
+}
+SearchFieldIcon.displayName = "XAUI.SearchField.Icon";
+
+// src/components/search-field/search-field.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback2, useMemo as useMemo2, useRef, useState } from "react";
+
+// src/components/search-field/search-field.recipe.ts
+var SLOTS = ["field", "clear", "clearGlyph"];
+var VARIANT_TOKENS = {
+  primary: { bg: "fieldBackground" },
+  secondary: { bg: "defaultSoft" }
+};
+var BAR_RATIO = 16 / 32;
+function sizeAxis(size) {
+  return (theme) => {
+    const side = theme.fontSizes[FIELD_GLYPH_SIZES[size]];
+    return {
+      clear: { width: side, height: side },
+      clearGlyph: { width: Math.round(side * BAR_RATIO) }
+    };
+  };
+}
+var searchFieldRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => {
+    const shared = closeButtonGeometry(theme);
+    return {
+      clear: shared.close,
+      // The cross sits with the magnifier rather than with the query: both are decoration
+      // for the text, not text. It is the colour `FieldGroup.Icon` gives the mark on the
+      // other edge, and the two read as one icon set.
+      clearGlyph: {
+        ...shared.closeGlyph,
+        backgroundColor: theme.colors.fieldPlaceholder
+      }
+    };
+  },
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * No border and no foreground: the edge is the `TextField`'s `tertiary`, so restating a
+   * colour here would write over the one focus and `isInvalid` had just set — the fill is
+   * layered *after* the box's own style, and last writer wins.
+   */
+  paint: (_theme, colors) => ({ field: { backgroundColor: colors.bg } }),
+  variants: {
+    size: {
+      xs: sizeAxis("xs"),
+      sm: sizeAxis("sm"),
+      md: sizeAxis("md"),
+      lg: sizeAxis("lg")
+    }
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/search-field/search-field.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SearchFieldRoot = forwardRef3(
+  function SearchField({
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    onSearch,
+    variant,
+    size,
+    color,
+    ...props
+  }, ref) {
+    const theme = useXAUITheme();
+    const [own, setOwn] = useState(defaultValue ?? "");
+    const isControlled = value !== void 0;
+    const query = isControlled ? value : own;
+    const reported = useRef(query);
+    const report = useCallback2(
+      (next) => {
+        if (!isControlled) setOwn(next);
+        if (next === reported.current) return;
+        reported.current = next;
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const clear = useCallback2(() => report(""), [report]);
+    const submit = useCallback2(() => onSearch?.(query), [onSearch, query]);
+    const selection = { variant, size };
+    const styles = searchFieldRecipe.resolve({ theme, selection });
+    const tint = color ? searchFieldRecipe.tint({ theme, color, selection }) : void 0;
+    const context = useMemo2(
+      () => ({
+        query,
+        onType: report,
+        clear,
+        submit,
+        boxStyle: tint ? [styles.field, tint.field] : styles.field,
+        clearStyle: styles.clear,
+        clearGlyphStyle: styles.clearGlyph
+      }),
+      [query, report, clear, submit, styles, tint]
+    );
+    return /* @__PURE__ */ jsx5(SearchFieldProvider, { value: context, children: /* @__PURE__ */ jsx5(TextFieldRoot, { ref, variant: "tertiary", size, ...props, children }) });
+  }
+);
+SearchFieldRoot.displayName = "XAUI.SearchField.Root";
+
+// src/components/search-field/index.ts
+var SearchField2 = Object.assign(SearchFieldRoot, {
+  Label: TextFieldLabel,
+  Icon: SearchFieldIcon,
+  Field: SearchFieldField,
+  Clear: SearchFieldClear,
+  Description: TextFieldDescription,
+  Error: TextFieldError
+});
+
+export {
+  useSearchField,
+  SearchFieldClear,
+  SearchFieldField,
+  SearchIcon,
+  SearchFieldIcon,
+  searchFieldRecipe,
+  SearchFieldRoot,
+  SearchField2 as SearchField
+};

package/dist/{chunk-LMUPNKPH.cjs → chunk-WDDXU3OH.cjs}

@@ -1,11 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/system/portal/portal.tsx
-var _react = require('react');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-// src/system/portal/portal-context.ts
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
 
+// src/system/portal/portal-context.ts
+var _react = require('react');
 var PortalContext = _react.createContext.call(void 0, null);
 
 // src/system/portal/portal.tsx
+
 function Portal({ children }) {
   const context = _react.useContext.call(void 0, PortalContext);
   const key = _react.useId.call(void 0, );
@@ -26,8 +28,16 @@ var _jsxruntime = require('react/jsx-runtime');
 var styles = _reactnative.StyleSheet.create({
   container: { flex: 1 }
 });
-function PortalHost({ children }) {
+function PortalHost({ children, ...props }) {
+  const [styleProps] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
   const [portals, setPortals] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const [origin, setOrigin] = _react.useState.call(void 0, { x: 0, y: 0 });
+  const node = _react.useRef.call(void 0, null);
+  const measure = _react.useCallback.call(void 0, (_event) => {
+    _optionalChain([node, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.measureInWindow, 'call', _7 => _7((x, y) => {
+      setOrigin((current) => current.x === x && current.y === y ? current : { x, y });
+    })]);
+  }, []);
   const addPortal = _react.useCallback.call(void 0, (key, element) => {
     setPortals((current) => new Map(current).set(key, element));
   }, []);
@@ -40,10 +50,10 @@ function PortalHost({ children }) {
     });
   }, []);
   const methods = _react.useMemo.call(void 0, 
-    () => ({ addPortal, removePortal }),
-    [addPortal, removePortal]
+    () => ({ addPortal, removePortal, origin }),
+    [addPortal, removePortal, origin]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalContext.Provider, { value: methods, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { style: styles.container, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalContext.Provider, { value: methods, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { ref: node, onLayout: measure, style: [styles.container, styleProps], children: [
     children,
     Array.from(portals, ([key, element]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: element }, key))
   ] }) });

package/dist/chunk-WFEMJCXO.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkH4E4HDEPcjs = require('./chunk-H4E4HDEP.cjs');
+
+// src/hooks/use-merged-ref.ts
+var _react = require('react');
+function useMergedRef(...refs) {
+  return _react.useMemo.call(void 0, () => _chunkH4E4HDEPcjs.mergeRefs.call(void 0, ...refs), refs);
+}
+
+
+
+exports.useMergedRef = useMergedRef;

package/dist/chunk-WFZDAXDI.js

@@ -0,0 +1,26 @@
+// src/system/slot/children-to-string.ts
+import { isValidElement } from "react";
+function childrenToString(children) {
+  const text = stringify(children);
+  return text === null || text === "" ? null : text;
+}
+function stringify(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (isValidElement(node)) return null;
+  if (Array.isArray(node)) {
+    let text = "";
+    for (const child of node) {
+      const part = stringify(child);
+      if (part === null) return null;
+      text += part;
+    }
+    return text;
+  }
+  return null;
+}
+
+export {
+  childrenToString
+};