@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.31

package/dist/chunk-XFSW3ZNI.cjs

@@ -0,0 +1,145 @@
+"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; }
+
+var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
+
+
+var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
+
+// src/components/view/grid.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/view/grid.context.ts
+
+var GridContext = _react.createContext.call(void 0, null);
+var GridProvider = GridContext.Provider;
+function useGrid() {
+  const value = _react.useContext.call(void 0, GridContext);
+  if (value === null) {
+    throw new Error(
+      "XAUI: Grid.Item must be rendered inside a Grid \u2014 it spans that grid\u2019s columns, and outside one there is nothing to span."
+    );
+  }
+  return value;
+}
+function spanWidth({ cellWidth, columns, gap }, span) {
+  const clamped = Math.min(Math.max(Math.floor(span), 1), columns);
+  if (cellWidth === void 0) return `${100 / columns * clamped}%`;
+  return cellWidth * clamped + gap * (clamped - 1);
+}
+
+// src/components/view/grid.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var GridRoot = _react.forwardRef.call(void 0, function Grid({ children, columns = 2, gap = 0, style, onLayout, ...props }, ref) {
+  const [width, setWidth] = _react.useState.call(void 0, );
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const safeColumns = Math.max(Math.floor(columns), 1);
+  const cellWidth = width === void 0 ? void 0 : (width - gap * (safeColumns - 1)) / safeColumns;
+  const context = _react.useMemo.call(void 0, 
+    () => ({ cellWidth, columns: safeColumns, gap }),
+    [cellWidth, safeColumns, gap]
+  );
+  const handleLayout = (event) => {
+    const next = event.nativeEvent.layout.width;
+    if (next > 0 && next !== width) setWidth(next);
+    _optionalChain([onLayout, 'optionalCall', _ => _(event)]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      onLayout: handleLayout,
+      style: [
+        { flexDirection: "row", flexWrap: "wrap", rowGap: gap, columnGap: gap },
+        styleProps,
+        style
+      ],
+      ...rest,
+      children: _react.Children.map(
+        children,
+        (child) => isGridItem(child) ? child : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: { width: spanWidth(context, 1) }, children: child })
+      )
+    }
+  ) });
+});
+GridRoot.displayName = "XAUI.Grid";
+function isGridItem(child) {
+  if (child === null || typeof child !== "object") return false;
+  const type = child.type;
+  return _optionalChain([type, 'optionalAccess', _2 => _2.displayName]) === "XAUI.Grid.Item";
+}
+
+// src/components/view/grid-item.tsx
+
+
+
+var GridItem = _react.forwardRef.call(void 0, function GridItem2({ children, span = 1, style, ...props }, ref) {
+  const grid = useGrid();
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      style: [{ width: spanWidth(grid, span) }, styleProps, style],
+      ...rest,
+      children
+    }
+  );
+});
+GridItem.displayName = "XAUI.Grid.Item";
+
+// src/components/view/stack.tsx
+
+
+
+var StackRoot = _react.forwardRef.call(void 0, function Stack({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkZP2E2H2Gcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ position: "relative" }, styleProps, style], ...rest, children });
+});
+StackRoot.displayName = "XAUI.Stack";
+
+// src/components/view/stack-item.tsx
+
+
+
+var StackItem = _react.forwardRef.call(void 0, function StackItem2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkZP2E2H2Gcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ position: "absolute" }, styleProps, style], ...rest, children });
+});
+StackItem.displayName = "XAUI.Stack.Item";
+
+// src/components/view/row.tsx
+
+
+
+var Row = _react.forwardRef.call(void 0, function Row2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkZP2E2H2Gcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "row" }, styleProps, style], ...rest, children });
+});
+Row.displayName = "XAUI.Row";
+
+// src/components/view/column.tsx
+
+
+
+var Column = _react.forwardRef.call(void 0, function Column2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkZP2E2H2Gcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "column" }, styleProps, style], ...rest, children });
+});
+Column.displayName = "XAUI.Column";
+
+// src/components/view/index.ts
+var Stack2 = Object.assign(StackRoot, { Item: StackItem });
+var Grid2 = Object.assign(GridRoot, { Item: GridItem });
+
+
+
+
+
+
+
+exports.useGrid = useGrid; exports.Row = Row; exports.Column = Column; exports.Stack = Stack2; exports.Grid = Grid2;

package/dist/chunk-XQFAUDR2.cjs

@@ -0,0 +1,62 @@
+"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; }
+
+var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
+
+// src/system/portal/portal.tsx
+var _react = require('react');
+
+// src/system/portal/portal-context.ts
+
+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, );
+  _react.useLayoutEffect.call(void 0, () => {
+    _optionalChain([context, 'optionalAccess', _ => _.addPortal, 'call', _2 => _2(key, children)]);
+  }, [children, context, key]);
+  _react.useLayoutEffect.call(void 0, () => {
+    return () => _optionalChain([context, 'optionalAccess', _3 => _3.removePortal, 'call', _4 => _4(key)]);
+  }, [context, key]);
+  return null;
+}
+Portal.displayName = "XAUI.Portal";
+
+// src/system/portal/portal-host.tsx
+
+var _reactnative = require('react-native');
+var _jsxruntime = require('react/jsx-runtime');
+var styles = _reactnative.StyleSheet.create({
+  container: { flex: 1 }
+});
+function PortalHost({ children, ...props }) {
+  const [styleProps] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const [portals, setPortals] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const addPortal = _react.useCallback.call(void 0, (key, element) => {
+    setPortals((current) => new Map(current).set(key, element));
+  }, []);
+  const removePortal = _react.useCallback.call(void 0, (key) => {
+    setPortals((current) => {
+      if (!current.has(key)) return current;
+      const next = new Map(current);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+  const methods = _react.useMemo.call(void 0, 
+    () => ({ addPortal, removePortal }),
+    [addPortal, removePortal]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalContext.Provider, { value: methods, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { style: [styles.container, styleProps], children: [
+    children,
+    Array.from(portals, ([key, element]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: element }, key))
+  ] }) });
+}
+PortalHost.displayName = "XAUI.PortalHost";
+
+
+
+
+
+exports.PortalContext = PortalContext; exports.Portal = Portal; exports.PortalHost = PortalHost;

package/dist/chunk-ZH5XVNHG.js

@@ -0,0 +1,92 @@
+import {
+  createRecipe
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  Slot
+} from "./chunk-E2CWBQTV.js";
+import {
+  useStyleProps
+} from "./chunk-URSKA2VR.js";
+
+// src/components/divider/divider.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/divider/divider.recipe.ts
+import { StyleSheet } from "react-native";
+var SLOTS = ["root"];
+var VARIANT_TOKENS = { default: { bg: "separator" } };
+var HAIRLINE = StyleSheet.hairlineWidth;
+function thickness(of) {
+  return (theme) => {
+    const value = of(theme);
+    return { root: { height: value, width: value } };
+  };
+}
+var dividerRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    // One line for both orientations. In a column the cross axis is horizontal, so a
+    // stretched child is full width; in a row it is vertical, so the same word makes a
+    // vertical rule full height. `stretch` is ignored on the axis the thickness fixes,
+    // which is what lets one declaration serve both.
+    root: { alignSelf: "stretch" }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({ root: { backgroundColor: colors.bg } }),
+  variants: {
+    // Multiples of `borderWidth.default`, so a theme that thickens its edges thickens
+    // these with it. Only the hairline stands outside the scale, being a device pixel.
+    size: {
+      xs: thickness(() => HAIRLINE),
+      sm: thickness((theme) => theme.borderWidth.default),
+      md: thickness((theme) => theme.borderWidth.default * 2),
+      lg: thickness((theme) => theme.borderWidth.default * 6)
+    },
+    /** Second, so it releases the axis `size` had to write blind. */
+    orientation: {
+      horizontal: () => ({ root: { width: "auto" } }),
+      vertical: () => ({ root: { height: "auto" } })
+    }
+  },
+  /**
+   * `xs` where every other component defaults to `md`, and it is the one place in the
+   * library that departs from that: a rule you notice is a rule that is too thick, and
+   * the hairline is what a separator is at rest.
+   *
+   * `variant` is named here and nowhere else — there is one, the caller cannot choose it,
+   * and the recipe still needs it selected for `paint` and the tint to resolve.
+   */
+  defaultVariants: { variant: "default", size: "xs", orientation: "horizontal" }
+});
+
+// src/components/divider/divider.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = forwardRef(function Divider2({ children, orientation, size, color, asChild = false, style, ...props }, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = { orientation, size };
+  const styles = dividerRecipe.resolve({ theme, selection });
+  const tint = color ? dividerRecipe.tint({ theme, color, selection }) : void 0;
+  const Root = asChild ? Slot : View;
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      ...rest,
+      style: [styles.root, tint?.root, styleProps, style],
+      children: asChild ? children : null
+    }
+  );
+});
+Divider.displayName = "XAUI.Divider";
+
+export {
+  dividerRecipe,
+  Divider
+};